Presentation laddar. Vänta.

Presentation laddar. Vänta.

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.

Liknande presentationer


En presentation över ämnet: "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."— Presentationens avskrift:

1 CSS3 Några exempel på nyheter i CSS3

2 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.

3

4 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; }

5 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; }

6 Webkit - renderingsmotor

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

8 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%);

9 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);}

10 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));}

11 ”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; }

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

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

14 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

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

16

17 Vilka läsare fungerar - exempel


Ladda ner ppt "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."

Liknande presentationer


Google-annonser