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º 91 | 1:13 PM
Time Traveler – CSS

Aquí puedes ver lo que haremos en este tutorial

PASO 1
Creamos una nueva carpeta llamada time traveler cell phone y dentro de ella creamos una carpeta llamada imágenes, dentro de la cual vamos a colocar las imágenes que nos servirán en este tutorial.

PASO 2
Abrimos Adobe Dreamweaver y creamos un nuevo documento HTML en blanco.

PASO 3
Debajo de la etiqueta copiamos el siguiente código html4strict.

Quote
<link rel="stylesheet" href="css/estilo.css">

PASO 4
Con el comando Ctrl + S guardamos nuestro documento dentro de la carpeta traveler cell phone con el nombre time_traveler_cell_phone.html

PASO 5
Ahora vamos al menú File – New y creamos un nuevo documento CSS.

PASO 6
Dentro del documento copiamos el siguiente código CSS.

Quote
body {
margin: 0; padding: 0;
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
line-height: 1.8em;
background: #1d1d1d url(bg.jpg) repeat;
}
h1 {
font-family:Georgia, "Times New Roman", Times, serif;
text-align: center;
font-weight: normal;
font-size: 4em;
line-height: 1.2em;
margin: 0; padding: 20px 0;
}
h1 small {
display: block;
font-size: 0.5em;
color: #999;
}
img {border: none;}

ul.columns {
width: 960px;
list-style: none;
margin: 0 auto; padding: 0;
}
ul.columns li {
width: 220px;
float: left; display: inline;
margin: 10px; padding: 0;
position: relative;
}
ul.columns li:hover {z-index: 99;}

ul.columns li img {
position: relative;
filter: alpha(opacity=30);
opacity: 0.3;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
}
ul.columns li:hover img{
z-index: 999;
filter: alpha(opacity=100);
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

ul.columns li .info {
position: absolute;
left: -10px; top: -10px;
padding: 210px 10px 20px;
width: 220px;
display: none;
background: #fff;
font-size: 1.2em;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
ul.columns li:hover .info {display: block;}

ul.columns li h2 {
font-size: 1.2em;
font-weight: normal;
text-transform: uppercase;
margin: 0; padding: 10px 0;
}
ul.columns li p {padding: 0; margin: 0; font-size: 0.9em;}

PASO 7
Con el comando Ctrl + S guardamos nuestro archivo dentro de la carpeta llamada css con el nombre de estilo.css



PASO 8
Dentro de las etiquetas copiamos el siguiente código html4strict

Quote
<h1><a href="http://www.tutorialesenlaweb.com" style="color: rgb(255, 255, 255); text-decoration: none;">Efecto con Hover en CSS</a> <small>Tutoriales en la web</small></h1>

<ul class="columns">
<li>
<a href="http://www.tutorialesenlaweb.com"><img src="imagenes/1.jpg" alt=""></a>
<div class="info">
<h2>Escena 1</h2>
<p>Vemos como la mujer entra por el lado izquierdo y trae la mano sobre la oreja. </p>
</div>
</li>
<li>
<a href="http://www.tutorialesenlaweb.com"><img src="imagenes/2.jpg" alt=""></a>
<div class="info">
<h2>Escena 2</h2>
<p>La mujer sigue caminando y la mano aun la lleva en el la oreja pareciera que tiene algo en la mano.. </p>
</div>
</li>
<li>
<a href="http://www.tutorialesenlaweb.com"><img src="imagenes/3.jpg" alt=""></a>
<div class="info">
<h2>Escena 3 </h2>
<p>Pasa por detrás del caballo y todavía lleva la mano en la oreja. </p>
</div>
</li>
<li>
<a href="http://www.designbombs.com/illustrations/hugs-for-monsters/"><img src="imagenes/4.jpg" alt=""></a>
<div class="info">
<h2>Escena 4</h2>
<p>Sigue caminando y pareciera que esta hablando por celular. </p>
</div>
</li>
<li>
<a href="http://www.tutorialesenlaweb.com"><img src="imagenes/5.jpg" alt=""></a>
<div class="info">
<h2>Escena 5</h2>
<p>En esta imagen se ve más claro. </p>
</div>
</li>
<li>
<a href="http://www.tutorialesenlaweb.com"><img src="imagenes/6.jpg" alt=""></a>
<div class="info">
<h2>Escena 6</h2>
<p>Realizamos un acercamiento y no hay duda que parece estar hablando por el aparato que lleva en la mano. </p>
</div>
</li>
<li>
<a href="http://www.tutorialesenlaweb.com"><img src="imagenes/7.jpg" alt=""></a>
<div class="info">
<h2>Escena 7</h2>
<p>Aquí la persona voltea momentáneamente y se ve claro que esta hablándole al aparato. </p>
</div>
</li>
<li>
<a href="http://www.tutorialesenlaweb.com"><img src="imagenes/8.jpg" alt=""></a>
<div class="info">
<h2>Escena 8</h2>
<p>Aquí parece que se estuviese riendo de lo que escucha por el aparato. </p>
</div>
</li>

</ul>

PASO 9
Ahora solo presionamos la tecla F12 para ver el resultado final.

Descarga el editable Time Traveler


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 92 | 5:42 PM
Efecto CSS – Chicharito

Este efecto en CSS es lo que aprenderemos a realizar en este post.

PASO 1
Creamos una carpeta llamada efecto de superposición, dentro de la cual creamos una nueva carpeta llamada imágenes, en la cual vamos a guardar las imágenes que vamos a utilizar en nuestro tutorial.

PASO 2
Ahora vamos a Adobe Dreamweaver y creamos un nuevo documento HTML.

PASO 3
Debajo de la etiqueta vamos a copiar el siguiente código html4strict

Quote
<link rel="stylesheet" type="text/css" href="css/estilo.css">
<script src="js/jquery.js"></script>

<script>

$(function() {
$("#apple img[rel]").overlay({effect: 'apple'});
});
</script>

PASO 4
Con el comando Ctrl + S guardamos nuestro documento html con el nombre de superposición.html

PASO 5
Ahora vamos al menú File – New y creamos un nuevo documento CSS.

PASO 6
Copiamos el siguiente código css dentro del documento

Quote
@charset "utf-8";
/* CSS Document */

div.apple_overlay.black {
background-image:url(../imagenes/fondonegro.png);
color:#fff;
}

div.apple_overlay h2 {
margin:10px 0 -9px 0;
font-weight:bold;
font-size:14px;
}

div.black h2 {
color:#fff;
}

#apple {
margin-top:10px;
text-align:center;
}

#apple img {
background-color:#fff;
padding:2px;
border:1px solid #ccc;
margin:2px 5px;
cursor:pointer;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}

.apple_overlay {

display:none;
background-image:url(../imagenes/fondoblanco.png);
width:640px;
padding:35px;
font-size:11px;
}

.apple_overlay .close {
background-image:url(../imagenes/cerrar.png);
position:absolute; right:5px; top:5px;
cursor:pointer;
height:35px;
width:35px;
}

PASO 7
Con el comando Ctrl + S guardamos nuestro documento dentro de la carpeta css con el nombre de estilo.css

PASO 8
Ahora regresamos a nuestro documento y dentro de las etiquetas copiamos el siguiente código html4strict

Quote
<div id="apple">
<img src="imagenes/chicharito1.jpg" rel="#photo1">
<img src="imagenes/chicharito2.jpg" rel="#photo2">
<img src="imagenes/chicharito3.jpg" rel="#photo3">
<img src="imagenes/chicharito4.jpg" rel="#photo4"></div>

<div class="apple_overlay black" id="photo1"><a class="close"></a>
<img src="imagenes/chicharitog1.jpg">

<div class="details">
<h2>Chicharito</h2>

<p>
Javier Chicharito Hernández.
</p>
</div>
</div>

<div class="apple_overlay" id="photo2"><a class="close"></a>
<img src="imagenes/chicharitog2.jpg">

<div class="details">
<h2>Chicharito</h2>

<p>
Javier Chicharito Hernández.
</p>
</div>
</div>

<div class="apple_overlay black" id="photo3"><a class="close"></a>
<img src="imagenes/chicharitog3.jpg">

<div class="details">
<h2>Chicharito</h2>

<p>
Javier Chicharito Hernández.
</p>
</div>
</div>

<div class="apple_overlay" id="photo4"><a class="close"></a>
<img src="imagenes/chicharitog4.jpg">

<div class="details">
<h2>Chicharito</h2>

<p>
Javier Chicharito Hernández.
</p>
</div>
</div>

</div>

PASO 9
Dentro de la carpeta efecto de superposición, creamos una carpeta nueva llamada js dentro de la cual vamos a copiar el archivo js que adjunto en este tutorial.

PASO 10
Listo ya tenemos nuestro efecto terminado.

Descarga el editable de Efecto Css – Chicharito


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 93 | 6:32 PM
CSS avanzado: la propiedad “content”

La razón fundamental para que muchos diseñadores de páginas web optaran por no utilizar algunas propiedades CSS avanzadas es que no eran soportadas por algunos navegadores, como por ejemplo las versiones 6 y 7 de Internet Explorer. Utilizar algunas de estas útiles propiedades, podría significar que buena parte del trabajo de diseño no fuera visible con estos navegadores, lo que implica que buena parte del público no pudiera ver los mismos resultados que cualquiera de los usuarios que utilizan navegadores que respetan los estándares de la W3C, como Opera, Safari y Mozilla Firefox.

Sin embargo, con la aparición de Internet Explorer 8 que soporta estas propiedades CSS, y suponiendo que buena parte del público que utiliza versiones anteriores de Internet Explorer terminará con el tiempo actualizando su navegador, es de esperarse que los diseñadores tengan la posibilidad de utilizar este tipo de recursos con total libertad.

La propiedad “content”
Esta propiedad tiene la capacidad de generar contenido en forma dinámica, y solo puede ser aplicada a los pseudo-elementos :before y :after y suele utilizarse en combinación con las propiedades “counter-reset” y “counter-increment”, como veremos más adelante.
Los valores que se utilizan son tan variados como posibilidades de elementos a introducir existen: cadenas de texto, URL’s, apertura y cierre de comillas, contadores, etc. Su valor inicial es “normal”, que en la práctica (si bien desde el punto de vista lógico tienen un valor diferente) cumple la misma función que el valor “none”, ya que ambos evitan que el pseudo-elemento que se aplica no se genere. Dado que el valor generado forma parte del elemento, hereda todas las propiedades CSS.

Otros valores que pueden utilizarse, son open-quote, close-quote, no-open-quote y no-close-quote, que siempre deben estar acompañados de la propiedad “quotes” en cuyo valor se debe introducir el tipo de comillas que se utilizará. El valor más avanzado que puede utilizarse, es el que permite mostrar el valor de una propiedad utilizada en el elemento sobre el que se utiliza esta propiedad, mediante la utilización del valor “attr()”.

Debemos señalar que el empleo de esta propiedad es controvertida por parte de muchos desarrolladores, ya que éstos consideran que la generación de contenidos dinámicos no forma parte de las atribuciones de CSS, cuyo cometido es controlar el aspecto y la presentación de los contenidos. Sin embargo, el hecho de que forme parte del estándar, significa que puede utilizársele libremente y que genera un código válido como cualquier otra propiedad CSS.

Sintaxis y ejemplo
Si bien la sintaxis es similar a la que se utiliza en el resto de las propiedades CSS, algunas de las características propias de esta propiedad hacen que pueda tornarse un poco más compleja. Dado que se aplica solo a los pseudo-elementos “:before” y “:after”, se debe tener especial cuidado de colocarlos junto a la etiqueta correspondiente. Téngase en cuenta que en el caso de que se quiera introducir una cadena de texto como valor, el texto debe ser colocado entre comillas dobles. Veamos un ejemplo:

Quote
p:before {
content: "Hola a todos: "
}

En el ejemplo, se ha introducido como valor una cadena de texto, que aparecerá antes de cualquier texto que se introduzca en los párrafos de la página. Si se quiere evitar que este texto aparezca solo en algunos párrafos, bastará con marcar con un identificador o una clase al o a los párrafos que se desee, como puede verse en el ejemplo siguiente:

Quote
p.hola:before {
content: "Hola a casi todos: "
}

Quote
<p class="hola">Estamos bien</p>

En el ejemplo que damos, todos los párrafos marcados con la clase “hola” se iniciarán con la cadena de texto que se incluye. Las complicaciones pueden comenzar cuando se necesite utilizar algunos símbolos propios de la sintaxis CSS en el texto a incluir, como pueden ser las comillas o cualquier otro símbolo utilizado en la sintaxis, lo que producirá un conflicto con las comillas que deben incluirse en la cadena de texto para que los navegadores la identifiquen como tales, en cuyo caso se deberá optar por insertar comillas simples () o colocar una barra invertida (\) delante de cada una de las comillas:

Quote
p.simple:before {
content: "Contenido 'CSS' "
}

p.barra:before {
content: "Contenido \"CSS\" "
}

Las cadenas de texto utilizadas como valor de esta propiedad, solo se toman como texto plano, por lo que en caso de utilizarse etiquetas HTML, éstas se mostrarán como parte del texto y no generarán ningún otro efecto.

Como se dijo anteriormente, también puede utilizarse para abrir y cerrar comillas utilizando los valores “open-quote” y “close-quote”, y deben estar acompañados de la propiedad “quotes” que llevará como valores las comillas que se utilizarán para la apertura y cierre. En caso de que las comillas que se utilicen sean del mismo tipo () que las que se emplean para encerrar el valor, se deben utilizar el símbolo (\) de escape para que no se genere conflicto.

Quote
blockquote {
quotes: "\" " " \"";
}

blockquote:before {
content: open-quote;
}

blockquote:after {
content: close-quote;
}

Quote
<blockquote>Nota especial</blockquote>

También pueden utilizarse los valores “no-open-quote” y “no-close-quote”, que sirven para evitar que aparezcan las comillas de apertura y cierre, pero manteniendo la jerarquía en el anidamiento de las comillas.

El valor “attr()” introduce antes o después (según se utilice “:after” o “:before”) el valor del atributo que se coloque entre los paréntesis. Estos atributos son, por ejemplo, “title”, “href”, etc. En caso de que este atributo no se encuentre presente en el elemento, se generará una cadena de texto vacía. Veamos un ejemplo de la utilización llamando al atributo “title”:

Quote
p:before {
content: " (" attr(title) ")"
}

a:after {
content: " (" attr(href) ")";
}

Quote
<p title="titulo">Título</p>
<a href="http://www.ucoz.es">Esta es nuestra URL:</a>

En el ejemplo que vemos anteriormente, como se han colocado paréntesis para que sean introducidos como parte de la cadena de texto, en caso de que algún párrafo no tenga el atributo “title” determinado, aparecerán los paréntesis solos, ya que el atributo “title” genera una cadena de texto vacía.

Otra forma de utilizar el valor “attr()”, es para el atributo “href”, con lo que podremos colocar la URL especificada en un elemento como un texto, como también podemos ver en el código de ejemplo anterior.

Utilización con otras propiedades
Una de las utilizaciones más interesantes de esta propiedad, es la que se realiza en conjunto con las propiedades “counter-reset” y “counter-increment”, que se utilizan para generar contadores para diversas utilidades.

Dado que es necesario conocer en profundidad ambas propiedades, la utilización de la propiedad “content” en la elaboración de contadores dinámicos se describirá en el artículo correspondiente a estas dos propiedades.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 94 | 3:47 PM
CSS avanzado: las propiedades counter-reset y counter-increment

La propiedad “counter-reset” que fue introducida en el estándar CSS 2.1, si bien puede decirse que tiene un principio de funcionamiento sencillo, dado que se trata de una herramienta de gran flexibilidad y que puede utilizarse en combinación con varias propiedades CSS, su funcionamiento puede resultar un poco complejo y es esta la razón por la cual hemos considerado que se debía incluir bajo el título de “CSS avanzado”.

En forma sencilla, podría decirse que indica el nombre de uno o varios contadores y el valor en el que se inicia cada uno de ellos. Se le utiliza siempre en combinación con la propiedad “counter-increment”, que es la propiedad que controla el incremento que se producirá en el contador.

Ambas propiedades son aplicables a todo tipo de elementos que pueden introducirse en un documento HTML.

Sintaxis
En primer lugar, trataremos la sintaxis de cada una de las propiedades por separado, para luego ver algunos ejemplos de cómo utilizar ambas propiedades en conjunto. El tipo de sintaxis es similar en ambas propiedades; luego de la apertura de la llave, se introduce el o los nombres de los contadores cuyas propiedades se vayan a determinar, seguido de un número indicador del valor de inicio del contador o del incremento (siempre en números enteros), según sea la propiedad utilizada.

Quote
body {
counter-reset: ejemplo 0;
}

p:before {
content: counter(ejemplo);
counter-increment: ejemplo 1;
}

El nombre es obligatorio, mientras que en caso de que el número no exista, los navegadores toman el valor base. Este valor, en la propiedad “counter-reset” es cero, mientras que en la propiedad “counter-increment” es uno.

Pero sin lugar a dudas, la mejor forma de conocer las características de estas propiedades, es conocer el funcionamiento, así que a continuación veremos algunos ejemplos de su utilización, donde describiremos las diferentes formas de aplicarlas.

Ejemplos

Quote
body {
counter-reset: ejemplo 0;
}

p:before {
content: "Párrafo " counter(ejemplo) ": ";
counter-increment: ejemplo 1;
}

Quote
<p>Párrafo de ejemplo.</p>
<p>Segundo párrafo de ejemplo.</p>

En el ejemplo que hemos visto, en primer lugar hemos creado el contador en el propio elemento “body”, lo que quiere decir que cuando el navegador se encuentra con dicha etiqueta inicia el contador de nombre “ejemplo” y se inicia en 0 (lo que equivale a decir que cuando aparezca un elemento marcado con una propiedad de contador que utilice “ejemplo”, tendrá el valor 1); luego, el contador “ejemplo” podrá utilizarse en cualquier elemento contenido dentro de las etiquetas “body”.

A continuación nos encontramos con que a los elementos <p> se les agrega el pseudo-elemento “:before” y que se le agrega contenido dinámico con la propiedad “content”. Este contenido dinámico está formado por la palabra “Párrafo “ (como se ve, la palabra es seguida de un espacio en blanco para que el mismo aparezca en el texto concatenado), el número generado por el contador y otro texto concatenado, que en este caso es el signo de puntuación seguido de un espacio en blanco. El resultado es:

Quote
Párrafo 1: Párrafo de ejemplo.
Párrafo 2: Segundo párrafo de ejemplo.

Ahora veremos la utilización de más de un contador para un mismo elemento:

Quote
body {
counter-reset: ejemplo 0 elemento 0;
}

p:before {
content: "Elemento " counter(elemento) ", " "Párrafo " counter(ejemplo) ": ";
counter-increment: ejemplo 1 elemento 1;
}

Como podemos ver, se pueden crear varios contadores para un mismo elemento y utilizarlos a la vez. El resultado del ejemplo anterior es el siguiente:

Elemento 1, Párrafo 1: Párrafo de ejemplo.
Elemento 2, Párrafo 2: Segundo párrafo de ejemplo.

Esta propiedad tiene en cuenta el anidamiento de los diferentes elementos, como podremos ver en el siguiente ejemplo, en el cual anidamos listas ordenadas. Para una visualización de los ejemplos que daremos en adelante, es necesario que recreen los ejemplos brindados en páginas HTML de ejemplo y las visualicen en su navegador:

Quote
ol {
counter-reset: lista;
list-style: none;
}

ol li:before {
content: "Número " counter(lista) " ";
counter-increment: lista 1;
}

<ol>
<li>Elemento</li>
<li>Elemento</li>
<li>Elemento
<ol>
<li>Elemento</li>
<li>Elemento
<ol>
<li>Elemento</li>
<li>Elemento</li>
<li>Elemento</li>
</ol>
</li>
<li>Elemento</li>
</ol>
</li>
<li>Elemento</li>
</ol>

En las listas (que pueden ser ordenadas o no ordenadas si se va a eliminar el estilo de las mismas) se ha colocado un texto generado en forma dinámica con un contador, que se reinicia en cada elemento anidado, ya que se considera un elemento diferente del padre. Aprovechando esta característica, se pueden realizar algunas modificaciones para mostrar las listas en forma diferente, como en el ejemplo siguiente:

Quote
ol.lista {
counter-reset: otra;
list-style: none;
}

ol.lista li:before {
content: "Número " counters(otra, '.') " ";
counter-increment: otra 1;
}

<ol class="lista">
<li>Elemento</li>
<li>Elemento</li>
<li>Elemento
<ol class="lista">
<li>Elemento</li>
<li>Elemento
<ol class="lista">
<li>Elemento</li>
<li>Elemento</li>
<li>Elemento</li>
</ol>
</li>
<li>Elemento</li>
</ol>
</li>
<li>Elemento</li>
</ol>

En este ejemplo, vemos que en lugar de utilizar la función “counter()”, hemos utilizado la función “counters()”, que tiene la capacidad de iniciar más de un contador concatenado siguiendo la anidación de los elementos.

Otras características
Las propias características de los contadores, que generan una secuencia de números, hace que cuando se encuentran bajo la influencia de ciertas propiedades, sus características puedan variar. Si se utiliza la propiedad “display” con el valor “none”, el elemento afectado no iniciará el contador (en caso de que se trate del elemento inicial) o no formará parte de los elementos contados. Es decir que, el elemento posterior tendrá el número que en caso de no estar afectado por “display: none;” le correspondería a éste.

Quote
<ol class="lista">
<li>Elemento</li>
<li style="visibility: hidden;">Elemento</li>
<li>Elemento
<ol class="lista">
<li>Elemento</li>
<li>Elemento
<ol class="lista">
<li style="display: none;">Elemento</li>
<li>Elemento</li>
<li>Elemento</li>
</ol>
</li>
<li>Elemento</li>
</ol>
</li>
<li>Elemento</li>
</ol>

Sin embargo, si un elemento que está siendo contado está afectado por la propiedad “visibility” con el valor “hidden”, el elemento seguirá siendo contado, por lo que el elemento siguiente tendrá el valor que le corresponde, ya que el elementos “invisible” no se ve, pero se encuentra formando parte del documento.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 95 | 2:11 PM
CSS3: Crear efecto de sombra en imágenes

A través de CSS3 podemos dar a nuestras imágenes un práctico efecto de sombra proyectada, ideal para destacar el logotipo de tu sitio web. Realizar este sencillo truco sólo nos llevará unas pocas líneas de ćodigo.

Para comenzar necesitaremos, obviamente, la imagen a la que colocaremos el efecto. A esa imagen la contendremos dentro de un div, así:

Quote
<body>
<div class="box">
<img src="logo.jpg" alt="logo" />
</div>
</body>

Lo siguiente será definir el estilo del body. Para ello, incluiremos algo de CSS dentro del head:

Quote
<head>
<style>
body {
width: 500px;
margin: 50px auto;
}
</style>
</head>
<body>
<div class="box">
<img src="logo.jpg" alt="logo" />
</div>
</body>

Ahora que hemos definido el ancho y los márgenes del body, comenzaremos a darle estilo al div que contiene nuestra imagen:

Quote
<head>
<style>
body {
width: 500px;
margin: 50px auto;
}
.box {
-webkit-box-shadow: 1px 2px 4px rgba(0,0,0,5);
padding: 10px;
background: white;
position:relative;
}
.box img {
max-width: 100%;
}
</style>
</head>

Con box-shadow creamos el efecto de sombra, al que luego definimos sus variables: Los dos primeros números servirán para definir el tamaño y la posición de la sombra, el tercer número definirá la cantidad de blur que tendrá la sombra, y finalmente debemos indicar el color que utilizaremos para la sombra. Con el resto del código utilizado, hemos creado un recuadro blanco alrededor de la imagen, que utilizaremos luego para trabajar mejor con las sombras. Sólo queda crearlas:

Quote
<head>
<style>
body {
width: 500px;
margin: 50px auto;
}
.box {
-webkit-box-shadow: 1px 2px 4px rgba(0,0,0,5);
padding: 10px;
background: white;
position:relative;
}
.box img {
max-width: 100%;
}
.box:after {
content: '';
-webkit-box-shadow: 100px 0 10px 20px rgba(0,0,0,.2);
position: absolute;
width: 50%;
z-index: -1;
}
</style>
</head>

A través del comando after, creamos un elemento de sombra que podremos manipular y redimensionar a nuestro gusto. Con z-index lo situamos en la parte trasera. Ya comienza a tomar forma, y sólo quedan algunos retoques para crear el efecto deseado:

Quote
<head>
<style>
body {
width: 500px;
margin: 50px auto;
}
.box {
position: relative;
-webkit-box-shadow: 1px 2px 4px rgba(0,0,0,.5);
padding: 10px;
background: white;
}
.box img {
max-width: 100%;
border: 1px inset #8a4419;
}
.box:after {
content: '';
-webkit-box-shadow: 100px 0 10px 20px rgba(0,0,0,.2);
position: absolute;
width: 50%;
height: 40px;
bottom: 20px;
right: 90px;
z-index: -1;
-webkit-transform: skew(-40deg);
}
</style>
</head>

Como podrás ver, utilizando el comando transform, podemos dar un efecto a la sombra para que tome la forma correcta, detallando el ángulo deseado. Ahora sólo queda agregar algunas lineas más para asegurar la compatibilidad con todos los navegadores posibles, y habremos terminado:

Quote
<head>
<style>
body {
width: 500px;
margin: 50px auto;
}

.box {
position: relative;
-webkit-box-shadow: 1px 2px 4px rgba(0,0,0,.5);
-moz-box-shadow: 1px 2px 4px rgba(0,0,0,.5);
box-shadow: 1px 2px 4px rgba(0,0,0,.5);
padding: 10px;
background: white;
}

.box img {
max-width: 100%;
border: 1px inset #8a4419;
}

.box:after {
content: '';
-webkit-box-shadow: 100px 0 10px 20px rgba(0,0,0,.2);
-moz-box-shadow: 100px 0 10px 20px rgba(0,0,0,.2);
box-shadow: 100px 0 10px 20px rgba(0,0,0,.2);
position: absolute;
width: 50%;
height: 40px;
bottom: 20px;
right: 90px;
z-index: -1;
-webkit-transform: skew(-40deg);
-moz-transform: skew(-40deg);
transform: skew(-40deg);

}
</style>

</head>

<body>

<div class="box">
<img src="logo.jpg" alt="logo" />
</div>

</body>

Haz clic en este enlace para ver un ejemplo del resultado final>>


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 96 | 12:43 PM
Ejemplo de utilización de propiedades CSS avanzadas

Ya hemos visto una descripción de las propiedades “content”, “counter-reset” y “counter-increment”, con algunos ejemplos elementales de la utilización de estas propiedades. Sin embargo, estos ejemplos básicos solo nos muestra una parte de las posibilidades de estas poderosas herramientas CSS. Es por ello que en el presente artículo mostraremos algunos ejemplos más avanzados de estas propiedades CSS.

Utilización de imágenes como contenido
Para incluir una imagen como contenido de la propiedad “content”, solo es necesario incluir una URL dirigida a una imagen para que ella se incluya antes o después del contenido de la etiqueta HTML. En el ejemplo que hemos seleccionado, incluiremos una imagen en el inicio de los párrafos. Los códigos empleados para este ejemplo son los siguientes:

Quote
<p class="img">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In purus nibh, elementum quis mollis ac, dapibus sit amet turpis. Phasellus mauris ligula, suscipit quis lacinia iaculis, consequat at ipsum. Maecenas aliquet dapibus felis eget faucibus. Pellentesque eget eros tristique nunc tristique aliquet.</p>
<p class="img">Donec fringilla elit dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean euismod euismod elit eu semper. Aliquam erat volutpat. Maecenas sed libero sed nulla mattis placerat quis ut tortor. Nam fringilla nulla volutpat felis molestie accumsan. Nulla lacinia iaculis varius.</p>

Quote
p.img:before {
content: url(imagenes/boton1.jpg) " ";
}

Como puede verse, la propiedad “content” tiene como valor una URL que está dirigida a una imagen. Luego de la URL, se ha establecido un espacio en blanco (entre comillas), para que la imagen aparezca separada del contenido de la etiqueta <p>. Tengan en cuenta que, para diferenciar aquellos párrafos que se mostrarán con la propiedad “content” de los demás párrafos, es conveniente utilizar una clase.

El resultado es el siguiente:

División de textos en capítulos
Una de las utilizaciones más corrientes de las propiedades “counter-reset” y “counter-increment”, es la división de textos en capítulos, secciones, etc., como mostraremos en el ejemplo que continúa:

Quote
body {
counter-reset: capitulo 0;
}

h2 {
font: normal 16px tahoma, verdana, sans-serif;
color: #f60;
}

h2:before {
content: "Capítulo " counter(capitulo) " - ";
counter-increment: capitulo 1;
color: #06f;
}

Quote
<h2>Título de sección</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In purus nibh, elementum quis mollis ac, dapibus sit amet turpis. Phasellus mauris ligula, suscipit quis lacinia iaculis, consequat at ipsum. Maecenas aliquet dapibus felis eget faucibus. Pellentesque eget eros tristique nunc tristique aliquet. Donec ac dui lorem, vel posuere turpis.</p>
<h2>Segundo título de sección</h2>
<p>Donec fringilla elit dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean euismod euismod elit eu semper. Aliquam erat volutpat. Maecenas sed libero sed nulla mattis placerat quis ut tortor. Nam fringilla nulla volutpat felis molestie accumsan. Nulla lacinia iaculis varius. Etiam mollis metus vel velit molestie quis convallis nisl vehicula.</p>

En el ejemplo, vemos como ante cada título <h2> se antepone un contenido que comienza con la palabra Capítulo, seguida de un espacio en blanco, para finalizar con un número, que se presentará en forma incremental en cada uno de los títulos. Para una mejor visualización del ejemplo, hemos dado un color diferente a los elementos incluidos en la propiedad “content”, de forma tal que se diferencie del resto del texto de la etiqueta HTML, aunque esto no es absolutamente necesario.

Creación de un índice de tres niveles
Una de las formas más avanzadas de la utilización de estas propiedades, es la creación de numeraciones con varios niveles. Para llevar adelante este tipo de numeraciones, es necesario que se utilice la función “counters” en lugar de la función “counter” en la propiedad “content”.

La función “counters” puede incluir más de un elemento, como puede verse en el código del ejemplo, en el que luego del nombre del contador que se utilizará, aparece encerrado en comillas simples un punto, el que se utilizará como separador de los diferentes números de los contadores. El código de ejemplo es el siguiente:

Quote
<ol class="lista">
<li>Elemento de índice</li>
<li>Elemento de índice</li>
<li>Elemento de índice</li>
<ol class="lista">
<li>Elemento de índice</li>
<li>Elemento de índice</li>
<ol class="lista">
<li>Elemento de índice</li>
<li>Elemento de índice</li>
<li>Elemento de índice</li>
</ol>
</li>
<li>Elemento de índice</li>
</ol>
</li>
<li>Elemento de índice</li>
</ol>

Quote
ol.lista {
counter-reset: lista 0;
list-style: none;
clear: both;
padding: 10px 30px;
}

ol.lista li {
padding: 2px 10px;
width: 200px;
font: normal 12px tahoma, verdana, sans-serif;
color: black;
}

ol.lista ol.lista li {
color: blue;
}

ol.lista ol.lista ol.lista li {
color: red;
}

ol.lista li:before {
content: "Capítulo " counters(lista, '.') " - ";
counter-increment: lista 1;
}

Para el ejemplo se han utilizado listas, pero pueden utilizarse otras etiquetas que puedan anidarse, como es el caso de los <div>, dentro de los cuales se deben utilizar párrafos para que lleven la numeración generada por los contadores.

El ejemplo que vemos en el código, se verá de la siguiente forma:

Creación de listas con numeración corrida
El ejemplo que sigue a continuación muestra como se pueden utilizar listas ordenadas para generar tres listas flotantes que tengan numeración corrida, es decir, que el primer elemento de la segunda lista tendrá el número siguiente al último elemento de la primera lista.

Quote
<ol class="flotante1">
<li>Elemento</li>
<li>Elemento</li>
<li>Elemento</li>
<li>Elemento</li>
<li>Elemento</li>
</ol>
<ol class="flotante2">
<li>Elemento</li>
<li>Elemento</li>
<li>Elemento</li>
<li>Elemento</li>
</ol>
<ol class="flotante3">
<li>Elemento</li>
<li>Elemento</li>
<li>Elemento</li>
<li>Elemento</li>
<li>Elemento</li>
</ol>

Quote
.flotante1, .flotante2, .flotante3 {
float: left;
width: 29%;
padding: 1%;
border: solid 1px #aaa;
margin-left: 1%;
list-style: none;
}

.flotante1 li, .flotante2 li, .flotante3 li {
background: #eee;
border: solid 1px #fff;
padding: 1px 10px;
}

ol.flotante1 {
counter-reset: uno 0;
}

ol.flotante1 li:after {
content: " " counter(uno);
counter-increment: uno 1;
}

ol.flotante2 li:after {
content: " " counter(uno);
counter-increment: uno 1;
}

ol.flotante3 li:after {
content: " " counter(uno);
counter-increment: uno 1;
}

En el código vemos que se ha creado una clase diferente para cada una de las listas ordenadas, de forma tal de poder establecer la numeración de inicio de cada uno de los contadores. El ejemplo que vemos en este caso, se verá de esta forma:

Conclusión
Por supuesto que estos son solo algunos ejemplos de las muchas posibilidades que ofrece la utilización de estas propiedades. En definitiva, además de la aplicación de los ejemplos concretos que se puedan encontrar, siempre la imaginación propia es la mejor forma de encontrar todas las utilidades posibles para cualquier tipo de propiedad CSS, a lo que debemos agregar mucha práctica.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 97 | 5:28 PM
Cambiar el estilo CSS de una web dinámicamente

Parte I – JavaScript

En numerosas ocasiones, varios desarrolladores y/o diseñadores web se han topado con la necesidad de llevar a cabo una adaptación dinámica de estilos en espacios de un sitio Web. Es común encontrar clientes y patrocinadores que deseen mostrar un conjunto estandarizado de información arraigado por distintos estilos, con el objetivo de adaptarse al medio o al momento.

Dichos estilos, generados en base a los patrones de diseño de nuestra elección, se plasmarán en el sitio en algún momento, que será determinado por alguna condición y/o variable establecida previamente, y con ello lograr obtener el dinamismo necesario para desplegar dicha información con distintos patrones de estilo.

Este dinamismo es especialmente útil para aquellos proyectos donde es preciso plasmar varios mensajes en poco espacio, o donde se desea manejar un ambiente más ad hoc a la situación del visitante de nuestro sitio.

El uso de estilos mediante CSS nos permite crear toneladas de trucos ingeniosos y adaptaciones increíbles, especialmente con la incursión de CSS3 ha ido adentrándose en terrenos anteriormente desconocidos para las hojas de estilo, pero como lenguaje en muchas circunstancias su función sigue limitándose a lo estilístico.

Su manejo de dinamismo no ha sido bien adaptado, y es por ello que en esta clase de proyectos es aún recomendable respaldarnos y utilizar un lenguaje como JavaScript, o en su defecto un lenguaje del lado servidor como PHP, que nos permita llevar a cabo el uso de variables dinámicas y condicionamiento.

Cambiar estilos CSS dinámicamente con JavaScript
Mediante JavaScript
obtenemos la capacidad de crear funciones que nos regresen resultados basados en operaciones y cálculos, podemos obtener los atributos de los elementos, nos permite manejar clases predefinidas para tomar directamente datos y utilizarlos como condicionales, e incluso nos da la posibilidad de obtener información de APIs o Webservices, para que en base a los datos recibidos podamos cambiar el estilo de nuestro sitio, sin necesidad de usar bases de datos o hosting sofisticado.

Supongamos que hemos sido requeridos para desarrollar una página web o blog donde el color del fondo pueda ser elegido por el usuario. Al incorporar a JavaScript al juego del diseño, esta tarea será tan sencilla de codificar que en menos de lo que esperamos será totalmente funcional.

El primer paso es conocer la estructura que utiliza JavaScript para manejar el estilo CSS de todos aquellos elementos que cuentan con una id asignada, a los que llamaremos objetos. Un objeto tendrá varios atributos los cuales podemos llamar adhiriendo un punto al nombre del objeto, seguido del nombre del atributo que queremos obtener o modificar (objeto.atributo), por ejemplo si tenemos un elemento “div” cuyo “id” es “header”, al momento de escribir “header.style” estamos llamando al atributo “style” de dicho elemento.

También podemos mandar llamar con el nombre de la etiqueta del elemento, en el caso del ejemplo anterior, si escribimos “div.style” llamaremos a todos los elementos “div” que se encuentran en nuestro código, dentro de los cuales también se encuentra el “div header”.

Para modificar los atributos de estilo CSS existen dos formas básicas, la primera es recurrir al atributo “style” y la segunda modificar el atributo “class”. En lo personal me inclino más por utilizar la segunda opción pues es más fácil de manejar, controlar y estandarizar el estilo de esa manera.

Como nuestro objetivo es modificar el fondo de toda la página, entonces debemos adaptar la sintaxis para que modifique directamente el elemento “body”, para lo que podemos recurrir al elemento “document” de JavaScript.

Tomando en cuenta todos los factores, la estructura quedará conformada como alguna de las siguientes maneras, “document.body.style.backgroundColor” o “document.body.className=’nombre’”.

Ahora debemos determinar de que manera el usuario podrá elegir el color de fondo, puede ser mediante elementos de formulario como un “select box” donde elija una opción, un campo de texto donde inserte el nombre, o podemos recurrir a un elemento más visual y hacerlo mediante un menú que muestre los colores de fondo disponibles.

Si utilizamos el atributo “style” nuestro código debe quedar estructurado de la siguiente manera:

Quote
<html>
<header>
<style>
body {
background-color: #000000;
color: #FFFFFF;
padding: 20px;
font: 18px Arial, Tahoma;
}
div {
width: 50px;
height: 50px;
border: 1px solid #FFFFFF;
}
</style>
<script>
function cambiar_fondo_con_style(colorsel){
var color = document.getElementById(colorsel).style.backgroundColor;
document.body.style.backgroundColor= color;
}
</script>
</header>
<body>
<p>Da click en un recuadro para cambiar el fondo de la página</p>
<div id = "1" style = "background-color: #999;" onclick = "cambiar_fondo_con_style(id)"></div>
<div id = "2" style = "background-color: #333;" onclick = "cambiar_fondo_con_style(id)"></div>
<div id = "3" style = "background-color: #666;" onclick = "cambiar_fondo_con_style(id)"></div>
</body>
</html>

Agregamos los estilos necesarios para agregar color al cuerpo y letras de la página, así como para darle una medida estándar a los recuadros del menú donde elegiremos el color.

>>> Puedes ver el ejemplo funcionando aquí <<<
Creamos una función para el cambio dinámico de fondo, a la cual le enviaremos como parámetro el “id” de los recuadros. Dentro de esta función guardamos en una variable de nombre “color” el código que corresponde al color de ese recuadro y finalmente asignamos ese código al fondo del elemento body.

Dicha función será llamada mediante un evento “onclick” agregado en cada elemento “div”, para que al momento de dar click con el puntero del Mouse sobre algún recuadro, automáticamente tome el color de éste como fondo.

Pero si deseamos utilizar class en vez del atributo “style” lo que debemos hacer es estructurar nuestro código de la siguiente manera:

Quote
<html>
<header>
<style>
body {
background-color: #000000;
color: #FFFFFF;
padding: 20px;
font: 18px Arial, Tahoma;
}
div {
width: 50px;
height: 50px;
border: 1px solid #FFFFFF;
}
.fondo1 {
background-color: #999;
}
.fondo2 {
background-color: #333;
}
.fondo3 {
background-color: #666;
}
</style>
<script>
function cambiar_fondo_con_class(id){
document.body.className='fondo'+id;
}
</script>
</header>
<body>
<p>Da click en un recuadro para cambiar el fondo de la página</p>
<div id="1" class ="fondo1" onclick="cambiar_fondo_con_class(id)"></div>
<div id="2" class ="fondo2" onclick="cambiar_fondo_con_class(id)"></div>
<div id="3" class ="fondo3" onclick="cambiar_fondo_con_class(id)"></div>
</body>
</html>

>>> Puedes ver el ejemplo funcionando aquí <<<

De esta manera nos ahorramos utilizar el atributo dentro de cada elemento y la función de JavaScript queda mucho más limpia.


Parte II – las horas del día

El dinamismo adoptado en nuestro sitio, puede llevarse a un mayor grado de personalización y autenticidad con la adopción de rutinas de desarrollo más complejas, elaboradas especialmente para modificar el diseño de una página dinámicamente en base a factores que detonen los distintos estilos.
Podemos innovar y buscar formas únicas de mezclar nuestros CSS con funciones de JavaScript o algún lenguaje del lado servidor, para poder ofrecerle a nuestro usuario una experiencia distinta a la que ofrecen el resto de los sitios, creando ambientes más ad hoc a lo que al visitante le gusta.

Es muy poco común que se juegue con factores cruzados en CSS, muchas veces utilizamos funciones que van de JavaScript a PHP y viceversa, utilizamos JSON y XML para enviar y recibir datos, AJAX para respuestas instantáneas, pero en muy pocas ocasiones aprovechamos el dinamismo para aplicarlo a los estilos.

Podemos empezar a buscar implementar diseños basados en los resultados obtenidos por funciones de JavaScript, con ejemplos sencillos como mostrar un estilo en base a la parte del día en que nos visita el usuario.

El hecho de cambiar la apariencia de nuestro sitio web en base a la hora o período del día en que nos visitan, añade especialización en nuestros diseños, puede mejorar la experiencia del visitante y por su puesto divertir o entretener, dependiendo del tipo o sector de visitantes que tenemos comúnmente.
Existen dos maneras esenciales para realizar esta tarea, la primera y más sencilla de ellas es utilizar JavaScript, gracias a sus funciones podemos desplegar los estilos en base a la hora que tiene el usuario en su computadora, puesto que es un lenguaje del lado cliente, donde no hay necesidad de descargar ni instalar algo para desarrollar la aplicación.

La otra parte, es realizarlo mediante algún lenguaje de lado del servidor, como es el caso común de PHP, ASP.NET o JSP, que a diferencia de JavaScript nos desplegará el estilo en base a la hora del servidor donde se encuentre nuestra aplicación, es por ello que para poder utilizar esta opción tenemos que tener instalado y funcionado una infraestructura que actúe como servidor Web en una computadora.

Ambas maneras se pueden utilizar, todo depende de que enfoque queramos darle a lo que vamos a desarrollar, puesto que esencialmente hacen lo mismo y al final obtendremos un resultado bastante similar, pero también dependerá de que tan relacionados estemos con uno u otro lenguaje.

Una vez definido si vamos a cambiar estilos CSS dinámicamente desde el lado del cliente o del servidor, debemos empezar a pensar en el aspecto del diseño, lo fundamental es definir cuantos “layouts” queremos mostrar a los largo del día, dato necesario para establecer el intervalo de tiempo que durará cada estilo.

Se puede presentar la necesidad de mostrar únicamente dos estilos diferentes, uno para el día y otro para la noche, o se puede optar por tener estilos más concretos los cuales pueden irse rotando cada cierto número de horas, todo dependerá de la especificidad que queramos imprimir en la experiencia del usuario al navegar por el sitio.

Como base del ejercicio podemos desarrollar un estilo distinto para las tres etapas más relevantes del día, la mañana, tarde y la noche, los cuales cambiarán el aspecto del sitio cada ocho horas, calculo basado en las 24 horas que tiene el día, divididas entre las 3 etapas que lo conforman nos da como resultado 8 horas por cada estilo, aunque esto es en gran parte relativo y si agregamos otros estilos para etapas como el amanecer y el ocaso podemos asignar menos tiempo a estas, todo depende de perspectivas.

Fundamentándonos en el número establecido de estilos que deseamos, empezaremos a diseñar patrones y combinaciones de colores relacionados a cada etapa del día, tomando lo relevante de cada una de ellas y distinguiendo lo que observamos en el ambiente en las horas que conforman la etapa.

Debemos trabajar sobre una estructura base, la cual muestre de manera correcta los colores establecidos. Es recomendable, en un principio, desarrollar un template sencillo para ir identificando de que manera se acoplaran los colores y adaptarlos a nuestros gustos, para ello es aconsejable usar una estructura web que contenga los divs más comunes en un sitio, una cabecera, un menú, un contenedor, un div para contenido escrito, alguna barra lateral y un pie de página.

Partiendo de esto, nuestro código HTML luciría de la siguiente manera:

Quote
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id ="principal">
<div id="contenedor">
<div id="cabecera">
<h1 id="titulo">Estilos de Prueba</h1>
<div id="descripcion">CSS basado en las etapas del día.</div>
</div>
<div id="navegacion">

</div>
<div id="contenido">
<div>
<h3>Artículo de Prueba</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ipsum augue, dictum luctus blandit vestibulum, sagittis eu tortor. Pellentesque ut enim quis est semper pretium at rhoncus leo. Integer vitae nibh sed turpis varius porta a et ipsum.</p>
<p></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ipsum augue, dictum luctus blandit vestibulum, sagittis eu tortor. Pellentesque ut enim quis est semper pretium at rhoncus leo. Integer vitae nibh sed turpis varius porta a et ipsum. Curabitur venenatis odio vitae augue dapibus mattis at id leo. Ut enim enim, tincidunt sit amet congue non, molestie sed orci. Nunc adipiscing, est nec iaculis laoreet, lectus ipsum tincidunt elit, mattis facilisis urna quam vitae elit. Nullam eu elit a purus gravida mattis. Vivamus pharetra eleifend nunc nec malesuada. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Pellentesque consequat, lacus pretium dapibus eleifend, nulla ante vulputate augue, id elementum nunc odio ut ante. Morbi purus dolor, lobortis ut eleifend ut, fringilla vel quam. Proin quis arcu eu est tristique adipiscing. Mauris ligula mi, egestas sed commodo eget, vulputate quis justo. Curabitur dictum porta risus in facilisis. Vivamus quis malesuada ipsum. Sed varius faucibus tincidunt. Quisque luctus erat a dolor molestie consequat. </p>
</div>
</div>
<div>
<ul>
<li>Lorem ipsum</li>
<li>Dolor sit amet</li>
<li>Consectetur adipiscing</li>
<li>Lorem ipsum</li>
<li>Dolor sit amet</li>
<li>Consectetur adipiscing</li>
<li>Lorem ipsum</li>
<li>Dolor sit amet</li>
<li>Consectetur adipiscing</li>
<li>Lorem ipsum</li>
<li>Dolor sit amet</li>
<li>Consectetur adipiscing</li>
</ul>

</div>
<div>
<ul>
<li>Lorem ipsum</li>
<li>Dolor sit amet</li>
<li>Consectetur adipiscing</li>
<li>Lorem ipsum</li>
<li>Dolor sit amet</li>
<li>Consectetur adipiscing</li>
<li>Lorem ipsum</li>
<li>Dolor sit amet</li>
<li>Consectetur adipiscing</li>
<li>Lorem ipsum</li>
<li>Dolor sit amet</li>
<li>Consectetur adipiscing</li>
</ul>

</div>

<div style="display: block;" id="pie"> </div>
</div>
</div>
</body>
</html>

El entorno se irá creando agregando los colores que escogimos a dicha estructura, en el ejemplo que estamos desarrollando para este artículo, se escogieron colores amarillo claro para la mañana, naranja-marrón para la tarde y negro-gris para la noche.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 98 | 1:36 PM
CSS avanzado: la propiedad display

Mientras muchos diseñadores de páginas web siguen solicitando la implementación de una mayor cantidad de propiedades de CSS 3, la mayoría de ellos desconocen muchas de las utilidades que tienen algunas de las propiedades del actual CSS 2.1, y como consecuencia de ello las subutilizan.

Algunas de ellas, como en el caso de la propiedad display que comenzamos a analizar con este artículo, son utilizadas con frecuencia, pero en modo muy simple y sin que se comprenda muy bien no solo el alcance de la propiedad en si misma, sino que además se desconocen las posibilidades que ofrecen muchos de sus valores. La mayoría de los diseñadores apenas conocen el uso de tres o cuatro de estos valores.

Conceptos generales
Podría decirse que esta propiedad define el tipo de caja que genera un elemento. Todos los elementos generados en el HTML ocupan un espacio (aunque mediante el uso de la propiedad “float” puede hacerse que los elementos dejen de ocupar este espacio aunque permanezcan visibles) y pueden comportarse de muchas formas. Este comportamiento de los elementos y la forma en que se comportan respecto de los elementos adyacentes, está regido por la propiedad “display”.

Esta propiedad solo admite el uso de uno de los valores posibles. Estos valores son: inline, block, list-item, run-in, inline-block, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none e inherit, siendo su valor inicial “inline” y es aplicable a todos los elementos, sin que estos hereden la propiedad.

Display: none
Es la forma más simple que presenta esta propiedad, en la que se indica al elemento que no genere ninguna caja, con lo que el elemento simplemente desaparece. Como consecuencia de ello, el elemento deja de ocupar un espacio en la presentación del documento, por lo que los elementos adyacentes simplemente ignoran su presencia y ocupan su espacio.

Esto último es lo que la diferencia del valor “hidden” de la propiedad “visibility”, con la que el elemento deja de ser visible, pero continúa ocupando el espacio asignado, con el efecto consiguiente en los elementos adyacentes.

Este valor se le utiliza generalmente en el desarrollo de elementos dinámicos con javascript, además de poder utilizarse junto a pseudo-clases en el desarrollo de algunos efectos visuales que simulan efectos dinámicos exclusivamente desarrollados con HTML y CSS, como en el siguiente ejemplo:

Menú desplegable
Display: block

Quote
<p class="bloque">Elemento con comportamiento en bloque</p>
<p class="bloque">Otro elemento que se comporta como bloque</p>

Quote
.bloque {
padding: 10px;
background: #ccc;
display: block;
}

Cuando un elemento es marcado con este valor de la propiedad “display”, el mismo se comporta como bloque. Este comportamiento como bloque quiere decir que:

• El elemento no permitirá la ubicación de elementos adyacentes.
• En caso de que sus dimensiones no sean determinadas, ocupará todo el ancho disponible dentro del elemento contenedor, y tendrá una altura que será determinada por el contenido.
• Cuando se determina el ancho, el elemento ocupará solo la extensión determinada, pero sin permitir la ubicación de elementos adyacentes, aún cuando haya espacio suficiente para que se ubique en él otro elemento.

Display: inline

Quote
<p class="linea">Elemento con comportamiento en línea</p>
<p class="linea">Otro elemento que se comporta en línea</p>

Quote
.linea {
padding: 10px;
background: #ddd;
display: inline;
}

Los elementos cuya propiedad “display” tienen el valor “inline” se comportan como elementos en línea, lo que quiere decir que:

• Estos elementos permiten la ubicación de elementos adyacentes.
• No puede determinarse el ancho ni la altura de estos elementos, ya que como elementos en línea, las dimensiones de los mismos son determinadas por el contenido.

Display: inline-block

Quote
<p class="linblock">Elemento con comportamiento en línea y en bloque</p>
<p class="linblock">Otro elemento que se comporta en línea y en bloque</p>

Quote
.linblock {
padding: 10px;
background: #f60;
display: inline-block;
width: 150px;
}

Los elementos que tienen en su propiedad “display” este valor, tienen parte del comportamiento de los valores “inline” y “block”. Se comportan como si se tratara de elementos de bloque, pero que permiten la presencia de elementos adyacentes, lo que es propio de los elementos en línea. Las características de estos elementos son:

• Permiten elementos adyacentes, como si se tratara de elementos en línea.
• Pueden determinarse sus dimensiones, como los elementos de bloque.
• Cuando no se determina su extensión, ocupan todo el espacio disponible, como sucede con los elementos de bloque.
• La posición que ocupan estos elementos, es similar a los elementos en línea, lo que quiere decir que la parte inferior del elemento se apoyará en la base de la línea.

Display: list-item

Quote
<p class="lista">Elemento con comportamiento ítem de lista</p>
<p class="lista">Otro elemento que se comporta como ítem de lista</p>

Quote
.lista {
display: list-item;
list-style-type: square;
}

Este valor hace que el elemento se comporte como si se tratara de un ítem de lista, es decir, como si se tratara de un elemento <li>. Su comportamiento es exactamente igual que si se tratara de un ítem de lista, por lo que soporta las propiedades de este tipo de elementos, como “list-style”. Al igual que los ítems de lista, su comportamiento respecto de los demás elementos es similar a los elementos de bloque, por lo que no permite la presencia de elementos adyacentes y pueden determinarse todas sus dimensiones.

Display: run-in

Quote
<p class="runin">Elemento con comportamiento ítem de lista</p>
<p class="bloque">Otro elemento que se comporta como ítem de lista</p>

Quote
.runin {
display: run-in;
background: #6af;
}

Este es uno de los valores que otorgan un comportamiento más difícil de comprender, ya que el mismo es variable dependiendo de los elementos adyacentes. También la implementación de este valor de la propiedad “display” puede resultar complicada por el hecho de que no todos los navegadores la muestran en forma correcta (en la actualidad, solo muestran los elementos en forma correcta los navegadores Google Chrome, Opera e Internet Explorer 8. Mozilla Firefox, ni siquiera en su versión 4 que está en fase beta, lo muestra correctamente).
De todas formas, a pesar de que es muy probable que debido al inconveniente generado por las diferencias entre los navegadores este valor sea muy pocas veces utilizado, daremos a conocer como funciona, ya que se encuentra dentro del estándar de W3C y su implementación debería ser posible en cualquier navegador.

Cuando un elemento cuya propiedad “display” tiene el valor “run-in” tiene a continuación un elemento cuya propiedad “display” tiene como valor “block”, el elemento se comporta como si el valor fuera “inline” y se ubica dentro del elemento con “display: block”. En los navegadores que no soportan este valor, ambos elementos se muestran como elementos de bloque y separados.

Para todos los demás casos, el elemento marcado con este valor se comporta como un elemento de bloque.

Otros valores
El resto de los valores de esta propiedad son aquellos que hacen que los elementos se comporten como si se tratara de tablas o como partes de ellas, como tablas, filas, columnas y celdas, o como grupos de ellas.

Dado que se trata de una cantidad importante de valores, explicaremos el comportamiento de los elementos marcados con ellos más tarde.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 99 | 2:41 PM
CSS3: Gran efecto para mostrar imágenes a través del texto

WebKit soporta la nueva propiedad background-clip de CSS3, lo que es una buena noticia ya que puedes utilizarla para lograr este efecto impactante en el que las letras están conformadas por la imagen de fondo. Y lo mejor de todo, es que tan sólo bastan unas pocas lineas de código.

Lo que sigue a continuación es el código necesario para poner este efecto en acción:

Quote
h1 {
color: white; /* Fallback: assume this color ON TOP of image */
background: url(images/fire.jpg) no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

Eso es todo. Elige una imagen de fondo, colócala en el elemento, luego inserta el efecto y configura el color de relleno del texto como transparente.

Haz clic aquí para ver una demostración >>

Compatibilidad
Lamentablemente, este efecto es sólo compatible con navegadores que utilicen Webkit. Por lo tanto, necesitamos un plan B para mostrar correctamente este texto a aquellos con un navegador no compatible.

La mejor herramienta para este tipo de resguardos es Modernizr, del que ya hemos hablado anes. Simplemente añádelo a tu sitio, y se ocupará de agregar classnames al tag html de tu página indicando lo que el navegador que está siendo utilizado es capaz de hacer. Como Modernizr aún no posee por defecto la propiedad background-clip, se la añadiremos nosotros con el siguiente código:

Quote
<script src="modernizr-1.6.min.js"></script>
<script>
Modernizr.addTest('backgroundclip',function(){

var div = document.createElement('div');

if ('backgroundClip' in div.style) return true;

'Webkit Moz O ms Khtml'.replace(/([A-Za-z]*)/g,function(val){
if (val+'BackgroundClip' in div.style) return true;
});

});
</script>

Si Modernizr detecta que el navegador soporta esta propiedad, le asignará al tag html la class "backgroundclip". De lo contrario, le asignará la class "no-backgroundclip".

Y ahora sí, este es el nuevo código:

Quote
.backgroundclip h1 {
background: url(images/west.jpg) -100px -40px no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

h1 {
color: orangered;
}

¡Y listo! Ahora las letras tendran un buen color sólido de fondo en lugar de un efecto incompatible.

Haz clic aquí para ver una demostración >>


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 100 | 1:53 PM
CSS: Colores y fondos

En este post aprenderás a aplicar colores y colores de fondo a tus sitios web. Examinaremos también métodos avanzados para posicionar y controlar imágenes de fondo. Se explicarán las siguientes propiedades CSS:

Color de primer plano: la propiedad 'color'
La propiedad color describe el color de primer plano de un elemento.

Por ejemplo, imagina que queremos que todos los títulos de un documento aparezcan con color rojo oscuro. Todos los títulos están marcados con el elemento <h1>. El código siguiente establece el color de los elementos <h1> como rojo.

Quote
h1 {
color: #ff0000;
}


Ver ejemplo

Los colores se pueden introducir como valores hexadecimales, como en el ejemplo anterior: #ff0000; o se pueden usar los nombres de los colores: "red" (rojo), o bien como valores rgb: (rgb(255,0,0)).

La propiedad 'background-color'
La propiedad background-color describe el color de fondo de los elementos.

El elemento <body> contiene todo el contenido de un documento HTML. Así pues, para cambiar el color de fondo de una página, la propiedad background-color debería aplicarse al elemento <body>.

También se pueden aplicar colores de fondo a otros elementos, entre ellos, a los encabezados y al texto. En el ejemplo que sigue se aplicarán diferentes colores a los elementos <body> y <h1>.

Quote
body {
background-color: #FFCC66;
}

h1 {
color: #990000;
background-color: #FC9804;
}



Ver ejemplo

Fíjate cómo hemos aplicado dos propiedades a <h1> separándolas por medio de un punto y coma.

Imágenes de fondo [background-image]
La propiedad CSS background-image se usa para insertar una imagen de fondo.

Para el ejemplo de la imagen de fondo, vamos a usar la mariposa que ves más abajo. Puedes descargar la imagen para usarla en tu propio ordenador (haz clic con el botón derecho sobre la imagen y elige "guardar imagen como..."), o bien puedes usar cualquier otra imagen.

Para insertar la imagen de la mariposa como imagen de fondo de una página web, aplica sencillamente la propiedad background-image al elemento <body> y especifica la localización de la imagen.

Quote
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}

h1 {
color: #990000;
background-color: #FC9804;
}



Ver ejemplo

NOTA: Fíjate cómo hemos especificado la localización de la imagen: url("butterfly.gif"). Esto significa que la imagen está en la misma carpeta que la hoja de estilo. También puedes hacer referencia a imágenes en otras carpetas usando url("../imagenes/butterfly.gif") o incluso imágenes de Internet si indicas la dirección completa del fichero: url("http://www.html.net/butterfly.gif").

Repetir la imagen de fondo [background-repeat]
En el ejemplo anterior, ¿te fijaste en que, por defecto, la mariposa se repetía tanto en el eje horizontal como en el vertical para ocupar toda la pantalla? La propiedad background-repeat controla este comportamiento.

La tabla siguiente resume los cuatro valores diferentes para la propiedad background-repeat.

background-repeat: repeat-x – La imagen se repite en el eje horizontal – Ver ejemplo
background-repeat: repeat-y – La imagen se repite en el eje vertical – Ver ejemplo
background-repeat: repeat – La imagen se repite en el eje horizontal y vertical – Ver ejemplo
background-repeat: no-repeat – La imagen no se repite – Ver ejemplo

Por ejemplo, para evitar que se repita un imagen de fondo, el código que tendríamos que usar sería el siguiente:

Quote
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}

h1 {
color: #990000;
background-color: #FC9804;
}



Ver ejemplo

Fijar la imagen de fondo [background-attachment]
La propiedad background-attachment especifica si una imagen está fija o se desplaza con el elemento contenedor.

Una imagen de fondo fija no se moverá con el texto cuando el lector se desplace por la página, mientras que una imagen de fondo no fija se desplazará con el texto de la página web.

La tabla siguiente resume los dos valores posibles para la propiedad background-attachment. Haz clic en los ejemplos para ver la diferencia entre la imagen fija y la imagen que se desplaza.

background-attachment: scroll – La imagen se desplaza con la página - no está fija – Ver ejemplo
background-attachment: fixed – La imagen está fija – Ver ejemplo

Por ejemplo, el siguiente código fijará la imagen de fondo.

Quote
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}

h1 {
color: #990000;
background-color: #FC9804;
}



Ver ejemplo

Ubicación de la imagen de fondo [background-position]
Por defecto, una imagen de fondo se posiciona en la esquina superior izquierda de la pantalla. La propiedad background-position te permitirá cambiar este valor por defecto y posicionar la imagen de fondo en cualquier lugar de la pantalla que quieras.

Hay muchas formas diferentes de establecer los valores de la propiedad background-position. Sin embargo, todas ellas se formatean como un conjunto de coordenadas. Por ejemplo, el valor '100px 200px' posiciona la imagen de fondo a 100 píxeles del margen izquierdo y a 200 píxeles del margen superior del la ventana del navegador.

Las coordenadas se pueden indicar como porcentajes del ancho de la pantalla, como unidades fijas (píxeles, centímetros, etc.) o puedes usar las palabras "top" (superior), "bottom" (inferior), "center" (centro), "left" (izquierda) y "right" (derecha). El modelo siguiente ilustra cómo funciona el sistema:

La tabla siguiente proporciona varios ejemplos.
background-position: 2cm 2cm – La imagen se posiciona a 2 cm del margen izquierdo y a 2 cm del margen superior de la página – Ver ejemplo
background-position: 50% 25% – La imagen se posiciona en el centro de la página y un 25 % del margen superior de la mismo – Ver ejemplo
background-position: top right – La imagen se posiciona en la esquina superior derecha de la página – Ver ejemplo

El ejemplo de código siguiente posiciona la imagen de fondo en la esquina inferior derecha:

Quote
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}

h1 {
color: #990000;
background-color: #FC9804;
}



Ver ejemplo

Combinación de propiedades [background]
La propiedad background es una forma abreviada de todas las propiedades de fondo listadas a lo largo de esta lección.

Con la propiedad background se pueden comprimir varias propiedades, y así escribir una hoja de estilo de forma más abreviada, lo que facilitará su lectura.

Por ejemplo, observa estas cinco líneas de código:

Quote
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;


Usando background se puede lograr el mismo resultado con una única línea de código:

Quote
background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;


El orden en que deben aparecer las propiedades individuales es el siguiente:

Quote
[background-color] | [background-image] | [background-repeat]| [background-attachment] | [background-position]

Si se omite alguna propiedad, de forma automática ésta se establecerá con su valor por defecto. Por ejemplo, si se omiten las propiedades background-attachment y background-position del ejemplo anterior, quedando el código de la siguiente manera:

Quote
background: #FFCC66 url("butterfly.gif") no-repeat;


Estas dos propiedades que no se especifican se establecerían, sin más, con sus valores por defecto, que, como ya sabes, son scroll y top left.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 101 | 12:13 PM
CSS avanzado: la propiedad display

Continuamos el tema que hemos comenzado antes.

Dentro de los valores que tiene la propiedad display, los que están relacionados con las tablas son aquellos en los que mayores diferencias hay entre los navegadores, y en muchos casos ni siquiera están soportados. Si bien es cierto que la maquetación con tablas es incorrecta, tanto desde el punto de vista semántico como desde el punto de vista práctico, hay que reconocer que las tablas presentan algunas ventajas en lo que refiere a la sencillez con que se pueden posicionar los elementos en algunos casos.

Para aquellos casos en los que el uso de las tablas puede resultar una ventaja, CSS presenta estos valores de la propiedad “display”, que hace que los elementos se comporten como tablas o partes de tablas. Es importante decir que cuando decimos “se comporten como tablas o partes de tablas”, es solo referido al posicionamiento. En el ejemplo siguiente, vemos que mientras las celdas de las tablas (en la parte superior de la imagen), el espacio natural que existe entre las celdas de una tabla, no aparece en el caso de los elementos marcados con el valor “table-cell” de la propiedad “display” (en la parte inferior de la imagen). Para lograr que se vean del mismo modo, hay que utilizar la propiedad “border-spacing”.

Nota importante: Todas estas propiedades tienen una reciente aplicación en los navegadores. Mozilla Firefox comenzó a soportarlo recién con la aparición de la versión 3, mientras que en Internet Explorer no se había implementado hasta la aparición de Internet Explorer 8. Esto quiere decir que en el caso de utilizar navegadores como Internet Explorer 6 y 7 o una versión antigua de los demás navegadores, estos elementos se comportarán tal como si no tuvieran la propiedad “display” determinada.

¿Usar tablas o los valores de tablas de “display”?
Los valores de tablas de la propiedad “display” son útiles para que los elementos se comporten como si se tratara de tablas. Sin embargo, en caso de tener que ingresar datos tabulados, lo correcto es utilizar tablas ya que HTML dispone de las mismas para ello.

Table, table-row y table-cell
En la imagen anterior, vemos la utilización de tres de los valores de la propiedad, “table”, “table-row” y “table-cell”. En este caso se encuentran aplicados a capas (div), que cumplen con los mismos propósitos que los elementos correspondientes de las tablas (tabla, fila y celda respectivamente).

Es posible (salvo para Google Chrome) utilizar solo la propiedad “table-cell” cuando disponemos de los elementos en una sola fila. Para el caso de Google Chrome, es necesario que los elementos se encuentren dentro de una capa que tenga la propiedad “display” con el valor “table-row”, ya que de otra forma, los elementos se comportarán como si la propiedad no estuviera determinada.

Inline-table
Se trata de un valor bastante peculiar, ya que produce que el elemento se comporte como tabla, pero a diferencia de éstas, se mantiene en línea, es decir, sin salto de línea anterior ni posterior. Es importante marcar que, mientras en casi todos los navegadores el elemento marcado con “inline-table” se desarrolla desde la línea hacia abajo, en Google Chrome los elementos se desarrollan hacia arriba de la línea. Ejemplo:

Table-column
Los elementos contenidos dentro de éste elemento, se comportan como si se tratara de una columna, lo que en el correspondiente HTML sería <column>.

Otros valores
Dentro de la propiedad, hay valores que hacen que los elementos se comporten como si se trataran de grupos de partes de tablas, como grupos de filas y grupos de columnas. En cada uno de los casos, pueden ser grupos de una o más filas o columnas respectivamente.

De similares características son los elementos “table-header-group” (thead en HTML) y “table-footer-group” (tfoot en HTML), que determinan al grupo de filas del encabezado y pie de los elementos dispuestos en forma de tabla. Otro caso especial es el de “table-caption”, que hace que el elemento se comporte como si se tratara de títulos de la tabla.

Código utilizado
Para que puedan llevar adelante las prácticas con los valores de la propiedad “display”, les dejamos el código que hemos empleado que aparecen en las imágenes, de forma que puedan hacer todas las modificaciones que consideren necesarias para comprender el funcionamiento de los elementos que utilizan estos valores.

Quote
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title>Ejemplo</title>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>

<div id="contenedor">

<table>
<tr>
<td>Elemento en línea</td>
<td>Elemento</td>
<td>Elemento</td>
<td>Elemento</td>
</tr>
<tr>
<td>Elemento</td>
<td>Elemento</td>
<td>Elemento</td>
<td>Elemento</td>
</tr>
</table>

<div class="tabla">
<div class="fila">
<div class="celda">Elemento largo</div>
<div class="celda">Elemento</div>
<div class="celda">Elemento</div>
<div class="celda">Elemento</div>
</div>
<div class="fila">
<div class="celda">Elemento</div>
<div class="celda">Elemento</div>
<div class="celda">Elemento</div>
<div class="celda">Elemento</div>
</div>
</div>

<br />
<br />

<div>Este es un ejemplo de
<div class="tabla-linea">
<div class="fila">
<div class="celda">Elemento largo</div>
<div class="celda">Elemento</div>
<div class="celda">Elemento</div>
<div class="celda">Elemento</div>
</div>
<div class="fila">
<div class="celda">Elemento</div>
<div class="celda">Elemento</div>
<div class="celda">Elemento</div>
<div class="celda">Elemento</div>
</div>
</div>
"inline-table"</div>

<br />
<br />

<div class="tabla">
<div class="col">
<div class="fila">
<div class="celda">Elemento</div>
<div class="celda">Elemento</div>
<div class="celda">Elemento</div>
</div>
</div>
<div class="col">
<div class="fila">
<div class="celda">Elemento largo</div>
<div class="celda">Elemento</div>
<div class="celda">Elemento</div>
</div>
</div>
</div>
</div>

</body>
</html>

Quote
#contenedor {
width: 700px;
margin: auto;
}

td, table {
border: solid 1px #000;
}

table {
text-align: center;
margin-bottom: 20px;
}

.celda {
border: solid 1px #000;
display: table-cell;
}

.fila {
display: table-row;
}

.col {
display: column;
}

.tabla {
display: table;
border-spacing: 2px;
text-align: center;
border: solid 1px #000;
}

.tabla-linea {
display: inline-table;
border-spacing: 2px;
text-align: center;
border: solid 1px #000;
}


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 102 | 6:34 PM
Cambiar el color de la selección utilizando CSS

Un aspecto que se puede modificar en cualquier diseño pero que nunca se suele modificar, es el color de la selección de texto. Por defecto, los navegadores suelen poner un color azul, pero este color puede dificultad saber lo que hemos seleccionado por similitud con el color del entorno.

El cambio de color de la selección de texto en una web se puede hacer mediante propiedades CSS3. El código que vamos a poner es soportado por los navegadores Firefox, Chrome, Opera y Safari.

La propiedad que hace posible el cambio de color es selection en sus diferentes formas para los navegadores. El código que utilizaremos será:

Quote
::selection {
background:#f094b7;
color:#555;
}
::-moz-selection {
background:#f094b7;
color:#555;
}
::-webkit-selection {
background:#f094b7;
color:#555;
}

El código es el mismo, lo único que cambia es el nombre de la propiedad, según el motor que implemente el navegador. Este código es para un caso general, pero si queremos que distintas zonas tengan distintos colores, eso también se puede hacer.

Quote
p.orange::selection {
background:#c2660d;
color:#fff;
}
p.orange::-moz-selection {
background:#c2660d;
color:#fff;
}
p.orange::-webkit-selection {
background:#c2660d;
color:#fff;
}
p.blue::selection {
background:#2d7e99;
color:#fff;
}
p.blue::-moz-selection {
background:#2d7e99;
color:#fff;
}
p.blue::-webkit-selection {
background:#2d7e99;
color:#fff;
}

Ver demo


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 103 | 5:16 PM
Gradientes con CSS 3

Muchas de las propiedades CSS3 han estado presentes en browsers Webkit como Safari y Chrome desde sus inicios; a medida que avancen han mejorado el soporte y no es diferente con el uso gradientes sólo con CSS. Desde la versión 3.6 se pueden utilizar con Firefox, y últimamente han tomado mucha fuerza en aplicativos web modernos.

¿Porqué utilizar gradientes en CSS en vez de imágenes?
1. Es más flexible y mantenible
2. Menos dependencias de programas y editores gráficos
3. Menos consultas al servidor
4. Es escalable

En este artículo abordaremos las maneras de escribir gradientes (lineales y radiales) para los principales navegadores modernos.

Según los estándares W3C, crear gradientes se compone de:

Quote
linear-gradient( [<punto> || <angulo>,]? <stop>, <stop> [, <stop>]* )
radial-gradient( [<posicion> || <angulo>,]? [<forma> || <tamaño>,]? <stop>, <stop>[, <stop>]* )

Para browsers Mozilla, se mantiene pero se agrega el prefijo -moz:

Quote
-moz-linear-gradient( [<punto> || <angulo>,]? <stop>, <stop> [, <stop>]* )
-moz-radial-gradient( [<posicion> || <angulo>,]? [<forma> || <tamaño>,]? <stop>, <stop>[, <stop>]* )

Y para Webkit, es bastante diferente:

Quote
-webkit-gradient(<tipo>, <punto> [, <radio>]?, <punto> [, <radio>]? [, <stop>]*)

Una lástima que tengamos que reescribir para cada uno diferentes propiedades para lograr el mismo efecto. Mejor veamos los ejemplos:

Gradiente Lineal

Quote
body{
background-color:#ccc;
background-image: -moz-linear-gradient(top, #333, #ccc);
background-image: -webkit-gradient(linear, left top,left bottom, from(#333), to(#ccc));
background-image: linear-gradient(top, #333, #ccc);
}

Ver Ejemplo

Gradiente Radial

Quote
body{
background-color:#ccc;
background-image: -moz-radial-gradient(center 45deg,circle cover, #ccc, #333);
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%,800, from(#ccc), to(#333));
background-image: radial-gradient(center 45deg,circle cover, #ccc, #333);
}

Ver Ejemplo

¿Y con Internet Explorer?
Ni lo pienses, siquiera en IE9 están soportados. Podrías lograrlo en esta última versión a través de SVG, el cual es basado en vectores. SVG es un lenguaje de marcado basado en XML que describe vectores, y el motor de HTML5 permite que SVG sea incrustado directamente en HTML. Definiendo el alto del documento SVG al 100%, tendremos una imagen que se escala cualquiera sea el alto del elemento, tal como lo haría una caja con gradientes en CSS3.

¿Muy complicado? También lo creo. Mejor prueba algún script como Modernizr (o mejor de CSS3 Pie), los que hacen que IE soporte CSS3 como deberían haberlo hecho con los estándares hace mucho tiempo ya.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 104 | 4:30 PM
CSS3: Colocar colores de fondo al contenido principal y la barra lateral sin usar imágenes

No hay duda de que CSS3 nos ha permitido solucionar fácilmente algunos inconvenientes que en el pasado nos han dado muchos dolores de cabeza. En este artículo, veremos un sencillo truco para colocar dos colores de fondo distintos tanto al contenido principal como a la barra lateral, sin utilizar una sola imagen.

Para lograr este truco, primero construimos el layout:

Quote
<body>

<header>
<h1> My Header </h1>
</header>

<div id="main">
<div id="primary">Primary content.</div>
<aside>
Sidebar
</aside>
</div>
</body>

Con esto hemos creado dos columnas. Ahora, un poco de CSS:

Quote
body {
width: 700px;
margin: auto;
background: #e3e3e3;
}
#primary {
float: left;
width: 75%;
height: 700px;
background: red;
}
aside {
display: block;
float: right;
width: 25%;
height: 500px;
background: green;
}

Si contemplamos nuestros resultados, veremos que el inconveniente aparece: La altura del contenido principal supera a la de la barra vertical.

Solucionaremos esto con nuestro truco de CSS3. Borramos las configuraciones de background que hemos colocado anteriormente (sólo las hemos creado para comprendas el efecto), y en su lugar, colocamos esto:

Quote
#main {
background: -moz-linear-gradient(left, red 75%, green 75%);
}

El truco consiste en que, al colocar el punto de stop de ambos colores al mismo valor (en este caso, 75%), generamos dos colores sólidos.

Finalmente, añadimos una línea más para evitar inconvenientes con navegadores que utilizan webkit:

Quote
#main {
background: -moz-linear-gradient(left, red 75%, green 75%);
background: -webkit-gradient(linear, left top, right top, from(red), color-stop(.75, red), color-stop(.75, green));
}

Y eso es todo. Esperemos que te sea de mucha utilidad.

Adherido: 6248672.jpg (17.2 Kb)

Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 105 | 6:11 PM
CSS3: transformations rotar, escalar, trasladar

En este post vamos a ver las CSS transformations que por si solas no hacen mucho, excepto tal vez la de rotar pueda ser interesante sin embargo su verdadera utilidad se ve en las CSS animations de las que hablaré más tarde, aunque desde ya les digo que esas sólo funcionan en Webkit y aún más interesantes son las 3D CSS animations que hacen cosas que sólo he visto en flash pero lamentablemente únicamente soportadas por un webkit night build (es decir una versión tan pero tan reciente que ni siquiera es alpha y sujeta a mil errores).

Vamos al grano, no sin antes advertir que sólo funcionan estos ejemplos en navegadores modernos

Trasladar con CSS3
Para mover el div de su ubicación actual usamos la siguiente propiedad para desplazarlo a la derecha (el segundo valor desplaza hacia abajo):

Quote
-moz-transform: translate(3em, 0pt);
-webkit-transform: translate(3em,0);

Rotar usando CSS3
Este ejemplo rotará nuestro div 30 grados

Quote
-moz-transform:rotate(30deg);
-webkit-transform: rotate(30deg);

Escalar usando CSS3
Veamos este ejemplo para agrandar un div al doble de su tamaño original

Quote
-moz-transform:scale(2);
-webkit-transform: scale(2);

Espero les sean útiles estas propiedades aunque por ahora sean sólo para experimentar


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)
Búscar: