divendres, 15 de febrer de 2008

Cantonades rodones amb css

Amb la versió 3 de CSS (CSS3) es podràn crear perfils arrodonits.
La propietat CSS3 que ho permetrá és

border-radius


I les seves derivades

border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius


Ara per ara no està soportat ni per FireFox ni per Internet Explorer. Diria que tampoc per Opera ni Safari. (Ara funciona amb Safari?)

No obstant Firefox de moment implementa un equivalent amb el prefix -moz-

-moz-border-radius: 1em;


Al final del post teniu enllaços a més informació sobre CSS3 i aquestes propietats.


Faig un exemple:

CSS


.cantonadaRodona
{
background-color: #c33;
-moz-border-radius: 15px; /*Firefox*/
border-radius: 15px; /*CSS3*/
border: 1px solid #000;
padding: 10px;


}



HTML


<div class="cantonadaRodona">
<h1>Capa amb les cantonades arrodonides</h1>
</div>



Capa amb les cantonades arrodonides



Amb Internet Explorer no funciona




Modificant els valors de -moz-border-radius i l'amplada i l'alçada de les capes podem aconseguir circumferències.



Enllaços d'interès:
- W3C: CSS3 propietat border-radius [EN]
- -moz-border-radius [EN]
- border-radius exemples [EN]

6 comentaris:

TenebrioWoman ha dit...

no se si t'he entès gaire bé, però si hede veure el requadre vermell amb les cantonades rodones, am el safari, tampoc funciona....

espurnes ha dit...

hola,

doncs no ho hauries de veure amb el safari perquè només he posat el css propi de FireFox.

el -moz-border-radius.

Hauria d'afegir el border-radius, sense -moz- per veure si el safari segueix l'estandard.

Ara ho afegeixo i em dius si funciona.


;)

TenebrioWoman ha dit...

No, no funciona... encara veig un rectangle normal...

espurnes ha dit...

Doncs vol dir q Safari no implementa l'estandar de CSS3.

Però és normal ara per ara.



;)

TenebrioWoman ha dit...

ok

Guillermo ha dit...

Mola! Ya era hora...

Yo siempre estoy currándome bordecitos redondeados con el photoshop y poniéndolos de fondo en las tablas (para ver ejemplo y publicidad subliminal pinchad aquí).

Esta nueva propiedad me irá muy bien =D

Radio + not?es