5 CSS3 Designforbedringer, som du kan bruge i dag

Cascading Style Sheets (CSS) er sproget for webdesign, og den næste generation af CSS-designegenskaber er bare chomping på den bit, der skal frigives.

Er du ivrig efter at begynde at bruge dem, men ved ikke, hvor du skal starte?

Selvom mange af de nye egenskaber endnu ikke er "officielle" , har nogle browsere allerede implementeret mange af funktionerne i de kommende CSS Level 3 specifikationer.

Problemet er, at mange browsere - især Internet Explorer - ikke har det.

Tricket til at bruge disse nye CSS3-funktioner er at behandle dem som designforbedringer .

Et designforbedring (som jeg diskuterer i min nye bog Taler i stilarter: Grundlaget for CSS for webdesignere ) er noget blomstrer du tilføjer til dit websted design, der øger sin visuelle appel uden at formindske dets brugervenlighed, hvis stilen ikke gengives.

Dette kan være et vanskeligt opkald, hvor der er en fin linje mellem forbedring og ikke mindsket brugervenlighed:

• Eksempel på designforbedring : Brug kantradio til runde hjørne hjørner, hvilket skaber et mere tiltalende design. Men hvis hjørnerne ikke gengives, er webstedet stadig lige så brugbart.
• Eksempel på designminskende brugervenlighed : Brug en RGBA-farveværdi i baggrunden af ​​overlappende elementer, som alle skal være synlige og forventer, at de øverste elementer skal være halvgennemsigtige. Dette vil gøre det umuligt for nogle mennesker at bruge webstedet og derved mindske sidens brugervenlighed.

Lad os se på 5 forskellige CSS3-egenskaber, som du kan begynde at spille med lige nu, forudsat at du altid husker på, at de kun bør bruges til at forbedre dit design og ikke påberåbes for brugbarhed på webstedet.

Dette er det oprindelige design, inden du anvender CSS3-designforbedringer

1. Transparente farver

Understøttelse af browsere : Apple Safari 4, Firefox 3.0.5, Google Chrome 1

RGBA giver dig mulighed for at styre opaciteten af ​​en bestemt farvefyldning, uanset om den er til tekst-, baggrunds-, kant- eller skyggefarver.

Indstilling af farve gennemsigtighed kræver, at du angiver farveværdien ved hjælp af RGB notation-hexadecimale værdier er ikke tilladt - med en yderligere A-værdi fra 0 (gennemsigtig) til 1 (uigennemsigtig).

rgba(0-255,0-255,0-255,0-1)

Du bør også inkludere en simpel RGB- eller hex-farveværdi som en tilbagesendelse til andre browsere, der skal bruges:

.topbox {color: rgb(235,235,235);color: rgba(255,255,255,0.75);background-color: rgb(153,153,153);background-color: rgba(0,0,0,0.5);border-color: rgb(235,235,235);border-color: rgba(255,255,255,0.65);}

Den gode nyhed er, at der også er en tilbagesendelsesløsning - i hvert fald til baggrundsfarver - i Internet Explorer, der understøtter gennemsigtige farver ved hjælp af et filter og betingede stilarter:

Bemærk: På grund af det faktum, at WordPress ikke kunne vise ovenstående kode i indholdet af dette indlæg, er det blevet inkluderet som et billede, derfor skal du indtaste denne kode manuelt.

2. Afrundede hjørner

Understøttelse af browsere : Apple Safari 3, Firefox 1, Google Chrome 1

Borderradius sætter krumningen af ​​hvert hjørne af kassen, som om der er en imaginær cirkel på hjørnet med en bestemt radius (r):

border-radius: r;

Selvom grænseradiusen vil være en del af den kommende CSS3-specifikation, implementerede både Mozilla-projektet (Firefox) og Webkit (Safari og Chrome) deres egne versioner, som skal inkluderes for at opnå maksimal kompatibilitet på tværs af browseren:

-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;

Du kan også indstille radius for hjørnerne individuelt:

3. Tekstskygger

Understøttelse af browsere : Apple Safari 3, Firefox 3.0.5, Google Chrome 1

Tilføj en skygge under enhver tekst, der styrer venstre / højre og op / ned forskydning, samt farven:

text-shadow: x y blur color;

Du kan kombinere tekstskyggen med en gennemsigtig farve for at styre skyggenes mørke:

text-shadow: -2px 2px 10px rgba(0,0,0,.5);

Du kan også inkludere flere tekstskygger bare ved at gentage værdierne adskilt af et komma:

text-shadow:   0 0 10px rgba(0,255,0,.5), -10px 5px 4px rgba(0,0,255,.45), 15px -4px 3px rgba(255,0,0,.75);

4. Box Shadows

Understøttelse af browsere : Apple Safari 4, Firefox 3, Google Chrome 1

Tilføjelse af en dropskygge til en hvilken som helst boks på skærmen følger det samme format som tilføjelse af en tekstskygge:

box-shadow: x y blur color;

Ligesom tekstskygger har Mozilla og Webkit implementeret deres eget ordforråd forud for den endelige CSS-standard:

-webkit-box-shadow: 0 0 10px rgb(0,0,0);-moz-box-shadow: 0 0 10px rgb(0,0,0);box-shadow: 0 0 10px rgb(0,0,0);

Du kan tilføje flere skygger bare ved at inkludere flere værdier adskilt af mellemrum:

-webkit-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45), 15px -20px 20px rgba(255,0,0,.75);-moz-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45),15px -20px 20px rgba(255,0,0,.75);box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45),15px -20px 20px rgba(255,0,0,.75);

5. Flere baggrunde

Understøttelse af browsere : Apple Safari 1.3, Google Chrome 1

Inkluderet flere baggrundsbilleder i et enkelt element kræver blot, at yderligere sæt værdier tilføjes til baggrundsegenskaberne, adskilt af kommaer. Du bør inkludere et enkelt baggrundsbillede som en back-up til andre browsere:

background-image: url(astro-127531.png);background-image: url(astro-127531.png),url(Hubble-112993.png);background-repeat: no-repeat;background-position: bottom left;background-position: bottom left, top right;

SÆRLIG BONUS

Roter alt!

Understøttelse af browsere : Apple Safari 4, Firefox 3.5, Chrome 1

Selvom ikke engang en del af CSS3-specifikationen endnu, har Webkit implementeret sin egen transformationsegenskab, som Mozilla følger med. Transform kan indeholde en række forskellige værdityper, men en af ​​de mest spændende og nyttige som et designforbedring - roterer:

-webkit-transform: rotate(-15deg);-moz-transform: rotate(-15deg);

Udseende som set i browsere, der ikke understøtter CSS3 (f.eks. Opera 9)

Se eksemplet på live-arbejde (kræver Safari 4+, Firefox 3.5+ eller Chrome 1+)

Jason Cranford Teague er forfatteren af Taler i stilarter: Grundlaget for CSS for webdesignere . Hent det nu fra Amazon for 27% af dækprisen.

Bruger du nogen designforbedringer på dine hjemmesider? Del venligst dine eksempler med os!

• ← 250+ ressourcer til at hjælpe dig med at blive en CSS-ekspert
• 200 + Gratis eksklusive Vector ikoner: 'Primo' →