open-pitu

Eina per l'administrador:

Entra les teves dades:

Resultats de la cerca

Border-Radius, cantons rodons amb CSS (CSS)

Link de referència.


Ja feia dies que buscava la manera de fer els cantons rodons d'un element, sense haver de recórrer a la creació de les imatges i fer diversos elements que continguin els cantons. Fa temps, vaig trobar com fer-ho amb JavaScript, però no funcionava del tot bé en tots els navegadors i vaig desestimar l'opció.

Avui però, he trobat com fer-ho amb una simple línia de CSS. Segueix sense funcionar en tots els navegadors, més ben dit, segueix sense funcionar en IE, però només comporta una línia de codi per cada cantó rodó que volguem fer.
La seva manera de funcionar és bastant senzilla, per cada cantonada, definim un nombre de píxels que ens donen el nivell de curba.
El codi que ensenyarem a continuació funciona amb: Firefox 2.x, Safari 3, Chrome, Opera 10. Per a que es vegi amb IE correctament hauràs de seguir amb les imatges.

1. .cantons_rodons{
2. -moz-border-radius: 8px;
3. -webkit-border-radius: 8px;
4. -opera-border-radius: 8px;
5. -khtml-border-radius: 8px;
6. border-radius: 8px;
7. }

Amb lo fàcil que és fer un navegador com els altres, Microsoft segueix marcant la diferència i sempre el seu navegador va diferent que la resta. Esperem que mica en mica (i sembla que és la tendència) tots vagin utilitzant els estàndards i la vida ens sigui una mica més simple alhora de fer una web.

HOW-TO's relacionats: