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:
|
|
.triangle {
border-color: yellow blue red green;
border-style: solid;
border-width: 200px 200px 200px 200px;
height: 0px;
width: 0px;
}
|
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
body {
margin: 0;
padding: 0;
font-family: tahoma, verdana, sans-serif;
font-size: 16px;
background-color: #eee;
}
nav {
position: fixed;
top: 0;
margin: 0;
padding: 20px;
width: 100%;
height: 35px;
line-height: 35px;
font-size: 18px;
text-align: center;
background-color: #ccc;
border-bottom: solid 10px #fff;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
display: inline;
margin: 0 0 0 60px;
}
nav ul li:first-child {
margin: 0;
}
header {
margin: 100px auto 0 auto;
padding: 20px;
width: 940px;
height: 130px;
background-color: #ccc;
border: solid 10px #fff;
}
section {
margin: 40px auto;
padding: 20px;
width: 940px;
background-color: #ccc;
border: solid 10px #fff;
}
article {
width: 940px;
}
footer {
margin: 0 auto;
padding: 20px;
width: 940px;
height: 80px;
line-height: 80px;
text-align: center;
background-color: #ccc;
border: solid 10px #fff;
border-bottom: none;
}
|
De styles skal style et standard mockup som dette:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!doctype html>
<head>
<meta charset="UTF-8" />
<title>Skæve linjer med CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Picturea</li>
<li>Linka</li>
<li>Contact</li>
</ul>
</nav>
<header>
</header>
<section>
<article>
<h1>Headline</h1>
<p>Lorem ipsum dolor sit...
</article>
</section>
<footer>
Copyright © 2013 | <a href="http://kaspersunivers.dk">kaspersunivers.dk</a>
</footer>
</body>
</html>
|
Så får vi noget der ser sådan her ud:
Det næte punkt at lave en ny class der bruger transform til at rotere et element for at få den samme vinkel. Dernæst skal vi have indsat vores nye class i vores html dokument.
Den nye css class: (357 grader er bare den vinkel jeg har valgt)
|
|
.diagonal-line{
width: 940px;
height: 100px;
background-color: #3896d3;
-webkit-transform: rotate(357deg);
-moz-transform: rotate(357deg);
-ms-transform: rotate(357deg);
-o-transform: rotate(357deg);
}
|
Og indsættes html lige efter article tagget:
|
|
<article>
<div></div>
<h1>Headline</h1>
|
Nu ser det måske lidt mærkeligt ud og passer ikke skide godt.
Vi begynder bare at lege lidt med størrelsen og margin på vores class, vi bruger negativ til at rykke den op ad og så skal den gøres bredere end det tag den er inden i, altså i vores eksempel article så efter det vil vi ændre vores til class til det her:
|
|
.diagonal-line{
margin: -50px 0 50px -30px;
width: 1000px;
height: 100px;
background-color: #3896d3;
-webkit-transform: rotate(357deg);
-moz-transform: rotate(357deg);
-ms-transform: rotate(357deg);
-o-transform: rotate(357deg);
}
|
Der er stadig ikke helt godt vel?
Den flyder udover det hele kan du nok se, men det er der en utrolig nem løsning på, nemlig overflow! Så vores stylesheet finder vi vores section tag og tilføjer denne ene linje til dens style:
Og se så resultatet her!
Var det ikke bare fantastisk nu passer det sku helt utroligt godt! Og sidst men ikke mindst, så lovede jeg jo at det ville virke med skygge på, så tilføj noget skygge til vores diagonale linje og se det endelige resultat her:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.diagonal-line{
margin: -50px 0 50px -30px;
width: 1000px;
height: 100px;
background-color: #3896d3;
-webkit-transform: rotate(357deg);
-moz-transform: rotate(357deg);
-ms-transform: rotate(357deg);
-o-transform: rotate(357deg);
-webkit-box-shadow: 0px 2px 5px rgba(100, 100, 100, 0.8);
-moz-box-shadow: 0px 2px 5px rgba(100, 100, 100, 0.8);
box-shadow: 0px 2px 5px rgba(100, 100, 100, 0.8);
}
|
Det var det jeg havde valgt jeg ville dele med jer denne gang, jeg håber at du kunne holde det ud og kom igennem det hele. Og selvfølgelig at du kunne bruge det til noget! Nogen spørgsmål så tøv ikke med at spørge, jeg vil hellere end gerne hjælp hvor jeg kan og svare på det jeg kan :)
Kommentarer
Send en kommentar