Abonneren op: RSS

Have a break, have a CoffeeScript.

Gigadesign


Snelle tip: border-radius en background-color

In: CSS3, HTML5, Snelle Tip

Opnieuw definiëren

Als je ooit in de situatie terechtkomt, en dat zal je ongetwijfeld, dat je een mix van border-radius & background-color van in elkaar geneste elementen hebt, zal je eraan moeten denken om opnieuw border-radius opnieuw te definiëren.

Even duidelijk schetsen

Dit is de normale status met ronde hoeken via CSS3 en een achtergrondkleur:

table

HTML:

1
2
3
4
5
6
<div class="greenbordered">
 <a data-chart="maximum" class="first" href="#">&gt; 60</a>
 <a data-chart="allot" href="#">&lt; 45</a>
 <a data-chart="average" href="#">&lt; 15</a>
 <a data-chart="minimum" class="last" href="#">&lt; 5</a>
</div>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.greenbordered {
 background-color: #ECF7F0;
 border: 1px solid #1D9648;
 border-radius: 10px 10px 10px 10px;
}
.greenbordered a {
 border-bottom: 1px solid #38A45F;
 color: #068D37;
 display: block;
 font-size: 21px;
 line-height: 68px;
 text-shadow: 0 1px 1px #DEF0E4;
}
.greenbordered a.last {
 border-bottom: medium none;
}

Tot zover niets aan de hand, het element .greenbordered heeft achtergrondkleur en ronde hoeken, alles loopt nauwkeurig zoals gewenst en verwacht.

Nu gaan we klikken!

We maken het laatste onderdeel aktief (achterliggend geeft jQuery onClick een class .active op de a):

Als de class .active erop wordt gezet komt volgende CSS van toepassing:

CSS

1
2
3
4
5
6
7
8
.greenbordered a.active {
 background-color: #007E1D;
 background-image: 
  linear-gradient(center top , #058D36, #006D00);
 background-repeat: repeat-x;
 color: #FFFFFF;
 text-shadow: 0 1px 1px #166223;
}

Resultaat:

table-bleed

Je ziet aan de onderkant dat de groene achtergrondkleur die op de a is gezet, nu uit de ronde hoeken bloedt!!

Om dit op te lossen moeten we opnieuw de CSS3 eigenschap border-radius defieniƫren voor de onderste hoeken, daar de eigenschap zelf niet erft van zijn ouder element.

CSS

1
2
3
.greenbordered a.active.last {
 border-radius: 0 0 10px 10px;
}

Resultaat:

table-bleed-fix

  • Stijn - 13/04/2012

    Lukt dat ook met een border-radius:inherit?

  • Mark - 13/04/2012

    Ja, dat zou moeten lukken, maar dan wel alle waarden, dus met andere woorden:

    1
    2
    3
    
    .foo {
     border-radius: inherit 5px 5px inherit;
    }

    zou niet mogen werken volgens de huidige drafts.

  • Reen - 16/04/2012

    1
    
    .greenbordered { overflow: hidden }
  • Matthijs - 2/07/2012

    Opmerking van Reen is terecht. Het berekenen van een extra border-radius kost ook meer resources dan een overflow.

Ook een reactie geven!!

Je email is nodig en zal nooit worden weer- of doorgegeven.