css3 - umu.se€¦ · basdokument – som används i flertalet exempel
TRANSCRIPT
CSS3
Några exempel på nyheter i CSS3
Basdokument – som används i flertalet exempel
<!DOCTYPE HTML> <html> <link href="ex_a_base.css" rel="stylesheet" type="text/css"> <body> <div id="left"> <H1>Pingvinsång</H1> <p> Fyra små pingviner, klädda i svart och vitt<br> Leker i Arctic snön så ljus<br> Det snöade och snöade hela dagen<br> Och en liten pingvin vaggade bort.<br> Tre små pingviner klädda i svart och vitt,<br> leker i Arctic snön så ljus.</p> <img src="Penguins.jpg" width="200" height="150" alt="Penguins"> </div> </body> </html>
@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;}
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(142 137 129); 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” 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; }
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;} 2011-01-22_1652.swf http://www2.tfe.umu.se/systemteknik/webbteknik/CSS/2011-01-22_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; } @-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
Spalter
.newspaper { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; } <p class="newspaper"> Utseende<br> 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
Vilka läsare fungerar - exempel