CSS3 voor gevorderden??
De nieuwe WebDesigner is uit en besteed veel aandacht aan CSS3 deze keer. Zo vond ik daar bijgaand script waarmee je een leuke banner boven je content op de site kan zetten. Omdat ik (nog) niet alle code begrijp vraag ik jullie medewerking voor de volgende vragen:
1. Het lintje, want dat is het, is slechts aan de linkerzijde uitgevoerd. Ik zou het fantastisch vinden als ik aan de weet kom hoe ik dit lintje ook aan de rechterzijde krijg te zien
2. Verder is mijn mijn situatie de hoogte van het lintje te groot. Waar zou ik een aanpassing moeten doen om dit lintje lager te krijgen?
De code is:
Code (php)
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
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
h2 {
position: relative;
width: 60%;
font-size: 2em;
padding: 14px 20px 15px 71px;
margin: 200px 0 0 -71px;
color: pink;
background-color: mediumaquamarine;
text-shadow: 0px 1px 2px #bbb;
-webkit-box-shadow: 0 2px 4px #888;
-moz-box-shadow: 0 2px 4px #888;
box-shadow: 0 4px 10px #bbb;
font-family: Georgia, serif;
font-weight: normal;
font-style: italic;
text-shadow: 2px 2px 4px #999;
}
h2:before, h2:after {
content: "";
position: absolute;
width: 0;
height: 0;
}
h2:before {
width: 30px;
left: -39px;
top: 16px;
border-width: 34px 15px ;
border-style: solid;
border-color: mediumaquamarine mediumaquamarine mediumaquamarine transparent;
}
h2:after {
left: 0;
top: 100%;
border-width: 8px 10px;
border-style: solid;
border-color: #666 #666 transparent transparent;
}
position: relative;
width: 60%;
font-size: 2em;
padding: 14px 20px 15px 71px;
margin: 200px 0 0 -71px;
color: pink;
background-color: mediumaquamarine;
text-shadow: 0px 1px 2px #bbb;
-webkit-box-shadow: 0 2px 4px #888;
-moz-box-shadow: 0 2px 4px #888;
box-shadow: 0 4px 10px #bbb;
font-family: Georgia, serif;
font-weight: normal;
font-style: italic;
text-shadow: 2px 2px 4px #999;
}
h2:before, h2:after {
content: "";
position: absolute;
width: 0;
height: 0;
}
h2:before {
width: 30px;
left: -39px;
top: 16px;
border-width: 34px 15px ;
border-style: solid;
border-color: mediumaquamarine mediumaquamarine mediumaquamarine transparent;
}
h2:after {
left: 0;
top: 100%;
border-width: 8px 10px;
border-style: solid;
border-color: #666 #666 transparent transparent;
}
Ik probeer hier iets van te leren, jullie wellicht ook.
Alvast een fijne zondag (na de nederlaag van gisteren op het EK
George
Gewijzigd op 10/06/2012 11:14:22 door George van Baasbank
bij h2:before, h2:after wordt er een waarde aan zowel het geen wat voor de h2 geplakt wordt gegeven als wat erachter geplakt wordt.
verder wordt er met :after of :before altijd een opmaak gegeven aan hetgeen waar het aan geplakt is. dus in dit geval de h2.
heb je dit ergens online staan dan kan ik even kijken hoe ze het daar doen misschien dat ik je dan een beter uitleg kan geven over hoe dit aan de rechterkant hetzelfde te krijgen.
Kijk eens op http://jsbin.com/otoyux/5/edit#preview daar kun je ook editten en het voorbeeld zien
