Välkommen till whr.se, recensioner av webbhotell. I denna avdelning publicerar vi guider och artiklar runt webbteknik, programmering och marknadsföring på Internet bland annat.

CSS3 – Skapa snyggare webbplatser utan bilder

Gradienter / toningar

Heltäckande färger i all ära men ibland är det riktigt snyggt att använda sig av gradienter eller toningar som de också kallas. Ett stort användningsområde för detta är knappar som ska se ut som att de går att klicka på. Att i det fallet lägga till en toning gör att knappen får effekten av att den är utbuktad. Gradienter på bakgrundsbilder fungerar med alla moderna webbläsare. Använd Ultimate CSS Gradient Generator för att skapa din egen gradient.

Multipla bakgrundsbilder

Man har tidigare kunnat använda flera bakgrundsbilder på varandra, men bara genom att placera olika HTML-element på varandra genom att antingen använda transparanta (genomskinliga) bilder eller genom CSS-kommandot opacity. Nu med CSS3 går det även att skapa dessa direkt i CSS:en utan att använda onödig HTML. Läs mer om multipla bakgrunder på CSS 3 Multiple Background Images – Zen Elements.

Bilder på ramar

Tidigare har man enbart kunna använda sig av linjer för att skapa ramar runt element. Nu med CSS3 kan man även använda en uppsättning bilder för detta. Det gör det betydligt lättare att skapa en god design utan att behöva lägga till en massa krånglig extra HTML-kod. Kommandot heter border-image. Läs mer om bilder på ramar på Border-image: using images for your borders – CSS3 info.

Rundade hörn på element

Att använda sig av rundade hörn på webbplatsen ger ett mjukare behagligare intryck. I CSS3 finns det något som heter border-radius. Det fungerar i alla moderna webbläsare förutom Internet Explorer 8 och neråt. Det finns en bra generator för att skapa rundade hörn på CSS Border Radius Generator.

Skugga på texter

Hur snyggt är det att ha en skugga på texten? Man bör vara försiktig med detta eftersom läsbarheten lätt kan försämras om man inte arbetar med textskuggor på rätt sätt. Om det ska användas på små texter bör man använda skuggan ytterst diskret. På större texter har man lite större friheter eftersom man då har fler punkter på skärmen att arbeta med. Kommandot heter text-shadow och fungerar på alla moderna webbläare. En trevlig generator för detta är Westciv – Text Shadow. Där kan man generera skuggor på texter och mer därtill.

Skugga på element

Att lägga en skugga på ett element innbär att man visuellt lyfter upp elementet från bakgrunden. Det kan ha många användningsområden. Framför allt så kan det dra uppmärksamheten till sig. I vissa fall kanske man vill särskilja elementen från mängden och då kan en skugga vara bra. Kommandot heter box-shadow och fungerar bra i de flesta moderna webbläsare. En artikel som beskriver hur det används är Dimox.net – Cross-browser CSS3 box shadow.

Rotera element

Ibland kan det vara snyggt att luta ett element, exempelvis en bild. Om man exempelvis vill illustrera en stökig hög med fotografier kan transform i CSS3 användas. När detta skrivs är det bara Safari, Firefox och Google Chrome som har stöd för detta så använd inte detta fullt ut än. Dock fungerar det bra att använda så länge som den är bakåtkompatibel. I det här fallet innebär bakåtkompabilitet att elementen ska kunna fungera väl tillsammans även då de inte är roterade. Information om hur man roterar element finns på Animation Using CSS Transform – The Art of Web.

Sammanfattning

Det här var några exempel på vad man kan använda CSS3 till. Eftersom de flesta kommandon inte är standardiserade än så bör de användas med viss försiktighet.

Ta för vana att testköra dem i alla de vanliga webbläsarna så att de fungerar som tänkt. Kontrollera även at det fungerar för lite äldre webbläsare. 2 versioner bak ses som ”best practice”. Använder vi version 9 av Internet Explorer idag bör webbplatsen även fungera ner till version 7 om man ska rikta sig till den större massan.

I många fall där det inte fungerar finns det workarounds som fungerar bra. Vissa tar hjälp av Javascript-bibliotek som jQuery.

Publicerad 2011-03-03. Kategori Bygga hemsida.


Skriv en kommentar eller en fråga

This blog is kept spam free by WP-SpamFree.