Se først på CSS3 webdesignelementer

Sammen med bruk av HTML5 ser vi nå fremskritt i CSS-koding, bedre kjent som CSS3. Det er flere funksjoner og funksjoner som kan brukes i dag for å definere styling av slike webdesignelementer som visningsblokkeringsregler, graderinger, tabeller, skrifter, kolonner, bilder, avrundede hjørner, 3D-tekst og overgangseffekter. Andre inkluderer grenser, bakgrunner, farge, teksteffekter, brukergrensesnitt, velgere, grunnleggende boksmodeller, generert innhold og andre moduler. Dette innlegget vil demonstrere flere av disse CSS3-kodingseksemplene. Andre vil bli demonstrert i senere innlegg.

CSS3-moduler

CSS3 har blitt delt opp i flere moduler av W3C slik at fremdriften deres kan spores mot den anbefalte statusen, hver på et annet nivå etter hvert som de utvikler seg. Foreløpig har ingen moduler ennå nådd anbefalingsstatusen. CSS3.info-modulstatustabellen oppdateres regelmessig og inkluderer foreslått, kandidat, siste samtale, arbeidsutkast og kunngjorte moduler.

CSS3 Visningsregel

Følgende styling for visningsblokk brukes i forbindelse med HTML5-elementer, og legges til i din standard CSS-fil:

 adresse, artikkel, til side, 
 lerret, fig caption, figur, 
 bunntekst, topptekst, gruppe, nav, 
 seksjon, sammendrag { 
 viser: blokk; 
 } 

Nettleserprefikser i regler

Følgende prefikser brukt i reglene for de mer populære nettleserne er listet opp nedenfor og vil bidra til å sikre støtte over tvers av nettlesere:

  • Web-kit brukes til Chrome og Safari; syntaks er -webkit-
  • Moz brukes for Firefox og Mozilla; syntaks er -moz-
  • Khtml brukes til KDE-prosjektet og Konqueror; syntaks er -khtml-
  • O brukes til Opera; syntaks er -o-
  • MS for IE; syntaks er -ms-

I de fleste tilfeller må den faktiske egenskapen til regelen være den aller siste oppføringen i CSS-stilen. som sådan bør webkit-, moz-, Khtml-, MS- og O-reglene vises før den siste egenskapen til elementet i samme regel. For eksempel er eksempler på forhåndsregler vist nedenfor i blokkeringsruten for grensradius:

 .entry blockquote.right { 
 bredde: 200px; font-style: normal font-størrelse: 1.3em; 
 margin: 0.3em 0 0.3em 15px polstring: 0.3em 0; 
 kant: tynn; 
 border-color: # A0A0A4; 
 border-style: dobbel; 
 border-radius: -moz-border-radius (3px dobbel #aaa); 
 border-radius: -webkit-border-radius (3px dobbel #aaa); 
 border-radius: -khtml-border-radius (3px dobbel #aaa); 
 border-radius: -o-border-radius (3px dobbel #aaa); 
 border-radius: 3px dobbelt #aaa; 
 kantbredde: 3px 0; 
 tekstjustering: venstre; flyte: høyre; 
 } 
Dette eksempelet på HTML for blockquote er nedenfor, fulgt av visning i Firefox 6.0 ( figur A ).
 Jeg finner fremdeles hver dag for kort til alle tankene 
 Jeg vil tenke, alle turene jeg vil ta, alle bøkene 
 Jeg vil lese, og alle vennene jeg vil se. 
 John Burroughs 

Figur A

CSS3-gradienter

Forløp i CSS3 kan inkludere fargestopp, inkludert jevnlige stopp, vilkårlige stopp, lineære graderinger, lineær bakgrunn, radielle sentre og radielle posisjoner. I eksemplet CCS3-kode nedenfor, legg merke til fallbackfargen og png-bildet som er referert før prefiksgradientene, og deretter vises prefikskodelinjene for Safari, Chrome, Firefox, IE og Opera neste.

 .gradient1-bg { 
 / * fallback / image farge uten omslag * / 
 background-color: #CCFFFF; 
 / * fallback image * / 
 bakgrunnsbilde: url (bilder / fallback-gradient1.png); 
 / * Safari 4+, Chrome 1-9 * / 
 bakgrunnsbilde: -webkit-gradient (lineær, 0% 0%, 0% 0%, fra (#CCCCFF), til (#CCFFFF)); 
 / * Safari 5.1+, Mobile Safari, Chrome 10+ * / 
 bakgrunnsbilde: -webkit-lineær gradient (topp, #CCCCFF, #CCFFFF); 
 / * Firefox 3.6+ * / 
 bakgrunnsbilde: -moz-lineær gradient (topp, #CCCCFF, #CCFFFF); 
 / * IE 10+ * / 
 bakgrunnsbilde: -ms-lineær gradient (topp, #CCCCFF, #CCFFFF); 
 / * Opera 11.10+ * / 
 bakgrunnsbilde: -o-lineær gradient (topp, #CCCCFF, #CCFFFF); 
 } 
Eksemplet nedenfor viser HTML-kode for den lineære gradienten etterfulgt av gjengivelsen i Chrome 13.0.782 ( figur B ).

Lineær gradient Topp til bunn gradient

Figur B

CSS3-tabeller

Flere stylingsalternativer for tabeller inkluderer å kunne bruke velgere for rare eller til og med rader, eller spesifisere eksakte rader som "første", "sist", "tredje" med spesielle bakgrunnsfarger.

Flere prøver er listet opp her:

Bruken av tr th title = "", tbody og tfoot, og velgere, som i tr: nth-child (odd) eller (til og med) tillater styling for hver andre rad i et bord, for eksempel. Andre er: (første) eller (sist), (tredje) eller (fjerde). Her er et eksempel på svevet :

 tbody tr: nth-child (jevn): hover td 
 {Bakgrunn: RGB (254, 255, 249); color: rgb .....} 

Ta en titt på dette CSS3-stylingeksemplet:

 tr th title = "Tabelleksempler" { 
 farge: rgb (150, 0, 0); 
 } 
 tbody td { 
 font-family: "Courier New", Courier, monospace; 
 bakgrunn: rgb (175, 170, 150); 
 padding-top: 5 px; 
 } 
 tbody tr; nth-child (odd) td { 
 bakgrunn: rgb (150, 140, 120); 
 farge: rgb (240, 240, 240); 
 } 
 tbody tr: nth-child (even) td { 
 bakgrunn: rgb (200, 210, 200); 
 farge: rgb (50, 50, 50); 
 høyde: 20 piksler; 
 } 
 tbody tr: nth-child (odd) td, tbody tr: nth-child (even) td { 
 height: 20px: 
 } 
 tbody tr: nth-child (odd): hover td, tbody tr: nth-child (even): hover td { 
 bakgrunn: rgb (250, 255, 245); 
 farge: rgb (55, 45, 35); 
 } 
Med CSS3-koden over resulterer følgende HTML-kode i en tabell som vist i Chrome 13.0.782 i figur C.
Rad 1
Rad 2
Rad 3

Figur C

CSS3-skrifter

Mest sannsynlig kunne jeg vie et helt innlegg på CSS3-skrifter, og vil sannsynligvis også i fremtiden, men foreløpig vil jeg bare ta lett på emnet. Skrifter for utskrift er ikke de samme for nettfonter, så generelt sett må du kjøpe skrifter og legge dem på webserveren din for å forsikre deg om at de er lisensiert for bruk. Motsatt ble @ font-face-regelen først introdusert med CSS2 implementert med IE 5; den baserte seg imidlertid på Embedded Open Type (EOT) eller .eot fontfilformat, og ingen andre nettlesere brukte den den gangen. Siden Safari 3.1 har webutviklere kunnet bruke hvilken som helst lisensiert TrueType-font (TTF) .ttf-filtype på sine nettsteder.

Som angitt av W3C, tillater @ font-face-regelen å koble til skrifter som automatisk aktiveres ved behov. Dette gjør det mulig for nettforfattere å velge en font som passer perfekt til designmålene for en gitt side i stedet for å begrense fontvalget til et sett med skrifter som er tilgjengelige på alle plattformer. Et sett med fontbeskrivere definerer plasseringen til en fontressurs, enten lokalt eller eksternt, sammen med stilegenskapene til et individuelt ansikt. Flere @ font-face-regler kan brukes til å konstruere skriftfamilier med en rekke ansikter. Ved å bruke CSS-skrifttilpasningsregler kan en brukeragent selektivt laste ned bare skrifttypene som er nødvendige for et gitt stykke tekst.

Den generelle formen for en @ font-face-regel er:

 @ font-face {} hvor har skjemaet: 
 deskriptor: verdi; 
 deskriptor: verdi; 
 ... 
 deskriptor: verdi; 

For å bruke en nedlastbar font som heter Retrospektiv, vil stylingen se slik ut:

 @ font-face { 
 font-family: Retrospektiv; 
 src: url (http://example.com/fonts/Retrospective.ttf); 
 } 

Kall deretter regelen ved å bruke font-familie:

 p {font-family: Retrospektiv, san-serif; } 

I et fremtidig segment på CSS3 vil jeg gjennomgå formateringskolonner, bilder, lage avrundede hjørner, 3D-tekst og overgang blant andre funksjoner. Og senere denne uken vil jeg legge ut en anmeldelse av en favoritt CSS3 ressurs av meg, der jeg fremhever flere foretrukne funksjoner.

© Copyright 2020 | mobilegn.com