Crear esquinas redondeadas con CSS y sin imagenes
Hay muchas maneras de crear esquinas redondeadas con CSS, lo de usar tablas para crear este efecto quedó obsoleto hace ya bastante tiempo. Pero además de utilizar CSS la mayoría de las veces también se usan imágenes para lograr las esquinas redondas.
Personalmente prefiero no utilizar las esquinas redondas y ahorrarme ese momentito de carga de las imágenes.
Os voy a contar los dos métodos que conozco y que he utilizado para hacerlo cuando lo he necesitado. El primero lo copié de un widget de bitacoras.com (no me acuerdo cual) hace bastante tiempo. Es digamos bastante bruto, pero valida CSS, HTML y es compatible en casi cualquier navegador.
Código:
<style type="text/css">
div#rounded-box1 {
background:transparent;
margin:2em auto;
padding:0;
width:400px;
}
.rb4 {
background:#d40000;
margin:0 auto;
padding:0;
width:398px;
height:3px;
}
.rb3 {background:#d40000;
margin:0 auto;
padding:0;
width:396px;
height:2px;
}
.rb2 {background:#d40000;
margin:0 auto;
padding:0;
width:392px;
height:1px;
}
.rb1 {background:#d40000;
margin:0 auto;
padding:0;
width:388px;
height:1px;
}
.rb-content {
background:#d40000;
margin:0 auto;
padding:0;
width:400px;
}
.rb-content p {
color:#fff;
margin:0 10px;
padding:0;
}
</style>
<div id="rounded-box1">
<div class="rb1"></div>
<div class="rb2"></div>
<div class="rb3"></div>
<div class="rb4"></div>
<div class="rb-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pede. Nulla eu
arcu sit amet neque ornare scelerisque. Nulla facilisi. Nam nunc lorem, bibendum ut,
volutpat quis, suscipit in, risus. Donec eget elit hendrerit erat commodo aliquam. Nulla
lacus tellus, accumsan vitae, condimentum non, fermentum eu, ligula.</p>
</div>
<div class="rb4"></div>
<div class="rb3"></div>
<div class="rb2"></div>
<div class="rb1"></div>
</div>
La segunda opción es la que utilizo para los enlaces del menú superior del blog, está copiada del menú de Smashing Magazine, y es sin duda la opción que más me gusta. No es compatible con Internet Explorer 6, pero que queréis que os diga, ¡qué actualicen!
Código:
<style type="text/css">
div#rounded-box2 {
background:#d40000;
margin:0 auto;
padding:0;
width:400px;
border-radius:7px;
-moz-border-radius: 7px;
-webkit-border-radius : 7px;
}
div#rounded-box2 p {
margin:0;
padding:10px;
color:#fff;
}
</style>
<div id="rounded-box2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pede. Nulla eu arcu
sit amet neque ornare scelerisque. Nulla facilisi. Nam nunc lorem, bibendum ut, volutpat
quis, suscipit in, risus. Donec eget elit hendrerit erat commodo aliquam. Nulla lacus tellus,
accumsan vitae, condimentum non, fermentum eu, ligula.</p>
</div>
Como bonus track, os dejo esta otra manera, que como poco resulta muy curiosa, en la que consiguen la redondez utilizando un • (•) muy grande.
|
Artículos Relacionados Enlázanos Si te gusta esta web y quieres enlazarnos, te sugiero estas imágenes y textos totalmente... Manual PHP. La cesta de la compra PHPLIB. Carro de la compra Ya dijimos que gracias al control de... Insertar videos de YouTube con XHTML válido Insertar un video de YouTube en tu blog es muy sencillo. Basta con copiar y... Manual PHP. PHP para desarrollo de aplicaciones web (II) La autenticación de usuarios utilizando HTTP El protocolo HTTP proporciona un mecanismo de autenticación... |
(1 votos)
Loading ...Autor y licencia
Autor: Alberto Varela
URL: Berriart.com
RSS