CSS3 Techniken

Quellen: CSS3 Generator, Perishablepress

Image-Reflections

	img {
	  -webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));
	  -webkit-border-radius: 3px;
	   border-radius: 3px;
	   border: 3px solid #666;
	}

Multiple Backgrounds

	.multiple-bg-images {
		background: url(http://domain.tld/path/layer-01.png) no-repeat 0 0;
		background: url(http://domain.tld/path/layer-01.png) no-repeat 0 0,
				url(http://domain.tld/path/layer-02.png) no-repeat 0 0,
				url(http://domain.tld/path/layer-03.png) no-repeat 0 0,
				url(http://domain.tld/path/layer-04.png) no-repeat 0 0;
	}

Background Sizing

	.background-size { 
		background-image: url(http://domain.tld/path/bg.png);
		-webkit-background-size: 50% 50%; /* Safari  */
		-khtml-background-size: 50% 50%;  /* Konquer */
		-moz-background-size: 50% 50%;    /* Firefox */
		-o-background-size: 50% 50%;      /* Opera   */
		background-size: 50% 50%;	  /* CSS3    */
	}

Border-Image

CSS Beispiel 1

	-moz-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 repeat; 
	-webkit-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 repeat; 
	border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 round stretch;
	border: double orange 1em;

CSS Beispiel 2

	.border-image {
		border: solid transparent;
		border-width: 10px 20px 10px 20px;

		-webkit-border-image: url("http://domain.tld/path/border.png") 10 20 10 20 round round;
		-khtml-border-image:  url("http://domain.tld/path/border.png") 10 20 10 20 round round;
		-icab-border-image:   url("http://domain.tld/path/border.png") 10 20 10 20 round round;
		-moz-border-image:    url("http://domain.tld/path/border.png") 10 20 10 20 round round;
		-o-border-image:      url("http://domain.tld/path/border.png") 10 20 10 20 round round;
		border-image:         url("http://domain.tld/path/border.png") 10 20 10 20 round round;
	}

Border-Radius

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

CSS3 (Opera browser) Mozilla equivalent WebKit equivalent
border-top-right-radius -moz-border-radius-topright -webkit-border-top-right-radius
border-bottom-right-radius -moz-border-radius-bottomright -webkit-border-bottom-right-radius
border-bottom-left-radius -moz-border-radius-bottomleft -webkit-border-bottom-left-radius
border-top-left-radius -moz-border-radius-topleft -webkit-border-top-left-radius
border-radius -moz-border-radius -webkit-border-radius

Box Shadow

CSS3

	-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
	-moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
	box-shadow: 5px 5px 10px rgba(0,0,0,0.5);

IE Nachimplementierung mit filter

	.ie-shadow {
		-ms-filter: /* IE8+ */
			"progid:DXImageTransform.Microsoft.Shadow(color=#999999, direction=0, strength=7) 
			 progid:DXImageTransform.Microsoft.Shadow(color=#777777, direction=90, strength=10) 
			 progid:DXImageTransform.Microsoft.Shadow(color=#777777, direction=180, strength=10) 
			 progid:DXImageTransform.Microsoft.Shadow(color=#999999, direction=270, strength=7)";
		filter: /* IE<8 */
			 progid:DXImageTransform.Microsoft.Shadow(color=#999999, direction=0, strength=7) 
			 progid:DXImageTransform.Microsoft.Shadow(color=#777777, direction=90, strength=10) 
			 progid:DXImageTransform.Microsoft.Shadow(color=#777777, direction=180, strength=10) 
			 progid:DXImageTransform.Microsoft.Shadow(color=#999999, direction=270, strength=7);
	}
	.ie-drop-shadow {
		-ms-filter: /* IE8+ */
			"filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=7, OffY=7, Color=#555, Positive=true)";
		filter: /* IE<8 */
			filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=7, OffY=7, Color=#555, Positive=true);
	}

Text Shadow

CSS3

	text-shadow: 2px 3px 10px #3b3a3b;
	filter: dropshadow(color=#3b3a3b, offx=2, offy=3);

IE Nachimplementierung mit filter

	.ie-text-shadow {
		-ms-filter: /* IE8+ */
			"progid:DXImageTransform.Microsoft.MotionBlur(strength=1, direction=220) 
			 progid:DXImageTransform.Microsoft.Blur(pixelradius=3) 
			 dropshadow(color=#777777, offx=1, offy=1)";
		filter: /* IE<8 */
			 progid:DXImageTransform.Microsoft.MotionBlur(strength=1, direction=220) 
			 progid:DXImageTransform.Microsoft.Blur(pixelradius=3) 
			 dropshadow(color=#777777, offx=1, offy=1);
	}

RGBA-Farben

A = Opacity
	background-color: rgba(125, 150, 175, 0.5);

Verläufe, Gradients

	.color-gradients {
		background-image: -moz-linear-gradient(top, #FFFF00, #FF0000);
		background-image: -webkit-gradient(linear, top, bottom, color-stop(0.00, #FFFF00), color-stop(1.00, #FF0000));
	}
	.color-gradients {
		background: -webkit-gradient(
			linear,
			left top,
			left bottom,
			color-stop(0.0, rgba(255, 255, 255, .0)),
			color-stop(0.15, rgba(255, 255, 255, .7)),
			color-stop(1.0, rgba(255, 255, 255, .7))
		);
		background: -moz-linear-gradient(
			center top,
			rgba(255, 255, 255, .0) 0%,
			rgba(255, 255, 255, .7) 15%,
			rgba(255, 255, 255, .7) 100%
		)
	}
	.color-gradients {
		background-image: -moz-radial-gradient(top left, circle farthest-corner, #FFFF00, #FF0000);
		background-image: -webkit-gradient(radial, top, bottom, color-stop(0.00, #FFFF00), color-stop(1.00, #FF0000));
	}

Opacity

	.opacity {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=70)";
		filter: alpha(opacity=70); /* internet explorer */
		-khtml-opacity: 0.7;      /* khtml, old safari */
		-moz-opacity: 0.7;       /* mozilla, netscape */
		opacity: 0.7;           /* fx, safari, opera */
	}

Font-Family

	@font-face {
		font-family: 'Arial';
		src: url('Arial.eot');
		src: local('?'),
		url('Arial.woff') format('woff'),
		url('Arial.ttf') format('truetype');
	}

Multiple Columns

	-moz-column-count: 3;
	-moz-column-gap: 7px;
	-webkit-column-count: 3;
	-webkit-column-gap: 7px;
	column-count: 3;
	column-gap: 7px;

rotate elements

	.rotate-this {
		behavior: url(-ms-transform.htc);
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}

Box Resize

	resize: both;
	overflow: auto;
	min-width: 50px; /*suggest a mid-width & min-height*/
	min-height 50px; 

Border Box

	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	-icab-box-sizing: border-box;
	-khtml-box-sizing: border-box; 

Content Box

	box-sizing: content-box;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	-ms-box-sizing: content-box;
	-o-box-sizing: content-box;
	-icab-box-sizing: content-box;
	-khtml-box-sizing: content-box; 

Outline

	outline: 3px dotted #8a198a;
	outline-offset: 10px; /*Delete if you don't want an offset*/

:nth-child differierende Formatierung für Tabellenzeilen etc

	/*gerade:*/
	table tr:nth-child(even) {
	  background-color: gray;
	}
	/*ungerade:*/
	table tr:nth-child(odd) {
	  background-color: gray;
	}
	/*drittes Element:*/
	table tr:nth-child(3) {
	  background-color: gray;
	}
	/*jedes dritte Element:*/
	table tr:nth-child(3n) {
	  background-color: gray;
	}
	/*die ersten drei Elemente:*/
	table tr:nth-child(-n+3) {
	  background-color: gray;
	}

weitere Pseudo-Selektoren

	:nth-last-child -> von hinten her gez&auml;hlt
	:nth-of-type -> das soundsovielte div etc.
	:nth-last-of-type -> s.o. anders herum
	:first-child
	:last-child
	:first-of-type
	:last-of-type
	:only-child -> das einzige Kind des Elements
	:only-of-type -> der einzige Nachfolger mit dem Typ
	:empty -> keine Kinder
	:enabled -> enabled user interface elements
	:disabled -> disabled user interface elements
	:checked -> checked user interface elements
	::selection -> currently selected element by user [::-moz-selection]
	:not(selector) -> negation von Selektor
	E ~ F -> Matches any F element that is preceded by an E element

Wiki-Datei des Artikels herunterladen