JMiur [E]

No es algo que uno vaya a utilizar mucho pero, de todas formas esto es una curiosidad interesante.

Cada etiqueta que colocamos es un rectángulo, siempre es así, incluso si usamos algún tipo de imagen transparente que aparenta otra forma, en realidad, sigue siendo un rectángulo. Eso, es algo fácil de comprobar cuando son enlaces, el área donde podemos hacer click, excede el supuesto tamaño y si le agregamos un borde, lo veremos con claridad. No hay nada que hacer al respecto, incluso, si usamos CSS para "rotar" algo, el rectángulo sigue siendo un rectángulo:




En Impressive Webs se les ha ocurrido una forma de eludir esta restricción y crear un enlace que no sea rectangular sino que tenga la forma de un triángulo y como demostración, lo aplican en un ángulo de la página, algo similar a lo que se hace con efectos como los llamados Page Peel pero claro, mucho más elemental.

La idea es sencilla aunque tiene sus bemoles para compatibilizarla con Internet Explorer ya que allí hay que agregar algún hack para posicionarlo correctamente dado que la forma de "medir" las cosas es diferente.

El HTML es "normal", un DIV contenedor donde colocamos el enlace y el contenido:
<div class="contenedor">
<a id="corner" href="la_URL" > el enlace </a>
... cualquier otro contenido ...
<div>
Para que esto funcione, el DIV contenedor debe tener algunas propiedades establecidas de manera obligatoria y el resto es personalizable; y claro, la clave está en las propiedades del enlace, estas son las del ejemplo:
<style>
.contenedor {
/* propiedades obligatorias */
overflow: hidden;
position: relative;
/* propiedades optativas */
border-radius: 0 0 0 20px;
background-color: #202931;
border-bottom: 5px solid #404951;
border-left: 5px solid #404951;
color: #FFF;
margin: 0 auto;
padding: 30px;
width: 470px;
}
#corner {
/* lo dimensionamos y lo posicionamos de manera absoluta */
display: block;
height: 100px;
position: absolute;
width: 100px;
/* lo rotamos */
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476);
/* la posición del triangulo*/
top:-50px;
right:-50px;
/* otras propeidades optativas */
background-color: #A00;
box-shadow: 0px 0px 50px #000 inset;
}
</style>
<!-- la posición de ese mismo triángulo en Internet Explorer -->
<!--[if IE]>
<style>
#corner-ad {right: -30px; top: -70px;}
</style>
<![endif]-->

Donec ullamcorper bibendum viverra. Ut semper semper quam eget ornare. Phasellus eleifend, nisl ut malesuada dignissim, purus quam fermentum neque, sit amet tristique odio purus ac ligula. Nunc tristique, massa et aliquam laoreet, metus dolor euismod metus, vitae aliquet leo arcu id elit.

Cras at iaculis nisi! Vestibulum ac est risus, eu venenatis mi. Nunc felis odio, sagittis vitae ultrices vel, pellentesque eu tortor. Morbi vestibulum nulla ac turpis ullamcorper lacinia. Duis quis ipsum orci, dignissim pellentesque lectus. Suspendisse vitae augue eu orci lacinia sollicitudin. Etiam nunc turpis, lacinia nec fringilla ac, ultrices nec velit! Sed tristique convallis malesuada.

4 comentarios:

Unknown  

¡Hola, JMiur!
Siempre interesante y bien explicado.
¿El sombreado de los triángulos lo da ese
"-moz-box-shadow: 0px 0px 50px #000 inset;
-webkit-box-shadow: 0px 0px 50px #000 inset;
box-shadow: 0px 0px 50px #000 inset;"?
Es decir, ¿se puede tener sectores sombreados del blog sin necesidad de hacerlo mediante imágenes alojadas? Por ejemplo, esas barras de tu sidebar, que van de gris claro a negro, se pueden conseguir mediante este método?
Seguramente mis preguntas son muy torpes y me disculpo, pero recordá que soy bastante nuevo en esto.
Saludos, y muchas gracias.

Responder
Bani pe net  

Hola amigo tengo un problema y por favor si puedes decirme como solucionarla; hay algun "codigo al pasar el raton por unos texto (lincks) que saga unas imagenes" hay un exemplo en esta pagina http://www.graines-bocquet.fr/graine/9/GRAINES-DE-LEGUMES,-SEMENCES-POTAGERES

Muchas gracias de antemano.

Responder
JMiur  

Daniel Paredes:
Si. El sombreado se hace con box-shadow; no hace falta usar prefijos ya que es una propiedad que entienden todos los navegadores IE9 incluido.

Constantin:
Hay muchas formas de hacer ese tip ode cosas, no hay una sola respuesta. Debes buscar scripts que queneren tooltips o algo semejante.

Responder
jose  

chamo eres el papa del css :P

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR