CSS: Des boutons avec le style Cocoa

• bout de codes, tutoriel, web •

Je vais aujourd'hui ouvrir une nou­velle caté­go­rie sur le blog : bout de codes. Des billets courts avec des mor­ceaux de codes qui font une chose et bien.

Dans ce billet nous allons voir un peu de CSS 3 afin de réa­li­ser des bou­tons qui auront le style des appli­ca­tions Mac (Cocoa).

Pour arri­ver au résul­tat, il nous faut prin­ci­pa­le­ment 3 fonc­tions CSS 3 :

  • border-radius qui va s'occuper d'arrondir les angles
  • box-shadow pour les ombres
  • linear-gradient pour les dégradés

Fonctionne sur les der­niers Firefox, Safari, et Chrome (et tout ce qui est à base de Webkit ou Gecko). Malheureusement Opera ne sup­porte pas encore les dégra­dés. Je ne par­le­rai même pas de cette daube d'Internet Explorer.

Démo + Source


Post comment as
twitter logo facebook logo
Sort: Newest | Oldest

Trackbacks

  1. Anonyme dit :
    15 août 2010 à 16 h 46 min

    CSS: Des bou­tons avec le style Cocoa | Phollow.me...

    Dans ce billet nous allons voir un peu de CSS 3 afin de rali­ser des bou­tons qui auront le style des appli­ca­tions Mac (Cocoa)....