Home / Accueil » Lab's » Recapitulatif conference decouverte HTML5/CSS3

Récapitulatif sur les border-radius, box-shadow, text-shadow et animations css3.

border-radius:0px;

border-radius:50px;

box-shadow:1px 1px 5px #6C7F27;

box-shadow:5px 5px 10px #6C7F27;

text-shadow:1px 0px 4px #EEEEEE;

text-shadow:0px 5px 15px #EEEEEE;

#borderradius {
		-moz-border-radius:0px;
		-webkit-border-radius:0px;
		-ms-border-radius:0px;
		-o-border-radius:0px;
		border-radius:0px;
		
		-webkit-transition:-webkit-border-radius 500ms ease-out;
		-moz-transition:-moz-border-radius 500ms ease-out;
		-ms-transition:-ms-border-radius 500ms ease-out;
		-o-transition:-o-border-radius 500ms ease-out;
		transition:border-radius 500ms ease-out;
		
	}
	
		#borderradius:hover {
			-moz-border-radius:50px;
			-webkit-border-radius:50px;
			-ms-border-radius:50px;
			-o-border-radius:50px;
			border-radius:50px;
		
			-webkit-transition:-webkit-border-radius 500ms ease-out;
			-moz-transition:-moz-border-radius 500ms ease-out;
			-ms-transition:-ms-border-radius 500ms ease-out;
			-o-transition:-o-border-radius 500ms ease-out;
			transition:border-radius 500ms ease-out;
		}
		
	#boxshadow {
		-moz-box-shadow:1px 1px 5px #6C7F27;
		-webkit-box-shadow:1px 1px 5px #6C7F27;
		-ms-box-shadow:1px 1px 5px #6C7F27;
		-o-box-shadow:1px 1px 5px #6C7F27;
		box-shadow:1px 1px 5px #6C7F27;
		
		-webkit-transition:-webkit-box-shadow 500ms ease-out;
		-moz-transition:-moz-box-shadow 500ms ease-out;
		-ms-transition:-ms-box-shadow 500ms ease-out;
		-o-transition:-o-box-shadow 500ms ease-out;
		transition:box-shadow 500ms ease-out;
	}
	
		#boxshadow:hover {
			-moz-box-shadow:5px 5px 10px #6C7F27;
			-webkit-box-shadow:5px 5px 10px #6C7F27;
			-ms-box-shadow:5px 5px 10px #6C7F27;
			-o-box-shadow:5px 5px 10px  #6C7F27;
			box-shadow:5px 5px 10px #6C7F27;
	
			-webkit-transition:-webkit-box-shadow 500ms ease-out;
			-moz-transition:-moz-box-shadow 500ms ease-out;
			-ms-transition:-ms-box-shadow 500ms ease-out;
			-o-transition:-o-box-shadow 500ms ease-out;
			transition:box-shadow 500ms ease-out;
		}
		
	#textshadow {
		text-shadow:1px 0px 4px #EEEEEE;
		
		-webkit-transition:text-shadow 500ms ease-out;
		-moz-transition:text-shadow 500ms ease-out;
		-ms-transition:text-shadow 500ms ease-out;
		-o-transition:text-shadow 500ms ease-out;
		transition:text-shadow 500ms ease-out;
	}
	
		#textshadow:hover{
			text-shadow:0px 5px 15px #EEEEEE;
			
			-webkit-transition:text-shadow 500ms ease-out;
			-moz-transition:text-shadow 500ms ease-out;
			-ms-transition:text-shadow 500ms ease-out;
			-o-transition:text-shadow 500ms ease-out;
			transition:text-shadow 500ms ease-out;
		}
	
	#borderradius p:last-child,
	#boxshadow p:last-child,
	#textshadow p:last-child{visibility:hidden;}
	
	#borderradius:hover p:first-child,
	#boxshadow:hover p:first-child,
	#textshadow:hover p:first-child{visibility:hidden;}
	
	#borderradius:hover p:last-child,
	#boxshadow:hover p:last-child,
	#textshadow:hover p:last-child{visibility:visible;}

GeekFG's web services & applications

Plus d'information depuis mon blog sur conférence découverte html5 css3.

Lab's

Trier des couleurs en javascript

Recapitulatif conference decouverte HTML5/CSS3

Spritely in PURE CSS3 using CSS3 animations, transitions, transform (webkit only)

Spritely in PURE CSS3 using CSS3 animations, transforms (webkit only)