CSS bg-img half transparant sliding doors
Ik heb op het moment een probleempje.
Ik ben een layout aan het basen, en heb een probleempje met stretchbare buttons.
Meestal gebruik ik hiervoor de "Css Sliding doors" techniek.
Hierbij heb je een <span> voor de linkerkant van je button, (alleen de rounded corner) en de rest komt van een div die eronder licht (een rounded corner met een heel lang recht stuk eraan).
Nu werkt dit leuk met normale buttons, maar ik heb nu half transparante gifs.
Omdat deze techniek altijd een beetje overlap heeft, is er nu een deel van de button iets donkerder (2 transparanten over elkaar).
Nu heb ik al een hoop lopen kloten met margins en paddings, te vergeefs.
Heeft iemand van jullie een idee hoe dit moet?
Het gaat om 2 verschillende types.
Hieronder een afbeelding van beiden.
Bijvoorbeeld:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<a><span>Klik op mij!</span></a>
<style>
a {
background: url(left.png) left no-repeat;
padding-left: 10px;
/* Net zo breed als left.png */
}
span {
background: url(right.png) right no-repeat;
padding-right: 10px;
/* Compensatie voor de padding-left */
}
</style>
<style>
a {
background: url(left.png) left no-repeat;
padding-left: 10px;
/* Net zo breed als left.png */
}
span {
background: url(right.png) right no-repeat;
padding-right: 10px;
/* Compensatie voor de padding-left */
}
</style>