Pués si, CSSWarp es una locura. A alguien se le ocurrió crear un sitio donde uno escribe un texto, define ciertas opciones, juguetea con los parámetros y el resultado es un HTML con ese texto siguiendo la forma de la curva que hayamos usado.
Como usa propiedades CSS3, no funcionará en versiones de Internet Explorer inferiores a la 9 pero no importa; sigue siendo increible.
Quien quiera usarlo en su propia web, lo que debe hacer es generar el texto y obtener el código. De este, sólo debe copiarse desde <style type='text/css'> hasta </style> y desde <div id='warped'> hasta </div>. Y por supuesto, si se desea, pueden hacerse ajustes editando las reglas de estilo.
JugandoconCSS3:Laslocurasquesevenenlaweb.
Quienes no posean un navegador que interprete CSS3, pueden ver el resultado haciendo click en esta imagen o este video explicativo.
Usar posiciones absolutas para ubicar un elemento de manera precisa en una página web es uno de los métodos más cómodos porque requiere propiedades que cualquier navegador entiende y nos evita agregar márgenes, paddings y flotaciones que siempre perturban ya que afectan al resto de las etiquetas.
Es sencillo, basta agregarle a ese elemento la propiedad position:absolute y luego, establecer los valores de top, right, bottom y/o left teniendo en cuenta que:
top:0; left:0; es el ángulo superior izquierdo top:0; right:0; es el ángulo superior derecho bottom:0; left:0; es el ángulo inferior izquierdo bottom:0; right:0; es el ángulo inferior derecho
o sea, los cuatro extremos de ... ¿qué? Esa es la clave; tener la respuesta es lo que evita los problemas.
Las posiciones absolutas no son absolutas en abstracto, lo son, con respecto a algo: a un contenedor. Toda etiqueta está dentro de un contenedor, es decir, dentro de otra etiqueta; por ejemplo, esta imagen está dentro de una etiqueta DIV (su contenedor) que a su vez, está dentro de un DIV que es el contenedor de ambas, que está dentro de otro DIV que es el contenedor de las tres . Yendo "hacia atrás" o "hacia arriba" el contenedor padre sería el mismo BODY:
Eso no depende de las propiedades de la imagen sino de las propiedades de su contenedor ya que es este el que define cuáles son los "límites" del rectángulo, cuáles son las coordenadas 0:0 y lo elemental es que definamos eso agregándole a ese contenedor, la propiedad position:relative.
Si el primer DIV tiene esa propiedad, se verá así:
position:relative
Y si el segundo DIV tiene esa propiedad, se verá así:
position:relative
Y si el tercer DIV tiene esa propiedad, se verá así:
position:relative
Los valores de top, right, bottom y left también pueden ser negativos y eso, hará que el elemento se "salga" de su contenedor:
El avatar de los comentarios es algo sobre lo que siempre hay preguntas ¿cómo moverrlo? ¿cómo separarlo del nombre del autor? ¿cómo alinear ese nombre verticalmente?
El problema básico es que para mostrar los comentarios, Blogger utiliza etiquetas que usualmente no usamos (DL DT DD) y además, establece una serie de propiedades por defecto para cada una de ellas y sus contenidos. Ese codigo, lo podemos ver si expandimos la plantilla y buscamos el includable llamado comments; allí dentro, nos encontraremos con muchas cosas pero, si vamos hacia abajo, veremos los tres sectores en que están divididos; esto, es similar en cualquier plantilla, sea normal o de nuevo estilo:
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
.......
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
....... el avatar y el nombre del autor .......
</dt>
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
....... el texto del comentario .......
<dd class='comment-footer'>
....... la fecha del comentario y los íconos de edición .......
</dd>
.......
</dl>
Y estas son las propiedades por defecto que añade Blogger:
Nullam sed vulputate diam. Suspendisse cursus ligula non ligula euismod adipiscing. In id erat nec elit bibendum adipiscing? Nullam vel mi quis est hendrerit convallis? Etiam feugiat sodales malesuada. Aenean non ipsum leo.
Para poder personalizarlo, una alternativa simple es sobrescribir algunas de esas reglas de estilo por defecto que son las que hacen que se vea como si tuviera dos columnas, una a la izquierda con el avatar y otra a la derecha con el resto. Por ejemplo, podemos agregar esto:
Nullam sed vulputate diam. Suspendisse cursus ligula non ligula euismod adipiscing. In id erat nec elit bibendum adipiscing? Nullam vel mi quis est hendrerit convallis? Etiam feugiat sodales malesuada. Aenean non ipsum leo.
Ahora, debemos entender qué dice el código y porqué debemos seguir agregando cosas para posicionar el texto del autor. Esa parte es la que está en la etiqueta DT:
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<!-- por defecto, la imagen será un icóno que dependerá de la forma del ingreso (Blogger, OpenId, Anónimo) -->
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<!-- sólo se muestra el avatares si están habilitados -->
<b:if cond='data:blog.enabledCommentProfileImages'>
<!-- esta es la imagen del avatar -->
<!-- Blogger agregará un DIV con la clase avatar-image-container -->
<data:comment.authorAvatarImage/>
</b:if>
<!-- dependiendo del acceso, el nombre es un enlace o no -->
<b:if cond='data:comment.authorUrl'>
<!-- el nombre es un enlace -->
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<!-- el nombre no es un enlace -->
<data:comment.author/>
</b:if>
<!-- el texto que sigue al nombre (dijo ...) -->
<data:commentPostedByMsg/>
</dt>
Para centrar el texto verticalmente, podemos establecer las propiedades de DT, dándole a height y a line-height, la misma altura que la imagen (en este caso 35 pixeles más dos porque tiene un borde):
Si además, queremos que ese texto del autor se separe o agregarle alguna clase de personalización, dado que este y la imagen misma pueden ser enlaces, lo mejor es que los diferenciemos nosotros, envolviendo el nombre en algún SPAN que podamos identificar:
Nullam sed vulputate diam. Suspendisse cursus ligula non ligula euismod adipiscing. In id erat nec elit bibendum adipiscing? Nullam vel mi quis est hendrerit convallis? Etiam feugiat sodales malesuada. Aenean non ipsum leo.
Una de las características más interesantes del diseño web es que uno no debe preocuparse por conocer previamente la dimensión de los elementos que vamos agregando. Sin embargo, algunas veces, esa ventaja se vuelve un problema si no tenemos en cuenta que si el contenido es más grande que el contenedor puede desbordarse y ocupar espacios indeseados.
Una ventana modal no es otra cosa que un contenedor HTML como cualquier otro que tiene una característica básica, permanecer oculta hasta que se hace click en algún botón. En principio, nada en particular y podrían diseñarse cientos de modelos gráficos pero digamos que lo más usual es que al abrirse, la pantalla se oscurece y sobre la página se muestra un elemento con cierto contenido que luego, podemos cerrar.
No me canso de repetir lo mismo porque es la clave para entender cómo funciona una página web: todas las etiquetas son rectángulos y todo su contenido esta en alguna etiqueta lo sepamos o no lo sepamos, lo hayamos indicado o no.
Esto es algo sencillo de comprobar, basta aplicar alguna propiedad CSS a todas las etiquetas de cierta clase para verlo; por ejemplo, si le agregamos un borde rojo con outline:
No importa cuáles sean ni importa si las dimensionamos o no, tampoco importa si definimos estilos, siempre serán rectángulos que se a acomodan solos de acuerdo a dos reglas, las etiquetas de tipo bloque se ubican una debajo de la otra (por ejemplo: DIV o P) y las de tipo inline, una al ado de la otra (por ejemplo A o SPAN). Esta es la forma "natural" con que se va armando la página; cada rectángulo se ubica según esas reglas, de arriba hacia abajo y de izquierda a derecha.
El CSS nos permite (y a veces obliga) cambiar ese orden natural, estableciendo propiedades espaciales. Una de las más simples de usar es tratar de romper la ley que dice que jamás, dos etiquetas, ocupan el mismo lugar es decir, que una esté encima de la otra ocupando el mismo espacio.
Suponiendo que dentro de un DIV contenedor al que dimensiono con height y width, coloco otros dos del mismo tamaño, lo que veré es uno debajo del otro:
<div>
<div> ....... el contenido superior ....... </div>
<div> ....... el contenido inferior ....... </div>
</div>
Vestibulum in ipsum quis diam convallis accumsan et sit amet eros.
abajo
Si invertimos el orden, pasará lo mismo; el que esté primero se verá arriba y el otro abajo:
arriba
Vestibulum in ipsum quis diam convallis accumsan et sit amet eros.
Superponer ambos es algo bastante simple, lo fundamental es que al contenedor le agreguemos la propiedad position: relative y a los contenidos la propiedad position: absolute con valores cero en left y top:
Puestos de este modo, los forzamos a que ocupen el mismo espacio pero claro, sólo veremos uno de ellos, el último. Parece tonto sin embargo, eso es justamente lo que necesitamos para crear efectos y permutar entre el de abajo y el de arriba cuando ponemos el puntero del ratón encima.
Ese tipo de efecto se puede hacer de muchas maneras, por ejemplo, permutando la opacidad:
Vestibulum in ipsum quis diam convallis accumsan et sit amet eros.
abajo
Usamos z-index para invertir el orden natural (para que por defecto se vea el de arriba) pero podemos hacer lo contrario, mostrar por defecto el de abajo y así, no necesitamos establecer el valor de z-index:
<div class="demos">
<div> ....... el contenido oculto ....... </div>
<div class="elvisible"> ....... el contenido visible ....... </div>
</div>
arriba
Vestibulum in ipsum quis diam convallis accumsan et sit amet eros.
En estos ejemplo, tambien se aplica una transición que indicamos en el DIV visible por defecto:
Nacido en el tercer mundo. Un santo varón. Buenos Aires. Los elefantes. Las golondrinas de Plaza de Mayo. Me chupo el dedo.
El tiempo es veloz. ¿No ves que ya no somos chiquitos? Despedida de la infancia. Todo es efímero. Juguetes perdidos. Dime quién me lo robó. Aprendizaje.
Soy un hippie. Rutas argentinas. Sobredosis de TV. Raros peinados nuevos. Más de cien mentiras. Delirium tremens.
Ciudad de pobres corazones. El karma de vivir al sur. Mundo de quimeras. Oh Dios, ¿Qué puedo hacer?
Cuando era más joven. Los mayores del mundo. Botas locas. Rejas electrificadas. Cerca de la revolución. Contra todos los males de este mundo. La casa desaparecida. Tumbas de la gloria. Vencedores vencidos. Carguen, apunten, fuego. Estás frito angelito. A lo mejor aún te acuerdas.
Ah, te vi entre las luces. Muchacha. Amor se llama el juego. Juego de seducción. Mi genio amor. Prométeme que nunca me dirás adiós. Pequeñas delicias de la vida conyugal. Toda la vida tiene música hoy. Es hora de levantare, querido (dormiste bien?).
Resumiendo.
Mi sueño de hoy. La sed verdadera. La búsqueda de la estrella. Todos juntos. ¡Ah! Basta de pensar.
Quienes no posean un navegador que interprete CSS3, pueden ver el resultado haciendo click en esta imagen o este video explicativo.
Vestibulum in ipsum quis diam convallis accumsan et sit amet eros.
Nullam sed vulputate diam. Suspendisse cursus ligula non ligula euismod adipiscing. In id erat nec elit bibendum adipiscing? Nullam vel mi quis est hendrerit convallis? Etiam feugiat sodales malesuada. Aenean non ipsum leo.