CSS, Diseño, WWW
Sombreado con CSS
22 de Junio del 2009 por b@cHo · 2 Comentarios
Pués basicamente esta entrada explica como hacer cuadros de texto con CSS, con la virtud de ser de tamaño variable y permitir sombras, y todo mediante HTML+CSS y unas imágenes.
Ahora bien, lo que necesitamos ahora es un sencillo diseño, yo supongo que con un logo y un principio redondeado bastara, puede que ustedes quieran usar más o usar menos adornos, tambien basta con un border solo en el top, para dar el efecto de casilla de texto.
Ahora bien, aqui esta mi principio redondeado.
Y lo agrego al CSS
#contenido {
width: 600px;
margin: 50px auto;
}
#cabeza {
background: url(cabeza.png) no-repeat;
height: 25px;
}
Ahora al HTML
<html> <head> <link rel="stylesheet" href="estilo.css" type="text/css" /> <title> Barra lateral y menu</title> </head> <body> <div id="contenido"> <div id="cabeza"></div>
Ahora un pequeño logo, nada muy complicado.
Su respectivo CSS
#logo {
background: url(logo.png) no-repeat;
height: 100px;
}
y Lo añadimos al HTML después del inicio redondeado.
<a href="http://kernelerror.net"><div id="logo"></div></a>
Ahora creamos un estilo para el contenido, en este caso lo llamaremos texto, sigan el ejemplo:
CSS
#texto {
background: #FFFFFF
}
#texto p{
padding: 10px 7px 5px 7px;
margin: auto;
}
y HTML
<div id="texto"> <p>Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal usado para definir la presentacion de un documento estructurado escrito en HTML o XML (y por extension en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificacion de las hojas de estilo que serviran de estandar para los agentes de usuario o navegadores. La idea que se encuentra detras del desarrollo de CSS es separar la estructura de un documento de su presentacion.</p> </div>
Ahora bien faltan las sombras,
tendremos que crear 2 sombras laterales, usualmente un gradiente lineal que acabe en transparencia suele bastar.
Ahora ya que tenemos las sombras, procedemos a hacer el style, que consiste basicamente en dos clases de Div que especifican que tienen esas imagenes de fondo, pero añadimos las propiedades de top repeat-y y right o left dependiendo del lado de la sombra.
Recuerden adapatar los campos que hagan falta a sus sombras.
El CSS
div.sombraizquierda {
background: url(sombraizquierda.png) repeat-y top left;
}
div.sombraderecha {
background: url(sombraderecha.png) repeat-y top right;
}
Y su HTML
<div id="texto"> <div class="sombraderecha"> <div class="sombraizquierda"> <p>Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal usado para definir la presentacion de un documento estructurado escrito en HTML o XML (y por extension en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificacion de las hojas de estilo que serviran de estandar para los agentes de usuario o navegadores. La idea que se encuentra detras del desarrollo de CSS es separar la estructura de un documento de su presentacion.</p> </div> </div> </div>
Ahora finalmente, una sombra en el fondo, la cual esta se puede usar el mismo metodo de las sidebars.
El CSS
#sombrafondo {
background: url(sombrafondo.png) bottom no-repeat;
height: 24px;
}
y el HTML
<div id="sombrafondo"></div> </div> </body> </html>
Finalmente el CSS completo
#contenido {
width: 600px;
margin: 50px auto;
}
#cabeza {
background: url(cabeza.png) no-repeat;
height: 25px;
}
#logo {
background: url(logo.png) no-repeat;
height: 100px;
}
#texto {
background: #FFFFFF
}
#texto p{
padding: 10px 7px 5px 7px;
margin: auto;
}
div.sombraizquierda {
background: url(sombraizquierda.png) repeat-y top left;
}
div.sombraderecha {
background: url(sombraderecha.png) repeat-y top right;
}
#sombrafondo {
background: url(sombrafondo.png) bottom no-repeat;
height: 24px;
}
Y su HTML
<html> <head> <link rel="stylesheet" href="estilo.css" type="text/css" /> <title> Barra lateral y menu</title> </head> <body> <div id="contenido"> <div id="cabeza"></div> <a href="http://kernelerror.net"><div id="logo"></div></a> <div id="texto"> <div class="sombraderecha"> <div class="sombraizquierda"> <p>Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal usado para definir la presentacion de un documento estructurado escrito en HTML o XML (y por extension en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificacion de las hojas de estilo que serviran de estandar para los agentes de usuario o navegadores. La idea que se encuentra detras del desarrollo de CSS es separar la estructura de un documento de su presentacion.</p> </div> </div> </div> <div id="sombrafondo"></div> </div> </body> </html>
La proxima entrega de diseño tendremos…. no se sabe. Keep Posted :P
- Posts Relacionados
- Rectángulo con bordes redondeados, de tamaño variable Esta clase de formato puede resultar peculiarmente util, al momento...
- Barra de menu con CSS e imagen de fondo Pués este metodo te permite tener una barra de menu...
- Botones CSS Misma Imagen efecto de hover y active // Antes de que FeCr sugiera que tome un descanso,...
muy buen blog, me agrado, ya son muy pocos que hablen de buenos temas ultimamente, hay varios de new bytes, buena komunidad!
saludos!…
UsandoMuchas Gracias por tu comentario, si algunos son de NB (incluyendome) y otros caras nuevas, pero puedo asegurar que siempre buscamos temas de calidad =D
Usando