Comment faire un joli border en relief CSS

Comment faire un joli border en relief CSS, Voilà une petite astuce que je ne connaissais pas et que j’avais l’habitude de faire en image.

J’ai trouvé sur http://www.getballpark.com/public/signup?plan=7 qui a un super formulaire d’adhésion cette technique css pour fair eun joli border ! C’est tout bête et pourtant je n’y avais pas pensé :)

Vous voyez la séparation entre chaque “champs” du formulaire les border cumulé donne un effet de bordure réelle en fausse 3D (enfin un joli effet qui penser à un petit relief…

Le seul code à écrire est le suivant :

border-bottom:1px solid #C1CAD5;
border-top:1px solid #F3F6F9;

Il suffit tout bêtement de donner un border-bottom à la cellule du haut et un border-top à celle en dessous et le tour est joué !

Voici donc une astuce qui vous évite d’utiliser un repeat et donc une image pour.. rien ! Vous optimiserais ainsi légèrement le chargement de vos pages (très très légèrement ^^)

Random Posts

Leave a Reply

Blog Référencement (SEO), Graphisme, Web, Communication et compagnie…

Nicolas deschampsNicolas deschampsNicolas deschamps