Jump to content

Nifty Corners: Bordes Redondeados con CSS


alfonso100
 Share

Recommended Posts

Estuve buscando cosas para hacer un trabajo con CSS, por casualidad me encontre con algo que seguramente va a ser util para mas de uno, una forma de hacer bordes redondeados en un DIV utilizando solamente CSS y algo de javascript. Hay dos versiones del mismo script, la seguda es un desarrollo mas avanzado.

 

Ejemplo: http://pro.html.it/esempio/nifty/nifty8js.html

 

1era version: http://pro.html.it/esempio/nifty/

 

La 2da version (tiene mas soporte de navegadores y algunas otrs cosas mas)

http://pro.html.it/articoli/id_599/idcat_31/pag_1/pag.html

 

Espero que les sirva!

Saludos

Link to comment
Share on other sites

A primera vista parece que está bastante bien, pero si luego miras el código HTML necesario para crearlo ya no me parece tan bonito:

 

<div id="container">
<b class="rtop">
 <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
</b>
<!--content goes here -->
<b class="rbottom">
 <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
</b>
</div>

 

¿Por qué utilizan la etiqueta <b> para crear las esquinas? Me parece un marcado muy poco semántico, aparte que creo que <b> ya está "deprecated" (no me sale en castellano), o sea que ya no se debe utlizar según el W3C. Para resaltar textos está <em> y <strong>.

 

En definitiva, repito, me parece muy incorrecto semánticamente, se crean muchos elementos vacíos con una etiqueta obsoleta. No se deberían utilizar elementos que corresponden a la presentación del documento (en este caso las esquinas redondeadas) dentro del código HTML. Esto son cosas que tienen que estar en el CSS, como corresponde a todos los elementos de presentación.

 

Me parece mucho más correcta esta fórmula, que utiliza el HTML imprescindible.

 

Saludos.

Link to comment
Share on other sites

Lo que yo queria, era mostrar que se pueden hacer bordes redondeados con CSS y sin imagenes.

 

Las etiquetas <b> se pueden cambian por cualquier otra etiqueta que no este deprecated, como <span>.

Y cambiando el Doctype y alguna que otra etiqueta los documentos validan como XHTML 1.0 Strict.

Pero con el tema de la incorreccion semantica tenes razon, se agrega codigo y etiquetas vacias que no son necesarias. Habria que buscarle la vuelta, si es que se puede. Porque es una solucion bastante practica y las paginas cargan rapidisimo.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.