background preloader

Formes css

Facebook Twitter

Dessiner des formes en CSS pur. Jeudi 18 août, 2011 Dessiner des formes, coeur, pentagone, infinie, étoile, … est possible sans utiliser d’images.

Dessiner des formes en CSS pur

Avec CSS3, les navigateurs se mettent au dessin ! Avec l’arrivée de CSS3 sur les navigateurs et des border-radius, il devient possible de faire des formes jusqu’alors impensables. Ci-dessous sont présentes une liste non-exhaustives de formes possibles (un navigateur respectant les normes CSS3 et notamment les border-radius est nécessaires pour en apprécier la beauté ; bref presque tous sauf IE 8 et moins).

Pour que ça soit compréhensible, les formes sont classées par ordre de difficultés de réalisation. De la géométrie avec CSS. Grâce aux CSS et à la nouvelle norme CSS3, nous pouvons créer de plus en plus de formes telles que les carrés, les rectangles, les ronds, etc.

De la géométrie avec CSS

Dans cet article, je vais présenter les différentes possibilités de formes faisables en CSS (du moins une liste non exhaustive). Tous les exemples auront pour structure HTML cette base : Compatibilité : Chrome, Safari, Opera, Firefox 4, IE9.Compatibilité partielle : Firefox 3.5 et IE8 (problème avec le border-radius). 5 commentaires Article lu 102502 fois. CSS3 match shape in 3d (top of cube)

CSS Hexagon. CSS Triangle Generator.