1 / 17

CSS3

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>

alpha
Download Presentation

CSS3

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSS3 Några exempel på nyheter i CSS3

  2. Basdokument – som används i flertalet exempel <!DOCTYPE HTML> <html> <linkhref="ex_a_base.css" rel="stylesheet" type="text/css"> <body> <div id="left"> <H1>Pingvins&aring;ng</H1> <p> Fyra sm&aring; pingviner, kl&auml;dda i svart och vitt<br> Leker i Arctic sn&ouml;ns&aring; ljus<br> Det sn&ouml;ade och sn&ouml;ade hela dagen<br> Och en liten pingvin vaggade bort.<br> Tre sm&aring; pingviner kl&auml;dda i svart och vitt,<br> leker i Arctic sn&ouml;ns&aring; ljus.</p> <imgsrc="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;}

  3. 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; }

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

  5. Webkit - renderingsmotor

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

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

  8. 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); }

  9. 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, leftbottom, from(#00abeb), to(#015));}

  10. ”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; }

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

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

  13. 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-keyframesmyfirst/* 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

  14. 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 &auml;rt&auml;mligen lika i kroppsform och dr&auml;kt. Huvudsakligen &auml;r de bl&aringsvarta eller bl&aringg

  15. Vilka läsare fungerar - exempel

More Related