agregar sombra en mi template (css3)Tema Solucionado

[cfeze]

Hola gente.

Estoy a punto de terminar la modificación al template Aturrum para ponerlo como plantilla principal. Pero por ahora no, hasta lograr terminarlo completamente.
Me habían dicho que para agregar sombra se utiliza css3 pero tiene una desventaja porque no es compatible con el navegador IE, pero no importa si lo único que sirve el IE es descargar chrome o firefox.
Alguien sabe como hacerlo?




Gracias.

Saludos cordiales.

[DaVidU]

Ejemplos de Sombras CSS3

Ahora veamos varios ejemplos de sombras creadas directamente con CSS 3 y el atributo box-shadow, con sus variantes para compatibilidad temporal en los navegadores Mozilla o WebKit.

Código: Seleccionar todo

#cajasombra{
   background-color: #ddd;
   width: 300px;
   padding: 10px;
   
   box-shadow: 5px 5px 0 #333;
   -webkit-box-shadow: 5px 5px 0 #333;
   -moz-box-shadow: 5px 5px 0 #333;
}

Esto crearía una capa con un gris claro como color de fondo y una sombra desplazada abajo y a la derecha en 5 píxeles y sin difuminado. Además, hemos definido un color de sombra gris oscuro para el elemento.

Código: Seleccionar todo

#sombraclara{
   width: 200px;
   padding: 10px;
   background-color: #999;
   color: #fff;
   
   box-shadow: 2px 2px 2px #ffc;
   -webkit-box-shadow: 2px 2px 2px #ffc;
   -moz-box-shadow: 2px 2px 2px #ffc;
}

Este otro ejemplo es para una sombra un poco menor, también desplazada hacia abajo y a la derecha y con un difuminado de 2 píxeles. Además hemos indicado un color amarillo claro para la sombra, por lo que, para verla bien, tendríamos que colocar este elemento sobre un fondo oscuro.

Código: Seleccionar todo

#sombraredondeada{
   background-color: #090;
   color: #fff;
   width: 400px;
   padding: 10px;
   -moz-border-radius: 7px;
   -webkit-border-radius: 7px;
   
   box-shadow: 15px -10px 3px #000;
   -webkit-box-shadow: 15px -10px 3px #000;
   -moz-box-shadow: 15px -10px 3px #000;
}

En este tercer ejemplo tenemos un caso curioso de sombra, pues está aplicada sobre un elemento que tiene las esquinas redondeadas con CSS 3. Así pues, la sombra también debe tener las sombras redondeadas, para ajustarse al elemento que la produce. Ambos navegadores con compatibilidad a sombras y CSS 3 funcionan correctamente con sombras y bordes redondeados.
enlace a una página donde puedes ver los ejemplos de sombras en CSS 3.

Bueno, esto es la explicación de tipos de sombras y como aplicarlas, en tu caso se supone deberás aplicar el que más te guste a la etiqueta "body" de tu archivo common.css de la carpeta theme de tu estilo

Código: Seleccionar todo

body {
    /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
    font-family: Verdana, Helvetica, Arial, sans-serif;
    background: url('{T_THEME_PATH}/images/bg_attruum.jpg') no-repeat fixed 50% 0;  	
    background-color: #242424;
    color: #828282;
    /*font-size: 62.5%;             This sets the default font size to be equivalent to 10px */
    font-size: 10px;
/*    margin: 0;    */
    margin: 0 auto;
    max-width : 1024px;
    min-width: 800px;
}

la otra opción es cambiar el foro a un ancho fijo ya que ahora esta como minimo a 800 y máximo a 1024, pues dejarlo a una medida fija y crear el efecto de la sombra en el mismo archivo de fondo del estilo ya que ese estilo no usa separación arriba y abajo del todo y el fondo no se mueve con el foro

[cfeze]

Wenísimo, pero sólo se aplico en el lado derecho, y el izquierdo?

[DaVidU]

si lo que buscas es sombra a los 2 lados es mejor lo hagas en el fondo de pantalla