H3 balkjes met afgeronde hoeken
Pepijn schreef op 02.02.2008 10:17:
Dan heb je afbeeldingen nodig, CSS of HTML ondersteunt geen afgeronde hoeken.
Het kan met css.. Jan Koehoorn heeft er wat tuts over gemaakt geloof ik..
En anders kan het met javascript ook wel..
Google eens op: Rounded corners
mebus schreef op 02.02.2008 10:27:
Het kan met css.. Jan Koehoorn heeft er wat tuts over gemaakt geloof ik..
En anders kan het met javascript ook wel..
Google eens op: Rounded corners
Pepijn schreef op 02.02.2008 10:17:
Dan heb je afbeeldingen nodig, CSS of HTML ondersteunt geen afgeronde hoeken.
Het kan met css.. Jan Koehoorn heeft er wat tuts over gemaakt geloof ik..
En anders kan het met javascript ook wel..
Google eens op: Rounded corners
Maar jan maakt toch gebruik van plaatjes? Anyway, zoek eens op die tut missschien kan het je helpen..
CSS: Liquid Rounded Corners
Je maak voor boven en onder (iedere keer links en rechtse hoek) een div.
<div id="boven"></div>
<div id="tekst">hier komt mijn text</div>
<div id="onder"></div>
En in je css zet je gewoon voor onder en boven een img. en klaar.
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
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
<style type="text/css">
div#text {
margin: 0 10%;
background: #9BD1FA;
}
div#inner-text {
min-height: 20px;
height:auto !important;
height: 20px;
margin-left: 5px;
margin-right: 5px;
overflow: hidden;
}
b.rtop, b.rbottom {
display:block;
background: #FFF
}
b.rtop b, b.rbottom b {
display:block;
height: 1px;
overflow: hidden;
background: #9BD1FA
}
b.r1 { margin: 0 5px }
b.r2 { margin: 0 3px }
b.r3 { margin: 0 2px }
b.rtop b.r4, b.rbottom b.r4 {
margin: 0 1px;
height: 2px
}
</style>
<div id="text">
<b class="rtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
</b>
<div id="inner-text">
test
</div>
<b class="rbottom">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b>
</div>
div#text {
margin: 0 10%;
background: #9BD1FA;
}
div#inner-text {
min-height: 20px;
height:auto !important;
height: 20px;
margin-left: 5px;
margin-right: 5px;
overflow: hidden;
}
b.rtop, b.rbottom {
display:block;
background: #FFF
}
b.rtop b, b.rbottom b {
display:block;
height: 1px;
overflow: hidden;
background: #9BD1FA
}
b.r1 { margin: 0 5px }
b.r2 { margin: 0 3px }
b.r3 { margin: 0 2px }
b.rtop b.r4, b.rbottom b.r4 {
margin: 0 1px;
height: 2px
}
</style>
<div id="text">
<b class="rtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
</b>
<div id="inner-text">
test
</div>
<b class="rbottom">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b>
</div>