CSS3 Några exempel på nyheter i CSS3

Basdokument – som används i flertalet exempel Pingvinsång Fyra små pingviner, klädda i svart och vitt Leker i Arctic snön så ljus Det snöade och snöade hela dagen Och en liten pingvin vaggade bort. Tre små pingviner klädda i svart och vitt, leker i Arctic snön så ljus. <img src="Penguins.jpg" width="200" height="150" "utf-8"; /* CSS Document */ #left{padding:15px; background-color: #DDD; color: rgb(50,100,200); width: 300px; height: 400px; float:left; padding-left: 25px;} p{ color: #333; font-weight: bold;} img{ padding-left: 25px;}

Runda hörn img{ border-radius:10px; } #left { padding:15px; background-color: #DDD; color: rgb(50,100,200); width: 300px; height: 400px; float:left; padding-left: 25px; border:2px solid; border-radius:25px; border-color: #C00; }

Skugga – Box shadow #left { padding:15px; background-color: #DDD; color: rgb(50,100,200); width: 300px; height: 400px; float:left; padding-left: 25px; border:2px solid; border-radius:25px; border-color: #C00; -webkit-box-shadow: 10px 10px 5px #888888; }

Webkit - renderingsmotor

Skugga bakom text h1 { text-shadow: 5px 5px 2px #888;}

HSL-färger #middle2 { padding:15px; border:6px double rgb( ); border-radius: 25px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; background-color: hsl(120, 50%, 50%);

Transparenta färger HSLA #middle3 { padding:15px; border-radius: 25px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; background-image: url(test.jpg); color: hsla(120,0%,40%,.6);}

Gradienter #lower { padding:15px; background-color: #36F; border-radius: 25px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; background: -webkit-gradient (linear, left top, left bottom, from(#00abeb), to(#015));}

”Egna” { font-family: rubrikfont; src: url('MATURASC.TTF'); } h1 { font-family:rubrikfont;} #left { padding:15px; background-color: #DDD; color: rgb(50,100,200); width: 300px; height: 400px; float:left; padding-left: 25px; border:2px solid; border-radius:25px; border-color: #C00; font-family:rubrikfont; }

Rotera img{ border-radius:10px; /*transform:rotate(30deg);*/ -webkit-transform:rotate(30deg); }

Transition img{ border-radius:10px; transition: width 2s; -webkit-transition: width 2s; } #left :hover{ width:300px;} _1652.swf _1652.swf

Animering #left { padding:15px; background: #DDD; color: rgb(50,100,200); width: 300px; height: 400px; float:left; padding-left: 25px; border:2px solid; border-radius:25px; border-color: #C00; font-family:rubrikfont; -webkit-animation: myfirst 5s; myfirst /* Safari and Chrome */ { from {background: #DDD;} to {background: yellow;} } _1656.swf

Spalter.newspaper { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; } Utseende Pingviner skiljer sig ganska mycket &aringt i storlek och vikt trots att de är tämligen lika i kroppsform och dräkt. Huvudsakligen är de bl&aringsvarta eller bl&aringg

Vilka läsare fungerar - exempel