mineaeliza: { web design }: css3

Se afișează postările cu eticheta css3. Afișați toate postările

Beautifull rope jumping robot css animation at mapbox.com


.robot{
 width: 300px;
 -webkit-animation: rainbow 4s steps(59) infinite;
}

.animate {
  -webkit-transition:all .125s;
     -moz-transition:all .125s;
      -ms-transition:all .125s;
          transition:all .125s;
  }

.robot-animation {
  background:url(img/footerguy-jump.jpg) no-repeat 0 0;
  background-size: auto 100%;
  height: 0;
  padding-bottom: 100%;
  transition: none;
  -webkit-animation: walk 2s steps(59) infinite;
     -moz-animation: walk 2s steps(59) infinite;
       -o-animation: walk 2s steps(59) infinite;
          animation: walk 2s steps(59) infinite;
  -webkit-animation-play-state:running;
     -moz-animation-play-state:running;
       -o-animation-play-state:running;
          animation-play-state:running;
}

@-webkit-keyframes walk {
   from { background-position: 0 0; }
     to { background-position: 100% 0; }
}

@-moz-keyframes walk {
   from { background-position: 0 0; }
     to { background-position: 100% 0; }
}

@-o-keyframes walk {
   from { background-position: 0 0; }
     to { background-position: 100% 0; }
}

@keyframes walk {
   from { background-position: 0 0; }
     to { background-position: 100% 0; }
}

@-webkit-keyframes rainbow {
   from { -webkit-filter:hue-rotate(10deg); }
     to { -webkit-filter:hue-rotate(360deg); }
}

@keyframes rainbow {
 from {
    -webkit-filter:hue-rotate(10deg);
            filter:hue-rotate(10deg);
    }
  to {
    -webkit-filter:hue-rotate(360deg);
            filter:hue-rotate(360deg);
    }
}

mapbox.com

Transitions and transformations with css3 and jquery fallback for ie

.home-section:hover img{
-webkit-transform: rotate(315deg) scale(0.5);
 -moz-transform: rotate(315deg) scale(0.5);
 -o-transform: rotate(315deg) scale(0.5); 
-ms-transform:scale(0.5,0.5) rotate(315deg) ; /* the order is important */
 transform: rotate(315deg) scale(0.5); /* future standard */
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in; 
-ms-transition: all 1s ease-in; /* future IE 10 */
transition: all 1s ease-in; /* future standard */
}

.home-section img{
-webkit-transition: all 2s ease-in-out;
 -moz-transition: all 2s ease-in-out;
 -o-transition: all 2s ease-in-out;
 -ms-transition: all 2s ease-in-out; /* future IE 10 */
transition: all 2s ease-in-out; /* future standard */
}

For IE 9:

 <!--[if lte IE 9]>
  <script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">

</script>

<script type="text/javascript" src="jquery-css-transform.js"></script>

<script type="text/javascript" src="jquery-animate-css-rotate-scale.js">

</script>

<script type="text/javascript">

$().ready(function() {
$('.home-section').hover(function () {								   
$(this).find('img').animate({rotate: '+=315deg', scale: '-=0.5'}, 1000);
},function () {								   
$(this).find('img').animate({rotate: '-=315deg', scale: '+=0.5'}, 2000);
});
});			
	</script>
   <![endif]-->

Where to find jquery-animate-css-rotate-scale.js :
http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html Thanks Zach!

More on CSS3 Transitions and transformations:
http://msdn.microsoft.com/en-us/library/ff974936%28v=vs.85%29.aspx
http://css3please.com/

Selectorii CSS

Selector	Ce reprezinta	Denumire
*	Orice element	Selector universal
E	Orice element E, i.e orice marcaj de tipul E	Selectori de marcaj
E F	Orice element F, care este descendent al unui element de tip E	Selector Descendent
E > F	Orice element F care este copil al unui element de tip E	Selector copil
E:first-child	Orice element E, cand este primul copil ala parintelui sau	Selector primul-copil
E:link E:visited	Linkurile nevizitate inca/vizitate	Pseudo-clasele linkurilor
E:active E:hover E:focus	Linkurile E, la diferite actiuni (atentie la ordinea LOVE/HATE)	Pseudo-clasele dinamice
E:lang(c)	Orice element E daca este in limba c	Pseudo clasa de limba
E + F	Orice element F ce este imediat urmator unui element vecin, de tip E	Selector adiacent
E[x]	Orice element E, al carui atribut x este setat	Selector de atribut
E[x="eroare"]	Orice element E, al carui atribut x are exact valoarea "eroare"	Selector de atribut
E[x~="warning"]	Orice element E, al carui atribut x are contine valoarea "eroare"(dintr-o lista de valori)	Selector de atribut
E[x\|="en"]	Orice element E, al carui atribut x incepe cu "en"	Selector de atribut
DIV.warning	Echivalent cu DIV[class~="warning"]: orice div ale carui clase contine si valoarea "warning"	Selector de clasa
E#myid	Orice element E cu id-ul "myid"	Selector de id

I heart CSS - Firefox only

Made with CSS3.

Vezi si alte iconite facute exclusiv cu CSS: http://rathersplendid.net/cssicons/

Eternele colturi rotunjite in css cross browser

border:5px solid #666;
-o-border-radius: 20px; // pentru Opera
-icab-border-radius: 20px; //pentru Icab
-khtml-border-radius: 20px;// pentru Konqueror
-moz-border-radius: 20px;// pentru Firefox
-webkit-border-radius: 20px;// pentru Safari si Chrome
border-radius: 20px;// viitorul standard

Ps. Despre IE:
Prezent:
"While the W3C has specified the border-radius properties in its latest CSS3 working draft, Microsoft has not implemented the border-radius properties in Internet Explorer 8." vezi http://msdn.microsoft.com/en-us/library/bb250413%28VS.85%29.aspx#borderradius

Viitorul IE9:
A more meaningful (from the point of view of web developers) example of standards support involves rounded corners. Here’s IE9 drawing rounded corners

Update: Da, Ie9 suporta border-radius !!!

Css3 browser support - octombrie 2008

Iata rezultatele testului pentru selectori css3:

Firefox 3.0.3 From the 43 selectors 36 have passed, 0 are buggy and 7 are unsupported (Passed 373 out of 578 tests)
Safari 3.1.2/525.21 From the 43 selectors 43 have passed, 0 are buggy and 0 are unsupported (Passed 578 out of 578 tests)
Chrome 0.2.149.30 - Safari/525.13 From the 43 selectors 43 have passed, 0 are buggy and 0 are unsupported (Passed 578 out of 578 tests)
IE 6.0.2900.5512 From the 43 selectors 10 have passed, 1 are buggy and 32 are unsupported (Passed 276 out of 578 tests)
IE7 From the 43 selectors 13 have passed, 4 are buggy and 26 are unsupported (Passed 330 out of 578 tests)
Opera 9.52 From the 43 selectors 43 have passed, 0 are buggy and 0 are unsupported (Passed 578 out of 578 tests)
IE8 beta2 From the 43 selectors 22 have passed, 1 are buggy and 20 are unsupported (Passed 349 out of 578 tests)

Prin urmare selectorii css3 pot fi folositi fara probleme in Opera, Safari si Chrome. (suport 100%).

Iata si definitiile acestora la http://www.w3.org/TR/css3-selectors/#selectors

css3 stuf

SelectORacle

mineaeliza: { web design }