• Metalen label met geponste tekst in CSS

    Geplaatst op 19 november 2013 12:08

    Hoe stijl je tekst in CSS zodat het lijkt alsof het in metaal geponst is?

    Zoals deze tekst bijvoorbeeld?

    Het effect op de tekst kun je gemakkelijk bereiken met de CCS-eigenschap tekst-shadow. In bovenstaande heb ik de kleur van de tekst #333 gemaakt en voorzien van een witte schaduw rechtsonder.

    color: #333;
    text-shadow: 1px 1px 1px #fff;

    De achtergrondkleur van het tekstkader is #bbb gemaakt en door de randen van linksboven donker naar rechtsonder licht te maken krijg je het effect alsof dit is uitgefreesd. Vervolgens nog ronde hoeken en veel padding toevoegen en het geponste label is klaar. De complete CSS voor dit effect wordt dan als volgt.

    display: inline-block;
    width: auto;
    padding: 2em;
    border-radius: 5px;
    border-top: 1px solid #555;
    border-left: 1px solid #555;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    background-color: #bbb;
    color: #333;
    text-shadow:
    1px 1px 1px #fff;


    Door de kleuren van de randen van licht linksboven naar donker rechtsonder te maken krijg je het effect dat het label op de ondergrond ligt.

    Zoals deze tekst bijvoorbeeld?

     

  • Zoeken