Cet encart se modifie à la volée lorsque la feuille de style de gauche est modifiée!
Have a lot of fun!
/* [Changez le "background" de la page en un "clic"] */
/* ------------------------------------------------------------------------------------------ Garçon, Un CSS3 ! Le générateur d'effet "CSS3" =================================================== Vous pouvez modifier les valeurs de la feuille de style à partir de cette page. Pour ce faire, double cliquez sur les valeurs choisies après avoir activé la règle (les règles actives apparaissent en couleur). Pour le reste ne vous inquiétez pas, tout est programmé pour s'exécuter automatiquement! Chaque fois que vous le souhaitez, vous pouvez copier tout ou partie de cette page et le coller dans votre propre feuille de style. Have a lot of fun! ------------------------------------------------------------------------------------------ */
/* [Vers le presse-papiers] [Activer la règle de] */
.box_round { -webkit-border-radius: 12px; /* Safari 3-4, iOS 1-3.2, Android ≤1.6 */ border-radius: 12px; /* Opera 10.5, IE9+, Safari 5, Chrome, Firefox 4+, iOS 4, Android 2.1+ */ /* Usage si vous ne voulez pas de "coulure" sur l'arrondi (voir lien extérieur) : */ -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; }
/* */
/* [Vers le presse-papiers] [Activer la règle de] */
.box_shadow { -webkit-box-shadow: 0px 0px 4px 0px #ffffff; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */ box-shadow: 0px 0px 4px 0px #ffffff; /* Opera 10.5, IE9+, Firefox 4+, Chrome 6+, iOS 5 */ }
/* */
/* [Vers le presse-papiers] [Activer la règle de] */
.box_gradient { background-color: #9900CC; background-image: -webkit-gradient(linear, left top, left bottom, from(#9900CC), to(#CCFFFF)); /* Safari 4+, Chrome */ background-image: -webkit-linear-gradient(top, #9900CC, #CCFFFF); /* Chrome 10+, Safari 5.1+, iOS 5+ */ background-image: -moz-linear-gradient(top, #9900CC, #CCFFFF); /* Firefox 3.6-15 */ background-image: -o-linear-gradient(top, #9900CC, #CCFFFF); /* Opera 11.10-12.00 */ background-image: linear-gradient(to bottom, #9900CC, #CCFFFF); /* Firefox 16+, IE10, Opera 12.50+ */ }
/* */
/* [Vers le presse-papiers] [Activer la règle de] */
.box_rotate { -webkit-transform: rotate(7.5deg); /* Safari 3.1+, Chrome */ -moz-transform: rotate(7.5deg); /* Firefox 3.5-15 */ -ms-transform: rotate(7.5deg); /* IE9+ */ -o-transform: rotate(7.5deg); /* Opera 10.5-12.00 */ transform: rotate(7.5deg); /* Firefox 16+, Opera 12.50+ */ }
/* */
/* [Vers le presse-papiers] [Activer la règle de] */
.box_scale { -webkit-transform: scale(0.8); /* Safari 3.1+, Chrome */ -moz-transform: scale(0.8); /* Firefox 3.5+ */ -ms-transform: scale(0.8); /* IE9+ */ -o-transform: scale(0.8); /* Opera 10.50+ */ transform: scale(0.8); }
/* */
/* [Vers le presse-papiers] [Activer la règle de] */
.box_3dtransforms { -webkit-perspective: 300; /* Safari 4+, Chrome 12+ */ -moz-perspective: 300; /* Firefox 10+ */ -ms-perspective: 300; /* IE10+ */ perspective: 300; -webkit-transform: rotateY(180deg); -webkit-transform-style: preserve-3d; -moz-transform: rotateY(180deg); -moz-transform-style: preserve-3d; -ms-transform: rotateY(180deg); -ms-transform-style: preserve-3d; transform: rotateY(180deg); transform-style: preserve-3d; }
/* */
/* [Vers le presse-papiers] [Activer la règle de] */
.box_transition { -webkit-transition: all 0.3s ease-out; /* Safari 3.2+, Chrome */ -moz-transition: all 0.3s ease-out; /* Firefox 4-15 */ -o-transition: all 0.3s ease-out; /* Opera 10.5–12.00 */ transition: all 0.3s ease-out; /* Firefox 16+, Opera 12.50+ */ }
/* */
/* [Vers le presse-papiers] [Activer la règle de] */
.box_textshadow {
text-shadow: 1px 1px 3px #888; /* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 */
}
/* */
/* [Vers le presse-papiers] [Activer la règle de] */
.box_opacity {
opacity: 0.9; /* Chrome 4+, Firefox 2+, Safari 3.1+, Opera 9+, IE9+, iOS 3.2+, Android 2.1+ */
}
/* */
/* [Vers le presse-papiers] */
* { -webkit-box-sizing: border-box; /* <=iOS4, <= Android 2.3 */ -moz-box-sizing: border-box; /* Firefox 1+ */ box-sizing: border-box; /* Chrome, IE8+, Opera, Safari 5.1*/ }
/* */
/* [Vers le presse-papiers] [Activer la règle de] */
.box_bgsize { -webkit-background-size: 100% 100%; /* Safari 3-4 */ background-size: 100% 100%; /* Opera, IE9+, Safari 5, Chrome, Firefox 4+ */ }
/* */
/* [Vers le presse-papiers] [Activer la règle de] */
.box_columns { -webkit-column-count: 2; -webkit-column-gap: 15px; /* Safari 3, Chrome*/ -moz-column-count: 2; -moz-column-gap: 15px; /* Firefox 3.5+ */ column-count: 2; column-gap: 15px; /* Opera 11+*/ }
/* */
/* [Vers le presse-papiers] [Activer la règle de] */
.box_animation:hover { -webkit-animation: myanim 5s infinite; /* Safari 5, Chrome */ -moz-animation: myanim 5s infinite; /* Firefox 5-15 */ -o-animation: myanim 5s infinite; /* Opera 12+ */ animation: myanim 5s infinite; /* Safari 5, Chrome, Firefox 16+ */ } @-webkit-keyframes myanim { 0% { opacity: 0.0; } 50% { opacity: 0.5; } 100% { opacity: 1.0; } } @-moz-keyframes myanim { 0% { opacity: 0.0; } 50% { opacity: 0.5; } 100% { opacity: 1.0; } } @-o-keyframes myanim { 0% { opacity: 0.0; } 50% { opacity: 0.5; } 100% { opacity: 1.0; } } @keyframes myanim { 0% { opacity: 0.0; } 50% { opacity: 0.5; } 100% { opacity: 1.0; } }
/* */
/* [Vers le presse-papiers] [Activer la règle de] */
.matrix {}Déformez le cadre pour récupérer le code ...
/* [Vers le presse-papiers] */
@font-face { font-family: 'WebFont'; src: url('myfont.woff') format('woff'), /* Firefox 3.6+, IE9+, Chrome 6+, Safari 5.1+*/ url('myfont.ttf') format('truetype'); /* Safari 3—5, Chrome4+, Firefox 3.5, Opera 10+ */ }
/* [Vers le presse-papiers] [Activer la règle de] */
.box_tabsize { -moz-tab-size: 2; /* Firefox 4+ */ -o-tab-size: 2; /* Opera 10.60+ */ tab-size: 2; }
/*
Les touches du clavier "up/down" fonctionnent mais vous pouvez également utiliser la molette de votre sourie. ;)
A bientôt ... Pour des transformations "extra css" (skew, scale) et bien plus encore!
Pour donner votre avis ou faire un retour d'expérience.
"Garçon, un CSS3" et la traduction du projet "css3please", respectant de facto l'esprit "Open source" qui le nourrit!.
reportez un bug ou contribuez!
Notes:
+ "IE<10" ne supporte pas la balise "gradient". De possibles solutions peuvent être trouvées en utilisant "SVG" ou en utilisant un filtre "wrapper div".
+ Les rotations de la balise "transform" ne s'affichent pas de la même manière à partir de "IE". Vous pouvez chercher dans la bibliothèque de heygrady's
pour la balise "transform" et son excellent guide pour des résultats optimums.
+ Si vous utilisez beaucoup de "transitions", Matthew Lein’s Ceaser génère des codes avec beaucoup de "presets", en incluant les équations de "Penner".
© 2012; Paul Irish et Jonathan Neal ont monté, en association w/ Boaz Sender et Zoltan Hawryluk.
Si vous aimez cette page, vous allez apprécier également yayQuery e mothereffinghsl.com. <3
*/
/* __Changelog__ 2012.08.29: Removed IE6-8 support. 2012.06.06: Removed -ms prefixes from transition, animations and gradients. 2012.03.02: Added box-sizing. Woo! 2012.01.21: Added transform scale and 3d transforms.(thx uxder) 2012.01.19: Linear Gradient Syntax Updated. (thx cssdeck and uxder!) 2012.01.14: Addedtab-size
. (Blame Mathias if anything breaks!) 2011.10.23: Added the sweet matrix manip demo from Peter Nederlof. Thx Peter! 2011.10.18: CSS Animations added. (thx wookiehangover!) 2011.07.27: Added multicolumn. (thx hotmeteor!) 2011.04.12: Added gradient for IE10! (thx calvein!) 2011.04.11: Added background-clip for the border-radius rule (thx matthewlein!). 2011.04.09: Simplified and corrected MS gradient filter syntax. (thanks david meister) 2011.04.07: Added background-size (thx codler!). 2011.03.26: Added Ceaser link. 2011.03.15: Added linear gradients for Opera 11.10. (Thanks, Mike!) 2012.03.01: Went one year into the future to make a minor text change. Phew! 2011.02.22: Browser support updated. 2011.02.20: Tab key support added (good idea, iszak) 2011.02.20: Fixed longstanding rgba NaN bug. 2011.02.16: Fixed IE filter sizingMethod (moved to the end) after maybe 10 bug reports for it. (Whoops.) 2011.02.10: New gradient syntax (Thx Sami). Update @font-face syntax. 2011.01.05: Removed unneeded-ms-filter
declarations and added unprefixedlinear-gradient
. (Thx Mathias) 2010.11.19: Better handling of users without Flash. (Thx Mathias) 2010.11.06: Toggle to light skin (Thx Curtis Blackwell!). IE9 Transform added. Clipboard only grabs rules, no selector. 2010.10.05: Unprefixed transitions, transforms 2010.06.02: Clipboard click strips comments 2010.05.03: IE Rotation bug fixed. (Thx Joshua!) 2010.04.11: text-shadow added. 2010.04.05: Real rotation in IE (Thx Zoltan!). Added transition. No more DropShadow for IE (it's crap) 2010.04.04: New copy to clipboard style. Better mousewheel support. 2010.03.25: Fixed the gradient flipflop. Fixed positioning bug. */
.box_rgba { background-color: transparent; background-color: rgba(180, 180, 144, 0.6); /* Firefox 3+, Safari 3+, Opera 10.10+, Chrome, IE9+ */ }
/* */