Página 8 de 13«126789101213»
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º 106 | 11:40 AM
Fondo de imagen en nuestra página utilizando CSS3

Con este artículo, lo que pretendemos es utilizar una imagen de fondo, que ocupe todo el hueco de nuestra página sin dejar espacio y fijarla, manteniendo la escalabilidad de la imagen, y que la imagen aparezca centrada.

Para poder hacerlo, necesitaremos una imagen grande y utilizaremos varias propiedades CSS3. Lo haremos multinavegador, para que se vea correctamente en todos los que aceptan propiedades CSS3.

Para lo del tamaño, podemos utilizar la propiedad “background-size”, para que nos sea sencillo conseguir nuestro objetivo.

El código quedaría como lo siguiente:

Quote
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

La imagen la hemos centrado y fijado, y luego con la propiedad comentada anteriormente, le hemos indicado que cubra toda la pantalla.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 107 | 1:38 PM
CSS avanzado: la propiedad “white-space”

Esta también es una de las propiedades CSS que son poco utilizadas por los diseñadores, sobre todo aquellos que recién comienzan, debido fundamentalmente al desconocimiento acerca de sus posibles aplicaciones. Esta propiedad se encuentra soportada por todos los navegadores, por lo que su aplicación es factible en todos los casos.

Se emplea para determinar la forma en que el navegador tomará los espacios en blanco y los saltos de línea. Para comprender mejor esto, debemos entender como los navegadores interpretan la presencia de los espacios en blanco y los saltos de línea, cuando la propiedad “white-space” no se encuentra especificada o cuando se encuentra en normal, que es su valor inicial.

A diferencia de lo que sucede con los diferentes editores de texto, cuando dentro de un código HTML se encuentra un texto en el cual alguna o varias de las palabras se encuentran separadas por más de un espacio en blanco consecutivos, el navegador simplifica y deja solo uno de los espacios en blanco, haciendo caso omiso de la presencia de los demás.

En lo que respecta a los saltos de línea, los navegadores emplean (al igual que en los editores de texto) todos los saltos de línea necesarios para que el texto no salga de los límites impuestos, pero no respeta los saltos de línea propios del texto.

En el ejemplo siguiente, veremos un párrafo en el que se han colocado deliberadamente una gran cantidad de espacios en blanco entre las palabras y saltos de línea, y veremos como el navegador coloca tantos saltos de línea como sea necesario para que el texto no se salga de los 600 pixeles que tiene cada párrafo de ancho. Junto al párrafo nombrado, hemos colocado otro con los espacios en blanco simples, para que se pueda comprobar que, a pesar de ser diferentes, el navegador los muestra de la misma forma:

Quote
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lorem tellus, tempor vel ultrices a, volutpat ac justo. Aenean a orci ac justo gravida porta. Vivamus varius dui velit. Donec nec nunc ipsum, vitae pretium magna. Praesent non urna leo, non accumsan felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec lorem tellus, tempor vel ultrices a, volutpat ac justo.
Aenean a orci ac justo gravida porta. Vivamus varius dui velit. Donec nec nunc ipsum, vitae pretium magna.
Praesent non urna leo, non accumsan felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>

Quote
[font=Courier]>p {
width: 600px;
margin: 10px auto;
padding: 5px;
border: solid 2px #f60;
font: normal 13px arial, helvetica, sans-serif;
}

Los valores de la propiedad
A esta propiedad se le pueden asignar cinco valores propios, además del valor “inherit” (heredado), que son:
normal: Por ser el valor inicial de la propiedad, se aplica a todos los elementos en los que no se determina la propiedad. Los espacios en blanco son simplificados, dejándose uno solo entre cada palabra, y se aplican todos los saltos de línea necesarios (además de los que sean determinados por la etiqueta <br> o <br />) para que el texto se mantenga dentro de los límites impuestos por el tamaño del selector. Sin embargo, los saltos de línea naturales del texto no son respetados. Podemos ver el ejemplo anterior para ver como se comporta, mientras que en el ejemplo que sigue, veremos su comportamiento en el primer párrafo.
pre: Cuando se aplica este valor, el navegador respeta todos los espacios en blanco que encuentre. Los saltos de línea que los navegadores colocan en forma automática en otros casos, cuando se aplica este valor no se colocan, por lo que el contenido puede desbordar los límites del elemento. Los saltos del línea del texto original son respetados. En el ejemplo siguiente, veremos su aplicación en el segundo párrafo.
nowrap: El tratamiento de los espacios en blanco es igual que cuando se aplica el modo normal, es decir, que se eliminan todos los espacios en blanco sobrantes. La diferencia con el modo normal es que no se aplican los saltos de línea a menos que se encuentren incluidos en el texto origianal, por lo que el contenido puede desbordar los límites del elemento. En el ejemplo que se da a continuación, vemos su aplicación en el tercer párrafo.
pre-wrap: La aplicación de este valor de la propiedad hace que el navegador deje todos los espacios en blanco del contenido. A diferencia del valor “pre”, en este caso el navegador colocará los saltos de línea necesarios para que el contenido no desborde el tamaño del elemento en el que se aplica. También son respetados los saltos de línea originales. En el ejemplo que sigue, se aplica en el cuarto párrafo.
Pre-line: Cuando se aplica este valor, se deja un solo espacio en blanco, eliminándose el resto, mientras que se respetan los saltos de línea originales y se ajusta el texto, agregando los saltos de línea necesarios. En el quinto párrafo del ejemplo siguiente, vemos como es su aplicación.

Quote
<p id="normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec lorem tellus, tempor vel ultrices a, volutpat ac justo.
Aenean a orci ac justo gravida porta. Vivamus varius dui velit. Donec nec nunc ipsum, vitae pretium magna.
Praesent non urna leo, non accumsan felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>

<p id="pre">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec lorem tellus, tempor vel ultrices a, volutpat ac justo.
Aenean a orci ac justo gravida porta. Vivamus varius dui velit. Donec nec nunc ipsum, vitae pretium magna.
Praesent non urna leo, non accumsan felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>

<p id="nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec lorem tellus, tempor vel ultrices a, volutpat ac justo.
Aenean a orci ac justo gravida porta. Vivamus varius dui velit. Donec nec nunc ipsum, vitae pretium magna.
Praesent non urna leo, non accumsan felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>

<p id="prewrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec lorem tellus, tempor vel ultrices a, volutpat ac justo.
Aenean a orci ac justo gravida porta. Vivamus varius dui velit. Donec nec nunc ipsum, vitae pretium magna.
Praesent non urna leo, non accumsan felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>

<p id="preline">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec lorem tellus, tempor vel ultrices a, volutpat ac justo.
Aenean a orci ac justo gravida porta. Vivamus varius dui velit. Donec nec nunc ipsum, vitae pretium magna.
Praesent non urna leo, non accumsan felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>

Quote
p {
width: 600px;
margin: 10px auto;
padding: 5px;
border: solid 2px #f60;
font: normal 13px arial, helvetica, sans-serif;
}

p#normal {
white-space: normal;
}

p#pre {
white-space: pre;
}

p#nowrap {
white-space: nowrap;
}

p#prewrap {
white-space: pre-wrap;
}

p#preline {
white-space: pre-line;
}

[/size]

Adherido: 4076410.jpg(100Kb) · 0592184.jpg(100Kb) · 9193368.jpg(45Kb)

Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
magilc
Mensajes: 6
Reputación: 0
Mensaje Nº 108 | 10:40 PM
muy bueno tu artículo!!!

Ahora dentro del ambiente de programación UCOZ cuando se muestra la pagina en código fuente html

¿Que significan las variables globales que terminan en el caracter $?

me imagino que son una especie de funciones o rutinas que ya están pre programdas y se pueden ver su código en otra parte
¿Si es así como puedo verlas?

otra pregunta: ¿Como veo y reemplazo los archivos de imágenes cuya ruta es por ejemplo url('/.s/t/939/6.gif')

GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 109 | 2:05 PM
CSS3: Colocar un borde de tres lados a un elemento

Si necesitas colocar bordes a un elemento en tan sólo tres de sus lados, hay unas cuantas maneras de hacerlo. ¿Pero cúal será la más apropiada? En este artículo veremos qué se necesita para resolver esta particular cuestión.

Comencemos por el método más simple. Con CSS puedes simplemente, declarar el borde en sólo tres lados:

Quote
div {
border-top: 1px solid red;
border-right: 1px solid red;
border-bottom: 1px solid red;
}

O también puedes crear un sólo borde que rodee todo el elemento, excepto el lado por el que no deseas que pase.

Quote
div {
border: 1px solid red;
border-left: 0;
}

También existe la posibilidad de declarar el color y el estilo que usarás, utilizando border-width para especificar los tres lados:

Quote
div {
border-color: red;
border-style: solid;
border-width: 1px 1px 1px 0;
}

Pero claro, está el hecho de que los bordes afectan el tamaño del elemento bajo el modelo regular de caja. Si lo que quieres es añadir bordes sin alterar el tamaño del elemento, aquí es donde entra en juego un poco de CSS3, utilizando sombras:

Quote
div {
-webkit-box-shadow:
inset -1px 0 0 red,
inset 0 -1px 0 red,
inset 0 1px 0 red;
-moz-box-shadow:
inset -1px 0 0 red,
inset 0 -1px 0 red,
inset 0 1px 0 red;
box-shadow:
inset -1px 0 0 red,
inset 0 -1px 0 red,
inset 0 1px 0 red;
}

El inconveniente que presenta esta última manera es que las box-shadows inset tiene menos compatibilidad con navegadores que los bordes. Por ejemplo, este método no funcionara en IE8.

Y ese fue el último método. Todo esto es un claro ejemplo de que en CSS puede existir más de una manera de resolver un mismo problema. ¡Hasta la próxima!

Haz clic en este enlace para ver ejemplos de todos los métodos utilizados >>


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 110 | 3:18 PM
Comprueba si el navegador permite CSS 3 con JavaScript

Ya sabemos que los navegadores modernos, poco a poco van incorporando la interpretación de código CSS3, pero los más antiguos aún no lo permiten, por lo que si en nuestra aplicación utilizamos este tipo de etiquetas, puede ser que en algunos no se vean del todo bien.

Para evitar esto, podemos testear si el navegador que nos está visitando permite alguna etiqueta CSS3 y si no es así, entonces, que utilice otro conjunto de estilos para que se vea de todo bien.

Esto lo podemos conseguir con el siguiente código que os indicamos a continuación, donde se le indica un elemento CSS3, y nos devuelve si el navegador lo reconoce.

Quote
var supports = (function() {
var div = document.createElement('div'),
vendors = 'Khtml Ms O Moz Webkit'.split(' '),
len = vendors.length;

return function(prop) {
if ( prop in div.style ) return true;

prop = prop.replace(/^[a-z]/, function(val) {
return val.toUpperCase();
});

while(len--) {
if ( vendors[len] + prop in div.style ) {
// browser supports box-shadow. Do what you need.
// Or use a bang (!) to test if the browser doesn't.
return true;
}
}
return false;
};
})();

// EJEMPLO DE USO
if( supports('borderRadius')) {
alert('Tu navegador soporta la propiedad border-radius');
}

Es un código muy útil para poder crear aplicaciones que se vean igual, independiente del navegador que se utilice.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 111 | 6:23 PM
para magilc,

Code
Ahora dentro del ambiente de programación UCOZ cuando se muestra la pagina en código fuente html

Los sitios se exponen en HTML al mirar el código fuente de la página.

Code
¿Que significan las variables globales que terminan en el caracter $? ¿Si es así como puedo verlas?

Son códigos de sistema que no pueden estar editados, pero con su ayuda es posible exponer una información necesaria en la página del sitio web. Por debajo de cada plantilla (en el Panel de Control: Inicio – Diseño – Gestión de diseño) podrás ver una lista de todos los códigos de sistema que pueden estar utilizados. al lado de cada código se expone una breve descripción de su destinación.

Code
otra pregunta: ¿Como veo y reemplazo los archivos de imágenes cuya ruta es por ejemplo url('/.s/t/939/6.gif')

Aquí hace falta buscar en las plantillas o en las tablas CSS: Diseño – Gestión de diseño (plantillas).


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 112 | 12:00 PM
Resplandor exterior con CSS3

Cómo realizar un elemento que tenga un resplandor exterior con CSS3 y la propiedad box-shadow

Ya publicamos un análisis de las capacidades de la propiedad box-shadow, que sirve para producir una sombra en un contenedor, por medio de CSS. Es una de esas propiedades que vienen como novedad en la tercera especificación de CSS y que nos vendrán como anillo al dedo para conseguir ciertos efectos que antes sólo podíamos emular mediante el uso de imágenes semi-transparentes por canal alpha.

Así pues, lo que antes era un verdadero engorro y peso adicional innecesario para nuestras páginas, ahora se puede hacer con unas sencillas propiedades de CSS 3. Como decíamos, ya explicamos la propiedad box-shadow de CSS 3 y vimos ejemplos para utilizarla de modo que podamos producir sombras. En este post veremos una pequeña práctica para utilizar esa misma propiedad para obtener otro estilo de capa diferente, que es el resplandor exterior.

Nota: algunas de estas propiedades de CSS 3 recuerdan irremediablemente a los estilos de capa de Photoshop. A este efecto le hemos llamado “resplandor exterior” justamente por ser el nombre con el que le llaman en Photoshop, en la configuración de los estilos de capa.

Pues resulta que un resplandor exterior es justamente una sombra, pero en lugar de oscura, de color claro. Así que, haciendo uso de la misma propiedad CSS para la creación de sombras, podemos crear los resplandores que deseemos. Eso si, tendremos que colocar un fondo oscuro a nuestra página para verlos, por obvias razones de contraste.

En realidad estas son las propiedades CSS que necesitaremos para crear una sombra, pero de color blanco, con lo que se obtendrá el mencionado resplandor exterior.

Quote
-moz-box-shadow: 0px 0px 30px #ffffff;
-webkit-box-shadow: 0px 0px 30px #ffffff;
box-shadow: 0px 0px 30px #ffffff;

La primera propiedad -moz-box-shadow sirve para Firefox, la segunda -webkit-box-shadow es para Safari y Chrome y la tercera propiedad box-shadow sirve para todos los navegadores que ya han incorporado CSS 3 como si fuera un estándar ya aprobado, como Opera e Internet Explorer 9.

Nota: Más adelante, cuando CSS 3 esté en estado de implementación recomendada por el W3C, podremos usar solamente la propiedad box-shadow, que será compatible con todos los navegadores.

Si queremos hacer el resplandor con otro color, por ejemplo verde, tendríamos que cambiar únicamente el RGB de las propiedades CSS, tal como se puede ver a continuación.

Quote
-moz-box-shadow: 0px 0px 30px #A3FF0F;
-webkit-box-shadow: 0px 0px 30px #A3FF0F;
box-shadow: 0px 0px 30px #A3FF0F;

Hemos preparado un ejemplo de página web donde se ha creado un par de resplandores. Como se puede ver, hemos colocado un fondo de página negro, para que los resplandores se puedan ver correctamente. Asimismo, hemos colocado algunos estilos adicionales, como un borde para resaltar el resplandor o un padding para hacer que la caja se vea un poquito más holgada.

Para que queden claros todos los estilos CSS que hemos definido para la realización de este ejemplo, vamos a mostrar a continuación el código fuente completo generado.

Quote
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title>Hacer un resplandor exterior con CSS3</title>
<style type="text/css">
body{
font-family: Trebuchet MS, verdana, sans-serif;
background-color: #000;
color: #fff;
}
#resplandorblanco{
-moz-box-shadow: 0px 0px 30px #ffffff;
-webkit-box-shadow: 0px 0px 30px #ffffff;
box-shadow: 0px 0px 30px #ffffff;

padding: 10px;
border: 1px solid #fff;
width: 160px;
margin: 40px;
}

#resplandorverde{
-moz-box-shadow: 0px 0px 30px #A3FF0F;
-webkit-box-shadow: 0px 0px 30px #A3FF0F;
box-shadow: 0px 0px 30px #A3FF0F;

padding: 10px;
border: 1px solid #66ff00;
width: 160px;
margin: 40px;
}
</style>
</head>
<body>
<div id="resplandorblanco">
Esta capa tiene un resplandor exterior!!
</div>

<br>
<br>

<div id="resplandorverde">
Esta capa tiene un resplandor exterior, pero ahora he utilizado un resplandor de color verde!!
</div>
</body>
</html>


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 113 | 5:51 PM
Algunos trucos CSS simples para la maquetación de páginas web

El lenguaje CSS permite maquetar las páginas web utilizando las capas para ello. Pero quienes se inician en este tema, suelen encontrar algunos problemas que les resulta imposible de resolver, mayormente por falta de conocimiento de las posibilidades en la aplicación de algunas propiedades o valores de las mismas.

Hemos visto en ya, que los diseñadores de páginas web, aún algunos con cierta experiencia, que desconocen estos temas en profundidad, y terminan recurriendo a complicadas soluciones cuando podrían optar por emplear algunas propiedades CSS cuyo uso no es extendido.

En realidad se trata de pequeños problemas que tienen soluciones sencillas y que solo requiere el conocimiento completo de todas las posibilidades, además de imaginación para su aplicación. Es por ello que hoy traemos algunos trucos para ejemplificar la forma en que se deben solucionar los problemas de maquetación. Si bien estos ejemplos pueden aplicarse libremente, la intención de presentarlos es que sirvan de ejemplo para que estudien exhaustivamente todas las propiedades CSS y el alcance de sus valores, lo que hará que el trabajo se simplifique enormemente.

Imagen flotante sin que el texto se ajuste
Cuando intentamos incorporar una imagen flotante junto a un párrafo, el texto del párrafo tiende a “envolver” a la imagen. Esto generalmente es el efecto deseado, para que no aparezcan espacios en blanco debajo de la imagen. Sin embargo, es posible que algún diseño requiera que la imagen mantenga una posición (como si ocupara una columna) y que el texto no ocupe espacio debajo de ella. Esto es muy simple de hacer, y basta con la aplicación de capas y márgenes.

En primer lugar, veremos como queda la maquetación cuando colocamos una imagen flotante junto a un párrafo:

Quote
<div id="capa">
<img src="imagenes/agua.jpg" alt="agua" />
<p>El agua (del latín aqua) es una sustancia cuya molécula está formada por dos átomos
de hidrógeno y uno de oxígeno (H2O). Es esencial para la supervivencia de todas las
formas conocidas de vida. El termino agua, generalmente, se refiere a la sustancia en
su estado líquido, pero la misma puede hallarse en su forma sólida llamada hielo, y
en forma gaseosa denominada vapor. El agua cubre el 71% de la superficie de la corteza
terrestre.[2] Se localiza principalmente en los océanos donde se concentra el 96,5% del
agua total, los glaciares y casquetes polares poseen el 1,74%, los depósitos
subterráneos (acuíferos), los permafrost y los glaciares continentales suponen el 1,72%
y el restante 0,04% se reparte en orden decreciente entre lagos, humedad del suelo,
atmósfera, embalses, ríos y seres vivos.[3] El agua es un elemento común del sistema
solar, hecho confirmado en descubrimientos recientes. Puede ser encontrada,
principalmente, en forma de hielo; de hecho, es el material base de los cometas y el
vapor que compone sus colas.</p>
</div>

Quote
#capa {
width: 610px;
padding: 10px;
margin: 10px;
border: 1px solid #f60;
background: #fed;
}

#capa img {
float: left;
margin: 0 10px 10px 0;
}

A continuación veremos el ejemplo. Se trata simplemente de crear dos capas. La primera, es una capa contenedora, a la que hemos dado algunos elementos de diseño (borde, fondo, etc.), a la que hemos dado el identificador “principal”. Dentro de esta capa, crearemos una segunda capa, a la que daremos el identificador “flotante”, cuya característica principal es que tendrá la propiedad float y dentro de la cual incluiremos la imagen. Luego, dentro de la capa “principal”, incluiremos el párrafo. Los códigos y el resultado son los siguientes:

Quote
<div id="principal">
<div id="flotante">
<img src="imagenes/agua.jpg" alt="agua" />
</div>
<p>El agua (del latín aqua) es una sustancia cuya molécula está formada por dos átomos
de hidrógeno y uno de oxígeno (H2O). Es esencial para la supervivencia de todas las
formas conocidas de vida. El termino agua, generalmente, se refiere a la sustancia en
su estado líquido, pero la misma puede hallarse en su forma sólida llamada hielo, y
en forma gaseosa denominada vapor. El agua cubre el 71% de la superficie de la corteza
terrestre.[2] Se localiza principalmente en los océanos donde se concentra el 96,5% del
agua total, los glaciares y casquetes polares poseen el 1,74%, los depósitos
subterráneos (acuíferos), los permafrost y los glaciares continentales suponen el 1,72%
y el restante 0,04% se reparte en orden decreciente entre lagos, humedad del suelo,
atmósfera, embalses, ríos y seres vivos.[3] El agua es un elemento común del sistema
solar, hecho confirmado en descubrimientos recientes. Puede ser encontrada,
principalmente, en forma de hielo; de hecho, es el material base de los cometas y el
vapor que compone sus colas.</p>
</div>

Quote
#principal{
width: 610px;
padding: 10px;
margin: 10px;
border: 1px solid #f60;
background: #fed;
}

#principal #flotante{
float: left;
width: 300px;
}

#principal p{
margin-top: 0;
margin-left: 310px;
}

Lo que produce el efecto deseado es:
• La capa “flotante” tiene la propiedad “float” a la izquierda.
• El párrafo (identificado como “#principal p” en el código CSS) tiene un margen derecho tal que es igual al ancho de la capa “principal” menos el ancho de la capa “flotante”, lo que permite que ésta se coloque a la derecha del párrafo.
• El margen otorgado al párrafo es lo que hace que el texto no continúe hacia la derecha luego de que el espacio ocupado por la imagen finalice.

Esto puede hacerse también con la imagen flotante hacia la derecha. Para ello deberemos solo cambiar el “float:” de izquierda a derecha, al igual que el margen que se da al párrafo, con lo que el texto aparecerá a la derecha y la imagen a la izquierda.

Esquina “doblada” en capa
El siguiente ejemplo, se trata simplemente de crear una capa que aparente una hoja cuya esquina inferior derecha está doblada. Para ello deberemos contar con la siguiente imagen, la que para utilizarla solo deberán utilizar el botón derecho del ratón sobre ella y emplear la opción “Guardar como…”:

A continuación mostraremos los códigos que hemos utilizado en este ejemplo y la imagen resultante, para posteriormente explicar como lo hemos hecho:

Quote
<div id="oscuro">
<div id="esquina">
<p>El agua (del latín aqua) es una sustancia cuya molécula está formada por dos átomos
de hidrógeno y uno de oxígeno (H2O). Es esencial para la supervivencia de todas las
formas conocidas de vida. El termino agua, generalmente, se refiere a la sustancia en
su estado líquido, pero la misma puede hallarse en su forma sólida llamada hielo, y
en forma gaseosa denominada vapor. El agua cubre el 71% de la superficie de la corteza
terrestre.[2] Se localiza principalmente en los océanos donde se concentra el 96,5% del
agua total, los glaciares y casquetes polares poseen el 1,74%, los depósitos
subterráneos (acuíferos), los permafrost y los glaciares continentales suponen el 1,72%
y el restante 0,04% se reparte en orden decreciente entre lagos, humedad del suelo,
atmósfera, embalses, ríos y seres vivos.[3] El agua es un elemento común del sistema
solar, hecho confirmado en descubrimientos recientes. Puede ser encontrada,
principalmente, en forma de hielo; de hecho, es el material base de los cometas y el
vapor que compone sus colas.</p>
</div>
</div>

Quote
#oscuro {
width: 420px;
background: #444;
padding: 60px;
}

#esquina {
background: #fff url(imagenes/imagen3.jpg) bottom right no-repeat;
}

#esquina p {
padding: 50px;
margin: 0;
}

La imagen de la esquina doblada tiene dos colores fundamentales: el gris oscuro del fondo, y el color blanco de la mayor parte del resto de la imagen, que coincide con los bordes de la misma (esto es importante para que no existan diferencias con el resto de la capa). El truco solo consiste en utilizar una propiedad de la que ha hemos hablado, que es el posicionamiento de las imágenes de fondo.

En primer lugar crearemos la capa contenedora, que será de color gris oscuro para que coincida con el fondo de la imagen. Luego crearemos la capa donde se insertará el texto (o cualquier otro contenido), cuyo fondo tiene el siguiente código CSS:

Quote
#esquina {
background: #fff url(imagenes/imagen3.jpg) bottom right no-repeat;
}

Se trata en realidad de varias propiedades que se encuentran simplificadas:
Background-color, que tiene el valor #fff y que es visible en todos los puntos de la capa que no se encuentran cubiertos por la imagen.
Background-image, cuyo valor es la URL de la imagen de la esquina doblada.
Background-position, que tiene los valores bottom y right, para que la imagen de fondo se ubique en la esquina inferior derecha de la capa.
Background-repeat, que tiene el valor no-repeat, para que no ocupe el resto de la capa y sea visible una sola vez.

Además, se debe hacer que el párrafo o cualquier otro contenido que se encuentre en la capa tenga un relleno tal que dicho contenido no se monte sobre la imagen utilizada en la esquina. Este efecto puede utilizarse (modificando la posición de la imagen de fondo y utilizando una imagen apropiada) en cualquiera de las cuatro esquinas de la capa.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 114 | 1:32 PM
Animaciones y Transformaciones con CSS3

Se puede ver un aumento en el uso de CSS3 en sitios web de amplio uso, y actualmente es un diferencial a la hora de atraer y enganchar al usuario. Aunque sé que es pronto para sumergirse totalmente en estas aguas, no perdemos nada con jugar un poco con transiciones y animaciones en CSS3.

NOTA: Aún es necesario el uso de browsers muy modernos, como Safari 5 y Chrome 10[]b. [b]Firefox 3.6 anda pero no ofrece todo el soporte que quisiéramos (aún).

Transiciones
Su característica es cambiar una propiedad (o un grupo de ellas) en un período de tiempo determinado. Una ventaja por sobre Javascript es su degradación, ya que si esta propiedad no es soportada por el browser, la animación simplemente no es mostrada.

El siguiente código muestra el aumento del ancho de un <div> en un segundo cuando el mouse se posiciona sobre él. Luego, cuando el mouse sale del <div> su ancho vuelve a la posición inicial en 2 segundos:

Quote

.prueba1 {
margin:10px;
width:200px;
height:200px;
background:#f00;
border:1px solid #666;
-webkit-transition: all 1s ease; /* Safari-Chrome */
}
.prueba1:hover{
width:400px;
-webkit-transition: all 2s ease; /* Safari-Chrome */
}

Ver ejemplo 1

A continuación, una animación compuesta: dado un estado inicial se define nuevo width, height y background-color:

Quote
.prueba2 {
margin:10px;
width:200px;
height:200px;
background-color:#f00;
border:1px solid #666;
-webkit-transition-property: width, height, background-color;
-webkit-transition-duration: 0.5s, 1s, 1s;
-webkit-transition-timing-function: ease, ease-out;
-webkit-transition-delay:0s ,0.5s, 1.5s;
}
.prueba2:hover {
width:400px;
height:300px;
background-color:#fc0;
-webkit-transition-property: width, height, background-color;
-webkit-transition-duration: 0.5s, 0.5s, 0.5s;
-webkit-transition-timing-function: linear, linear;
-webkit-transition-delay:0s ,0.5s, 0.5s;
}

Ver ejemplo 2

Propiedades:
transition-property: Determina la(s) propiedad(es) a ser animadas; puede ser cualquier propiedad CSS.
transition-duration: Indica la duración de la animació del inicio al fin en segundos. Por defecto el valor es 0.
transition-timing-function: Definen física de animación: ease (por defecto), linear, ease-in, ease-out y ease-in-out.
transition-delay: Tiempo en que la animación debe pausarse antes de comenzar.

Transformaciones:
Existen 4 tipos de valores para transformar elementos HTML mediante CSS3:

Skew: desplazamiento de los ejes horizontales.
Scale: modificación de la escala del elemento.
Rotate: cambio de rotación del mismo definido en grados.
Translate: desplazamiento del elemento desde su posición original.

Ver ejemplo 3

Estas propiedades pueden ser utilizadas en la gran mayoría de los browsers modernos, con sus debidos prefijos como pueden notar en el código fuente del ejemplo.

Además, puedes comenzar a mezclar transformaciones con animaciones para lograr efectos como el siguiente (con Safari/Chrome):

Quote
#divloco div {
height:100px;
width:100px;
border:1px solid #f00;
margin:10px auto;
background: #ccc;
text-align:center;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
#divloco div:hover, #divloco div.hover_effect {
-webkit-transform:rotate(720deg) scale(2,2);
-moz-transform:rotate(720deg) scale(2,2);
-o-transform:rotate(720deg) scale(2,2);
-ms-transform:rotate(720deg) scale(2,2);
transform:rotate(720deg) scale(2,2);
}


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 115 | 12:14 PM
Shapes de CSS

Interesante iniciativa, que nos muestra la realización de formas con CSS a partir de un único elemento HTML. Evidentemente, la mayoría de los elementos se apoyan en las nuevas posibilidades de CSS3 y por tanto necesitan de un navegador "moderno". Por ejemplo, podemos realizar un círculo con el siguiente código.

Quote
#circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}

Para más info ver The Shapes of CSS » »


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 116 | 12:00 PM
Ejemplo de álbum fotográfico animado con CSS 3

Realizamos este ejemplo de animaciones para tu galería de fotos solamente con CSS 3.

Continuamos explorando las posibilidades de las animaciones CSS3, con nuevos ejemplos prácticos que estamos seguros resultarán interesantes para los aficionados al desarrollo de páginas web.

En este artículo vamos a realizar una galería de fotos, en la que las imágenes aparecen desordenadas y al pasar por ellas pasan a primer plano y se ven a su tamaño real. Ahora podemos ver otra idea de galería fotográfica con animaciones CSS 3, que tendrá un resultado bastante curioso, pero veremos que es más sencilla de realizar que la anterior.

Vamos a colocar primero nuestro código HTML para ir viendo poco a poco cómo construiríamos nuestro ejemplo.

Quote
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
   <title>Album de fotos con CSS</title>
<link rel="stylesheet" href="album2.css" type="text/css">
</head>

<body>
<div id="galeria">
   <div id="imagen1">
      <img src="images/image1.jpg">
      
   </div>   
   <div id="imagen2">
      <img src="images/image2.jpg">
      
   </div>   
   <div id="imagen3">
      <img src="images/image3.jpg">
      
   </div>   
   <div id="imagen4">
      <img src="images/image4.jpg">
      
   </div>   
   <div id="imagen5">
      <img src="images/image5.jpg">
      
   </div>   
   <div id="imagen6">
      <img src="images/image6.jpg">
      
   </div>   
</div>

</body>
</html>

En principio no hay nada que no sepamos, es simplemente un <DIV id=galeria> y dentro hemos ido colocando las imágenes dentro de otros <DIV>.
Ahora pasamos al código CSS que es el realmente importante:

Primero unos estilos generales para la galería:

Quote
#galeria {
      width: 800px;
      height: 600px;
      margin: 20px auto;
      padding: 40px;
      position: relative;
}

Luego unos estilos específicos para cada imagen:

Quote
#galeria div {
   position: absolute;
   overflow: hidden;
   opacity: 0.9;
   -webkit-transition: all 0.5s linear;
   -webkit-border-radius: 15px;
   border-radius: 15px;
   -webkit-box-shadow: -3px -3px 50px #666;
   box-shadow: -3px -3px 50px #666;
   -webkit-transform: scale(0.60);
}

Aquí lo que hacemos es crear un borde alrededor de cada imagen, dejarla un poco transparente y bajarla el tamaño, para que luego cuando pasemos el ratón crezca a su tamaño real.

Nota: Como venimos advirtiendo, las animaciones CSS 3 todavía no se encuentran disponibles en todos los navegadores. En estos ejemplos estamos trabajando a modo de demostración, con los atributos de CSS 3 propios del navegador Chrome o Safari. En breve podremos usar los atributos propios de CSS 3, que serían simplemente los mismos, pero quitando el prefijo -webkit. Pero de momento, para ver los ejemplos en funcionamiento y que se vean todas las animaciones CSS, hay que ejecutarlos en Google Chrome o Safari.

Quote
#galeria div:hover {
   z-index: 999;
   -webkit-transform: rotate(0deg);
   opacity: 1;
   
}

Con este código conseguimos que la imagen vaya al primer plano de la pantalla y se vea sin transparencia, al pasar el ratón por encima de la imagen.

Quote
#imagen1 {
   top: 50px;
   left: 130px;
   z-index:1;
}
         
#imagen2 {
   top: 300px;
   left:100px;
   z-index:7;
}
         
#imagen3 {
   top: 420px;
   left:350px;
   z-index:3;
}
         

#imagen4 {
   top: 135px;
   left: 450px;
   z-index:4;
}
         
#imagen5 {
   top: -100px;
   right: 200px;
   z-index:5;
}
         
#imagen6 {
   top: 220px;
   right: 120px;
   z-index:6;
}

Y finalmente con estos estilos lo que hacemos es colocar las imágenes donde nos de la gana. Si tuviéramos un sistema automático que nos mostrara más imágenes estos estilos los podríamos poner directamente en nuestro código.

Otra opción posible para este álbum es la de rotar las imágenes para que parezcan más desordenadas, para ello tan solo tendríamos que añadir la propiedad -webkit-transform: rotate(xdeg); a cada imagen, siendo x los grados a rotar.

Podemos ver como se queda nuestro album en el siguiente enlace.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 117 | 3:41 PM
CSS3: Cómo crear íconos giratorios con efecto de zoom en tu sitio web

Las animaciones con CSS3 son increíbles. De buen rendimiento, y más sencillas que utilizar Javascript, son el futuro en cuanto al potencial de los navegadores. Uno de los efectos más atractivos es el de hacer a tus íconos giratorios con un pequeño grado de zoom. ¿Quieres saber cómo lograrlo?

Haz clic en este enlace para ver una demostración del efecto >>

Es importante destacar que esta animación va orientada a navegadores modernos que puedan utilizar Webkit sin inconvenientes. Con esto en cuenta, vamos a ver el código CSS que será necesario para esta animación:

Quote
@-webkit-keyframes rotater {
0% { -webkit-transform:rotate(0) scale(1) }
50% { -webkit-transform:rotate(360deg) scale(2) }
100% { -webkit-transform:rotate(720deg) scale(1) }
}

La propiedad -webkit-transform es la encargada de esta animación. Defíne su valor como 0% con una rotación de 0 y escalada a 1, es decir, el estado original del elemento. Al 50% de la animación, el elemento debe ser rotado a 360 grados (es decir, una vuelta completa), y así el elemento debería crecer al doble de su tamaño. Al 100%, el elemento debe volver a su escala original y rotar 720 grados, viéndose de esa manera igual que al principio.

Con nuestra animación ya creada, es tiempo de aplicar la animación a un elemento en su estado "hover" (es decir, cuando el usuario posa el mouse sobre este elemento):

Quote
a.advert:hover {
  -webkit-animation-name:rotater;
  -webkit-animation-duration:500ms;
  -webkit-animation-iteration-count:1;
  -webkit-animation-timing-function:ease-out;
 
  -moz-transform:rotate(720eg) scale(2);
  -moz-transition-duration:500ms;
  -moz-transition-timing-function: ease-out;
}

El evento es asignado usando la propiedad -webkit-animation-name. Las propiedades adicionales asignadas son:

  • -webkit-animation-duration que le da a la animación 500 milisegundos de duración
  • -webkit-animation-iteration-count hace que la animación ocurra una sola vez
  • -webkit-animation-timing-function configura la transición de la animación

    ¡Y listo! Hemos finalizado de crear nuestra animación.

    Haz clic en este enlace para ver una demostración del efecto >>


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
  • GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 118 | 12:08 PM
    Columnas múltiples con CSS3: column-count, column-gap, column-width y column-rule

    El oscuro pasado de las tablas en la maquetación web
    El uso de tablas para estructurar un sitio resulta únicamente cómodo para quienes se reusan a aprender los nuevos estándares que ofrecen varias y mejores alternativas, el simple hecho de seguir utilizándolas para presentar información que no es propiamente tabular resulta abrumador.

    La culpable de todo esto es la maldita costumbre, muchos crecimos como diseñadores web utilizando las tablas como un elemento omnipresente que tenía cabida en cada parte de nuestros sitios, para casi todo lo que necesitaba presentar información existía una celda o una tabla completa que entraba al rescate.

    Con ellas matábamos la accesibilidad y la flexibilidad del sitio pero en aquel entonces no nos importaba, era preferible complicarnos la vida utilizando gifs como separadores dentro de las celdas para que el sitio funcionará y se viera bonito, a adaptarlo para utilizar tecnologías emergentes como el CSS, limitadamente utilizado en aquellos años.

    Gracias a nosotros que crecimos con ese estilo y propagamos el código por la red, hoy existen muchos desarrolladores principiantes confundidos que se preguntan ¿Cuándo y cómo debo utilizar tablas?, es fácil detectar que en Internet aún existen sitios que utilizan estos elementos para maquetación web, existen ejemplos por la red y métodos de solución que aún recomiendan el uso de tablas incorrectamente, y por otro lado se encuentran con la nueva era de la estandarización donde van surgiendo cada vez más nuevos estándares y mejores maneras de estructurar el código.

    La nueva era, divs para crear estructuras
    Si tú haz llegado hasta aquí con esa encrucijada de utilizarlas o no, te tengo una respuesta muy sencilla, utiliza las tablas únicamente para presentar datos que lo ameriten, ya sea un conjunto de listas compuestas por varios datos, información estructurada de manera tabular, y aquella que es obtenida mediante una consulta a una base de datos. Por nada del mundo las utilices para maquetación, para crear headers, o footers, si lo que deseas es estructurar las partes de tu sitio web debes utilizar las capas, representadas por la etiqueta “div”, y verás que con ello reduces el tiempo de carga de tu sitio, así como muchas otras ventajas relacionadas tanto con el hosting, semántica y con el ahorro de tiempo tanto para ti como para el usuario.

    Una vez definido esto, reconoceremos a las capas “div” como las auténticas salvadoras que han venido a aclarar el panorama de la estructuración de nuestros sitios, pero ¿Podemos manejarlas de una mejor manera para optimizar aún más dicha estructura?, por supuesto para ello existen lenguajes como CSS3 que nos vienen a ambientar aún más la fiesta.

    CSS3 o cómo flexibilizar nuestras maquetas
    Desde 2005, año en que vio la luz por primera vez el proyecto de CSS3, se empezaron a desarrollar especificaciones con distintas funciones y tareas adaptables para la estructuración de nuestro sitio web, estilos aplicables a nuestras capas para hacer de estás más flexibles y adaptables al medio donde se desplegará la información.

    Una de estás funcionalidades son las columnas múltiples, las cuales son generadas única y exclusivamente por estilos, sin necesidad de agregar separadores ni mucho menos celdas para desplegar la información en forma de tabloide.

    En la actualidad son poco conocidas y raramente utilizadas, todo esto producido por la falta de soporte en Internet Explorer, ya que sólo son admitidas y desplegadas en los navegadores basados en WebKit y en Mozilla, por lo que si tienen pensado desarrollar un proyecto para todos los navegadores deben considerar crear una versión alterna para aquellos que usen IE8 o inferior.

    Básicamente lo que produciremos al agregar esta propiedad a los elementos de nuestro sitio, es convertir una línea continua o un párrafo grande en varias columnas, tomando como base los atributos “column-count”, “column-gap”, “column-rule” y “column width” para darle la forma deseada.

    Lo primero que debemos hacer es crear nuestra estructura del sitio de la siguiente manera:

    Quote
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Columnas Múltiples con CSS3</title>
    </head>
    <body>
     
    <div id="contenedor">
        <h1>Diario "El Amarillista"</h1>
        <img src="http://www.dirjournal.com/info/images/roswell-crash.jpg" alt="Cae Nave en Kuala Lumpur" />
        <h2>Cae nave espacial en Kuala Lumpur</h2>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a lectus nec felis bibendum bibendum quis nec dolor. Etiam dignissim elit quis leo posuere et viverra mauris tristique. Vestibulum lacinia sapien a purus bibendum iaculis nec vitae sapien. Quisque hendrerit, leo quis pellentesque scelerisque, ipsum ligula luctus purus, ut viverra dolor mi et orci. Donec feugiat cursus consectetur. Nunc scelerisque, nisl sed feugiat faucibus, sem augue dapibus erat, congue lobortis diam dolor ac ligula. Suspendisse fringilla lacus ut mi accumsan quis commodo sapien aliquam. Donec sapien nulla, placerat quis ullamcorper sed, rhoncus non lectus. Ut a dui in magna lacinia mattis ut et leo. Nullam malesuada pellentesque est et dictum. Vivamus ac erat vel augue facilisis rhoncus. Cras quis augue ut purus ullamcorper mollis.
        </p>
    </div>
     
    </body>
    </html>

    Agregamos un gran párrafo con el famoso “Lorem ipsum” para ver como funciona la propiedad, dicho párrafo está dentro de una capa llamada “contenedor” y en base a esto aplicaremos el siguiente estilo a la relación:

    Quote
    #contenedor p {
      -webkit-column-count: 3;
      -webkit-column-gap: 10px;
      -moz-column-count: 3;
      -moz-column-gap: 10px;
      column-count: 3;
      column-gap: 10px;
      }

    Como se puede apreciar escribimos las mismas dos líneas de atributos en tres ocasiones pero con diferentes prefijos, esto lo hacemos para que la función sea compatible con la mayoría de los navegadores, el prefijo “webkit” es para Safari y Chrome, “moz” para Mozilla y los atributos sin prefijo son para aquellos navegadores que así lo requieran.

    El atributo “column-count” sirve para especificar en cuantas columnas queremos que se despliegue la información, en nuestro caso son tres. Por su parte el atributo “column-gap” sirve para establecer el espacio que existirá como separador entre cada columna, a lo que nosotros le damos el valor de 10 píxeles.

    Si deseamos agregar más control sobre el funcionamiento de las columnas podemos utilizar otros dos atributos, “column-width” que nos permite determinar cuanto medirá cada columna y “column-rule” que permite agregar especificaciones a las divisiones entre cada columna, comúnmente usado para establecer un borde (column-rule: solid #000000 1px;).

    Podemos detallar más el estilo de los diferentes elementos del sitio agregando más gama de colores y creando efectos como el difuminado sobre el encabezado; todo lo que creamos necesario para que nuestro sitio luzca de la mejor manera. A nuestra página de ejemplo he decidido agregar lo siguiente:

    Quote
    body{
      background: #282828;
      }
      #contenedor {
      width: 500px;
      margin: auto;
      background: #F0F0F0;
      padding: 10px;
      font: 12px helvetica, arial, sans-serif;
      }
     
      img {
      width: 100%;
      }
      h1{
      color: #303030;
      font-size: 48px;
      text-shadow: 2px 2px 5px #505050;
      }
      #contenedor p {
      -webkit-column-count: 3;
      -webkit-column-gap: 10px;
     
      -moz-column-count: 3;
      -moz-column-gap: 10px;
     
      column-count: 3;
      column-gap: 10px;
      }

    Dicho estilo deberá añadirse a nuestro código con alguno de los dos métodos conocidos, ya sea escribiéndolo directamente dentro de las etiquetas “head” o agregándolo como un archivo externo con extensión “.css”. Cualquiera que sea la manera de hacerlo obtendremos como resultado una página en forma de tabloide en colores grises lista para ser publicada.

    Como pudimos observar es un método bastante sencillo, fácil de aplicar y sobre todo de aprender, no hay necesidad de complicarnos la vida con tablas, ni de utilizar métodos aún más arcaicos como el salto de línea ni los gifs transparentes para separar, con esto nuestro código quedará limpio y claro.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 119 | 12:58 PM
    Animaciones CSS3 avanzadas


    He estado impaciente para darme la libertad de investigar y escribir algo más avanzado utilizando CSS3 y animaciones, ya que el soporte de ciertas propiedades están más extendidas y si las comenzamos a utilizar en nuestros proyectos podemos forzar un poco la adaptación de estos nuevos estándares. Mi idea no es utilizarlas aún al 100%, sino que entregando una alternativa para navegadores menos avanzados en estas propiedades (existen algunos frameworks que lo están permitiendo, ver enlaces al final).

    En este artículo les mostraré un par de propiedades que pueden marcar la diferencia ente lo que pensabas conocer sobre CSS y lo que se pretende sea la capacidad nativa de los browsers de permitirnos interacciones mucho más ricas y lo mejor, y más rápidas.

  • He intentado sin buenos frutos hacer andar por lo menos un par de ejemplos en IE9 y no hay caso, seguiré investigando.


    La propiedad transition-duration define el tiempo de duración total de una transición de un estado A a uno B, sea el que sea el estilo que estamos dando.
    Ya la propiedad transition-timing-function define el rango el cual la transición ocurre, lo que puede incluir aceleraciones o desaceleraciones. Básicamente, describe cómo la animación ocurre durante el tiempo definido en transition-duration.

    En el siguiente ejemplo las 3 cajas tienen la misma transformación, pero usan diferentes valores para transition-timing-function:

    Ver ejemplo 1

    En el siguiente ejemplo, haremos intervalos de medio segundo (0.5s) en la ejecución de un estilo a través de la propiedad transition-duration:

    Ver ejemplo 2




    Este tipo de propiedades aún tienen un soporte limitado (browsers Webkit principalmente, incluyendo móviles) pero se espera que pronto se amplíe (por eso me doy el tiempo de considerarlo en este artículo). El principio básico es el keyframeb, y si has usado Flash u otra herramienta de animación (Live Motion, After Effects) comprenderás este concepto:

    Un keyframe define el estilo que será aplicado en ese momento dentro de un lapso de animación. El motor de animación del browser interpolará los estilos definidos entre esos keyframes.

    Veamos un ejemplo: comenzamos por definir una rotación, dándole un nombre y un comportamiento:

    Quote
    @-webkit-keyframes girando {
    from { -webkit-transform: rotateY(0deg); }
    to { -webkit-transform: rotateY(-360deg); }
    }


    Acabamos de crear un comportamiento para un keyframe y lo llamamos girando. La animación se moverá y rotará en relación al contenedor que determinemos ahora:

    Quote
    #contenedor {
    margin: 30px auto;
    -webkit-perspective: 600px;
    }


    Con -webkit-perspective definimos el movimiento del elemento en 3D en el eje Z (creando el efecto de profundidad), el que no puede ser definido antes con el simple CSS2 (ya que es sólo 2D).

    Ahora integramos el keyframe con el contenedor, además de agregar el tiempo de duración de la animación:

    Quote
    #girando {
    -webkit-animation-name: girando;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 3s;
    -webkit-transform-style: preserve-3d;
    }


    Ver ejemplo 3



    Para girar un grupo de elementos que se posicionan dentro de otro, debemos posicionar estos elementos de manera absoluta y girar cada uno en grados según la cantidad de elementos que sean. La magia no sólo está en estas nuevas propiedades que entrega Webkit, sino que además en las que CSS3 trae como box-shadow, rgba y text-shadow:

    Ver ejemplo 4



    Interesante es lo que puedes lograr agregando la propiedad:

    Quote
    -webkit-backface-visibility: hidden;


    Donde se oculta la cara del elemento que está al contrario dado el efecto 3D; con esto podemos disminuir la carga del procesador del computador al renderizar esta parte del elemento HTML:

    Ver ejemplo 4.1

    Cambiamos un poco el código para poder hacer rotar un cubo; verás que los únicos cambios han sido meramente estéticos y de rotación del elemento con translateZ(90px). Además, agregamos la animación por lapsus de tiempo, con la cual podremos hacer pausas y definir cuánto y qué cosas se moverán en tales instantes:

    Quote
    @-webkit-keyframes girando {
    from,20% { -webkit-transform: rotateY(0deg); }
    30%,40% { -webkit-transform: rotateY(90deg); }
    50%,60% { -webkit-transform: rotateY(180deg); }
    70%,80% { -webkit-transform: rotateY(270deg); }
    90%,to { -webkit-transform: rotateY(360deg); }
    }


    Ver ejemplo 5



    Y para el final, una integración del cubo rotundo anterior con vídeos a través de HTML5, en los que puedes ver tienen una gran performance ya que son propiedades nativas (Chrome / Safari):

    Ver ejemplo 6

    Siento que estamos presenciando un cambio en el paradigma donde la capa de presentación se está uniendo con la de interacción o lo que es mejor, una redefinición de desarrollo front-end. Si no te has aventurado en el código fuente, es mejor apurarte ya que la máquina está a toda velocidad.



    Siento que estamos presenciando un cambio en el paradigma donde la capa de presentación se está uniendo con la de interacción o lo que es mejor, una redefinición de desarrollo front-end. Si no te has aventurado en el código fuente, es mejor apurarte ya que la máquina está a toda velocidad.
    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
  • GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 120 | 3:45 PM
    Sombras y dimensiones con CSS3 – box-shadow


    El agregar efectos de sombra ha sido uno de los trucos más recurridos para realzar las imágenes que desplegamos en nuestros sitios Web. Desde que el uso de Photoshop y otros programas de edición ha venido a la alza, este efecto se ha practicado cotidianamente como parte de un ritual de estilización proporcionada por los diseñadores gráficos.

    En la actualidad ya no es requerido el llevar un tutorial completo sobre edición de imágenes para poder aplicar esta clase de efectos, ya que CSS nos permite utilizarlos aún sin tener conocimientos previos de diseño, facilitando las cosas a los programadores que nos hemos enfocado más en el funcionamiento de los sitios y que ahora podemos tener un mejor trato del entorno visual.

    Box-shadow de CSS3
    Box-shadow es una propiedad CSS3 que permite a los diseñadores y desarrolladores implementar fácilmente sombras sobre cualquier elemento de tipo capa. Con esta propiedad podemos especificar las propiedades de la sombra que queremos desplegar proporcionando valores de tamaño, color, offset, y el desenfoque deseado.

    Al agregar una sombra creamos un efecto de dimensión y cambia la perspectiva de la imagen, al realizar esto con CSS nos ahorramos el hecho de tener una imagen con cada efecto ya aplicado, simplemente basta con tener la imagen base a la cual podemos añadirle y quitarle efectos mediante propiedades como la ya mencionada.
    En este artículo nos enfocaremos a dar un efecto de sombra base para después crear una sombra que de dimensión para darle vida a nuestra imagen plana.

    Aplicando la propiedad CSS3 box-shadow

    La imagen
    Lo primero que necesitamos para llevar a cabo esta práctica es una imagen plana que no tenga ningún tipo de borde ni efecto añadido, de tal manera que podamos aplicar nuestros propios bordes con CSS sin que haya conflicto con la imagen base.



    Dicha imagen será colocada dentro de un elemento div, al cual posteriormente le vamos a aplicar los estilos CSS necesarios para lograr el efecto.

    Code
    <div id="contenedorImg">
         <img src="imagenPlana.png" />
    </div>


    Añadiendo el borde
    Después de definir la imagen pasamos a añadir la clase base “box-shadow”, la cual nos proporcionará un tipo de borde difuminado alrededor de la imagen que produce el efecto tridimensional que buscamos. Como buena propiedad CSS, el efecto producido por “box-shadow” puede ser modificado y alterado, podemos ajustar su tamaño añadiendo píxeles en las propiedades de los elementos.

    Nuestro CSS quedaría definido de la siguiente manera:

    Code
    .sombra-borde {
         width: 600px;
         -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);
    }


    Y al aplicarlo a nuestro HTML obtendríamos una imagen así:



    Sombra profunda
    Después de tener listo la aplicación de la sombra a la caja contenedora, continuamos con la creación de una clase de estilo que agregue un efecto sombra profunda para nuestra imagen. Esta sombra nos dará una sensación de mayor profundidad y para ello definimos un código CSS como el siguiente, entorno al elemento “div” que contiene la imagen:

    Code
    .sombra-profunda:after {
         -moz-transform: skew(-40deg);
         -webkit-transform: skew(-40deg);
         -moz-box-shadow:  70px 0 10px 40px rgba(0,0,0,.2);
         -webkit-box-shadow:  70px 0 10px 40px rgba(0,0,0,.2);
         box-shadow: 70px 0 10px 40px rgba(0, 0, 0, 0.2);
         content: "";
         height: 40px;
         left: 0;
         position: absolute;
         top: 360px;
         width: 550px;
    }


    Con este código la sombra queda sobre la imagen, pero esto lo vamos a corregir en el siguiente paso.

    Ajustar el orden del índice Z (z-index)
    Por último, cambiamos el orden del índice Z de nuestra sombra, dicho índice indica el orden en que se mostrarán los elementos en el sitio, con ello se evita el empalmar elementos sobre otros más importantes, en este caso lo utilizamos para lograr el efecto de profundidad necesario y evitar que la sombra quede en el primer marco del sitio.

    Al darle un valor de “-1″ a la propiedad “z-index” logramos pasar la sombra al fondo y con esto completar el marco visual que estamos buscando.

    Code
    z-index: -1;




    Como se puede apreciar en la imagen final, hemos logrado transformar lo plano en algo tridimensional y sólo con unos cuantos pasos sencillos. Basta con aplicar al “div” contenedor de la imagen las clases que creamos en este artículo, para así poder observar los resultados.

    Code
    <div id="contenedorImg" class="sombra-borde sombra-profunda">
         <img src="imagenPlana.png" />
    </div>


    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 8 de 13«126789101213»
    Búscar: