Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Cómo crear una plantilla con bordes sombreados en CSS
#1
utilizando CSS; así que todavía no estoy muy empapado sobre el tema, pero de todas formas, espero que les resulte de utilidad este pequeño tip.

Ya se discutió hace un buen rato por los foros, pero no encontré documentación al repecto, por lo que aquí se las comparto, no se si sea la mejor manera pero igual, puedes sugerir mejoras.

Primero necesitamos diseñar el aspecto que queremos que tenga nuestra página (plantilla), para esto puedes utilizar el programa que gustes, siempre y cuando sepas como hacer los efectos que manejaremos en el programa que hayas elegido (que en realidad es el "Glow"), el formato no importa tampoco, eso te lo dejo a tu elección. En éste caso utilizaré Fireworks (imagen PNG).

Primero elegimos el tamaño del lienzo, es importante que elijas un valor de anchura adecuado para los usuarios que aún utilizan la resolución de (800x600), toma en cuenta lo estresante que es el scroll horizontal. Yo utlizaré un lienzo de 790x500 px.

[Imagen: 1.jpg]

A continuación, echamos a volar nuestra imaginación y plasmamos una plantilla para nuestra página, que consta de un encabezado, un cuerpo y un pie de página (si no se te ocurre nada en estos momentos has lo que yo, recuadros coloridos).

[Imagen: 2.jpg]

Al recuado blanco que formará el body puedes aplicarle esquinas redondeadas para una mejor apariencia. Ahora le agregamos el efecto de Glow; para los que decidieron seguir este tuto con Fireworks, lo explico a continuación:

Seleccionas el rectángulo y das un clic sobre el icono de "+" junto a la etiqueta "efect", te posas sobre "Shadow and Glow" y eliges "Glow".

[Imagen: 3.jpg]


aparecerá un pequeño recuadro de donde puedes elegir los valores de dispersión, color y transparencia. He aquí los que elegí yo.

Una ves elegidos los valores deseados, procedemos a cortar la imagen. Tomemos en cuenta las tres divisiones que mencioné antes: encabezado, cuerpo y pie.

[Imagen: 4.jpg]

entonces cortamos nuestra imagen en tres y guardamos cada una de las partes en archivos diferentes. chécate el ejemplo.

[Imagen: 5.jpg]

Imagen guardada como "header.png".

[Imagen: 6.jpg]

Ésta la guardé como "body.png".

[Imagen: 7.jpg]

Y por último, el pie de página ("foot.png").

Ahora nos vamos a nuestro CSS y agregamos lo que sigue:

Cita:*
{
margin: 0;
padding: 0;/* para Firefox */
}
body
{
text-align: center; /* para centrar los DIV's*/
}
div#encabezado
{
margin: 0 auto 0 auto; /* centrar el DIV */
width: 790px; /* ancho del DIV */
height: 142px;/* Especificamos el alto resultante después de haber cortado la imagen (header.png)*/
background-image: url("header.png");
background-repeat: no-repeat; /* Evitamos que se repita la visualización de la imagen*/
}
div#cuerpo
{
margin: 0 auto 0 auto;
width: 790px;
background-image: url("body.png");
background-repeat: repeat-y; /* Especificamos que se repita de forma vertical */
}
div#pie
{
margin: 0 auto 0 auto;
width: 790px;
height: 54px; /* alto de la imagen (foot.png) después de haberla cortado */
background-image: url("foot.png");
background-repeat: no-repeat;
}

Lo lógico es que nuestra plantilla se encuentre centrada en el documento, es por esa razón que agrego la especificación para el body (en caso de IE). Para entenderlo mejor, checa el tutorial de cómo centrar DIV's horizontales.

Como hemos especificado que la imagen central se repita sólo verticalmente, podrás agregar toda la información que desees y dará la apariencia de que la plantilla se va estirando, ¿Ahora entindes por qué dejamos las esquinas redondeadas superiores en la imagen del header?.

Hemos terminado, fácil no?
#2
Muy buena plantilla, +thanks
Cualquier duda, pregunta, comentario... Aquí estoy Guiño


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  [Duda] Con respecto de cambiar color a una plantilla con seleccionador Hostingbir 0 125 21-09-2016, 03:04 PM
Último mensaje: Hostingbir
  Mobirise - Crear sitios Moviles de manera facil y gratis metalfuck 3 1,477 03-11-2015, 12:56 AM
Último mensaje: Caoba
  Como crear un Código de Barras en PHP torgar22 1 337 25-03-2015, 04:33 AM
Último mensaje: garcon
  [PHP] Código para crear y eliminar una base de datos de MySQL desde PHP torgar22 5 423 27-02-2015, 12:57 AM
Último mensaje: yayito21
  Crear contraseñas seguras Netohg 43 1,864 06-02-2015, 02:45 AM
Último mensaje: Shirow_Aramaki
  Crear un mapa con puntos modificables fácilmente por cualquiera kakashi-sensei 7 431 27-01-2015, 08:02 PM
Último mensaje: kakashi-sensei
Fotografía ayuda no encuentro estas plantilla o similar LucasRuffo 6 359 01-01-2015, 06:40 PM
Último mensaje: LucasRuffo
  Crear colores aleatariamente con PHP Dark_Soul 4 300 30-12-2014, 01:21 AM
Último mensaje: Dark_Soul
  Cómo crear cursores personalizados con CSS imgur 1 252 29-11-2014, 06:10 PM
Último mensaje: Restia
  Crear un archivo excel (.xls) con PHP jlgarduza 3 443 23-11-2014, 10:48 PM
Último mensaje: Joseahfer



Usuarios navegando en este tema: 1 invitado(s)