Enviado por b@cHo en CSS, Diseño, WWW
Rectángulo con bordes redondeados, de tamaño variable
Esta clase de formato puede resultar peculiarmente util, al momento de querer hacer una sidebar pues su contenido varia en alto, y aveces nos gusta darle ese “estilo” redondeado.
Las herramientas que vamos a usar son:
- Cualquier editor grafico (Fireworks 8)
- Cualquier editor de texto plano (gEdit)
Crear la imagen
Lo primero que vamos a hacer es crear la imagen tal como quieres que se vea (Añadir sombras efectos lo que sea)
En mi caso quiero algo asimple, un rectangulo gris con una sombra e iluminado.
Seccionar la imagen
El proposito de esto es hacer el tamaño de donde sea que valla el texto, no dependa de los bordes, es decir, que no le estorben.
La manera sencilla de hacer esto es seccionar en donde se empieza a hacer redondeado de tal manera que quede algo asi:
Un tip para ahorar espacio, es solo dejar en donde sea que valla a ir el contenido con 2 o 1 pixel de altura, pues el contenido es el MISMO!.
Entonces asi quedarian las imagenes:
El top
El contenido
Y el bottom o final
El estilo (CSS)
Lo primero que hay que tener en cuenta es que hay que crear 4 estilos diferentes, uno para la imagen TOP uno para la imagen CONTENIDO otra para el estilo de letra de CONTENIDO y uno para la imagen BOTTOM. y el resto del diseño de la pagina.
#pagina {
width: 612px;
}
#izq {
float: left;
width: 400px;
}
#derecha {
float: right;
width: 212px;
}
.top {
height: 47px;
background: url(top.jpg) no-repeat;
}
.contenido {
background: url(contenido.jpg) repeat-y;
padding: 5px 5px 5px 5px;
}
.contenido p {
margin: 2px 29px 2px 29px;
}
.bottom {
background: url(bottom.jpg) no-repeat;
height: 43px;
}
Recuerden cambiar el height y width de sus imagenes de arriba y abajo en el css. y el padding del paragraph del CONTENIDO apra que no interfiera con el diseño
El html
Esta posiblemente sea la parte mas sencilla, pero aun asi les dejo un ejemplo, asumiendo que el css lo guardamos como estilo.css.
<html>
<head>
<link rel="stylesheet" href="estilo.css" type="text/css" />
<title> Rectangulo borde redondeado</title>
</head>
<body>
<div id="contenido">
<div id="derecha">
<div class="top"></div>
<div class="contenido">
<p>
<a href="#">Un enlace</a><br />
<a href="#">Un enlace</a><br />
<a href="#">Un enlace</a><br />
<a href="#">Un enlace</a><br />
<a href="#">Un enlace</a><br />
Un pequeño texto acerca de nada
</p>
</div>
<div class="bottom"></div>
</div>
<div id="izq">
<p>
Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores.<br />
La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.<br />
</p>
</div>
<div>
</body>
</html>
Listo!, ojala y hayan aprendido algo con este metodo.
Aqui esta el ejemplo
Version para descargar
Posts Relacionados
- Barra de menu con CSS e imagen de fondo Pués este metodo te permite tener una barra de menu...
- Sombreado con CSS Pués basicamente esta entrada explica como hacer cuadros de texto...
- Permisos Básicos en Linux Hola!, pues aqui les dejo el contenido de un excelente...
- jQuery Contenido oculto La idea de este tutorial es explicar como jQuery para...
- Botones CSS Misma Imagen efecto de hover y active // Antes de que FeCr sugiera que tome un descanso,...
