CSS3 - umu.se€¦ · Basdokument – som används i flertalet exempel

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

2011-01-22_1652.swf

2011-01-22_1652.swf

2011-01-22_1652.swf

2011-01-22_1652.swf

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

2011-01-22_1656.swf

2011-01-22_1656.swf

2011-01-22_1656.swf

2011-01-22_1656.swf

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 &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

Documents

CSS3 - umu.se€¦ · Basdokument – som används i flertalet exempel