TUTORIAL: SKÆVE LINJER MED CSS

Moden inden for webdesign er meget flat, firkantet og windows 8 agtigt lige for tiden, men hvem siger at man skal følge moden og man ikke kan skabe sin egen? Det er hvertfald en fantatisk måde at skille sig ud på fra alle andre. Det er også hvad denne norske tømmervirksomhed har tænkt (gætter jeg på).
Når det så er sagt har de gjort det på en unødvendig måde, de har nemlig valgt at bruge billeder til at få effekten frem, ikke at det er forkert, men det kan gøres smartere. Med billeder er der mere browseren skal loade og det kan måske være langsommere og være mere irriterende for brugeren at skulle vente på siden loader færdig.
Det samme resultat kan opnåes med ren CSS så hvorfor ikke bruge det? – Når jeg leder på nettet er der en løsning som går meget igen og ser ud til at det er den folk foretrækker, det er så bare den forkerte. Så når det er muligt har jeg selvfølgelig tænkt mig at sprede budskabet da min metode er smartere ;-)
Først den forkerte måde så du ved hvad du IKKE skal gøre: Den første er med at manipulere med rammerne på en div, fordi at hver side er af rammen er vinklet 45 grader i hjørnet op imod en af de andre sider.
Her er et eksempel til at illustrere det:
Det kræver ikke skide meget kode for at opnå denne effekt, se bare her:
Skal man så bruge denne metode til at lave noget ala det eksempel jeg viste tidligere skal man så have gjort nogle af siderne transparente og ændret i størrelserne.  Og så kommer der pludselig lidt mere kode, og der er med at holde tungen lige i munden for at få valgt de rigtige størrelser osv. Se eksempel på den forkerte måde her:
Nu kommer det du har ventet på! Nemlig den rigtige metode.
Først beklager jeg at jeg var så længe om at komme til sagen, men jeg synes det er vigtigt at vide præcis hvorfor man skal vælge noget frem for noget andet, så altså også vide hvorfor man ikke skal gøre det ene!
Men lad os komme i gang:
Det første vi gør er at få lavet et nyt stylesheet med vores basic styles:

Kommentarer

Populære indlæg fra denne blog

Søgemaskineoptimering er en vigtig del af en virksomhed

Søgemaskineoptimering er en videnskab indenfor online markedsføring

Search Engine-friendly websites