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.

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. <img src="Penguins.jpg" width="200" height="150" alt="Penguins"> @charset "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;}

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(142 137 129); 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” fonter @font-face { 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;} 2011-01-22_1652.swf http://www2.tfe.umu.se/systemteknik/webbteknik/CSS/2 011-01-22_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; } @-webkit-keyframes myfirst /* Safari and Chrome */ { from {background: #DDD;} to {background: yellow;} } 2011-01-22_1656.swf http://www2.tfe.umu.se/systemteknik/webbteknik/CSS/2011-01-22_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 &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

16

17 Vilka läsare fungerar - exempel