Página 6 de 13«12456781213»
Moderador del foro: ZorG 
Foro uCoz » Ayuda a los webmasters » Soluciones personalizadas » Qué se puede hacer con CSS (algunos trucos y otras cositas útiles)
Qué se puede hacer con CSS
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 76 | 5:24 PM
Bonita caja de búsqueda con CSS3

Son miles las maravillas que podemos hacer con CSS3. Se ha creado una bonita caja de búsqueda realizada con CSS3, aplicando degradados con CSS Gradient, creando círculos redondeados con border-radius y aplicando sombra inferior con box-shadow inset.

Ahora vamos a comprobar como se crea cada elemento que forma parte de la caja de búsqueda.

Círculo redondeado

Puedes crear un círculo dando un valor muy alto a la propiedad border-radius, el ejemplo usa 100 px.

Quote
.circle { width: 100px; height: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px; }

Efecto de sombra interior

Especificando el valor inset podemos crear sombra interior en una caja. Esta característica sólo está soportada, por ahora, en Google Chrome 4+ y Firefox 3.5.

Quote
.inset { -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4); -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4); box-shadow: inset 0 3px 8px rgba(0,0,0,.24); }

Ejemplo de la caja de búsqueda

Unidas las 3 características anteriores, más CSS gradient para realizar un degradado en la parte de fuera de la caja de búsqueda, crearemos un sencillo buscador estilizado con CSS3. Para los navegador que no soporten CSS3, la caja se mostrará con forma cuadrada en todos los elementos que contiene y sin efecto de degradado.

El código HTML sería así:

Quote
<form>
<input type="text" value="Buscar..." onfocus="if (this.value == 'Buscar...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Buscar...';}" />
<input type="button" value="Ir" />
</form>

El código CSS:

Quote
.searchform {

display: inline-block;

zoom: 1; /* ie7 hack para display:inline-block */

*display: inline;

border: solid 1px #d2d2d2;

padding: 3px 5px;

-webkit-border-radius: 2em;

-moz-border-radius: 2em;

border-radius: 2em;

-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);

-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);

box-shadow: 0 1px 0px rgba(0,0,0,.1);

background: #f1f1f1;

background: -webkit-gradient(linear, left top, left bottombottom, from(#fff), to(#ededed));

background: -moz-linear-gradient(top, #fff, #ededed);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */

-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */

}

.searchform input {

font: normal 12px/100% Arial, Helvetica, sans-serif;

}

.searchform .searchfield {

background: #fff;

padding: 6px 6px 6px 8px;

width: 202px;

border: solid 1px #bcbbbb;

outline: none;

-webkit-border-radius: 2em;

-moz-border-radius: 2em;

border-radius: 2em;

-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);

-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);

box-shadow: inset 0 1px 2px rgba(0,0,0,.2);

}

.searchform .searchbutton {

color: #fff;

border: solid 1px #494949;

font-size: 11px;

height: 27px;

width: 27px;

text-shadow: 0 1px 1px rgba(0,0,0,.6);

-webkit-border-radius: 2em;

-moz-border-radius: 2em;

border-radius: 2em;

background: #5f5f5f;

background: -webkit-gradient(linear, left top, left bottombottom, from(#9e9e9e), to(#454545));

background: -moz-linear-gradient(top, #9e9e9e, #454545);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */

-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */

}

Ver el ejemplo de caja de búsqueda en CSS3
Descargar el ejemplo de caja de búsqueda en CSS3


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 77 | 5:55 PM
Crear botones CSS estilo Wii

Con una imagen, un archivo CSS con su respectivo código y un poco de esfuerzo, podremos crear botones CSS parecidos a los de Nintendo Wii, totalmente compatibles con IE6, IE5.5, IE7, Safari 2, Firefox 2, Opera 9.

Los pasos para crearlo son muy simples, y se ilustran al salto de la página.

Primero, obviamente, deberemos subir la imagen y el archivo CSS al servidor (Los dos en la misma ubicación, la misma ruta de nuestro servidor), y llamar al archivo CSS desde el documento, es decir, así:

Para Anchor:

Quote
<a class="button" href="?d=-1"><span>tu texto</span></a>

Para botón Form: (Puede ser que quieras usar una detección para saber el navegador), existen dos opciones:

» Para Internet Explorer (y si necesitas varios botones dentro de un Form):

Quote
<span class="button">
<input type="submit" name="foo" value="tu texto" />
</span>


» Para los navegadores que no sean Internet Explorer:

Quote
<span class="button">
<button type="submit" name="foo" value="tu texto">tu texto</button>
</span>

Para crear una acción inhabilitada :

Quote
<del class="button"><span>tu texto</span></del>


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 78 | 4:42 PM
10 hacks con CSS

Una lista de 10 hacks para CSS, que nos pueden servir alguna vez.
1) Mejorar el escalado y resampleado de las imágenes en Internet Explorer
En IE 7 la propiedad de escalado por el método bicubic está desactivada y debemos activarla por CSS:

Quote
img {
-ms-interpolation-mode: bicubic;
}

-ms-interpolation-mode sirva para especificar el método de resampleado de imágenes del navegador.

2) Añadir opacidad a Internet Explorer 8
Con IE 8 todavía no sabemos si puede soportar opacity, así que usaremos este hack:

Quote
element {
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=80)”;
}

3) Internet Explorer solo soporta 32 hojas de estilo
Hay que tenerlo en cuenta, Internet Explorer solo puede soportar 32 hojas de estilo, ya sea mediante o @import url;, si te pasas, las que añadas no serán procesadas.

4) Cargando en CSS no obstructivo
Podremos especificar una imagen de fondo mientras se están cargando nuestras imágenes, en CSS:

Quote
img {
background: white url(’Images/Loading.gif’) no-repeat center;
}

5) Distingir entre Google Chrome y Safari con CSS
Pese a que los dos utilizan el motor renderizado Webkit, podremos saber distinguir cúal de los dos navegadores se están utilizando gracias a este hack en CSS:

Quote
/* Google Chrome hack */
body:nth-of-type(1) .elementOrClassName {
/* properties go here */
}

/* Safari hack */
body:first-of-type .elementOrClassName{
/* properties go here */
}

6) Resetear las transperencias de los hijos de padres transparentes en Internet Explorer
Si no deseamos que los hijos de un contenedor transparente absorban también la transparencia, deberemos utilizar este hack:

Quote
.parent{
...
filter: alpha(opacity=30);
}

.child{
...
position: relative;
// En caso de tener una opacidad diferente
filter: alpha(opacity=50);
}

8 ) Emular border-color: transparent en Internet Explorer 6
En Internet Explorer 6 border-color: transparent no está soportada (En IE 7 sí), pero podremos emularlo por este hack:

Quote
.testDiv {
...
border: solid 10px transparent;
}
// IE Hack
*html .testDiv {
border-color: pink;
filter: chroma(color=pink);
}

9) Exótico hack CSS para Internet Explorer
Aviso, este código hace que no se valide el CSS, pero algunas veces no queda más remedio que usarlo:

Quote
h1{
color: green;
.color: red;
}

10) Marca de agua en CSS
Una marca de agua nos añade un texto encima de una imagen, con este hack podremos hacer algo parecido, pero no solucionaría los problemas de copia de contenido, ya que el texto no lo añade a la imagen.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 79 | 6:16 PM
Hacks CSS mediante selectores

A veces un sitio web no se muestra bien en todos los navegadores (es decir, no es cross-browser). El navegador principal que crea problemas es Internet Explorer (u otro navegador, pero principalmente el que da más problemas es ese). Para resolver este problema se utilizan los hacks (o los comentarios condicionales, que no tienen nada que ver con los hacks). En esta entrada mostraremos varios tipos hacks con el uso de selectores:

Para Internet Explorer 6 y anteriores:

Quote
* html {}

Solo Internet Explorer 7

Quote
* + html/*/ * /**/ body {}

Internet Explorer 7 y superior:

Quote
*:first-child+html {}

Los dos selectores anteriores se utilizan para Internet Explorer 8 y anteriores:

Quote
*:first-child+html {}
* html {}

Solo Internet Explorer 8:

Quote
head/*/+body/**/ {}

Para Internet Explorer 5 y 5.5, se escribe el siguiente fragmento CSS dentro de una regla, de forma que lo que venga a continuación no podrá ser leido por estas versiones (5 y 5.5) :

Quote
voice-family: ""}""; voice-family:<a title="inherit" href="http://www.cssblog.es/css-inherit/">inherit</a>;

No hace falta usar la propiedad CSS voice-family, se puede usar cualquier otra (Ejemplo: color y background).

Para navegadores modernos (Firefox, Opera…) e Internet Explorer 7 y 8:

Quote
html>body {}

Solo navegadores actuales excluyendo a Internet Explorer 7 pero no al 8:

Quote
html>/**/body {}

Solo navegadores actuales (se excluyen a todas las versiones de Internet Explorer):

Quote
html>/*/*/body {}

Para Opera 9.2x y anteriores (hasta el 7.2x):

Quote
html:first-child {}

Para Safari 2 y 3 y Konqueror (CSS3 válido):

Quote
html[xmlns*=""] body:last-child {}

Para Safari 3 y otros basados en Webkit (CSS3 válido):

Quote
body:not(:root:root) {}

Para Opera 9.5, Safari 3 y Konqueror 3.5.x:

Quote
body:only-of-type {}

Recordad que siempre podéis validar el código CSS que deseéis, usar esta tabla para ver mejor la compatibilidad de estos hacks, además de poder usar los comentarios condicionales.
¿Y tú, qué usas para “engañar” a IE?


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 80 | 2:10 PM
Depuración de CSS – Comentarios y documentación

¿Cuántas veces has heredado un proyecto de otra persona, para descubrir que el código es un desastre y no entiendes nada? Cada uno tiene su manera de escribir código, pero esto tiene serios inconvenientes a la hora de compartir proyectos, puesto que aunque nosotros lo entendamos, puede que nuestro código sea ininteligible para los demás.

En esta serie de artículos, te propondremos unas pautas y buenas prácticas de escritura css, que ayudarán a que tu código sea entendido por otros desarrolladores y por ti mismo. De esta manera evitarás incoherencias y redundancias que agilizarán el desarrollo en equipo y evitarán la duplicación de esfuerzos.

Tener una buena organización es la base de una buena CSS. Documentar el código con comentarios te ayudará a ti y a futuros desarrolladores, a comprender y explorar el CSS más rápidamente. En este primer artículo veremos varias maneras de usar los comentarios para organizar mejor tu código.

Comentarios de organización
Antes de empezar a escribir los estilos, es recomendable definir la organización del documento CSS según las diferentes secciones de la página web que estemos desarrollando. Puedes añadir comentarios indicando donde irán los estilos para cada sección, por ejemplo:

Quote
/*---Restet---*/
/*---Estilos globales---*/
/*---Cabecera---*/
/*---menu---*/
/*---Contenido principal---*/
/*---Barra lateral---*/
/*---Pie de página---*/

En la sección “Estilos globales” pondremos los estilos genéricos, como los de encabezado, párrafos, listas, enlaces, tablas, elementos de formularios etc…

Al mantener estos estilos genéricos en la parte superior de mi archivo CSS, podremos sacar provecho de la cascada.

Aunque pueda parecer excesivo, en sitios web muy grandes, puede resultar útil añadir un segundo nivel de comentarios en cada sección. De esta manera, podríamos subdividir el comentario de estilos globales así:

Quote
/*---Estilos globales---*/
/*--Estructura--*/
/*--Enlaces--*/
/*--Encabezados--*/
/*--Formularios--*/

El formato utilizado para estos comentarios depende de ti. La clave consiste en definir el formato que prefieras de manera coherente, para que cualquiera pueda usarlo.

Comentarios de Comunicación
Hemos echado un vistazo a los comentarios usados para la organización de la css, pero también se pueden utilizar para comunicar información importante sobre el proyecto a tus compañeros o incluso para a ti mismo, por ejemplo:

Quote
/*---- TÍTULO: El perfil de la pantalla principal | AUTOR: JLV | Actualización: 03/23/10 por JLV ---- * /

La información del título es útil cuando se trabaja con varias hojas de estilo. La información sobre el autor permite a todos los miembros del equipo para saber a quién acudir si tiene alguna pregunta sobre el CSS original, mientras que la información actualizada permite saber cuándo se produjo la última actualización y quien lo hizo. Recuerda que aunque los navegadores no renderizan los comentarios, su contenido se envía junto con el resto de estilos, por lo que no se debe incluir ninguna información sensible o confidencial.

Comentarios de desarrollo y depuración
Hay ocasiones en que te asignan un trabajo que ha empezado un compañero y te preguntas, ¿porqué lo ha hecho de esta manera?, o ¿dónde esta la clase que necesito?. Los comentarios también pueden ayudar en estas situaciones.

En un comentario puedes indicar que un bloque css no está terminado o que te has trabado y no sabes como terminarlo. De esta manera ahorrarás tiempo y dolores de cabeza a tus compañeros, por ejemplo:

Quote
/*-- Estilo para los estados del enlace a la espera de nuevos cambios de diseño, por favor no lo edites | JLV 03/23/10--* /
a: link,
a: visited (color: # 0075b2;text-decoration: none;}
a: hover, a: focus, a: active (color: # b3d88c;)

Ten en cuenta, que una vez que hayas terminado con el desarrollo, estos comentarios pierden su utilidad y sólo aumentarán el tamaño de tu archivo. Por lo tanto una vez terminado tu proyecto es recomendable eliminarlos.

Clave de color
También podremos utilizar los comentarios para crear una clave de color donde definiremos la paleta de colores para el sitio web. Esto es particularmente útil durante la fase de desarrollo, ahorrando así tiempo de muestreo de colores. ¿Necesitas saber el valor hexadecimal de enlaces azules de nuestra web?, míralo en la clave, solo tendrás que copiar y pegar. Puedes agrupar la clave en una sola línea, o dividirlas en varias líneas. De nuevo, el objetivo es encontrar el formato que mejor se adapte a nuestras necesidades y ser coherente una vez lo hayamos definido:

Quote
/*--- COLORES: Verde # b3d88c Azul | # 0075b2 | Gris claro # | # eee gris oscuro 9b9e9e | naranja # f26522 | Cerceta # 00a99d | Amarillo # fbc112 --- */
/*--- COLORES
Verde # b3d88c
Azul # 0075b2
Gris claro # eee
9b9e9e gris oscuro #
Naranja # f26522
Cerceta # 00a99d
Amarillo # fbc112
---*/

Una de las cosas más frustrantes de heredar un proyecto de otra persona, es cuando las convenciones de nomenclatura para clases e identificadores no tienen ningún sentido. Esto puede dificultar una actualización o un rediseño y puede hacernos perder mucho tiempo. En este artículo te daremos algunos consejos sobre cómo nombrar a las clases e identificadores de tus proyectos, de manera que sean fácilmente entendibles por otros desarrolladores.

Algunos ejemplo
Imagínate que te encuentras con el siguiente código:

Quote
.f18 {
background: #fff;
border: 1px solid #ff0;
font-weight: bold;
padding: 10px;
}
.izquierda {
border: 1px solid #ff0;
float:left
}

Si nos encontramos con un código como este, seguramente perderemos mucho tiempo tratando de localizar estas clases e intentando averiguar cual es su función. Cuando nos enfrentemos a un rediseño, es muy posible que un elemento como class=”izquierda” termine arriba, abajo o a la derecha y por tanto ese nombre de clase no tenga ninguna relación con el nuevo diseño.

Por lo tanto si por class=”izquierda” nos referimos a un menú situado a la izquierda, usemos mejor class=”menu-navegacion”. En cuanto a la clase f18, no tenemos ni la más remota idea de a que hace referencia, por lo que es mejor que el desarrollador nombre a esa clase según la función que cumpla. De este modo esta nomenclatura sería mucho más inteligible:

Quote
.MensajeAlerta {
background: #fff;
border: 1px solid #ff0;
font-weight: bold;
padding: 10px;
}
.menu-navegacion {
border: 1px solid #ff0;
float:left
}

Pero más allá del contexto, las convenciones de nomenclatura semántica son útiles para ahorrar tiempo. Por ejemplo, si asigno la clase “Caja-azul” a un cuadro de ayuda en un sitio cuyo color corporativo es azul y la empresa cambia su color corporativo a rojo. Caja-azul no significará nada en este nuevo contexto.

En ese caso no sólo tendrás que actualizar el valor hexadecimal de ese estilo, sino que tendrás que cambiar todas las referencias a ese color. Si hubieras usado en su lugar la clase “llamada” (o algo igualmente significativo), te podrías haber ahorrado mucho trabajo.

Consejos para mejorar la nomenclatura de nuestros css
• El nombre de nuestras clases e identificadores no debe describir una característica visual, como color, tamaño o posición. Tampoco debe describir una función o comportamiento.
• El nombre debe ser específico y claro, para que otras personas puedan entender su significado.
• Si después de todo, crees que es imprescindible definir una clase única y exclusivamente para alinear una imagen o un párrafo y llamarla con esa acción, documéntalo apropiadamente, para que los otros desarrolladores tengan problemas en el futuro.
Separa las palabras mediante guiones o mayúsculas. Por ejemplo menu-superior o menuSuperior.
• En todo caso, es mejor no hacer uso excesivo de clases, porque a menudo es más sencillo utilizar selectores contextuales o una combinación de selectores que no alteren el HTML.

[b]En conclusión
Las clases e identificadores deberían llamarse según la función o contenido que describen y de manera independiente respecto a factores de presentación[b]. De este modo, cuando actualicemos un sitio, no tendremos que preocuparemos en cambiar todos los nombres cada vez que modifiquemos el diseño, sino simplemente cambiar las propiedades que nos hagan falta.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 81 | 1:08 PM
CSS Sticky Footer: un footer fijo con estilos CSS

Ya hemos esctito sobre este efecto que seguro estoy de que les interesa mucho. Aquí quiero seguir: es un efecto muy bueno y no hay muchos sitios que lo implementen. El uso de un footer fijo tiene muchas utilidades además de ser algo muy bonito ^_^. Piensen que tendrán una cantidad de opciones, enlaces y demás todo el tiempo al alcance del usuario.

CSS Sticky Footer es un script de CSS listo para que copies y pegues en tu proyecto web. La mayor ventaja es que funciona con Internet Explorer 5, 6, 7 y 8, además de Firefox, Opera y Safari, entre otros.

CSS Sticky Footer: un footer fijo con estilos CSS
Agrega las siguientes líneas de código CSS a tu hoja de estilos. El valor negativo para el margen en .wrapper es el mismo número que el alto de .footer y .push. El margen negativo siempre debería ser igual que la altura total del footer (incluyendo paddings o bordes que hayas o no agregado).

Quote
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}

En tu HTML, sigue la siguiente estructura. Nada del contenido puede estar fuera de .wrapper ni de .footer salvo que ya esté posicionado por medio de CSS:

Quote
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright © 2008</p>
</div>
</body>
</html>

¿Tienes problemas?
• Agregar márgenes a los elementos puede ser un lío. Usa padding en su lugar y se solucionarán todos tus problemas.
• Si no te funciona con “x” navegador, chequea que esté soportado y si has copiado bien el código.

Las propiedades height: auto !important; y height: 100%;
Ya sé que anda perfecto sin ellas. Son simplemente un pequeño hack para que el footer funcione en Internet Explorer 6, así que ¡No las elimines!

Haz clic aquí para ver un ejemplo de cómo queda este efecto.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 82 | 1:31 PM
Eliminando la molesta línea punteada de los enlaces de tu sitio

Los links del tipo "ancla" <a> muestran por defecto una línea punteada cuando están activos o "en foco". En Firefox la línea toma el color del texto mientras que en otros navegadores o versiones directamente se muestra en color gris.

Esto no es una locura, por cuestiones de accesibilidad se muestra qué link está activo (piensa en personas que no puedan acceder a un sitio con una computadora con mouse. Presionando "tab" se desplazarán por los enlaces. Pero si te molesta ver esa línea en tu sitio por cuestión de estética o diseño, puedes seguir leyendo para enterarte cómo eliminarla.

Aquí puedes ver un ejemplo de cómo se ve la línea punteada de la que te hablo.

Prueba hacer clic en un enlace cualquiera, aquí mismo, pero deja el botón del mouse presionado unos segundos. Podrás ver la línea "en vivo y en directo".

Quitarla por medio de CSS es muy sencillo:

Quote
a {
outline: none;
}

Pero no te olvides de la accesibilidad. Deberías crear un estilo para reemplazar esa línea molesta. Yo suelo usar el mismo que en "hover".

Por ejemplo:

Quote
a:hover, a:active, a:focus {
// estilos para cualquier forma en la que se vaya a usar el link
}

¡Anímate a personalizar tu blog!


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 83 | 5:45 PM
¿Cómo funciona la propiedad “z-index” en CSS?

Para los que no son expertos en CSS, muchas veces es un misterio el modo en que funciona la propiedad z-index (ya hemos escrito de esta propiedad). Pero lo cierto es que es bastante utilizada y nos permite corregir rápidamente algún detalle o problema de ubicación de los elementos, trabajando en conjunto con la archiconocida float.

Para arrojar un poco de luz sobre el asunto te propongo conocer las funciones básicas de z-index y probar una demo online interactiva donde cada cambio que vas realizando en los valores se muestra automáticamente. ¡Comencemos ya!

Las reglas básicas de z-index:
• Un contenedor está apilado al mismo nivel que su objeto “padre” a menos que esto se modifique mediante la propiedad z-index.
z-index sólo funciona con objetos que tengan la propiedad position seteada como relative, fixed o absolute.
• Asignar un valor de opacidad menor que 1 a un elemento posicionado genera implícitamente un contexto de apilamiento, lo que equivale a usar z-index.

Para un contenedor posicionado, la propiedad z-index especifica:
1. El nivel de apilamiento del contenedor en el contexto de apilamiento actual.
2. Si el contenedor establece un contexto de apilamiento local.

Si no se ha especificado un valor para z-index, los elementos se apilan en el siguiente orden (de más atrás hacia adelante):
1. Contenedores en el flujo normal, de acuerdo con la secuencia establecida en el código fuente.
2. Contenedores flotantes (que usan float).
3. Contenedores posicionados, de acuerdo a la secuencia del código fuente.

Demo online interactiva del funcionamiento de z-index:
Con esta herramienta online puedes testear en tiempo real los cambios que vayas haciendo en cada contenedor, para entender visualmente (de eso se trata CSS) cómo funciona z-index.

Con esto sólo no me alcanza. ¿Dónde puedo encontrar más información?
Para las mentes inquietas, lo mejor es recurrir a algunas fuentes en inglés:
Elaborate description of Stacking Contexts
z-index Attribute, zIndex Property
Understanding CSS z-index
IE/Win problems with absolute positioning inside a relative element
Overlapping and z-index

¡Espero que esto te haya sacado muchas dudas! ¡No dudes en dejar un comentario si te ha quedado alguna!


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 84 | 1:23 PM
Crear un logotipo con CSS

¿Tienes curiosidad por aprender a realizar logotipos en CSS como el de Internet Explorer u Opera, entre otros? En este post explicaré como crear un logotipo con CSS, teniendo como fuente de inspiración el logotipo que asocio a la entrada. Se resumen en varios pasos, bastante sencillos, que dan como resultado un logotipo muy interesante realizado en CSS.

Código HTML
Empezaremos con esta estructura:

Quote
<div id="logo">
<h1>
<span id="css">CSS</span>
<span id="img"><a href="#" title="Long description of the image">D</a></span>
<span id="day">Day</span>
</h1>
<h2>Until the quirks stop</h2>
</div>

Ver ejemplo.

Estilos generales
Los estilos generales son muy sencillos:

Quote
#logo {

background: #fff;

color: #000;

font: 100%/1 Arial, Helvetica, sans-serif;

}

Hemos definido el tipo y el tamaño de la fuente del logotipo además del color del texto y el color del fondo.

Ver el ejemplo.

Posicionamientos y dimensiones
Ahora indicaremos la posición y dimensiones de los elementos:

Quote
#logo {

padding: 1em;

}

#logo h1, #logo h2 {

margin: 0;

}

#logo h1 {

height: 150px;

}

#logo h1 span {

float: left;

height: 100%;

}

Ver ejemplo.

Para posicionar el elemento hijo del encabezado h1, usaremos la propiedad float. La altura de este encabezado equivale a la altura de la imagen de fondo que vamos a insertar. El hijo del encabezado h1 (span) tendrá la misma altura que su padre.

Insertando la imagen de fondo
La imagen de fondo se incluirá de esta forma:

Quote
#logo h1 #img {

width: 80px;

height: 150px;

background: transparent url("../img/csslogo.png") no-repeat top left;

text-indent: -1000em;

}

Ver ejemplo.

Las dimensiones de el elemento #img equivalen a las dimensiones de la imagen de fondo.

Definiendo el tamaño de la fuente y el color
Ahora podremos escribir el tamaño y el color del elemento hijo del encabezado h1.

Quote
#logo h1 #css, #logo h1 #day {

font-size: 150px;

text-transform: uppercase;

}

#logo h1 #css {

color: #c00;

}

Ver el ejemplo.

Hemos usado píxeles para tener un control más preciso sobre el tamaño. En estos tamaños podemos usar píxeles mejor en vez de ems.

El subtítulo
El subtítulo (elemento h2) tiene el siguiente estilo:

Quote
#logo h2 {

text-transform: uppercase;

font-size: 55px;

display: inline;

background: #000;

color: #fff;

position: relative;

top: 10px;

}

Ver el ejemplo.

Como la imagen de fondo debe cubrir únicamente el área de texto y no todo el bloque contenedor, convertiremos el elemento a un elemento en línea. Después crearemos un espacio vertical usando la propiedad position con un desplazamiento vertical de 10 px.

Finalmente alinearemos verticalmente el texto del elemento h1 con la línea de la imagen de fondo. Para ello deberemos insertar lo siguiente:

Quote
#logo h1 #css, #logo h1 #day {

position: relative;

top: 15px;

}

Ver el ejemplo final

Hemos usado la posición relativa pero ahora con un desplazamiento vertical de 15 píxeles. Puede ser interesante también que veas estos dos ejemplos: Ejemplo 1. Ejemplo 2.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 85 | 1:26 PM
Superposición de objetos de HTML (overlapping) con CSS

Cuando trabajamos una web y aparecen problemas con la ubicación de los items, varias veces se debe a que los contenidos quedan mal apilados. Por ejemplo hacemos un menú en css y un swf con noticias pero el menú se despliega hacia abajo y los items son tapados por el swf. Otra ocasión es cuando queremos superponer cosas: Ya sean imágenes, textos o incluso películas flash.

¿Como ordena CSS el orden de apilación?
Por medio de la propiedad z-index y de la propiedad position de CSS podemos ordenar los elementos de nuestra página a nuestro gusto. Lo mas recomendado para esta propiedad es incluirla en divs.

¿Cómo funcionan las propiedades z-index y position?

Z-index:
El valor de z-index indica la posición de profundidad (capa) de u objeto en la página. Los elementos con valores positivos son apilados encima de uno con valores negativos, menores, o no especificados. Dos objetos con el mismo z-index son organizados dependiendo de la colocación de sus etiquetas. Un valor negativo posiciona el objeto debajo de otro que no lo tenga definido. Para remover el efecto, se retira o se cambia el parámetro a null.

Nota: la propiedad z-index solo aplica a elementos que tengan la propiedad position en absolute o relative.

Position:
Esta propiedad se utilice junto con el z-index para crear capas. Si se pone en absolute, esta propiedad ignorará la posición de los otros objetos en la página y no los afectará, ni ellos al objeto con la propiedad. Entonces causara un overlapping (apilación). Esta apilación se controla con el z-index. Los elementos con position:absolute no tienen margenes pero sí bordes y padding.Si ponemos position:relative, entonces el objeto (o el div) se acoplará al documento sin causar overlap.

¿Como uso estos códigos?
Al usar estas propiedades, crearas algo que Dreamweaver llama "capas". Son capas ya que no interfieren con otras partes del documento, ni son afectadas por ellas. Ahora veremos como aplicar esto a un div (en XHTML):

Quote
<html>
<head>
<title>Prueba de overlapping</title>
<style type="text/css">
#capa1{ position:absolute; z-index:1; }
</style>
</head>
<body>
<div id="capa1"> Texto con z-index de 1 </div>
</body>
</html>

Ya creamos la primera capa, ahora creemos la segunda conteniendo una imagen (busquen una imagen cualquier lo bastante grande), que ira debajo del texto. Le ponemos color de fondo a la capa 1 para que no se pierda el texto.

Quote
<html>
<head>
<title>Prueba de overlapping</title>
<style type="text/css">
#capa1{ position:absolute; z-index:1; background-color:#FFFFFF; }
#capa2{ position:absolute; z-index:0; }
</style>
</head>
<body>
<div id="capa1"> Texto con z-index de 1 </div>
<div id="capa2"> <img src="imagen.jpg" /> </div>
</body>
</html>

También podemos especificarle una posición a las capas y su ancho y alto:

Quote
<html>
<head>
<title>Prueba de overlapping</title>
<style type="text/css">
#capa1{ position:absolute;
z-index:1;
background-color:#FFFFFF;
top:100px;
left:300px;
width:300px;
height:12px;
}
#capa2{
position:absolute;
z-index:0;
}
</style>
</head>
<body>
<div id="capa1"> Texto con z-index de 1 </div>
<div id="capa2"> <img src="imagen.jpg" /> </div>
</body>
</html>

Ahora veamos como se le hace overlapping a dos swf cualquiera: Primero se crean dos capas, una con mayor z-index que la otra, y se ingresa el código para insertar tu swf. Despues ajustamos el parámetro para que nuestro swf sea transparente:

Quote
<html>
<head>
<title>Prueba de overlapping</title>
<style type="text/css">
#peliarriba{ position:absolute; z-index:1; } #peliabajo{ position:absolute; z-index:0; }
</style>
</head>
<body>
<div id="peliarriba">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="550" height="400">
<param name="movie" value="circulo-peque.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed wmode="transparent" src="circulo-peque.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="550" height="400"></embed>
</object>
</div>
<div id="peliabajo">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="550" height="400">
<param name="movie" value="circulo-grande.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed wmode="transparent" src="circulo-grande.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="550" height="400"></embed>
</object>
</div>
</body>
</html>

Aunque no parezca, cada circulo es un SWF independiente superpuesto. Ver ejemplo para más detalles.

Advertencia: ya sabes que hacer un swf transparente puede hacer la navegación lenta, así que imagina dos swf superpuestos y transparentes. En este caso el overlapping debe ser usado con películas pequeñas.

Felicidades, ya pueden hacer capas en HTML y XHTML usando CSS. Espero que tengan suerte haciéndolo ya que es bastante útil. Con capas no tendran tanto problema en compatibilidad con otros navegadores si especifican la altura y ancho así como la posición. Si ven el ejemplo pueden ver que con los swf el elemento de atrás no es accesible así el fondo sea transparente.

Información adicional
Ejemplo del tutorial

Adherido: 6241322.jpg(47Kb) · 0983903.jpg(35Kb) · 0512519.jpg(29Kb)

Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 86 | 1:15 PM
CSS: еl método Clearfix para quitar floats

El famoso hack clearfix, o "hack de limpieza fácil", es un método útil para quitar floats. Si bien el hack original funciona bien, los navegadores a los que apunta son obsoletos o ya se han quedado en el camino.

Es por eso que en esta nota le decimos adiós al clearfix original y les traemos un nuevo método clearfix mejorado. ¿Están preparados?
El hack Clearfix original luce así:

Quote
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

Si, es feo, pero funciona muy bien a la hora de permitirle a los diseñadores quitar floats sin ocultar el desbordamiento y establecer un ancho.
La lógica detrás de este método funciona de esta manera:

• Obtiene los navegadores compatibles con el primer bloque de declaraciones (si todos los navegadores fueran compatibles de forma estándar, esto sería lo único que se necesitaría) y crea un bloque de limpieza oculto después del contenido del elemento objetivo.
• La segunda declaración aplica una propiedad de mostrar inline-table, exclusivamente para el beneficio de IE/Mac.
• En este punto, utilizamos el hack comment-backslash para esconder el recordatorio de las reglas de IE/Mac. Esto nos permite hacer lo siguiente:
• Aplicar una altura de 1% sólo a IE6 para activar hasLayout (que se requiere para que el hack funcione)
• Re-aplicar display:block a todo excepto a IE/Mac

Como pueden ver, esto es demasiado alboroto para un explorador que ha estado muerto por lo menos durante los últimos tres o cuatro años. Ya nadie usa el IE /Mac, así que es momento de bajarse del clearfix hack. El resultado es un CSS mucho más limpio y más eficiente:

Quote
/* new clearfix */
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

Tengan en cuenta que hemos mejorado la clearfix hack añadiendo soporte para IE7. Ni IE6 ni IE7 soportan la pseudo-clase :after utilizada en la primera declaración, así que necesitamos un método alternativo para la aplicación de clearfix. Afortunadamente, aplicando zoom: 1 a cualquiera de los navegadores activa el mecanismo hasLayout propietario de IE, que funciona muy bien para borrar el float. Esto lo logramos con un par de selectores válidos específicos de estos navegadores, pero deben tener en cuenta que los “comentarios condicionales” son el método recomendado para hacer esto.

Afortunadamente, IE8 soporta la pseudo-clase :after, por lo que este nuevo método se volverá todavía más simple, eventualmente, cuando IE6 y 7 desaparezcan.

En resumen, el nuevo método clearfix aplica reglas de limpieza para los navegadores compatibles utilizando la pseudo-classe :after. Para IE6 e IE7, el nuevo método clearfix activa hasLayout con algo de CSS. Por lo que, el nuevo método Clearfix elimina de forma efectiva floats en todos los navegadores más comúnmente usados sin la necesidad de utilizar hacks.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 87 | 12:00 PM
Animaciones CSS3 en HTML con jQuery

Con CSS3 las posibilidades enriquecer nuestras aplicaciones Web ha aumentado bastante. Ya tenemos la opción de crear animaciones desde nuestra hoja de estilos CSS.

Las animaciones con CSS3 tienen aceleración por hardware las cuales hacen que no consuman tantos recursos como lo hace Javascript. En un computador normal no se nota la diferencia, pero cuando se pasa a un celular ó dispositivo móvil se puede comprobar su poder y utilidad.

En lo personal creo que estas interacciones deberían ir en Javascript, el cual tiene más control de las acciones del usuario, flujos conducidos por una navegación, y estas cosas que están de moda hoy en día como el "progressive enhancement", "graceful degradation" y demás.

A razón de esto, fue desarrollado este plugin para jQuery que maneja animaciones para CSS3.

Plugin CSS3Animate para animaciones CSS3 con jQuery

Código:

Quote
/**
* @author bipsa
* @class CSS3 Jquery Plugin and Mobile handlers.
*/
;(function($){

$.fn.isCSSAnimable = function (){
return true;
}

/**
* @author Sebastian Romero
* @param {Object} options
*/
$.fn.CSS3Animate = function(options){
var defaults = {
"class" : "in",
"oncomplete": null,
"time": 1000,
"property": "opacity",
"css" : {},
"transition": "ease-in-out",
"delay" : 0
};
var settings = $.extend({}, defaults, options);
this.each(function(index, current){
var element = $(this);
if ($("body").isCSSAnimable()) {
if (typeof settings.property === "object")
settings.property = settings.property.join(",")
var cssApply = $.extend({}, {
"-webkit-animation-timing-function": settings.transition,
"-webkit-transition-duration": (settings.time / 1000) + "s",
"-webkit-transition-property": settings.property,
"-webkit-transition-delay": (settings.delay / 1000) + "s",
"-moz-transition-duration": (settings.time / 1000) + "s",
"-moz-transition-property" : settings.property
}, settings.css);
element.css(cssApply).addClass(settings["class"]);
if (settings.oncomplete)
element.transitionEnded(settings.oncomplete);
} else {
if(settings.oncomplete)
element.animate(settings.css, settings.oncomplete);
else
element.animate(settings.css);
}
});
return this;
};


/**
* @author bipsa
* @param {Function} onComplete
*/
$.fn.transitionEnded = function(onComplete){
this.each(function(index, current){
var element = $(this);
var action = function (event) {
if (onComplete) {
onComplete(event, element);
if((jQuery.browser.webkit != true))
element.get(0).removeEventListener('transitionend', action, false);
else
element.get(0).removeEventListener('webkitTransitionEnd', action, false);
}
};
if((jQuery.browser.webkit == true))
element.get(0).addEventListener('webkitTransitionEnd', action, false);
else if (jQuery.browser.mozilla && (parseFloat(jQuery.browser.version.substr(0, 3)) > 1.9)) {
element.get(0).addEventListener('transitionend', action, false);
} else
onComplete(null, element);
});
return this;
};
})(jQuery);

Cómo usar el plugin de animación CSS3 con jQuery

La implementación de este plugin es sencilla, solo se hace el selector y se llama el método CSSAnimate, como pueden notar el plugin ya valida si soporta CSS transitions, y de no soportarlo simplemente asigna los estilos a su selección.

Imaginemos que creas una clase llamada ".mySelector" que permitirá rotar un elemento HTML.

Código:

Quote
.mySelector {
-moz-transform : rotate(0deg) scale(1) rotate(0deg);
webkit-transform : rotate(0deg) scale(1) rotate(0deg);
}

Código:

Quote
$(".mySelector").CSS3Animate({
"property": ["-moz-transform", "webkit-transform"],
"transition-duration": 1000,
"css": {
"-moz-transform" : "rotate(350deg) scale(1) rotate(15deg)",
"webkit-transform" : "rotate(350deg) scale(1) rotate(15deg)"
},
"oncomplete" :function(){
alert("listo!")
}
});

Aquí puedes ver el ejemplo del plugin funcionando. (Google Chrome, Safari o Firefox 4 Beta)

Bueno espero que les guste,

Salu2 a todos


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 88 | 6:50 PM
Busquedas de palabras en textos con expresiones regulares

Este es un ejemplo de como realizar búsquedas de palabras dentro de cajas de texto haciendo uso de Expresiones Regulares de Actionscript 3.

Lo primero que haremos es crear un patrón con los caracteres de texto que queremos seleccionar. En este caso le indicaremos la palabra desde un TextInput

Quote
var patron:RegExp = new RegExp(input.text);

Este patrón nos encontrará la primera cadena de texto que coincida con los caracteres introducidos en el campo de texto. Si al patrón le añadimos el indicador g (global) hará que nos encuentre no solo la primera coincidencia sino todas las que haya en el texto. También le añadiremos el indicador i (ignoreCase) para que no haga distinción entre mayúsculas y minúsculas.

Quote
var patron:RegExp = new RegExp(input.text,"gi");

Ahora tendremos que solucionar el detalle de que nos encuentre palabras y no caracteres dentro de otras palabras. Es decir, si buscamos la palabra "mi" no queremos que nos la seleccione dentro de "camino". Para ello utilizaremos grupos de búsqueda. Indicaremos que solo nos interesa cuando despues de la coincidencia haya un espacio, un punto o una coma. Y por el otro lado indicaremos que haya un espacio o que sea inicio de párrafo.

Quote
var patron:RegExp = new RegExp("(^| )" + input.text + "[\ .,]","gi");

Utilizando este patrón dentro del método match() de la clase String podremos recuperar todas la concordancias que haya en el texto.

Quote
var patron:RegExp = new RegExp("(^| )" + input.text + "[\ .,]","gi");
var busqueda:Array = texto.text.match(patron);
output.text = "Total: " + busqueda.length;

Ahora haremos que las palabras encontradas queden resaltadas en negrita, color rojo y subrayado. Para ello empezaremos escribiendo un estilo CSS, y asignándolo al campo de texto.

Quote
var estilo:StyleSheet = new StyleSheet();
estilo.parseCSS(".select{fontWeight:bold; color: #FF0000; text-decoration: underline;}");
texto.styleSheet = estilo;

Con el método replace() de la clase String sustituiremos el contenido del patrón por un String que nos añadirá el tag que asignará el estilo CSS a la palabra. Como en el patrón hemos indicado que nos seleccione la palabra junto a los espacios en blanco o los puntos y comas, deberemos utilizar otro patrón que solo seleccione los caracteres de texto introducidos en el TextInput. Este segundo patrón lo colocaremos dentro de una función recursiva.

Quote
texto.htmlText = texto.text.replace(patron,setSpan);
function setSpan(txt:String, ...rest):String
{
var patron:RegExp = new RegExp(input.text,"i");
var tag:String = txt.replace(patron,"<span class='select'>$&</span>");
return tag;
}

Ý listo, ya tenemos el ejemplo montado (hay colocar una palabra en el TextInput y darle al botón):

Este es el código completo:

Quote
var estilo:StyleSheet = new StyleSheet();
estilo.parseCSS(".select{fontWeight:bold; color: #FF0000; text-decoration: underline;}");
texto.styleSheet = estilo;
boton.addEventListener(MouseEvent.CLICK, buscaPalabra);
function buscaPalabra(e:MouseEvent=null):void
{
var patron:RegExp = new RegExp("(^| )" + input.text + "[\ .,]","gi");
var busqueda:Array = texto.text.match(patron);
output.text = "Total: " + busqueda.length;
texto.htmlText = texto.text.replace(patron,setSpan);
}
function setSpan(txt:String, ...rest):String
{
var patron:RegExp = new RegExp(input.text,"i");
var tag:String = txt.replace(patron,"<span class='select'>$&</span>");
return tag;
}
buscaPalabra();

Y aquí el archivo .FLA para descargar. (archivo CS4)


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 89 | 2:30 PM
Bordes redondeados en CSS 3 con border-radius

Siempre me a impresionado ver en otras paginas el estilo de bordes redondeados o Border Radius con CSS lo que le daba a la web un muy buen estilo. Encontré una pagina muy buena y fácil llamada Border Radius y a continuación les muestro una explicación de como usarla:

Entrar a Border-Radius.com

Entramos al sitio Border Radius y nos encontramos con esto:

Funciones y capacidades de Border-Radius.com

En la parte de Abajo se encuentran Marcados WebKit, Gecko, CSS3. Estos son motores de render de los navegadores.

Webkit: es un motor renderizado. Funciona como base para Safari y Google Chrome. En el CSS se representa:

Quote
-webkit-border-radius
-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-right-radius
-webkit-border-b ottom-left-radius[/css]

Gecko: Es el motor de render usado por Firefox y en CSS se representa con:

Quote
[css]-moz-border-radius
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft

CSS3 o W3C: esta es la forma correcta, que aun no la implementan muchos. Cada navegador (menos Opera y Explorer) tienen su propia implementación, pero esta es la forma estándar:

Quote
border-radius
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

Hay otro que aunque no viene en la pagina se los voy a explicar:

Khtm : este fue creado para el navegador Konqueror que ya después fue adaptado por Apple para su navegador Safari y en el CSS se representa:

Quote
-khtml-border-radius
-khtml-border-top-left-radius
-khtml-border-top-right-radius
-khtml-border-bottom-right-radius
-khtml-border-bottom -left-radius

Elegir redondez de las esquinas de tu caja en border-radius

En esas esquinas marcadas en la aparte anterior es donde debes ingresar el numero en pixeles de el grado de redondez deseada lo cual nos dará:

Eso es todo este tutorial. Es el primero que hago para esta comunidad y espero que les sirva de algo que es el objetivo

El sistema está en: Border Radius


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 90 | 12:41 PM
CSS: Aplicar múltiples bordes a un mismo elemento

Es posible que en algún momento te hayas encontrado con la necesidad de aplicar múltiples bordes a un mismo elemento. Una de los métodos con los que puedes lograr ésto es utilizando CSS.

El truco que describiremos a continuación te permitirá generar este efecto, incluso sin utilizar ninguna imagen, explotando el poder de los seudo elementos :before y :after.

El elemento que portará los múltiples bordes, en primer lugar debe contar con su propio borde y position:relative.

Quote
#borders {
position: relative;
border: 5px solid #f00;
}

Ahora podemos proceder a añadirle un segundo borde, para el cual utilizaremos la seudo clase :before. Se debe configurar con position: absolute y generando un recuadro, para lo que asignaremos valores a todos los lados (usando top, left, bottom y right). Esto a su vez tendrá un borde y se mantendrá entre el content (preservando, por ejemplo, la posibilidad de seleccionar el texto y de cliquear los enlaces) al darle un valor negativo a z-index.

Quote
#borders {
position: relative;
border: 5px solid #f00;
}

#borders:before {
content: " ";
position: absolute;
z-index: -1;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border: 5px solid #ffea00;
}

¿Colocamos un tercer borde? Puedes hacerlo utilizando el seudo elemento :after.

Quote
#borders {
position: relative;
border: 5px solid #f00;
}

#borders:before {
content: " ";
position: absolute;
z-index: -1;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border: 5px solid #ffea00;
}

#borders:after {
content:"";
position:absolute;
z-index:-1;
top:15px;
left:15px;
right:15px;
bottom:15px;
border: 5px solid #00b4ff;
}

Para terminar, y a modo de nota extra, tengan en cuenta que Firefox 3 no soporta correctamente :after ni :before, ya que no le permite estar posicionado en forma absoluta (es decir, utilizando position:absolute). Esto fue corregido en posteriores versiones del navegador.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
Foro uCoz » Ayuda a los webmasters » Soluciones personalizadas » Qué se puede hacer con CSS (algunos trucos y otras cositas útiles)
Página 6 de 13«12456781213»
Búscar: