|
Poslao: 23 Maj 2013 11:36
|
offline
- FoxVanis
- Ugledni građanin
- Web Designer, PHP Developer; HTML, CSS, SQL, jQuery Programmer
- Pridružio: 13 Jun 2010
- Poruke: 307
- Gde živiš: Subotica
|
Imam jedan CSS3 loader koji radi samo na Chrome, Safari i FireFox. Da li se može dodati neki kod da prepozna i Opera i IE u jQuery?
<style>
/* LOADER */
.circle {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-right:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px #2187e7;
width:50px;
height:50px;
margin:0 auto;
-moz-animation:spinPulse 1s infinite ease-in-out;
-webkit-animation:spinPulse 1s infinite linear;
}
.circle1 {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-left:5px solid rgba(0,0,0,0);
border-right:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 15px #2187e7;
width:30px;
height:30px;
margin:0 auto;
position:relative;
top:-50px;
-moz-animation:spinoffPulse 1s infinite linear;
-webkit-animation:spinoffPulse 1s infinite linear;
}
@-moz-keyframes spinPulse {
0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;}
50% { -moz-transform:rotate(145deg); opacity:1; }
100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spinoffPulse {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg); }
}
@-webkit-keyframes spinPulse {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
50% { -webkit-transform:rotate(145deg); opacity:1;}
100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spinoffPulse {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
}
</style>
<div style="width:100px; padding-top:100px;">
<div class="circle"></div>
<div class="circle1"></div>
</div>
Voleo bih ako nije moguće uraditi za Operu i IE u jQuery-ju onda da bar loaduje neku animiranu GIF sliku kada se ova 2 browsera otvore. Hvala!
|
|
|
|
|
Registruj se da bi učestvovao u diskusiji. Registrovanim korisnicima se NE prikazuju reklame unutar poruka.
|
|
|
|
|
Poslao: 23 Maj 2013 12:19
|
offline
- Rastafarii
- Moderator foruma
- Pridružio: 22 Mar 2006
- Poruke: 3760
- Gde živiš: 127.0.0.1
|
@FoxVanis: Koristis "tzv" vendor prefikse, i savrseno je normalno sto -webkit i -moz rade samo u Webkit browserima (Safari, Chrome, Chromium) i Firefoxu.
Mani se toga. Uzmi lepo animirani GIF i resi sebe muka. IE i CSS 3 se vole skoro kao Sv. Djordje i azdaha.
@AVP: Procitaj pitanje - to sto FoxVanis hoce nema ama bas nikakve veze sa tvojim odgovorom. Covek hoce slicicu koja se vrti, a ti mu dajes linkove za automatsko ucitavanje JS-a. Nidje veze.
|
|
|
|
|
|
|
Poslao: 23 Maj 2013 12:38
|
offline
- Peca
- Glavni Administrator
- Predrag Damnjanović
- SysAdmin i programer
- Pridružio: 17 Apr 2003
- Poruke: 23211
- Gde živiš: Niš
|
Napisano: 23 Maj 2013 12:30
naviknite se da ovakve stvari postavljate na jsFiddle.
ovako - http://jsfiddle.net/GPNwV/
na taj način onaj koji želi da vam pomogne ima ispred sebe i spremljen kod, i editor, i lepo može da stisne Run i vidi rezultat.
Dopuna: 23 Maj 2013 12:38
@Fox
za detekciju browsera - http://api.jquery.com/jQuery.browser/
|
|
|
|
|
|
|
|
|
|
|
Poslao: 23 Maj 2013 18:46
|
offline
- Rastafarii
- Moderator foruma
- Pridružio: 22 Mar 2006
- Poruke: 3760
- Gde živiš: 127.0.0.1
|
CSS3 je toliko mocan da je to zlo, ali pre koriscenja bilo koje funkcionalnosti proveriti koji browser sta podrzava na CanIUse.com.
Naravno, IE ce uglavnom podrzavati CSS3 negde oko verzije 18, imajuci u vidu da jos uvek ne podrzava ni CSS2 u potpunosti...
|
|
|
|
|
|
|
|
