// API callback
leerpostetiquetas({"version":"1.0","encoding":"UTF-8","feed":{"xmlns":"http://www.w3.org/2005/Atom","xmlns$openSearch":"http://a9.com/-/spec/opensearchrss/1.0/","xmlns$blogger":"http://schemas.google.com/blogger/2008","xmlns$georss":"http://www.georss.org/georss","xmlns$gd":"http://schemas.google.com/g/2005","xmlns$thr":"http://purl.org/syndication/thread/1.0","id":{"$t":"tag:blogger.com,1999:blog-33571139"},"updated":{"$t":"2023-11-19T03:42:25.111-03:00"},"category":[{"term":"Blogger"},{"term":"CSS"},{"term":"herramientas"},{"term":"JavaScript"},{"term":"servicios"},{"term":"Google"},{"term":"curiosidades"},{"term":"humor"},{"term":"HTML"},{"term":"blogs"},{"term":"Firefox"},{"term":"personal"},{"term":"iconos"},{"term":"wallpapers"},{"term":"YouTube"},{"term":"campañas"},{"term":"JQuery"},{"term":"beatlemania"},{"term":"imagenes"},{"term":"json"},{"term":"Twitter"},{"term":"animacion"},{"term":"opiniones"},{"term":"musica"},{"term":"historias"},{"term":"Scriptaculous"},{"term":"copyright"},{"term":"Facebook"},{"term":"plantillas"},{"term":"publicidades"},{"term":"Feedburner"},{"term":"juegos"},{"term":"meme"},{"term":"indice"}],"title":{"type":"text","$t":"Vagabundia"},"subtitle":{"type":"html","$t":"Algo más y algo menos."},"link":[{"rel":"http://schemas.google.com/g/2005#feed","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/posts\/default"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/-\/CSS?alt=json-in-script\u0026max-results=100"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/search\/label\/CSS"},{"rel":"hub","href":"http://pubsubhubbub.appspot.com/"},{"rel":"next","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/-\/CSS\/-\/CSS?alt=json-in-script\u0026start-index=101\u0026max-results=100"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"generator":{"version":"7.00","uri":"http://www.blogger.com","$t":"Blogger"},"openSearch$totalResults":{"$t":"348"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"100"},"entry":[{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-1168434091904010837"},"published":{"$t":"2013-04-24T03:57:00.000-03:00"},"updated":{"$t":"2013-04-24T15:19:15.729-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"El futuro y la propiedad @supports"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003E\u003Cimg class=\"izquierda\" src=\"http:\/\/4.bp.blogspot.com\/-QLmX2LwzWVM\/UM1ve0cdXGI\/AAAAAAAAVqY\/4aZFdqCJiQE\/s150\/support.png\" \/\u003EAsí como hace más de dos años, se mostraba el uso de una propiedad de CSS3 llamada \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2010\/07\/usar-media-para-detectar-la-resolucion.html\" target=\"_blank\"\u003E@media\u003C\/a\u003E que permite especificar las propiedades que tendrá nuestro sitio según sea el medio en el cual se mostrará y hoy se va generalizado a partir de la intención de muchos desarrolladores de tener diseños adaptables; esta otra, llamada \u003Ca rel=\"nofollow\" href=\"http:\/\/dev.w3.org\/csswg\/css3-conditional\/#at-supports\" target=\"_blank\"\u003E@supports\u003C\/a\u003E, es probable que pronto se convierta en una de esas cosas imprescindibles.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nPor ahora, su uso práctico es limitado o nulo ya que sólo está soportado por Opera 12 y Firefox 17 e incluso en este último, sólo funciona si se coloca en \u003Cb\u003ETRUE\u003C\/b\u003E el valor \u003Cb\u003Elayout.css.supports-rule.enable\u003C\/b\u003E en la configuración del navegador (about:config) pero, se espera que pronto sea algo corriente y Chrome dice que lo implementará a partir de la versión 24.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n¿Para qué serviría esto? Para algo que el CSS aun es incapaz de manejar, detectar el navegador que se está utilizando de tal forma de poder condicionar el uso de determinadas reglas o propiedades.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nLa sintaxis sería.\u003C\/div\u003E\u003Cpre\u003E@supports una_condición {\n  \/* y aquí las reglas de estilo si la condición se cumple *\/\n}\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EPor ejemplo, supongamos que quiero que una etiqueta tenga una animación que use \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2011\/12\/transiciones-y-animaciones.html\" target=\"_blank\"\u003E@keyframes\u003C\/a\u003E sólo si estas son soportadas y, caso contrario que no se vean:\u003C\/div\u003E\u003Cpre\u003E#mi_animacion {display:none;} \/* por defecto no lo muestro *\/\n@supports (animation-name: un_ejemplo) {\n  \/* y sólo se verá si el navegador soporta animaciones *\/\n  @keyframes un_ejemplo  {\n    from {background-color:#000;border: 0px solid #444;} \n    to {background-color:#F00;border: 15px solid #FF0;}\n  }\n  #mi_animacion {\n    display:block;}\n    animation: un_ejemplo 1s infinite alternate;\n  }\n}\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EEn ese caso, sólo hay una condición pero puede haber varias y combinarse con \u003Cb\u003EOR\u003C\/b\u003E y \u003Cb\u003EAND\u003C\/b\u003E:\u003C\/div\u003E\u003Cpre\u003E@supports (animation-name: un_ejemplo) or (-webkit-animation-name: un_ejemplo) {\n  \/* las reglas se aplicarían en cualquiera de los dos casos *\/\n}\n\n@supports (animation-name: un_ejemplo) and (box-shadow: 1px 1px 5px #FFF) {\n  \/* las reglas se aplicarían si ambas propiedades son reconocidas por el navegador *\/\n}\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EO incluso, puede usarse el \u003Cb\u003ENOT\u003C\/b\u003E para hacer lo contrario:\u003C\/div\u003E\u003Cpre\u003E@supports not (display: flexbox) {\n  \/* estas reglas se aplicarían si la propeidad no es reconocida por el navegador *\/\n}\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ESi bien la condición debe tener un valor, este puede ser cualquiera y no es necesario que se utilice en las reglas de la condición así que, por ejemplo, esto sería válido (inútil pero válido):\u003C\/div\u003E\u003Cpre\u003E@supports (background: red) {\n  body {background: white;}\n}\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ESí, ya sé, no tiene utilidad pero ... el tiempo pasa volando.\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/1168434091904010837\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2013\/04\/el-futuro-y-la-propiedad-supports.html#comment-form","title":"11 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/1168434091904010837"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/1168434091904010837"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2013\/04\/el-futuro-y-la-propiedad-supports.html","title":"El futuro y la propiedad @supports"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/-QLmX2LwzWVM\/UM1ve0cdXGI\/AAAAAAAAVqY\/4aZFdqCJiQE\/s72-c\/support.png","height":"72","width":"72"},"thr$total":{"$t":"11"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-8038075849270873473"},"published":{"$t":"2013-03-20T15:00:00.000-03:00"},"updated":{"$t":"2013-03-20T15:17:17.309-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Efecto hover desde distintas direcciones"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EAunque me ha costado armarlo para que funcionara acá porque hay cosas que no termino de entender bien, la idea de crear efectos \u003Ci\u003Ehover\u003C\/i\u003E que muestren contenidos distintos según sea la dirección desde la cual se entra con el cursor, no deja de ser interesante.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nLo básico es empezar con el HTML que no es otra cosa que un DIV donde incluimos cuatro etiquetas SPAN con los textos y una imagen.\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div class=multi-hover\u0026gt;\n  \u0026lt;span\u0026gt;hover desde la derecha\u0026lt;\/span\u0026gt;\n  \u0026lt;span\u0026gt;hover desde arriba\u0026lt;\/span\u0026gt;\n  \u0026lt;span\u0026gt;hover desde la izquierda\u0026lt;\/span\u0026gt;\n  \u0026lt;span\u0026gt;hover desde abajo\u0026lt;\/span\u0026gt;\n  \u0026lt;img src=\"https:\/\/lh5.googleusercontent.com\/-RAUoNEersrc\/UGt18u6HXyI\/AAAAAAAACwo\/QWa2I1zG7Y0\/s400\/24_0144.jpg\"\u0026gt;\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ESi se usa en una entrada de Blogger, habrá que tener en cuenta que todo debe ser escrito en una sola línea para evitar los saltos (etiquetas BR) que se agregan por defecto.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEl resultado sería esto:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003Ediv.multi-hover {height: 358px;overflow: hidden;position: relative;width: 100%;vertical-align: middle;line-height: 358px;} div.multi-hover img {width: 100%;}\ndiv.multi-hover span {color: #FFF;font-size: 32px;height: 100%;opacity: 0;position: absolute;text-align: center;-moz-transition: all 0.3s linear 0s;-webkit-transition: all 0.3s linear 0s;-o-transition: all 0.3s linear 0s;-ms-transition: all 0.3s linear 0s;transition: all 0.3s linear 0s;width: 100%;} div.multi-hover span:nth-child(1) {background: none repeat scroll 0 0 rgba(216, 38, 38, 0.6);left: 90%;top: 0;} div.multi-hover span:nth-child(2) {background: none repeat scroll 0 0 rgba(127, 216, 38, 0.6);left: 0;top: -80%;} div.multi-hover span:nth-child(3) {background: none repeat scroll 0 0 rgba(38, 216, 216, 0.6);left: -90%;top: 0;} div.multi-hover span:nth-child(4) {background: none repeat scroll 0 0 rgba(127, 38, 216, 0.6);left: 0;top: 80%;} div.multi-hover span:hover {opacity: 1;} div.multi-hover span:nth-child(2n+1):hover {left: 0;} div.multi-hover span:nth-child(2n):hover {top: 0;}\u003C\/style\u003E\u003Cdiv class=multi-hover\u003E\u003Cspan\u003Ehover desde la derecha\u003C\/span\u003E\u003Cspan\u003Ehover desde arriba\u003C\/span\u003E\u003Cspan\u003Ehover desde la izquierda\u003C\/span\u003E\u003Cspan\u003Ehover desde abajo\u003C\/span\u003E\u003Cimg src=\"https:\/\/lh5.googleusercontent.com\/-RAUoNEersrc\/UGt18u6HXyI\/AAAAAAAACwo\/QWa2I1zG7Y0\/s400\/24_0144.jpg\"\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EY el CSS:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;style\u0026gt;\n\n  \/* el contenedor y la imagen *\/\n  div.multi-hover {\n    overflow: hidden;\n    position: relative;\n    vertical-align: middle;\n    width: 100%;\n    \/* tuve que establecer la altura para que los textos se centraran verticalmente *\/\n    height: 358px;\n    line-height: 358px;\n  }\n  div.multi-hover img {width: 100%;}\n\n  \/* los textos que, por defecto, permanecerán ocultos *\/ \n  div.multi-hover span {\n    color: #FFF;\n    font-size: 32px;\n    height: 100%;\n    opacity: 0; \n    position: absolute;\n    text-align: center;\n    transition: all 0.3s linear 0s; \/* agregar los prefijos para cada navegador *\/\n    width: 100%;\n  }\n\n  \/* y esto es lo que generará el efecto *\/\n\n  div.multi-hover span:nth-child(1) { \/* desde la derecha *\/\n    background: none repeat scroll 0 0 rgba(216, 38, 38, 0.6);\n    left: 90%;\n    top: 0;\n  }\n  div.multi-hover span:nth-child(2) { \/* desde arriba *\/\n    background: none repeat scroll 0 0 rgba(127, 216, 38, 0.6);\n    left: 0;\n    top: -80%;\n  }\n  div.multi-hover span:nth-child(3) { \/* desde la izquierda *\/\n    background: none repeat scroll 0 0 rgba(38, 216, 216, 0.6);\n    left: -90%;\n    top: 0;\n  }\n  div.multi-hover span:nth-child(4) { \/* desde abajo *\/\n    background: none repeat scroll 0 0 rgba(127, 38, 216, 0.6);\n    left: 0;\n    top: 80%;\n  }\n\n  \/* los hacemos visibles ... *\/\n  div.multi-hover span:hover {opacity: 1;}\n\n  \/* ... moviéndolos horizontalmente ... *\/\n  div.multi-hover span:nth-child(2n+1):hover {left: 0;}\n  \/* ... o verticalmente ... *\/\n  div.multi-hover span:nth-child(2n):hover {top: 0;}\n\n\u0026lt;\/style\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EPara probar si los valors que colocamos son correctos, lo que conviene es poner opacity: 1; en la regla div.multi-hover span {} y ver el resultado. En este caso, debería verse algo así:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Cimg src=\"http:\/\/1.bp.blogspot.com\/-QXOv7rxMO4g\/URVSvLCtUNI\/AAAAAAAAWF0\/WPlDJmT0CSA\/s0\/multihover.png\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EAl dejarlos \"visibles\", podemos ver como los SPAN se superponen un poco en la imagen que es, justamente, la forma en que serán detectados por el \u003Ci\u003Ehover.\u003C\/i\u003E De ese modo, una vez que los hayamos ubicado, tenemos listo el efecto y podemos ocultarlos definitivamente.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"referenciaExterna\"\u003E\u003Cspan\u003EREFERENCIAS:\u003C\/span\u003E\u003Ca href=\"http:\/\/demosthenes.info\/blog\/639\/Hover-Effect-on-Images-From-Different-Directions-Using-Pure-CSS\" target=\"_blank\"\u003Edemosthenes.info\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/8038075849270873473\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2013\/03\/efecto-hover-desde-distintas-direcciones.html#comment-form","title":"12 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/8038075849270873473"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/8038075849270873473"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2013\/03\/efecto-hover-desde-distintas-direcciones.html","title":"Efecto hover desde distintas direcciones"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/lh5.googleusercontent.com\/-RAUoNEersrc\/UGt18u6HXyI\/AAAAAAAACwo\/QWa2I1zG7Y0\/s72-c\/24_0144.jpg","height":"72","width":"72"},"thr$total":{"$t":"12"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-3440169455777133070"},"published":{"$t":"2013-03-11T00:00:00.000-03:00"},"updated":{"$t":"2013-03-11T00:00:05.182-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"blockquote o citas sencillas con CSS3"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003ELa etiqueta \u003Cspan style=\"font-weight: bold;\"\u003Eblockquote\u003C\/span\u003E es esa que se suele utilizar para mostrar citas textuales y diferenciarlas del resto de los textos de una página y,  a veces, se combina con una segunda etiqueta llamada \u003Cspan style=\"font-weight: bold;\"\u003Ecite\u003C\/span\u003E que es una referencia al autor o al origen de dicha cita.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nAmbas, tienen propiedades por defecto en cualquier navegador pero hay cientos de formas de \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2007\/10\/comillas-comillas-comillas.html\" target=\"_blank\"\u003Epersonalizarlas\u003C\/a\u003E agregándoles estilos; esta es una forma muy sencilla de hacerlo, utilizando las ventajas del CSS3.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003Eblockquote.purocss {background-color: transparent;border: none;box-shadow: none;color: #888;font-family: Georgia,serif;font-size: 18px;font-style: italic;line-height: 1.3;margin: 20px auto;padding: 0.25em 40px;position: relative;width: 500px;} blockquote.purocss:before {color: #CCC;content: \"\\201C\";display: block;font-size: 80px;left: -5px;position: absolute;top: -15px;} blockquote.purocss cite {color: #CCC;display: block;font-size: 18px;margin-top: 15px;text-align: right;} blockquote.purocss cite:before {content: \"\\2014 \\2009\";}\u003C\/style\u003E\u003Cblockquote class=\"purocss\"\u003EVestibulum a lectus libero, congue ultricies metus. Curabitur nisi dolor, tristique vel lacinia vitae, mattis sed risus. Morbi dignissim feugiat nulla vel vulputate. Ut scelerisque semper eros, vitae vestibulum nibh bibendum ac. Proin eget imperdiet nulla. Nulla hendrerit augue non sapien vestibulum id feugiat massa adipiscing? Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nVivamus ut nisi ante. Phasellus eget odio vel nulla ullamcorper lobortis quis sed nulla. Fusce varius erat non quam tincidunt blandit. Sed venenatis; purus quis hendrerit iaculis, ipsum ante lobortis est, at suscipit erat mi non ipsum. Nunc dictum congue sapien, laoreet tempus augue pharetra a. Morbi enim risus, placerat eget vulputate ac, venenatis vel mi. In venenatis sodales lectus! Quisque a massa a velit blandit ultrices.\u003Cbr \/\u003E\n\u003Ccite\u003Eel nombre del autor\u003C\/cite\u003E\u003C\/blockquote\u003E\u003Cbr \/\u003E\n\u003Cpre\u003E\u0026lt;style\u0026gt;\n  blockquote.purocss {\n    color: #888;\n    font-family: Georgia,serif;\n    font-size: 18px;\n    font-style: italic;\n    line-height: 1.3;\n    margin: 20px auto;\n    padding: 0.25em 40px;\n    position: relative;\n    width: 500px;\n  }\n  blockquote.purocss:before {\n    color: #CCC;\n   content: \"\\201C\";\n   display: block;\n   font-size: 80px;\n   left: -5px;\n   position: absolute;\n   top: -15px;\n  }\n  blockquote.purocss cite {\n    color: #CCC;\n    display: block;\n    font-size: 18px;\n    margin-top: 15px;\n    text-align: right;\n  }\n  blockquote.purocss cite:before {\n   content: \"\\2014 \\2009\";\n  }\n\u0026lt;\/style\u0026gt;\n\n\u0026lt;blockquote class=\"purocss\"\u0026gt;\n  ....... el texto .......\n  \u0026lt;cite\u0026gt;el nombre del autor\u0026lt;\/cite\u0026gt;\n\u0026lt;\/blockquote\u0026gt;\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"referenciaExterna\"\u003E\u003Cspan\u003EREFERENCIAS:\u003C\/span\u003E\u003Ca href=\"http:\/\/www.webmaster-source.com\/2012\/04\/24\/pure-css-blockquote-styling\/\" target=\"_blank\"\u003Ewebmaster-source.com\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/3440169455777133070\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2013\/03\/blockquote-o-citas-sencillas-con-css3.html#comment-form","title":"2 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/3440169455777133070"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/3440169455777133070"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2013\/03\/blockquote-o-citas-sencillas-con-css3.html","title":"blockquote o citas sencillas con CSS3"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"2"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-6808827592099427204"},"published":{"$t":"2013-02-27T00:00:00.000-03:00"},"updated":{"$t":"2013-02-27T00:00:05.454-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Eventos click y CSS"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EUn evento es eso que ocurre ... cuando hacemos algo. En CSS, el más común es el \u003Cb\u003Ehover\u003C\/b\u003E; ponemos el cursor encima de una etiqueta y, automáticamente, se ejecuta el evento\u003C. No es algo controlable, se ejecuta siempre y, que lo usemos o no, es otra historia.\n\nBueno, en realidad, hay una forma de eludirlo ya que en los navegadores modernos hay una propiedad llamada \u003Cb\u003Epointer-events\u003C\/b\u003E que nos permite deshabilitarlos. Por ejemplo si tuviéramos un enlace al que le adosamos esa propiedad, simplemente, no funcionaría:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;a href=\"url_pagina\" style=\"pointer-events: none;\"\u0026gt; click acá \u0026lt;\/a\u0026gt;\u003C\/pre\u003E\u003Cstyle\u003E.demosa {border-bottom: 1px dotted #ABC;color: #FFF;cursor: pointer;font-family: Tahoma;font-size: 16px;font-weight: bold;} .demosp {border: 1px solid #444;font-size: 12px;margin: 20px 0;padding: 10px;text-align: justify;} #democlick1 {display: none;} #democlick1:target {display: block;} .democlick2 {display: none;} span:focus ~ .democlick2 {display: block;} .democlick3 {display: none;} :checked ~ .democlick3 {display: block;} input.oculto[type=checkbox] {position: absolute;left: -999em;}\u003C\/style\u003E\u003Cdiv style=\"text-align: center;\"\u003E\u003Ca href=\"url_pagina\" style=\"pointer-events: none;\"\u003E\u003Cspan class=\"demosa\"\u003Eclick acá\u003C\/span\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003ESi bien \u003Cb\u003E:hover\u003C\/b\u003E es el más común, no es el único pero, no existe ninguno que reaccione ante un \u003Ci\u003Eclick\u003C\/i\u003E. El CSS, por alguna razón, jamás ha tenido algo semejante y ese tipo de acciones sólo pueden hacerse con JavaScript.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSin embargo, hay algunas alternativas; ninguna de ellas es perfecta pero, por ahora, no hay muchas más. La mayoría utiliza \u003Cb\u003E:target\u003C\/b\u003E para que funcione, algo que se ve bien en un \u003Ca href=\"http:\/\/net.tutsplus.com\/tutorials\/html-css-techniques\/quick-tip-mimic-a-click-event-with-css\/\" target=\"_blank\"\u003Edemo sencillo\u003C\/a\u003E pero, en cuanto lo queremos aplicar es poco funcional ya que en una página completa ... se \"moverá\", cambiando la url:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;style\u0026gt;\n#democlick1 {display: none;}\n#democlick1:target {display: block;}\n\u0026lt;\/style\u0026gt;\n\n\u0026lt;a href=\"#democlick1\"\u0026gt;demo con target\u0026lt;\/a\u0026gt;\n\n\u0026lt;div id=\"democlick1\"\u0026gt;\n  ....... cualquier contenido .......\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: center;\"\u003E\u003Ca href=\"#democlick1\"\u003E\u003Cspan class=\"demosa\"\u003Edemo con target\u003C\/span\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv id=\"democlick1\" class=\"demosp\"\u003E\u003Cp\u003EMorbi ac nunc quis nisi tincidunt mattis eu gravida libero. Cras risus dui, scelerisque non fringilla eu; bibendum nec eros! Sed sed libero sed quam cursus adipiscing id non nisl. Praesent nisl turpis, sollicitudin eget placerat at, malesuada vitae ligula? Aenean est felis, fermentum non condimentum nec, consequat et nisl. Vivamus ultrices ligula at augue pulvinar adipiscing a vitae risus. Vivamus fermentum libero eget mi cursus condimentum vel nec neque? Praesent quis metus.\u003C\/p\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EOtra alternativa es utilizar \u003Cb\u003E:focus\u003C\/b\u003E; en este caso, al hacer \u003Ci\u003Eclick\u003C\/i\u003E, se expandirá el contenido oculto.\u003C\/div\u003E\u003Cpre\u003E\u0026lt;style\u0026gt;\n.democlick2 {display: none;}\nspan:focus ~ .democlick2 {display: block;}\n\u0026lt;\/style\u0026gt;\n\n\u0026lt;span tabindex=\"0\"\u0026gt;demo con focus\u0026lt;\/span\u0026gt;\n\u0026lt;div class=\"democlick2\"\u0026gt;\n  ....... cualquier contenido .......\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ETiene dos ventajas con respecto al anterior, por un lado, la página se queda quieta y, podemos aplicarlo a una clase lo que nos permite poner varios sin necesidad de identificarlos pero ... tiene dos desventajas; para volverlo a cerrar, debemos hacer \u003Ci\u003Eclick\u003C\/i\u003E en cualquier parte \"afuera\" y además, el contenido oculto debe estar inmediatamente después, sin etiquetas intermedias:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Cspan class=\"demosa\" tabindex=\"0\"\u003Edemo con focus\u003C\/span\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"democlick2 demosp\"\u003EMorbi ac nunc quis nisi tincidunt mattis eu gravida libero. Cras risus dui, scelerisque non fringilla eu; bibendum nec eros! Sed sed libero sed quam cursus adipiscing id non nisl. Praesent nisl turpis, sollicitudin eget placerat at, malesuada vitae ligula? Aenean est felis, fermentum non condimentum nec, consequat et nisl. Vivamus ultrices ligula at augue pulvinar adipiscing a vitae risus. Vivamus fermentum libero eget mi cursus condimentum vel nec neque? Praesent quis metus.\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Cspan class=\"demosa\" tabindex=\"0\"\u003Eotro demo con focus\u003C\/span\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"democlick2 demosp\"\u003E....... otro distinto .......\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EEl último método es mas sofisticado y requiere más etiquetas pero es el que funciona mejor ya que nos permite generar un efecto \u003Ci\u003Etoggle\u003C\/i\u003E, es decir, \u003Ci\u003Eclick\u003C\/i\u003E y expandir y \u003Ci\u003Eclick\u003C\/i\u003E contraer. En este caso, se usa \u003Cb\u003E:checked\u003C\/b\u003E:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;style\u0026gt;\n.democlick3 {display: none;}\n:checked ~ .democlick3 {display: block;}\ninput.oculto[type=checkbox] {position: absolute;left: -999em;}\n\u0026lt;\/style\u0026gt;\n\n\u0026lt;label for=\"toggle-oculto1\"\u003Edemo con checked\u0026lt;\/label\u0026gt;\n\u0026lt;input type=\"checkbox\" id=\"toggle-oculto1\" class=\"oculto\" \/\u0026gt;\n\u0026lt;div class=\"democlick3\"\u0026gt;\n....... cualquier contenido .......\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Clabel for=\"toggle-oculto1\" class=\"demosa\"\u003Edemo con checked\u003C\/label\u003E\u003C\/div\u003E\u003Cinput type=\"checkbox\" id=\"toggle-oculto1\" class=\"oculto\" \/\u003E\u003Cdiv class=\"democlick3 demosp\"\u003EMorbi ac nunc quis nisi tincidunt mattis eu gravida libero. Cras risus dui, scelerisque non fringilla eu; bibendum nec eros! Sed sed libero sed quam cursus adipiscing id non nisl. Praesent nisl turpis, sollicitudin eget placerat at, malesuada vitae ligula? Aenean est felis, fermentum non condimentum nec, consequat et nisl. Vivamus ultrices ligula at augue pulvinar adipiscing a vitae risus. Vivamus fermentum libero eget mi cursus condimentum vel nec neque? Praesent quis metus.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"referenciaExterna\"\u003E\u003Cspan\u003EREFERENCIAS:\u003C\/span\u003E\u003Ca href=\"http:\/\/www.vanseodesign.com\/css\/click-events\/\" target=\"_blank\"\u003Evanseo design\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/6808827592099427204\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2013\/02\/eventos-click-y-css.html#comment-form","title":"8 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/6808827592099427204"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/6808827592099427204"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2013\/02\/eventos-click-y-css.html","title":"Eventos click y CSS"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"8"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-4377328121504696958"},"published":{"$t":"2013-01-29T00:00:00.000-03:00"},"updated":{"$t":"2013-01-29T00:00:01.187-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"},{"scheme":"http://www.blogger.com/atom/ns#","term":"servicios"}],"title":{"type":"text","$t":"One div: Iconos utilzando sólo CSS"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003E\u003Ca href=\"http:\/\/one-div.com\/\" target=\"_blank\"\u003EOne div\u003C\/a\u003E es un sitio donde podemos buscar y copiar el código necesario para utilizar íconos o símbolos creados exclusivamente con CSS; una técnica cuyo uso se va va extendiendo ya que tiene la ventaja de no utilizar imágenes y de ser flexibles porque podemos variar su tamaño con sencillez sin que se deformen.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nAdemás, basta un poco de imaginación para aprovechar las distintas propiedades, cambiar colores, agregar animaciones o utilizar efectos aunque, claro está, como todas estas cosas, la compatibilidad con los distintos navegadores es una limitación importante pero, poco a poco, es algo que deberíamos dejar de lado y empezar a aceptar que esas limitaciones existirán siempre y que nada es universal excepto que 2+2=4.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nAlgunos ejemplos:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"linkContraido\" onclick=\"SINO('onediv_1');\"\u003E\u003C\/div\u003E\u003Cpre id=\"onediv_1\" class=\"elementoOculto\"\u003E\u0026lt;style\u0026gt;\n.mug_animate {\n  box-shadow: 0 -3em 0 0 #0AF inset;\n  height: 2.5em;\n  position: relative;\n  -moz-transition: all 1000ms linear 0s;\n  -webkit-transition: all 1000ms linear 0s;\n  -o-transition: all 1000ms linear 0s;\n  -ms-transition: all 1000ms linear 0s;\n  transition: all 1000ms linear 0s;\n  width: 1.5em;\n}\n.mug_animate:after {\n  border-color: #DDD transparent #DDD #DDD;\n  border-image: none;\n  border-radius: 0.75em 0 0 0.75em;\n  border-style: solid none solid solid;\n  border-width: 0.25em medium 0.25em 0.25em;\n  content: \"\";\n  height: 1.5em;\n  left: -1em;\n  position: absolute;\n  top: 0.25em;\n  width: 0.75em;\n}\n.mug_animate:before {\n  border: 0.25em solid #DDD;\n  border-radius: 0 0 0.2em 0.2em;\n  content: \"\";\n  height: 2.5em;\n  left: -0.20em;\n  position: absolute;\n  top: -0.5em;\n  width: 1.5em;\n}\n.mug_animate:hover {\n  box-shadow: 0 0 0 0 #00F inset;\n}\n\u0026lt;\/style\u0026gt;\n\n\u0026lt;div class=\"mug_animate\"\u0026gt;\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E.mug_animate {box-shadow: 0 -3em 0 0 #0AF inset;cursor:pointer;height: 2.5em;margin: 20px auto;position: relative;-moz-transition: all 1000ms linear 0s;width: 1.5em;-webkit-transition: all 1000ms linear 0s;width: 1.5em;-o-transition: all 1000ms linear 0s;width: 1.5em;-ms-transition: all 1000ms linear 0s;width: 1.5em;transition: all 1000ms linear 0s;width: 1.5em;} .mug_animate:after {border-color: #DDD transparent #DDD #DDD;border-image: none;border-radius: 0.75em 0 0 0.75em;border-style: solid none solid solid;border-width: 0.25em medium 0.25em 0.25em;content: \"\";height: 1.5em;left: -1em;position: absolute;top: 0.25em;width: 0.75em;} .mug_animate:before {border: 0.25em solid #DDD;border-radius: 0 0 0.2em 0.2em;content: \"\";height: 2.5em;left: -0.20em;position: absolute;top: -0.5em;width: 1.5em;} .mug_animate:hover {box-shadow: 0 0 0 0 #00F inset;}\u003C\/style\u003E\u003Cdiv class=\"mug_animate\"\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"linkContraido\" onclick=\"SINO('onediv_2');\"\u003E\u003C\/div\u003E\u003Cpre id=\"onediv_2\" class=\"elementoOculto\"\u003E\u0026lt;style\u0026gt;\n.fir {\n  box-shadow: 0em 0.9em 0 -0.8em #4D4,0em 1em 0 -0.8em #4D4,0em 1.1em 0 -0.8em #4D4,0em 1.2em 0 -0.8em #4D4;\n  border-bottom: 1.7em solid #4D4;\n  border-left: 1em solid transparent;\n  border-right: 1em solid transparent;\n  font-size: 20px;\n  height: 0em;\n  position: relative;\n  width: 0em;\n}\n\n.fir:before {\n  border-bottom: 1em solid #4D4;\n  border-left: 0.7em solid transparent;\n  border-right: 0.7em solid transparent;\n  content: '';\n  display: block;\n  height: 0em;\n  left: -0.7em;\n  position: absolute;\n  top: -0.2em;\n  width: 0em;\n}\n\n.fir::after {\n  border-bottom: 0.7em solid #4D4;\n  border-left: 0.5em solid transparent;\n  border-right: 0.5em solid transparent;\n  content: '';\n  display: block;\n  height: 0em;\n  left: -0.5em;\n  position: absolute;\n  top: -0.5em;\n  width: 0em;\n}\n\u0026lt;\/style\u0026gt;\n\n\u0026lt;div class=\"fir\"\u0026gt;\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E.fir {margin: 20px auto;height: 0em;width: 0em;border-left: 1em solid transparent;border-right: 1em solid transparent;border-bottom: 1.7em solid #4D4;font-size: 20px;position: relative;box-shadow: 0em 0.9em 0 -0.8em #4D4,0em 1em 0 -0.8em #4D4,0em 1.1em 0 -0.8em #4D4,0em 1.2em 0 -0.8em #4D4;} .fir:before {left: -0.7em;top: -0.2em;height: 0em;width: 0em;content: '';display: block;position: absolute;border-left: 0.7em solid transparent;border-right: 0.7em solid transparent;border-bottom: 1em solid #4D4;} .fir::after {left: -0.5em;top: -0.5em;height: 0em;width: 0em;content: '';display: block;position: absolute;border-left: 0.5em solid transparent;border-right: 0.5em solid transparent;border-bottom: 0.7em solid #4D4;}\u003C\/style\u003E\u003Cdiv class=\"fir\"\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"linkContraido\" onclick=\"SINO('onediv_3');\"\u003E\u003C\/div\u003E\u003Cpre id=\"onediv_3\" class=\"elementoOculto\"\u003E\u0026lt;style\u0026gt;\n.pacman {\n  background-image: -webkit-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);\n  background-image: -moz-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);\n  background-image: -o-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);\n  background-image: -ms-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);\n  background-image: radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);\n  border-radius: 3em 3em 0 0;\n  height: 1.5em;\n  position: relative;\n  -moz-transform: rotate(-45deg);\n  -webkit-transform: rotate(-45deg);\n  -o-transform: rotate(-45deg);\n  -ms-transform: rotate(-45deg);\n  transform: rotate(-45deg);\n  width: 3em;\n}\n\n.pacman:after {\n  background-color: #EE0;\n  border-radius: 0 0 3em 0;\n  content: '';\n  height: 1.5em;\n  left: 0em;\n  position: absolute;\n  top: 1.45em;\n  -moz-transform: rotate(90deg);\n  -webkit-transform: rotate(90deg);\n  -o-transform: rotate(90deg);\n  -ms-transform: rotate(90deg);\n  transform: rotate(90deg);\n  width: 1.5em;\n}\n\u0026lt;\/style\u0026gt;\n\n\u0026lt;div class=\"pacman\"\u0026gt;\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E.pacman {margin: 20px auto;background-image: -webkit-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);background-image: -moz-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);background-image: -o-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);background-image: -ms-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);background-image: radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);border-radius: 3em 3em 0 0;height: 1.5em;position: relative;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);width: 3em;} .pacman:after {background-color: #EE0;border-radius: 0 0 3em 0;content: '';height: 1.5em;left: 0em;position: absolute;top: 1.45em;-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-o-transform: rotate(90deg);-ms-transform: rotate(90deg);transform: rotate(90deg);width: 1.5em;}\u003C\/style\u003E\u003Cdiv class=\"pacman\"\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"margin:20px;\"\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/4377328121504696958\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2013\/01\/one-div-iconos-utilzando-solo-css.html#comment-form","title":"3 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/4377328121504696958"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/4377328121504696958"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2013\/01\/one-div-iconos-utilzando-solo-css.html","title":"One div: Iconos utilzando sólo CSS"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"3"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-2320623859280342004"},"published":{"$t":"2013-01-08T00:00:00.000-03:00"},"updated":{"$t":"2013-01-08T00:00:00.530-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"},{"scheme":"http://www.blogger.com/atom/ns#","term":"JavaScript"}],"title":{"type":"text","$t":"Caracteres \"raros\" en scripts y CSS"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EA veces, cuando se usan \u003Cspan style=\"font-style: italic;\"\u003Escripts\u003C\/span\u003E, debemos escribir caracteres especiales como acentos y estos no se ven bien o aparece un signo de interrogación u otros símbolos raros. Por lo general, esto se resuelve si la codificación de caracteres es correcta pero lo lógico no siempre funciona.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEn Blogger, los caracteres especiales suelen verse bien por lo que ese problema es difícil que se nos presente pero, cuando se trata de otros servicios, de archivos externos, las cosas pueden complicarse, sobre todo si queremos emplear caracteres especiales [\u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2010\/06\/tabla-de-caracteres-unicode.html\" target=\"_blank\"\u003E1\u003C\/a\u003E \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2010\/06\/tabla-de-caracteres-unicode_23.html\" target=\"_blank\"\u003E2\u003C\/a\u003E]\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nPor ejemplo, esto, suele verse bien y al hacer \u003Cspan onclick=\"alert(' á é í ó ú  ☺ ❤ ✛ ');\" style=\" border-bottom: 1px dotted;color: #ABC;cursor: pointer;font-family: Tahoma;font-weight: bold;\"\u003Eclick en este enlace\u003C\/span\u003E, se verán las letras de modo correcto:\u003C\/div\u003E\u003Cpre\u003Ealert(\" á é í ó ú  ☺ ❤ ✛ \");\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ESi no es así y quiero usar caracteres de ese tipo, lo que debo hacer es escribirlos en un formato especial, las llamadas cadenas de escape que no son otra cosa que una barra invertida seguida de una letra y un número en formato hexadecimal. En el caso de los acentos o caracteres comunes, sería \u003Cspan style=\"font-weight: bold;\"\u003E\\x\u003C\/span\u003E más el código Unicode de dos dígitos:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: left;margin-left:50px;\"\u003E\\xe1 es la letra á\u003Cbr \/\u003E\n\\xe9 es la letra é\u003Cbr \/\u003E\n\\xed es la letra í\u003Cbr \/\u003E\n\\xf3 es la letra ó\u003Cbr \/\u003E\n\\xfa es la letra ú\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EAlgunas combinaciones generan caracteres especiales:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: left;margin-left:50px;\"\u003E\\n es un salto de linea\u003Cbr \/\u003E\n\\t es una tabulación\u003Cbr \/\u003E\n\\' es la forma de escribir comillas simples\u003Cbr \/\u003E\n\\\" es la forma de escribir comillas dobles\u003Cbr \/\u003E\n\\\\ es una barra invertida\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EDe manera más genérica, podemos usar \u003Cspan style=\"font-weight: bold;\"\u003E\\u\u003C\/span\u003E más el código Unicode en formato hexadecimal (cuatro dígitos):\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: left;margin-left:50px;\"\u003E\\u00e1 es la letra á\u003Cbr \/\u003E\n\\u00e9 es la letra é\u003Cbr \/\u003E\n\\u00ed es la letra í\u003Cbr \/\u003E\n\\u00f3 es la letra ó\u003Cbr \/\u003E\n\\u00fa es la letra ú\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003Elo que nos permitirá \u003Cspan onclick=\"alert(' \\u263a \\u2764 \\u271b ');\" style=\" border-bottom: 1px dotted;color: #ABC;cursor: pointer;font-family: Tahoma;font-weight: bold;\"\u003Ever correctamente\u003C\/span\u003E eso que antes no se podía:\u003C\/div\u003E\u003Cpre\u003Ealert(\" \\u263a \\u2764 \\u271b \");\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EEn \u003Ca href=\"http:\/\/www.tamasoft.co.jp\/en\/general-info\/unicode.html\" target=\"_blank\" rel=\"nofollow\"\u003Eesta página\u003C\/a\u003E, hay una lista muy completa de todos los caracteres, tanto símbolos como distintos alfabetos.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nAunque en el CSS no suelen usarse caracteres raros, hay un caso en que también son necesarios, cuando se utiliza la propiedad \u003Cspan style=\"font-weight: bold;\"\u003Econtent\u003C\/span\u003E junto con \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2011\/06\/after-y-before.html\" target=\"_blank\"\u003E:after y :before\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nAllí, se usa el mismo criterio aunque sólo es necesario agregar la barra invertida seguida de los cuatro dígitos del código hexadecimal. Por ejemplo:\u003C\/div\u003E\u003Cpre\u003Econtent: \":\\24d1\\24d4\\24d5\\24de\\24e1\\24d4\";\n\ncontent: \":after  \\263a  \\2724  \\2602\";\u003C\/pre\u003E\u003Cdiv style=\"text-align: center;font-family: monospace;font-size: 32px;\"\u003E:after  ☺ ✤ ☂\u003Cbr \/\u003E\n:ⓑⓔⓕⓞⓡⓔ\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003Ediv.demoAB4 {cursor: pointer;position: relative;text-align: center;}div.demoAB4:before {background-color: #FFF;border-radius: 10px;box-shadow: 0 0 10px #A0A9B1 inset;color:#000;content: \":\\24d1\\24d4\\24d5\\24de\\24e1\\24d4\";font-family: Tahoma;font-size: 32px;height: 48px;line-height: 48px;opacity: 0;padding: 0 10px;position: absolute;right: 50px;top: 20px;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;transition: all 1s;} div.demoAB4:hover:before {right: 160px;opacity: 1;top: 140px;} div.demoAB4 img {width: 400px;-moz-transition: width 1s;-webkit-transition: width 1s;-o-transition: width 1s;transition: width 1s;} div.demoAB4 img:hover {width: 500px;} div.demoAB4:after {content: \":after  \\263a  \\2724  \\2602\";display: block;font-weight: bold;font-family: Helvetica;font-size: 32px;text-align: center;} \u003C\/style\u003E\u003Cdiv class=\"demoAB4\"\u003E\u003Cimg src=\"https:\/\/lh4.googleusercontent.com\/_qfa9R8IbFoA\/TbXy-nFM9mI\/AAAAAAAADik\/vycA8WJw9ec\/s500\/09_0301.jpg\"\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/2320623859280342004\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2013\/01\/caracteres-raros-en-scripts-y-css.html#comment-form","title":"8 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/2320623859280342004"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/2320623859280342004"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2013\/01\/caracteres-raros-en-scripts-y-css.html","title":"Caracteres \"raros\" en scripts y CSS"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/lh4.googleusercontent.com\/_qfa9R8IbFoA\/TbXy-nFM9mI\/AAAAAAAADik\/vycA8WJw9ec\/s72-c\/09_0301.jpg","height":"72","width":"72"},"thr$total":{"$t":"8"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-504072161028930394"},"published":{"$t":"2013-01-04T00:00:00.000-03:00"},"updated":{"$t":"2017-03-22T01:59:26.079-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Wiggle: Hipnosis y CSS"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EAntes que nadie pregunte: No, esto no tiene ninguna utilidad práctica. No incrementará las visitas, no agregará enlaces entrantes, no hará que un sitio se posicione primero en Google, tenga 456 \u003Ci\u003Etweets\u003C\/i\u003E en 5 minutos ni conseguirá subir los \u003Ci\u003Eclicks\u003C\/i\u003E de Adsense para que podamos comprarnos esa  isla en las Bahamas. Simplemente es ... un experimento sin consecuencias.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nY para colmo ... largo de escribir:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"linkContraido\" onclick=\"SINO('wiggleDEMO');\"\u003E\u003C\/div\u003E\u003Cpre id=\"wiggleDEMO\" class=\"elementoOculto\"\u003E\u0026lt;style\u0026gt;\n\/* agregar los prefijos necesarios en las propiedades para que funcione en distintos navegadores *\/\n@keyframes wiggle {\n  0% {transform: rotate( -10deg );}\n  100% {transform: rotate( 10deg );}\n}\ndiv#wiggle {\n  left: 50%;\n  position: absolute;\n  top: 50%;\n}\ndiv#wiggle b {\n  display: block;\n  border-radius: 5%;\n  position: absolute;\n  transform: rotate(-10deg);\n}\ndiv#wiggle b:nth-child(1) {\n  width: 20px;\n  height: 20px;\n  left: -10px;\n  top: -10px;\n  box-shadow: 0 0 2px rgba(255, 255, 255, 0.9);\n  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 50ms infinite alternate;\n}\ndiv#wiggle b:nth-child(2) {\n  width: 40px;\n  height: 40px;\n  left: -20px;\n  top: -20px;\n  box-shadow: 0 0 4px rgba(255, 255, 255, 0.9);\n  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 100ms infinite alternate;\n}\ndiv#wiggle b:nth-child(3) {\n  width: 60px;\n  height: 60px;\n  left: -30px;\n  top: -30px;\n  box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);\n  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 150ms infinite alternate;\n}\ndiv#wiggle b:nth-child(4) {\n  width: 80px;\n  height: 80px;\n  left: -40px;\n  top: -40px;\n  box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);\n  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 200ms infinite alternate;\n}\ndiv#wiggle b:nth-child(5) {\n  width: 100px;\n  height: 100px;\n  left: -50px;\n  top: -50px;\n  box-shadow: 0 0 10px rgba(255, 255, 255, 0.9);\n  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 250ms infinite alternate;\n}\ndiv#wiggle b:nth-child(6) {\n  width: 120px;\n  height: 120px;\n  left: -60px;\n  top: -60px;\n  box-shadow: 0 0 12px rgba(255, 255, 255, 0.9);\n  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 300ms infinite alternate;\n}\ndiv#wiggle b:nth-child(7) {\n  width: 140px;\n  height: 140px;\n  left: -70px;\n  top: -70px;\n  box-shadow: 0 0 14px rgba(255, 255, 255, 0.9);\n  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 350ms infinite alternate;\n}\ndiv#wiggle b:nth-child(8) {\n  width: 160px;\n  height: 160px;\n  left: -80px;\n  top: -80px;\n  box-shadow: 0 0 16px rgba(255, 255, 255, 0.9);\n  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 400ms infinite alternate;\n}\ndiv#wiggle b:nth-child(9) {\n  width: 180px;\n  height: 180px;\n  left: -90px;\n  top: -90px;\n  box-shadow: 0 0 18px rgba(255, 255, 255, 0.9);\n  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 450ms infinite alternate;\n}\ndiv#wiggle b:nth-child(10) {\n  width: 200px;\n  height: 200px;\n  left: -100px;\n  top: -100px;\n  box-shadow: 0 0 20px rgba(255, 255, 255, 0.9);\n  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 500ms infinite alternate;\n}\ndiv#wiggle b:nth-child(11) {\n  width: 220px;\n  height: 220px;\n  left: -110px;\n  top: -110px;\n  box-shadow: 0 0 22px rgba(255, 255, 255, 0.9);\n  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 550ms infinite alternate;\n}\ndiv#wiggle b:nth-child(12) {\n  width: 240px;\n  height: 240px;\n  left: -120px;\n  top: -120px;\n  box-shadow: 0 0 24px rgba(255, 255, 255, 0.9);\n  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 600ms infinite alternate;\n}\ndiv#wiggle b:nth-child(13) {\n  width: 260px;\n  height: 260px;\n  left: -130px;\n  top: -130px;\n  box-shadow: 0 0 26px rgba(255, 255, 255, 0.9);\n  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 650ms infinite alternate;\n}\ndiv#wiggle b:nth-child(14) {\n  width: 280px;\n  height: 280px;\n  left: -140px;\n  top: -140px;\n  box-shadow: 0 0 28px rgba(255, 255, 255, 0.9);\n  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 700ms infinite alternate;\n}\ndiv#wiggle b:nth-child(15) {\n  width: 300px;\n  height: 300px;\n  left: -150px;\n  top: -150px;\n  box-shadow: 0 0 30px rgba(255, 255, 255, 0.9);\n  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 750ms infinite alternate;\n}\n\u0026lt;\/style\u0026gt;\n\n\u0026lt;div id=\"wiggle\"\u0026gt;\n\u0026lt;b\u0026gt;\u0026lt;\/b\u0026gt;\u0026lt;b\u0026gt;\u0026lt;\/b\u0026gt;\u0026lt;b\u0026gt;\u0026lt;\/b\u0026gt;\u0026lt;b\u0026gt;\u0026lt;\/b\u0026gt;\u0026lt;b\u0026gt;\u0026lt;\/b\u0026gt;\u0026lt;b\u0026gt;\u0026lt;\/b\u0026gt;\u0026lt;b\u0026gt;\u0026lt;\/b\u0026gt;\u0026lt;b\u0026gt;\u0026lt;\/b\u0026gt;\u0026lt;b\u0026gt;\u0026lt;\/b\u0026gt;\u0026lt;b\u0026gt;\u0026lt;\/b\u0026gt;\u0026lt;b\u0026gt;\u0026lt;\/b\u0026gt;\u0026lt;b\u0026gt;\u0026lt;\/b\u0026gt;\u0026lt;b\u0026gt;\u0026lt;\/b\u0026gt;\u0026lt;b\u0026gt;\u0026lt;\/b\u0026gt;\u0026lt;b\u0026gt;\u0026lt;\/b\u0026gt;\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"referenciaExterna\"\u003E\u003Cspan\u003EREFERENCIAS:\u003C\/span\u003E\u003Ca href=\"http:\/\/codepen.io\/hakimel\/full\/jEdxA\" target=\"_blank\"\u003Ecodepen.io\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/504072161028930394\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2013\/01\/wiggle-hipnosis-y-css.html#comment-form","title":"4 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/504072161028930394"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/504072161028930394"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2013\/01\/wiggle-hipnosis-y-css.html","title":"Wiggle: Hipnosis y CSS"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"4"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-8008294617501136427"},"published":{"$t":"2012-12-13T00:00:00.000-03:00"},"updated":{"$t":"2012-12-13T00:00:01.325-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Tooltips con CSS: Más simple, imposible"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EHay muchas formas de crear \u003Ci\u003Etooltips\u003C\/i\u003E con CSS; probablemente, esta, que muestra \u003Ca title=\"How to create a simple CSS3 tooltip by Keenan Payne\" href=\"http:\/\/www.webdesignerdepot.com\/2012\/11\/how-to-create-a-simple-css3-tooltip\/\" target=\"_blank\"\u003Ewebdesignerdepot.com\u003C\/a\u003E es una de las más sencillas que existen ya que sólo se requiere establecer una clase en el enlace o etiqueta a la cuál queremos aplicarlas y poner las dos reglas de estilo.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEn este caso, la clase la llamamos \u003Ci\u003Etooltip\u003C\/i\u003E pero, puede ser cualquier otro nombre y funcionará en cualquier navegador que admita el uso de los pseudo-elementos \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2011\/06\/after-y-before.html\" target=\"_blank\"\u003E:after y :before\u003C\/a\u003E.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEl formato gráfico es completamente configurable así que las variaciones pueden ser casi infinitas.\u003C\/div\u003E\u003Cpre\u003E\u0026lt;style type=\"text\/css\"\u0026gt;\n  .tooltip {\n    display: inline;\n    position: relative;\n  }\n  .tooltip:hover:after {\n    bottom: 26px;\n    content: attr(title); \/* este es el texto que será mostrado *\/\n    left: 20%;\n    position: absolute;\n    z-index: 98;\n    \/* el formato gráfico *\/\n    background: rgba(255,255,255, 0.2); \/* el color de fondo *\/\n    border-radius: 5px;\n    color: #FFF; \/* el color del texto *\/\n    font-family: Georgia;\n    font-size: 12px;\n    padding: 5px 15px;\n    text-align: center;\n    text-shadow: 1px 1px 1px #000;\n    width: 150px;\n  }\n  .tooltip:hover:before {\n    bottom: 20px;\n    content: \"\";\n    left: 50%;\n    position: absolute;\n    z-index: 99;\n    \/* el triángulo inferior *\/\n    border: solid;\n    border-color: rgba(255,255,255, 0.2) transparent;\n    border-width: 6px 6px 0 6px;\n  }\n\u0026lt;\/style\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EY se usaría así:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;a href=\"#\" title=\"este es un ejemplo de tooltip sencillo\" class=\"tooltip\"\u0026gt;un ejemplo\u0026lt;\/a\u0026gt;\u003C\/pre\u003E\u003Cstyle type=\"text\/css\"\u003E.tooltip{display: inline;position: relative;} .tooltip:hover:after{background: #40464D;border-radius: 5px;bottom: 26px;color: #FFF;content: attr(title);font-weight: normal;text-align: center;left: 20%;padding: 5px 15px;position: absolute;z-index: 98;width: 150px; font-family: Georgia;font-size: 12px;text-shadow: 1px 1px 1px #000;}.tooltip:hover:before{border: solid;border-color: #40464D transparent;border-width: 6px 6px 0 6px;bottom: 20px;content: \"\";left: 50%;position: absolute;z-index: 99;}\u003C\/style\u003E\u003Cdiv style=\"text-align: center;\"\u003E\u003Ca href=\"javascript:void(0);\" title=\"este es un ejemplo de tooltip sencillo\" class=\"tooltip\" style=\"font-size:20px;font-weight:normal;color:#DEF\"\u003Eun ejemplo\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EEl texto que se mostrará es el que se encuentra en el atributo \u003Cb\u003Etitle\u003C\/b\u003E de la etiqueta; si se quisiera utilizar otro atributo, bastaría cambiar la propiedad \u003Cb\u003Econtent\u003C\/b\u003E; por ejemplo si se quiere usar \u003Cb\u003Erel\u003C\/b\u003E o \u003Cb\u003Ehref\u003C\/b\u003E sería:\u003C\/div\u003E\u003Cpre\u003Econtent: attr(rel);\ncontent: attr(href);\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EHay que tener en cuenta que, dada su sencillez, el \u003Ci\u003Etooltip\u003C\/i\u003E se verá \"cortado\" cuando se queire mostrar en algo que está muy a la derecha si el contenedor donde se encuentra la etiqueta tiene la propiedad \u003Cb\u003Eoverflow: hidden;\u003C\/b\u003E algo bastante común en muchas plantillas de Blogger.\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/8008294617501136427\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/12\/tooltips-con-css-mas-simple-imposible.html#comment-form","title":"35 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/8008294617501136427"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/8008294617501136427"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/12\/tooltips-con-css-mas-simple-imposible.html","title":"Tooltips con CSS: Más simple, imposible"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"35"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-4675323868018495874"},"published":{"$t":"2012-12-10T00:00:00.000-03:00"},"updated":{"$t":"2012-12-10T00:00:04.536-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"El NO misterio de posición absoluta"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003ECuando diseñamos una página \u003Cspan style=\"font-style: italic;\"\u003Eweb\u003C\/span\u003E o simplemente agregamos etiquetas, estas se acomodan de manera natural, ya sea una al lado de la otra o bien una debajo de la otra, dependiendo del tipo que sean. El contenido fluye naturalmente, de arriba hacia abajo y de izquierda a derecha, tal como ocurre cuando escribimos o leemos.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nPara modificar esa secuencia usamos distintas propiedades de CSS; les colocamos márgenes, cambiamos su tipo con display o las hacemos flotar.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nDe un tiempo a esta parte, se está empleando una nueva forma de posicionar \"cosas\" en la página, utilizando para ello la propiedad respectiva que se llama \u003Cb\u003Eposition\u003C\/b\u003E y, que como toda propiedad de CSS, tiene un valor por defecto aunque no la definamos. Toda etiqueta tiene el valor \u003Cb\u003Estatic\u003C\/b\u003E que no hace nada salvo decirle al navegador que esa etiqueta es \"normal\".\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nLas variantes que admite esa propiedad son tres: fixed, relative y absolute. Justamente, el uso de esta última es la que últimamente se está extendiendo porque es una forma bastante sencilla de ubicar elementos con cierta precisión pero, se suele ver que se usa de manera extraña o mejor dicho, sin tener en cuenta qué es o que hace y por lo tanto, cómo afecta al resto de las etiquetas.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nLo primero que debe tenerse en claro es que ´lo absoluto no existe y que \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2011\/10\/las-posiciones-absolutas-son-relativas.html\" target=\"_blank\"\u003Etoda posición absoluta es relativa a  algo\u003C\/a\u003E; ¿a qué? a la etiqueta que la contiene, sea la que sea ya que una página web no es otra cosa que un montón de etiquetas contenidas en otras etiquetas hasta llegar a la primera que es el body.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nDe este modo, si colocamos \u003Cb\u003Eposition:absolute;\u003C\/b\u003E en una etiqueta cualquiera, el navegador la posicionará buscando \"hacia atrás\" la primera etiqueta que no tenga la propiedad \u003Cb\u003Eposition:static;\u003C\/b\u003E y si no hay ninguna, tomará como referencia el body, es decir, la esquina superior izquierda de la ventana.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEste es el error más común, suponer que si algo tiene una posición absoluta, el navegador entenderá dónde queremos que se vea pero, los navegadores no piensan, sólo obedecen ordenes.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nTampoco es cierto que agregando esa propiedad, todo se resuelva porque por si sola no causa mayor efecto; en este ejemplo, el contenedor es \"normal\" y el contenido es absoluto y sin embargo, todo se muestra como si esta no existiera, el rectángulo se ve debajo el texto:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E.demoscreen{width:500px;height:200px;outline:1px solid #CCC;position:relative;background-color:#000;margin:0 auto;} .contenedor{width:200px;height:120px;outline:1px solid #EEE;background-color:#ABC;} .contenido {background-color: #456;height: 100px;outline: 1px solid #DEF;width: 100px;} #pabs1.ej1 {top: 0;left: 0;} #pabs2.ej2 {width:600px;height:300px;}\u003C\/style\u003E\u003Cdiv class=\"demoscreen\" style=\"position:static;\"\u003E\u003Cspan\u003E#contenedor {position:static;}\u003C\/span\u003E\u003Cdiv id=\"pabs1\" class=\"contenedor\" style=\"position:absolute;width:250px;\"\u003E\u003Cspan style=\"color:#444\"\u003E#contenido {position:absolute;}\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EPara que tenga algún efecto, debemos establecer también algunas de las propiedades que definen esa posición (left, top, right, bottom) ya que si no lo hacemos, esas propiedades son calculadas automáticamente; en el ejemplo anterior, el navegador me dice que left: es 67 y top es 414 aunque yo no lo haya escrito; si le digo que los coloque en cero, el rectángulo se moverá hasta colocarse en el ángulo superior izquierdo del primer contenedor que no tenga la propiedad position:static (que sea relative, absolute o fixed) que en el caso de esta entrada, es el DIV #main-wrapper:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Ca href=\"javascript:void();\" onclick=\"$('#pabs1').toggleClass('ej1');\"\u003Eclick para probar\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EJustamente, el poder usar left, top, right y bottom para ubicar algo, es lo que hace de esta propiedad una forma sencilla de diseñar algo pero, si podemos posicionar un objeto de ese modo ¿para que agregar otras propiedades como margin y float?\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEsto también es bastante común y debería evitarse. Si posicionamos algo de modo absoluto, los márgenes suelen ser innecesarios y las flotaciones, inútiles; esto:\u003C\/div\u003E\u003Cpre\u003E#contenido {\n  \u003Cspan style=\"color: #FF6666\"\u003Efloat: right;\n  margin-right: 20px;\u003C\/span\u003E\n  right: 20px;\n  top: 40px;\n}\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003Ese puede simplificar y la regla sólo debería decir:\u003C\/div\u003E\u003Cpre\u003E#contenido {\n  right: 20px;\n  top: 40px;\n}\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EVeremos lo mismo asi que ¿para qué complicarse la vida?\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"demoscreen\"\u003E\u003Cdiv class=\"contenedor\" style=\"position:absolute;right: 20px;top: 40px;\"\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003ELo mismo puede decirse se display; salvo muy raras excepciones, es innecesario agregar esa propiedad en la regla.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nPor supuesto, como la posición es absoluta, margin: 0 auto;  no centra absolutamente nada; mucho menos lo hará text-align o el viejo atributo align. Si queremos centrar algo que tenga este tipo de propiedad, debemos conocer su ancho. Por ejemplo, en este caso, el rectángulo celeste tiene 200 pixeles de ancho y lo centramos usando left y un margen izquierdo negativo:\u003C\/div\u003E\u003Cpre\u003E#contenido {\n  left: 50%;\n  margin-left: -100px;\n  margin-top: -60px;\n  position: absolute;\n  top: 50%;\n}\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EY con top lo podemos centrar verticalmente así que si el contenido es de 200x120, esto, lo centraría en ambos sentidos:\u003C\/div\u003E\u003Cpre\u003E#contenido {\n  left: 50%;\n  margin-left: -100px;\n  margin-top: -60px;\n  position: absolute;\n  top: 50%;\n}\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"demoscreen\" id=\"pabs2\"\u003E\u003Cdiv class=\"contenedor\" style=\"left: 50%;margin-left: -100px;margin-top: -60px;position: absolute;top: 50%;\"\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Ca href=\"javascript:void();\" onclick=\"$('#pabs2').toggleClass('ej2');\"\u003Eclick para probar\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/4675323868018495874\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/12\/el-no-misterio-de-posicion-absoluta.html#comment-form","title":"0 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/4675323868018495874"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/4675323868018495874"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/12\/el-no-misterio-de-posicion-absoluta.html","title":"El NO misterio de posición absoluta"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-3993931610475525696"},"published":{"$t":"2012-11-21T16:51:00.000-03:00"},"updated":{"$t":"2012-11-22T16:30:50.856-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Múltiples fondos y efectos hover"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EEsta es una forma muy particular de \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2010\/02\/multiples-fondos-con-css3.html\" target=\"_blank\"\u003Eutilizar fondos múltiples\u003C\/a\u003E para crear efectos \u003Cspan style=\"font-style: italic;\"\u003Ehover\u003C\/span\u003E; algo que se le ocurrió a \u003Ca href=\"http:\/\/designshack.net\/?p=26842\" target=\"_blank\"\u003Edesignshack.net\u003C\/a\u003E donde la técnica está explicada en detalle.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nLo básico es saber que con las nuevas características del CSS3, una etiqueta cualquiera puede tener varios fondos (varias propiedades \u003Cb\u003Ebackground\u003C\/b\u003E) y cada una de ellas puede ser controlada de modo individual. La sintaxis d esto es exactamente igual que la tradicional y los distintos valores, se separan con comas así que una regla como esta, agregaría dos imágenes distintas al mismo contenedor:\u003C\/div\u003E\u003Cpre\u003E#ejemplo {\n  background-image: url(imagen_1), url(imagen_2);\n  background-position: left 50%, right 50%;\n  background-repeat: no-repeat;\n  background-color: red;\n}\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003Ela primera estará a la izquierda, la segunda a la derecha; ambas centradas verticalmente; ninguna de ellas se repetirá y el fondo \"sobrante\" será de color rojo.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"background-image: url(https:\/\/lh3.googleusercontent.com\/-1_KS9sggbA4\/UGt6sQ2a4QI\/AAAAAAAAC5U\/TXUoxkv_Vv8\/s200\/34_0087.jpg), url(https:\/\/lh4.googleusercontent.com\/-dZbPaBmpINQ\/UGtvNlk6Q9I\/AAAAAAAACp0\/QoWM2flFL6U\/s200\/15_0458.jpg);background-position: left 50%, right 50%;background-repeat: no-repeat;background-color:red;width:500px;height:200px;margin:0 auto;\"\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EEntendiendo cómo funciona esto de los fondos múltiples y que su posición puede controlarse con \u003Cb\u003Ebackground-position\u003C\/b\u003E, supongamos que tenemos un contenedor que mide 200x200 al que le coloco tres imágenes de fondo; las dos primeras son las que veré por defecto (imagen_fondo)  y la tercera es la que permanecerá oculta hasta poner el cursor encima (imagen_oculta).\u003C\/div\u003E\u003Cpre\u003E#ejemplo {\n  display: inline-block;\n  height: 200px;\n  width: 200px;\n  transition: all 1s; \/* con prefijos para los distintos navegadores *\/\n  background-image: url(imagen_fondo), url(imagen_fondo), url(imagen_oculta);\n  background-repeat: no-repeat;\n  \u003Cspan style=\"color: #FFFF00\"\u003E\/* background-position: ???????; *\/\u003C\/span\u003E\n}\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EPara que esto funcione, un poco de aritmética. Si queremos que se \"abra\" horizontalmente:\u003C\/div\u003E\u003Cpre\u003Ebackground-position: -100px 0px, 100px 0px, 0 0;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003Ey si queremos que se \"abra\" verticalmente:\u003C\/div\u003E\u003Cpre\u003Ebackground-position: 0 -100px, 0 100px, 0 0;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EY la regla del hover sería:\u003C\/div\u003E\u003Cpre\u003E#ejemplo:hover {background-position: -200px 0px, 200px 0px, 0 0;}\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003Eo bien:\u003C\/div\u003E\u003Cpre\u003E#ejemplo:hover {background-position: 0 -200px, 0 200px, 0 0;}\u003C\/pre\u003E\u003Cstyle\u003E.hoverDot {display: inline-block;height: 200px;margin: 10px;width: 200px;-moz-transition: all 1s ease 0s;-webkit-transition: all 1s ease 0s;-o-transition: all 1s ease 0s;-ms-transition: all 1s ease 0s;transition: all 1s ease 0s;}#slidingDoors {background-image: url(http:\/\/3.bp.blogspot.com\/-T9uH8xDiNGI\/UJv7f_tGZjI\/AAAAAAAAVRc\/2L4FHjvouZI\/s00\/fondo.png), url(http:\/\/3.bp.blogspot.com\/-T9uH8xDiNGI\/UJv7f_tGZjI\/AAAAAAAAVRc\/2L4FHjvouZI\/s00\/fondo.png), url(http:\/\/3.bp.blogspot.com\/-uXXiaE7kXi8\/UJv8nUuQSjI\/AAAAAAAAVRo\/LA53VFRh6Ng\/s00\/imagen.jpg);background-position: -100px 0px, 100px 0px, 0 0;background-repeat: no-repeat;} #slidingDoors:hover {background-position: -200px 0px, 200px 0px, 0 0;} #slidingDoorsVert {background-image: url(http:\/\/3.bp.blogspot.com\/-T9uH8xDiNGI\/UJv7f_tGZjI\/AAAAAAAAVRc\/2L4FHjvouZI\/s00\/fondo.png), url(http:\/\/3.bp.blogspot.com\/-T9uH8xDiNGI\/UJv7f_tGZjI\/AAAAAAAAVRc\/2L4FHjvouZI\/s00\/fondo.png), url(http:\/\/3.bp.blogspot.com\/-uXXiaE7kXi8\/UJv8nUuQSjI\/AAAAAAAAVRo\/LA53VFRh6Ng\/s00\/imagen.jpg);background-position: 0 -100px, 0 100px, 0 0;background-repeat: no-repeat;} #slidingDoorsVert:hover {background-position: 0 -200px, 0 200px, 0 0;} #breakApart {background-image: url(http:\/\/3.bp.blogspot.com\/-T9uH8xDiNGI\/UJv7f_tGZjI\/AAAAAAAAVRc\/2L4FHjvouZI\/s00\/fondo.png), url(http:\/\/3.bp.blogspot.com\/-T9uH8xDiNGI\/UJv7f_tGZjI\/AAAAAAAAVRc\/2L4FHjvouZI\/s00\/fondo.png), url(http:\/\/3.bp.blogspot.com\/-T9uH8xDiNGI\/UJv7f_tGZjI\/AAAAAAAAVRc\/2L4FHjvouZI\/s00\/fondo.png), url(http:\/\/3.bp.blogspot.com\/-T9uH8xDiNGI\/UJv7f_tGZjI\/AAAAAAAAVRc\/2L4FHjvouZI\/s00\/fondo.png), url(http:\/\/3.bp.blogspot.com\/-uXXiaE7kXi8\/UJv8nUuQSjI\/AAAAAAAAVRo\/LA53VFRh6Ng\/s00\/imagen.jpg);background-position: -100px -100px, 100px 100px, -100px 100px, 100px -100px, 0 0;background-repeat: no-repeat;} #breakApart:hover {background-position: -200px -200px, 200px 200px, -200px 200px, 200px -200px, 0 0;} #twistAndShout {background-image: url(http:\/\/3.bp.blogspot.com\/-T9uH8xDiNGI\/UJv7f_tGZjI\/AAAAAAAAVRc\/2L4FHjvouZI\/s00\/fondo.png), url(http:\/\/3.bp.blogspot.com\/-T9uH8xDiNGI\/UJv7f_tGZjI\/AAAAAAAAVRc\/2L4FHjvouZI\/s00\/fondo.png), url(http:\/\/3.bp.blogspot.com\/-T9uH8xDiNGI\/UJv7f_tGZjI\/AAAAAAAAVRc\/2L4FHjvouZI\/s00\/fondo.png), url(http:\/\/3.bp.blogspot.com\/-T9uH8xDiNGI\/UJv7f_tGZjI\/AAAAAAAAVRc\/2L4FHjvouZI\/s00\/fondo.png), url(http:\/\/3.bp.blogspot.com\/-uXXiaE7kXi8\/UJv8nUuQSjI\/AAAAAAAAVRo\/LA53VFRh6Ng\/s00\/imagen.jpg);background-position: -100px -100px, 100px 100px, -100px 100px, 100px -100px, 0 0;background-repeat: no-repeat;transform: rotate(-90deg);} #twistAndShout:hover {background-position: -200px -200px, 200px 200px, -200px 200px, 200px -200px, 0 0;transform: rotate(0deg);}\u003C\/style\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Cdiv class=\"hoverDot\" id=\"slidingDoors\"\u003E\u003C\/div\u003E\u003Cdiv class=\"hoverDot\" id=\"slidingDoorsVert\"\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EDel mismo modo, agregando más fondos, se obtienen distintos efectos:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Cdiv class=\"hoverDot\" id=\"breakApart\"\u003E\u003C\/div\u003E\u003Cdiv class=\"hoverDot\" id=\"twistAndShout\"\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"linkContraido\" onclick=\"SINO('ejemplofondos');\"\u003E\u003C\/div\u003E\u003Cpre id=\"ejemplofondos\" class=\"elementoOculto\"\u003E\u0026lt;style\u0026gt;\n.hoverDot {\n  display: inline-block;\n  height: 200px;\n  margin: 10px;\n  width: 200px;\n  -moz-transition: all 1s ease 0s;\n  -webkit-transition: all 1s ease 0s;\n  -o-transition: all 1s ease 0s;\n  -ms-transition: all 1s ease 0s;\n  transition: all 1s ease 0s;\n}\n\n#slidingDoors {\n  background-image: url(fondo.png), url(fondo.png), url(imagen.jpg);\n  background-position: -100px 0px, 100px 0px, 0 0;\n  background-repeat: no-repeat;\n}\n#slidingDoors:hover {\n  background-position: -200px 0px, 200px 0px, 0 0;\n}\n\n#slidingDoorsVert {\n  background-image: url(fondo.png), url(fondo.png), url(imagen.jpg);\n  background-position: 0 -100px, 0 100px, 0 0;\n  background-repeat: no-repeat;\n}\n#slidingDoorsVert:hover {\n  background-position: 0 -200px, 0 200px, 0 0;\n}\n\n#breakApart {\n  background-image: url(fondo.png), url(fondo.png), url(fondo.png), url(fondo.png), url(imagen.jpg);\n  background-position: -100px -100px, 100px 100px, -100px 100px, 100px -100px, 0 0;\n  background-repeat: no-repeat;\n}\n#breakApart:hover {\n  background-position: -200px -200px, 200px 200px, -200px 200px, 200px -200px, 0 0;\n}\n\n#twistAndShout {\n  background-image: url(fondo.png), url(fondo.png), url(fondo.png), url(fondo.png), url(imagen.jpg);\n  background-position: -100px -100px, 100px 100px, -100px 100px, 100px -100px, 0 0;\n  background-repeat: no-repeat;\n  transform: rotate(-90deg);\n}\n#twistAndShout:hover {\n  background-position: -200px -200px, 200px 200px, -200px 200px, 200px -200px, 0 0;\n  transform: rotate(0deg);\n}\n\u0026lt;\/style\u0026gt;\n\n\u0026lt;div class=\"hoverDot\" id=\"slidingDoors\"\u0026gt;\u0026lt;\/div\u0026gt;\n\u0026lt;div class=\"hoverDot\" id=\"slidingDoorsVert\"\u0026gt;\u0026lt;\/div\u0026gt;\n\u0026lt;div class=\"hoverDot\" id=\"breakApart\"\u0026gt;\u0026lt;\/div\u0026gt;\n\u0026lt;div class=\"hoverDot\" id=\"twistAndShout\"\u0026gt;\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/3993931610475525696\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/11\/multiples-fondos-y-efectos-hover.html#comment-form","title":"5 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/3993931610475525696"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/3993931610475525696"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/11\/multiples-fondos-y-efectos-hover.html","title":"Múltiples fondos y efectos hover"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"5"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-611703038434751878"},"published":{"$t":"2012-11-19T00:00:00.000-03:00"},"updated":{"$t":"2012-11-19T00:00:01.445-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Botones simples con CSS"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EEstos botones son sencillos de armar y el CSS se puede descargar desde la página del autor, usarlos total o parcialmente o modificarse a gusto.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEn principio, funcionarían en cualquier navegador incluyendo versiones viejas de Internet Explorer aunque faltaría agregarles las propiedades para Opera y sería mejor eliminar aquellas que ya no son necesarias tales como -webkit-border-radius, -moz-border-radius, -webkit-box-shadow o -moz-box-shadow\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nAdemás, sería conveniente modificar la sintaxis de las gradientes utilizadas en Chrome para que sean iguales al resto de los navegadores; por ejemplo:\u003C\/div\u003E\u003Cpre\u003E-webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f0f0f0));\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003Ese transformaría en esto:\u003C\/div\u003E\u003Cpre\u003E-webkit-linear-gradient(top,  #f9f9f9, #f0f0f0);\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EEl HTML es genérico, se scribe siempre igual:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;a class=\"button white\" href=\"#\"\u0026gt;ejemplo\u0026lt;\/a\u0026gt;\u003C\/pre\u003E\u003Cstyle\u003E#demobotones {background-color: #FFF;margin: 0 auto;padding: 20px;text-align: center;width: 400px;} .button{display: inline-block;text-decoration: none;font: bold 12px\/12px Arial !important;padding: 8px 11px;color: #555;border: 1px solid #dedede;border-radius: 3px;margin:5px;} .button.white{background: #f5f5f5;filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f0f0f0');background: -webkit-linear-gradient(top,  #f9f9f9, #f0f0f0);background: -moz-linear-gradient(top,  #f9f9f9, #f0f0f0);border-color: #dedede #d8d8d8 #d3d3d3;color: #555  !important;text-shadow: 0 1px 0 #fff;box-shadow: 0 1px 1px #eaeaea, inset 0 1px 0 #fbfbfb;} .button.white:hover{background: #f4f4f4;filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#efefef', endColorstr='#f8f8f8');background: -webkit-linear-gradient(top,  #efefef, #f8f8f8);background: -moz-linear-gradient(top,  #efefef, #f8f8f8);border-color: #c7c7c7 #c3c3c3 #bebebe;color: #555  !important;text-shadow: 0 1px 0 #fdfdfd;box-shadow: 0 1px 1px #ebebeb, inset 0 1px 0 #f3f3f3;} .button.grey{background: #bdbdbd;filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#cacaca', endColorstr='#aeaeae');background: -webkit-linear-gradient(top,  #cacaca, #aeaeae);background: -moz-linear-gradient(top,  #cacaca, #aeaeae);border-color: #b5b5b5 #a1a1a1 #8f8f8f;color: #555  !important;text-shadow: 0 1px 0 #d4d4d4;box-shadow: 0 1px 1px #c9c9c9, inset 0 1px 0 #d7d7d7;} .button.grey:hover{background: #c2c2c2;filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#bcbcbc', endColorstr='#c2c2c2');background: -webkit-linear-gradient(top,  #bcbcbc, #c2c2c2);background: -moz-linear-gradient(top,  #bcbcbc, #c2c2c2);border-color: #989898 #8e8e8e #878787;color: #555  !important;text-shadow: 0 1px 0 #dadada;box-shadow: 0 1px 1px #cdcdcd, inset 0 1px 0 #ccc;} .button.pink{background: #f67689;filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f78297', endColorstr='#f56778');background: -webkit-linear-gradient(top,  #f78297, #f56778);background: -moz-linear-gradient(top,  #f78297, #f56778);border-color: #df6f8b #da5f75 #d55061;color: #913944  !important;text-shadow: 0 1px 0 #f89ca9;box-shadow: 0 1px 1px #c1c1c1, inset 0 1px 0 #f9a1b1;} .button.pink:hover{background: #f67c90;filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f56c7e', endColorstr='#f78297');background: -webkit-linear-gradient(top,  #f56c7e, #f78297);background: -moz-linear-gradient(top,  #f56c7e, #f78297);border-color: #c36079 #c25669 #c14e5c;color: #913944  !important;text-shadow: 0 1px 0 #f9a6b4;box-shadow: 0 1px 1px #c3c3c3, inset 0 1px 0 #f8909e;} .button.orange{background: #fecc5f;filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#feda71', endColorstr='#febb4a');background: -webkit-linear-gradient(top,  #feda71, #febb4a);background: -moz-linear-gradient(top,  #feda71, #febb4a);border-color: #f5b74e #e5a73e #d6982f;color: #996633  !important;text-shadow: 0 1px 0 #fedd9b;box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #fee395;} .button.orange:hover{background: #fecb5e;filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#fec354', endColorstr='#fecd61');background: -webkit-linear-gradient(top,  #fec354, #fecd61);background: -moz-linear-gradient(top,  #fec354, #fecd61);border-color: #d29a3a #cc9436 #c89133;color: #996633  !important;text-shadow: 0 1px 0 #fee1a0;box-shadow: 0 1px 1px #d4d4d4, inset 0 1px 0 #fed17e;} .button.green{background: #b7d770;filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#cae285', endColorstr='#9fcb57');background: -webkit-linear-gradient(top,  #cae285, #9fcb57);background: -moz-linear-gradient(top,  #cae285, #9fcb57);border-color: #adc671 #98b65b #87aa4a;color: #5d7731  !important;text-shadow: 0 1px 0 #cfe5a4;box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #d7e9a4;} .button.green:hover{background: #b9d972;filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#b8d872', endColorstr='#b9d972');background: -webkit-linear-gradient(top,  #b8d872, #b9d972);background: -moz-linear-gradient(top,  #b8d872, #b9d972);border-color: #8bb14d #83a648 #7d9e45;color: #5d7731  !important;text-shadow: 0 1px 0 #d5e8aa;box-shadow: 0 1px 1px #d5d5d5, inset 0 1px 0 #cae295;} .button.blue{background: #92dbf6;filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#abe4f8', endColorstr='#6fcef3');background: -webkit-linear-gradient(top,  #abe4f8, #6fcef3);background: -moz-linear-gradient(top,  #abe4f8, #6fcef3);border-color: #8dc5da #76b7cf #63abc7;color: #42788e  !important;text-shadow: 0 1px 0 #b6e6f9;box-shadow: 0 1px 1px #d6d6d6, inset 0 1px 0 #c0ebfa;} .button.blue:hover{background: #92dbf6;border-color: #7caec0 #68a3ba #5a9cb5;text-shadow: 0 1px 0 #bee9fa;box-shadow: 0 1px 1px #d6d6d6, inset 0 1px 0 #ade4f8;color: #42788e  !important;} .button.purple{background: #dfaeda;filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8c4e4', endColorstr='#d494ce');background: -webkit-linear-gradient(top,  #e8c4e4, #d494ce);background: -moz-linear-gradient(top,  #e8c4e4, #d494ce);border-color: #bc9db9 #ad89aa #a1799d;color: #7b5777  !important;text-shadow: 0 1px 0 #eacae6;box-shadow: 0 1px 1px #d5d5d5, inset 0 1px 0 #eed3eb;} .button.purple:hover{background: #e0b1db;filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#deabd9', endColorstr='#e0b1db');background: -webkit-linear-gradient(top,  #deabd9, #e0b1db);background: -moz-linear-gradient(top,  #deabd9, #e0b1db);border-color: #a482a0 #9b7897 #947090;color: #7b5777  !important;text-shadow: 0 1px 0 #ecd0e9;box-shadow: 0 1px 1px #cdcdcd, inset 0 1px 0 #ccc;} .button.teal{background: #9cedef;filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#b7f2f4', endColorstr='#7ce7ea');background: -webkit-linear-gradient(top,  #b7f2f4, #7ce7ea);background: -moz-linear-gradient(top,  #b7f2f4, #7ce7ea);border-color: #90c6c8 #78bdc0 #65b6ba;color: #437b7d  !important;text-shadow: 0 1px 0 #bef3f5;box-shadow: 0 1px 1px #d5d5d5, inset 0 1px 0 #c9f5f7;} .button.teal:hover{background: #9fedf0;border-color: #7db9bb #6bb2b5 #5dacaf;color: #437b7d  !important;text-shadow: 0 1px 0 #c5f4f6;box-shadow: 0 1px 1px #d5d5d5, inset 0 1px 0 #b7f2f4;} .button.darkblue{background: #a5b8c6;filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#becbd6', endColorstr='#88a1b4');background: -webkit-linear-gradient(top,  #becbd6, #88a1b4);background: -moz-linear-gradient(top,  #becbd6, #88a1b4);border-color: #a2afb8 #8696a1 #6f818f;color: #515f6a  !important;text-shadow: 0 1px 0 #c4d0d9;box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #ced8e0;} .button.darkblue:hover{background: #adbfcb;border-color: #8996a0 #798791 #6c7a85;color: #515f6a  !important;text-shadow: 0 1px 0 #ced9e0;box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #c2cfd8;} .button.black{background: #525252;filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#5e5e5e', endColorstr='#434343');background: -webkit-linear-gradient(top,  #5e5e5e, #434343);background: -moz-linear-gradient(top,  #5e5e5e, #434343);border-color: #4c4c4c #313131 #1f1f1f;color: #fff  !important;text-shadow: 0 1px 0 #2e2e2e;box-shadow: 0 1px 1px #afafaf, inset 0 1px 0 #868686;} .button.black:hover{background: #5a5a5a;border-color: #2c2c2c #1c1c1c #101010;color: #fff  !important;text-shadow: 0 1px 0 #363636;box-shadow: 0 1px 1px #b1b1b1, inset 0 1px 0 #838383;} \u003C\/style\u003E\u003Cdiv id=\"demobotones\"\u003E\u003Ca class=\"button white\" href=\"#\"\u003Eejemplo\u003C\/a\u003E\u003Ca class=\"button grey\" href=\"#\"\u003Eejemplo\u003C\/a\u003E\u003Ca class=\"button pink\" href=\"#\"\u003Eejemplo\u003C\/a\u003E\u003Ca class=\"button orange\" href=\"#\"\u003Eejemplo\u003C\/a\u003E\u003Ca class=\"button green\" href=\"#\"\u003Eejemplo\u003C\/a\u003E\u003Ca class=\"button blue\" href=\"#\"\u003Eejemplo\u003C\/a\u003E\u003Ca class=\"button purple\" href=\"#\"\u003Eejemplo\u003C\/a\u003E\u003Ca class=\"button teal\" href=\"#\"\u003Eejemplo\u003C\/a\u003E\u003Ca class=\"button darkblue\" href=\"#\"\u003Eejemplo\u003C\/a\u003E\u003Ca class=\"button black\" href=\"#\"\u003Eejemplo\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EEste es el CSS de uno de los botones:\u003C\/div\u003E\u003Cpre\u003E.button { \/* clase general *\/\n  border: 1px solid #dedede;\n  border-radius: 3px;\n  color: #555;\n  display: inline-block;\n  font: bold 12px\/12px HelveticaNeue, Arial;\n  padding: 8px 11px;\n  text-decoration: none;\n}\n\n.button.white{\n  background: #f5f5f5;\n  border-color: #dedede #d8d8d8 #d3d3d3;\n  box-shadow: 0 1px 1px #eaeaea, inset 0 1px 0 #fbfbfb;\n  color: #555;\n  text-shadow: 0 1px 0 #fff;\n  background: -moz-linear-gradient(top,  #f9f9f9, #f0f0f0);\n  background: -webkit-linear-gradient(top,  #f9f9f9, #f0f0f0);\n  background: o-linear-gradient(top,  #f9f9f9, #f0f0f0);\n  background: ms-linear-gradient(top,  #f9f9f9, #f0f0f0);\n  background: linear-gradient(top,  #f9f9f9, #f0f0f0);\n  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f0f0f0');\n}\n\n.button.white:hover{\n    background: #f4f4f4;\n    border-color: #c7c7c7 #c3c3c3 #bebebe;\n    box-shadow: 0 1px 1px #ebebeb, inset 0 1px 0 #f3f3f3;\n    text-shadow: 0 1px 0 #fdfdfd;\n    background: -moz-linear-gradient(top,  #efefef, #f8f8f8);\n    background: -webkit-linear-gradient(top,  #efefef, #f8f8f8);\n    background: -o-linear-gradient(top,  #efefef, #f8f8f8);\n    background: -ms-linear-gradient(top,  #efefef, #f8f8f8);\n    background: linear-gradient(top,  #efefef, #f8f8f8);\n    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#efefef', endColorstr='#f8f8f8');\n}\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ESí, ya sé, tener que escribir varias propiedades para los distintos navgadores es realmente molesto pero, es lo que hay.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"referenciaExterna\"\u003E\u003Cspan\u003EREFERENCIAS:\u003C\/span\u003E\u003Ca href=\"http:\/\/www.lab.tommasoraspo.com\/simple-web-buttoms\/index.html\" target=\"_blank\"\u003Elab.tommasoraspo.com\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/611703038434751878\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/11\/botones-simples-con-css.html#comment-form","title":"9 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/611703038434751878"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/611703038434751878"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/11\/botones-simples-con-css.html","title":"Botones simples con CSS"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"9"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-378254213975087841"},"published":{"$t":"2012-11-15T00:00:00.000-03:00"},"updated":{"$t":"2012-11-15T00:00:04.391-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Firefox"}],"title":{"type":"text","$t":"Firefox 16: Sin prefijos en el CSS"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003E\u003Cimg class=\"izquierda\" src=\"http:\/\/2.bp.blogspot.com\/-9e8pEaQIhac\/UJF7DAeCmYI\/AAAAAAAAVNA\/SHpPLPtUt-k\/s165\/firefox16.jpg\" \/\u003EA partir de la versión 16 de Firefox, ya resulta innecesario agregar prefijos en la mayoría de las propiedades de CSS3 que se utilicen en este navegador con lo cual, poco a poco, nos vamos acercando a la \u003Ci\u003Eestandarización\u003C\/i\u003E mínima que requiere el diseño \u003Cspan style=\"font-style: italic;\"\u003Eweb\u003C\/span\u003E: hablar el mismo idioma.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nAsí el \u003Cspan style=\"font-weight: bold;\"\u003E-moz-\u003C\/span\u003E puede desaparecer de las propiedades animation, transition, transform y de las gradientes:\u003C\/div\u003E\u003Cul class=\"lista\"\u003E\u003Cli\u003Eanimation, animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-play-state, animation-fill-mode, @keyframes\u003C\/li\u003E\n\u003Cli\u003Etransition, transition-property, transition-delay, transition-duration, transition-timing-function\u003C\/li\u003E\n\u003Cli\u003ECSS3 Transforms  transform, transform-origin, transform-style, backface-visibility, perspective, perspective-origin\u003C\/li\u003E\n\u003Cli\u003ECSS3 Image Values  linear-gradient(), radial-gradient(), repeating-linear-gradient(), repeating-linear-gradient()\u003C\/li\u003E\n\u003C\/ul\u003E\u003Cdiv style=\"text-align: justify;\"\u003EEs de esperar que la gente de Chrome haga lo mismo rápidamente y aliviarnos la tarea de estar tecleando y tecleando.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"referenciaExterna\"\u003E\u003Cspan\u003EREFERENCIAS:\u003C\/span\u003E\u003Ca href=\"https:\/\/hacks.mozilla.org\/2012\/07\/aurora-16-is-out\/\" target=\"_blank\"\u003Ehacks.mozilla.org\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/378254213975087841\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/11\/firefox-16-sin-prefijos-en-el-css.html#comment-form","title":"5 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/378254213975087841"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/378254213975087841"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/11\/firefox-16-sin-prefijos-en-el-css.html","title":"Firefox 16: Sin prefijos en el CSS"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/-9e8pEaQIhac\/UJF7DAeCmYI\/AAAAAAAAVNA\/SHpPLPtUt-k\/s72-c\/firefox16.jpg","height":"72","width":"72"},"thr$total":{"$t":"5"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-7066875359110780899"},"published":{"$t":"2012-10-11T00:11:00.000-03:00"},"updated":{"$t":"2017-06-12T00:46:55.911-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"},{"scheme":"http://www.blogger.com/atom/ns#","term":"HTML"}],"title":{"type":"text","$t":"El atributo required"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EEl atributo \u003Cspan style=\"font-weight: bold;\"\u003Erequired\u003C\/span\u003E es otra de las nuevas alternativas que se agregan al HTML5 y lo que hace es indicar que cierto campo debe ser \"llenado\" y evitar que un formulario se envíe sin contenido.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"vagacode\"\u003E\u003Cdiv class=\"sue\"\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/xzoeUGCl.jpg\"\u003E\u003Cp\u003EAunque la verificación final de los datos enviados desde un formulario debe ser hecha en el servidor que los procesará, siempre es bueno realizar una validación previa con JavaScript y así reducir los accesos y evitar el envío de datos vacíos o nulos.\u003C\/p\u003E\u003C\/div\u003E\u003Cdiv class=\"gowi\"\u003E\u003Cspan\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/yrSqFzYl.png\"\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/validacion-de-formularios\"\u003Eleer artículo actualizado\u003C\/a\u003E\u003C\/span\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/\"\u003E\u003Cimg class=\"wlogo\" src=\"http:\/\/i.imgur.com\/QZHLte7.png\"\u003E\u003C\/a\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/7066875359110780899\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/10\/el-atributo-required.html#comment-form","title":"5 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/7066875359110780899"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/7066875359110780899"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/10\/el-atributo-required.html","title":"El atributo required"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"5"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-2324254369067775835"},"published":{"$t":"2012-10-03T00:04:00.000-03:00"},"updated":{"$t":"2012-10-03T00:04:01.028-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Bordes, listas, el primero y el último"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EEsta es una solución sencilla a un problema común.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nTengo una lista cualquiera y quiero ponerle un borde o separador a cada uno de los items que la componen:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div id=\"demobordes\"\u0026gt;\n  \u0026lt;ul\u0026gt;\n    \u0026lt;li\u0026gt;el primer item\u0026lt;\/li\u0026gt;\n    \u0026lt;li\u0026gt;el segundo item\u0026lt;\/li\u0026gt;\n    \u0026lt;li\u0026gt;el tercer item\u0026lt;\/li\u0026gt;\n    \u0026lt;li\u0026gt;el último item\u0026lt;\/li\u0026gt;\n\u0026lt;\/ul\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EEntonces pruebo con una regla básica:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;style\u0026gt;\n#demobordes li {\n  background-color: #000;\n  border-bottom: 2px dotted #ABC;\n  border-top: 2px dotted #ABC;\n  color: #888;\n  padding: 5px 10px;\n}\n\u0026lt;\/style\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003Epero ... el primero se ve bien, el último también y los del medio se superponen, haciéndolos mas \"gordos\":\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E.demobordes {border: 1px solid #444;margin: 0 auto;width: 300px;} .demobordes ul {margin: 0;padding: 20px;}\n.demobordes li {background-color: #000;color: #888;padding: 5px 10px;} #demobordes-1 li {border-bottom: 2px dotted #ABC;border-top: 2px dotted #ABC;} #demobordes-2-1 li {border-bottom: 2px dotted #ABC;} #demobordes-2-2 li {border-top: 2px dotted #ABC;} #demobordes-3-1 li {border-bottom: 2px dotted #ABC;} #demobordes-3-1 li:first-child{border-top: 2px dotted #ABC;} #demobordes-3-2 li {border-top: 2px dotted #ABC;} #demobordes-3-2 li:last-child{border-bottom: 2px dotted #ABC;}\u003C\/style\u003E\u003Cdiv class=\"demobordes\" id=\"demobordes-1\"\u003E\u003Cul\u003E\u003Cli\u003Eel primer item\u003C\/li\u003E\n\u003Cli\u003Eel segundo item\u003C\/li\u003E\n\u003Cli\u003Eel tercer item\u003C\/li\u003E\n\u003Cli\u003Eel último item\u003C\/li\u003E\n\u003C\/ul\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EEntonces, pruebo, sólo dejo un borde, el de abajo o el de arriba pero, en ambos casos siempre me falta uno; o el primer item no tiene un borde superior o le falta el borde al último y yo quiero que todos tengan un borde:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"margin:0 auto;width:610px\"\u003E\u003Cdiv class=\"demobordes\" id=\"demobordes-2-1\" style=\"float:left\"\u003E\u003Cul\u003E\u003Cli\u003Eel primer item\u003C\/li\u003E\n\u003Cli\u003Eel segundo item\u003C\/li\u003E\n\u003Cli\u003Eel tercer item\u003C\/li\u003E\n\u003Cli\u003Eel último item\u003C\/li\u003E\n\u003C\/ul\u003E\u003C\/div\u003E\u003Cdiv class=\"demobordes\" id=\"demobordes-2-2\" style=\"float:right\"\u003E\u003Cul\u003E\u003Cli\u003Eel primer item\u003C\/li\u003E\n\u003Cli\u003Eel segundo item\u003C\/li\u003E\n\u003Cli\u003Eel tercer item\u003C\/li\u003E\n\u003Cli\u003Eel último item\u003C\/li\u003E\n\u003C\/ul\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv style=\"clear:both;\"\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EY como el navegador no es adivino, lo que debo hacer es indicarle eso, si todos los items tienen un borde inferior (border-bottom) quiero que el primero tenga un borde superior y para eso, uso \u003Cspan style=\"font-weight: bold;\"\u003Efirst-child\u003C\/span\u003E:\u003C\/div\u003E\u003Cpre\u003E#demobordes li {\n  .......\n  border-bottom: 2px dotted #ABC;\n}\n#demobordes li:first-child { border-top: 2px dotted #ABC; }\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EY al revés, si todos tienen un borde superior (border-top) le digo que el último tenga un borde inferior con \u003Cspan style=\"font-weight: bold;\"\u003Elast-child\u003C\/span\u003E:\u003C\/div\u003E\u003Cpre\u003E#demobordes li {\n  .......\n  border-top: 2px dotted #ABC;\n}\n#demobordes li:last-child { border-bottom: 2px dotted #ABC; }\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EY con eso resuelvo el asunto:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"margin:0 auto;width:610px\"\u003E\u003Cdiv class=\"demobordes\" id=\"demobordes-3-1\" style=\"float:left\"\u003E\u003Cul\u003E\u003Cli\u003Eel primer item\u003C\/li\u003E\n\u003Cli\u003Eel segundo item\u003C\/li\u003E\n\u003Cli\u003Eel tercer item\u003C\/li\u003E\n\u003Cli\u003Eel último item\u003C\/li\u003E\n\u003C\/ul\u003E\u003C\/div\u003E\u003Cdiv class=\"demobordes\" id=\"demobordes-3-2\" style=\"float:right\"\u003E\u003Cul\u003E\u003Cli\u003Eel primer item\u003C\/li\u003E\n\u003Cli\u003Eel segundo item\u003C\/li\u003E\n\u003Cli\u003Eel tercer item\u003C\/li\u003E\n\u003Cli\u003Eel último item\u003C\/li\u003E\n\u003C\/ul\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv style=\"clear:both;\"\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/2324254369067775835\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/10\/bordes-listas-el-primero-y-el-ultimo.html#comment-form","title":"3 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/2324254369067775835"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/2324254369067775835"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/10\/bordes-listas-el-primero-y-el-ultimo.html","title":"Bordes, listas, el primero y el último"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"3"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-6467605306558411908"},"published":{"$t":"2012-10-01T00:06:00.000-03:00"},"updated":{"$t":"2012-10-01T00:06:00.150-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Una curiosidad: Logos de GMail con CSS3"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EEs probable que a nadie se le ocurra usar algo como esto pero, no deja de ser una curiosidad y bien armada.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nDigo que sería raro que alguien quisiera utilizarlo porque está armado exclusivamente con CSS3, no se vería en todos los navegadores y la cantidad de reglas es ... bueno, muchas.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"linkContraido\" onclick=\"SINO('gmailcss');\"\u003E\u003C\/div\u003E\u003Cpre id=\"gmailcss\" class=\"elementoOculto\"\u003E.gmail-logo, .gmail-logo *, .gmail-logo *:before, .gmail-logo *:after{margin:0;padding:0;background:transparent;border:0;outline:0;display:block;font:normal normal 0\/0 serif;}\n.gmail-logo{margin:0 auto;background:rgb(201, 44, 25);width:600px;height:400px;border-top:4px solid rgb(201, 44, 25);border-bottom:4px solid rgb(201, 44, 25);border-radius:10px;}\n.gmail-logo .gmail-box{overflow:hidden;float:left;width:440px;height:400px;margin:0 0 0 80px;background:white;border-radius:5px;}\n.gmail-logo .gmail-box:before{position:relative;content:'';z-index:1;background:white;float:left;width:320px;height:320px;border:100px solid rgb(201, 44, 25);margin:-310px 0 0 -40px;border-radius:10px;-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);}\n.gmail-logo .gmail-box:after{content:'';float:left;width:360px;height:360px;border:2px solid rgb(201, 44, 25);margin:10px 0 0 40px;-o-transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);}\n.gmail-logo:after{content:'';position:relative;z-index:2;content:'';float:left;margin-top:-404px;width:600px;height:408px;display:block;background:-moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);background:-o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(255, 255, 255, 0.1)));}\n.gmail-logo:hover{background:#313131;border-color:#313131;}\n.gmail-logo:hover .gmail-box:before{border-color:#313131;}\n.gmail-logo:hover .gmail-box:after{border-color:#313131;border-bottom-color:#fff;border-right-color:#fff;}\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E.gmail-logo, .gmail-logo *, .gmail-logo *:before, .gmail-logo *:after{margin:0;padding:0;background:transparent;border:0;outline:0;display:block;font:normal normal 0\/0 serif;}.gmail-logo{margin:0 auto;background:rgb(201, 44, 25);width:600px;height:400px;border-top:4px solid rgb(201, 44, 25);border-bottom:4px solid rgb(201, 44, 25);border-radius:10px;}.gmail-logo .gmail-box{overflow:hidden;float:left;width:440px;height:400px;margin:0 0 0 80px;background:white;border-radius:5px;}.gmail-logo .gmail-box:before{position:relative;content:'';z-index:1;background:white;float:left;width:320px;height:320px;border:100px solid rgb(201, 44, 25);margin:-310px 0 0 -40px;border-radius:10px;-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);}.gmail-logo .gmail-box:after{content:'';float:left;width:360px;height:360px;border:2px solid rgb(201, 44, 25);margin:10px 0 0 40px;-o-transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);}.gmail-logo:after{content:'';position:relative;z-index:2;content:'';float:left;margin-top:-404px;width:600px;height:408px;display:block;background:-moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);background:-o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(255, 255, 255, 0.1)));}.gmail-logo:hover{background:#313131;border-color:#313131;}.gmail-logo:hover .gmail-box:before{border-color:#313131;}.gmail-logo:hover .gmail-box:after{border-color:#313131;border-bottom-color:#fff;border-right-color:#fff;}\u003C\/style\u003E\u003Cdiv style=\"background-color: #FFF;margin: 0 auto;height: 440px;padding-top: 30px;width: 100%;\"\u003E\u003Cspan class='gmail-logo'\u003E\u003Cspan class='gmail-box'\u003E \u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003E\u003Cimg class=\"izquierda\" src=\"http:\/\/3.bp.blogspot.com\/-Z0zqsvGjikE\/UA2eJBqr86I\/AAAAAAAAUsE\/BM6bLIE7fUM\/s400\/gmaillogocss.jpg\" \/\u003ESólo son ejemplos que muestran la versatilidad de estas nuevas propiedades y además, en este caso, \u003Ca href=\"http:\/\/www.hongkiat.com\/blog\/gmail-logo-css3\/\" target=\"_blank\"\u003EIrham Kendeni\u003C\/a\u003E, que es su desarrollador, se ha esmerado en darnos as explicaciones paso a paso lo que permite tratar de entender la idea y de ese modo, poder aplicar esas cosas ara resolver nuestras propias necesidades que, seguramente, serán mucho más modestas.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nY si alguno cree que eso fue excesivo, es porque no vieron este otro:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E#gmail-logo2{margin:0 auto;display:block;width:380px;height:290px;-moz-transform:rotate(6deg);-webkit-transform:rotate(6deg);-o-transform:rotate(6deg);transform:rotate(6deg);-ms-transform:rotate(6deg);}#gmail-logo2 .element1{display:block;width:380px;height:290px;}#gmail-logo2 .element2 , #gmail-logo2 .element3, #gmail-logo2 .element4, #gmail-logo2 .element5 {float:left;display:block;width:380px;height:290px;margin:-290px 0 0 0;}#gmail-logo2 .element1::before{content:'';position:relative;margin:2px 0 0 14px;float:left;display:block;background:rgb(201, 44, 25);width:30px;height:276px;-moz-transform:rotate(3deg);-webkit-transform:rotate(3deg);-o-transform:rotate(3deg);transform:rotate(3deg);-ms-transform:rotate(3deg);border-radius:22px 0 0 20px;box-shadow:-1px 1px 0 rgb(109, 10, 0),-2px 2px 0 rgb(109, 10, 0),-3px 3px 0 rgb(109, 10, 0),-4px 4px 0 rgb(109, 10, 0),-5px 5px 0 rgb(109, 10, 0),-6px 6px 0 rgb(109, 10, 0);}#gmail-logo2 .element1::after{content:'';position:relative;margin:40px 5px 0 0;float:right;display:block;background:rgb(201, 44, 25);width:30px;height:238px;-moz-transform:rotate(3deg);-webkit-transform:rotate(3deg);-o-transform:rotate(3deg);transform:rotate(3deg);-ms-transform:rotate(3deg);border-radius:0 18px 26px 0;box-shadow:-1px 1px 0 rgb(109, 10, 0),-2px 2px 0 rgb(109, 10, 0),-3px 3px 0 rgb(109, 10, 0),-4px 4px 0 rgb(109, 10, 0),-5px 5px 0 rgb(109, 10, 0),-6px 6px 0 rgb(109, 10, 0),-6px 7px 0 rgb(109, 10, 0);}#gmail-logo2 .element2::before{content:'';margin:22px 0 0 48px;float:left;display:block;background:rgb(201, 44, 25);width:315px;height:14px;-moz-transform:rotate(6.8deg);-webkit-transform:rotate(6.8deg);-o-transform:rotate(6.8deg);transform:rotate(6.8deg);-ms-transform:rotate(6.8deg);box-shadow:0 1px 0 rgb(109, 10, 0),0 2px 0 rgb(109, 10, 0),0 3px 0 rgb(109, 10, 0),0 4px 0 rgb(109, 10, 0),0 5px 0 rgb(109, 10, 0),-6px 6px 0 rgb(109, 10, 0);}#gmail-logo2 .element2::after{content:'';position:relative;margin:230px 0 0 36px;float:left;display:block;background:rgb(201, 44, 25);width:310px;height:12px;box-shadow:0 1px 0 rgb(109, 10, 0),0 2px 0 rgb(109, 10, 0),0 3px 0 rgb(109, 10, 0),0 4px 0 rgb(109, 10, 0),0 5px 0 rgb(109, 10, 0),-6px 6px 0 rgb(109, 10, 0);}#gmail-logo2 .element3::before{content:'';position:relative;margin:8px 0 0 42px;float:left;display:block;background:rgb(201, 44, 25);width:42px;height:268px;-moz-transform:rotate(3deg);-webkit-transform:rotate(3deg);-o-transform:rotate(3deg);transform:rotate(3deg);-ms-transform:rotate(3deg);}#gmail-logo2 .element3::after{content:'';position:relative;margin:40px 32px 0 0;float:right;display:block;background:rgb(201, 44, 25);width:22px;height:236px;-moz-transform:rotate(3.0deg);-webkit-transform:rotate(3.0deg);-o-transform:rotate(3.0deg);transform:rotate(3.0deg);-ms-transform:rotate(3.0deg);box-shadow:0 1px 0 rgb(109, 10, 0),0 2px 0 rgb(109, 10, 0),0 3px 0 rgb(109, 10, 0),0 4px 0 rgb(109, 10, 0),0 5px 0 rgb(109, 10, 0),-6px 6px 0 rgb(109, 10, 0);}#gmail-logo2 .element4::before{content:'';position:relative;margin:-2px 0 0 130px;float:left;display:block;background:rgb(201, 44, 25);width:54px;height:192px;-moz-transform:rotate(-49deg);-webkit-transform:rotate(-49deg);-o-transform:rotate(-49deg);transform:rotate(-49deg);-ms-transform:rotate(-49deg);box-shadow:-1px 0 0 rgb(109, 10, 0),-2px 0 0 rgb(109, 10, 0),-3px 0 0 rgb(109, 10, 0),-4px 0 0 rgb(109, 10, 0),-5px 0 0 rgb(109, 10, 0),-6px 0 0 rgb(109, 10, 0),-7px 0 0 rgb(109, 10, 0),-8px 0 0 rgb(109, 10, 0);}#gmail-logo2 .element4::after{content:'';position:relative;margin:12px 88px 0 0;float:right;display:block;background:rgb(201, 44, 25);width:54px;height:186px;border-radius:30px 0 0 0;-moz-transform:rotate(53deg);-webkit-transform:rotate(53deg);-o-transform:rotate(53deg);transform:rotate(53deg);-ms-transform:rotate(53deg);}#gmail-logo2 .element5::before{content:'';position:relative;margin:115px 0 0 125px;float:left;display:block;background:rgb(201, 44, 25);width:2px;height:150px;-moz-transform:rotate(55deg);-o-transform:rotate(55deg);-webkit-transform:rotate(55deg);transform:rotate(55deg);-ms-transform:rotate(55deg);}#gmail-logo2 .element5::after{position:relative;content:'';margin:115px 0 0 150px;float:left;display:block;background:rgb(201, 44, 25);width:2px;height:150px;-moz-transform:rotate(-50deg);-webkit-transform:rotate(-50deg);-o-transform:rotate(-50deg);transform:rotate(-50deg);-ms-transform:rotate(-50deg);}#gmail-logo2 .element1::before{z-index:3;}#gmail-logo2 .element1::after{z-index:1;}#gmail-logo2 .element2::before{}#gmail-logo2 .element2::after{z-index:2;}#gmail-logo2 .element3::before{z-index:5;}#gmail-logo2 .element3::after{z-index:1;}#gmail-logo2 .element4::before{z-index:4;}#gmail-logo2 .element4::after{z-index:3;}#gmail-logo2 .element5::before{}#gmail-logo2 .element5::after{}#gmail-logo2:hover *::after,#gmail-logo2:hover *::before{background:rgba(20, 196, 7, 1);}#gmail-logo2:hover .element1::before{box-shadow:-1px 1px 0 rgb(10, 90, 4),-2px 2px 0 rgb(10, 90, 4),-3px 3px 0 rgb(10, 90, 4),-4px 4px 0 rgb(10, 90, 4),-5px 5px 0 rgb(10, 90, 4),-6px 6px 0 rgb(10, 90, 4);}#gmail-logo2:hover .element1::after{box-shadow:-1px 1px 0 rgb(10, 90, 4),-2px 2px 0 rgb(10, 90, 4),-3px 3px 0 rgb(10, 90, 4),-4px 4px 0 rgb(10, 90, 4),-5px 5px 0 rgb(10, 90, 4),-6px 6px 0 rgb(10, 90, 4),-6px 7px 0 rgb(10, 90, 4);}#gmail-logo2:hover .element2::before{box-shadow:0 1px 0 rgb(10, 90, 4),0 2px 0 rgb(10, 90, 4),0 3px 0 rgb(10, 90, 4),0 4px 0 rgb(10, 90, 4),0 5px 0 rgb(10, 90, 4),-6px 6px 0 rgb(10, 90, 4);}#gmail-logo2:hover .element2::after{box-shadow:0 1px 0 rgb(10, 90, 4),0 2px 0 rgb(10, 90, 4),0 3px 0 rgb(10, 90, 4),0 4px 0 rgb(10, 90, 4),0 5px 0 rgb(10, 90, 4),-6px 6px 0 rgb(10, 90, 4);}#gmail-logo2:hover .element3::after{box-shadow:0 1px 0 rgb(10, 90, 4),0 2px 0 rgb(10, 90, 4),0 3px 0 rgb(10, 90, 4),0 4px 0 rgb(10, 90, 4),0 5px 0 rgb(10, 90, 4),-6px 6px 0 rgb(10, 90, 4);}#gmail-logo2:hover .element4::before{box-shadow:-1px 0 0 rgb(10, 90, 4),-2px 0 0 rgb(10, 90, 4),-3px 0 0 rgb(10, 90, 4),-4px 0 0 rgb(10, 90, 4),-5px 0 0 rgb(10, 90, 4),-6px 0 0 rgb(10, 90, 4),-7px 0 0 rgb(10, 90, 4),-8px 0 0 rgb(10, 90, 4);}\u003C\/style\u003E\u003Cdiv style=\"background-color: #FFF;margin: 0 auto;width:100%; padding-top: 50px; height: 340px;\"\u003E\u003Cspan id='gmail-logo2'\u003E\u003Cspan class='element1'\u003E\u0026nbsp;\u003C\/span\u003E\u003Cspan class='element2'\u003E\u0026nbsp;\u003C\/span\u003E\u003Cspan class='element3'\u003E\u0026nbsp;\u003C\/span\u003E\u003Cspan class='element4'\u003E\u0026nbsp;\u003C\/span\u003E\u003Cspan class='element5'\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/6467605306558411908\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/10\/una-curiosidad-logos-de-gmail-con-css3.html#comment-form","title":"0 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/6467605306558411908"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/6467605306558411908"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/10\/una-curiosidad-logos-de-gmail-con-css3.html","title":"Una curiosidad: Logos de GMail con CSS3"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/3.bp.blogspot.com\/-Z0zqsvGjikE\/UA2eJBqr86I\/AAAAAAAAUsE\/BM6bLIE7fUM\/s72-c\/gmaillogocss.jpg","height":"72","width":"72"},"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-3845921884173409931"},"published":{"$t":"2012-09-28T00:00:00.000-03:00"},"updated":{"$t":"2012-09-28T00:00:06.424-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"},{"scheme":"http://www.blogger.com/atom/ns#","term":"servicios"}],"title":{"type":"text","$t":"CSSload: Gráficos de carga con CSS"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003E\u003Ca href=\"http:\/\/cssload.net\/\" target=\"_blank\"\u003ECSSload\u003C\/a\u003E es un sitio donde podemos generar \"imágenes\" de carga que no son imágenes sino gráficos creados con CSS, aprovechando de ese modo, las facilidades que nos dan estas nuevas propiedades que nos permiten animar casi cualquier cosa y que funcionan en Firefox, Chrome, Safari y otros navegadores modernos.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nNo hay mucho que explicar. Basta entrar en la página y seleccionar alguno de los modelos disponibles y luego, establecer los parámetros de color y velocidad. Todos los cambios pueden ser previsualizados y una vez que nos hemos decidido, el botón \u003Cb\u003EGet code\u003C\/b\u003E nos mostrará el código necesario para insertarlo en cualquier página \u003Cspan style=\"font-style: italic;\"\u003Eweb\u003C\/span\u003E.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"text-align: center;\"\u003E\u003Cimg src=\"http:\/\/4.bp.blogspot.com\/-Jf8a4em8rWY\/TqWmkK6UjlI\/AAAAAAAAS-4\/RaJgowoBJes\/s00\/loadingcss.png\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv\u003E\u003Cstyle\u003E#floatingBarsG {height: 80px;float: left;margin: 0 20px;position: relative;width: 65px;} .blockG {position:absolute;background-color:#FFF;width:10px;height:24px;border-radius:8px 8px 0 0;-webkit-transform:scale(0.4);-webkit-animation-name:fadeG;-webkit-animation-duration:1.04s;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:linear;-moz-transform:scale(0.4);-moz-animation-name:fadeG;-moz-animation-duration:1.04s;-moz-animation-iteration-count:infinite;-moz-animation-direction:linear} #rotateG_01{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);left:0;top:28px;-webkit-animation-delay:0.39s;-moz-animation-delay:0.39s} #rotateG_02{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);left:8px;top:10px;-webkit-animation-delay:0.52s;-moz-animation-delay:0.52s} #rotateG_03{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);left:26px;top:3px;-webkit-animation-delay:0.65s;-moz-animation-delay:0.65s} #rotateG_04{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);right:8px;top:10px;-webkit-animation-delay:0.78s;-moz-animation-delay:0.78s} #rotateG_05{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);right:0;top:28px;\n-webkit-animation-delay:0.9099999999999999s;-moz-animation-delay:0.9099999999999999s} #rotateG_06{-webkit-transform:rotate(135deg);-moz-transform:rotate(135deg);right:8px;bottom:7px;-webkit-animation-delay:1.04s;-moz-animation-delay:1.04s} #rotateG_07{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);bottom:0;left:26px;-webkit-animation-delay:1.1700000000000002s;-moz-animation-delay:1.1700000000000002s} #rotateG_08{-webkit-transform:rotate(-135deg);-moz-transform:rotate(-135deg);left:8px;bottom:7px;-webkit-animation-delay:1.3s;-moz-animation-delay:1.3s} @-webkit-keyframes fadeG{0%{background-color:#000000}100%{background-color:#FFF}} @-moz-keyframes fadeG{0%{background-color:#000000}100%{background-color:#FFF}} \u003C\/style\u003E\u003Cdiv id=\"floatingBarsG\"\u003E\u003Cdiv class=\"blockG\" id=\"rotateG_01\"\u003E\u003C\/div\u003E\u003Cdiv class=\"blockG\" id=\"rotateG_02\"\u003E\u003C\/div\u003E\u003Cdiv class=\"blockG\" id=\"rotateG_03\"\u003E\u003C\/div\u003E\u003Cdiv class=\"blockG\" id=\"rotateG_04\"\u003E\u003C\/div\u003E\u003Cdiv class=\"blockG\" id=\"rotateG_05\"\u003E\u003C\/div\u003E\u003Cdiv class=\"blockG\" id=\"rotateG_06\"\u003E\u003C\/div\u003E\u003Cdiv class=\"blockG\" id=\"rotateG_07\"\u003E\u003C\/div\u003E\u003Cdiv class=\"blockG\" id=\"rotateG_08\"\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv style=\"text-align: justify;\"\u003EEse código contiene dos partes, el estilo que es todo lo que está entre \u0026lt;style\u0026gt; \u0026lt;\/style\u0026gt; que podemos agregarlo en una entrada o en la misma plantilla y el HTML que son una serie de DIVs que deberemos ubicar allí donde quisiéramos mostrarlo.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nComo no requiere librerías de ningún tipo y no usa JavaScript, podemos modificarlo a gusto y a mi entender, es una buena manera de aprender cómo funcionan estas cosas que a simple vista, son raras.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca href=\"\" onclick=\"SINO('loadcss');\"\u003EVer\/Ocultar otro ejemplo:\u003C\/a\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv id=\"loadcss\" class=\"elementoOculto\"\u003E\u003Cstyle\u003E#bowlG {height: 330px;margin: 0 auto;position: relative;width: 305px;} #bowl_ringG{position:absolute;width:255px;height:255px;border:23px solid #1f82bd;border-radius:255px;box-shadow: 2px 0 11px #FFF, -2px 0 11px #FFF;} .ball_holderG{position:absolute;width:68px;height:255px;left:94px;top:0px;-webkit-animation-name:ball_moveG;-webkit-animation-duration:1.1s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-animation-name:ball_moveG;-moz-animation-duration:1.1s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;} .ballG{position:absolute;left:0px;top:-60px;width:102px;height:102px;background:#0f82bd;border-radius:85px;box-shadow: 0 0 30px #FFF inset;} @-webkit-keyframes ball_moveG{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}} @-moz-keyframes ball_moveG{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(360deg)}} \u003C\/style\u003E\u003Cdiv id=\"bowlG\"\u003E\u003Cdiv id=\"bowl_ringG\"\u003E\u003Cdiv class=\"ball_holderG\"\u003E\u003Cdiv class=\"ballG\"\u003E\u003C\/div\u003E\u003C\/div\u003E\u003C\/div\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/3845921884173409931\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/09\/cssload-graficos-de-carga-con-css.html#comment-form","title":"1 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/3845921884173409931"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/3845921884173409931"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/09\/cssload-graficos-de-carga-con-css.html","title":"CSSload: Gráficos de carga con CSS"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/-Jf8a4em8rWY\/TqWmkK6UjlI\/AAAAAAAAS-4\/RaJgowoBJes\/s72-c\/loadingcss.png","height":"72","width":"72"},"thr$total":{"$t":"1"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-6062499297685282281"},"published":{"$t":"2012-09-10T00:03:00.002-03:00"},"updated":{"$t":"2017-09-26T00:08:46.719-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Flotaciones, fondos, problemas, alternativas"},"content":{"type":"html","$t":"\u003Cdiv class=\"vagacode\"\u003E\u003Cdiv class=\"sue\"\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/wnhaMYo.jpg\"\u003E\u003Cp\u003ECuando a un elemento le agregamos la propiedad float, lo convertimos en un bloque pero con una característica especial: su ancho no ocupa el 100% del contenedor sino sólo el de su contenido pero, además, lo quitamos del orden natural de la página; de este modo, todo lo que lo rodea se moverá y se acomodará como pueda para hacerle lugar.\u003C\/p\u003E\u003C\/div\u003E\u003Cdiv class=\"gowi\"\u003E\u003Cspan\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/yrSqFzYl.png\"\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/los-elementos-flotantes\"\u003Eleer artículo actualizado\u003C\/a\u003E\u003C\/span\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/\"\u003E\u003Cimg class=\"wlogo\" src=\"http:\/\/i.imgur.com\/QZHLte7.png\"\u003E\u003C\/a\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/6062499297685282281\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/09\/flotaciones-fondos-problemas.html#comment-form","title":"10 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/6062499297685282281"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/6062499297685282281"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/09\/flotaciones-fondos-problemas.html","title":"Flotaciones, fondos, problemas, alternativas"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"10"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-482297088334310762"},"published":{"$t":"2012-08-30T00:15:00.001-03:00"},"updated":{"$t":"2012-08-30T00:15:00.283-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"El problema de los menús que no se despliegan"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EToda etiqueta es un rectángulo, si tiene un borde o un color de fondo esto es evidente pero, si no lo tiene, sigue siendo un rectángulo que ocupa un determinado espacio y se ubica en una determinada posición de la página. Esta es la clave de todo, entender eso y además, tener en cuenta que el orden en que son agregadas influirá en su resultado ya que, aunque las veamos ubicadas gráficamente de cierto modo, para el navegador, eso, sólo es un dibujito ya que todos ellos siguen una regla sencilla: para ellos, el orden natural es secuencial, de arriba hacia abajo y de derecha a izquierda.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEs cierto que pueden mostrarse de cualquier otro modo, para eso están las propiedades (float, position, margin, etc) pero, al navegador, no le interesan esos detalles y eso, justamente, es lo que puede crear conflictos o problemas.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSi toda etiqueta es un rectángulo real (tiene ancho y tiene alto aunque no los definamos) y armamos algo como esto, donde simplemente hay dos DIVs, uno arriba y otro abajo y al de abajo lo \"subimos\" un poco con un margen negativo, tal vez, dependiendo de las reglas de estilo que tengamos, el enlace que está allí, no funcionará. Si ponen el cursor encima y tratan de hacer \u003Ci\u003Eclick\u003C\/i\u003E, no pasará nada, ni siquiera veremos la manito indicativa:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"margin: 0 auto;position: relative;text-align: center;width: 300px;\"\u003E\u003Cdiv id=\"dzi1\" style=\"font-size: 20px;height: 50px;position: relative;z-index:100;\"\u003EA B C D E F\u003C\/div\u003E\u003Cdiv id=\"dzi2\" style=\"z-index:99;background-color: #000;border: 1px solid #444;margin-top: -20px;width: 300px;position: relative;\"\u003E\u003Ca href=\"#\"\u003Eun enlace\u003C\/a\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003E¿Por qué pasa esto? porque el de arriba está encima del enlace y, aunque es transparente, sus reglas de estilo TAPAN el enlace. Si le pusiéramos un color de fondo, lo veríamos claramente:\u003Cbr \/\u003E\n\u003Ca href=\"javascript:void(0);\" onclick=\"$('#dzi1').css('background-color','rgba(255,255,255,.5)');\"\u003Ever\u003C\/a\u003E | \u003Ca href=\"javascript:void(0);\" onclick=\"$('#dzi1').css('background-color','transparent');\"\u003Erestaurar\u003C\/a\u003E.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n¿Cómo se soluciona? Lo lógico sería repasar las reglas de estilo de esas etiquetas ¿No será que uno es demasiado alto y compensamos eso con márgenes negativos? ¿Es necesaria la propiedad position? Las respuestas pueden ser infinitas y no pretendo darlas, todo dependerá y, llegado el caso, siempre nos queda la opción de usar \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2011\/09\/jugando-superponer-contenidos.html\" target=\"_blank\"\u003Ez-index\u003C\/a\u003E. En este ejemplo, bastaría invertir el orden:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Ca href=\"javascript:void(0);\" onclick=\"$('#dzi2').css('z-index','100');$('#dzi1').css('z-index','99');\"\u003ECORREGIR EL ERROR\u003C\/a\u003E | \u003Ca href=\"javascript:void(0);\" onclick=\"$('#dzi2').css('z-index','99');$('#dzi1').css('z-index','100');\"\u003Ever error\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EEste mismo problema es el que genera muchísimas consultas sobre menús que no se despliegan aunque, en realidad, no es que no se desplieguen sino que no se ven desplegados.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSi tenemos un contenedor (un DIV) con ese menú que vimos armadito y lo agregamos al header de nuestro sitio, tal vez, dependiendo de dónde lo hayamos puesto y de las reglas de estilo del resto de nuestra página, se verá bien pero ¿no funciona?\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E#mdemo {border: 1px solid #444;margin: 0 auto;padding: 10px;width: 500px;} #mdemoup {position: relative;}\n#mdemoup ul {margin: 0 0 10px;text-align: justify;} #mdemoup ul li {background-color: #404951;color: #CCC;display: inline-block;padding: 2px 10px;cursor: pointer;position: relative;} #mdemoup ul li:hover {background-color: #505961;color: #FFF;} #mdemoup ul li ul {display: none;padding: 6px;margin: 0 0 0 -15px;position: absolute;} #mdemoup ul li ul li:first-child {border-top: 1px solid #808991;} #mdemoup ul li ul li {background-color: #505961;width: 90px;border-bottom: 1px solid #808991;} #mdemodown {background-color: #202931;color: #DDD;font-size: 12px;padding: 10px;text-align: justify;position: relative;} #mdemoup ul li:hover ul {display: block;}\u003C\/style\u003E\u003Cdiv id=\"mdemo\"\u003E\u003Cdiv id=\"mdemoup\"\u003E\u003Cul\u003E\u003Cli\u003Emenu 1\u003C\/li\u003E\n\u003Cli\u003Emenu 2\u003Cul\u003E\u003Cli\u003Esubmenu 2.1\u003C\/li\u003E\n\u003Cli\u003Esubmenu 2.2\u003C\/li\u003E\n\u003Cli\u003Esubmenu 2.3\u003C\/li\u003E\n\u003C\/ul\u003E\u003C\/li\u003E\n\u003Cli\u003Emenu 3\u003Cul\u003E\u003Cli\u003Esubmenu 3.1\u003C\/li\u003E\n\u003Cli\u003Esubmenu 3.2\u003C\/li\u003E\n\u003Cli\u003Esubmenu 3.3\u003C\/li\u003E\n\u003C\/ul\u003E\u003C\/li\u003E\n\u003Cli\u003Emenu 4\u003C\/li\u003E\n\u003C\/ul\u003E\u003C\/div\u003E\u003Cdiv id=\"mdemodown\"\u003EAliquam erat volutpat. Phasellus ligula augue, hendrerit sit amet pharetra et, auctor nec odio! Nunc placerat facilisis volutpat! Donec nisi elit, convallis nec vestibulum ac, aliquam quis magna! In aliquet arcu eget mi mollis at porta erat condimentum. Pellentesque congue ante non felis fringilla mattis. Morbi urna lectus; laoreet id tempor vitae, pretium id nibh. Sed nisl eros, molestie non luctus nec, pretium nec felis. Praesent pharetra egestas interdum. Quisque consequat placerat mi, in pharetra nisl mattis in. Aenean id orci vel enim ultrices eleifend!\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003E¿Por qué sólo se ve un pedacito? Por el mismo motivo que el enlace del ejemplo anterior no funcionaba aunque, en este caso, no se trata  de una etiqueta que es demasiado alta y tapa a la de abajo sino de una etiqueta cuya altura es escasa (UL LI) y que contiene otras que sólo se ven cuando se coloca el cursor encima pero, no tienen espacio suficiente ya que la etiqueta que está debajo (el texto), ocupa ese lugar así que queda encima del menú desplegado.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nOtra vez, esto se resuelve con z-index:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Ca href=\"javascript:void(0);\" onclick=\"$('#mdemoup').css('z-index','100');$('#mdemodown').css('z-index','99');\"\u003ECORREGIR ERROR\u003C\/a\u003E | \u003Ca href=\"javascript:void(0);\" onclick=\"$('#mdemoup').css('z-index','99');$('#mdemodown').css('z-index','100');\"\u003Ever error\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003E¿Y que es z-index? Un numero de orden que sólo se aplica a los elementos que tengan definida la propiedad position como relative, absolute o fixed y, dicho muy livianamente,  indica cuál está encima de cuál; por defecto, se \"apilan\" en el mismo orden en que se encuentran en el código así que en este caso, la segunda (el texto) tiene un valor implícito de z-index, superior a la primera (el menú) y bastaría invertir ese orden para que el menú se viera desplegado.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nDependiendo del caso (he usado muchas veces la palabra depender porque nada de todo esto es una ciencia exacta) deberemos agregarle las propiedades z-index al menú y al div inferior (un valor más alto al menú); o bien, simplemente, sólo agregar la propiedad z-index al menú (una valor cualquiera, no hace falta poner valores exorbitantes):\u003C\/div\u003E\u003Cpre\u003E#mi-menu {\n  position:relative;\n  z-index: 100;\n}\u003C\/pre\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/482297088334310762\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/08\/el-problema-de-los-menus-que-no-se.html#comment-form","title":"27 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/482297088334310762"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/482297088334310762"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/08\/el-problema-de-los-menus-que-no-se.html","title":"El problema de los menús que no se despliegan"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"27"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-8477329360531754588"},"published":{"$t":"2012-08-22T00:06:00.001-03:00"},"updated":{"$t":"2017-07-20T02:18:48.868-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Cinco selectores especiales"},"content":{"type":"html","$t":"\u003Cdiv class=\"vagacode\"\u003E\u003Cdiv class=\"sue\"\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/5zjHj4u.jpg\"\u003E\u003Cp\u003EEn CSS, un selector es un vínculo entre el HTML y la hoja de estilo. Todas las etiquetas son selectores y cada uno de ellas posee un conjunto de propiedades generales y particulares. Pero como esto es insuficiente, también existen selectores especiales que nos permiten crear reglas muy específicas.\u003C\/p\u003E\u003C\/div\u003E\u003Cdiv class=\"gowi\"\u003E\u003Cspan\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/yrSqFzYl.png\"\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/selectores-en-css\"\u003Eleer artículo actualizado\u003C\/a\u003E\u003C\/span\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/\"\u003E\u003Cimg class=\"wlogo\" src=\"http:\/\/i.imgur.com\/QZHLte7.png\"\u003E\u003C\/a\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/8477329360531754588\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/08\/cinco-selectores-especiales.html#comment-form","title":"0 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/8477329360531754588"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/8477329360531754588"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/08\/cinco-selectores-especiales.html","title":"Cinco selectores especiales"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-3451235539141099556"},"published":{"$t":"2012-08-20T00:04:00.001-03:00"},"updated":{"$t":"2017-10-29T00:47:18.402-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Muchas animaciones con CSS y mucha paciencia"},"content":{"type":"html","$t":"\u003Cdiv class=\"vagacode\"\u003E\u003Cdiv class=\"sue\"\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/N44cNUj.jpg\"\u003E\u003Cp\u003EUna animación con CSS es algo similar a una transisicón que se repite un número de veces y requiere de dos partes, establecer los intervalos y propiedades a modificar en @keyframes y la propiedad animation en cualquier etiqueta.\u003C\/p\u003E\u003C\/div\u003E\u003Cdiv class=\"gowi\"\u003E\u003Cspan\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/yrSqFzYl.png\"\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/animaciones-con-css\"\u003Eleer artículo actualizado\u003C\/a\u003E\u003C\/span\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/\"\u003E\u003Cimg class=\"wlogo\" src=\"http:\/\/i.imgur.com\/QZHLte7.png\"\u003E\u003C\/a\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/3451235539141099556\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/08\/muchas-animaciones-con-css-y-mucha.html#comment-form","title":"7 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/3451235539141099556"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/3451235539141099556"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/08\/muchas-animaciones-con-css-y-mucha.html","title":"Muchas animaciones con CSS y mucha paciencia"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"7"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-8329246916899371248"},"published":{"$t":"2012-08-15T00:04:00.001-03:00"},"updated":{"$t":"2017-07-20T02:18:54.082-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Esa cosa llamada child selector"},"content":{"type":"html","$t":"\u003Cdiv class=\"vagacode\"\u003E\u003Cdiv class=\"sue\"\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/5zjHj4u.jpg\"\u003E\u003Cp\u003EEn CSS, un selector es un vínculo entre el HTML y la hoja de estilo. Todas las etiquetas son selectores y cada uno de ellas posee un conjunto de propiedades generales y particulares. Pero como esto es insuficiente, también existen selectores especiales que nos permiten crear reglas muy específicas.\u003C\/p\u003E\u003C\/div\u003E\u003Cdiv class=\"gowi\"\u003E\u003Cspan\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/yrSqFzYl.png\"\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/selectores-en-css\"\u003Eleer artículo actualizado\u003C\/a\u003E\u003C\/span\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/\"\u003E\u003Cimg class=\"wlogo\" src=\"http:\/\/i.imgur.com\/QZHLte7.png\"\u003E\u003C\/a\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/8329246916899371248\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/08\/esa-cosa-llamada-child-selector.html#comment-form","title":"3 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/8329246916899371248"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/8329246916899371248"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/08\/esa-cosa-llamada-child-selector.html","title":"Esa cosa llamada child selector"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"3"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-5347773285342366866"},"published":{"$t":"2012-08-09T00:06:00.002-03:00"},"updated":{"$t":"2012-08-09T00:43:46.757-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"marquee con CSS3"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003E\u003Cimg class=\"izquierda\" src=\"http:\/\/4.bp.blogspot.com\/-sylxwKNaTsA\/UAsB0fWN4FI\/AAAAAAAAUrE\/bi-sg6koZ3I\/s170\/marqueecss.jpg\" \/\u003ELa \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2007\/03\/desplazamientos-de-textos-marquee.html\" target=\"_blank\"\u003Emarquees\u003C\/a\u003E o marquesinas \u003Ci\u003Ein spanish\u003C\/i\u003E, son una forma de mostrar distinto contenido, desplazándolo en cierta dirección. En HTML es una etiqueta bastante sencilla pero carece de opciones sofisticadas y ese desplazamiento es relativamente abrupto y constante con lo que los textos no suelen ser muy legibles.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nCon JavaScript es posible generar cosas similares y \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2007\/03\/desplazamiento-de-textos-scripts-1.html\" target=\"_blank\"\u003Edesplazar textos\u003C\/a\u003E de distintos modos pero, \u003Ca href=\"http:\/\/www.hongkiat.com\/blog\/css3-animation-advanced-marquee\/\" target=\"_blank\"\u003Ehongkiat.com\u003C\/a\u003E muestra una tercera opción que es generar \u003Ci\u003Emarquees\u003C\/i\u003E utilizando sólo CSS.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nClaro, aparentemente, si uno lee \"utilizando sólo CSS\" se imagina que es más sencillito pero, lamentablemente, aunque la idea es sencilla, como se utilizan propiedades que aún no están unificadas en todos los navegadores, es engorroso andar escribiendo cada una de ellas, sobre todo, las que que definen las reglas de \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2011\/12\/transiciones-y-animaciones.html\" target=\"_blank\"\u003Elas animaciones\u003C\/a\u003E.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nDe todos modos, acá vamos ...\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEl HTML donde colocaremos nuestra marquesina es simple, un DIV con cierta clase donde cada texto se incluye con una etiqueta P y si en el ejemplo uso dos clase simultáneamente es para poder controlar las dos variantes, una se moverá horizontalmente y otra, verticalmente:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div class=\"marquee marqueeV\"\u0026gt;\n\u0026lt;p\u0026gt; una línea de texto \u0026lt;\/p\u0026gt;\n\u0026lt;p\u0026gt; otra línea de texto \u0026lt;\/p\u0026gt;\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003E¿Por qué sólo pongo dos textos? Este sería el CSS genérico:\u003C\/div\u003E\u003Cpre\u003E\/* al contenedor lo dimesionamos tanto en su ancho como su alto *\/\n.marquee {\n  border: 1px solid #444;\n  border-radius: 5px;\n  height: 50px;\n  margin: 0 auto;\n  overflow: hidden;\n  position: relative;\n  width: 500px;\n}\n\/* cada párrafo *\/\n.marquee p {\n  color: #FFF;\n  font-family: Tahoma, Arial, sans-serif;\n  height: 100%;\n  line-height: 50px;\n  margin: 0;\n  position: absolute;\n  text-align: center;\n  width: 100%;\n  -moz-transform:translateX(100%);\n  -webkit-transform:translateX(100%);\n  transform:translateX(100%);\n}\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EY ahora, la animación de cada una de las etqieutas P:\u003C\/div\u003E\u003Cpre\u003E.marqueeH p:nth-child(1) {\n  -moz-animation: left-one 20s ease infinite;\n  -webkit-animation: left-one 20s ease infinite;\n  animation: left-one 20s ease infinite;\n}\n.marqueeH p:nth-child(2) {\n  -moz-animation: left-two 20s ease infinite;\n  -webkit-animation: left-two 20s ease infinite;\n  animation: left-two 20s ease infinite;\n}\n\n\/* lo molesto es de tener que crear las animaciones para cada navegador *\/\n\n\/* Mozilla *\/\n@-moz-keyframes left-one {\n  0%{-moz-transform:translateX(100%);}\n  10% {-moz-transform:translateX(0);}\n  40% {-moz-transform:translateX(0);}\n  50% {-moz-transform:translateX(-100%);}\n  100%{-moz-transform:translateX(-100%);}\n}\n@-moz-keyframes left-two {\n  0% {-moz-transform:translateX(100%);}\n  50% {-moz-transform:translateX(100%);}\n  60% {-moz-transform:translateX(0);}\n  90% {-moz-transform:translateX(0);}\n  100%{-moz-transform:translateX(-100%);}\n}\n\n\/* Chrome\/Safari *\/\n@-webkit-keyframes left-one {\n  0% {-webkit-transform:translateX(100%);}\n  10% {-webkit-transform:translateX(0);}\n  40% {-webkit-transform:translateX(0);}\n  50% {-webkit-transform:translateX(-100%);}\n  100%{-webkit-transform:translateX(-100%);}\n}\n@-webkit-keyframes left-two {\n  0% {-webkit-transform:translateX(100%);}\n  50% {-webkit-transform:translateX(100%);}\n  60% {-webkit-transform:translateX(0);}\n  90% {-webkit-transform:translateX(0);}\n  100%{-webkit-transform:translateX(-100%);}\n}\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EDonde, la velocidad es controlada por el valor indicado en:\u003C\/div\u003E\u003Cpre\u003Eanimation: left-two \u003Cspan style=\"font-weight: bold;\"\u003E20s\u003C\/span\u003E ease infinite;\u003C\/pre\u003E\u003Cstyle\u003E.marquee {border: 1px solid #444;border-radius: 5px;height: 50px;margin: 0 auto;overflow: hidden;position: relative;width: 500px;} .marquee p {color: #FFF;font-family: Tahoma, Arial, sans-serif;height: 100%;line-height: 50px;margin: 0;position: absolute;text-align: center;width: 100%;-moz-transform:translateX(100%);-webkit-transform:translateX(100%);transform:translateX(100%);} .marqueeH p:nth-child(1) {-moz-animation: left-one 20s ease infinite;-webkit-animation: left-one 20s ease infinite;animation: left-one 20s ease infinite;} .marqueeH p:nth-child(2) {-moz-animation: left-two 20s ease infinite;-webkit-animation: left-two 20s ease infinite;animation: left-two 20s ease infinite;} .marqueeV p {-moz-transform:translateY(-100%);-webkit-transform:translateY(-100%);transform:translateY(-100%);} .marqueeV p:nth-child(1) {-moz-animation: down-one 20s ease infinite;-webkit-animation: down-one 20s ease infinite;animation: down-one 20s ease infinite;} .marqueeV p:nth-child(2) {-moz-animation: down-two 20s ease infinite;-webkit-animation: down-two 20s ease infinite;animation: down-two 20s ease infinite;} @-moz-keyframes left-one {0%{-moz-transform:translateX(100%);}10% {-moz-transform:translateX(0);}40% {-moz-transform:translateX(0);}50% {-moz-transform:translateX(-100%);}100%{-moz-transform:translateX(-100%);}} @-moz-keyframes left-two {0% {-moz-transform:translateX(100%);}50% {-moz-transform:translateX(100%);}60% {-moz-transform:translateX(0);}90% {-moz-transform:translateX(0);}100%{-moz-transform:translateX(-100%);}} @-webkit-keyframes left-one {0% {-webkit-transform:translateX(100%);}10% {-webkit-transform:translateX(0);}40% {-webkit-transform:translateX(0);}50% {-webkit-transform:translateX(-100%);}100%{-webkit-transform:translateX(-100%);}} @-webkit-keyframes left-two {0% {-webkit-transform:translateX(100%);}50% {-webkit-transform:translateX(100%);}60% {-webkit-transform:translateX(0);}90% {-webkit-transform:translateX(0);}100%{-webkit-transform:translateX(-100%);}} @-moz-keyframes down-one {0%{-moz-transform:translateY(-100%);}10% {-moz-transform:translateY(0);}40% {-moz-transform:translateY(0);}50% {-moz-transform:translateY(100%);}100%{-moz-transform:translateY(100%);}}@-moz-keyframes down-two {0% {-moz-transform:translateY(-100%);}50% {-moz-transform:translateY(-100%);}60% {-moz-transform:translateY(0);}90% {-moz-transform:translateY(0);}100%{-moz-transform:translateY(100%);}}@-webkit-keyframes down-one {0% {-webkit-transform:translateY(-100%);}10% {-webkit-transform:translateY(0);}40% {-webkit-transform:translateY(0);}50% {-webkit-transform:translateY(100%);}100%{-webkit-transform:translateY(100%);}}@-webkit-keyframes down-two {0% {-webkit-transform:translateY(-100%);}50% {-webkit-transform:translateY(-100%);}60% {-webkit-transform:translateY(0);}90% {-webkit-transform:translateY(0);}100%{-webkit-transform:translateY(100%);}}\u003C\/style\u003E\u003Cdiv class=\"marquee marqueeH\"\u003E\u003Cp\u003Eusando animaciones para crear \"marquees\" con estilo ...\u003C\/p\u003E\u003Cp\u003E\u003Cimg class=\"nores\" width=\"15\" height=\"15\" src=\"http:\/\/3.bp.blogspot.com\/-gk9JetSOVmQ\/TVo9hdaAQ1I\/AAAAAAAARlo\/0oZws1FXQak\/s00\/com-oops.gif\" style=\"vertical-align:middle\" \/\u003E cada item se encuentra en una etiqueta \u0026lt;p\u0026gt;\u0026lt;\/p\u0026gt;\u003C\/p\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EAnimarlo verticalmente es similar, hay que cambiar la clase y luego, crear cada una de las reglas:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div class=\"marquee marqueeV\"\u0026gt;\n  .......\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cdiv class=\"marquee marqueeV\"\u003E\u003Cp\u003Eusando animaciones para crear \"marquees\" con estilo ...\u003C\/p\u003E\u003Cp\u003Eesta otra se mueve verticalmente \u003Cimg class=\"nores\" width=\"15\" height=\"15\" src=\"http:\/\/2.bp.blogspot.com\/-jFseiN3zgB0\/TVo9jf_k9TI\/AAAAAAAARl4\/tEBILcqLa8o\/s00\/com-sorpresa1.gif\" style=\"vertical-align:middle\" \/\u003E\u003C\/p\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"linkContraido\" onclick=\"SINO('marqueevert');\"\u003E\u003C\/div\u003E\u003Cpre id=\"marqueevert\" class=\"elementoOculto\"\u003E.marqueeV p {\n  -moz-transform:translateY(-100%);\n  -webkit-transform:translateY(-100%);\n  transform:translateY(-100%);\n}\n.marqueeV p:nth-child(1) {\n  -moz-animation: down-one 20s ease infinite;\n  -webkit-animation: down-one 20s ease infinite;\n  animation: down-one 20s ease infinite;\n}\n.marqueeV p:nth-child(2) {\n  -moz-animation: down-two 20s ease infinite;\n  -webkit-animation: down-two 20s ease infinite;\n  animation: down-two 20s ease infinite;\n}\n@-moz-keyframes down-one {\n  0%{-moz-transform:translateY(-100%);}\n  10% {-moz-transform:translateY(0);}\n  40% {-moz-transform:translateY(0);}\n  50% {-moz-transform:translateY(100%);}\n  100%{-moz-transform:translateY(100%);}\n}\n@-moz-keyframes down-two {\n  0% {-moz-transform:translateY(-100%);}\n  50% {-moz-transform:translateY(-100%);}\n  60% {-moz-transform:translateY(0);}\n  90% {-moz-transform:translateY(0);}\n  100%{-moz-transform:translateY(100%);}\n}\n@-webkit-keyframes down-one {\n  0% {-webkit-transform:translateY(-100%);}\n  10% {-webkit-transform:translateY(0);}\n  40% {-webkit-transform:translateY(0);}\n  50% {-webkit-transform:translateY(100%);}\n  100%{-webkit-transform:translateY(100%);}\n}\n@-webkit-keyframes down-two {\n  0% {-webkit-transform:translateY(-100%);}\n  50% {-webkit-transform:translateY(-100%);}\n  60% {-webkit-transform:translateY(0);}\n  90% {-webkit-transform:translateY(0);}\n  100%{-webkit-transform:translateY(100%);}\n}\u003C\/pre\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/5347773285342366866\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/08\/marquee-con-css3.html#comment-form","title":"16 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/5347773285342366866"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/5347773285342366866"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/08\/marquee-con-css3.html","title":"marquee con CSS3"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/-sylxwKNaTsA\/UAsB0fWN4FI\/AAAAAAAAUrE\/bi-sg6koZ3I\/s72-c\/marqueecss.jpg","height":"72","width":"72"},"thr$total":{"$t":"16"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-3688678261775230305"},"published":{"$t":"2012-08-08T00:08:00.001-03:00"},"updated":{"$t":"2012-08-08T00:08:00.858-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Transiciones en gradientes"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EAunque las \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2011\/12\/transiciones-y-animaciones.html\" target=\"_blank\"\u003Etransiciones\u003C\/a\u003E con CSS pueden aplicarse a muchas propiedades pero no a las \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2010\/02\/gradientes-en-css.html\" target=\"_blank\"\u003Egradientes\u003C\/a\u003E aunque, como estas son \"imágenes de fondo\" lo que puede hacerse es aplicar esas transiciones sobre otras propiedades background y de tal modo, simular animaciones.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nLos ejemplos de \u003Ca href=\"http:\/\/www.impressivewebs.com\/animating-css3-gradients\/\" target=\"_blank\"\u003Eimpressivewebs\u003C\/a\u003E usan dos propeidades especiificas: \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2011\/11\/background-los-fondos-y-lo-nuevo.html\" target=\"_blank\"\u003Ebackground-size\u003C\/a\u003E y background-position pero, podría probarse con cualquier otra y ver qué sale.\u003C\/div\u003E\u003Cpre\u003E\u0026lt;a href=\"#\" class=\"botonT ejemplo2\"\u0026gt;ejemplo #1\u0026lt;\/a\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ETodo se reduce a un enlace donde hay dos clases, la primera (botonT ) es general, establece las mismas propiedades de todos los ejemplos:\u003C\/div\u003E\u003Cpre\u003E.botonT:link, .botonT:visited {\n  border: solid 2px rgba(0,0,0,0.2);\n  border-radius: 10px;\n  color: #FFF;\n  display: block;\n  font-size: 20px;\n  height: 40px;\n  line-height: 40px;\n  margin: 0 auto;\n  text-align: center;\n  text-decoration: none;\n  width: 200px;\n  -moz-transition: all .5s;\n  -webkit-transition: all .5s;\n  -o-transition: all .5s;\n  -ms-transition: all .5s;\n  transition: all .5s;\n}\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ELa segunda es exclusiva de cada uno de ellos:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cstyle\u003E\n.botonT:link, .botonT:visited {border: solid 2px rgba(0,0,0,0.2);border-radius: 10px;color: #FFF !important;display: block;font-size: 20px !important;font-weight: normal !important;height: 40px;line-height: 40px;margin: 0 auto;text-align: center;text-decoration: none;width: 200px;-moz-transition: all .5s;-webkit-transition: all .5s;-o-transition: all .5s;-ms-transition: all .5s;transition: all .5s;} .ejemplo1:link, .ejemplo1:visited {background: #38B;background: -moz-linear-gradient(#38B, #22B);background: -webkit-linear-gradient(#38B, #22B);background: -o-linear-gradient(#38B, #22B);background: -ms-linear-gradient(#38B, #22B);background: linear-gradient(#38B, #22B);background-repeat: repeat;-moz-background-size: 100% 200%;-webkit-background-size: 100% 200%;background-size: 100% 200%;} .ejemplo1:hover, .ejemplo1:focus, .ejemplo1:active {background-position: 0 -120%;}.ejemplo2:link, .ejemplo2:visited {background: #ABC;background: -moz-radial-gradient(#ABC, #456);background: -webkit-radial-gradient(#ABC, #456);background: -o-radial-gradient(#ABC, #456);background: -ms-radial-gradient(#ABC, #456);background: radial-gradient(#ABC, #456);-moz-background-size: 100% 10%;-webkit-background-size: 100% 10%;background-size: 100% 10%;}.ejemplo2:hover, .ejemplo2:focus, .ejemplo2:active {background-position: 0 0;-moz-background-size: 100% 100%;-webkit-background-size: 100% 100%;background-size: 100% 100%;}.ejemplo3:link, .ejemplo3:visited {background: -webkit-radial-gradient(#36dac9, #36dac9, #a2f6ed, #a2f6ed);background: -moz-radial-gradient(#36dac9, #36dac9, #a2f6ed, #a2f6ed);background: -o-radial-gradient(#36dac9, #36dac9, #a2f6ed, #a2f6ed);background: -ms-radial-gradient(#36dac9, #36dac9, #a2f6ed, #a2f6ed);background: radial-gradient(#36dac9, #36dac9, #a2f6ed, #a2f6ed);background-position: center center;-moz-background-size: 100% 100%;-webkit-background-size: 100% 100%;background-size: 100% 100%;}.ejemplo3:hover, .ejemplo3:focus, .ejemplo3:active { -moz-background-size: 100% 200%; -webkit-background-size: 100% 200%; background-size: 100% 200%;}\n\u003C\/style\u003E\u003Ca class=\"botonT ejemplo1\" href=\"javascript:void(0);\"\u003Eejemplo #1\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cpre\u003E.ejemplo1:link, .ejemplo1:visited {\n  background: #38B;\n  background: -moz-linear-gradient(#38B, #22B);\n  background: -webkit-linear-gradient(#38B, #22B);\n  background: -o-linear-gradient(#38B, #22B);\n  background: -ms-linear-gradient(#38B, #22B);\n  background: linear-gradient(#38B, #22B);\n  background-repeat: repeat;\n  -moz-background-size: 100% 200%;\n  -webkit-background-size: 100% 200%;\n  background-size: 100% 200%;\n}\n\n.ejemplo1:hover, .ejemplo1:focus, .ejemplo1:active {\n  background-position: 0 -120%;\n}\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Ca class=\"botonT ejemplo2\" href=\"javascript:void(0);\"\u003Eejemplo #2\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cpre\u003E.ejemplo2:link, .ejemplo2:visited {\n  background: #ABC;\n  background: -moz-radial-gradient(#ABC, #456);\n  background: -webkit-radial-gradient(#ABC, #456);\n  background: -o-radial-gradient(#ABC, #456);\n  background: -ms-radial-gradient(#ABC, #456);\n  background: radial-gradient(#ABC, #456);\n  -moz-background-size: 100% 10%;\n  -webkit-background-size: 100% 10%;\n  background-size: 100% 10%;\n}\n\n.ejemplo2:hover, .ejemplo2:focus, .ejemplo2:active {\n  background-position: 0 0;\n  -moz-background-size: 100% 100%;\n  -webkit-background-size: 100% 100%;\n  background-size: 100% 100%;\n}\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Ca class=\"botonT ejemplo3\" href=\"javascript:void(0);\"\u003Eejemplo #3\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cpre\u003E.ejemplo3:link, .ejemplo3:visited {\n  background: -webkit-radial-gradient(#36dac9, #36dac9, #a2f6ed, #a2f6ed);\n  background: -moz-radial-gradient(#36dac9, #36dac9, #a2f6ed, #a2f6ed);\n  background: -o-radial-gradient(#36dac9, #36dac9, #a2f6ed, #a2f6ed);\n  background: -ms-radial-gradient(#36dac9, #36dac9, #a2f6ed, #a2f6ed);\n  background: radial-gradient(#36dac9, #36dac9, #a2f6ed, #a2f6ed);\n  background-position: center center;\n  -moz-background-size: 100% 100%;\n  -webkit-background-size: 100% 100%;\n  background-size: 100% 100%;\n}\n\n.ejemplo3:hover, .ejemplo3:focus, .ejemplo3:active {\n   -moz-background-size: 100% 200%;\n   -webkit-background-size: 100% 200%;\n   background-size: 100% 200%;\n}\u003C\/pre\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/3688678261775230305\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/08\/transiciones-en-gradientes.html#comment-form","title":"2 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/3688678261775230305"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/3688678261775230305"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/08\/transiciones-en-gradientes.html","title":"Transiciones en gradientes"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"2"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-2712860984923342543"},"published":{"$t":"2012-08-06T00:03:00.000-03:00"},"updated":{"$t":"2017-06-26T00:54:50.186-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Los pseudo-elementos first-letter y first-line"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EEl pseudo-elemento \u003Cspan style=\"font-weight: bold;\"\u003E:first-letter\u003C\/span\u003E permite establecer las propiedades de la primera letra de un párrafo. Es algo simple pero, debe tenerse muy en cuenta que ese párrafo  debe comenzar con un texto y no funcionará si es precedido por una imagen, un salto de línea o cualquier otro tipo de contenido.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"vagacode\"\u003E\u003Cdiv class=\"sue\"\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/Rw5n8Ja.jpg\"\u003E\u003Cp\u003ELos pseudo-elementos seleccionan alguna parte de un elemento y su sintaxis es similar a las pseudo-clases aunque a veces, en lugar de usar un carácter dos puntos se utilizan dos.\u003C\/p\u003E\u003C\/div\u003E\u003Cdiv class=\"gowi\"\u003E\u003Cspan\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/yrSqFzYl.png\"\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/los-pseudo-elementos\"\u003Eleer artículo actualizado\u003C\/a\u003E\u003C\/span\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/\"\u003E\u003Cimg class=\"wlogo\" src=\"http:\/\/i.imgur.com\/QZHLte7.png\"\u003E\u003C\/a\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/2712860984923342543\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/08\/los-pseudo-elementos-first-letter-y.html#comment-form","title":"2 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/2712860984923342543"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/2712860984923342543"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/08\/los-pseudo-elementos-first-letter-y.html","title":"Los pseudo-elementos first-letter y first-line"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"2"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-2766538302812996972"},"published":{"$t":"2012-07-30T00:04:00.002-03:00"},"updated":{"$t":"2012-07-30T00:04:00.151-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Transiciones y paneles deslizantes"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EAunque es algo experimental, la idea del diseñador \u003Ca href=\"http:\/\/tympanus.net\/codrops\/2012\/01\/30\/page-transitions-with-css3\/\" target=\"_blank\"\u003ESergio Camalich\u003C\/a\u003E es válida y tal vez muestre una alternativa en el uso de las transiciones entre páginas usando sólo CSS sobre la que habrá que seguir trabajando.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nLos ejemplos pueden verse en estos demos \u003Ca href=\"http:\/\/tympanus.net\/Tutorials\/CSS3PageTransitions\/index.html\" target=\"_blank\"\u003E1\u003C\/a\u003E \u003Ca href=\"http:\/\/tympanus.net\/Tutorials\/CSS3PageTransitions\/index2.html\" target=\"_blank\"\u003E2\u003C\/a\u003E \u003Ca href=\"http:\/\/tympanus.net\/Tutorials\/CSS3PageTransitions\/index3.html\" target=\"_blank\"\u003E3\u003C\/a\u003E y acá veremos si son aplicables a una entrada cualquiera del \u003Cspan style=\"font-style: italic;\"\u003Eblog\u003C\/span\u003E con las limitaciones del caso.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEn este ejemplo, coloco todo en un DIV al que debo darle una dimensión precisa; en el ejemplo original eso se resuelve agregando overflow: hidden al body de la página y haciendo que la página tenga siempre una altura precisa de tal modo que no se vea el efecto indeseado del salto que se produce cuando se usa \u003Cb\u003Etarget\u003C\/b\u003E, algo que acá es inevitable (o no tengo la menor idea si hay alguna forma de evitarlo).\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E#pageTrans {height: 490px;margin: 0 auto;position: relative;width: 580px;}#selector {position: absolute;top: 20px;width: 135px;   z-index: 2000;}#selector h5 {color: #FFF;font-size: 24px;font-weight: normal;margin: 0;padding: 0;}#navigation {display: block;list-style: none;margin: 10px 0 0;z-index: 3;}#navigation a {border: 1px solid #FFF;box-shadow: 0 0 15px #FFF inset;color: #FFF;display: block;font-size: 16px;line-height: 45px;   margin: 0 0 10px;padding: 0 10px;text-align: center;text-transform: uppercase;}#navigation a:hover {background: Crimson;}.content {left: 180px;position: absolute;top: 0;width: 400px;}.content h4 {color: #EEE;font-size: 80px;margin: 0;padding: 0;}.content p {color: #CCC;display: inline-block;font-size: 16px;}.panel {-moz-transition: all 0.6s ease-in-out 0s; -webkit-transition: all .6s ease-in-out; -o-transition: all .6s ease-in-out; -ms-transition: all .6s ease-in-out; transition: all .6s ease-in-out;background-color: #101921;height: 100%;margin-left: -610px;position: absolute;width: 580px;   z-index: 2;}.panel:target { margin-left: 0px;}#works li {display: inline;}#works img {   background-color: #FFF; height: 100px;padding: 10px;width: 150px;}\u003C\/style\u003E\u003Cdiv id=\"pageTrans\"\u003E\u003Cdiv id=\"panel1\" class=\"content\"\u003E\u003Ch4\u003Einicio\u003C\/h4\u003E\u003Cp\u003ENunc nulla purus, malesuada ut vehicula et, suscipit sit amet eros? Duis lacinia luctus erat; nec venenatis nibh lobortis in.\u003C\/p\u003E\u003Cp\u003EMorbi tempor quam ac nibh sollicitudin rutrum. Sed ornare pretium libero vel viverra. Pellentesque tincidunt purus nulla, ullamcorper mattis risus. Maecenas commodo; massa a adipiscing lacinia, arcu nibh vulputate turpis, sit amet tristique enim ligula sit amet quam. Sed id eros diam; nec sagittis nisl.\u003C\/p\u003E\u003Cp\u003EPraesent ultrices, dui at egestas dictum posuere.\u003C\/p\u003E\u003Cp\u003ECras cursus nulla nec enim euismod posuere. Cras eu leo et lorem dignissim commodo non at enim. Quisque consequat nisl id metus tempor bibendum. Proin eget dolor turpis. Curabitur vitae est erat.\u003C\/p\u003E\u003C\/div\u003E\u003Cdiv id=\"panel2\" class=\"panel\"\u003E\u003Cdiv class=\"content\"\u003E\u003Ch4\u003Eimágenes\u003C\/h4\u003E\u003Cul id=\"works\"\u003E\u003Cli\u003E\u003Ca href=\"#\"\u003E\u003Cimg src=\"https:\/\/lh4.googleusercontent.com\/-8jVpLTl2Gsc\/Ts8LfkTu6_I\/AAAAAAAAEZQ\/UCc0M7LuWXE\/s200\/34_0050.jpg\"\u003E\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#\"\u003E\u003Cimg src=\"https:\/\/lh5.googleusercontent.com\/-3lLAkcXxTOg\/Ts8L9zaiHkI\/AAAAAAAAEZw\/kBzlYyFKUAw\/s200\/34_0056.jpg\"\u003E\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#\"\u003E\u003Cimg src=\"https:\/\/lh6.googleusercontent.com\/-egrveMIFMDw\/Ts8Mh86_SMI\/AAAAAAAAEag\/HT_To2RM-Nk\/s200\/34_0061.jpg\"\u003E\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#\"\u003E\u003Cimg src=\"https:\/\/lh5.googleusercontent.com\/-WnKty75USxU\/TxxpuPTwutI\/AAAAAAAAAVQ\/ajfAPlQqyYc\/s200\/06_0220.jpg\"\u003E\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#\"\u003E\u003Cimg src=\"https:\/\/lh4.googleusercontent.com\/-5OL4YdWA-g0\/TxxrkBevX0I\/AAAAAAAAAWY\/VBLG-zZcg0U\/s200\/06_0230.jpg\"\u003E\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#\"\u003E\u003Cimg src=\"https:\/\/lh6.googleusercontent.com\/-lMZtcY067XM\/Ts8Loo3oOGI\/AAAAAAAAEZY\/YVHlLXA1LdA\/s200\/34_0052.jpg\"\u003E\u003C\/a\u003E\u003C\/li\u003E\n\u003C\/ul\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv id=\"panel3\" class=\"panel\"\u003E\u003Cdiv class=\"content\"\u003E\u003Ch4\u003Eotra más\u003C\/h4\u003E\u003Cp\u003EUt nec nibh quis sapien congue sagittis sit amet at lorem? Nam tellus purus; suscipit non imperdiet in, lobortis sed odio. Proin eget odio non nibh semper massa nunc.\u003C\/p\u003E\u003Cimg src=\"https:\/\/lh4.googleusercontent.com\/-8jVpLTl2Gsc\/Ts8LfkTu6_I\/AAAAAAAAEZQ\/UCc0M7LuWXE\/s350\/34_0050.jpg\"\/\u003E\u003Cbr \/\u003E\n\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv id=\"panel4\" class=\"panel\"\u003E\u003Cdiv class=\"content\"\u003E\u003Ch4\u003Eúltima\u003C\/h4\u003E\u003Cp style=\"font-size: 30px; font-family: Georgia; text-align: right;\"\u003EDonec elementum scelerisque massa, at accumsan orci fringilla sed. Nunc sed leo at turpis consequat accumsan. Maecenas non augue ac felis varius facilisis. Pellentesque interdum pharetra vestibulum!\u003C\/p\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv id=\"selector\"\u003E\u003Ch5\u003Eseleccionar\u003C\/h5\u003E\u003Cul id=\"navigation\"\u003E\u003Cli\u003E\u003Ca id=\"link-panel1\" href=\"#panel1\"\u003Einicio\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca id=\"link-panel2\" href=\"#panel2\"\u003Eimágenes\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca id=\"link-panel3\" href=\"#panel3\"\u003Eotra más\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca id=\"link-panel4\" href=\"#panel4\"\u003Eúltima\u003C\/a\u003E\u003C\/li\u003E\n\u003C\/ul\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EEl HTML tiene esta estructura:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div id=\"pageTrans\"\u0026gt;\n\n  \u0026lt;!-- el contenido de cada uno de los \"paneles\" --\u0026gt;\n  \u0026lt;!-- el primero (el visible) es levemente distinto al resto --\u0026gt;\n  \u0026lt;div id=\"panel1\" class=\"content\"\u0026gt;\n    \u0026lt;h4\u0026gt;PANEL 1\u0026lt;\/h4\u0026gt;\n    \u0026lt;!-- cualquier contenido --\u0026gt;\n  \u0026lt;\/div\u0026gt;\n\n  \u0026lt;!-- los otros (los ocultos)  tienen la misma estructura --\u0026gt;\n  \u0026lt;div id=\"panel2\" class=\"panel\"\u0026gt;\n    \u0026lt;div class=\"content\"\u0026gt; \u0026lt;!-- cualquier contenido --\u0026gt; \u0026lt;\/div\u0026gt;\n  \u0026lt;\/div\u0026gt;\n  \u0026lt;div id=\"panel3\" class=\"panel\"\u0026gt;\n    \u0026lt;div class=\"content\"\u0026gt; \u0026lt;!-- cualquier contenido --\u0026gt; \u0026lt;\/div\u0026gt;\n  \u0026lt;\/div\u0026gt;\n  \u0026lt;div id=\"panel4\" class=\"panel\"\u0026gt;\n    \u0026lt;div class=\"content\"\u0026gt; \u0026lt;!-- cualquier contenido --\u0026gt; \u0026lt;\/div\u0026gt;\n  \u0026lt;\/div\u0026gt;\n\n  \u0026lt;!-- la navegación a la izquierda --\u0026gt;\n  \u0026lt;div id=\"selector\"\u0026gt;\n    \u0026lt;h5\u0026gt; seleccionar \u0026lt;\/h5\u0026gt;\n    \u0026lt;ul id=\"navigation\"\u0026gt;\n      \u0026lt;li\u0026gt;\u0026lt;a id=\"link-panel1\" href=\"#panel1\"\u0026gt; texto 1 \u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\n      \u0026lt;li\u0026gt;\u0026lt;a id=\"link-panel2\" href=\"#panel2\"\u0026gt; texto 2 \u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\n      \u0026lt;li\u0026gt;\u0026lt;a id=\"link-about\" href=\"#about\"\u0026gt; texto 3 \u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\n      \u0026lt;li\u0026gt;\u0026lt;a id=\"link-contact\" href=\"#contact\"\u0026gt; texto 4 \u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\n    \u0026lt;\/ul\u0026gt;\n  \u0026lt;\/div\u0026gt;\n\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EY ahora el CSS que es donde hay que trabajar y ersonalziar proque todo depende de esas reglas:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;style\u0026gt;\n  #pageTrans { \/* elcontenedor *\/\n    height: 490px;\n    margin: 0 auto;\n    position: relative;\n    width: 580px;\n  }\n\n  \/* la navegación izquierda *\/\n  #selector {\n    position: absolute;\n    top: 20px;\n    width: 135px;\n    z-index: 2000;\n  }\n  #selector h5 { \/* el texto \"seleccionar\" del ejemplo *\/ }\n  #navigation {\n    display: block;\n    list-style: none;\n    margin: 10px 0 0;\n    z-index: 3;\n  }\n  #navigation a {\n    border: 1px solid #FFFF;\n    box-shadow: 0 0 15px #FFF inset;\n    color: #FFF;\n    display: block;\n    font-size: 16px;\n    line-height: 45px;\n    margin: 0 0 10px;\n    padding: 0 10px;\n    text-align: center;\n    text-transform: uppercase;\n  }\n  #navigation a:hover { background: Crimson; }\n\n  \/* las reglas de los paneles *\/\n  .content {\n    left: 180px;\n    position: absolute;\n    top: 0;\n    width: 400px;\n  }\n  .content h4 { \/* el título de cada panel *\/ }\n  .panel {\n    -moz-transition: all 0.6s ease-in-out 0s;\n    -webkit-transition: all .6s ease-in-out;\n    -o-transition: all .6s ease-in-out;\n    -ms-transition: all .6s ease-in-out;\n    transition: all .6s ease-in-out;\n    background-color: #101921;\n    height: 100%;\n    margin-left: -610px;\n    position: absolute;\n    width: 580px;\n    z-index: 2;\n  }\n  .panel:target { margin-left: 0px; }\n\n\u0026lt;\/style\u0026gt;\u003C\/pre\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/2766538302812996972\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/07\/transiciones-y-paneles-deslizantes.html#comment-form","title":"12 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/2766538302812996972"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/2766538302812996972"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/07\/transiciones-y-paneles-deslizantes.html","title":"Transiciones y paneles deslizantes"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/lh4.googleusercontent.com\/-8jVpLTl2Gsc\/Ts8LfkTu6_I\/AAAAAAAAEZQ\/UCc0M7LuWXE\/s72-c\/34_0050.jpg","height":"72","width":"72"},"thr$total":{"$t":"12"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-2403107233310760996"},"published":{"$t":"2012-07-23T00:07:00.000-03:00"},"updated":{"$t":"2012-07-23T00:07:00.095-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Listas y bullets"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003ECuando se crean listas HTML, por defecto, estas incluyen un \u003Cspan style=\"font-style: italic;\"\u003Ebullet\u003C\/span\u003E (etiqueta UL) o un número (etiqueta OL) que se muestra a la izquierda del texto de cada item y cuyo estilo es controlado por la propiedad \u003Cspan style=\"font-weight: bold;\"\u003Elist-style-type\u003C\/span\u003E cuyos valores básicos son \u003Cspan style=\"font-weight: bold;\"\u003Edisc\u003C\/span\u003E y \u003Cspan style=\"font-weight: bold;\"\u003Edecimal\u003C\/span\u003E respectivamente. Si no queremos que se vean, usamos el valor \u003Cspan style=\"font-weight: bold;\"\u003Enone\u003C\/span\u003E y desaparecen.\u003C\/div\u003E\u003Cpre\u003E\u0026lt;ul\u0026gt;\n  \u0026lt;li\u0026gt;item 1\u0026lt;\/li\u0026gt;\n  \u0026lt;li\u0026gt;item 2\u0026lt;\/li\u0026gt;\n  \u0026lt;li\u0026gt;item 3\u0026lt;\/li\u0026gt;\n\u0026lt;\/ul\u0026gt;\n\n\u0026lt;ol\u0026gt;\n  \u0026lt;li\u0026gt;item 1\u0026lt;\/li\u0026gt;\n  \u0026lt;li\u0026gt;item 2\u0026lt;\/li\u0026gt;\n  \u0026lt;li\u0026gt;item 3\u0026lt;\/li\u0026gt;\n\u0026lt;\/ol\u0026gt;\u003C\/pre\u003E\u003Cstyle\u003Ediv.listaejemplo {margin-left: 130px;width: 620px;} ul.listanormal {list-style-type: disc;margin-left: 30px;} \nol.listanormal {list-style-type: decimal;margin-left: 30px;} ul.bullet1 li {color: #FFF;font-size: 16px;} ul.bullet1 li::-moz-list-bullet{color: Yellow;font-size: 25px;vertical-align: middle;} ol.bullet2 li {color: #FFF;font-size: 16px;} ol.bullet2 li::-moz-list-number{font-style: italic;color: Yellow;font-family: Georgia;font-size: 18px;} ul.bullet3 li {color: Yellow;font-size: 25px; line-height: 0.9;} ul.bullet3 li span {color: #FFF;font-size: 16px;} ol.bullet4 li {font-style: italic;color: Yellow;font-family: Georgia;font-size: 18px;} ol.bullet4 li span {color: #FFF;font-size: 16px;font-style: normal;font-family:Trebuchet MS;} \u003C\/style\u003E\u003Cdiv class=\"listaejemplo\"\u003E\u003Cul class=\"listanormal\" style=\"width:250px;display:inline-block\"\u003E\u003Cli\u003Eitem 1\u003C\/li\u003E\n\u003Cli\u003Eitem 2\u003C\/li\u003E\n\u003Cli\u003Eitem 3\u003C\/li\u003E\n\u003Cli\u003Eitem 4\u003C\/li\u003E\n\u003Cli\u003Eitem 5\u003C\/li\u003E\n\u003C\/ul\u003E\u003Col class=\"listanormal\" style=\"width:250px;display:inline-block\"\u003E\u003Cli\u003Eitem 1\u003C\/li\u003E\n\u003Cli\u003Eitem 2\u003C\/li\u003E\n\u003Cli\u003Eitem 3\u003C\/li\u003E\n\u003Cli\u003Eitem 4\u003C\/li\u003E\n\u003Cli\u003Eitem 5\u003C\/li\u003E\n\u003C\/ol\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EUna característica de las listas es que ese \u003Cspan style=\"font-style: italic;\"\u003Ebullet\u003C\/span\u003E o número comparten el estilo gráfico del contenido es decir, de la etiqueta LI; si esta tiene una fuente \"grande\" o cierto color, esas propiedades también se aplican a la \"decoración\" por lo tanto, de modo normal, no es posible diferenciarlas:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"listaejemplo\"\u003E\u003Cul class=\"listanormal\" style=\"width:250px;display:inline-block\"\u003E\u003Cli\u003Eitem 1\u003C\/li\u003E\n\u003Cli style=\"color:red;\"\u003Eitem 2\u003C\/li\u003E\n\u003Cli style=\"font-size:20px;\"\u003Eitem 3\u003C\/li\u003E\n\u003Cli style=\"color:red;font-size:24px;\"\u003Eitem 4\u003C\/li\u003E\n\u003Cli\u003Eitem 5\u003C\/li\u003E\n\u003C\/ul\u003E\u003Col class=\"listanormal\" style=\"width:250px;display:inline-block\"\u003E\u003Cli\u003Eitem 1\u003C\/li\u003E\n\u003Cli style=\"color:red;\"\u003Eitem 2\u003C\/li\u003E\n\u003Cli style=\"font-size:20px;\"\u003Eitem 3\u003C\/li\u003E\n\u003Cli style=\"color:red;font-size:24px;\"\u003Eitem 4\u003C\/li\u003E\n\u003Cli\u003Eitem 5\u003C\/li\u003E\n\u003C\/ol\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EEn Firefox hay dos pseudo-clases especiales que puede usarse para controlar eso:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca href=\"https:\/\/developer.mozilla.org\/en\/CSS\/:-moz-list-bullet\" target=\"_blank\" rel=\"nofollow\"\u003E::-moz-list-bullet\u003C\/a\u003E permite establecer el estilo del \u003Cspan style=\"font-style: italic;\"\u003Ebullet\u003C\/span\u003E de las etiquetas LI en una lista desordenada (UL)\u003Cbr \/\u003E\n\u003Ca href=\"https:\/\/developer.mozilla.org\/en\/CSS\/:-moz-list-number\" target=\"_blank\" rel=\"nofollow\"\u003E::-moz-list-number\u003C\/a\u003E permite establecer el estilo del número o texto de las etiquetas LI en una lista ordenada (OL)\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nPor ejemplo:\u003C\/div\u003E\u003Cpre\u003Eul li {color: #FFF; font-size: 16px;}\nul li::-moz-list-bullet{color: Yellow; font-size: 25px; vertical-align: middle;}\nol li {color: #FFF; font-size: 16px;}\nol li::-moz-list-number{font-style: italic; color: Yellow; font-family: Georgia; font-size: 18px;}\u003C\/pre\u003E\u003Cdiv class=\"listaejemplo\"\u003E\u003Cul class=\"listanormal bullet1\" style=\"width:250px;display:inline-block\"\u003E\u003Cli\u003Eitem 1\u003C\/li\u003E\n\u003Cli\u003Eitem 2\u003C\/li\u003E\n\u003Cli\u003Eitem 3\u003C\/li\u003E\n\u003Cli\u003Eitem 4\u003C\/li\u003E\n\u003Cli\u003Eitem 5\u003C\/li\u003E\n\u003C\/ul\u003E\u003Col class=\"listanormal bullet2\" style=\"width:250px;display:inline-block\"\u003E\u003Cli\u003Eitem 1\u003C\/li\u003E\n\u003Cli\u003Eitem 2\u003C\/li\u003E\n\u003Cli\u003Eitem 3\u003C\/li\u003E\n\u003Cli\u003Eitem 4\u003C\/li\u003E\n\u003Cli\u003Eitem 5\u003C\/li\u003E\n\u003C\/ol\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EEn cualquier otro navegador, no queda más remedio que agregar una etiqueta extra:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;li\u0026gt;\u0026lt;span\u0026gt;item 1\u0026lt;\/span\u0026gt;\u0026lt;\/li\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EY crear reglas de etilo diferentes:\u003C\/div\u003E\u003Cpre\u003Eul li {color: Yellow; font-size: 25px; line-height: 0.9;}\nul li span {color: #FFF; font-size: 16px;}\nol li {font-style: italic; color: Yellow; font-family: Georgia; font-size: 18px;}\nol li span {color: #FFF; font-size: 16px; font-style: normal; font-family:Trebuchet MS;}\u003C\/pre\u003E\u003Cdiv class=\"listaejemplo\"\u003E\u003Cul class=\"listanormal bullet3\" style=\"width:250px;display:inline-block\"\u003E\u003Cli\u003E\u003Cspan\u003Eitem 1\u003C\/span\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Cspan\u003Eitem 2\u003C\/span\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Cspan\u003Eitem 3\u003C\/span\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Cspan\u003Eitem 4\u003C\/span\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Cspan\u003Eitem 5\u003C\/span\u003E\u003C\/li\u003E\n\u003C\/ul\u003E\u003Col class=\"listanormal bullet4\" style=\"width:250px;display:inline-block\"\u003E\u003Cli\u003E\u003Cspan\u003Eitem 1\u003C\/span\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Cspan\u003Eitem 2\u003C\/span\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Cspan\u003Eitem 3\u003C\/span\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Cspan\u003Eitem 4\u003C\/span\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Cspan\u003Eitem 5\u003C\/span\u003E\u003C\/li\u003E\n\u003C\/ol\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/2403107233310760996\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/07\/listas-y-bullets.html#comment-form","title":"1 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/2403107233310760996"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/2403107233310760996"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/07\/listas-y-bullets.html","title":"Listas y bullets"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"1"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-4465946427640023269"},"published":{"$t":"2012-07-20T00:07:00.000-03:00"},"updated":{"$t":"2012-07-20T00:07:00.203-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Paneles deslizantes con CSS"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EEsto que llaman paneles deslizantes es, en realidad, otra forma de crear un \u003Ci\u003Eslideshow\u003C\/i\u003E con textos añadidos y efectos varios, desarrollado por \u003Ca href=\"http:\/\/tympanus.net\/codrops\/2012\/01\/17\/sliding-image-panels-with-css3\/\" target=\"_blank\"\u003Ecodrops\u003C\/a\u003E y que hace uso extremo del CSS3.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nTal vez pueda ser un poco engorroso pero los resultados son interesantes y hay varios demos \u003Ca href=\"http:\/\/tympanus.net\/Tutorials\/CSS3SlidingImagePanels\/index.html\" target=\"_blank\"\u003E1\u003C\/a\u003E, \u003Ca href=\"http:\/\/tympanus.net\/Tutorials\/CSS3SlidingImagePanels\/index2.html\" target=\"_blank\"\u003E2\u003C\/a\u003E, \u003Ca href=\"http:\/\/tympanus.net\/Tutorials\/CSS3SlidingImagePanels\/index3.html\" target=\"_blank\"\u003E3\u003C\/a\u003E, \u003Ca href=\"http:\/\/tympanus.net\/Tutorials\/CSS3SlidingImagePanels\/index4.html\" target=\"_blank\"\u003E4\u003C\/a\u003E, que difieren en las animaciones porque, esencialmente, tienen la misma estructura.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSólo muestro las variantes de uno de ellos que, por supuesto, no será visible en Internet Explorer. El HTML es el siguiente:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div class=\"cr-container\"\u0026gt;\n  \u0026lt;input id=\"select-img-1\" name=\"radio-set-1\" type=\"radio\" class=\"cr-selector-img-1\" checked\/\u0026gt;\n  \u0026lt;label for=\"select-img-1\" class=\"cr-label-img-1\"\u0026gt;1\u0026lt;\/label\u0026gt;\n  \u0026lt;input id=\"select-img-2\" name=\"radio-set-1\" type=\"radio\" class=\"cr-selector-img-2\" \/\u0026gt;\n  \u0026lt;label for=\"select-img-2\" class=\"cr-label-img-2\"\u0026gt;2\u0026lt;\/label\u0026gt;\n  \u0026lt;input id=\"select-img-3\" name=\"radio-set-1\" type=\"radio\" class=\"cr-selector-img-3\" \/\u0026gt;\n  \u0026lt;label for=\"select-img-3\" class=\"cr-label-img-3\"\u0026gt;3\u0026lt;\/label\u0026gt;\n  \u0026lt;input id=\"select-img-4\" name=\"radio-set-1\" type=\"radio\" class=\"cr-selector-img-4\" \/\u0026gt;\n  \u0026lt;label for=\"select-img-4\" class=\"cr-label-img-4\"\u0026gt;4\u0026lt;\/label\u0026gt;\u0026lt;div class=\"clr\"\u0026gt;\n\u0026lt;\/div\u0026gt;\n\u0026lt;div class=\"cr-bgimg\"\u0026gt;\n  \u0026lt;div\u0026gt;\n    \u0026lt;span\u0026gt;Slice 1 - Image 1\u0026lt;\/span\u0026gt;\n    \u0026lt;span\u0026gt;Slice 1 - Image 2\u0026lt;\/span\u0026gt;\n    \u0026lt;span\u0026gt;Slice 1 - Image 3\u0026lt;\/span\u0026gt;\n    \u0026lt;span\u0026gt;Slice 1 - Image 4\u0026lt;\/span\u0026gt;\n  \u0026lt;\/div\u0026gt;\n  \u0026lt;div\u0026gt;\n    \u0026lt;span\u0026gt;Slice 2 - Image 1\u0026lt;\/span\u0026gt;\n    \u0026lt;span\u0026gt;Slice 2 - Image 2\u0026lt;\/span\u0026gt;\n    \u0026lt;span\u0026gt;Slice 2 - Image 3\u0026lt;\/span\u0026gt;\n    \u0026lt;span\u0026gt;Slice 2 - Image 4\u0026lt;\/span\u0026gt;\n  \u0026lt;\/div\u0026gt;\n  \u0026lt;div\u0026gt;\n    \u0026lt;span\u0026gt;Slice 3 - Image 1\u0026lt;\/span\u0026gt;\n    \u0026lt;span\u0026gt;Slice 3 - Image 2\u0026lt;\/span\u0026gt;\n    \u0026lt;span\u0026gt;Slice 3 - Image 3\u0026lt;\/span\u0026gt;\n    \u0026lt;span\u0026gt;Slice 3 - Image 4\u0026lt;\/span\u0026gt;\n  \u0026lt;\/div\u0026gt;\n  \u0026lt;div\u0026gt;\n    \u0026lt;span\u0026gt;Slice 4 - Image 1\u0026lt;\/span\u0026gt;\n    \u0026lt;span\u0026gt;Slice 4 - Image 2\u0026lt;\/span\u0026gt;\n    \u0026lt;span\u0026gt;Slice 4 - Image 3\u0026lt;\/span\u0026gt;\n    \u0026lt;span\u0026gt;Slice 4 - Image 4\u0026lt;\/span\u0026gt;\n  \u0026lt;\/div\u0026gt;\n  \u0026lt;\/div\u0026gt;\n  \u0026lt;div class=\"cr-titles\"\u0026gt;\n    \u0026lt;h3\u0026gt;\n      \u0026lt;span class=\"big\"\u0026gt; titulo panel 1 \u0026lt;\/span\u0026gt;\n      \u0026lt;span class=\"small\"\u0026gt; texto inferior panel 1 s\u0026lt;\/span\u0026gt;\n    \u0026lt;\/h3\u0026gt;\n    \u0026lt;h3\u0026gt;\n      \u0026lt;span class=\"big\"\u0026gt; titulo panel 2 \u0026lt;\/span\u0026gt;\n      \u0026lt;span class=\"small\"\u0026gt; texto inferior panel 2 \u0026lt;\/span\u0026gt;\n    \u0026lt;\/h3\u0026gt;\n    \u0026lt;h3\u0026gt;\n      \u0026lt;span class=\"big\"\u0026gt; titulo panel 3 \u0026lt;\/span\u0026gt;\n      \u0026lt;span class=\"small\"\u0026gt; texto inferior panel 3 \u0026lt;\/span\u0026gt;\n    \u0026lt;\/h3\u0026gt;\n    \u0026lt;h3\u0026gt;\n      \u0026lt;span class=\"big\"\u0026gt; titulo panel 4 \u0026lt;\/span\u0026gt;\n      \u0026lt;span class=\"small\"\u0026gt; texto inferior panel 4 \u0026lt;\/span\u0026gt;\n    \u0026lt;\/h3\u0026gt;\n  \u0026lt;\/div\u0026gt;\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ESi esto les parece muy largo ... ni miren el CSS.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"linkContraido\" onclick=\"SINO('pancss3');\"\u003E\u003C\/div\u003E\u003Cpre id=\"pancss3\" class=\"elementoOculto\"\u003E\u0026lt;style\u0026gt;\n  .cr-container { \/* el contenedor *\/\n    border: 10px solid #FFF;\n    height: 400px;\n    margin: 0 auto;\n    overflow: hidden;\n    position: relative;\n    width: 600px;\n  }\n  .cr-container br {display:none;}\n  .cr-container label { \/* la navegación inferior *\/\n    color: #98541C;\n    cursor: pointer;\n    float: left;\n    font-size: 30px;\n    height: 32px;\n    line-height: 30px;\n    margin-top: 350px;\n    position: relative;\n    text-align: center;\n    width: 150px;\n    z-index: 1000;\n  }\n  .cr-container label:before { \n    background: rgba(255, 255, 255, 0.7);\n    border-radius: 50%;\n    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.3);\n    content: \"\";\n    height: 32px;\n    left: 50%;\n    margin-left: -16px;\n    position: absolute;\n    width: 32px;\n    z-index: -1;\n  }\n  .cr-container label:after { \/* una línea vertical que separa los paneles *\/\n    background: -moz-linear-gradient(#FFF,#000,#FFF);\n    background: -webkit-linear-gradient(#FFF,#000,#FFF);\n    background: linear--linear-gradient(#FFF,#000,#FFF);\n    bottom: -20px;\n    content: '';\n    height: 400px;\n    position: absolute;\n    right: 0px;\n    width: 1px;\n  }\n  .cr-container label.cr-label-img-4:after { width: 0px; }\n  .cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,\n  .cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,\n  .cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,\n  .cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4{\n    color: #000;\n  }\n  .cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,\n  .cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,\n  .cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,\n  .cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{\n    background: #FFF;\n    box-shadow: 0 0 0 4px rgba(0,0,0, 0.5);\n  }\n  .cr-container input { display: none; }\n\n  \/* las imagenes son fondos *\/\n  .cr-bgimg {\n    background-repeat: no-repeat;\n     background-position: 0 0;\n    height: 400px;\n    left: 0px;\n    position: absolute;\n    top: 0px;\n    width: 600px;\n    z-index: 1;\n  }\n  .cr-bgimg div {\n    background-repeat: no-repeat;\n    float: left;\n    height: 100%;\n    overflow: hidden;\n    position: relative;\n    width: 150px;\n  }\n  .cr-bgimg div span {\n    height: 100%;\n    left: 150px;\n    position: absolute;\n    text-indent: -9000px;\n    top: 0px;\n    width: 100%;\n    z-index: 2;\n  }\n  .cr-bgimg div:nth-child(odd) span { left: -150px; }\n\n  \/* cada una de ellas *\/\n  .cr-container input.cr-selector-img-1:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(1) { background-image: url(URL_IMAGEN_1); }\n  .cr-container input.cr-selector-img-2:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(2) { background-image: url(URL_IMAGEN_2); }\n  .cr-container input.cr-selector-img-3:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(3) { background-image: url(URL_IMAGEN_3); }\n  .cr-container input.cr-selector-img-4:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(4) { background-image: url(URL_IMAGEN_4); }\n  \/* los panales tiene 150 pixeles de ancho *\/\n  .cr-bgimg div:nth-child(1) span { background-position: 0px 0px; }\n  .cr-bgimg div:nth-child(2) span { background-position: -150px 0px; }\n  .cr-bgimg div:nth-child(3) span { background-position: -300px 0px; }\n  .cr-bgimg div:nth-child(4) span { background-position: -450px 0px; }\n\n  \/* las animaciones *\/\n  .cr-container input:checked ~ .cr-bgimg div span {\n    -moz-animation: slideOutRight 0.6s ease-in-out;\n    -webkit-animation: slideOutRight 0.6s ease-in-out;\n  }\n  @-webkit-keyframes slideOutRight{\n    0%{ left: 0px; }\n    100%{ left: 150px; }\n  }\n  @-moz-keyframes slideOutRight{\n    0%{ left: 0px; }\n    100%{ left: 150px; }\n  }\n  .cr-container input:checked ~ .cr-bgimg div:nth-child(even) span {\n    -moz-animation: slideOutLeft 0.6s ease-in-out;\n    -webkit-animation: slideOutLeft 0.6s ease-in-out;\n    animation: slideOutLeft 0.6s ease-in-out;\n  }\n  @-webkit-keyframes slideOutLeft{\n    0%{ left: 0px; }\n    100%{ left: -150px; }\n  }\n  @-moz-keyframes slideOutLeft{\n    0%{ left: 0px; }\n    100%{ left: -150px; }\n  }\n  .cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),\n  .cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),\n  .cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),\n  .cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4) {\n    -moz-transition: left 0.5s ease-in-out;\n    -webkit-transition: left 0.5s ease-in-out;\n    transition: left 0.5s ease-in-out;\n    -moz-animation: none;\n    -webkit-animation: none;\n    animation: none;\n    left: 0px;\n    z-index: 10;\n  }\n\n  \/* los textos en geenral *\/\n  .cr-titles h3 { font-weight: normal; }\n  .cr-titles h3 span {\n    left: 0px;\n    opacity: 0;\n    position: absolute;\n    text-align: center;\n    top: 50%;\n    width: 100%;\n    z-index: 10000;\n  }\n  \/* el texto superior más grande *\/\n  .cr-titles h3 span.big {\n    color: #FFF;\n    font-family: Helvetica;\n    font-size: 60px;\n   left: 0px;\n    letter-spacing: -2px;\n    text-shadow: 1px 2px 1px #000;\n    top: 230px;\n    -moz-transition: opacity 0.8s ease-in-out, -moz-transform 0.8s ease-in-out;\n    -webkit-transition: opacity 0.8s ease-in-out, -webkit-transform 0.8s ease-in-out;\n    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;\n  }\n  \/* el texto inferior más pequeño *\/\n  .cr-titles h3 span.small {\n    background: rgba(255, 255, 255, 0.7);\n    color: #000;\n    font-family: Tahoma;\n    font-size: 14px;\n    letter-spacing: 0;\n    margin-top: 100px;\n    opacity: 0;\n    padding: 5px 0;\n    text-shadow: 1px 1px 1px #FFF;\n    -moz-transition: opacity 0.8s ease-in-out;\n    -webkit-transition: opacity 0.8s ease-in-out;\n    transition: opacity 0.8s ease-in-out;\n  }\n\n  \/* animaciones de los textos *\/\n  .cr-container input:checked ~ .cr-titles h3 span:nth-child(1) {\n    opacity: 0;\n    -moz-transform: scale(0.5);\n    -webkit-transform: scale(0.5);\n    transform: scale(0.5);\n  }\n  .cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(1),\n  .cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(1),\n  .cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(1),\n  .cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(1) {\n    opacity: 1;\n    -moz-transform: scale(1);\n    -webkit-transform: scale(1);\n    transform: scale(1);\n  }\n  .cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(2),\n  .cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(2),\n  .cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(2),\n  .cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(2){\n     opacity: 1;\n  }\n\u0026lt;\/style\u0026gt;\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003C!--[if IE]\u003E\u003Cstyle\u003E.cr-container {display:none;\u003C\/style\u003E\u003Cdiv style=\"text-align: center;\"\u003E\u003Cimg src=\"http:\/\/3.bp.blogspot.com\/-Bt3Ji_TRR6M\/T1EwaJmr7fI\/AAAAAAAATZI\/NfdccraJERg\/s600\/panelescss3.png\" \/\u003E\u003C\/div\u003E\u003C![endif]--\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E.cr-container {border: 10px solid #FFF;height: 400px;margin: 0 auto;overflow: hidden;position: relative;width: 600px;} .cr-container br {display:none;} .cr-container label {color: #98541C;cursor: pointer;float: left;font-size: 30px;height: 32px;line-height: 30px;margin-top: 350px;position: relative;text-align: center;width: 150px;z-index: 1000;} .cr-container label:before {background: rgba(255, 255, 255, 0.7);border-radius: 50%;box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.3);content: \"\";height: 32px;left: 50%;margin-left: -16px;position: absolute;width: 32px;z-index: -1;} .cr-container label:after{ background: -moz-linear-gradient(#FFF,#000,#FFF); background: -webkit-linear-gradient(#FFF,#000,#FFF); background: -o-linear-linear-gradient(#FFF,#000,#FFF); background: -ms-linear-linear-gradient(#FFF,#000,#FFF); background: linear--linear-gradient(#FFF,#000,#FFF); bottom: -20px; content: ''; height: 400px; position: absolute; right: 0px; width: 1px;} .cr-container label.cr-label-img-4:after{ width: 0px;} .cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4 { color: #000;} .cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before { background: #FFF;box-shadow: 0 0 0 4px rgba(0,0,0, 0.5);} .cr-container input{display: none;} .cr-bgimg {width: 600px;height: 400px;position: absolute;left: 0px;top: 0px;z-index: 1;background-repeat: no-repeat;background-position: 0 0;} .cr-bgimg div {width: 150px;height: 100%;position: relative;float: left;overflow: hidden;background-repeat: no-repeat;} .cr-bgimg div span {position: absolute;width: 100%;height: 100%;top: 0px;left: 150px;z-index: 2;text-indent: -9000px;} .cr-bgimg div:nth-child(odd) span {left: -150px;} .cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,.cr-bgimg div span:nth-child(1) { background-image: url(https:\/\/lh3.googleusercontent.com\/-VHpXrHU5jyQ\/TxyIE32jlaI\/AAAAAAAAA_Y\/qflVy8rLE-A\/s600\/34_0070.jpg);} .cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,.cr-bgimg div span:nth-child(2){ background-image: url(https:\/\/lh5.googleusercontent.com\/-WJYrbF2rTME\/Txxjo9wlWKI\/AAAAAAAAARM\/tYEmb-Dke1c\/s600\/02_0183.jpg);} .cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,.cr-bgimg div span:nth-child(3){ background-image: url(https:\/\/lh4.googleusercontent.com\/-Z9M27snA21g\/TxxzFysEMLI\/AAAAAAAAAfU\/tTB9xNxz5J0\/s640\/10_0207.jpg);} .cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,.cr-bgimg div span:nth-child(4){ background-image: url(https:\/\/lh5.googleusercontent.com\/-MVCZS-kyGGI\/TxxlMrnG8DI\/AAAAAAAAATE\/yeCnGStppJ4\/s600\/02_0197.jpg);} .cr-bgimg div:nth-child(1) span {background-position: 0px 0px;} .cr-bgimg div:nth-child(2) span {background-position: -150px 0px;} .cr-bgimg div:nth-child(3) span {background-position: -300px 0px;} .cr-bgimg div:nth-child(4) span {background-position: -450px 0px;} .cr-container input:checked ~ .cr-bgimg div span{ -webkit-animation: slideOutRight 0.6s ease-in-out; -moz-animation: slideOutRight 0.6s ease-in-out; -o-animation: slideOutRight 0.6s ease-in-out; -ms-animation: slideOutRight 0.6s ease-in-out; animation: slideOutRight 0.6s ease-in-out;} @-webkit-keyframes slideOutRight { 0%{ left: 0px; } 100%{ left: 150px; }} @-moz-keyframes slideOutRight { 0%{ left: 0px; } 100%{ left: 150px; }} @-o-keyframes slideOutRight { 0%{ left: 0px; } 100%{ left: 150px; }} @-ms-keyframes slideOutRight { 0%{ left: 0px; } 100%{ left: 150px; }} @keyframes slideOutRight { 0%{ left: 0px; } 100%{ left: 150px; }} .cr-container input:checked ~ .cr-bgimg div:nth-child(even) span { -webkit-animation: slideOutLeft 0.6s ease-in-out; -moz-animation: slideOutLeft 0.6s ease-in-out; -o-animation: slideOutLeft 0.6s ease-in-out; -ms-animation: slideOutLeft 0.6s ease-in-out; animation: slideOutLeft 0.6s ease-in-out;} @-webkit-keyframes slideOutLeft { 0%{ left: 0px; } 100%{ left: -150px; }} @-moz-keyframes slideOutLeft { 0%{ left: 0px; } 100%{ left: -150px; }} @-o-keyframes slideOutLeft { 0%{ left: 0px; } 100%{ left: -150px; }} @-ms-keyframes slideOutLeft { 0%{ left: 0px; } 100%{ left: -150px; }} @keyframes slideOutLeft { 0%{ left: 0px; } 100%{ left: -150px; }} .cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2), .cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4) {-webkit-transition: left 0.5s ease-in-out; -moz-transition: left 0.5s ease-in-out; -o-transition: left 0.5s ease-in-out; -ms-transition: left 0.5s ease-in-out; transition: left 0.5s ease-in-out; -webkit-animation: none; -moz-animation: none; -o-animation: none; -ms-animation: none; animation: none; left: 0px; z-index: 10;} .cr-titles h3 {font-weight: normal;} .cr-titles h3 span { z-index: 10000; position: absolute; width: 100%; left: 0px; text-align: center; opacity: 0; top: 50%;} .cr-titles h3 span.big {color: #FFF;font-family: Helvetica;font-size: 60px;letter-spacing: -2px;text-shadow: 1px 2px 1px #000; left: 0px;top: 230px; -webkit-transition: opacity 0.8s ease-in-out, -webkit-transform 0.8s ease-in-out; -moz-transition: opacity 0.8s ease-in-out, -moz-transform 0.8s ease-in-out; -o-transition: opacity 0.8s ease-in-out, -o-transform 0.8s ease-in-out; -ms-transition: opacity 0.8s ease-in-out, -ms-transform 0.8s ease-in-out; transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;} .cr-titles h3 span.small {background: rgba(255, 255, 255, 0.7);color: #000;font-family: Tahoma;font-size: 14px;letter-spacing: 0;margin-top: 100px;opacity: 0;padding: 5px 0;text-shadow: 1px 1px 1px #FFF; -webkit-transition: opacity 0.8s ease-in-out; -moz-transition: opacity 0.8s ease-in-out; -o-transition: opacity 0.8s ease-in-out; -ms-transition: opacity 0.8s ease-in-out; transition: opacity 0.8s ease-in-out;} .cr-container input:checked ~ .cr-titles h3 span:nth-child(1) { opacity: 0; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -o-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5);} .cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(1),.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(1),.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(1),.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(1) {opacity: 1;-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);-ms-transform: scale(1);transform: scale(1);} .cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(2),.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(2),.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(2),.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(2){opacity: 1;}\u003C\/style\u003E\u003Cdiv class=\"cr-container\"\u003E\u003Cinput id=\"select-img-1\" name=\"radio-set-1\" type=\"radio\" class=\"cr-selector-img-1\" checked\/\u003E\u003Clabel for=\"select-img-1\" class=\"cr-label-img-1\"\u003E1\u003C\/label\u003E\u003Cinput id=\"select-img-2\" name=\"radio-set-1\" type=\"radio\" class=\"cr-selector-img-2\" \/\u003E\u003Clabel for=\"select-img-2\" class=\"cr-label-img-2\"\u003E2\u003C\/label\u003E\u003Cinput id=\"select-img-3\" name=\"radio-set-1\" type=\"radio\" class=\"cr-selector-img-3\" \/\u003E\u003Clabel for=\"select-img-3\" class=\"cr-label-img-3\"\u003E3\u003C\/label\u003E\u003Cinput id=\"select-img-4\" name=\"radio-set-1\" type=\"radio\" class=\"cr-selector-img-4\" \/\u003E\u003Clabel for=\"select-img-4\" class=\"cr-label-img-4\"\u003E4\u003C\/label\u003E\u003Cdiv class=\"clr\"\u003E\u003C\/div\u003E\u003Cdiv class=\"cr-bgimg\"\u003E\u003Cdiv\u003E\u003Cspan\u003ESlice 1 - Image 1\u003C\/span\u003E\u003Cspan\u003ESlice 1 - Image 2\u003C\/span\u003E\u003Cspan\u003ESlice 1 - Image 3\u003C\/span\u003E\u003Cspan\u003ESlice 1 - Image 4\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan\u003ESlice 2 - Image 1\u003C\/span\u003E\u003Cspan\u003ESlice 2 - Image 2\u003C\/span\u003E\u003Cspan\u003ESlice 2 - Image 3\u003C\/span\u003E\u003Cspan\u003ESlice 2 - Image 4\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan\u003ESlice 3 - Image 1\u003C\/span\u003E\u003Cspan\u003ESlice 3 - Image 2\u003C\/span\u003E\u003Cspan\u003ESlice 3 - Image 3\u003C\/span\u003E\u003Cspan\u003ESlice 3 - Image 4\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan\u003ESlice 4 - Image 1\u003C\/span\u003E\u003Cspan\u003ESlice 4 - Image 2\u003C\/span\u003E\u003Cspan\u003ESlice 4 - Image 3\u003C\/span\u003E\u003Cspan\u003ESlice 4 - Image 4\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"cr-titles\"\u003E\u003Ch3\u003E\u003Cspan class=\"big\"\u003Eesta es la imagen\u003C\/span\u003E\u003Cspan class=\"small\"\u003EUn ejemplo de paneles deslizantes\u003C\/span\u003E\u003C\/h3\u003E\u003Ch3\u003E\u003Cspan class=\"big\"\u003Ealgunos efectos\u003C\/span\u003E\u003Cspan class=\"small\"\u003ELorem ipsum dolor sit amet, consectetuer adipiscing elit.\u003C\/span\u003E\u003C\/h3\u003E\u003Ch3\u003E\u003Cspan class=\"big\"\u003Eusando CSS3\u003C\/span\u003E\u003Cspan class=\"small\"\u003Ewisi enim ad minim veniam, quis nostrud exerci tation ullamcorper\u003C\/span\u003E\u003C\/h3\u003E\u003Ch3\u003E\u003Cspan class=\"big\" style=\"color:#000;text-shadow:2px 2px 2px #FFF;letter-spacing:2px;font-family:Georgia;\"\u003Epersonalizable\u003C\/span\u003E\u003Cspan class=\"small\" style=\"font-weight:bold\"\u003Edefiniendo estilos para cada panel\u003C\/span\u003E\u003C\/h3\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/4465946427640023269\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/07\/paneles-deslizantes-con-css.html#comment-form","title":"14 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/4465946427640023269"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/4465946427640023269"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/07\/paneles-deslizantes-con-css.html","title":"Paneles deslizantes con CSS"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/3.bp.blogspot.com\/-Bt3Ji_TRR6M\/T1EwaJmr7fI\/AAAAAAAATZI\/NfdccraJERg\/s72-c\/panelescss3.png","height":"72","width":"72"},"thr$total":{"$t":"14"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-8282832988001180484"},"published":{"$t":"2012-07-16T00:02:00.002-03:00"},"updated":{"$t":"2012-07-16T01:14:39.808-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Tooltips animados con CSS"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EEsta es una forma de generar \u003Cspan style=\"font-style: italic;\"\u003Etooltips\u003C\/span\u003E animadas, desarrollada por \u003Ca href=\"http:\/\/www.alessioatzeni.com\/blog\/css3-tooltip-with-animation-no-jquery\/\" target=\"_blank\"\u003EAlessio Atzeni\u003C\/a\u003E y no sólo requiere CSS3 para ser implementada en cualquier sitio. Obviamente, como muchas de estas cosas, la animación no funcionará en todos los navegadores aunque el \u003Cspan style=\"font-style: italic;\"\u003Etooltip\u003C\/span\u003E será visible sin problemas.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEl HTML es sencillo, sólo es una lista ordenada dentro de un DIV:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div id=\"masterpanel\"\u0026gt;\n  \u0026lt;ul id=\"mainpanel\"\u0026gt;\n    \u0026lt;li\u0026gt;\u0026lt;a href=\"#\" class=\"picasa\"\u0026gt;\u0026lt;small\u0026gt;abrir Picasa\u0026lt;\/small\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\n    \u0026lt;li\u0026gt;\u0026lt;a href=\"#\" class=\"stumble\"\u0026gt;\u0026lt;small\u0026gt;enviar a Stumble\u0026lt;\/small\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\n    \u0026lt;li\u0026gt;\u0026lt;a href=\"#\" class=\"twitter\"\u0026gt;\u0026lt;small\u0026gt;compartir en Twitterr\u0026lt;\/small\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\n    \u0026lt;li\u0026gt;\u0026lt;a href=\"#\" class=\"youtube\"\u0026gt;\u0026lt;small\u0026gt;el canal de YouTube\u0026lt;\/small\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\n    \u0026lt;li\u0026gt;\u0026lt;a href=\"#\" class=\"facebook\"\u0026gt;\u0026lt;small\u0026gt;compartir en Facebook\u0026lt;\/small\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\n  \u0026lt;\/ul\u0026gt;\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ECada etiqueta LI contiene un enlace con una clase distinta y el contenido es el texto será el que vamos a ver en el \u003Cspan style=\"font-style: italic;\"\u003Etooltip\u003C\/span\u003E.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nLógicamente, la clave es el CSS:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;style\u0026gt;\n#masterpanel { \/* este es contenedor principal *\/ }\n#masterpanel ul { \/* la lista *\/\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n#masterpanel ul li { \/* cada item de la lista *\/\n  padding: 0;\n  margin: 0;\n  position: relative;\n}\n\n\/* este es el enlace *\/\n#masterpanel ul li a {\n  background-color: transparent;\n  background-repeat: no-repeat;\n  background-position: 50% 0;\n  text-decoration: none;\n  margin: 0 5px; \/* la separación entre ellos *\/\n  float: left; \/* uno al lado del otro *\/\n  position: relative;\n  padding: 0 20px;\n  \/* el tamaño de las imágenes *\/\n  height: 60px;\n  width: 60px;\n}\n\n\/* las imágenes son los fondos de esos enlaces *\/\na.tpicasa {background-image: url(imagen1);}\na.tstumble {background-image: url(imagen2);}\na.ttwitter {background-image: url(imagen3);}\na.tyoutube {background-image: url(imagen4);}\na.tfacebook {background-image: url(imagen5);}\n\n\/* el texto del tooltip permanecerá oculto *\/\n#masterpanel a small {\n  background-color: Brown;\n  border-radius: 10px;\n  color: #FFF;\n  display: none;\n  font-size: 11px;\n  line-height: 1;\n  padding: 5px;\n  text-align: center;\n  width: 90px; \/* es el ancho real del enlace *\/\n}\n\n\/* el efecto hover hace visible al tooltip *\/\n#masterpanel a:hover small { \n  display:block; \n  left: 0; \n  margin-top:-35px; \n  position:absolute; \n  top: 0;\n  z-index:9999;\n  \/* la animación para Firefox y Chrome\/Safari *\/\n  -moz-animation:mymove .25s linear;\n  -webkit-animation:mymove .25s linear; \n}\n\n\/* las reglas de la animación para cada uno de los navegadores *\/\n@-moz-keyframes mymove {\n  0%{ -moz-transform: scale(0,0); opacity:0;}\n  50%{ -moz-transform: scale(1.2,1.2); opacity:0.3; }\n  75%{ -moz-transform: scale(0.9,0.9); opacity:0.7;}\n  100%{ -moz-transform: scale(1,1); opacity:1;}\n}\n@-webkit-keyframes mymove {\n  0%{ -webkit-transform: scale(0,0); opacity:0;}\n  50%{ -webkit-transform: scale(1.2,1.2); opacity:0.3;}\n  75%{ -webkit-transform: scale(0.9,0.9); opacity:0.7;}\n  100%{ -webkit-transform: scale(1,1); opacity:1;}\n}\n\u0026lt;\/style\u0026gt;\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E#masterpanel {margin-left:40px;} #masterpanel ul {padding:0;margin:0;list-style:none;} #masterpanel ul li {padding:0;margin:0;position:relative;} #masterpanel ul li a {background-color:transparent;background-repeat:no-repeat;background-position: 50% 0;padding:0 20px;margin:0 5px; float:left; height:60px; width:60px; text-decoration:none; position:relative;} a.tpicasa {background-image:url(http:\/\/2.bp.blogspot.com\/-tclI2bPAxL4\/T0_SuXm7OtI\/AAAAAAAATYM\/fGMWZRkhbwg\/s00\/tooltipcss1.png);} a.tstumble {background-image:url(http:\/\/3.bp.blogspot.com\/-ah_1-kKPXLE\/T0_SuZ50CaI\/AAAAAAAATYU\/pPNHJxliw7s\/s00\/tooltipcss2.png);} a.ttwitter {background-image:url(http:\/\/2.bp.blogspot.com\/--ugqvmR9hSE\/T0_SupUuBgI\/AAAAAAAATYg\/lwgYA4-Bzwk\/s00\/tooltipcss3.png);} a.tyoutube {background-image:url(http:\/\/1.bp.blogspot.com\/-pIAmE-yjQGE\/T0_Su6ZcHiI\/AAAAAAAATYw\/oTuQ_Rq0Qk4\/s00\/tooltipcss4.png);} a.tfacebook {background-image:url(http:\/\/2.bp.blogspot.com\/-pumbtE0S5j0\/T0_SvGLo7VI\/AAAAAAAATY8\/PITIr6eubOE\/s00\/tooltipcss5.png);} #masterpanel a small {background-color: Brown;border-radius: 10px;color: #FFF;display: none;font-size: 11px;font-weight: normal;width: 90px;padding: 5px;line-height: 1;text-align: center;} #masterpanel a:hover small {display:block;position:absolute;top:0px;left:0;margin-top:-35px;z-index:9999;-moz-animation:mymove .25s linear;-webkit-animation:mymove .25s linear;} @-moz-keyframes mymove {0%{ -moz-transform:scale(0,0); opacity:0;} 50%{ -moz-transform:scale(1.2,1.2); opacity:0.3; } 75%{ -moz-transform:scale(0.9,0.9); opacity:0.7;} 100%{ -moz-transform:scale(1,1); opacity:1;} } @-webkit-keyframes mymove {0%{ -webkit-transform:scale(0,0); opacity:0;} 50%{ -webkit-transform:scale(1.2,1.2); opacity:0.3;} 75%{ -webkit-transform:scale(0.9,0.9); opacity:0.7;} 100%{ -webkit-transform:scale(1,1); opacity:1;} }\u003C\/style\u003E\u003Cdiv id=\"masterpanel\"\u003E\u003Cul id=\"mainpanel\"\u003E\u003Cli\u003E\u003Ca href=\"#\" class=\"tpicasa\"\u003E\u003Csmall\u003Eabrir picasa\u003C\/small\u003E\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#\" class=\"tstumble\"\u003E\u003Csmall\u003Eenviar a stumble\u003C\/small\u003E\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#\" class=\"ttwitter\"\u003E\u003Csmall\u003Ecompartir en twitter\u003C\/small\u003E\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#\" class=\"tyoutube\"\u003E\u003Csmall\u003Eel canal de youtube\u003C\/small\u003E\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#\" class=\"tfacebook\"\u003E\u003Csmall\u003Ecompartir en facebook\u003C\/small\u003E\u003C\/a\u003E\u003C\/li\u003E\n\u003C\/ul\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/8282832988001180484\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/07\/tooltips-animados-con-css.html#comment-form","title":"12 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/8282832988001180484"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/8282832988001180484"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/07\/tooltips-animados-con-css.html","title":"Tooltips animados con CSS"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"12"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-4135920322605206647"},"published":{"$t":"2012-07-09T00:01:00.001-03:00"},"updated":{"$t":"2017-07-20T02:18:59.463-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Varios métodos para diferenciar los enlaces"},"content":{"type":"html","$t":"\u003Cdiv class=\"vagacode\"\u003E\u003Cdiv class=\"sue\"\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/5zjHj4u.jpg\"\u003E\u003Cp\u003EEn CSS, un selector es un vínculo entre el HTML y la hoja de estilo. Todas las etiquetas son selectores y cada uno de ellas posee un conjunto de propiedades generales y particulares. Pero como esto es insuficiente, también existen selectores especiales que nos permiten crear reglas muy específicas.\u003C\/p\u003E\u003C\/div\u003E\u003Cdiv class=\"gowi\"\u003E\u003Cspan\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/yrSqFzYl.png\"\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/selectores-en-css\"\u003Eleer artículo actualizado\u003C\/a\u003E\u003C\/span\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/\"\u003E\u003Cimg class=\"wlogo\" src=\"http:\/\/i.imgur.com\/QZHLte7.png\"\u003E\u003C\/a\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/4135920322605206647\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/07\/varios-metodos-para-diferenciar-los.html#comment-form","title":"20 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/4135920322605206647"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/4135920322605206647"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/07\/varios-metodos-para-diferenciar-los.html","title":"Varios métodos para diferenciar los enlaces"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"20"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-4123680720054074432"},"published":{"$t":"2012-07-02T00:03:00.002-03:00"},"updated":{"$t":"2017-07-20T02:19:03.399-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"El selector universal"},"content":{"type":"html","$t":"\u003Cdiv class=\"vagacode\"\u003E\u003Cdiv class=\"sue\"\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/5zjHj4u.jpg\"\u003E\u003Cp\u003EEn CSS, un selector es un vínculo entre el HTML y la hoja de estilo. Todas las etiquetas son selectores y cada uno de ellas posee un conjunto de propiedades generales y particulares. Pero como esto es insuficiente, también existen selectores especiales que nos permiten crear reglas muy específicas.\u003C\/p\u003E\u003C\/div\u003E\u003Cdiv class=\"gowi\"\u003E\u003Cspan\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/yrSqFzYl.png\"\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/selectores-en-css\"\u003Eleer artículo actualizado\u003C\/a\u003E\u003C\/span\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/\"\u003E\u003Cimg class=\"wlogo\" src=\"http:\/\/i.imgur.com\/QZHLte7.png\"\u003E\u003C\/a\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/4123680720054074432\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/07\/el-selector-universal.html#comment-form","title":"2 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/4123680720054074432"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/4123680720054074432"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/07\/el-selector-universal.html","title":"El selector universal"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"2"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-8699297669158444439"},"published":{"$t":"2012-06-19T17:08:00.000-03:00"},"updated":{"$t":"2012-06-19T17:08:07.969-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"margin y padding: Parecen lo mismo pero no lo son"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003E¿Acaso estos dos textos son iguales? Uno está a la derecha, otro a la izquierda pero, parecen tener el mismo tamaño y estar separados a la misma distancia en todos sus lados:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E#mpxample{ margin: 0 auto;width: 500px;color:#FFF;}#mpxample div {font-size: 20px;text-align: center;width: 200px;}\u003C\/style\u003E\u003Cdiv id=\"mpxample\"\u003E\u003Cdiv style=\"margin:20px;padding:0;float:left;\"\u003Eun texto\u003C\/div\u003E\u003Cdiv style=\"margin:0;padding:20px;float:right;\"\u003Eun texto\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv style=\"clear:both;\"\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003ENo es así, aunque ambos tienen el mismo ancho (200 pixeles) y el mismo tipo de fuente, uno tiene un margen y el otro tiene un \u003Cspan style=\"font-style: italic;\"\u003Epadding\u003C\/span\u003E.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nY \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2010\/09\/los-misterios-del-margin-y-el-padding.html\" target=\"_blank\"\u003Eotra vez volvemos \u003C\/a\u003E a eso que es fundamental entender y que provoca muchas preguntas y genera dudas cuando queremos acomodar las cosas en una página \u003Cspan style=\"font-style: italic;\"\u003Eweb\u003C\/span\u003E.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSi bien, aparentemente, usar \u003Cspan style=\"font-weight: bold;\"\u003Emargin\u003C\/span\u003E y usar \u003Cspan style=\"font-weight: bold;\"\u003Epadding\u003C\/span\u003E es lo mismo: \u003Cspan style=\"font-weight: bold;\"\u003ENO ES LO MISMO\u003C\/span\u003E y es fácil de ver apenas le agregamos un borde:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv id=\"mpxample\"\u003E\u003Cdiv style=\"margin:20px;padding:0;float:left;outline:1px solid #FFF;\"\u003Eun texto\u003C\/div\u003E\u003Cdiv style=\"margin:0;padding:20px;float:right;outline:1px solid #FFF;\"\u003Eun texto\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv style=\"clear:both;\"\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003Eo un color de fondo:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv id=\"mpxample\"\u003E\u003Cdiv style=\"margin:20px;padding:0;float:left;background-color:CornflowerBlue;\"\u003Eun texto\u003C\/div\u003E\u003Cdiv style=\"margin:0;padding:20px;float:right;background-color:CornflowerBlue;\"\u003Eun texto\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv style=\"clear:both;\"\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003ECada etiqueta es un rectángulo y esos rectángulos se pueden separar unos de otros utilizando la propiedad margin. El margen a la izquierda o a la dercha es universal, se aplica a todas las etiquetas; el margen superior o inferior sólo es efectivo cuando se trata de etiquetas de tipo bloque (DIV, P, etc) o aquellas que tienen propiedades que las transforman en bloques (display, position, etc).\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEl padding no separa un rectángulo del otro sino que separa el contenido de ese rectángulo:\u003C\/div\u003E\u003Cul class=\"lista\"\u003E\u003Cli\u003Eel margen es externo; el padding es interno.\u003C\/li\u003E\n\u003Cli\u003Eel margen no cambia el tamaño del elemento, el padding si.\u003C\/li\u003E\n\u003C\/ul\u003E\u003Cdiv style=\"text-align: justify;\"\u003ENo hay una regla exclusiva para todos los casos posibles pero, en general, si un elemento no tiene bordes ni fondo, basta definir una cualquiera de esas propiedades y no es necesario agregar ambas. Esto, es algo bastante común y confunde mucho ya que se generan espacios vacíos que se van sumando. Aunque no es una regla de oro, siempre he pensado que lo mejor es eliminar cuanto margen y padding exista y luego, agregarlos uno por uno, tratando de controlar esas separaciones y de ese modo, evitar que eso que creemos que tiene cierto tamaño, se vea cortado, apretujado o demasiado separado sin que uno sepa bien por qué.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nIncluso, una etiqueta vacía (sin contenido) puede generar espacios, separaciones que no sabemos de dónde salen o por qué se producen ¿por qué hay un espacio acá abajo?\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv id=\"mpxample\"\u003E\u003Cdiv style=\"margin:20px;padding:0;float:left;\"\u003E\u003C\/div\u003E\u003Cdiv style=\"margin:0;padding:20px;float:right;\"\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv style=\"clear:both;\"\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003ESimplemente porque esas etiquetas vacías, sin contenido, tienen un margen o padding. Otra vez, basta ponerles un borde o un fondo para \"verlas\":\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv id=\"mpxample\"\u003E\u003Cdiv style=\"margin:20px;padding:0;float:left;outline:1px solid #FFF;\"\u003E\u003C\/div\u003E\u003Cdiv style=\"margin:0;padding:20px;float:right;outline:1px solid #FFF;\"\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv style=\"clear:both;\"\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003E¿Hay una forma sencilla de \"ver\" el tamaño real de algo? Si no queremos agregarle un color de fondo se peude utilizar la propiedad \u003Cspan style=\"font-weight: bold;\"\u003Eoutline\u003C\/span\u003E que agregará un borde que no ocupará espacio y por lo tanto, el elemento tendrá el tamaño real y podremos ver el lugar que realmente ocupa dentro de la página.\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/8699297669158444439\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/06\/margin-y-padding-parecen-lo-mismo-pero.html#comment-form","title":"3 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/8699297669158444439"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/8699297669158444439"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/06\/margin-y-padding-parecen-lo-mismo-pero.html","title":"margin y padding: Parecen lo mismo pero no lo son"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"3"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-3788588445826094727"},"published":{"$t":"2012-06-18T00:04:00.001-03:00"},"updated":{"$t":"2012-06-18T00:04:00.471-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Efectos originales usando CSS"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003ELas posibilidades del CSS3 sólo están comenzando a ser aplicadas y de alguna manera, son infinitas. Las opciones son muchísimas y en general, bastante simples de aplicar. En este caso, \u003Ca href=\"http:\/\/gemablog-.blogspot.com\/2011\/11\/original-efecto-hover.html\" target=\"_blank\"\u003EGem@\u003C\/a\u003E nos enseña cómo realizar una serie de efectos originales creados por \u003Ca href=\"http:\/\/tympanus.net\/codrops\/2011\/11\/02\/original-hover-effects-with-css3\/\" target=\"_blank\"\u003Ecodrops\u003C\/a\u003E. Acá, sólo voy a intentar reproducir uno de ellos pero el resto, se pueden ver en el \u003Ca href=\"http:\/\/tympanus.net\/Tutorials\/OriginalHoverEffects\/\" target=\"_blank\"\u003Edemo online\u003C\/a\u003E o descargar directamente a la PC.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nTodos ellos tienen una estructura similar; dentro de un DIV con cierta clase CSS (view), agregamos una imagen cuyo tamaño define el resto de las propiedades y luego, otro DIV que permanecerá oculto (mask) y cuyo contenido puede ser variable.\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div class=\"view\"\u0026gt;\n  \u0026lt;img src=\"URL_IMAGEN\" \/\u0026gt;\n  \u0026lt;div class=\"mask\"\u0026gt;\n    \u0026lt;h4\u0026gt; el título \u0026lt;\/h4\u0026gt;\n    \u0026lt;p\u0026gt; el trexto \u0026lt;\/p\u0026gt;\n    \u0026lt;a href=\"#\" class=\"info\"\u0026gt; LEER MAS \u0026lt;\/a\u0026gt;\n\u0026lt;\/div\u0026gt;\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EObviamente, el CSS es lo que importa y es ... largo porque, lamentablemente, hay que repetir muchas propiedades ya que los navegadores, aún n ose han decidido a unificarlas.\u003C\/div\u003E\u003Cpre\u003E\u0026lt;style\u0026gt;\n.view { \/* el DIV principal al le damos la misma dimensión que a la imagen a usar, en este caso, 300x188 *\/\n    border: 10px solid #FFF;\n    cursor: pointer;\n    height: 188px;\n    margin: 0 auto;\n    overflow: hidden;\n    position: relative;\n    text-align: center;\n    width: 300px;\n  }\n  .view img { \/* la imagen *\/\n    display: block;\n    position: relative;\n    -moz-transition: all 0.5s ease-out;\n    -webkit-transition: all 0.5s ease-out;\n    -o-transition: all 0.5s ease-out;\n    transition: all 0.5s ease-out;\n    opacity: 1;\n    filter: alpha(opacity=100);\n  }\n  .view:hover img { \/* se \"anima cuando ponesmos el cursor encima *\/\n    -moz-transform: rotate(720deg) scale(0);\n    -webkit-transform: rotate(720deg) scale(0);\n    -o-transform: rotate(720deg) scale(0);\n    -ms-transform: rotate(720deg) scale(0);\n    transform: rotate(720deg) scale(0);\n    opacity: 0;\n    filter: alpha(opacity=0);\n  }\n  .view .mask { \/* el DIV oculto con los textos *\/\n    background-color: #ABC;\n    height: 188px;\n    left: 0;\n    position: absolute;\n    overflow: hidden;\n    top: 0;\n    width: 300px;\n    -moz-transform: rotate(0deg) scale(1);\n    -webkit-transform: rotate(0deg) scale(1);\n    -o-transform: rotate(0deg) scale(1);\n    -ms-transform: rotate(0deg) scale(1);\n    transform: rotate(0deg) scale(1);\n    -moz-transition: all 0.3s ease-out;\n    -webkit-transition: all 0.3s ease-out;\n    -o-transition: all 0.3s ease-out;\n    transition: all 0.3s ease-out;\n    opacity: 0;\n    filter: alpha(opacity=0);\n  }\n  .view:hover .mask { \/* se muestra el DIV *\/\n    -moz-transform: translateY(0px) rotate(0deg);\n    -webkit-transform: translateY(0px) rotate(0deg);\n    -o-transform: translateY(0px) rotate(0deg);\n    -ms-transform: translateY(0px) rotate(0deg);\n    transform: translateY(0px) rotate(0deg);\n    -moz-transition-delay: 0.4s;\n    -webkit-transition-delay: 0.4s;\n    -o-transition-delay: 0.4s;\n    transition-delay: 0.4s;\n    opacity: 1;\n    filter: alpha(opacity=100);\n  }\n  .view h4 { \/* el título que permanece oculto *\/\n    background-color: rgba(255, 255, 255, 0.5);\n    color: #FFF;\n    text-align: center;\n    position: relative;\n    font-family: Georgia;\n    font-size: 20px;\n    margin: 20px 0 0 0;\n    padding: 5px 0;\n    text-shadow: 0 3px 1px #000;\n    -moz-transform: translateY(-200px);\n    -webkit-transform: translateY(-200px);\n    -o-transform: translateY(-200px);\n    -ms-transform: translateY(-200px);\n    transform: translateY(-200px);\n    -moz-transition: all 0.2s ease-in-out;\n    -webkit-transition: all 0.2s ease-in-out;\n    -o-transition: all 0.2s ease-in-out;\n    transition: all 0.2s ease-in-out;\n  }\n  .view:hover h4 { \/* se muestra el título *\/\n    -moz-transform: translateY(0px);\n    -webkit-transform: translateY(0px);\n    -o-transform: translateY(0px);\n    -ms-transform: translateY(0px);\n    transform: translateY(0px);\n    -moz-transition-delay: 0.7s;\n    -webkit-transition-delay: 0.7s;\n    -o-transition-delay: 0.7s;\n    transition-delay: 0.7s;\n  }\n  .view p { \/* el texto que permanece oculto *\/\n    color: #000;\n    font-family: Tahoma;\n    font-size: 13px;\n    margin: 0;\n    padding: 15px;\n    position: relative;\n    text-align: center;\n    text-shadow: 1px 1px 1px #FFF;\n    -moz-transform: translateY(-200px);\n    -webkit-transform: translateY(-200px);\n    -o-transform: translateY(-200px);\n    -ms-transform: translateY(-200px);\n    transform: translateY(-200px);\n    -moz-transition: all 0.2s ease-in-out;\n    -webkit-transition: all 0.2s ease-in-out;\n    -o-transition: all 0.2s ease-in-out;\n    transition: all 0.2s ease-in-out;\n  }\n  .view:hover p { \/* se muestra el texto *\/\n    -moz-transform: translateY(0px);\n    -webkit-transform: translateY(0px);\n    -o-transform: translateY(0px);\n    -ms-transform: translateY(0px);\n    transform: translateY(0px);\n    -moz-transition-delay: 0.6s;\n    -webkit-transition-delay: 0.6s;\n    -o-transition-delay: 0.6s;\n    transition-delay: 0.6s;\n  }\n  .view a.info { \/* el enlace que permanece oculto *\/\n    background-color: #456;\n    border-radius: 5px;\n    box-shadow: 0 0 2px #FFF, 0 0 5px #FFF inset;\n    color: #FFF;\n    display: inline-block;\n    padding: 7px 14px;\n    text-decoration: none;\n    -moz-transform: translateY(-200px);\n    -webkit-transform: translateY(-200px);\n    -o-transform: translateY(-200px);\n    -ms-transform: translateY(-200px);\n    transform: translateY(-200px);\n    -moz-transition: all 0.2s ease-in-out;\n    -webkit-transition: all 0.2s ease-in-out;\n    -o-transition: all 0.2s ease-in-out;\n    transition: all 0.2s ease-in-out;\n  }\n  .view a.info:hover {\n    box-shadow: 0 0 5px #FFF;\n  }\n  .view:hover a.info { \/* se muestra el enlace *\/\n    -moz-transform: translateY(0px);\n    -webkit-transform: translateY(0px);\n    -o-transform: translateY(0px);\n    -ms-transform: translateY(0px);\n    transform: translateY(0px);\n    -moz-transition-delay: 0.5s;\n    -webkit-transition-delay: 0.5s;\n    -o-transition-delay: 0.5s;\n    transition-delay: 0.5s;\n  }\n\u0026lt;\/style\u0026gt;\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E.view {border: 10px solid #FFF;cursor: pointer;height: 188px;margin: 0 auto;overflow: hidden;position: relative;text-align: center;width: 300px;} .view img {display: block;position: relative;-moz-transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;-o-transition: all 0.5s ease-out;transition: all 0.5s ease-out;opacity: 1;filter: alpha(opacity=100);} .view:hover img {-webkit-transform: rotate(720deg) scale(0);-moz-transform: rotate(720deg) scale(0);-o-transform: rotate(720deg) scale(0);-ms-transform: rotate(720deg) scale(0);transform: rotate(720deg) scale(0);filter: alpha(opacity=0);opacity: 0;} .view .mask {background-color: #ABC;-webkit-transform: rotate(0deg) scale(1);-moz-transform: rotate(0deg) scale(1);-o-transform: rotate(0deg) scale(1);-ms-transform: rotate(0deg) scale(1);transform: rotate(0deg) scale(1);filter: alpha(opacity=0);opacity: 0;-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;width: 300px;height: 188px;position: absolute;overflow: hidden;top: 0;left: 0;} .view:hover .mask {filter: alpha(opacity=100);opacity: 1;-webkit-transform: translateY(0px) rotate(0deg);-moz-transform: translateY(0px) rotate(0deg);-o-transform: translateY(0px) rotate(0deg);-ms-transform: translateY(0px) rotate(0deg);transform: translateY(0px) rotate(0deg);-webkit-transition-delay: 0.4s;-moz-transition-delay: 0.4s;-o-transition-delay: 0.4s;transition-delay: 0.4s;} .view h4 {color: #FFF;text-align: center;position: relative;font-family: Georgia;font-size: 20px;margin: 10px 0 0;padding: 5px 0;background-color: rgba(255, 255, 255, 0.5);margin: 20px 0 0 0;-webkit-transform: translateY(-200px);-moz-transform: translateY(-200px);-o-transform: translateY(-200px);-ms-transform: translateY(-200px);transform: translateY(-200px);-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;text-shadow: 0 3px 1px #000;} .view:hover h4 {-webkit-transform: translateY(0px);-moz-transform: translateY(0px);-o-transform: translateY(0px);-ms-transform: translateY(0px);transform: translateY(0px);-webkit-transition-delay: 0.7s;-moz-transition-delay: 0.7s;-o-transition-delay: 0.7s;transition-delay: 0.7s;} .view p {color: #000;font-family: Tahoma;font-size: 13px;margin: 0;padding: 15px;position: relative;text-align: center;text-shadow: 1px 1px 1px #FFF;-webkit-transform: translateY(-200px);-moz-transform: translateY(-200px);-o-transform: translateY(-200px);-ms-transform: translateY(-200px);transform: translateY(-200px);-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;} .view:hover p {-webkit-transform: translateY(0px);-moz-transform: translateY(0px);-o-transform: translateY(0px);-ms-transform: translateY(0px);transform: translateY(0px);-webkit-transition-delay: 0.6s;-moz-transition-delay: 0.6s;-o-transition-delay: 0.6s;transition-delay: 0.6s;} .view a.info {background-color: #456;border-radius: 5px;box-shadow: 0 0 2px #FFF,, 0 0 5px #FFF inset;color: #FFF;display: inline-block;padding: 7px 14px;text-decoration: none;-webkit-transform: translateY(-200px);-moz-transform: translateY(-200px);-o-transform: translateY(-200px);-ms-transform: translateY(-200px);transform: translateY(-200px);-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;} .view a.info:hover {box-shadow: 0 0 5px #FFF;} .view:hover a.info {-webkit-transform: translateY(0px);-moz-transform: translateY(0px);-o-transform: translateY(0px);-ms-transform: translateY(0px);transform: translateY(0px);-webkit-transition-delay: 0.5s;-moz-transition-delay: 0.5s;-o-transition-delay: 0.5s;transition-delay: 0.5s;}\u003C\/style\u003E\u003Cdiv class=\"view\"\u003E\u003Cimg src=\"https:\/\/lh3.googleusercontent.com\/-jJeewTEbznk\/TMT0hAUK0zI\/AAAAAAAAB2w\/igGPy1uwknc\/s300\/18_0071.jpg\" \/\u003E\u003Cdiv class=\"mask\"\u003E\u003Ch4\u003Eestilos con estilo\u003C\/h4\u003E\u003Cp\u003EVivamus ultrices enim ac ante commodo et interdum odio pulvinar! Duis vel nisl at sapien luctus tincidunt. Mauris in erat risus, id euismod felis.\u003C\/p\u003E\u003Ca href=\"#\" class=\"info\"\u003ELEER MAS\u003C\/a\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/3788588445826094727\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/06\/efectos-originales-usando-css.html#comment-form","title":"18 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/3788588445826094727"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/3788588445826094727"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/06\/efectos-originales-usando-css.html","title":"Efectos originales usando CSS"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/lh3.googleusercontent.com\/-jJeewTEbznk\/TMT0hAUK0zI\/AAAAAAAAB2w\/igGPy1uwknc\/s72-c\/18_0071.jpg","height":"72","width":"72"},"thr$total":{"$t":"18"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-1845145661948683524"},"published":{"$t":"2012-06-11T00:02:00.005-03:00"},"updated":{"$t":"2017-05-13T02:36:58.251-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Videos y contenidos fluidos"},"content":{"type":"html","$t":"\u003Cdiv class=\"vagacode\"\u003E\u003Cdiv class=\"sue\"\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/5YM8qLpl.jpg\"\u003E\u003Cp\u003ECuanto más automatizamos una tarea, más cuidado tenemos que tener para establecer límites precisos ya que los navegadores no son inteligentes, no tienen sentido común ni ninguna otra característica humana; simplemente hacen lo que nosotros les indicamos que hagan.\u003C\/p\u003E\u003C\/div\u003E\u003Cdiv class=\"gowi\"\u003E\u003Cspan\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/yrSqFzYl.png\"\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/videos-y-contenidos-fluidos\"\u003Eleer artículo actualizado\u003C\/a\u003E\u003C\/span\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/\"\u003E\u003Cimg class=\"wlogo\" src=\"http:\/\/i.imgur.com\/QZHLte7.png\"\u003E\u003C\/a\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/1845145661948683524\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/06\/videos-y-contenidos-fluidos.html#comment-form","title":"8 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/1845145661948683524"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/1845145661948683524"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/06\/videos-y-contenidos-fluidos.html","title":"Videos y contenidos fluidos"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"8"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-8237817654185377908"},"published":{"$t":"2012-06-04T00:03:00.001-03:00"},"updated":{"$t":"2012-06-04T00:03:00.472-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Más botones animados con CSS"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EUna serie de ejemplos de botones animados con CSS3 publicados por \u003Ca href=\"http:\/\/tympanus.net\/codrops\/2011\/11\/07\/animated-buttons-with-css3\/\" target=\"_blank\"\u003Ecodrops\u003C\/a\u003E. Todos ellos hacen un uso intensivo de las posibilidades que nos dan las propiedades CSS3 pero me concentro en el \u003Ca href=\"http:\/\/tympanus.net\/Tutorials\/AnimatedButtons\/index4.html\" target=\"_blank\"\u003Eel ejemplo numero cuatro\u003C\/a\u003E que es el que más me ha llamado la atención.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEl botón es un enlace simple con una clase determinada pero, su contenido está formado por una serie de etiquetas SPAN:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;a href=\"#\" class=\"a-btn\"\u0026gt;\n  \u0026lt;span class=\"a-btn-text\"\u0026gt;un botón\u0026lt;\/span\u0026gt;\n  \u0026lt;span class=\"a-btn-slide-text\"\u0026gt;animado\u0026lt;\/span\u0026gt;\n  \u0026lt;span class=\"a-btn-icon-right\"\u0026gt;\n    \u0026lt;span\u0026gt;\u0026lt;\/span\u0026gt;\n  \u0026lt;\/span\u0026gt;\n\u0026lt;\/a\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EEse cúmulo de etiquetas internas es lo que nos permite crear la animación ya que podemos establecer propiedades diferentes para cada una de ellas.\u003C\/div\u003E\u003Cul class=\"lista\"\u003E\u003Cli\u003Ela clase \u003Cb\u003Ea-btn-text\u003C\/b\u003E será el texto visible\u003C\/li\u003E\n\u003Cli\u003Ela clase \u003Cb\u003Ea-btn-slide-text\u003C\/b\u003E el texto oculto que se mostrará al colocar el cursor encima del enlace\u003C\/li\u003E\n\u003Cli\u003Ela clase \u003Cb\u003Ea-btn-icon-right\u003C\/b\u003E será el contenedor de la imagen derecha\u003C\/li\u003E\n\u003C\/ul\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E.ejemplobotonesanimados {margin-left: 100px;} .a-btn {background:#CDE;background:-moz-linear-gradient(#CDE, #678);background:-webkit-linear-gradient(#CDE, #678);background:-o-linear-gradient(#CDE, #678);background:-ms-linear-gradient(#CDE, #678);background:-linear-gradient(#CDE, #678);border:1px solid #89A;border-radius:20px;box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);display:inline-block;filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#CDE', endColorstr='#678',GradientType=0 );font-weight: normal !important;height:40px;line-height: 40px;margin:10px 0px;padding: 0 70px 0 20px;position:relative;-webkit-transition:all 0.3s linear;-moz-transition:all 0.3s linear;-o-transition:all 0.3s linear;-ms-transition:all 0.3s linear;transition:all 0.3s linear;}.a-btn-text {color:#456;display:block;font-size:20px;text-shadow:0 1px 1px #FFF;white-space:nowrap;-moz-transition:all 0.2s linear;-webkit-transition:all 0.2s linear;-o-transition:all 0.2s linear;-ms-transition:all 0.2s linear;transition:all 0.2s linear;}.a-btn-slide-text {background:#456;color:#FFF;font-size:20px;font-family: Georgia;height:100%;line-height:40px;overflow:hidden;position:absolute;right:52px;text-align:left;text-indent:10px;text-shadow:1px 1px 1px #000;top:0px;white-space:nowrap;width:0;-moz-transition:width 0.3s linear;-webkit-transition:width 0.3s linear;-o-transition:width 0.3s linear;-ms-transition:width 0.3s linear;transition:width 0.3s linear;}.a-btn-icon-right {border-left:1px solid #89A;box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;height:100%;position:absolute;right:0;top:0;width:52px;}.a-btn-icon-right span {background:transparent url(http:\/\/4.bp.blogspot.com\/-ou__DWOTJS8\/T8pm2fPWXUI\/AAAAAAAAUZ0\/kikoLdBFIls\/s00\/arrow_right.png) no-repeat 50% 55%;height:38px;left:50%;margin:-20px 0px 0px -20px;opacity:0.7;position:absolute;top:50%;width:38px;-moz-transition:all 0.3s linear;-webkit-transition:all 0.3s linear;-o-transition:all 0.3s linear;-ms-transition:all 0.3s linear;transition:all 0.3s linear;}.a-btn:hover {padding-right:180px;}.a-btn:hover .a-btn-text {color:#000;text-shadow:0px 1px 1px #000;}.a-btn:hover .a-btn-slide-text {width:100px;}.a-btn:hover .a-btn-icon-right span {opacity:1;}#otrob:hover .a-btn-slide-text {width: 130px;}#otrob:hover {padding-right: 200px;}\u003C\/style\u003E\u003Cdiv class=\"ejemplobotonesanimados\"\u003E\u003Ca href=\"#\" class=\"a-btn\"\u003E\u003Cspan class=\"a-btn-text\"\u003Eun botón\u003C\/span\u003E\u003Cspan class=\"a-btn-slide-text\"\u003Eanimado\u003C\/span\u003E\u003Cspan class=\"a-btn-icon-right\"\u003E\u003Cspan\u003E\u003C\/span\u003E\u003C\/span\u003E\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Ca href=\"#\" class=\"a-btn\"\u003E\u003Cspan class=\"a-btn-text\"\u003Evarios ejemplos\u003C\/span\u003E\u003Cspan class=\"a-btn-slide-text\"\u003Eflexibles\u003C\/span\u003E\u003Cspan class=\"a-btn-icon-right\"\u003E\u003Cspan\u003E\u003C\/span\u003E\u003C\/span\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EY ahora, las propiedades de estilo:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;style\u0026gt;\n\n  \/* el enlace es el contenedor *\/\n  .a-btn {\n    background:#CDE;\n    background:-moz-linear-gradient(#CDE, #678);\n    background:-webkit-linear-gradient(#CDE, #678);\n    background:-o-linear-gradient(#CDE, #678);\n    background:-ms-linear-gradient(#CDE, #678);\n    background:-linear-gradient(#CDE, #678);\n    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#CDE', endColorstr='#678',GradientType=0 );\n    border:1px solid #89A;\n    border-radius:20px;\n    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);\n    display:inline-block;\n    height:40px;\n    line-height: 40px;\n    margin:10px 0px;\n    padding: 0 70px 0 20px; \/* esto dependerá del tamaño de la imagen *\/\n    position:relative;\n    -webkit-transition:all 0.3s linear;\n    -moz-transition:all 0.3s linear;\n    -o-transition:all 0.3s linear;\n    -ms-transition:all 0.3s linear;\n    transition:all 0.3s linear;\n  }\n\n  \/* el texto visible *\/\n  .a-btn-text {\n    color:#456;\n    display:block;\n    font-size:20px;\n    text-shadow:0 1px 1px #FFF;\n    white-space:nowrap;\n    -moz-transition:all 0.2s linear;\n    -webkit-transition:all 0.2s linear;\n    -o-transition:all 0.2s linear;\n    -ms-transition:all 0.2s linear;\n    transition:all 0.2s linear;\n  }\n\n  \/* el texto oculto *\/\n  .a-btn-slide-text {\n    background:#456;\n    color:#FFF;\n    font-size:20px;\n    font-family: Georgia;\n    height:100%;\n    line-height:40px;\n    overflow:hidden;\n    position:absolute;\n    right:52px;\n    text-align:left;\n    text-indent:10px;\n    text-shadow:1px 1px 1px #000;\n    top:0px;\n    white-space:nowrap;\n    width:0;\n    -moz-transition:width 0.3s linear;\n    -webkit-transition:width 0.3s linear;\n    -o-transition:width 0.3s linear;\n    -ms-transition:width 0.3s linear;\n    transition:width 0.3s linear;\n  }\n\n  \/* el contenedor de la imagen derecha *\/\n  .a-btn-icon-right {\n    border-left:1px solid #89A;\n    box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;\n    height:100%;\n    position:absolute;\n    right:0;\n    top:0;\n    width:52px;\n  }\n  \/* y la imagen *\/\n  .a-btn-icon-right span {\n    background:transparent url(arrow_right.png) no-repeat 50% 55%;\n    height:38px;\n    left:50%;\n    margin:-20px 0px 0px -20px;\n    opacity:0.7;\n    position:absolute;\n    top:50%;\n    width:38px;\n    -moz-transition:all 0.3s linear;\n    -webkit-transition:all 0.3s linear;\n    -o-transition:all 0.3s linear;\n    -ms-transition:all 0.3s linear;\n    transition:all 0.3s linear;\n  }\n\n  \/* los efectos hover *\/\n  .a-btn:hover {\n    padding-right:180px;\n  }\n  .a-btn:hover .a-btn-text {\n    color:#000;\n    text-shadow:0px 1px 1px #000;\n  }\n  .a-btn:hover .a-btn-slide-text {\n    width:100px;\n  }\n  .a-btn:hover .a-btn-icon-right span {\n    opacity:1;\n  }\n\n\u0026lt;\/style\u0026gt;\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EEl contenedor es bastante flexible y, llegado el caso, si los textos son largos, lo que debemos hacer es aumentar los valores de estas dos reglas:\u003C\/div\u003E\u003Cpre\u003E.a-btn:hover {} \n.a-btn:hover .a-btn-slide-text {}\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"ejemplobotonesanimados\"\u003E\u003Ca href=\"#\" id=\"otrob\" class=\"a-btn\"\u003E\u003Cspan class=\"a-btn-text\"\u003Etodo el botón ...\u003C\/span\u003E\u003Cspan class=\"a-btn-slide-text\"\u003Ees un enlace\u003C\/span\u003E\u003Cspan class=\"a-btn-icon-right\"\u003E\u003Cspan\u003E\u003C\/span\u003E\u003C\/span\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/8237817654185377908\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/06\/mas-botones-animados-con-css.html#comment-form","title":"20 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/8237817654185377908"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/8237817654185377908"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/06\/mas-botones-animados-con-css.html","title":"Más botones animados con CSS"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"20"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-4890445046603953086"},"published":{"$t":"2012-05-28T00:07:00.001-03:00"},"updated":{"$t":"2012-05-28T00:07:33.645-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Palabras animadas con CSS"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003E\nEste es un efecto creado exclusivamente con CSS donde ciertas palabras se animan, \"cayendo\" ordenadamente y son reemplazadas por otras usando transiciones y animaciones.\n\nEn el sitio d los desarrolladores hay \u003Ca href=\"http:\/\/tympanus.net\/Tutorials\/CSS3RotatingWords\/\" target=\"_blank\"\u003Evarios ejemplos\u003C\/a\u003E con variaciones pero, todos comparten la misma idea general. En principio, empezamos con el HTML, una serie de etiquetas SPAN dentro de un DIV:\u003C\/div\u003E\n\u003Cpre\u003E\u0026lt;div class=\"rw-sentence\"\u0026gt;\n  \u0026lt;span\u0026gt;Un ejemplo\u0026lt;\/span\u0026gt;\n  \u0026lt;span\u0026gt;donde las palabras\u0026lt;\/span\u0026gt;\n  \u0026lt;span\u0026gt;se van cayendo:\u0026lt;\/span\u0026gt;\n  \u0026lt;div class=\"rw-words rw-words-1\"\u0026gt;\n    \u0026lt;span\u0026gt;uno\u0026lt;\/span\u0026gt;\n    \u0026lt;span\u0026gt;dos\u0026lt;\/span\u0026gt;\n    \u0026lt;!-- etc etc etc --\u0026gt;\n    \u0026lt;span\u0026gt;tres\u0026lt;\/span\u0026gt;\n  \u0026lt;\/div\u0026gt;\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003E\nEso es simple aunque si se coloca dentro de un psot de Blogegr, hay que tener cuidado con los saltos de línea.\u003C\/div\u003E\n\n\u003Cstyle\u003E.rw-sentence{margin: 0 auto;text-align: left;width: 400px;}.rw-sentence span{color: #AAA;font-size: 30px;}.rw-words{display: inline;text-indent: 10px;}.rw-words-1 span{color: White;position: absolute;opacity: 0;overflow: hidden;-webkit-transform-origin: 10% 75%;-moz-transform-origin: 10% 75%;-ms-transform-origin: 10% 75%;-o-transform-origin: 10% 75%;transform-origin: 10% 75%;-webkit-animation: rotateWord 18s linear infinite 0s;-moz-animation: rotateWord 18s linear infinite 0s;-o-animation: rotateWord 18s linear infinite 0s;-ms-animation: rotateWord 18s linear infinite 0s;animation: rotateWord 18s linear infinite 0s;}.rw-words span:nth-child(2) {color: Red;-webkit-animation-delay: 3s; -moz-animation-delay: 3s; -o-animation-delay: 3s; -ms-animation-delay: 3s; animation-delay: 3s; }.rw-words span:nth-child(3) {color: Aqua;-webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; }.rw-words span:nth-child(4) {color: Bisque;-webkit-animation-delay: 9s; -moz-animation-delay: 9s; -o-animation-delay: 9s; -ms-animation-delay: 9s; animation-delay: 9s; }.rw-words span:nth-child(5) {color: CadetBlue;-webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; }.rw-words span:nth-child(6) {color: Yellow;-webkit-animation-delay: 15s; -moz-animation-delay: 15s; -o-animation-delay: 15s; -ms-animation-delay: 15s; animation-delay: 15s; }@-webkit-keyframes rotateWord {0% { opacity: 0; }5% { opacity: 1; }17% { opacity: 1; -webkit-transform: rotate(0deg); }19% { opacity: 1; -webkit-transform: rotate(98deg); }21% { opacity: 1; -webkit-transform: rotate(86deg); }23% { opacity: 1; -webkit-transform: translateY(85px) rotate(83deg); }25% { opacity: 0; -webkit-transform: translateY(170px) rotate(80deg); }80% { opacity: 0; }100% { opacity: 0; }}@-moz-keyframes rotateWord {0% { opacity: 0; }5% { opacity: 1; }17% { opacity: 1; -moz-transform: rotate(0deg); }19% { opacity: 1; -moz-transform: rotate(98deg); }21% { opacity: 1; -moz-transform: rotate(86deg); }23% { opacity: 1; -moz-transform: translateY(85px) rotate(83deg); }25% { opacity: 0; -moz-transform: translateY(170px) rotate(80deg); }80% { opacity: 0; }100% { opacity: 0; }}@-o-keyframes rotateWord {0% { opacity: 0; }5% { opacity: 1; }17% { opacity: 1; -o-transform: rotate(0deg); }19% { opacity: 1; -o-transform: rotate(98deg); }21% { opacity: 1; -o-transform: rotate(86deg); }23% { opacity: 1; -o-transform: translateY(85px) rotate(83deg); }25% { opacity: 0; -o-transform: translateY(170px) rotate(80deg); }80% { opacity: 0; }100% { opacity: 0; }}@-ms-keyframes rotateWord {0% { opacity: 0; }5% { opacity: 1; }17% { opacity: 1; -ms-transform: rotate(0deg); }19% { opacity: 1; -ms-transform: rotate(98deg); }21% { opacity: 1; -ms-transform: rotate(86deg); }23% { opacity: 1; -ms-transform: translateY(85px) rotate(83deg); }25% { opacity: 0; -ms-transform: translateY(170px) rotate(80deg); }80% { opacity: 0; }100% { opacity: 0; }}@keyframes rotateWord {0% { opacity: 0; }5% { opacity: 1; }17% { opacity: 1; transform: rotate(0deg); }19% { opacity: 1; transform: rotate(98deg); }21% { opacity: 1; transform: rotate(86deg); }23% { opacity: 1; transform: translateY(85px) rotate(83deg); }25% { opacity: 0; transform: translateY(170px) rotate(80deg); }80% { opacity: 0; }100% { opacity: 0; }}\u003C\/style\u003E\u003Cdiv class=\"rw-sentence\"\u003E\n\u003Cspan\u003EUn ejemplo\u003C\/span\u003E\n\u003Cspan\u003Edonde las palabras\u003C\/span\u003E\n\u003Cspan\u003Ese van cayendo:\u003C\/span\u003E\u003Cdiv class=\"rw-words rw-words-1\"\u003E\n\u003Cspan\u003Euno\u003C\/span\u003E\u003Cspan\u003Edos\u003C\/span\u003E\u003Cspan\u003Etres\u003C\/span\u003E\u003Cspan\u003Ecuatro\u003C\/span\u003E\u003Cspan\u003Ecinco\u003C\/span\u003E\u003Cspan\u003Eseis\u003C\/span\u003E\u003C\/div\u003E\n\u003C\/div\u003E\n\n\u003Cdiv style=\"text-align: justify;\"\u003E\nY claro, el CSS:\u003C\/div\u003E\n\u003Cpre\u003E\u0026lt;style\u0026gt;\n  .rw-sentence { \/* el DIV donde se verá el efecto *\/\n    margin: 0 auto;\n    text-align: left;\n    width: 400px;\n  }\n  .rw-sentence span { \/* cada uno de los párrafs *\/\n    color: #AAA;\n    font-size: 30px;\n  }\n  .rw-words { \/* las palabras que caen *\/\n    display: inline;\n    text-indent: 10px;\n  }\n  .rw-words-1 span { \/* la primera palabra *\/\n    color: White;\n    position: absolute;\n    opacity: 0;\n    overflow: hidden;\n    \/* la animación *\/\n    -moz-transform-origin: 10% 75%;\n    -webkit-transform-origin: 10% 75%;\n    -o-transform-origin: 10% 75%;\n    -ms-transform-origin: 10% 75%;\n    transform-origin: 10% 75%;\n    -moz-animation: rotateWord 18s linear infinite 0s;\n    -webkit-animation: rotateWord 18s linear infinite 0s;\n    -o-animation: rotateWord 18s linear infinite 0s;\n    -ms-animation: rotateWord 18s linear infinite 0s;\n    animation: rotateWord 18s linear infinite 0s;\n  }\n  \/* la animación de las siguientes *\/\n  .rw-words span:nth-child(2) { \/* la segunda *\/\n    color: Red;\n    -moz-animation-delay: 3s; \n    -webkit-animation-delay: 3s; \n    -o-animation-delay: 3s; \n    -ms-animation-delay: 3s; \n    animation-delay: 3s; \n  }\n  .rw-words span:nth-child(3) { \/* la tercera *\/\n    color: Aqua;\n    -webkit-animation-delay: 6s; \n    -moz-animation-delay: 6s; \n    -o-animation-delay: 6s; \n    -ms-animation-delay: 6s; \n    animation-delay: 6s;\n  }\n  .rw-words span:nth-child(4) { \/* la cuarta *\/\n    color: Bisque;\n    -moz-animation-delay: 9s; \n    -webkit-animation-delay: 9s; \n    -o-animation-delay: 9s; \n    -ms-animation-delay: 9s; \n    animation-delay: 9s;\n  }\n  .rw-words span:nth-child(5) { \/* la la quinta *\/\n    color: CadetBlue;\n    -moz-animation-delay: 12s; \n    -webkit-animation-delay: 12s; \n    -o-animation-delay: 12s; \n    -ms-animation-delay: 12s; \n    animation-delay: 12s;\n  }\n  .rw-words span:nth-child(6) { \/* la última *\/\n    color: Yellow;\n    -moz-animation-delay: 15s; \n    -webkit-animation-delay: 15s; \n    -o-animation-delay: 15s; \n    -ms-animation-delay: 15s; \n    animation-delay: 15s;\n  }\n   \/* y las reglas de las animaciones para cada navegador *\/\n  @-moz-keyframes rotateWord { \/* Firefox *\/\n    0% { opacity: 0; }\n    5% { opacity: 1; }\n    17% { opacity: 1; -moz-transform: rotate(0deg); }\n    19% { opacity: 1; -moz-transform: rotate(98deg); }\n    21% { opacity: 1; -moz-transform: rotate(86deg); }\n    23% { opacity: 1; -moz-transform: translateY(85px) rotate(83deg); }\n    25% { opacity: 0; -moz-transform: translateY(170px) rotate(80deg); }\n    80% { opacity: 0; }\n    100% { opacity: 0; }\n  }\n  @-webkit-keyframes rotateWord { \/* Chrome\/Safari *\/\n    0% { opacity: 0; }\n    5% { opacity: 1; }\n    17% { opacity: 1; -webkit-transform: rotate(0deg); }\n    19% { opacity: 1; -webkit-transform: rotate(98deg); }\n    21% { opacity: 1; -webkit-transform: rotate(86deg); }\n    23% { opacity: 1; -webkit-transform: translateY(85px) rotate(83deg); }\n    25% { opacity: 0; -webkit-transform: translateY(170px) rotate(80deg); }\n    80% { opacity: 0; }\n    100% { opacity: 0; }\n  }\n  @-o-keyframes rotateWord { \/* Opera *\/\n    0% { opacity: 0; }\n    5% { opacity: 1; }\n    17% { opacity: 1; -o-transform: rotate(0deg); }\n    19% { opacity: 1; -o-transform: rotate(98deg); }\n    21% { opacity: 1; -o-transform: rotate(86deg); }\n    23% { opacity: 1; -o-transform: translateY(85px) rotate(83deg); }\n    25% { opacity: 0; -o-transform: translateY(170px) rotate(80deg); }\n    80% { opacity: 0; }\n    100% { opacity: 0; }\n  }\n  @-ms-keyframes rotateWord { \/* IE IE9\/10 *\/\n    0% { opacity: 0; }\n    5% { opacity: 1; }\n    17% { opacity: 1; -ms-transform: rotate(0deg); }\n    19% { opacity: 1; -ms-transform: rotate(98deg); }\n    21% { opacity: 1; -ms-transform: rotate(86deg); }\n    23% { opacity: 1; -ms-transform: translateY(85px) rotate(83deg); }\n    25% { opacity: 0; -ms-transform: translateY(170px) rotate(80deg); }\n    80% { opacity: 0; }\n    100% { opacity: 0; }\n  }\n  @keyframes rotateWord { \/* genérica *\/\n    0% { opacity: 0; }\n    5% { opacity: 1; }\n    17% { opacity: 1; transform: rotate(0deg); }\n    19% { opacity: 1; transform: rotate(98deg); }\n    21% { opacity: 1; transform: rotate(86deg); }\n    23% { opacity: 1; transform: translateY(85px) rotate(83deg); }\n    25% { opacity: 0; transform: translateY(170px) rotate(80deg); }\n    80% { opacity: 0; }\n    100% { opacity: 0; }\n  }\n\u0026lt;\/style\u0026gt;\u003C\/pre\u003E\n\u003Cdiv class=\"referenciaExterna\"\u003E\n\u003Cspan\u003EREFERENCIAS:\u003C\/span\u003E\u003Ca href=\"http:\/\/tympanus.net\/codrops\/2012\/04\/17\/rotating-words-with-css-animations\/\" target=\"_blank\"\u003Ecodrops\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/4890445046603953086\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/05\/palabras-animadas-con-css.html#comment-form","title":"12 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/4890445046603953086"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/4890445046603953086"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/05\/palabras-animadas-con-css.html","title":"Palabras animadas con CSS"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"12"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-187148077668130149"},"published":{"$t":"2012-05-21T00:04:00.003-03:00"},"updated":{"$t":"2012-05-31T17:27:30.788-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Simple menú desplegable con CSS"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EEste es un ejemplo sencillo para crear un menú desplegable que puede incluir submenús, que usa las posibilidades que nos brindan las nuevas propiedades del CSS3.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nComo casi cualquier otro, el HTML se arma en una lista, utilizando etiquetas UL y LI que, se anidan si es que queremos crear un submenú. Esta sería una lista \u003Cspan style=\"font-style: italic;\"\u003Estandard\u003C\/span\u003E:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;ul class=\"mi-menu\"\u0026gt;\n  \u0026lt;li\u0026gt;\u0026lt;a href=\"URL_enlace_1\"\u0026gt; texto_enlace_1 \u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\n  \u0026lt;li\u0026gt;\u0026lt;a href=\"URL_enlace_2\"\u0026gt; texto_enlace_2 \u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\n  \u0026lt;li\u0026gt;\u0026lt;a href=\"URL_enlace_3\"\u0026gt; texto_enlace_3 \u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\n\u0026lt;\/ul\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003Ey si quisiéramos que uno de esos enlaces fuera un submenú:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;ul class=\"mi-menu\"\u0026gt;\n  \u0026lt;li\u0026gt;\u0026lt;a href=\"URL_enlace_1\"\u0026gt; texto_enlace_1 \u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\n  \u0026lt;li\u0026gt;\n    \u0026lt;a href=\"#\"\u0026gt; texto_enlace_2 \u0026lt;\/a\u0026gt;\n    \u0026lt;ul\u0026gt;\n      \u0026lt;li\u0026gt;\u0026lt;a href=\"URL_enlace_2.1\"\u0026gt; texto_submenú_2.1 \u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\n      \u0026lt;li\u0026gt;\u0026lt;a href=\"URL_enlace_2.2\"\u0026gt; texto_submenú_2.2 \u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\n      \u0026lt;li\u0026gt;\u0026lt;a href=\"URL_enlace_2.3\"\u0026gt; texto_submenú_2.3 \u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\n    \u0026lt;\/ul\u0026gt;\n  \u0026lt;\/li\u0026gt;\n  \u0026lt;li\u0026gt;\u0026lt;a href=\"URL_enlace_3\"\u0026gt; texto_enlace_3 \u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\n\u0026lt;\/ul\u0026gt;\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EAsí como está, veríamos algo similar a esto:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cul style=\"list-style-type:disc\"\u003E\u003Cli\u003E\u003Ca href=\"URL_enlace_1\"\u003E texto_enlace_1 \u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#\"\u003E texto_enlace_2 \u003C\/a\u003E\u003Cul style=\"list-style-type:disc\"\u003E\u003Cli\u003E\u003Ca href=\"URL_enlace_2.1\"\u003E texto_submenú_2.1 \u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"URL_enlace_2.2\"\u003E texto_submenú_2.2 \u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"URL_enlace_2.3\"\u003E texto_submenú_2.3 \u003C\/a\u003E\u003C\/li\u003E\n\u003C\/ul\u003E\u003Cli\u003E\u003Ca href=\"#\"\u003E texto_enlace_3 \u003C\/a\u003E\u003C\/li\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003C\/ul\u003E\u003Cdiv style=\"text-align: justify;\"\u003EY ahora, el CSS que hará que esa lista se transforme en otra cosa:\u003C\/div\u003E\u003Cstyle type=\"text\/css\"\u003E.menucss  {list-style-type: none;margin: 30px auto !important;padding: 0;height: 40px;width: 465px;background: #555;background: -moz-linear-gradient(#555,#222);background: -webkit-linear-gradient(#555,#222);background: -o-linear-gradient(#555,#222);background: -ms-linear-gradient(#555,#222);background: linear-gradient(#555,#222);border-radius: 5px;} .menucss br {display:none;} .menucss  li {display: block;float: left;height: 40px;list-style: none;margin: 0;padding: 0;position: relative;} .menucss  li a {border-left: 1px solid #000;border-right: 1px solid #666;color: #EEE !important;display: block;font-family: Tahoma;font-size: 13px !important;font-weight: bold;line-height: 28px;padding: 0 14px;margin: 6px 0;text-decoration: none;-webkit-transition: color .2s ease-in-out;-moz-transition: color .2s ease-in-out;-o-transition: color .2s ease-in-out;-ms-transition: color .2s ease-in-out;transition: color .2s ease-in-out;} .menucss li:first-child a {border-left: none;} .menucss li:last-child a {border-right: none;} .menucss li:hover \u003E a {color: Crimson !important;} .menucss ul { margin: 0;position: absolute;top: 40px;left: 0;opacity: 0;background: #222;background: -moz-linear-gradient(#222,#555);background: -webkit-linear-gradient(#22,#555);background: -o-linear-gradient(#222,#555);background: -ms-linear-gradient(#222,#555);background: linear-gradient(#222,#555);border-radius: 0 0 5px 5px;-webkit-transition: opacity .25s ease .1s;-moz-transition: opacity .25s ease .1s;-o-transition: opacity .25s ease .1s;-ms-transition: opacity .25s ease .1s;transition: opacity .25s ease .1s;} .menucss li:hover \u003E ul {opacity: 1;} .menucss ul li {height: 0;overflow: hidden;padding: 0;-webkit-transition: height .25s ease .1s;-moz-transition: height .25s ease .1s;-o-transition: height .25s ease .1s;-ms-transition: height .25s ease .1s;transition: height .25s ease .1s;} .menucss li:hover \u003E ul li {height: 36px;overflow: visible;padding: 0;} .menucss ul li a {border: none;border-bottom: 1px solid #111;margin: 0;padding: 5px 20px;width: 100px;}\n.menucss ul li:last-child a {border: none;} \u003C\/style\u003E\u003Cul class=\"menucss\"\u003E\u003Cli\u003E\u003Ca href=\"#\"\u003Einicio\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#\"\u003Eun item\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#\"\u003Eun submenú\u003C\/a\u003E\u003Cul\u003E\u003Cli\u003E\u003Ca href=\"#\"\u003Esubmenú 1\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#\"\u003Esubmenú 2\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#\"\u003Esubmenú 3\u003C\/a\u003E\u003C\/li\u003E\n\u003C\/ul\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#\"\u003Eotro item\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#\"\u003Eotro\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#\"\u003Eúltimo\u003C\/a\u003E\u003C\/li\u003E\n\u003C\/ul\u003E\u003Cpre\u003E\u0026lt;style type=\"text\/css\"\u0026gt;\n  \/* el menú en si mismo *\/\n  .mi-menu  {\n    border-radius: 5px;\n    list-style-type: none;\n    margin: 0 auto; \/* si queremos centrarlo *\/\n    padding: 0;\n    \/* la altura y su ancho dependerán de los textos *\/\n    height: 40px; \n    width: 510px;\n    \/* el color de fondo *\/\n    background: #555;\n    background: -moz-linear-gradient(#555,#222);\n    background: -webkit-linear-gradient(#555,#222);\n    background: -o-linear-gradient(#555,#222);\n    background: -ms-linear-gradient(#555,#222);\n    background: linear-gradient(#555,#222);\n  }\n\n  \/* si es necesario, evitamos que Blogger de problemas con los saltos de línea cuando escribimos el HTML *\/\n  .mi-menu  br { display:none; }\n\n  \/* cada item del menu *\/\n  .mi-menu  li {\n    display: block;\n    float: left; \/* la lista se ve horizontal *\/\n    height: 40px;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    position: relative;\n  }\n  .mi-menu li a {\n    border-left: 1px solid #000;\n    border-right: 1px solid #666;\n    color: #EEE;\n    display: block;\n    font-family: Tahoma;\n    font-size: 13px;\n    font-weight: bold;\n    line-height: 28px;\n    padding: 0 14px;\n    margin: 6px 0;\n    text-decoration: none;\n    \/* animamos el cambio de color de los textos *\/\n    -webkit-transition: color .2s ease-in-out;\n    -moz-transition: color .2s ease-in-out;\n    -o-transition: color .2s ease-in-out;\n    -ms-transition: color .2s ease-in-out;\n    transition: color .2s ease-in-out;\n  }\n  \/* eliminamos los bordes del primer y el último *\/\n  .mi-menu li:first-child a { border-left: none; }\n  .mi-menu li:last-child a{ border-right: none; }\n  \/* efecto hover cambia el color *\/\n  .mi-menu li:hover \u0026gt; a { color: Crimson; }\n\n  \/* los submenús *\/\n  .mi-menu ul {\n    border-radius: 0 0 5px 5px;\n    left: 0;\n    margin: 0;\n    opacity: 0; \/* no son visibles *\/\n    position: absolute;\n    top: 40px; \/* se ubican debajo del enlace principal *\/\n    \/* el color de fondo *\/\n    background: #222;\n    background: -moz-linear-gradient(#222,#555);\n    background: -webkit-linear-gradient(#22,#555);\n    background: -o-linear-gradient(#222,#555);\n    background: -ms-linear-gradient(#222,#555);\n    background: linear-gradient(#222,#555);\n    \/* animamos su visibildiad *\/\n    -moz-transition: opacity .25s ease .1s;\n    -webkit-transition: opacity .25s ease .1s;\n    -o-transition: opacity .25s ease .1s;\n    -ms-transition: opacity .25s ease .1s;\n    transition: opacity .25s ease .1s;\n  }\n  \/* son visibes al poner el cursor encima *\/\n  .mi-menu li:hover \u0026gt; ul { opacity: 1; }\n\n   \/* cada un ode los items de los submenús *\/\n  .mi-menu ul li {\n    height: 0; \/* no son visibles *\/\n    overflow: hidden;\n    padding: 0;\n    \/* animamos su visibildiad *\/\n    -moz-transition: height .25s ease .1s;\n    -webkit-transition: height .25s ease .1s;\n    -o-transition: height .25s ease .1s;\n    -ms-transition: height .25s ease .1s;\n    transition: height .25s ease .1s;\n  }\n  .mi-menu li:hover \u003E ul li {\n    height: 36px; \/* los mostramos *\/\n    overflow: visible;\n    padding: 0;\n  }\n  .mi-menu ul li a {\n    border: none;\n    border-bottom: 1px solid #111;\n    margin: 0;\n    \/* el ancho dependerá de los textos a utilizar *\/\n    padding: 5px 20px;\n    width: 100px;\n  }\n  \/* el último n otiene un borde *\/\n  .mi-menu ul li:last-child a { border: none; }\n\n\u0026lt;\/style\u0026gt;\u003C\/pre\u003E\u003Cdiv class=\"referenciaExterna\"\u003E\u003Cspan\u003EREFERENCIAS:\u003C\/span\u003E\u003Ca href=\"http:\/\/designmodo.com\/css3-dropdown-menu\/\" target=\"_blank\"\u003Edesignmodo.com\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/187148077668130149\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/05\/simple-menu-desplegable-con-css.html#comment-form","title":"236 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/187148077668130149"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/187148077668130149"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/05\/simple-menu-desplegable-con-css.html","title":"Simple menú desplegable con CSS"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"236"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-2779925704876617174"},"published":{"$t":"2012-05-03T00:01:00.000-03:00"},"updated":{"$t":"2012-05-03T00:01:02.243-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Un espacio hace la diferencia"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003ETodos sabemos que los caracteres espacio son importantes; separan las palabras y evitar que eso que escribimosseaungalimatíasilegible.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEn CSS pasa lo mismo, no tanto porque no pueda leerse eso que escribimos sino porque al no estar donde deben estar, el resultado es un error. El caso típico es el de la propiedad background; si escribimos esto:\u003C\/div\u003E\u003Cpre\u003Ebackground:#FFF url(una_imagen)no-repeat left top;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003Een Intenet Explorer no se verá la imagen y no es un error del navegador, es que lo hemos escrito mal, sin dejar el espacio entre el cierre del paréntesis y la palabra no-repeat\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nPero no sólo se producen errores en tal o cual navegador, es algo que podría ocurrir en todos si, por ejemplo, queremos poner una regla de estilo para que una etiqueta span tenga un determinado formato (color rojo en este caso):\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div id=\"demo\" class=\"ejemplo\"\u0026gt;\n  .......\n  un texto cualquiera \u0026lt;span\u0026gt;esto en rojo\u0026lt;\/span\u0026gt; un texto cualquiera.\n  .......\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003E¿Cuál sería la regla de estilo?\u003C\/div\u003E\u003Cpre\u003E#demo.ejemplo span { color:#F00; }\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003Eo\u003C\/div\u003E\u003Cpre\u003E#demo .ejemplo span { color:#F00; }\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ESi usamos la primera, todo estará bien; si usamos la segunda, no pasará nada. Esto, se debe a que el espacio indica \"algo\".\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E#demoespacio1 {color:#FFF;font-size:16px;} #demoespacio1.ejemplo1 img {float: left;} #demoespacio1.ejemplo1 span {color:#F00;} #demoespacio2 {color:#FFF;font-size:16px;} #demoespacio2 .ejemplo2 img {float: left;} #demoespacio2 .ejemplo2 span {color:#F00;} #demoespacio3 {color:#FFF;font-size:16px;} #demoespacio3.ejemplo3 img {float: left;} #demoespacio3.ejemplo3 span {color:#F00} #demoespacio3 span {color:#FF0;} .ejemplo3 span {color:#0F0;}\u003C\/style\u003E\u003Cdiv id=\"demoespacio1\" class=\"ejemplo1\"\u003E\u003Cimg src=\"http:\/\/1.bp.blogspot.com\/-1LrY1Q8gR-s\/TkWa4MaFcCI\/AAAAAAAASnk\/Ni35ayxpUUs\/s48\/DEMO_pinkribbon.png\"\/\u003EMaecenas porta felis pharetra diam \u003Cspan\u003Esuscipit id vehicula\u003C\/span\u003E urna ullamcorper. Aenean a interdum nibh. Nam enim nunc, aliquet et egestas vitae cras amet.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EEn la primer, traducida al español, se indica que en el elemento cuyo ID es demo y cuya clase es ejemplo, las etiquetas SPAN interiores son de color rojo. Por eso, no hay un espacio intermedio.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEn la segunda decimos que en el elemento cuyo ID es demo, en toda etiqueta interna que sea de la clase ejemplo, las etiquetas SPAN internas serán de color rojo; el HTML debería tener esta estructura:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div id=\"demo\"\u0026gt;\n  .......\n  \u0026lt;div class=\"ejemplo\"\u0026gt;\n    un texto cualquiera \u0026lt;span\u0026gt;esto en rojo\u0026lt;\/span\u0026gt; un texto cualquiera.\n  \u0026lt;\/div\u0026gt;\n  .......\n  \u0026lt;div class=\"otra\"\u0026gt;\n    un texto cualquiera \u0026lt;span\u0026gt;esto no será de color rojo\u0026lt;\/span\u0026gt; un texto cualquiera.\n  \u0026lt;\/div\u0026gt;\n  .......\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cdiv id=\"demoespacio2\"\u003E\u003Cdiv class=\"ejemplo2\"\u003E\u003Cimg src=\"http:\/\/1.bp.blogspot.com\/-1LrY1Q8gR-s\/TkWa4MaFcCI\/AAAAAAAASnk\/Ni35ayxpUUs\/s48\/DEMO_pinkribbon.png\"\/\u003EMaecenas porta felis pharetra diam \u003Cspan\u003Esuscipit id vehicula\u003C\/span\u003E urna ullamcorper. Aenean a interdum nibh. Nam enim nunc, aliquet et egestas vitae cras amet.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv\u003EMaecenas porta felis pharetra diam \u003Cspan\u003E\u003Ci\u003Esuscipit id vehicula\u003C\/i\u003E\u003C\/span\u003E urna ullamcorper. Aenean a interdum nibh. Nam enim nunc, aliquet et egestas vitae cras amet.\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EPor supuesto, la primera parece redundante y no siempre es necesario escribirlas de ese modo indicando el ID y la clase; estas dos reglas también harían lo mismo en el primer ejemplo:\u003C\/div\u003E\u003Cpre\u003E#demo span { color:#F00; }\n.ejemplo span { color:#F00; }\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003Ey esta haría lo mismo en el segundo ejemplo:\u003C\/div\u003E\u003Cpre\u003E.ejemplo span { color:#F00; }\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ENo todo funcionará igual, las reglas también dependen de lo que se llama \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2010\/05\/css-orden-de-prioridades.html\" target=\"_blank\"\u003Eprioridad\u003C\/a\u003E por lo que ciertas definiciones no son tenidas en cuenta ya que hay otras que indican lo contrario y para el navegador, son más \"importantes\". Un ejemplo, si tuviera estas tres:\u003C\/div\u003E\u003Cpre\u003E#demo.ejemplo span { color:#F00; } \/* color rojo *\/\n#demo span { color:#FF0; } \/* color amarillo *\/\n.ejemplo span { color:#0F0; } \/* color verde *\/\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003Eel SPAN se vería de color rojo pese a que las otras dos reglas dicen lo contrario; si elimino la primera ser vería amarillo así que si quisiera que se viera verde, sólo debería incluir la última o agregar \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2010\/01\/el-uso-de-la-palabra-important.html\" target=\"_blank\"\u003Ela palabra !important\u003C\/a\u003E a alguna de ellas para forzar al navegador a prestar atención.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv id=\"demoespacio3\" class=\"ejemplo3\"\u003E\u003Cimg src=\"http:\/\/1.bp.blogspot.com\/-1LrY1Q8gR-s\/TkWa4MaFcCI\/AAAAAAAASnk\/Ni35ayxpUUs\/s48\/DEMO_pinkribbon.png\"\/\u003EMaecenas porta felis pharetra diam \u003Cspan\u003Esuscipit id vehicula\u003C\/span\u003E urna ullamcorper. Aenean a interdum nibh. Nam enim nunc, aliquet et egestas vitae cras amet.\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/2779925704876617174\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/05\/un-espacio-hace-la-diferencia.html#comment-form","title":"1 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/2779925704876617174"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/2779925704876617174"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/05\/un-espacio-hace-la-diferencia.html","title":"Un espacio hace la diferencia"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/-1LrY1Q8gR-s\/TkWa4MaFcCI\/AAAAAAAASnk\/Ni35ayxpUUs\/s72-c\/DEMO_pinkribbon.png","height":"72","width":"72"},"thr$total":{"$t":"1"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-7343665434108088745"},"published":{"$t":"2012-05-01T00:05:00.001-03:00"},"updated":{"$t":"2012-05-01T00:05:00.189-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Más variantes del efecto :hover"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EEn \u003Ca href=\"http:\/\/dabblet.com\/gist\/1843609\" target=\"_blank\"\u003Edabblet.com\u003C\/a\u003E hay ejemplos con muchas de las posibles opciones que tiene el efecto \u003Cspan style=\"font-weight: bold;\"\u003Ehover\u003C\/span\u003E sobre los enlaces de texto; la mayoría de ellas son comunes\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEntre ellas, hay dos que me parecieron interesantes. La primera sólo es apta para espíritus alocados, se trata de agregar un color de fondo multicolor:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;style\u0026gt;\na.colorido:hover { \n  color: #FFF;\n  padding=0 5px;\n  background-image: -moz-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79);\n  background-image: -webkit-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79); \n  background-image: -ms-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79); \n  background-image: -o-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79);\n}\n\u0026lt;\/style\u0026gt;\n\n\u0026lt;a class=\"colorido\" href=\"#\"\u0026gt;el enlace\u0026lt;\/a\u0026gt;\u003C\/pre\u003E\u003Cstyle\u003Ea.linkdemo {text-decoration: none;font-size:16px !important;position: relative;} a.linkdemo1:hover { \ncolor:#FFF;padding:0 5px;background-image: -moz-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79);background-image: -webkit-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79); background-image: -ms-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79); background-image: -o-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79);} a.linkdemo2:hover:after {content: \" [\" attr(href) \"] \";color: LightBlue;font-size: 11px;font-weight: normal;} a.linkdemo3:hover:after {color: #FFF;content: attr(rel);font-size: 12px;font-weight: normal;position: absolute;background-color: CornflowerBlue;padding: 2px 10px;border-radius: 5px;top: -1.5em;left: 2em;white-space: pre;}\u003C\/style\u003E\u003Cdiv style=\"text-align:center;font-size:16px;\"\u003Eeste es un \u003Ca class=\"linkdemo linkdemo1\" href=\"#\" target=\"_blank\"\u003Eun enlace\u003C\/a\u003E muy colorido\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003ELa segunda, utliza los llamados \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2007\/03\/selectores-condicionales-en-css.html\" target=\"_blank\"\u003Eselectores condicionales\u003C\/a\u003E para mostrar la dirección URL del enlace cuando nos ponemos sobre él:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;style\u0026gt;\na.selector:hover:after {\n  content: \" [\" attr(href) \"] \";\n  color: LightBlue;\n  font-size: 11px;\n}\n\u0026lt;\/style\u0026gt;\n\n\u0026lt;a class=\"selector\" href=\"\u003Cspan style=\"color: #CCCCFF\"\u003Ehttp:\/\/vagabundia.blogspot.com\/\u003C\/span\u003E\"\u0026gt;el enlace\u0026lt;\/a\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align:center;font-size:16px;\"\u003Eeste \u003Ca class=\"linkdemo linkdemo2\" href=\"http:\/\/vagabundia.blogspot.com\/\" target=\"_blank\"\u003Eotro\u003C\/a\u003E muestra la URL de referencia\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EY sobre esta última, podemos general variaciones; por ejemplo, en lugar de mostrar el contenido del atributo href, podríamos mostrar cualquier otro (title, rel, etc) y con CSS, transformar eso en alguna clase \u003Cspan style=\"font-style: italic;\"\u003Etooltip\u003C\/span\u003E rápida:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;style\u0026gt;\n  a.informacion {position: relative;}\n  a.informacion:hover:after {\n    background-color: CornflowerBlue;\n    border-radius: 5px;\n    color: #FFF;\n    content: attr(rel);\n    font-size: 12px;\n    left: 2em;\n    padding: 2px 10px;\n    position: absolute;\n    top: -1.5em;\n    white-space: pre;\n  }\n\u0026lt;\/style\u0026gt;\n\n\u0026lt;a class=\"informacion\" href=\"#\" rel=\"\u003Cspan style=\"color: #CCCCFF\"\u003Einformación detallada\u003C\/span\u003E\"\u0026gt;el enlace\u0026lt;\/a\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align:center;font-size:16px;\"\u003Ey \u003Ca class=\"linkdemo linkdemo3\" href=\"#\" rel=\"información detallada\" target=\"_blank\"\u003Eeste enlace\u003C\/a\u003E muestra cualquier otro texto adicional\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/7343665434108088745\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/05\/mas-variantes-del-efecto-hover.html#comment-form","title":"16 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/7343665434108088745"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/7343665434108088745"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/05\/mas-variantes-del-efecto-hover.html","title":"Más variantes del efecto :hover"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"16"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-6235218002951814341"},"published":{"$t":"2012-04-23T00:03:00.003-03:00"},"updated":{"$t":"2012-04-23T01:37:53.506-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Hablando de márgenes"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EMuchas propiedades CSS requieren que se agreguen unidades de medida para indicarle al navegador qué es lo que que queremos que haga; anchos, altos, separaciones, márgenes, etc, etc, etc. Esas unidades, deben ser agregadas inmediatamente después del valor y sin espacios intermedios.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nHasta acá, no habría problemas más allá de algún posible error de sintaxis pero, como hay distintas unidades, esa diferencia suele generar dudas o generar problemas aparentes que se resuelven sólo de un modo: entendiendo qué significan.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nBásicamente, en al \u003Ci\u003Eweb\u003C\/i\u003E, encontraremos que se usan tres tipos de unidades: px, em y %. Aunque de tanto en tanto nos encontraremos con alguna otra, estas son las más utilizadas y cada una de ellas tiene su uso específico, ninguna es mejor o peor en abstracto, todo depende de lo que queramos hacer.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cb\u003Epx\u003C\/b\u003E es una unidad sencilla de comprender, son pixeles; depende de la resolución de la pantalla del monitor; si dimensionamos algo en pixeles y le ponemos un margen expresado en pixeles, la distancia entre los bordes del contenedor y ese elemento, será exactamente ese valor y es fácil de verificar cuando se captura la pantalla y se mide en algún editor de imágenes:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSuponiendo que tengo un contenedor de 500 de ancho y un contenido de 200x100:\u003C\/div\u003E\u003Cpre\u003E.contenedor {width:500px;}\n.MIcontenido {height:100px;width:200px;}\n\n\u0026lt;div class=\"contenedor\"\u0026gt;\n  \u0026lt;div class=\"MIcontenido\"\u0026gt; \u0026lt;\/div\u0026gt;\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cstyle\u003E.demoem{border:1px solid #CCC;position:relative;background-color:#000;margin:0 auto;width:500px;} .demoemi{width:200px;height:100px;background-color:#ABC;}\u003C\/style\u003E\u003Cdiv class=\"demoem\"\u003E\u003Cdiv class=\"demoemi\"\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003Esi le agrego margin:20px a MIcontenido, el rectángulo (en este caso con un color de fondo celeste), se separá esa distancia del borde superior y del borde izquierdo:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"demoem\"\u003E\u003Cdiv style=\"margin:20px;\" class=\"demoemi\"\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003Etambién lo hará esa distancia del borde derecho pero, como allí no hay nada, no será evidente. Por eso, siempre es mejor indicar los márgenes con cierta exactitud, poniendo el valor cero cuando no son necesarios; en este caso, le pondría cero al margen derecho:\u003C\/div\u003E\u003Cpre\u003Emargin: 20px 0 20px, 20px,\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EPixeles, entonces, es una unidad \"evidente\", fácil de visualizar y \"constante\".\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cb\u003Eem\u003C\/b\u003E, en cambio, es una unidad completamente distinta ya que es una unidad relativa que depende del tamaño de la fuente del texto; dicen los expertos que 1em es, aproximadamente, igual al ancho de la letra M del tipo de fuente que se esté usando.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nQue sea \"relativa\" tiene sus ventajas y desventajas. Si en mi ejemplo, establezco un margen expresado como em: margin: 1em; la separación de mi contenido, dependerá del tamaño de la fuente del texto ¿de cuál? del definido para ese contenido y si no existe, del definido para el contenedor y si tampoco existe, se sigue buscando hasta encontrar alguna fuente; eventualmente, si no hay ninguna, se usará la fuente por defecto del navegador.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nCon una fuente Arial de 16px:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"demoem\"\u003E\u003Cdiv class=\"demoemi\" style=\"font-family:Arial;font-size:16px;margin:1em;\"\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003ECon una fuente Georgia de 32px:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"demoem\"\u003E\u003Cdiv class=\"demoemi\" style=\"font-family:Georgia;font-size:32px;margin:1em;\"\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003ENoten que no hace falta que haya un texto, lo que define la separación es la propeidad font aunque no la estemos usando. Eso nos puede llevar a confundirnos porque, supongamos dos imagenes flotando una al lado de la otra y separadas por un margen expresado en unidades em; todo esta bien ya que la fuente del texto definida cuando lo armé, era una y lo que vi, me pareció correcto:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"demoem\" style=\"font-family:Arial;font-size:16px;height: 200px;\"\u003E\u003Cimg style=\"border:1px solid #FFF;margin:1em;float:left;\" src=\"http:\/\/lh6.ggpht.com\/_qfa9R8IbFoA\/TMT93NQ5JcI\/AAAAAAAACRk\/meQeHN8zMfw\/s200\/25_0080.jpg\"\/\u003E\u003Cimg style=\"border:1px solid #FFF;margin:1em;float:left;\" src=\"http:\/\/lh6.ggpht.com\/_qfa9R8IbFoA\/TMSeXGYVuyI\/AAAAAAAAApE\/FfinCUH7Ljo\/s200\/06_0063.jpg\"\/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003Epero, un día se me ocurre cambiarla, poner una más grande y entonces ... zas, la segunda imagen se va para abajo:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"demoem\" style=\"font-family:Georgia;font-size:32px;height: 440px;\"\u003E\u003Cimg style=\"border:1px solid #FFF;margin:1em;float:left;\" src=\"http:\/\/lh6.ggpht.com\/_qfa9R8IbFoA\/TMT93NQ5JcI\/AAAAAAAACRk\/meQeHN8zMfw\/s200\/25_0080.jpg\"\/\u003E\u003Cimg style=\"border:1px solid #FFF;margin:1em;float:left;\" src=\"http:\/\/lh6.ggpht.com\/_qfa9R8IbFoA\/TMSeXGYVuyI\/AAAAAAAAApE\/FfinCUH7Ljo\/s200\/06_0063.jpg\"\/\u003E\u003C\/div\u003E\u003Cdiv style=\"clear:both;\"\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EObviamente, deberé cambiar el margen así que, en general, no conviene usar este tipo de unidades salvo que estemos creando algo que deba adaptarse al texto.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nHay una tercera unidad que puede ser usada y que también es relativa; el porcentaje; por ejemplo:\u003C\/div\u003E\u003Cpre\u003Emargin: 10%;\u003C\/pre\u003E\u003Cdiv class=\"demoem\"\u003E\u003Cdiv class=\"demoemi\" style=\"margin:10%;\"\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EComo es un porcentaje, también depende de algo, en este caso, el ancho\/alto del contenedor lo que hace que su uso sea aún más restringido::\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"demoem\" style=\"width:300px;height:200px\"\u003E\u003Cdiv class=\"demoemi\" style=\"margin:10%;\"\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/6235218002951814341\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/04\/hablando-de-margenes.html#comment-form","title":"4 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/6235218002951814341"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/6235218002951814341"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/04\/hablando-de-margenes.html","title":"Hablando de márgenes"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/lh6.ggpht.com\/_qfa9R8IbFoA\/TMT93NQ5JcI\/AAAAAAAACRk\/meQeHN8zMfw\/s72-c\/25_0080.jpg","height":"72","width":"72"},"thr$total":{"$t":"4"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-3639460023977744998"},"published":{"$t":"2012-04-19T00:05:00.000-03:00"},"updated":{"$t":"2012-04-19T00:05:00.151-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"},{"scheme":"http://www.blogger.com/atom/ns#","term":"herramientas"}],"title":{"type":"text","$t":"CSS Arrow please"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003E\u003Ca href=\"http:\/\/cssarrowplease.com\/\" target=\"_blank\"\u003ECSS Arrow please\u003C\/a\u003E nos ayuda a crear flechas con distintos estilos y nos da las reglas necesarias para copiarlas y aplicarlas a nuestras páginas \u003Cspan style=\"font-style: italic;\"\u003Eweb\u003C\/span\u003E.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nBasta entrar al sitio y seleccionar las distintas opciones que terminarán generando algo similar a esto:\u003C\/div\u003E\u003Cpre\u003E.arrow_box {\n  position: relative;\n  background: #88b7d5;\n  border: 4px solid #c2e1f5;\n}\n.arrow_box:after, .arrow_box:before {\n  left: 100%;\n  border: solid transparent;\n  content: \" \";\n  height: 0;\n  width: 0;\n  position: absolute;\n  pointer-events: none;\n}\n.arrow_box:after {\n  border-left-color: #88b7d5;\n  border-width: 30px;\n  top: 50%;\n  margin-top: -30px;\n}\n.arrow_box:before {\n  border-left-color: #c2e1f5;\n  border-width: 36px;\n  top: 50%;\n  margin-top: -36px;\n}\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EColocando eso en una etiqueta STYLE, luego, podemos usar la clase de este modo:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div class=\"arrow_box\"\u0026gt; abcde \u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cstyle\u003E.arrow_box {color: #FFF;font-family: Tahoma;font-size: 24px;padding: 10px 20px;position: relative; background: #88b7d5; border: 4px solid #c2e1f5; } .arrow_box:after, .arrow_box:before { left: 100%; border: solid transparent; content: \" \"; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_box:after { border-left-color: #88b7d5; border-width: 30px; top: 50%; margin-top: -30px; } .arrow_box:before { border-left-color: #c2e1f5; border-width: 36px; top: 50%; margin-top: -36px; }\u003C\/style\u003E\u003Cdiv style=\"width:300px;\" class=\"arrow_box\"\u003Eabcde\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EA partir de allí, nada impide modificarla, establecer su ancho, el tipo de fuente, cambiar los colores o las distintas propiedades para adaptarla a nuestras necesidades y gustos personales:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"width:200px;\" class=\"arrow_box\"\u003Eejemplo\u003Cbr \/\u003E\nejemplo\u003Cbr \/\u003E\nejemplo\u003Cbr \/\u003E\nejemplo\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003ETodo es cuestión de probar y de entender el funcionamiento de \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2011\/06\/after-y-before.html\" target=\"_blank\"\u003Elos pseudo-elementos :after y :before\u003C\/a\u003E:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"width:400px;\" class=\"arrow_box\"\u003ECurabitur aliquam sem ut risus auctor auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/3639460023977744998\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/04\/css-arrow-please.html#comment-form","title":"3 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/3639460023977744998"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/3639460023977744998"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/04\/css-arrow-please.html","title":"CSS Arrow please"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"3"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-7044416126730108441"},"published":{"$t":"2012-04-04T00:05:00.000-03:00"},"updated":{"$t":"2012-04-04T00:05:00.835-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"},{"scheme":"http://www.blogger.com/atom/ns#","term":"HTML"}],"title":{"type":"text","$t":"Un formulario de búsqueda estilizado"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EUn artículo de \u003Ca href=\"http:\/\/speckyboy.com\/2012\/02\/15\/how-to-build-a-stylish-css3-search-box\/\" target=\"_blank\"\u003Especkyboy\u003C\/a\u003E nos enseña a crear una caja de búsqueda con estilo; bueno, todas tiene estilo pero esta tiene ESTILO.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nComo es un elemento muy común y que se usa en casi cualquier sitio, vamos a ver la manera de realizarla ya que podríamos emplearla incluso en Blogger aunque, claro está, como la mayoría de las cosas que usan CSS3 y HTML5, en las viejas versiones de Internet Explorer funcionará de modo parcial, mejor dicho, funcionará bien pero no se verán ciertos efectos.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nPrimero que nada, el HTML básico es algo así:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;form class=\"formulariodemo cf\"\u0026gt;\n  \u0026lt;input type=\"text\" placeholder=\"ingresar texto ...\" required\u0026gt;\n  \u0026lt;button type=\"submit\"\u003Ebuscar\u0026lt;\/button\u0026gt;\n\u0026lt;\/form\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EEl formulario es simple y podría tener más parámetros; la primera etiqueta INPUT usa los atributos \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2012\/02\/el-atributo-placeholder.html\" target=\"_blank\"\u003Eplaceholder\u003C\/a\u003E y required que son optativos y el botón de envio, en lugar de estar en otra etiqueta INPUT, se encuentra en una etiqueta BUTTON; obviamente, a la etiqueta FORM se le deberán agregar los atributos extras que necesite según sea el sitio donde se agregue. Un ejemplo:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;form class=\"formulariodemo cf\" \u003Cspan style=\"color: #CCCCFF\"\u003Eaction='http:\/\/nombre.blogspot.com\/search' method='get'\u003C\/span\u003E\u0026gt;\n  \u0026lt;input type=\"text\" placeholder=\"ingresar texto ...\" required \u003Cspan style=\"color: #CCCCFF\"\u003Ename=\"q\" \u003C\/span\u003E\u0026gt;\n  \u0026lt;button type=\"submit\"\u003Ebuscar\u0026lt;\/button\u0026gt;\n\u0026lt;\/form\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EY ahora, el largo, largo, largo CSS:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;style\u0026gt;\n\n  .cf:before, .cf:after {\n    content:\"\";\n    display:table;\n  }\n  .cf:after {clear:both; }\n  .cf { zoom:1; }\n\n   \/* el formulario en si mismo *\/\n  .formulariodemo {\n    background-color: #303941;\n    border-radius: 10px;\n    box-shadow: 0 0 2px #606971 inset;\n    margin: 0 auto;\n    padding: 15px;\n    width: 450px;\n  }\n\n   \/* la caja donde se ingresa el texto a buscar *\/\n  .formulariodemo input {\n    background-color: #EEE;\n    border: none;\n    border-radius: 3px 0 0 3px;\n    float: left;\n    font-family: Tahoma;font-size:15px;font-weight: bold;\n    height: 20px;\n    padding: 10px 5px;\n    width: 330px;\n  }\n  .formulariodemo input:focus {\n    outline: 0;\n    background: #FFF;\n    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;\n  }\n\n  \/* el estilo de del atributo placeholder debe ser declarado para cada navegador de modo separado *\/\n  .formulariodemo input:-moz-placeholder { color: #999; font-weight: normal; font-style: italic; }\n  .formulariodemo input::-webkit-input-placeholder { color: #999; font-weight: normal; font-style: italic; }\n  .formulariodemo input:-ms-input-placeholder { color: #999; font-weight: normal; font-style: italic; }\n\n  \/* aquí iría el estilo de del atributo required si es que se desea definirlo *\/\n  .formulariodemo input:required { box-shadow: none; }\n\n   \/* el botón de envio *\/\n  .formulariodemo button {\n    background-color: #9099A1;\n    border: none;\n    border-radius: 0 3px 3px 0;\n    color: #FFF;\n    cursor: pointer;\n    float: right;\n    font-family: Tahoma;\n    font-size: 15px;\n    font-weight: bold;\n    height: 40px;\n    overflow: visible;\n    padding: 0;\n    position: relative;\n    text-transform: uppercase;\n    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);\n    width: 110px;\n  }\n  .formulariodemo button:hover{ background: #E54040; } \n  .formulariodemo button:active, .formulariodemo button:focus{ background: #C42F2F; }\n  .formulariodemo button:before { \/* el detalle del triángulo izquierdo *\/\n    content: \"\";\n    border-color: transparent #9099A1 transparent;\n    border-style: solid solid solid none;\n    border-width: 8px 8px 8px 0;\n    left: -6px;\n    position: absolute;\n    top: 12px;\n  }\n  .formulariodemo button:hover:before { border-right-color: #E54040; }\n  .formulariodemo button:focus:before { border-right-color: #C42F2F; }    \n\n\u0026lt;\/style\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EY este sería el resultado final:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E.cf:before, .cf:after {content:\"\";display:table;}.cf:after{clear:both;}.cf{zoom:1;}.formulariodemo {background-color: #303941;border-radius: 10px 10px 10px 10px;box-shadow: 0 0 2px #606971 inset;margin: 0 auto;padding: 15px;width: 450px;}.formulariodemo input {background-color: #EEE;border: none;border-radius: 3px 0 0 3px;float: left;font-family: Tahoma;font-size:15px;font-weight: bold;height: 20px;padding: 10px 5px;width: 330px;}.formulariodemo input:focus {outline: 0;background: #FFF;box-shadow: 0 0 2px rgba(0,0,0,.8) inset;}.formulariodemo input:-moz-placeholder{color: #999;font-weight: normal;font-style: italic;}.formulariodemo input::-webkit-input-placeholder{color: #999;font-weight: normal;font-style: italic;}.formulariodemo input:-ms-input-placeholder {color: #999;font-weight: normal;font-style: italic;}.formulariodemo button {background-color: #9099A1;border: none;border-radius: 0 3px 3px 0;font-family: Tahoma;font-size:15px;font-weight: bold;overflow: visible;position: relative;float: right;padding: 0;cursor: pointer;height: 40px;width: 110px;color: #FFF;text-transform: uppercase;text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);}.formulariodemo button:hover{background: #E54040;}.formulariodemo button:active,.formulariodemo button:focus{background: #C42F2F;}.formulariodemo input:required {box-shadow: none;}.formulariodemo button:before {content: '';position: absolute;border-width: 8px 8px 8px 0;border-style: solid solid solid none;border-color: transparent #9099A1 transparent;top: 12px;left: -6px;}.formulariodemo button:hover:before{border-right-color: #E54040;}.formulariodemo button:focus:before{border-right-color: #C42F2F;}\u003C\/style\u003E\u003Cform class=\"formulariodemo cf\" action='http:\/\/vagabundia.blogspot.com\/search' method=\"get\" target=\"_blank\"\u003E\u003Cinput name=\"q\" type=\"text\" placeholder=\"ingresar texto ...\" required\u003E\u003Cbutton type=\"submit\"\u003Ebuscar\u003C\/button\u003E\u003C\/form\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/7044416126730108441\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/04\/un-formulario-de-busqueda-estilizado.html#comment-form","title":"16 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/7044416126730108441"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/7044416126730108441"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/04\/un-formulario-de-busqueda-estilizado.html","title":"Un formulario de búsqueda estilizado"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"16"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-2239852127981510706"},"published":{"$t":"2012-04-02T00:03:00.001-03:00"},"updated":{"$t":"2017-10-29T00:47:10.609-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Jugando con CSS y las animaciones"},"content":{"type":"html","$t":"\u003Cdiv class=\"vagacode\"\u003E\u003Cdiv class=\"sue\"\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/N44cNUj.jpg\"\u003E\u003Cp\u003EUna animación con CSS es algo similar a una transisicón que se repite un número de veces y requiere de dos partes, establecer los intervalos y propiedades a modificar en @keyframes y la propiedad animation en cualquier etiqueta.\u003C\/p\u003E\u003C\/div\u003E\u003Cdiv class=\"gowi\"\u003E\u003Cspan\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/yrSqFzYl.png\"\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/animaciones-con-css\"\u003Eleer artículo actualizado\u003C\/a\u003E\u003C\/span\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/\"\u003E\u003Cimg class=\"wlogo\" src=\"http:\/\/i.imgur.com\/QZHLte7.png\"\u003E\u003C\/a\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/2239852127981510706\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/04\/jugando-con-css-y-las-animaciones.html#comment-form","title":"5 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/2239852127981510706"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/2239852127981510706"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/04\/jugando-con-css-y-las-animaciones.html","title":"Jugando con CSS y las animaciones"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"5"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-1717280985014974466"},"published":{"$t":"2012-03-05T00:05:00.001-03:00"},"updated":{"$t":"2012-03-05T00:05:00.039-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Speech bubble: Burbujas con CSS"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003E\u003Ca href=\"http:\/\/desandro.com\/resources\/css-speech-bubble-icon\/\" target=\"_blank\"\u003ESpeech bubble\u003C\/a\u003E es una herramienta \u003Ci\u003Eonline\u003C\/i\u003E que nos facilita un método par crear íconos de tipo burbuja que se generan sólo con CSS. Las posibilidades son varias, entrando a la página, seleccionamos el modelo básico que puede ser tanto un ícono simple como un enlace integrado.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nTodo lo que debe hacerse es copiar el CSS que luego podrá personalizarse a gusto y que colocaremos entre etiquetas \u0026lt;style\u0026gt; \u0026lt;\/style\u0026gt; y el HTML de la estructura que en un ejemplo específico, dice algo así:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;a class=\"spch-bub-inside\" href=\"#\"\u0026gt;\n  \u0026lt;span class=\"point\"\u0026gt;\u0026lt;\/span\u0026gt; \n  \u0026lt;em\u0026gt;10 comentarios\u0026lt;\/em\u0026gt;\n\u0026lt;\/a\u0026gt;\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E.spch-bub-inside {font-family: Tahoma !important; margin: 0 .2em;font-size: 18px !important;font-weight: normal !important;position: relative;} .spch-bub-inside .point {border-bottom: 0.6em solid transparent;border-left: 0.6em solid #888;display: block;height: 0;left: 0.6em;overflow: hidden;position: absolute;top: 1.2em;width: 0;} .spch-bub-inside em {background-color: #888;border-radius: 0.2em 0.2em 0.2em 0.2em;color: #FFF;font-style: normal;padding: 0 0.5em;position: relative;} .spch-bub-inside:hover em {background-color: #ABC;color: #000;} .spch-bub-inside:hover .point {border-left: 0.6em solid #ABC;}\u003C\/style\u003E\u003Cdiv style=\"text-align: center;\"\u003Elorem ipsum dolor \u003Ca id=\"demobubble\" class=\"spch-bub-inside\" href=\"#\"\u003E\u003Cspan class=\"point\"\u003E\u003C\/span\u003E\u003Cem\u003E10 comentarios\u003C\/em\u003E\u003C\/a\u003E sed diam nonummy nibh\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EA simple vista, las reglas de estilo parecerían complejas pero no lo son tanto y son bastante fáciles de personalizar. En este ejemplo, uso las siguientes:\u003C\/div\u003E\u003Cpre\u003E\/* este es el contenedor principal (una etiqueta A) *\/\n.spch-bub-inside {\n  font-family: Tahoma;\n  font-size: 18px;\n  margin: 0 .2em;\n  position: relative;\n  text-decoration: none;\n}\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EAllí es donde definimos la fuente del texto porque todos los demás valores, estarán expresados en unidades \u003Cb\u003Eem\u003C\/b\u003E, es decir, todo el modelo se adaptará a los distintos tamaños o tipos de fuentes elegidos.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nLa siguiente regla define el triángulo inferior:\u003C\/div\u003E\u003Cpre\u003E.spch-bub-inside .point {\n  border-bottom: 0.6em solid transparent;\n  border-left: 0.6em solid #888; \/* este es el color *\/\n  display: block;\n  height: 0;\n  left: 0.6em; \/* la posición \/*\n  overflow: hidden;\n  position: absolute;\n  top: 1.2em;\n  width: 0;\n}\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ECuanto más alto sea el valor de \u003Cb\u003Eleft\u003C\/b\u003E, más se desplazará ese triangulo hacia la derecha.\u003Cbr \/\u003E\nCuanto más alto sean los valores de \u003Cb\u003Eborder\u003C\/b\u003E, más ancho y alto será el triángulo.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nLa etiqueta EM es la que crea el rectángulo con el texto:\u003C\/div\u003E\u003Cpre\u003E.spch-bub-inside em {\n    background-color: #888; \/* tiene el mismo color *\/\n    border-radius: 0.2em 0.2em 0.2em 0.2em; \/* se redondean los bordes *\/\n    color: #FFF; \/* el color del texto *\/\n    font-style: normal; \/* evitamos que se vea en itálica *\/\n    padding: 0 0.5em; \/* la separación entre el texto y los bordes *\/\n    position: relative;\n}\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EY por último, los efectos hover que cambian el color de la burbuja cuando ponemos el cursor encima:\u003C\/div\u003E\u003Cpre\u003E.spch-bub-inside:hover em {\n  background-color: #ABC;\n  color: #000;\n}\n.spch-bub-inside:hover .point {\n  border-left: 0.6em solid #ABC;\n}\u003C\/pre\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/1717280985014974466\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/03\/speech-bubble-burbujas-con-css.html#comment-form","title":"15 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/1717280985014974466"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/1717280985014974466"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/03\/speech-bubble-burbujas-con-css.html","title":"Speech bubble: Burbujas con CSS"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"15"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-810010426227963489"},"published":{"$t":"2012-02-22T00:05:00.001-03:00"},"updated":{"$t":"2017-05-30T00:48:41.420-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Algunas de las nuevas opciones de text-align"},"content":{"type":"html","$t":"\u003Cdiv class=\"vagacode\"\u003E\u003Cdiv class=\"sue\"\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/7v6iXJl.jpg\"\u003E\u003Cp\u003EQue algo esté alineado (text-align) o que flote (propiedad float) no es lo mismo. Puede parecerlo pero es completamente diferente, de allí que muchas veces, nos encontramos con problemas cuando tratamos de ubicar algo en una determinada posición.\u003C\/p\u003E\u003C\/div\u003E\u003Cdiv class=\"gowi\"\u003E\u003Cspan\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/yrSqFzYl.png\"\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/alineacion-horizontal-en-css\"\u003Eleer artículo actualizado\u003C\/a\u003E\u003C\/span\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/\"\u003E\u003Cimg class=\"wlogo\" src=\"http:\/\/i.imgur.com\/QZHLte7.png\"\u003E\u003C\/a\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/810010426227963489\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/02\/algunas-de-las-nuevas-opciones-de-text.html#comment-form","title":"10 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/810010426227963489"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/810010426227963489"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/02\/algunas-de-las-nuevas-opciones-de-text.html","title":"Algunas de las nuevas opciones de text-align"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"10"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-7218844860088319481"},"published":{"$t":"2012-02-20T00:02:00.000-03:00"},"updated":{"$t":"2012-02-19T17:37:51.283-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"CSS Shapes"},"content":{"type":"html","$t":"\u003Cstyle\u003E.shapes {display: inline-block;margin: 0 20px;vertical-align: middle;} #circle {width: 100px;height: 100px;background: red; border-radius: 70px;} #oval1 {width: 200px; height: 100px; background: yellow; border-radius: 100px \/ 50px;} #oval2 {width: 80px; height: 160px; background: SandyBrown; border-radius: 50px \/ 100px;} #trapezium1 {height: 0; width: 80px;border-bottom: 80px solid Aquamarine;border-left: 40px solid transparent;border-right: 40px solid transparent;} #trapezium2 {height: 0; width: 80px;border-top: 80px solid Coral;border-left: 40px solid transparent;border-right: 40px solid transparent;} #parallelogram {width: 130px; height: 75px;background: pink;-moz-transform: skew(20deg); -webkit-transform: skew(20deg); -o-transform: skew(20deg);transform: skew(20deg);} #up-triangle {width: 0; height: 0; border-bottom: 80px solid green; border-left: 60px solid transparent; border-right: 60px solid transparent;} #down-triangle {width: 0; height: 0;border-top: 80px solid pink;border-left: 60px solid transparent; border-right: 60px solid transparent; } #left-triangle {width: 0;height: 0;border-right: 100px solid orange;border-top: 50px solid transparent;border-bottom: 50px solid transparent;} #right-triangle {width: 0;height: 0;border-left: 100px solid red;border-top: 50px solid transparent;border-bottom: 50px solid transparent;} #octagon {width: 100px;height: 100px;background: DarkTurquoise;} #octagon:before {height: 0;width: 40px;content:\"\";position: absolute;border-bottom: 30px solid DarkTurquoise;border-left: 30px solid #101921;border-right: 30px solid #101921; } #octagon:after {height: 0;width: 40px;content:\"\";position: absolute;border-top: 30px solid DarkTurquoise;border-left: 30px solid #101921;border-right: 30px solid #101921;margin: 70px 0 0 0;} #diamond {width: 80px;height: 80px;background: SkyBlue;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);-webkit-transform-origin: 0 100%;-moz-transform-origin: 0 100%;-ms-transform-origin: 0 100%;-o-transform-origin: 0 100%;transform-origin: 0 100%;} #twelve-point-star {height: 100px;width: 100px;background: orange;position: absolute;} #twelve-point-star:before {height: 100px;width: 100px;background: orange;content:\"\";position: absolute; -moz-transform: rotate(30deg);-webkit-transform: rotate(30deg);-ms-transform: rotate(30deg);-o-transform: rotate(30deg);transform: rotate(30deg);} #twelve-point-star:after {height: 100px;width: 100px;background: orange;content:\"\";position: absolute;-moz-transform: rotate(-30deg);-webkit-transform: rotate(-30deg);-ms-transform: rotate(-30deg);-o-transform: rotate(-30deg);transform: rotate(-30deg);}\n#six-point-star {position: absolute;width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 80px solid red;} #six-point-star:after {content:\"\";position: absolute;width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 80px solid red;margin: 30px 0 0 -50px;} #speech-bubble {width: 120px; height: 80px; background: Thistle;position: absolute;border-radius: 10px;} #speech-bubble:before {content:\"\";position: absolute;width: 0;height: 0;border-top: 13px solid transparent;border-right: 26px solid Thistle;border-bottom: 13px solid transparent;margin: 13px 0 0 -25px;}#pacman {width: 0px;height: 0px;border-right: 60px solid transparent;border-top: 60px solid yellow;border-left: 60px solid yellow;border-bottom: 60px solid yellow;border-top-left-radius: 60px;border-top-right-radius: 60px;border-bottom-left-radius: 60px;border-bottom-right-radius: 60px;} #heart {position: relative;} #heart:before, #heart:after {position: absolute;content: \"\";left: 70px; top: 0;width: 70px;height: 115px;background: red;-moz-border-radius: 50px 50px 0 0;border-radius: 50px 50px 0 0;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);-webkit-transform-origin: 0 100%;-moz-transform-origin: 0 100%;-ms-transform-origin: 0 100%;-o-transform-origin: 0 100%;transform-origin: 0 100%;} #heart:after {left: 0;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);-webkit-transform-origin: 100% 100%;-moz-transform-origin: 100% 100%;-ms-transform-origin: 100% 100%;-o-transform-origin: 100% 100%;transform-origin :100% 100%;}\u003C\/style\u003E\u003Cdiv\u003E\u003Cdiv id=\"circle\" class=\"shapes\"\u003E\u003C\/div\u003E\u003Cdiv id=\"oval1\" class=\"shapes\"\u003E\u003C\/div\u003E\u003Cdiv id=\"oval2\" class=\"shapes\"\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"linkContraido\" onclick=\"SINO('shapessrc1');\"\u003E\u003C\/div\u003E\u003Cpre id=\"shapessrc1\" class=\"elementoOculto\"\u003E#circle { \n  background: red; \n  border-radius: 70px;\n  height: 100px;\n  width: 100px;\n}\n#oval1 {\n  background: yellow; \n  border-radius: 100px \/ 50px;\n  height: 100px; \n  width: 200px; \n}\n#oval2 {\n  background: SandyBrown; \n  border-radius: 50px \/ 100px;\n  height: 160px; \n  width: 80px; \n}\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv\u003E\u003Cdiv id=\"trapezium1\" class=\"shapes\"\u003E\u003C\/div\u003E\u003Cdiv id=\"trapezium2\" class=\"shapes\"\u003E\u003C\/div\u003E\u003Cdiv id=\"parallelogram\" class=\"shapes\"\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"linkContraido\" onclick=\"SINO('shapessrc2');\"\u003E\u003C\/div\u003E\u003Cpre id=\"shapessrc2\" class=\"elementoOculto\"\u003E#trapezium1 {\n  border-right: 40px solid transparent;\n  border-bottom: 80px solid Aquamarine;\n  border-left: 40px solid transparent;\n  height: 0; \n  width: 80px;\n}\n#trapezium2 {\n   border-top: 80px solid Coral;\n   border-right: 40px solid transparent;\n   border-left: 40px solid transparent;\n   height: 0; \n   width: 80px;\n}\n#parallelogram {\n  background: pink;\n  height: 75px;\n  width: 130px; \n  -moz-transform: skew(20deg); \n  -webkit-transform: skew(20deg); \n  -o-transform: skew(20deg);\n  transform: skew(20deg);\n}\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv\u003E\u003Cdiv id=\"up-triangle\" class=\"shapes\"\u003E\u003C\/div\u003E\u003Cdiv id=\"down-triangle\" class=\"shapes\"\u003E\u003C\/div\u003E\u003Cdiv id=\"left-triangle\" class=\"shapes\"\u003E\u003C\/div\u003E\u003Cdiv id=\"right-triangle\" class=\"shapes\"\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"linkContraido\" onclick=\"SINO('shapessrc3');\"\u003E\u003C\/div\u003E\u003Cpre id=\"shapessrc3\" class=\"elementoOculto\"\u003E#up-triangle {\n   border-right: 60px solid transparent; \n   border-bottom: 80px solid green; \n   border-left: 60px solid transparent; \n   height: 0; \n   width: 0; \n}\n#down-triangle { \n   border-top: 80px solid pink;\n   border-right: 60px solid transparent; \n   border-left: 60px solid transparent; \n   height: 0;\n   width: 0; \n}\n#left-triangle {\n   border-top: 50px solid transparent;\n   border-right: 100px solid orange;\n   border-bottom: 50px solid transparent;\n   height: 0;\n   width: 0;\n}\n#right-triangle {\n   border-top: 50px solid transparent;\n   border-bottom: 50px solid transparent;\n   border-left: 100px solid red;\n   height: 0;\n   width: 0;\n}\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv\u003E\u003Cdiv id=\"octagon\" class=\"shapes\"\u003E\u003C\/div\u003E\u003Cdiv id=\"diamond\" class=\"shapes\" style=\" margin: 20px 0 0 70px;\"\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"linkContraido\" onclick=\"SINO('shapessrc4');\"\u003E\u003C\/div\u003E\u003Cpre id=\"shapessrc4\" class=\"elementoOculto\"\u003E#octagon {\n  background: DarkTurquoise;\n  height: 100px; \n  width: 100px; \n}\n#octagon:before {\n  border-bottom: 30px solid DarkTurquoise;\n  border-right: 30px solid #101921; \/* el color del fondo *\/\n  border-left: 30px solid #101921; \/* el color del fondo *\/\n  content:\"\";\n  height: 0;\n  position: absolute; \n  width: 40px;\n}\n#octagon:after {\n   border-top: 30px solid DarkTurquoise; \n   border-right: 30px solid #101921; \/* el color del fondo *\/\n   border-left: 30px solid #101921; \/* el color del fondo *\/\n   content:\"\";\n   height: 0;\n   margin: 70px 0 0 0;\n   position: absolute; \n   width: 40px;\n}\n\n#diamond {\n   background: SkyBlue;\n   height: 80px; \n   width: 80px; \n   -moz-transform: rotate(-45deg);\n   -webkit-transform: rotate(-45deg);\n   -ms-transform: rotate(-45deg);\n   -o-transform: rotate(-45deg);\n   transform: rotate(-45deg);\n   -moz-transform-origin: 0 100%;\n   -webkit-transform-origin: 0 100%;\n   -ms-transform-origin: 0 100%;\n   -o-transform-origin: 0 100%;\n   transform-origin: 0 100%;\n}\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"height: 120px;position: relative;width: 100%;\"\u003E\u003Cdiv id=\"twelve-point-star\" class=\"shapes\"\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"linkContraido\" onclick=\"SINO('shapessrc5');\"\u003E\u003C\/div\u003E\u003Cpre id=\"shapessrc5\" class=\"elementoOculto\"\u003E#twelve-point-star {\n  background: orange;\n  height: 100px;\n  position: absolute;\n  width: 100px;\n}\n#twelve-point-star:before {\n  background: orange;\n  content:\"\";\n  height: 100px;\n  position: absolute;\n  width: 100px;\n  -moz-transform: rotate(30deg);\n  -webkit-transform: rotate(30deg);\n  -ms-transform: rotate(30deg);\n  -o-transform: rotate(30deg);\n  transform: rotate(30deg);\n}\n#twelve-point-star:after {\n  background: orange;\n  content:\"\";\n  height: 100px;\n  position: absolute;\n  width: 100px;\n  -moz-transform: rotate(-30deg);\n  -webkit-transform: rotate(-30deg);\n  -ms-transform: rotate(-30deg);\n  -o-transform: rotate(-30deg);\n  transform: rotate(-30deg);\n}\n\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"height: 120px;position: relative;width: 100%;\"\u003E\u003Cdiv id=\"six-point-star\" class=\"shapes\"\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"linkContraido\" onclick=\"SINO('shapessrc6');\"\u003E\u003C\/div\u003E\u003Cpre id=\"shapessrc6\" class=\"elementoOculto\"\u003E#six-point-star {\n  border-bottom: 80px solid red;\n  border-right: 50px solid transparent; \n  border-left: 50px solid transparent; \n  position: absolute;\n  height: 0; \n  width: 0; \n}\n#six-point-star:after {\n  border-top: 80px solid red;\n  border-right: 50px solid transparent; \n  border-left: 50px solid transparent; \n  content:\"\";\n  height: 0; \n  margin: 30px 0 0 -50px;\n  position: absolute;\n  width: 0; \n}\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv style=\"height: 90px;position: relative;width: 100%;margin-left:20px;\"\u003E\u003Cdiv id=\"speech-bubble\" class=\"shapes\"\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"linkContraido\" onclick=\"SINO('shapessrc7');\"\u003E\u003C\/div\u003E\u003Cpre id=\"shapessrc7\" class=\"elementoOculto\"\u003E#speech-bubble {\n  background: Thistle;\n  border-radius: 10px;\n  height: 80px;\n  position: absolute;\n  width: 120px;\n}\n#speech-bubble:before {\n  border-top: 13px solid transparent;\n  border-right: 26px solid Thistle;\n  border-bottom: 13px solid transparent;\n  content:\"\";\n  height: 0;\n  margin: 13px 0 0 -25px;\n  position: absolute;\n  width: 0;\n}\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv style=\"height: 120px;position: relative;width: 100%;\"\u003E\u003Cdiv id=\"pacman\" class=\"shapes\"\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"linkContraido\" onclick=\"SINO('shapessrc8');\"\u003E\u003C\/div\u003E\u003Cpre id=\"shapessrc8\" class=\"elementoOculto\"\u003E#pacman {\n  border-top: 60px solid yellow;\n  border-right: 60px solid transparent;\n  border-bottom: 60px solid yellow;\n  border-left: 60px solid yellow;\n  border-radius: 60px;\n  height: 0px;\n  width: 0px;\n}\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv style=\"height: 120px;position: relative;width: 100%;\"\u003E\u003Cdiv id=\"heart\" class=\"shapes\"\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"linkContraido\" onclick=\"SINO('shapessrc9');\"\u003E\u003C\/div\u003E\u003Cpre id=\"shapessrc9\" class=\"elementoOculto\"\u003E#heart { \n  position: relative;\n}\n#heart:before, #heart:after {\n  background: red;\n  border-radius: 50px 50px 0 0;\n  content: \"\";\n  height: 115px;\n  left: 70px;\n  position: absolute;\n  top: 0;\n  width: 70px;\n  -moz-transform: rotate(-45deg);\n  -webkit-transform: rotate(-45deg);\n  -ms-transform: rotate(-45deg);\n  -o-transform: rotate(-45deg);\n  transform: rotate(-45deg);\n  -moz-transform-origin: 0 100%;\n  -webkit-transform-origin: 0 100%;\n  -ms-transform-origin: 0 100%;\n  -o-transform-origin: 0 100%;\n  transform-origin: 0 100%;\n}\n#heart:after { \n left: 0; \n  -moz-transform: rotate(45deg); \n  -webkit-transform: rotate(45deg); \n  -ms-transform: rotate(45deg); \n  -o-transform: rotate(45deg);\n  transform: rotate(45deg);\n  -moz-transform-origin: 100% 100%;\n  -webkit-transform-origin: 100% 100%;\n  -ms-transform-origin: 100% 100%;\n  -o-transform-origin: 100% 100%;\n  transform-origin :100% 100%;\n}\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"referenciaExterna\"\u003E\u003Cspan\u003EREFERENCIAS:\u003C\/span\u003E\u003Ca href=\"http:\/\/css3shapes.com\/\" target=\"_blank\"\u003ECSS3 Shapes\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/7218844860088319481\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2002\/02\/css-shapes.html#comment-form","title":"10 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/7218844860088319481"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/7218844860088319481"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2002\/02\/css-shapes.html","title":"CSS Shapes"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"10"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-2516932747416587917"},"published":{"$t":"2012-02-17T00:05:00.001-03:00"},"updated":{"$t":"2012-02-17T00:27:12.043-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"El atributo placeholder"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EEs común utilizar etiquetas INPUT para que los usuarios ingresen alguna clase de dato, por ejemplo, buscar algo. Suelen ser etiquetas a las que no prestamos atención ni personalizamos aunque, como cualquier otra, admiten el uso de CSS (más información: \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2008\/05\/personalizando-un-poco-los-buscadores-1.html\" target=\"_blank\"\u003E1\u003C\/a\u003E | \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2008\/05\/personalizando-un-poco-los-buscadores-2.html\" target=\"_blank\"\u003E2\u003C\/a\u003E).\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nBásicamente dicen esto aunque podrían tener más atributos:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;input type=\"text\" value=\"\" \/\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EY en estos ejemplos, todas tienen una clase con esta regla de estilo:\u003C\/div\u003E\u003Cpre\u003Einput.demos[type=text] {\n  background: #FFF;\n  border: 2px solid Chocolate;\n  border-radius: 4px;\n  color: #888;\n  font-size: 20px;\n  height: 32px;\n  margin: 10px 0;\n  padding: 0 10px;\n  text-align: center;\n  width: 300px;\n}\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ESe vería así:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003Einput.demos[type=text] {background: #FFF;border: 2px solid Chocolate;border-radius: 4px;color: #888;height: 32px;font-size: 20px;margin: 10px 0;padding: 0 10px;text-align: center;width: 300px;}\u003C\/style\u003E\u003Cdiv style=\"text-align: center;\"\u003E\u003Cinput class=\"demos\" type=\"text\" value=\"\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EAsí, sin nada extra, suele ocurrir que el usuario no sepa qué tipo de dato poner o que formato debería tener por lo que es común que se le adose esa información; si esto lo hacemos en el atributo \u003Cb\u003Evalue\u003C\/b\u003E será incómodo ya que quien lo use, deberá borrar ese texto y luego poner el dato:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;input type=\"text\" value=\"el texto por defecto\" \/\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: center;\"\u003E\u003Cinput class=\"demos\" type=\"text\" value=\"el texto por defecto\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EPara evitar eso, muchas veces debemos haber visto que se usan dos eventos extras: \u003Cb\u003Eonblur\u003C\/b\u003E y \u003Cb\u003Eonfocus\u003C\/b\u003E a los que se les agrega un poco de JavaScript que lo que hace es permutar el valor del atributo \u003Cb\u003Evalue\u003C\/b\u003E, si el control no está activo y no hay nada agregado, se ve el texto por defecto y ese texto desaparece cuando hacemos \u003Ci\u003Eclick\u003C\/i\u003E dentro para escribir algo.\u003C\/div\u003E\u003Cpre\u003E\u0026lt;input type=\"text\" value=\"el texto por defecto\" onfocus=\"if (this.value=='el texto por defecto') this.value='';\" onblur=\"if (this.value=='') this.value='el texto por defecto';\" \/\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: center;\"\u003E\u003Cinput class=\"demos\" type=\"text\" value=\"el texto por defecto\" onfocus=\"if (this.value=='el texto por defecto') this.value='';\" onblur=\"if (this.value=='') this.value='el texto por defecto';\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EFunciona perfectamente pero es un código largo y engorroso que las nuevas técnicas del HTML5 y el CSS3 hacen innecesario ya que para eso, ahora podemos usar un nuevo atributo llamado \u003Cb\u003Eplaceholder\u003C\/b\u003E que hará todo eso de modo automático aunque, en versiones de Internet Explorer viejas no tendrá ningún efecto:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;input type=\"text\" placeholder=\"el texto por defecto\" value=\"\" \/\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: center;\"\u003E\u003Cinput class=\"demos\" type=\"text\" placeholder=\"el texto por defecto\" value=\"\" \/\u003E\u003Cbr \/\u003E\n\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003ETambién es posible personalizar \u003Cb\u003Eplaceholder\u003C\/b\u003E para que se vea \"distinto\" pero, eso requiere el uso de propiedades con prefijos que son tres:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n:-moz-placeholder {} \/* para Firefox *\/\u003Cbr \/\u003E\n::-webkit-input-placeholder {} \/* para Chrome *\/\u003Cbr \/\u003E\n:-ms-input-placeholder {} \/* para Internet Explorer *\/\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003Einput.demos1::-webkit-input-placeholder {background: #DDD;color: chocolate;font-size: 16px;font-style: italic;font-weight: bold;letter-spacing: 3px;} input.demos1:-moz-placeholder {background: #DDD;color: chocolate;font-size: 16px;font-style: italic;font-weight: bold;letter-spacing: 3px;} input.demos1:-ms-input-placeholder {background: #DDD;color: chocolate;font-size: 16px;font-style: italic;font-weight: bold;letter-spacing: 3px;}\u003C\/style\u003E\u003Cdiv style=\"text-align: center;\"\u003E\u003Cinput class=\"demos demos1\" type=\"text\" placeholder=\"el texto por defecto\" value=\"\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003ELamentablemente, por ahora, las diferencias entre los navegadores también son varias; por ejemplo, en Firefox se pueden usar propiedades como background-color, border y padding pero en Chrome no o bien son mostradas de modo extraño. Además, se debe tener en cuenta que estas reglas de estilo hay que aplicarlas de modo individual y no pueden ser agrupadas:\u003C\/div\u003E\u003Cpre\u003Einput.demos:-moz-placeholder {\n  background: #DDD;\n  color: Chocolate;\n  font-size: 16px;\n  font-style: italic;\n  font-weight: bold;\n  letter-spacing: 3px;\n}\ninputdemos::-webkit-input-placeholder {\n  background: #DDD;\n  color: Chocolate;\n  font-size: 16px;\n  font-style: italic;\n  font-weight: bold;\n  letter-spacing: 3px;\n}\ninput.demos:-ms-input-placeholder {\n  background: #DDD;\n  color: Chocolate;\n  font-size: 16px;\n  font-style: italic;\n  font-weight: bold;\n  letter-spacing: 3px;\n}\u003C\/pre\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/2516932747416587917\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/02\/el-atributo-placeholder.html#comment-form","title":"9 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/2516932747416587917"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/2516932747416587917"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/02\/el-atributo-placeholder.html","title":"El atributo placeholder"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"9"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-721473573094161617"},"published":{"$t":"2012-02-13T00:03:00.002-03:00"},"updated":{"$t":"2017-06-29T01:05:37.380-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Jugando con :after y :before"},"content":{"type":"html","$t":"\u003Cdiv class=\"vagacode\"\u003E\u003Cdiv class=\"sue\"\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/lcRlc3w.png\"\u003E\u003Cp\u003Ebefore es lo que está antes , after es lo que está después ... los pseudo-elementos ::after y ::before resultan ser muy sencillos de manejar y tener infinitas posibilidades ya que nos permiten agregar contenido utilizando el CSS.\u003C\/p\u003E\u003C\/div\u003E\u003Cdiv class=\"gowi\"\u003E\u003Cspan\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/yrSqFzYl.png\"\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/after-y-before\"\u003Eleer artículo actualizado\u003C\/a\u003E\u003C\/span\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/\"\u003E\u003Cimg class=\"wlogo\" src=\"http:\/\/i.imgur.com\/QZHLte7.png\"\u003E\u003C\/a\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/721473573094161617\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/02\/jugando-con-after-y-before.html#comment-form","title":"9 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/721473573094161617"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/721473573094161617"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/02\/jugando-con-after-y-before.html","title":"Jugando con :after y :before"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"9"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-2493956144048495991"},"published":{"$t":"2012-02-06T00:06:00.001-03:00"},"updated":{"$t":"2012-02-06T00:06:00.773-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Las tablas que no son tablas siguen siendo tablas"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003E¿Qué diferencia hay entre una tabla y una tabla? Que una es una tabla y la otra no es una tabla pero ambas son tablas.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nParece un galimatias pero es lo que ofrecen algunas propiedades recientes del CSS que tienen algún uso práctico cuando se trata de alinear cosas verticalmente pero que no estoy muy seguro que aporten nada nuevo aunque ya se sabe que en estas cosas, a veces, lo sencillo se complica porque es más \u003Cspan style=\"font-style: italic;\"\u003Ecool\u003C\/span\u003E.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nAcá hay dos modelos ¿hay alguna diferencia ente ellos?\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Ctable id=\"tabla1\"\u003E\u003Ccaption\u003Eesta es una tabla que es tabla\u003C\/caption\u003E\n\u003Ctr\u003E \u003Cth\u003EColumna 1\u003C\/th\u003E \u003Cth\u003EColumna 2\u003C\/th\u003E \u003Cth\u003EColumna 3\u003C\/th\u003E \u003C\/tr\u003E\n\u003Ctr\u003E \u003Ctd\u003EFila 1 Celda 1\u003C\/td\u003E \u003Ctd\u003EFila 1 Celda 2\u003C\/td\u003E \u003Ctd\u003EFila 1 Celda 3\u003C\/td\u003E \u003C\/tr\u003E\n\u003Ctr\u003E \u003Ctd\u003EFila 2 Celda 1\u003C\/td\u003E \u003Ctd\u003EFila 2 Celda 2\u003C\/td\u003E \u003Ctd\u003EFila 2 Celda 3\u003C\/td\u003E \u003C\/tr\u003E\n\u003Ctr\u003E \u003Ctd\u003EFila 3 Celda 1\u003C\/td\u003E \u003Ctd\u003EFila 3 Celda 2\u003C\/td\u003E \u003Ctd\u003EFila 3 Celda 3\u003C\/td\u003E \u003C\/tr\u003E\n\u003C\/table\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E#tabla2 {display: table;} #tabla2 .caption {display: table-caption} #tabla2 .row {display: table-row;} #tabla2 .cell {display: table-cell;} #tabla2 .rowhead {display: table-row;} #tabla2 .rowhead .cell {display: table-cell;}\u003C\/style\u003E\u003Cdiv id=\"tabla2\"\u003E\u003Cdiv class=\"caption\"\u003Euna tabla que no es tabla\u003C\/div\u003E\u003Cdiv class=\"rowhead\"\u003E\u003Cspan class=\"cell\"\u003EColumna 1\u003C\/span\u003E\u003Cspan class=\"cell\"\u003EColumna 2\u003C\/span\u003E\u003Cspan class=\"cell\"\u003EColumna 3\u003C\/span\u003E\u003Cbr \/\u003E\n\u003C\/div\u003E\u003Cdiv class=\"row\"\u003E\u003Cspan class=\"cell\"\u003EFila 1 Celda 1\u003C\/span\u003E\u003Cspan class=\"cell\"\u003EFila 1 Celda 2\u003C\/span\u003E\u003Cspan class=\"cell\"\u003EFila 1 Celda 3\u003C\/span\u003E\u003Cbr \/\u003E\n\u003C\/div\u003E\u003Cdiv class=\"row\"\u003E\u003Cspan class=\"cell\"\u003EFila 2 Celda 1\u003C\/span\u003E\u003Cspan class=\"cell\"\u003EFila 2 Celda 2\u003C\/span\u003E\u003Cspan class=\"cell\"\u003EFila 2 Celda 3\u003C\/span\u003E\u003Cbr \/\u003E\n\u003C\/div\u003E\u003Cdiv class=\"row\"\u003E\u003Cspan class=\"cell\"\u003EFila 3 Celda 1\u003C\/span\u003E\u003Cspan class=\"cell\"\u003EFila 3 Celda 2\u003C\/span\u003E\u003Cspan class=\"cell\"\u003EFila 3 Celda 3\u003C\/span\u003E\u003Cbr \/\u003E\n\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EPocas. Así, sin propiedades extras, dependiendo del navegador, veremos alguna fila centrada en lugar de alineada a la izquierda o una diferencia en la fuente de los textos, tamaños levemente distintos. La primera, es una tabla tabla es decir, está armada con \u003Ca href=\"http:\/\/www.w3.org\/TR\/CSS2\/tables.html\" target=\"_blank\" rel=\"nofollow\"\u003Eetiquetas HTML\u003C\/a\u003E:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;table\u0026gt;\n  \u0026lt;caption\u003Eesta es una tabla que es tabla\u0026lt;\/caption\u0026gt;\n  \u0026lt;tr\u0026gt;\n    \u0026lt;th\u0026gt;Columna 1\u0026lt;\/th\u0026gt;\n    \u0026lt;th\u0026gt;Columna 2\u0026lt;\/th\u0026gt;\n    \u0026lt;th\u0026gt;Columna 3\u0026lt;\/th\u0026gt;\n  \u0026lt;\/tr\u0026gt;\n  \u0026lt;tr\u0026gt;\n    \u0026lt;td\u0026gt;Fila 1 Celda 1\u0026lt;\/td\u0026gt;\n    \u0026lt;td\u0026gt;Fila 1 Celda 2\u0026lt;\/td\u0026gt;\n    \u0026lt;td\u0026gt;Fila 1 Celda 3\u0026lt;\/td\u0026gt;\n  \u0026lt;\/tr\u0026gt;\n  .......\n\u0026lt;\/table\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ELa segunda, es un conjunto de DIVs con ciertas propiedades CSS:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;style\u0026gt;\n  #tabla {display: table;}\n  #tabla .caption {display: table-caption}\n  #tabla .fila {display: table-row;}\n  #tabla .celda {display: table-cell;}\n  #tabla .filatitulo {display: table-row;}\n  #tabla .filatitulo .celda {display: table-cell;}\n\u0026lt;\/style\u0026gt;\n\n\u0026lt;div id=\"tabla\"\u0026gt;\n  \u0026lt;div class=\"caption\"\u0026gt;una tabla que no es tabla\u0026lt;\/div\u0026gt;\n  \u0026lt;div class=\"filatitulo\"\u0026gt;\n    \u0026lt;span class=\"celda\"\u0026gt;Columna 1\u0026lt;\/span\u0026gt;\n    \u0026lt;span class=\"celda\"\u0026gt;Columna 2\u0026lt;\/span\u0026gt;\n    \u0026lt;span class=\"celda\"\u0026gt;Columna 3\u0026lt;\/span\u0026gt;\n  \u0026lt;\/div\u0026gt;\n  \u0026lt;div class=\"fila\"\u0026gt;\n    \u0026lt;span class=\"celda\"\u0026gt;Fila 1 Celda 1\u0026lt;\/span\u0026gt;\n    \u0026lt;span class=\"celda\"\u0026gt;Fila 1 Celda 2\u0026lt;\/span\u0026gt;\n    \u0026lt;span class=\"celda\"\u0026gt;Fila 1 Celda 3\u0026lt;\/span\u0026gt;\n  \u0026lt;\/div\u0026gt;\n.......\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ELa propiedad básica que permite \"simular\" una tabla es \u003Cb\u003Edisplay\u003C\/b\u003E y puede tener estos valores:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003Etable \u003C\/span\u003Ees el equivalente a la etiqueta TABLE\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003Etable-row \u003C\/span\u003Ees el equivalente a la etiqueta TR\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003Etable-cell \u003C\/span\u003Ees el equivalente a las etiquetas TD y TH\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003Etable-caption \u003C\/span\u003Ees el equivalente a la etiqueta CAPTION\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003Etable-header-group \u003C\/span\u003Ees el equivalente a la etiqueta THEAD\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003Etable-row-group \u003C\/span\u003Ees el equivalente a la etiqueta TBODY\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003Etable-footer-group \u003C\/span\u003Ees el equivalente a la etiqueta TFOOT\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003Etable-column-group \u003C\/span\u003Ees el equivalente a la etiqueta COLGROUP\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003Etable-column \u003C\/span\u003Ees el equivalente a la etiqueta COL\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSi bien pueden usarse \u003Ca href=\"http:\/\/caniuse.com\/css-table\" target=\"_blank\" rel=\"nofollow\"\u003Een cualquier navegador\u003C\/a\u003E, incluyendo IE8, al igual que su pariente HTML, las tablas con CSS pueden verse de modo diferente en cada uno de ellos.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nMás allá de algún uso concreto, el resultado final será similar, unas y otras tienen ventajas y desventajas y las discusiones sobre cual es mejor o peor, hay que dejárselas a lo interesados en estas cuestiones que casi son \u003Ci\u003Ereligiosas\u003C\/i\u003E; como usuarios, si algo se ve bien y funciona en al mayoría de los navegadores, es que está bien. Podrá mejorarse pero nada más. Mucho más interesante será cuando los navegadores comiencen a soportar el llamado \u003Ca href=\"http:\/\/dev.w3.org\/csswg\/css3-grid-align\/\" target=\"_blank\" rel=\"nofollow\"\u003EGrid Layout\u003C\/a\u003E, algo que por ahora, sólo es parte del futuro incierto.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"referenciaExterna\"\u003E\u003Cspan\u003EREFERENCIAS:\u003C\/span\u003E\u003Ca href=\"http:\/\/www.vanseodesign.com\/css\/tables\/\" target=\"_blank\"\u003Evanseodesign.com\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/2493956144048495991\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/02\/las-tablas-que-no-son-tablas-siguen.html#comment-form","title":"7 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/2493956144048495991"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/2493956144048495991"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/02\/las-tablas-que-no-son-tablas-siguen.html","title":"Las tablas que no son tablas siguen siendo tablas"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"7"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-3472352131015610773"},"published":{"$t":"2012-02-03T00:02:00.000-03:00"},"updated":{"$t":"2017-09-26T00:08:11.679-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Float: Lo principal y lo secundario"},"content":{"type":"html","$t":"\u003Cdiv class=\"vagacode\"\u003E\u003Cdiv class=\"sue\"\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/wnhaMYo.jpg\"\u003E\u003Cp\u003ECuando a un elemento le agregamos la propiedad float, lo convertimos en un bloque pero con una característica especial: su ancho no ocupa el 100% del contenedor sino sólo el de su contenido pero, además, lo quitamos del orden natural de la página; de este modo, todo lo que lo rodea se moverá y se acomodará como pueda para hacerle lugar.\u003C\/p\u003E\u003C\/div\u003E\u003Cdiv class=\"gowi\"\u003E\u003Cspan\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/yrSqFzYl.png\"\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/los-elementos-flotantes\"\u003Eleer artículo actualizado\u003C\/a\u003E\u003C\/span\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/\"\u003E\u003Cimg class=\"wlogo\" src=\"http:\/\/i.imgur.com\/QZHLte7.png\"\u003E\u003C\/a\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/3472352131015610773\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/01\/float-lo-principal-y-lo-secundario.html#comment-form","title":"17 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/3472352131015610773"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/3472352131015610773"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/01\/float-lo-principal-y-lo-secundario.html","title":"Float: Lo principal y lo secundario"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"17"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-46560185105389164"},"published":{"$t":"2012-01-11T00:01:00.001-03:00"},"updated":{"$t":"2017-06-18T02:14:25.083-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"text-decoration y el CSS3"},"content":{"type":"html","$t":"\u003Cdiv class=\"vagacode\"\u003E\u003Cdiv class=\"sue\"\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/f2mepFj.jpg\"\u003E\u003Cp\u003EEl CSS3 está cambiando la forma en que son tratados los textos. Durante años, las propiedades permanecieron invariables; ahora, se agregan opciones que algunos navegadores reconocen, otros no y otros más o menos.\u003C\/p\u003E\u003C\/div\u003E\u003Cdiv class=\"gowi\"\u003E\u003Cspan\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/yrSqFzYl.png\"\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/css-y-los-textos-decorados\"\u003Eleer artículo actualizado\u003C\/a\u003E\u003C\/span\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/\"\u003E\u003Cimg class=\"wlogo\" src=\"http:\/\/i.imgur.com\/QZHLte7.png\"\u003E\u003C\/a\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/46560185105389164\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/01\/text-decoration-y-el-css3.html#comment-form","title":"5 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/46560185105389164"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/46560185105389164"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/01\/text-decoration-y-el-css3.html","title":"text-decoration y el CSS3"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"5"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-7459538781549415528"},"published":{"$t":"2012-01-09T00:02:00.002-03:00"},"updated":{"$t":"2012-01-09T00:31:36.929-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"},{"scheme":"http://www.blogger.com/atom/ns#","term":"iconos"}],"title":{"type":"text","$t":"Puzzle de redes sociales"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003E\u003Cimg class=\"izquierda\" style=\"margin-top:-10px\" src=\"http:\/\/1.bp.blogspot.com\/-45XPZVl1OGg\/Twnss4JujOI\/AAAAAAAATT0\/3yKzSq6_oQ4\/s100\/livejournal.png\" \/\u003ELos íconos sociales estilo \u003Cspan style=\"font-style: italic;\"\u003Epuzzle\u003C\/span\u003E de \u003Ca href=\"http:\/\/www.daddydesign.com\/wordpress\/72-free-puzzle-social-network-icons\/\" target=\"_blank\"\u003Edaddydesign\u003C\/a\u003E son originales y pueden ser descargados gratuitamente pero, como son PNGs transparente, pueden servir para armar algo más divertido tal como usa ese sitio en su \u003Cspan style=\"font-style: italic;\"\u003Esidebar\u003C\/span\u003E; simplemente, colocando cada uno de ellos de tal forma que se superpongan y de ese modo, crear un \u003Cspan style=\"font-style: italic;\"\u003Epuzzle\u003C\/span\u003E completo o parcial.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E#puzzleredes {height: 390px;margin: 0 auto;position: relative;width: 470px;} #puzzleredes a { display: block;} #puzzleredes ul {margin: 0;list-style-type:none;} #puzzleredes li {float:left;width:85px;height:85px} \u003C\/style\u003E\u003Cdiv id=\"puzzleredes\"\u003E\u003Cul\u003E\u003Cli\u003E\u003Ca href=\"javascript:void(0);\"\u003E\u003Cimg src=\"http:\/\/2.bp.blogspot.com\/-q9MKVST1z9I\/TwnkmMcadeI\/AAAAAAAATRs\/jRoeGbWwD58\/s400\/grooveshark.png\"\u003E\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"javascript:void(0);\"\u003E\u003Cimg src=\"http:\/\/2.bp.blogspot.com\/-byGkIJsMnTw\/Twnk16WLHTI\/AAAAAAAATSo\/Mq9UPbIJ8LU\/s400\/twitter.png\"\u003E\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"javascript:void(0);\"\u003E\u003Cimg src=\"http:\/\/2.bp.blogspot.com\/-3d9kMltZjKI\/Twnk0wifQEI\/AAAAAAAATR8\/DYwVMfyKONw\/s400\/paypal.png\"\u003E\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Cimg src=\"http:\/\/3.bp.blogspot.com\/-_toO7Z8C5Io\/Twnz-ZfSfKI\/AAAAAAAATUM\/neTL1JGI0Cw\/s400\/blank.png\"\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"javascript:void(0);\"\u003E\u003Cimg src=\"http:\/\/2.bp.blogspot.com\/-HyrGdBU0BRU\/Twnk_Rv1hEI\/AAAAAAAATTI\/R6VBBXPSNc4\/s400\/twitpic.png\"\u003E\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"javascript:void(0);\"\u003E\u003Cimg src=\"http:\/\/4.bp.blogspot.com\/-l8x-V3iG3Jg\/Twnoh-KV-wI\/AAAAAAAATTk\/mfqqML8rGTc\/s400\/netvibes.png\"\u003E\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Cimg src=\"http:\/\/3.bp.blogspot.com\/-_toO7Z8C5Io\/Twnz-ZfSfKI\/AAAAAAAATUM\/neTL1JGI0Cw\/s400\/blank.png\"\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"javascript:void(0);\"\u003E\u003Cimg src=\"http:\/\/2.bp.blogspot.com\/-pFTpwhvurDE\/Twnk_BlCBZI\/AAAAAAAATS4\/CBj90Ipy3V4\/s400\/yahoo.png\"\u003E\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"javascript:void(0);\"\u003E\u003Cimg src=\"http:\/\/3.bp.blogspot.com\/-mcE4wmHdcrU\/Twnk_eoG2jI\/AAAAAAAATTA\/1f_FtTfNcP0\/s400\/vimeo.png\"\u003E\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"javascript:void(0);\"\u003E\u003Cimg src=\"http:\/\/2.bp.blogspot.com\/-Vn6Wqp2CR3s\/Twnk1Gme6OI\/AAAAAAAATSQ\/Of2IV9m-9O4\/s400\/rss.png\"\u003E\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"javascript:void(0);\"\u003E\u003Cimg src=\"http:\/\/2.bp.blogspot.com\/-2GA_naiMHV0\/Twnk1RGxdgI\/AAAAAAAATSg\/-APhjjX_mfY\/s400\/youtube.png\"\u003E\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"javascript:void(0);\"\u003E\u003Cimg src=\"http:\/\/2.bp.blogspot.com\/-thTnpig_C-Q\/TwnklcI9o6I\/AAAAAAAATQ8\/SESiJ3hRwZo\/s400\/blogger.png\"\u003E\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Cimg src=\"http:\/\/3.bp.blogspot.com\/-_toO7Z8C5Io\/Twnz-ZfSfKI\/AAAAAAAATUM\/neTL1JGI0Cw\/s400\/blank.png\"\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"javascript:void(0);\"\u003E\u003Cimg src=\"http:\/\/3.bp.blogspot.com\/-63jkFVH6C_U\/TwnklutRHwI\/AAAAAAAATRU\/h_68hkJvn-M\/s400\/facebook.png\"\u003E\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"javascript:void(0);\"\u003E\u003Cimg src=\"http:\/\/4.bp.blogspot.com\/-dDxMHI1bD8Y\/Twnkl8fV9sI\/AAAAAAAATRg\/HhOzXVtzwKM\/s400\/feedburner.png\"\u003E\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Cimg src=\"http:\/\/3.bp.blogspot.com\/-_toO7Z8C5Io\/Twnz-ZfSfKI\/AAAAAAAATUM\/neTL1JGI0Cw\/s400\/blank.png\"\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"javascript:void(0);\"\u003E\u003Cimg src=\"http:\/\/4.bp.blogspot.com\/-ZqLoz_UUGYs\/Twnk0w3RpWI\/AAAAAAAATSE\/Vd5ehqa-eYQ\/s400\/picassa.png\"\u003E\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"javascript:void(0);\"\u003E\u003Cimg src=\"http:\/\/1.bp.blogspot.com\/-q36FdGoojFc\/TwnklXoQjPI\/AAAAAAAATRE\/rcwduONGQGo\/s400\/email.png\"\u003E\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Cimg src=\"http:\/\/3.bp.blogspot.com\/-_toO7Z8C5Io\/Twnz-ZfSfKI\/AAAAAAAATUM\/neTL1JGI0Cw\/s400\/blank.png\"\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"javascript:void(0);\"\u003E\u003Cimg src=\"http:\/\/4.bp.blogspot.com\/-6HTvBlBM1Vw\/TwnohrAq7FI\/AAAAAAAATTc\/wqeOl06nT1o\/s400\/google-buzz.png\"\u003E\u003C\/a\u003E\u003C\/li\u003E\n\u003C\/ul\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"clear:both;\"\u003E\u003C\/div\u003E\u003Cdiv style=\"text-align: justify;\"\u003EEs sencillo de armar, basta crear una lista de enlaces con las imágenes y eventualmente, como en este ejemplo, en lugar de colocar un ícono, colocamos una imagen transparente para crear un \"agujero\":\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div id=\"puzzleredes\"\u0026gt;\n  \u0026lt;ul\u0026gt;\n    \u0026lt;li\u0026gt;\n      \u0026lt;a href=\"\u003Cspan style=\"color: #FFFF00\"\u003EURL_SERVICIO\u003C\/span\u003E\"\u003E\n        \u0026lt;img src=\"\u003Cspan style=\"color: #FFFF00\"\u003EURL_IMAGEN.png\u003C\/span\u003E\"\u0026gt;\n      \u0026lt;\/a\u0026gt;\n    \u0026lt;\/li\u0026gt;\n    \u0026lt;!-- y seguimos agregando todas las que se nos ocurra --\u0026gt;\n\u0026lt;\/ul\u0026gt;\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EAhora, falta el CSS que simplemente se basa en hacer que cada item de la lista flote y dimensionarlas de tal modo que los rectángulos sean más pequeños que las imágenes para que se superpongan.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSólo basta un poco de aritmética y probar los distintos valores que, es este caso se refieren a los íconos de 128x128:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;style\u0026gt;\n  #puzzleredes {\n    height: 390px;\n    margin: 0 auto;\n    position: relative;\n    width: 470px;\n  }\n  #puzzleredes a {\n    display: block;\n  }\n  #puzzleredes ul {\n    list-style-type:none;\n    margin: 0;\n  }\n  #puzzleredes li {\n    float:left;\n    height:85px\n    width:85px;\n  }\n\u0026lt;\/style\u0026gt;\u003C\/pre\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/7459538781549415528\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/01\/puzzle-de-redes-sociales.html#comment-form","title":"9 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/7459538781549415528"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/7459538781549415528"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/01\/puzzle-de-redes-sociales.html","title":"Puzzle de redes sociales"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/-45XPZVl1OGg\/Twnss4JujOI\/AAAAAAAATT0\/3yKzSq6_oQ4\/s72-c\/livejournal.png","height":"72","width":"72"},"thr$total":{"$t":"9"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-4719394524471780732"},"published":{"$t":"2012-01-04T00:03:00.001-03:00"},"updated":{"$t":"2012-01-04T00:03:00.588-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"},{"scheme":"http://www.blogger.com/atom/ns#","term":"JavaScript"}],"title":{"type":"text","$t":"Fade de imágenes con y sin jQuery"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EEsta son dos formas sencillas de crear un efecto \u003Ci\u003Efade\u003C\/i\u003E sobre una imagen, permutando una por otra.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEn la primera, sólo usaremos CSS así que el el efecto no funcionará en versiones inferiores a IE9; el HTML para ambos es este:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div id=\"ejemplo\"\u0026gt;\n  \u0026lt;img src=\"\u003Cspan style=\"color: #FF0\"\u003EURL_IMAGEN\u003C\/span\u003E\"\/\u0026gt;\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EY el CSS sería algo así:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;style type=\"text\/css\"\u0026gt;  \n  \/* al DIV contenedor lo centramos centramos y dimensionamos *\/\n  #ejemplo {\n    cursor: pointer;  \n    height: 375px;  \n    margin: 0 auto;\n    position: relative;\n    width: 500px;  \n    \/* y acá, colocamos la segunda iamgen como fondo *\/\n    background: transparent url(\u003Cspan style=\"color: #FFFF00\"\u003EURL_OTRA_IMAGEN\u003C\/span\u003E) no-repeat left top;  \n  }  \n  \/* a la etiqueta IMG interna, le agregamos el efecto y la transición *\/\n  #ejemplo img {\n    -moz-transition: opacity 1s;\n    -webkit-transition: opacity 1s;\n    -o-transition: opacity 1s;\n    transition: opacity 1s;\n    opacity: 1;\n    \/* agreamos el filtro para que en IE8 funcione aunque no sea animado *\/\n    filter:alpha(opacity=100);\n  }\n  \/* al poner el cursor encima, la imagen se oculta así que lo que veremos es el fondo de la segunda imagen *\/\n  #ejemplo:hover img {\n    opacity:0;\n    filter:alpha(opacity=0);\n  }\n\u0026lt;\/style\u0026gt;\u003C\/pre\u003E\u003Cstyle type=\"text\/css\"\u003E#ejemplo {background:transparent url(https:\/\/lh6.googleusercontent.com\/-ggT-8ua6_HQ\/TMSmYIBpD4I\/AAAAAAAAA5A\/pv335Sxbs7E\/s500\/09_0019.jpg) no-repeat left top;cursor:pointer;height:375px;margin:0 auto;position:relative;width:500px;} #ejemplo img {-moz-transition:opacity 1s;-webkit-transition:opacity 1s;-o-transition:opacity 1s;transition:opacity 1s;opacity:1;filter:alpha(opacity=100);} #ejemplo:hover img {opacity:0;filter:alpha(opacity=0);}\u003C\/style\u003E\u003Cdiv id=\"ejemplo\"\u003E\u003Cimg src=\"https:\/\/lh5.googleusercontent.com\/-Dj6fbsG6Ag8\/TMSpft5SBkI\/AAAAAAAABBs\/gVmguHrSaUA\/s500\/09_0167.jpg\" width=\"500\" height=\"375\"\/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003ELa otra forma simple es \u003Ca href=\"http:\/\/webintenta.com\/jquery-fade-una-imagen-en-otra-imagen.html\" target=\"_blank\"\u003Eutilizando la librería jQuery\u003C\/a\u003E.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nComo dije, el HTML es exactamente el mismo y el CSS es más corto:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;style type=\"text\/css\"\u0026gt;  \n  \/* al DIV contenedor lo centramos centramos y dimensionamos *\/\n  #ejemplo {\n    cursor: pointer;  \n    height: 375px;  \n    margin: 0 auto;\n    position: relative;\n    width: 500px;  \n    \/* y acá, colocamos la segunda imagen como fondo *\/\n    background: transparent url(\u003Cspan style=\"color: #FFFF00\"\u003EURL_OTRA_IMAGEN\u003C\/span\u003E) no-repeat left top;  \n  }  \n\u0026lt;\/style\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EObviamente, nos falta el script:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;script type=\"text\/javascript\"\u0026gt;\n  $(document).ready(function() {\n    $(\"#ejemplo\").hover(function(){\n      $(this).find(\"img\").fadeOut();\n    }, function() {\n      $(this).find(\"img\").fadeIn();\n    });\n  });   \n\u0026lt;\/script\u0026gt;\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cdiv align=\"center\"\u003E\u003Ciframe style=\"width: 500px; height: 375px;\" marginwidth=\"0\" marginheight=\"0\" allowtransparency=\"true\" src=\"http:\/\/vjquery.blogspot.com\/2012\/01\/fadeimg.html\" align=\"middle\" frameborder=\"0\" scrolling=\"no\"\u003E\u003C\/iframe\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/4719394524471780732\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/01\/fade-de-imagenes-con-y-sin-jquery.html#comment-form","title":"11 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/4719394524471780732"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/4719394524471780732"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2012\/01\/fade-de-imagenes-con-y-sin-jquery.html","title":"Fade de imágenes con y sin jQuery"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/lh5.googleusercontent.com\/-Dj6fbsG6Ag8\/TMSpft5SBkI\/AAAAAAAABBs\/gVmguHrSaUA\/s72-c\/09_0167.jpg","height":"72","width":"72"},"thr$total":{"$t":"11"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-4509492225594354137"},"published":{"$t":"2011-12-28T00:08:00.001-03:00"},"updated":{"$t":"2011-12-28T00:08:00.052-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Una ventana modal usando CSS3"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003ECSS3 Lightbox es una fantástica idea de \u003Ca href=\"http:\/\/tympanus.net\/codrops\/2011\/12\/26\/css3-lightbox\/\" target=\"_blank\"\u003Ecodrops\u003C\/a\u003E que hace uso de la pseudo-clase target por lo tanto, no funcionará en versiones anteriores a IE9 pero, de todos modos, vale la pena investigar porque permite crear algo así como una ventana modal para mostrar imágenes, son bastante sencillez.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nAcá, me he limitado a \"destruir\" un poco el código de tal modo de hacerlo independiente pero, los demos originales pueden ser descargados del sitio del desarrollador y entendiéndolos, se puede jugar con diseños personales o estructuras diferentes.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E.vmcc3 {display: inline-block;position: relative;} .vmcc3 \u003E a,.vmcc3 \u003E a img{display: block;} .vmcc3 \u003E a{ position: relative;} .vmoverlay{width: 0;height: 0;position: fixed;overflow: hidden;left: 0;top: 0;padding: 0;z-index: 99;text-align: center;background-color: rgba(0, 0, 0, 0.9);} .vmoverlay a.vmcerrar {color: #FFFFFF;font-size: 20px;left: 50%;line-height: 26px;margin-left: -25px;opacity: 0;overflow: hidden;position: absolute;text-align: center;top: 70px;z-index: 1001;font-weight: normal;-webkit-transition: opacity 0.3s linear 1.2s;-moz-transition: opacity 0.3s linear 1.2s;-o-transition: opacity 0.3s linear 1.2s;-ms-transition: opacity 0.3s linear 1.2s;transition: opacity 0.3s linear 1.2s;} .vmoverlay img {max-height: 100%;position: relative;} .vmoverlay:target {width: auto;height: auto;bottom: 0;right: 0;padding-top: 100px;} .vmoverlay:target img {-webkit-animation: fadeInScale 1.2s ease-in-out;-moz-animation: fadeInScale 1.2s ease-in-out; -o-animation: fadeInScale 1.2s ease-in-out;-ms-animation: fadeInScale 1.2s ease-in-out;animation: fadeInScale 1.2s ease-in-out;} .vmoverlay:target a.vmcerrar {opacity: 1;} @-webkit-keyframes fadeInScale {0% { -webkit-transform: scale(0.6);opacity: 0;} 100% { -webkit-transform: scale(1);opacity: 1;}} @-moz-keyframes fadeInScale {0% { -moz-transform: scale(0.6);opacity: 0;} 100% { -moz-transform: scale(1);opacity: 1;}} @-o-keyframes fadeInScale {0% { -o-transform: scale(0.6);opacity: 0;} 100% { -o-transform: scale(1);opacity: 1;}} @-ms-keyframes fadeInScale {0% { -ms-transform: scale(0.6);opacity: 0;} 100% { -ms-transform: scale(1);opacity: 1;}} @keyframes fadeInScale {0% { transform: scale(0.6);opacity: 0;} 100% { transform: scale(1);opacity: 1;}}\u003C\/style\u003E\u003Ccenter\u003E\u003Cdiv class=\"vmcc3\" id=\"ejemplo-1\"\u003E\u003Ca href=\"#image-1\"\u003E\u003Cimg src=\"https:\/\/lh6.googleusercontent.com\/-mjxoRNfGTcA\/TbX4OaPPM0I\/AAAAAAAADlk\/dHLVEv0cRbk\/s128\/23_0023.jpg\" \/\u003E\u003C\/a\u003E\u003Cdiv class=\"vmoverlay\" id=\"image-1\"\u003E\u003Cimg src=\"https:\/\/lh6.googleusercontent.com\/-mjxoRNfGTcA\/TbX4OaPPM0I\/AAAAAAAADlk\/dHLVEv0cRbk\/s800\/23_0023.jpg\" \/\u003E\u003Ca href=\"#ejemplo-1\" class=\"vmcerrar\"\u003Ecerrar\u003C\/a\u003E\u003C\/div\u003E\u003C\/div\u003E\u003C\/center\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EBásicamente, en este ejemplo, el HTML es el mismo que muestran en sus demos aunque le puse otros nombres a las clases para no confundirme; en lugar de usar una lista, como no quiero crear un álbum sino tener la posibilidad de mostrar esa ventana modal en cualquier circunstancia, uso un DIV:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div class=\"vmcc3\" id=\"\u003Cspan style=\"color: #CCCCFF\"\u003Eejemplo-1\u003C\/span\u003E\"\u0026gt;\n  \u0026lt;!-- la miniatura visible --\u0026gt;\n  \u0026lt;a href=\"\u003Cspan style=\"color: #CCCCFF\"\u003E#image-1\u003C\/span\u003E\"\u0026gt;\n    \u0026lt;img src=\"URL_miniatura\" \/\u0026gt;\n  \u0026lt;\/a\u0026gt;\n  \u0026lt;!-- la imagen completa oculta --\u0026gt;\n  \u0026lt;div class=\"vmoverlay\" id=\"\u003Cspan style=\"color: #CCCCFF\"\u003Eimage-1\u003C\/span\u003E\"\u0026gt;\n    \u0026lt;img src=\"URL_imagen\" \/\u0026gt;\n    \u0026lt;a href=\"\u003Cspan style=\"color: #CCCCFF\"\u003E#ejemplo-1\u003C\/span\u003E\" class=\"vmcerrar\"\u0026gt;cerrar\u0026lt;\/a\u0026gt;\n  \u0026lt;\/div\u0026gt;\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EAlojando las imágenes en Picasa es bastante sencillo tener \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2009\/04\/alojando-imagenes-en-blogger.html\" target=\"_blank\"\u003Elas dos direcciones URLs\u003C\/a\u003E, la de la miniatura y la de la imagen completa.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEl único detalle a tener en cuenta al crear el HTML es el ID que debe ser único (no repetido) y que se coloca en el DIV oculto y al que se debe hacer referencia en el enlace  de la miniatura, anteponiéndole el carácter # ya que eso es l oque hará que funcione la pseudo-clase target.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nA esto, le agregué otro ID al DIV contenedor que se utiliza en el enlace CERRAR para evitar que la página se desplazara demasiado; es algo que hay que perfeccionar y ver alternativas.\u003Cbr \/\u003E\n\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Ccenter\u003E\u003Cdiv class=\"vmcc3\" id=\"ejemplo-2\"\u003E\u003Ca href=\"#image-2\"\u003E\u003Cimg src=\"https:\/\/lh4.googleusercontent.com\/-U9kiRNFlNJ0\/TMT6rzSU_5I\/AAAAAAAACIw\/gP9bUdgwLdU\/s200\/24_0036.jpg\"\u003E\u003C\/a\u003E\u003Cdiv class=\"vmoverlay\" id=\"image-2\"\u003E\u003Cimg src=\"https:\/\/lh4.googleusercontent.com\/-U9kiRNFlNJ0\/TMT6rzSU_5I\/AAAAAAAACIw\/gP9bUdgwLdU\/s800\/24_0036.jpg\" \/\u003E\u003Ca href=\"#ejemplo-2\" class=\"vmcerrar\"\u003Ecerrar\u003C\/a\u003E\u003C\/div\u003E\u003C\/div\u003E\u003C\/center\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EY ahora el CSS que incluye animaciones varias:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;style\u0026gt;\n  \/* el contenedor *\/\n  .vmcc3 {\n    display: inline-block;\n    position: relative;\n  }\n  .vmcc3 \u003E a, .vmcc3 \u0026gt; a img {display: block;}\n  .vmcc3 \u003E a {position: relative;}\n  \/* el div oculto donde se mostrará la imagen completa y ocupará toda la pantalla *\/\n  .vmoverlay{\n    background-color: rgba(0, 0, 0, 0.9);\n    height: 0;\n    left: 0;\n    overflow: hidden;\n    position: fixed;\n    text-align: center;\n    top: 0;\n    width: 0;\n    z-index: 99;\n  }\n  \/* el enlace para cerrar la ventana modal es un texto pero puede ser una imagen *\/\n  .vmoverlay a.vmcerrar {\n    color: #FFF;\n    font-size: 20px;\n    left: 50%;\n    line-height: 26px;\n    margin-left: -25px;\n    opacity: 0;\n    overflow: hidden;\n    position: absolute;\n    text-align: center;\n    top: 70px;\n    z-index: 1001;\n    -moz-transition: opacity 0.3s linear 1.2s;\n    -webkit-transition: opacity 0.3s linear 1.2s;\n    -o-transition: opacity 0.3s linear 1.2s;\n    -ms-transition: opacity 0.3s linear 1.2s;\n    transition: opacity 0.3s linear 1.2s;\n  }\n  \/* la imagen de tamaño completo *\/\n  .vmoverlay img {\n    max-height: 100%;\n    position: relative;\n  }\n  \/* la pseudo-clase es la que abrirá la ventana modal *\/\n  .vmoverlay:target {\n    bottom: 0;\n    height: auto;\n    padding-top: 100px;\n    right: 0;\n    width: auto;\n  }\n  \/* las animaciones *\/\n  .vmoverlay:target img {\n    -moz-animation: fadeInScale 1.2s ease-in-out;\n    -webkit-animation: fadeInScale 1.2s ease-in-out;\n    -o-animation: fadeInScale 1.2s ease-in-out;\n    -ms-animation: fadeInScale 1.2s ease-in-out;\n    animation: fadeInScale 1.2s ease-in-out;\n  }\n  .vmoverlay:target a.vmcerrar { opacity: 1;}\n  @-webkit-keyframes fadeInScale {\n    0% { -webkit-transform: scale(0.6); opacity: 0; }\n    100% { -webkit-transform: scale(1); opacity: 1; }\n  }\n  @-moz-keyframes fadeInScale {\n    0% { -moz-transform: scale(0.6); opacity: 0; }\n    100% { -moz-transform: scale(1); opacity: 1; }\n  }\n  @-o-keyframes fadeInScale {\n    0% { -o-transform: scale(0.6); opacity: 0; }\n    100% { -o-transform: scale(1); opacity: 1; }\n  }\n@-ms-keyframes fadeInScale {\n    0% { -ms-transform: scale(0.6); opacity: 0; }\n    100% { -ms-transform: scale(1); opacity: 1; }\n  }\n  @keyframes fadeInScale {\n    0% { transform: scale(0.6); opacity: 0; }\n    100% { transform: scale(1); opacity: 1; }\n  }\n\u0026lt;\/style\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EEn el demo original podrán ver muchas más alternativas tales como agregar títulos y textos así que parecería que todo se reduce a ir probando y viendo que sale:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Ccenter\u003E\u003Cdiv class=\"vmcc3\" style=\"margin-right:10px\" id=\"ejemplo-3\"\u003E\u003Ca href=\"#image-3\"\u003E\u003Cimg src=\"https:\/\/lh6.googleusercontent.com\/-H31G7MWd5CE\/TMT_Q9JykgI\/AAAAAAAACV0\/iarW_qyMSxA\/s250\/25_0147.jpg\"\/\u003E\u003C\/a\u003E\u003Cdiv class=\"vmoverlay\" id=\"image-3\"\u003E\u003Cimg src=\"https:\/\/lh6.googleusercontent.com\/-H31G7MWd5CE\/TMT_Q9JykgI\/AAAAAAAACV0\/iarW_qyMSxA\/s800\/25_0147.jpg\" \/\u003E\u003Ca href=\"#ejemplo-3\" class=\"vmcerrar\"\u003Ecerrar\u003C\/a\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"vmcc3\" id=\"ejemplo-4\"\u003E\u003Ca href=\"#image-4\"\u003E\u003Cimg src=\"https:\/\/lh5.googleusercontent.com\/-LOCcuTnY1ZU\/TMUD6L9T2-I\/AAAAAAAACgc\/-ZjzbdW5pEE\/s250\/28_0006.jpg\" width=\"250\" height=\"188\"\/\u003E\u003C\/a\u003E\u003Cdiv class=\"vmoverlay\" id=\"image-4\"\u003E\u003Cimg src=\"https:\/\/lh5.googleusercontent.com\/-LOCcuTnY1ZU\/TMUD6L9T2-I\/AAAAAAAACgc\/-ZjzbdW5pEE\/s800\/28_0006.jpg\" \/\u003E\u003Ca href=\"#ejemplo-4\" class=\"vmcerrar\"\u003Ecerrar\u003C\/a\u003E\u003C\/div\u003E\u003C\/div\u003E\u003C\/center\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/4509492225594354137\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/12\/una-ventana-modal-usando-css3.html#comment-form","title":"6 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/4509492225594354137"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/4509492225594354137"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/12\/una-ventana-modal-usando-css3.html","title":"Una ventana modal usando CSS3"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/lh6.googleusercontent.com\/-mjxoRNfGTcA\/TbX4OaPPM0I\/AAAAAAAADlk\/dHLVEv0cRbk\/s72-c\/23_0023.jpg","height":"72","width":"72"},"thr$total":{"$t":"6"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-5871331997271499815"},"published":{"$t":"2011-12-22T00:06:00.002-03:00"},"updated":{"$t":"2017-06-29T01:05:50.046-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Títulos con efectos usando :after y :before"},"content":{"type":"html","$t":"\u003Cdiv class=\"vagacode\"\u003E\u003Cdiv class=\"sue\"\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/lcRlc3w.png\"\u003E\u003Cp\u003Ebefore es lo que está antes , after es lo que está después ... los pseudo-elementos ::after y ::before resultan ser muy sencillos de manejar y tener infinitas posibilidades ya que nos permiten agregar contenido utilizando el CSS.\u003C\/p\u003E\u003C\/div\u003E\u003Cdiv class=\"gowi\"\u003E\u003Cspan\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/yrSqFzYl.png\"\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/after-y-before\"\u003Eleer artículo actualizado\u003C\/a\u003E\u003C\/span\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/\"\u003E\u003Cimg class=\"wlogo\" src=\"http:\/\/i.imgur.com\/QZHLte7.png\"\u003E\u003C\/a\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/5871331997271499815\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/12\/titulos-con-efectos-usando-after-y.html#comment-form","title":"14 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/5871331997271499815"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/5871331997271499815"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/12\/titulos-con-efectos-usando-after-y.html","title":"Títulos con efectos usando :after y :before"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"14"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-651705729660651373"},"published":{"$t":"2011-12-15T00:08:00.001-03:00"},"updated":{"$t":"2011-12-15T00:08:01.765-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Imágenes con reflejos usando CSS"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EEsta es una forma sencilla de agregar un efecto de reflejo en las imágenes, desarrollada por \u003Ca href=\"http:\/\/www.xhtml-lab.com\/css\/create-reflection-effect-using-css3\" target=\"_blank\"\u003Exhtml-lab.com\u003C\/a\u003E. Está basada en algo simple, repetir las imágenes e invertir la de abajo usando para eso, la propiedad \u003Cb\u003Etransform\u003C\/b\u003E y, eventualmente, el filtro \u003Cb\u003Eflipv\u003C\/b\u003E en las versiones anteriores a IE9.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSi a esa imagen inferior, se le aplica opacidad, el resultado es algo similar a un reflejo.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E.image-block {font-size: 0;height: 230px;margin:0 auto;overflow: hidden;width: 200px;} .image-block br {display:none;} .reflection {position:relative;} .reflection img {-moz-transform: scaleY(-1);-webkit-transform: scaleY(-1);-o-transform: scaleY(-1);-ms-transform: scaleY(-1);transform: scaleY(-1);filter: flipv alpha(opacity='20');opacity:0.2;} .reflection-over {position:absolute;top:0;left:0;width:200px;height:120px;background-image:-moz-linear-gradient( center bottom, rgb(255,255,255) 60%, rgba(255,255,255,0) 75%);background-image:-o-linear-gradient( rgba(255,255,255,0) 25%, rgb(255,255,255) 40%);background-image:-webkit-gradient( linear, left bottom, left top, color-stop(0.60, rgb(255,255,255)), color-stop(0.75, rgba(255,255,255,0)));filter:progid:DXImageTransform.Microsoft.Gradient( gradientType=0, startColor=0, EndColorStr=#FFFFFF); \u003C\/style\u003E\u003Cdiv class=\"image-block\"\u003E\u003Cimg src=\"https:\/\/lh6.googleusercontent.com\/-4TG4aZJCGQw\/TMSRXF5lkGI\/AAAAAAAAAJY\/4RqX7boOsws\/s200\/02_0020.jpg\"\/\u003E\u003Cdiv class=\"reflection\"\u003E\u003Cimg src=\"https:\/\/lh6.googleusercontent.com\/-4TG4aZJCGQw\/TMSRXF5lkGI\/AAAAAAAAAJY\/4RqX7boOsws\/s200\/02_0020.jpg\"\/\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EEste sería el HTML básico:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div class=\"image-block\"\u0026gt;\n  \u0026lt;img src=\"URL_IMAGEN\"\/\u0026gt;\n  \u0026lt;div class=\"reflection\"\u0026gt;\n    \u0026lt;img src=\"URL_IMAGEN\"\/\u0026gt;\n  \u0026lt;\/div\u0026gt;\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EY estas las reglas de estilo:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;style\u0026gt;\n  .image-block {\n    height: 230px;\n    overflow: hidden;\n    width: 200px;\n  }\n  .reflection {\n    position: relative;\n  }\n  .reflection img {\n    opacity: 0.2;\n    -moz-transform: scaleY(-1); \/* Firefox *\/\n    -webkit-transform: scaleY(-1); \/* Chrome\/Safari *\/\n    -o-transform: scaleY(-1); \/* Opera *\/\n    -ms-transform: scaleY(-1); \/* IE9 *\/\n    transform: scaleY(-1); \/* w3c *\/\n    filter: flipv alpha(opacity='20'); \/* IE8 *\/\n  }\n\u0026lt;\/style\u0026gt;\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EEn la clase image-block defino width con el ancho de la imagen y height con un valor un poco superior al alto de la imagen para que, aplicando overflow: hidden; este DIV se corte.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEn el artículo original, a todo esto se le agrega un DIV extra que se posiciona de modo absoluto sobre la imagen inferior y sobre la que se aplican ciertos filtros extras como gradientes. Esto puede dar cierto trabjo si el fondo no es oscuro pero, puede intentarse y ver qué sale:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cpre\u003E\u0026lt;div class=\"image-block\"\u0026gt;\n  \u0026lt;img src=\"URL_IMAGEN\"\/\u0026gt;\n  \u0026lt;div class=\"reflection\"\u0026gt;\n    \u0026lt;img src=\"URL_IMAGEN\"\/\u0026gt;\n    \u0026lt;div class=\"reflection-over\"\u0026gt;\u0026lt;\/div\u0026gt;\n  \u0026lt;\/div\u0026gt;\n\u0026lt;\/div\u0026gt;\n\n\u0026lt;\/style\u0026gt;\n reflection-over {\n    position:absolute;\n    top: 0;\n    left: 0;\n    height: 120px;\n    width:200px;\n    background-image: -moz-linear-gradient( center bottom, rgb(255,255,255) 60%, rgba(255,255,255,0) 75%);\n    background-image:   -o-linear-gradient( rgba(255,255,255,0) 25%, rgb(255,255,255) 40%);\n    background-image:     -webkit-gradient( linear, left bottom, left top, color-stop(0.60, rgb(255,255,255)), color-stop(0.75, rgba(255,255,255,0)));\n    filter: progid:DXImageTransform.Microsoft.Gradient( gradientType=0, startColor=0, EndColorStr=#ffffff);\n}\n\u0026lt;\/style\u0026gt;\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"background-color:#FFF;padding:40px;margin:0 auto;width:200px;\"\u003E\u003Cdiv class=\"image-block\"\u003E\u003Cimg src=\"https:\/\/lh4.googleusercontent.com\/-_j8VloBKSfI\/TMPvzhBG-fI\/AAAAAAAAADY\/xvQr5otwfD8\/s200\/01_0039.jpg\"\/\u003E\u003Cdiv class=\"reflection\"\u003E\u003Cimg src=\"https:\/\/lh4.googleusercontent.com\/-_j8VloBKSfI\/TMPvzhBG-fI\/AAAAAAAAADY\/xvQr5otwfD8\/s200\/01_0039.jpg\"\/\u003E\u003Cdiv class=\"reflection-over\"\u003E\u003C\/div\u003E\u003C\/div\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/651705729660651373\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/12\/imagenes-con-reflejos-usando-css.html#comment-form","title":"4 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/651705729660651373"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/651705729660651373"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/12\/imagenes-con-reflejos-usando-css.html","title":"Imágenes con reflejos usando CSS"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/lh6.googleusercontent.com\/-4TG4aZJCGQw\/TMSRXF5lkGI\/AAAAAAAAAJY\/4RqX7boOsws\/s72-c\/02_0020.jpg","height":"72","width":"72"},"thr$total":{"$t":"4"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-4338306907177781689"},"published":{"$t":"2011-12-14T00:06:00.000-03:00"},"updated":{"$t":"2017-10-29T00:47:06.294-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Transiciones y animaciones"},"content":{"type":"html","$t":"\u003Cdiv class=\"vagacode\"\u003E\u003Cdiv class=\"sue\"\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/N44cNUj.jpg\"\u003E\u003Cp\u003EUna animación con CSS es algo similar a una transisicón que se repite un número de veces y requiere de dos partes, establecer los intervalos y propiedades a modificar en @keyframes y la propiedad animation en cualquier etiqueta.\u003C\/p\u003E\u003C\/div\u003E\u003Cdiv class=\"gowi\"\u003E\u003Cspan\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/yrSqFzYl.png\"\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/animaciones-con-css\"\u003Eleer artículo actualizado\u003C\/a\u003E\u003C\/span\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/\"\u003E\u003Cimg class=\"wlogo\" src=\"http:\/\/i.imgur.com\/QZHLte7.png\"\u003E\u003C\/a\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/4338306907177781689\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/12\/transiciones-y-animaciones.html#comment-form","title":"12 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/4338306907177781689"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/4338306907177781689"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/12\/transiciones-y-animaciones.html","title":"Transiciones y animaciones"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"12"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-476734336313274252"},"published":{"$t":"2011-12-08T00:06:00.001-03:00"},"updated":{"$t":"2017-07-20T02:19:28.622-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Diferenciar los enlaces según el atributo target"},"content":{"type":"html","$t":"\u003Cdiv class=\"vagacode\"\u003E\u003Cdiv class=\"sue\"\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/5zjHj4u.jpg\"\u003E\u003Cp\u003EEn CSS, un selector es un vínculo entre el HTML y la hoja de estilo. Todas las etiquetas son selectores y cada uno de ellas posee un conjunto de propiedades generales y particulares. Pero como esto es insuficiente, también existen selectores especiales que nos permiten crear reglas muy específicas.\u003C\/p\u003E\u003C\/div\u003E\u003Cdiv class=\"gowi\"\u003E\u003Cspan\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/yrSqFzYl.png\"\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/selectores-en-css\"\u003Eleer artículo actualizado\u003C\/a\u003E\u003C\/span\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/\"\u003E\u003Cimg class=\"wlogo\" src=\"http:\/\/i.imgur.com\/QZHLte7.png\"\u003E\u003C\/a\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/476734336313274252\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/12\/diferenciar-los-enlaces-segun-el.html#comment-form","title":"11 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/476734336313274252"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/476734336313274252"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/12\/diferenciar-los-enlaces-segun-el.html","title":"Diferenciar los enlaces según el atributo target"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"11"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-8763660540475096342"},"published":{"$t":"2011-12-07T00:06:00.000-03:00"},"updated":{"$t":"2011-12-07T00:06:00.522-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger"},{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Numerando los comentarios con estilo"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003ELa numeración con estilo que publican en \u003Ca href=\"http:\/\/www.456bereastreet.com\/archive\/201105\/styling_ordered_list_numbers\/\" target=\"_blank\"\u003E456 Berea Street\u003C\/a\u003E es interesante y muy simple de aplicar. Utiliza \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2011\/06\/after-y-before.html\" target=\"_blank\"\u003Eel pseudo-elemento :before\u003C\/a\u003E y dos propiedades de las listas que usualmente no incluimos: \u003Cb\u003Ecounter-reset\u003C\/b\u003E y \u003Cb\u003Ecounter-increment\u003C\/b\u003E que nos permiten \u003Ca href=\"http:\/\/www.w3.org\/TR\/CSS2\/generate.html\" target=\"_blank\"\u003Egenerar contenido\u003C\/a\u003E de modo automático es decir, en este caso, numerar una lista.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nVamos al ejemplo que es una variante del mostrado en \u003Ca href=\"http:\/\/css-tricks.com\/15358-numbering-in-style\/\" target=\"_blank\"\u003ECSS Tricks\u003C\/a\u003E.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEl HTML:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;dl class=\"numeros\"\u0026gt;\n  \u0026lt;dt\u0026gt;Morbi porta facilisis leo, ut pretium elit gravida sed.\u0026lt;\/dt\u0026gt;\n    \u0026lt;dd\u0026gt;consectetur felis\u0026lt;\/dd\u0026gt;\n  \u0026lt;dt\u0026gt;Pellentesque malesuada sapien quis quam tincidunt.\u0026lt;\/dt\u0026gt;\n    \u0026lt;dd\u0026gt;fringilla sed risus\u0026lt;\/dd\u0026gt;\n  \u0026lt;dt\u0026gt;Donec scelerisque nisi ultricies felis varius luctus.\u0026lt;\/dt\u0026gt;\n    \u0026lt;dd\u0026gt;lectus ipsum\u0026lt;\/dd\u0026gt;\n\u0026lt;\/dl\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EY el CSS:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;style\u0026gt;\n  .numeros { \/* el contenedor es la etiqueta DL *\/\n    background-color: #000;\n    border: 1px solid #444;\n    counter-reset: nombre_contador; \/* ponemos el contador a cero *\/\n    margin: 0 auto;\n    padding: 20px 20px 0;\n    width: 500px;\n  }\n  .numeros dt {\n    font-size: 18px;\n    position: relative;\n  }\n  .numeros dt:before { \/* este es el número *\/\n    content: counter(nombre_contador, decimal);\n    counter-increment: nombre_contador;\n    left: 0;\n    position: absolute;\n    top: -8px;\n    \/* los detalles de la fuente son a gusto de cada uno *\/\n    background-color: #444;\n    border-radius: 4px;\n    color: #FFF;\n    font-family: Arial;\n    font-size: 48px;\n    padding: 0 10px;\n  }\n  .numeros dd {\n    color: #FFF;\n    margin: 0 0 30px;\n  }\n  .numeros dt, .numeros dd {\n    padding-left: 55px;\n}\n\u0026lt;\/style\u0026gt;\u003C\/pre\u003E\u003Cstyle\u003E.numeros {background-color: #000;border: 1px solid #444;counter-reset: nombre_contador;margin: 0 auto;padding: 20px 20px 0;width: 500px;} .numeros dt {font-size: 18px;position: relative;} .numeros dt:before {background-color: #444;border-radius: 4px;color: #FFF;content: counter(nombre_contador, decimal);counter-increment: nombre_contador;font-family: Arial;font-size: 48px;left: 0;padding: 0 10px;position: absolute;top: -8px;} .numeros dd {color: #FFF;margin: 0 0 30px;} .numeros dt, .numeros dd {padding-left: 55px;}\u003C\/style\u003E\u003Cbr \/\u003E\n\u003Cdl class=\"numeros\"\u003E\u003Cdt\u003EMorbi porta facilisis leo, ut pretium elit gravida sed.\u003C\/dt\u003E\n\u003Cdd\u003Econsectetur felis\u003C\/dd\u003E\n\u003Cdt\u003EPellentesque malesuada sapien quis quam tincidunt.\u003C\/dt\u003E\n\u003Cdd\u003Efringilla sed risus\u003C\/dd\u003E\n\u003Cdt\u003EDonec scelerisque nisi ultricies felis varius luctus.\u003C\/dt\u003E\n\u003Cdd\u003Electus ipsum\u003C\/dd\u003E\u003C\/dl\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003E¿Y para qué podría servir?\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nJustamente, elijo este demo porque usa las etiquetas DL DT y DD en lugar de las tradicionales etiquetas de lista (UL LI) ya que los comentarios de Blogger están armados con estas etiquetas así que, si quiseramos numerar los comentarios, podríamos utilizar este mismo esquema ya que todas estas propiedades funcionan en cualquier navegador, incluyendo IE8.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSi esa parte de nuestra plantilla tiene el código original y no hemos cambaido demasiadas cosas, bastaría agregar estas reglas antes de \u0026lt;\/b:skin\u0026gt;:\u003C\/div\u003E\u003Cpre\u003E#comments-block {\n  counter-reset: contadorcomentarios;\n}\n#comments-block dt {\n  position: relative;\n}\n#comments-block dt:before {\n  content: counter(contadorcomentarios, decimal);\n  counter-increment: contadorcomentarios;\n  position: absolute;\n  right: 0;\n  top: 0;\n   \/* las propiedades de la fuente del número *\/\n  color: #888;\n  font-family: Arial;\n  font-size: 30px;\n}\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EY si hemos \"manoseado\" mucho esa parte de la plantilla, no hay problema, podemos hacer lo mismo e ir viendo qué otras propiedades debemos agregar o cambiar; en mi caso, funcionó perfectamente sin otro agregado y ahora, está aplicado a los comentarios del blog así que la numeración no depende ya de \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2007\/10\/blogger-y-los-comentarios-1.html\" target=\"_blank\"\u003Eun script\u003C\/a\u003E sino que es puro CSS.\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/8763660540475096342\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/12\/numerando-los-comentarios-con-estilo.html#comment-form","title":"36 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/8763660540475096342"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/8763660540475096342"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/12\/numerando-los-comentarios-con-estilo.html","title":"Numerando los comentarios con estilo"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"36"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-1828665249990308541"},"published":{"$t":"2011-12-05T00:05:00.002-03:00"},"updated":{"$t":"2011-12-05T01:23:08.128-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Combinando gradientes"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EEl CSS3 nos permite \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2010\/02\/multiples-fondos-con-css3.html\" target=\"_blank\"\u003Eagregar varios fondos\u003C\/a\u003E en una misma etiqueta,; esto lo hacemos separándolos por comas; por ejemplo:\u003C\/div\u003E\u003Cpre\u003E.demo {\n  background-color: #FFF;\n  background-image: url(IMAGEN1),url(IMAGEN2);\n  background-repeat: no-repeat;\n  background-position: left top, right bottom;\n}\u003C\/pre\u003E\u003Cstyle\u003E.dgm1 {background-color: #FFF;background-image:url(http:\/\/1.bp.blogspot.com\/_hljKDuw-cxQ\/TP7_PPp5WtI\/AAAAAAAARSM\/WLGHzKEoMTo\/s00\/rels_blogger.jpg),url(http:\/\/lh5.ggpht.com\/_hljKDuw-cxQ\/S9IOEpgoZ_I\/AAAAAAAAPmM\/sX3vnTkZL8g\/blablabla1.gif);background-repeat:no-repeat;background-position:left top,right bottom;} .dgm2 {background-color: #FFF;background-image:url(http:\/\/lh5.ggpht.com\/_hljKDuw-cxQ\/S9IOEpgoZ_I\/AAAAAAAAPmM\/sX3vnTkZL8g\/blablabla1.gif),-moz-linear-gradient(#FFF, #000);background-image:url(http:\/\/lh5.ggpht.com\/_hljKDuw-cxQ\/S9IOEpgoZ_I\/AAAAAAAAPmM\/sX3vnTkZL8g\/blablabla1.gif),-webkit-linear-gradient(#FFF, #000);background-image:url(http:\/\/lh5.ggpht.com\/_hljKDuw-cxQ\/S9IOEpgoZ_I\/AAAAAAAAPmM\/sX3vnTkZL8g\/blablabla1.gif),-o-linear-gradient(#FFF, #000);background-image:url(http:\/\/lh5.ggpht.com\/_hljKDuw-cxQ\/S9IOEpgoZ_I\/AAAAAAAAPmM\/sX3vnTkZL8g\/blablabla1.gif),-ms-linear-gradient(#FFF, #000);background-repeat:no-repeat;background-position:right bottom,left top;} .dgm3 {background-image:-moz-linear-gradient(#000,#ABC,transparent), -moz-linear-gradient(right,#880, #234);background-image:-webkit-linear-gradient(#000,#ABC,transparent), -webkit-linear-gradient(right,#880, #234);background-image:-o-linear-gradient(#000,#ABC,transparent), -o-linear-gradient(right,#880, #234);background-image:-ms-linear-gradient(#000,#ABC,transparent), -ms-linear-gradient(right,#880, #234);} .dgm4 {background-image:-moz-linear-gradient(#000000, #CBA, transparent), -moz-radial-gradient(#FF0, #F00,transparent);background-image:-webkit-linear-gradient(#000000, #CBA, transparent), -webkit-radial-gradient(#FF0, #F00,transparent);background-image:-o-linear-gradient(#000000, #CBA, transparent), -o-radial-gradient(#FF0, #F00,transparent);background-image:-ms-linear-gradient(#000000, #CBA, transparent), -ms-radial-gradient(#FF0, #F00,transparent);} .dgm5 {background-image:-moz-linear-gradient(transparent, #000000, #ACA), -moz-linear-gradient(right, #DFD, #080);background-image:-webkit-linear-gradient(transparent, #000000, #ACA), -webkit-linear-gradient(right, #DFD, #080);background-image:-o-linear-gradient(transparent, #000000, #ACA), -o-linear-gradient(right, #DFD, #080);background-image:-ms-linear-gradient(transparent, #000000, #ACA), -ms-linear-gradient(right, #DFD, #080);} \u003C\/style\u003E\u003Cdiv class=\"dgm1\" style=\"border: 1px solid #888;height: 190px;margin: 0 auto;width: 350px;\"\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EComo las gradientes son fondos, nada impide que las combinemos con otras imágenes:\u003C\/div\u003E\u003Cpre\u003E.demo {\n  background-color: #FFF;\n  background-image: url(IMAGEN), -moz-linear-gradient(#FFF, #000);\n  background-image: url(IMAGEN), -webkit-linear-gradient(#FFF, #000);\n  background-image: url(IMAGEN), -o-linear-gradient(#FFF, #000);\n  background-image: url(IMAGEN), -ms-linear-gradient(#FFF, #000);\n  background-repeat: no-repeat;\n  background-position: right bottom, left top;\n}\u003C\/pre\u003E\u003Cdiv class=\"dgm2\" style=\"border: 1px solid #888;height: 190px;margin: 0 auto;width: 350px;\"\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EDel mismo modo, podemos combinar varios tipos de gradientes, separándolas con comas:\u003C\/div\u003E\u003Cpre\u003Ebackground-image: linear-gradient(#000,#ABC,transparent), linear-gradient(right,#880, #234);\n\nbackground-image: linear-gradient(#000000, #CBA, transparent), radial-gradient(#FF0, #F00,transparent);\n\nbackground-image: linear-gradient(transparent, #000000, #ACA), linear-gradient(right, #DFD, #080)\u003C\/pre\u003E\u003Cdiv class=\"dgm3\" style=\"display:inline-block;height: 150px;margin: 0 5px;width: 200px;\"\u003E\u003C\/div\u003E\u003Cdiv class=\"dgm4\" style=\"display:inline-block;height: 150px;margin: 0 5px;width: 200px;\"\u003E\u003C\/div\u003E\u003Cdiv class=\"dgm5\" style=\"display:inline-block;height: 150px;margin: 0 5px;width: 200px;\"\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/1828665249990308541\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/12\/combinando-gradientes.html#comment-form","title":"8 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/1828665249990308541"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/1828665249990308541"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/12\/combinando-gradientes.html","title":"Combinando gradientes"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"8"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-7029326178632728158"},"published":{"$t":"2011-11-28T00:02:00.000-03:00"},"updated":{"$t":"2017-05-26T01:42:10.977-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Coloreando imágenes"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: left;\"\u003E\"Entintar\" una imagen, tiñéndola con un color es una idea de \u003Ca href=\"http:\/\/www.impressivewebs.com\/image-tint-blend-css\/\" target=\"_blank\"\u003EImpressive Webs\u003C\/a\u003E y en su artículo, muestran varios métodos pero de tos ellos, me han gustado los dos que sólo requieren de CSS.\u003C\/div\u003E\u003Cdiv class=\"vagacode\"\u003E\u003Cdiv class=\"sue\"\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/86oWGUf.png\"\u003E\u003Cp\u003EOpacidad, sombras, contraste, brillo. Muchos de esos efectos que podemos aplicar a las imágenes en cualquier software, también son propiedades que el CSS3 nos permite usar con cualquier elemento HTML de modo muy sencillo y en cualquier navegador de escritorio o dispositivo móvil.\u003C\/p\u003E\u003C\/div\u003E\u003Cdiv class=\"gowi\"\u003E\u003Cspan\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/hZcjmywl.png\"\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/filtros-con-css\"\u003Eleer artículo actualizado\u003C\/a\u003E\u003C\/span\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/\"\u003E\u003Cimg class=\"wlogo\" src=\"http:\/\/i.imgur.com\/QZHLte7.png\"\u003E\u003C\/a\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/7029326178632728158\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/11\/coloreando-imagenes.html#comment-form","title":"5 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/7029326178632728158"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/7029326178632728158"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/11\/coloreando-imagenes.html","title":"Coloreando imágenes"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"5"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-629280979307742401"},"published":{"$t":"2011-11-24T00:07:00.002-03:00"},"updated":{"$t":"2011-11-24T00:43:01.649-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Gradientes radiales simples"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EAsí como hay gradientes lineales, también las hay de tipo radial donde el degradado se genera de modo circular.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSi nos limitamos a lo simple, la sintaxis de ambas no difiere demasiado, por ejemplo:\u003C\/div\u003E\u003Cpre\u003E.gradiente-lineal {\n  background: -moz-linear-gradient(#FFF, #000);\n  background: -webkit-linear-gradient(#FFF, #000);\n  background: -o-linear-gradient(#FFF, #000);\n  background: -ms-linear-gradient(#FFF, #000);\n}\n\n.gradiente-radial {\n  background: -moz-radial-gradient(#FFF, #000);\n  background: -webkit-radial-gradient(#FFF, #000);\n  background: -o-radial-gradient(#FFF, #000);\n  background: -ms-radial-gradient(#FFF, #000);\n}\u003C\/pre\u003E\u003Cstyle\u003E.dgr1 {background: -moz-linear-gradient(#FFF, #000);background: -webkit-linear-gradient(#FFF, #000);background: -o-linear-gradient(#FFF, #000);background: -ms-linear-gradient(#FFF, #000);} .dgr2 {background: -moz-radial-gradient(#FFF, #000);background: -webkit-radial-gradient(#FFF, #000);background: -o-radial-gradient(#FFF, #000);background: -ms-radial-gradient(#FFF, #000);} .dgr3 {background: -moz-radial-gradient(center top, #FFF, #000);background: -webkit-radial-gradient(center top, #FFF, #000);background: -o-radial-gradient(center top, #FFF, #000);background: -ms-radial-gradient(center top, #FFF, #000);} .dgr3456 {border: 2px solid #FFF;display: inline-block;height: 100px;margin: 0 2px;width: 150px;} .dgr4 {background: -moz-radial-gradient(center bottom, #FFF, #000);background: -webkit-radial-gradient(center bottom, #FFF, #000);background: -o-radial-gradient(center bottom, #FFF, #000);background: -ms-radial-gradient(center bottom, #FFF, #000);} .dgr5 {background: -moz-radial-gradient(left center, #FFF, #000);background: -webkit-radial-gradient(left center, #FFF, #000);background: -o-radial-gradient(left center, #FFF, #000);background: -ms-radial-gradient(left center, #FFF, #000);} .dgr6 {background: -moz-radial-gradient(right center, #FFF, #000);background: -webkit-radial-gradient(right center, #FFF, #000);background: -o-radial-gradient(right center, #FFF, #000);background: -ms-radial-gradient(right center, #FFF, #000);} .dgr7 {background: -moz-radial-gradient(ellipse closest-side,#FFF, #000);background: -webkit-radial-gradient(ellipse closest-side,#FFF, #000);background: -o-radial-gradient(ellipse closest-side,#FFF, #000);background: -ms-radial-gradient(ellipse closest-side,#FFF, #000);} .dgr8 {background: -moz-radial-gradient(ellipse closest-corner,#FFF, #000);background: -webkit-radial-gradient(ellipse closest-corner,#FFF, #000);background: -o-radial-gradient(ellipse closest-corner,#FFF, #000);background: -ms-radial-gradient(ellipse closest-corner,#FFF, #000);} .dgr9 {background: -moz-radial-gradient(ellipse farthest-side,#FFF, #000);background: -webkit-radial-gradient(ellipse farthest-side,#FFF, #000);background: -o-radial-gradient(ellipse farthest-side,#FFF, #000);background: -ms-radial-gradient(ellipse farthest-side,#FFF, #000);} .dgr10 {background: -moz-radial-gradient(ellipse farthest-corner,#FFF, #000);background: -webkit-radial-gradient(ellipse farthest-corner,#FFF, #000);background: -o-radial-gradient(ellipse farthest-corner,#FFF, #000);background: -ms-radial-gradient(ellipse farthest-corner,#FFF, #000);} .dgr11 {background: -moz-radial-gradient(circle closest-side,#FFF, #000);background: -webkit-radial-gradient(circle closest-side,#FFF, #000);background: -o-radial-gradient(circle closest-side,#FFF, #000);background: -ms-radial-gradient(circle closest-side,#FFF, #000);} .dgr12 {background: -moz-radial-gradient(circle closest-corner,#FFF, #000);background: -webkit-radial-gradient(circle closest-corner,#FFF, #000);background: -o-radial-gradient(circle closest-corner,#FFF, #000);background: -ms-radial-gradient(circle closest-corner,#FFF, #000);} .dgr13 {background: -moz-radial-gradient(circle farthest-side,#FFF, #000);background: -webkit-radial-gradient(circle farthest-side,#FFF, #000);background: -o-radial-gradient(circle farthest-side,#FFF, #000);background: -ms-radial-gradient(circle farthest-side,#FFF, #000);} .dgr14 {background: -moz-radial-gradient(circle farthest-corner,#FFF, #000);background: -webkit-radial-gradient(circle farthest-corner,#FFF, #000);background: -o-radial-gradient(circle farthest-corner,#FFF, #000);background: -ms-radial-gradient(circle farthest-corner,#FFF, #000);} .dgr15 {background: -moz-radial-gradient(#FFF, #FF0, #000);background: -webkit-radial-gradient(#FFF, #FF0, #000);background: -o-radial-gradient(#FFF, #FF0, #000);background: -ms-radial-gradient(#FFF, #FF0, #000);} .dgr16 {background: -moz-radial-gradient(#FFF, #F00, #FF0, #000);background: -webkit-radial-gradient(#FFF, #F00, #FF0, #000);background: -o-radial-gradient(#FFF, #F00, #FF0, #000);background: -ms-radial-gradient(#FFF, #F00, #FF0, #000);} .dgr17 {background: -moz-radial-gradient(#FFF, #F00, #FF0, #0F0, #000);background: -webkit-radial-gradient(#FFF, #F00, #FF0, #0F0, #000);background: -o-radial-gradient(#FFF, #F00, #FF0, #0F0, #000);background: -ms-radial-gradient(#FFF, #F00, #FF0, #0F0, #000);} \u003C\/style\u003E\u003Cdiv class=\"dgr1\" style=\"width:250px;height:150px;display:inline-block;;margin:0 10px 0 60px\"\u003E\u003C\/div\u003E\u003Cdiv class=\"dgr2\" style=\"width:250px;height:150px;display:inline-block;\"\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EAunque en todos los casos debemos usar el prefijo necesario para que los distintos navegadores reconozcan la propiedad, en un esquema elemental, basta cambiar linear-gradient por radial-gradient indicando los colores inicial (comenzará el el centro ) y final.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSi queremos personalizarlas aún más, la sintaxis tampoco varía:\u003C\/div\u003E\u003Cpre\u003Eradial-gradient( posición, color-inicial, color-final )\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003Edonde la posición indica dónde comenzará la gradiente (top, right, bottom, left, center):\u003C\/div\u003E\u003Cpre\u003Eradial-gradient(center top, #FFF, #000); o radial-gradient(top, #FFF, #000);\nradial-gradient(center bottom, #FFF, #000); o radial-gradient(bottom, #FFF, #000);\nradial-gradient(left center, #FFF, #000); o radial-gradient(left , #FFF, #000);\nradial-gradient(right center, #FFF, #000); o radial-gradient(right, #FFF, #000);\u003C\/pre\u003E\u003Cdiv class=\"dgr3 dgr3456\"\u003E\u003C\/div\u003E\u003Cdiv class=\"dgr4 dgr3456\"\u003E\u003C\/div\u003E\u003Cdiv class=\"dgr5 dgr3456\"\u003E\u003C\/div\u003E\u003Cdiv class=\"dgr6 dgr3456\"\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EClaro que esto se complica un poco más ya que este tipo de gradientes posee otro parámetro opcional que podemos utilizar y que consta de dos palabras:\u003C\/div\u003E\u003Cpre\u003Eradial-gradient( posicion, shape size, color-inicial, color-final )\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003E\u003Cspan style=\"font-weight: bold;\"\u003Eshape \u003C\/span\u003Ees \"la forma\" que adoptará y puede ser circle o ellipse\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003Esize \u003C\/span\u003Eindica la forma en que se expandirá y terminará y puede ser closest-side (o contain), closest-corner, farthest-side, farthest-corner (o cover)\u003C\/div\u003E\u003Cpre\u003Eradial-gradient(circle closest-side, #FFF, #000)\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003Ey todo puede combinarse:\u003C\/div\u003E\u003Cpre\u003Eradial-gradient(left top,circle closest-side, #FFF, #000)\u003C\/pre\u003E\u003Cdiv class=\"dgr7 dgr3456\"\u003E\u003C\/div\u003E\u003Cdiv class=\"dgr8 dgr3456\"\u003E\u003C\/div\u003E\u003Cdiv class=\"dgr9 dgr3456\"\u003E\u003C\/div\u003E\u003Cdiv class=\"dgr10 dgr3456\"\u003E\u003C\/div\u003E\u003Cdiv class=\"dgr11 dgr3456\"\u003E\u003C\/div\u003E\u003Cdiv class=\"dgr12 dgr3456\"\u003E\u003C\/div\u003E\u003Cdiv class=\"dgr13 dgr3456\"\u003E\u003C\/div\u003E\u003Cdiv class=\"dgr14 dgr3456\"\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EAl igual que la lineales, si queremos usar varios colores, los vamos agregando uno tras otro, separados por comas:\u003C\/div\u003E\u003Cpre\u003Eradial-gradient(#FFF, #FF0, #000)\nradial-gradient(#FFF, #F00, #FF0, #000)\nradial-gradient(#FFF, #F00, #FF0, #0F0, #000)\u003C\/pre\u003E\u003Cdiv class=\"dgr15\" style=\"width:200px;height:200px;display:inline-block;\"\u003E\u003C\/div\u003E\u003Cdiv class=\"dgr16\" style=\"width:200px;height:150px;display:inline-block;\"\u003E\u003C\/div\u003E\u003Cdiv class=\"dgr17\" style=\"width:200px;height:100px;display:inline-block;\"\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/629280979307742401\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/11\/gradientes-radiales-simples.html#comment-form","title":"3 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/629280979307742401"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/629280979307742401"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/11\/gradientes-radiales-simples.html","title":"Gradientes radiales simples"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"3"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-8330384775365254634"},"published":{"$t":"2011-11-23T00:04:00.002-03:00"},"updated":{"$t":"2017-07-16T01:39:56.106-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"background: Los fondos y lo nuevo"},"content":{"type":"html","$t":"\u003Cdiv class=\"vagacode\"\u003E\u003Cdiv class=\"sue\"\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/aURb3wS.jpg\"\u003E\u003Cp\u003EEstablecer el fondo de una etiqueta cualquiera es algo bastante común y no debería causar problemas si conocemos a forma en que funciona esta propiedad que, genéricamente, se define con background, con ella, podemos definir un color o una imagen como fondo de cualquier elemento.\u003C\/p\u003E\u003C\/div\u003E\u003Cdiv class=\"gowi\"\u003E\u003Cspan\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/yrSqFzYl.png\"\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/background-los-fondos-lo-standard-y-lo-nuevo\"\u003Eleer artículo actualizado\u003C\/a\u003E\u003C\/span\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/\"\u003E\u003Cimg class=\"wlogo\" src=\"http:\/\/i.imgur.com\/QZHLte7.png\"\u003E\u003C\/a\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/8330384775365254634\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/11\/background-los-fondos-y-lo-nuevo.html#comment-form","title":"4 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/8330384775365254634"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/8330384775365254634"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/11\/background-los-fondos-y-lo-nuevo.html","title":"background: Los fondos y lo nuevo"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"4"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-4209627614905397234"},"published":{"$t":"2011-11-21T00:05:00.003-03:00"},"updated":{"$t":"2011-11-21T00:42:47.363-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Gradientes lineales simples"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003ECrear gradientes con CSS es uno de los métodos más sencillos para generar fondos que pueden ser aplicados a casi cualquier etiqueta HTML y si bien es algo que no está implementado en las versiones viejas de Internet Explorer, llegado el caso, podemos simularlas mediante filtros o ignorar ese navegador y establecer reglas de estilo diferenciadas.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nPor ahora, los navegadores que aceptan esta propiedad, requieren que se utilicen prefijos distintos para cada uno de ellos así que deberemos usarlos todos para lograr el máximo de compatibilidad:\u003C\/div\u003E\u003Cpre\u003E-moz-linear-gradient( parámetros ) \/* en Firefox *\/\n-webkit-linear-gradient( parámetros ); \/* en Chrome\/Safari *\/\n-o-linear-gradient( parámetros ); \/* en Opera 11 o superior *\/\n-ms-linear-gradient( parámetros ); \/* en Internet Explorer 10 *\/\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ELo básico es entender que una gradiente no es otra cosa que un degradado de colores que se aplica a un fondo así que, lo más simple es crear una de dos colores y eso lo indicamos colocando como parámetros, esos dos colores, en formato hexadecimal, rgb(), rgba() o hsl():\u003C\/div\u003E\u003Cpre\u003E.ejemplo {\n  background: -moz-linear-gradient(#FFF, #000);\n  background: -ms-linear-gradient(#FFF, #000);\n  background: -o-linear-gradient(#FFF, #000);\n  background: -webkit-linear-gradient(#FFF, #000);\n}\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EAsí, sin más datos, creamos una gradiente que va del blanco al negro y que llenará el espacio al que lo aplicamos, de modo proporcional:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E.dg1 {background: -moz-linear-gradient(#FFF, #000);background: -webkit-linear-gradient(#FFF, #000);background: -o-linear-gradient(#FFF, #000);background: -ms-linear-gradient(#FFF, #000);} .dg9 {background: -moz-linear-gradient(45deg, #FFF, #000);background: -webkit-linear-gradient(45deg, #FFF, #000);background: -o-linear-gradient(45deg, #FFF, #000);background: -ms-linear-gradient(45deg, #FFF, #000);} .dg10 {background: -moz-linear-gradient(215deg, #FFF, #000);background: -webkit-linear-gradient(215deg, #FFF, #000);background: -o-linear-gradient(215deg, #FFF, #000);background: -ms-linear-gradient(215deg, #FFF, #000);} .dg2 {background: -moz-linear-gradient(#FFF, #FF0, #000);background: -webkit-linear-gradient(#FFF, #FF0, #000);background: -o-linear-gradient(#FFF, #FF0, #000);background: -ms-linear-gradient(#FFF, #FF0, #000);} .dg3 {background: -moz-linear-gradient(#FFF, #F00, #FF0, #000);background: -webkit-linear-gradient(#FFF, #F00, #FF0, #000);background: -o-linear-gradient(#FFF, #F00, #FF0, #000);background: -ms-linear-gradient(#FFF, #F00, #FF0, #000);} .dg4 {background: -moz-linear-gradient(#FFF, #F00, #FF0, #0F0, #000);background: -webkit-linear-gradient(#FFF, #F00, #FF0, #0F0, #000);background: -o-linear-gradient(#FFF, #F00, #FF0, #0F0, #000);background: -ms-linear-gradient(#FFF, #F00, #FF0, #0F0, #000);} .dg5678 {display: inline-block;border:2px solid #FFF;margin:0 2px;width:150px;height:100px;} .dg5 {background: -moz-linear-gradient(top, #FFF, #000);background: -webkit-linear-gradient(top, #FFF, #000);background: -o-linear-gradient(top, #FFF, #000);background: -ms-linear-gradient(top, #FFF, #000);} .dg6 {background: -moz-linear-gradient(bottom, #FFF, #000);background: -webkit-linear-gradient(bottom, #FFF, #000);background: -o-linear-gradient(bottom, #FFF, #000);background: -ms-linear-gradient(bottom, #FFF, #000);} .dg7 {background: -moz-linear-gradient(left, #FFF, #000);background: -webkit-linear-gradient(left, #FFF, #000);background: -o-linear-gradient(left, #FFF, #000);background: -ms-linear-gradient(left, #FFF, #000);} .dg8 {background: -moz-linear-gradient(right, #FFF, #000);background: -webkit-linear-gradient(right, #FFF, #000);background: -o-linear-gradient(right, #FFF, #000);background: -ms-linear-gradient(right, #FFF, #000);} .dg12 {background-image: -moz-linear-gradient(#000, rgba(200,150,200,.5), #000);background-image: -webkit-linear-gradient(#000, rgba(200,150,200,.5), #000);background-image: -o-linear-gradient(#000, rgba(200,150,200,.5), #000);background-image: -ms-linear-gradient(#000, rgba(200,150,200,.5), #000);}\u003C\/style\u003E\u003Cdiv class=\"dg1\" style=\"width:200px;height:200px;display:inline-block;\"\u003E\u003C\/div\u003E\u003Cdiv class=\"dg1\" style=\"width:200px;height:150px;display:inline-block;\"\u003E\u003C\/div\u003E\u003Cdiv class=\"dg1\" style=\"width:200px;height:100px;display:inline-block;\"\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003ETal como está, el degradado será vertical pero la dirección es algo que podemos definir: en general, sería así:\u003C\/div\u003E\u003Cpre\u003Elinear-gradient( posicion, color-inicial, color-final )\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ELa posición, indica dónde comenzará la gradiente y requiere de dos palabras o valores al igual que la propiedad background-position (top, right, bottom, left, center); si sólo ponemos una, se asume que la otra es center así que:\u003C\/div\u003E\u003Cpre\u003Elinear-gradient(center top, #FFF, #000); o linear-gradient(top, #FFF, #000);\nlinear-gradient(center bottom, #FFF, #000); o linear-gradient(bottom, #FFF, #000);\nlinear-gradient(left center, #FFF, #000); o linear-gradient(left , #FFF, #000);\nlinear-gradient(right center, #FFF, #000); o linear-gradient(right, #FFF, #000);\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003Esi queremos que los colores inviertan su orden reemplazamos top por bottom; si queremos que sea horizontal (de izquierda a derecha) usamos left y si usamos right:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"dg5678 dg5\"\u003E\u003C\/div\u003E\u003Cdiv class=\"dg5678 dg6\"\u003E\u003C\/div\u003E\u003Cdiv class=\"dg5678 dg7\"\u003E\u003C\/div\u003E\u003Cdiv class=\"dg5678 dg8\"\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EAdmite otros valores que no sean palabras, también pueden usarse pixeles, porcentajes o ángulos, tanto positivos como negativos y combinarse de cualquier forma pero esto, en Chrome\/Safari, se complica bastante ya que, como siempre, los navegadores hacen lo que se les da la gana (\u003Ca target=\"_blank\" href=\"http:\/\/developer.apple.com\/library\/safari\/#documentation\/InternetWeb\"\u003Emás información\u003C\/a\u003E) así que esto n oserá válido en Chrome:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"dg9\" style=\"width:250px;height:200px;display:inline-block;border:2px solid #FFF;margin:0 10px;\"\u003E\u003C\/div\u003E\u003Cdiv class=\"dg10\" style=\"width:250px;height:200px;display:inline-block;border:2px solid #FFF;margin:0 10px;\"\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cpre\u003Elinear-gradient(10px 90%, #FFF, #000);\nlinear-gradient(20px -45deg, #FFF, #000);\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003Eaunque podemos usar ángulos en cualquiera de ellos:\u003C\/div\u003E\u003Cpre\u003Elinear-gradient(45deg, #FFF, #000);\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EBastaría seguir agregando colores separados por comas para que la gradiente se hiciera cada vez más complicada:\u003C\/div\u003E\u003Cpre\u003Elinear-gradient(#FFF, #FF0, #000)\nlinear-gradient(#FFF, #F00, #FF0, #000)\nlinear-gradient(#FFF, #F00, #FF0, #0F0, #000)\u003C\/pre\u003E\u003Cdiv class=\"dg2\" style=\"width:200px;height:200px;display:inline-block;\"\u003E\u003C\/div\u003E\u003Cdiv class=\"dg3\" style=\"width:200px;height:150px;display:inline-block;\"\u003E\u003C\/div\u003E\u003Cdiv class=\"dg4\" style=\"width:200px;height:100px;display:inline-block;\"\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003ELos colores se muestran ordenados y se distribuyen proporcionalmente pero, basta agregarles un valor separado por un espacio para indicar la posición de cada uno de ellos:\u003C\/div\u003E\u003Cpre\u003Elinear-gradient(#FFF, #FF0 20%, #000)\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EHasta acá, la gradiente la aplicamos a la propiedad background pero podríamos colocarla en al propiedad background-image y, de ese modo agregar colores de fondo, algo que tiene sentido si se utilizan golores en forma rgba() que nos dan al posibilidad de crear fondos con determinada opacidad:\u003C\/div\u003E\u003Cpre\u003Ebackground-color; red;\nbackground-image: -XXX-linear-gradient(#000, rgba(200,150,200,.5), #000);\u003C\/pre\u003E\u003Cdiv class=\"dg12\" style=\"width:200px;height:100px;display:inline-block;background-color:#101921;\"\u003E\u003C\/div\u003E\u003Cdiv class=\"dg12\" style=\"width:200px;height:100px;display:inline-block;background-color:yellow;\"\u003E\u003C\/div\u003E\u003Cdiv class=\"dg12\" style=\"width:200px;height:100px;display:inline-block;background-color:red;\"\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/4209627614905397234\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/11\/gradientes-lineales-simples.html#comment-form","title":"11 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/4209627614905397234"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/4209627614905397234"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/11\/gradientes-lineales-simples.html","title":"Gradientes lineales simples"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"11"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-8897093671039561589"},"published":{"$t":"2011-11-16T00:03:00.002-03:00"},"updated":{"$t":"2017-05-22T00:37:34.657-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Usando first-child y last-child"},"content":{"type":"html","$t":"\u003Cdiv class=\"vagacode\"\u003E\u003Cdiv class=\"sue\"\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/uWW4T4Al.jpg\"\u003E\u003Cp\u003ELas pseudo-clases :first-xxxx seleccionan el primer elemento que cumple cierta condición; por el contrario, las pseudo-clases :last-xxxx hacen lo mismo pero contando de atrás hacia adelante.\u003C\/p\u003E\u003C\/div\u003E\u003Cdiv class=\"gowi\"\u003E\u003Cspan\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/hZcjmywl.png\"\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/los-hijos-first-last-only\"\u003Eleer artículo actualizado\u003C\/a\u003E\u003C\/span\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/\"\u003E\u003Cimg class=\"wlogo\" src=\"http:\/\/i.imgur.com\/QZHLte7.png\"\u003E\u003C\/a\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/8897093671039561589\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/11\/usando-first-child-y-last-child.html#comment-form","title":"4 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/8897093671039561589"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/8897093671039561589"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/11\/usando-first-child-y-last-child.html","title":"Usando first-child y last-child"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"4"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-5030044933265776401"},"published":{"$t":"2011-11-14T00:04:00.001-03:00"},"updated":{"$t":"2017-07-16T01:40:06.095-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"background: Los fondos y lo standard"},"content":{"type":"html","$t":"\u003Cdiv class=\"vagacode\"\u003E\u003Cdiv class=\"sue\"\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/aURb3wS.jpg\"\u003E\u003Cp\u003EEstablecer el fondo de una etiqueta cualquiera es algo bastante común y no debería causar problemas si conocemos a forma en que funciona esta propiedad que, genéricamente, se define con background, con ella, podemos definir un color o una imagen como fondo de cualquier elemento.\u003C\/p\u003E\u003C\/div\u003E\u003Cdiv class=\"gowi\"\u003E\u003Cspan\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/yrSqFzYl.png\"\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/background-los-fondos-lo-standard-y-lo-nuevo\"\u003Eleer artículo actualizado\u003C\/a\u003E\u003C\/span\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/\"\u003E\u003Cimg class=\"wlogo\" src=\"http:\/\/i.imgur.com\/QZHLte7.png\"\u003E\u003C\/a\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/5030044933265776401\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/11\/background-los-fondos-y-lo-standard.html#comment-form","title":"8 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/5030044933265776401"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/5030044933265776401"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/11\/background-los-fondos-y-lo-standard.html","title":"background: Los fondos y lo standard"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"8"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-7366647230768496320"},"published":{"$t":"2011-11-07T00:05:00.002-03:00"},"updated":{"$t":"2011-11-08T02:43:04.576-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Otro ejemplo de animaciones con CSS"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003ECrear animaciones con CSS es interesante pero engorroso; además, para que funcionen, hay que agregar los prefijos de cada navegador lo que hace que el código a escribir sea largo. De todos modos, aunque sea experimental, es algo para probar y ver qué pasa. Para más información: \u003Ca rel=\"nofollow\" href=\"https:\/\/developer.mozilla.org\/en\/CSS\/CSS_animations\" target=\"_blank\"\u003EMozilla\u003C\/a\u003E | \u003Ca rel=\"nofollow\" href=\"http:\/\/developer.apple.com\/library\/safari\/#documentation\/InternetWeb\/Conceptual\/SafariVisualEffectsProgGuide\/Animations\/Animations.html\" target=\"_blank\"\u003EChrome\/Safari\u003C\/a\u003E | \u003Ca rel=\"nofollow\" href=\"http:\/\/dev.w3.org\/csswg\/css3-animations\/\" target=\"_blank\"\u003Ew3.org\u003C\/a\u003E.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEn este caso, se trata de un ejemplo creado por \u003Ca href=\"http:\/\/davidwalsh.name\/photo-stack\" target=\"_blank\"\u003EDavid Walsh\u003C\/a\u003E, un grupo de imagenes superpuestas que se expanden cuando ponemos el puntero del ratón encima de ellas.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEl HTML es muy simple:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;a href=\"javascript:void(0);\" class=\"album\"\u0026gt;\n  \u0026lt;img src=\"URLIMAGEN_1\" class=\"photo1\" \/\u0026gt;\n  \u0026lt;img src=\"URLIMAGEN_2\" class=\"photo2\" \/\u0026gt;\n  \u0026lt;img src=\"URLIMAGEN_3\" class=\"photo3\" \/\u0026gt;\n\u0026lt;\/a\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ELas reglas de estilo básicas también:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;style\u0026gt;\n  .album {\n    display:block;\n    position: relative;\n    vertical-align: top;\n    width: 250px;\n    z-index: 5;\n  }\n  .album img {\n    border: 10px solid #ABC;\n    display: block;\n    height: 250px;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 250px;\n  }\n  \/* un agregado para que las imágenes se ponga en primer plano *\/\n  .album img:hover {\n    z-index: 1000;\n  }\n\u0026lt;\/style\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EY por último, la animación en si misma:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"linkContraido\" onclick=\"SINO('albumDEMO');\"\u003E\u003C\/div\u003E\u003Cpre id=\"albumDEMO\" class=\"elementoOculto\"\u003E\u0026lt;style\u0026gt;\n  @-moz-keyframes image1 {\n    0% {-moz-transform: rotate(0deg) translate(0, 0) scale(1.0);}\n    100% {-moz-transform: rotate(-6deg) translate(-130px, -3px) scale(1.1);}\n  }\n  @-webkit-keyframes image1 {\n    0% {-webkit-transform: rotate(0deg) translate(0, 0) scale(1.0);}\n    100% {-webkit-transform: rotate(-6deg) translate(-130px, -3px) scale(1.1);}\n  }\n\n  @-moz-keyframes image2 {\n    0% {-moz-transform: rotate(0deg) translate(0, 0) scale(1.0);}\n    100% {-moz-transform: rotate(0deg) translate(0, -3px) scale(1.1);}\n  }\n  @-webkit-keyframes image2 {\n    0% {-webkit-transform: rotate(0deg) translate(0, 0) scale(1.0);}\n    100% {-webkit-transform: rotate(0deg) translate(0, -3px) scale(1.1);}\n  }\n\n  @-moz-keyframes image3 {\n    0% {-moz-transform: rotate(0deg) translate(0, 0) scale(1.0);}\n    100% {-moz-transform: rotate(6deg) translate(130px, -3px) scale(1.1);}\n  }\n  @-webkit-keyframes image3 {\n    0% {-webkit-transform: rotate(0deg) translate(0, 0) scale(1.0);}\n    100% {-webkit-transform: rotate(6deg) translate(130px, -3px) scale(1.1);}\n  }\n\n  .album:hover .photo1, .album:focus .photo1 {\n    -moz-animation-name: image1;\n    -moz-animation-duration: .2s;\n    -moz-transform: rotate(-6deg) translate(-130px, -3px) scale(1.1);\n    -webkit-animation-name: image1;\n    -webkit-animation-duration: .2s;\n    -webkit-transform: rotate(-6deg) translate(-130px, -3px) scale(1.1);\n  }\n  .album:hover .photo2, .album:focus .photo2 {\n    -moz-animation-name: image2;\n    -moz-animation-duration: .2s;\n    -moz-transform: rotate(0deg) translate(0, -3px) scale(1.1);\n    -webkit-animation-name: image2;\n    -webkit-animation-duration: .2s;\n    -webkit-transform: rotate(0deg) translate(0, -3px) scale(1.1);\n  }\n  .album:hover .photo3, .album:focus .photo3 {\n    -moz-animation-name: image3;\n    -moz-animation-duration: .2s;\n   -moz-transform: rotate(6deg) translate(130px, -3px) scale(1.1);\n    -webkit-animation-name: image3;\n    -webkit-animation-duration: .2s;\n    -webkit-transform: rotate(6deg) translate(130px, -3px) scale(1.1);\n  }\n\u0026lt;\/style\u0026gt;\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E.album {position: relative;z-index: 5;width: 250px;vertical-align: top;display:block;} .album img {border: 10px solid #ABC;display: block;height: 250px;left: 0;position: absolute;top: 0;width: 250px;} .album img:hover {z-index: 1000;}\n@-moz-keyframes image1 { 0% {-moz-transform: rotate(0deg) translate(0, 0) scale(1.0);} 100% {-moz-transform: rotate(-6deg) translate(-130px, -3px) scale(1.1);} } @-webkit-keyframes image1 { 0% {-webkit-transform: rotate(0deg) translate(0, 0) scale(1.0);} 100% {-webkit-transform: rotate(-6deg) translate(-130px, -3px) scale(1.1);} } @-moz-keyframes image2 { 0% {-moz-transform: rotate(0deg) translate(0, 0) scale(1.0);} 100% {-moz-transform: rotate(0deg) translate(0, -3px) scale(1.1);} } @-webkit-keyframes image2 { 0% {-webkit-transform: rotate(0deg) translate(0, 0) scale(1.0);} 100% {-webkit-transform: rotate(0deg) translate(0, -3px) scale(1.1);} } @-moz-keyframes image3 { 0% {-moz-transform: rotate(0deg) translate(0, 0) scale(1.0);} 100% {-moz-transform: rotate(6deg) translate(130px, -3px) scale(1.1);} } @-webkit-keyframes image3 { 0% {-webkit-transform: rotate(0deg) translate(0, 0) scale(1.0);} 100% {-webkit-transform: rotate(6deg) translate(130px, -3px) scale(1.1);} } .album:hover .photo1, .album:focus .photo1 {-moz-animation-name: image1;-moz-animation-duration: .2s;-moz-transform: rotate(-6deg) translate(-130px, -3px) scale(1.1);-webkit-animation-name: image1;-webkit-animation-duration: .2s;-webkit-transform: rotate(-6deg) translate(-130px, -3px) scale(1.1);} .album:hover .photo2, .album:focus .photo2 {-moz-animation-name: image2;-moz-animation-duration: .2s;-moz-transform: rotate(0deg) translate(0, -3px) scale(1.1);-webkit-animation-name: image2;-webkit-animation-duration: .2s;-webkit-transform: rotate(0deg) translate(0, -3px) scale(1.1);} .album:hover .photo3, .album:focus .photo3 {-moz-animation-name: image3;-moz-animation-duration: .2s;-moz-transform: rotate(6deg) translate(130px, -3px) scale(1.1);-webkit-animation-name: image3;-webkit-animation-duration: .2s;-webkit-transform: rotate(6deg) translate(130px, -3px) scale(1.1);}\u003C\/style\u003E\u003Cdiv style=\"height: 300px; margin: 30px 0pt 0pt 175px;\"\u003E\u003Ca href=\"javascript:void(0);\" class=\"album\"\u003E\u003Cimg src=\"https:\/\/lh5.googleusercontent.com\/-ooOx-CB2rko\/TMUENP6flhI\/AAAAAAAAChY\/6lvVQImLX7I\/s300\/28_0034.jpg\" class=\"photo1\" \/\u003E\u003Cimg src=\"https:\/\/lh5.googleusercontent.com\/-yzeVu-wtWwA\/TQvdN-Rq7yI\/AAAAAAAADFg\/GC06QDwDxmw\/s300\/28_0073.jpg\" class=\"photo2\" \/\u003E\u003Cimg src=\"https:\/\/lh5.googleusercontent.com\/-cJLMiyA9PKg\/TQvdGsYXx6I\/AAAAAAAADFI\/ehoYRamH7p8\/s300\/28_0069.jpg\" class=\"photo3\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/7366647230768496320\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/11\/otro-ejemplo-de-animaciones-con-css.html#comment-form","title":"10 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/7366647230768496320"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/7366647230768496320"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/11\/otro-ejemplo-de-animaciones-con-css.html","title":"Otro ejemplo de animaciones con CSS"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/lh5.googleusercontent.com\/-ooOx-CB2rko\/TMUENP6flhI\/AAAAAAAAChY\/6lvVQImLX7I\/s72-c\/28_0034.jpg","height":"72","width":"72"},"thr$total":{"$t":"10"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-4163339392625235311"},"published":{"$t":"2011-11-02T00:04:00.000-03:00"},"updated":{"$t":"2017-05-13T03:10:19.244-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Pseudo clases comunes y cómo usar :not"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003ELas \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2007\/05\/pseudo-clases-y-enlaces.html\" target=\"_blank\"\u003Epseudo-clases\u003C\/a\u003E son palabras especiales que se pueden adicionar a ciertas reglas de CSS. De manera habitual, usamos varias pero, sobre todo, la famosa \u003Cspan style=\"font-weight: bold;\"\u003E:hover\u003C\/span\u003E que permite cambiar ciertas propiedades cuando ponemos el cursor del ratón encima de un elemento.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nNo es la única pseudo-clase que vemos en el CSS, suele haber más que se aplican a los enlaces u otras etiquetas.\u003C\/div\u003E\u003Cdiv class=\"vagacode\"\u003E\u003Cdiv class=\"sue\"\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/uWW4T4Al.jpg\"\u003E\u003Cp\u003ETres de las pseudo-clases menos utilizadas y más interesantes que nos trae el CSS3 y con las cuales podemos identificar elementos de manera muy precisa.\u003C\/p\u003E\u003C\/div\u003E\u003Cdiv class=\"gowi\"\u003E\u003Cspan\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/hvOnfvOl.jpg\"\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/not-any-empty\"\u003Eleer artículo actualizado\u003C\/a\u003E\u003C\/span\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/\"\u003E\u003Cimg class=\"wlogo\" src=\"http:\/\/i.imgur.com\/QZHLte7.png\"\u003E\u003C\/a\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/4163339392625235311\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/11\/pseudo-clases-comunes-y-como-usar-not.html#comment-form","title":"5 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/4163339392625235311"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/4163339392625235311"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/11\/pseudo-clases-comunes-y-como-usar-not.html","title":"Pseudo clases comunes y cómo usar :not"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"5"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-7701100846370646743"},"published":{"$t":"2011-10-26T00:05:00.001-03:00"},"updated":{"$t":"2011-10-26T00:05:00.854-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"},{"scheme":"http://www.blogger.com/atom/ns#","term":"json"}],"title":{"type":"text","$t":"Columnas con CSS: Mosaico de entradas"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EPartiendo de la idea de usar CSS para generar columnas auto-ajustables, podemos recrear cosas existentes aunque no funcionen en Internet Explorer y deberemos esperar que ese navegador incorpore estas propiedades que son unas de las más interesantes porque permiten pensar el diseño de un sitio \u003Cspan style=\"font-style: italic;\"\u003Eweb\u003C\/span\u003E desde un ángulo totalmente diferente.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nVamos a jugar y usar un ejemplo previo, crear una \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2011\/04\/resumen-de-entradas-con-paginacion.html\" target=\"_blank\"\u003Epágina con un resumen de entradas que incluya paginación\u003C\/a\u003E y simplemente, vamos a dejar todo como está pero cambiaremos algunas de las reglas de estilo. El modelo original es el que podía verse \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/p\/resumen-de-entradas.html\" target=\"_blank\"\u003Eacá\u003C\/a\u003E.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEn ese ejemplo, el DIV cuyo ID es \u003Cspan style=\"font-weight: bold;\"\u003Eresultados\u003C\/span\u003E es el rectángulo donde se muestran las entradas y, cada una de ellas es otro DIV cuya clase es \u003Cspan style=\"font-weight: bold;\"\u003Epaginaposts\u003C\/span\u003E. El \u003Cspan style=\"font-style: italic;\"\u003Escript\u003C\/span\u003E, simplemente lee una cantidad determinada de entradas, extrae una imagen y la muestra junto al título que es una etiqueta H6. Nada de eso cambiará, sólo lo mostraremos de manera distinta, simulando el estilo mosaico de las \u003Ca href=\"http:\/\/gemablog-.blogspot.com\/2011\/09\/vistas-dinamicas-aqui-y-ahora.html\" target=\"_blank\"\u003EVistas Dinámicas de Blogger\u003C\/a\u003E.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Cimg src=\"http:\/\/4.bp.blogspot.com\/-dQ-ZQsgjrWo\/Toom85iM1yI\/AAAAAAAASxA\/xZoV5SGIK08\/s00\/mosaico.png\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EY estas serán las reglas de estilo diferentes:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;style\u0026gt;\n  #resultados { \/* se mostrará todo en cuatro columnas *\/\n    -moz-column-count: 4;\n    -moz-column-gap: 0;\n    -webkit-column-count: 4;\n    -webkit-column-gap: 0;\n    column-count: 4;\n    column-gap: 0;\n    margin-left: 0;\n  }\n  .paginaposts { \/* cada entrada *\/\n    background-color: #EEE;\n    border-bottom: 4px solid #101921;\n    display: inline-block;\n    margin: 0;\n    opacity: 0.8;\n    padding: 10px;\n    position: relative;\n    text-align: center;\n    width: 205px;\n  }\n  .paginaposts:hover { opacity: 0.8; }\n  .paginaposts a { vertical-align:top; }\n  .paginaposts img { width: 205px; }\n  .paginaposts h6 { \/* el título permanece invisible hasta que ponemos el cursor encima *\/\n    background-color: #AAA;\n    height: 100%;\n    left: 0;\n    margin: 0;\n    opacity: 0;\n    padding: 10px;\n    position: absolute;\n    top: 0;\n    width: 204px;\n    -moz-transition: all 1s;\n    -webkit-transition: all 1s;\n    -o-transition: all 1s;transition: all 1s;\n  }\n  .paginaposts h6 a {\n    color: #000;\n    font-size: 18px;\n    text-shadow: 1px 1px 1px #FFF;\n  }\n  .paginaposts:hover h6 { opacity: .8; }\n\u0026lt;\/style\u0026gt;\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;margin-bottom:50px\"\u003E\u003Ca style=\"font-family: Century Gothic,Trebuchet MS,sans-serif;font-size: 40px;font-weight: normal;letter-spacing: -0.05em;margin: 0;padding: 0;text-align: center;text-shadow: 5px 20px 1px #202931, 15px -15px 1px #303941;\" target=\"_blank\" href=\"http:\/\/vagabundia.blogspot.com\/p\/mosaico.html\"\u003EMosaico\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/7701100846370646743\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/10\/columnas-con-css-mosaico-de-entradas.html#comment-form","title":"9 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/7701100846370646743"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/7701100846370646743"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/10\/columnas-con-css-mosaico-de-entradas.html","title":"Columnas con CSS: Mosaico de entradas"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/-dQ-ZQsgjrWo\/Toom85iM1yI\/AAAAAAAASxA\/xZoV5SGIK08\/s72-c\/mosaico.png","height":"72","width":"72"},"thr$total":{"$t":"9"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-8266717491453444146"},"published":{"$t":"2011-10-24T00:08:00.003-03:00"},"updated":{"$t":"2011-10-24T16:21:56.948-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Usar CSS para crear etiquetas repetitivas"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003ECuando las entradas que escribimos tienen algún tipo de código repetitivo, a veces, solemos adornar eso con alguna imagen. Es algo bastante común, indica una descarga, una referencia externa, una firma de alguna clase, un tipo de archivo, cualquier cosa.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEsto, que es algo habitual, se puede tranformar en un trastorno cuando, por casualidad, cambiamos el diseño o deseamos modificar esa imagen.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nMuchas veces hay consultas sobre cosas similares ¿es posible modificar todas las entradas del \u003Cspan style=\"font-style: italic;\"\u003Eblog\u003C\/span\u003E sin tener que editarlas una por una? Y,  la verdad es que no, que no hay forma de hacer eso.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEs cierto que podemos usar JavaScript para \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2010\/03\/cambiar-las-entradas-de-manera-dinamica.html\" target=\"_blank\"\u003Emodificar ciertas cosas\u003C\/a\u003E \u003Cspan style=\"font-style: italic;\"\u003Eonfly\u003C\/span\u003E, es decir que el codigo que hayamos escrito, se modifique cada vez que cargamos una página pero, para que esto funcione, debemos tener identificado claramente eso que deseamos modificar y, debe ser algo relativamente pequeño, que no exija un tiempo importante de ejecución.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSi, por ejemplo, yo tuviera algo así en varias entradas:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;a href=\"URL_archivo\"\u0026gt; \u0026lt;img src=\"URL_mi_imagen\" style=\".......\" \/\u0026gt; DESCARGAR ARCHIVO \u0026lt;\/a\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003Epodría crear una función que cambiara automáticamente esa imagen por otra, llamando a la función y enviándole el contenido HTML de la entrada para que busque allí dentro:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div class='post-body' expr:id='\u0026amp;quot;post-\u0026amp;quot; + data:post.id'\u0026gt;\n  \u0026lt;p\u0026gt;\u0026lt;data:post.body\/\u0026gt;\u0026lt;\/p\u0026gt;\n  \u0026lt;div style='clear: both;'\/\u0026gt;\n\u0026lt;\/div\u0026gt;\n\u0026lt;script type='text\/javascript'\u0026gt;cambiaralgo(\u0026amp;#39;\u0026lt;data:post.id\/\u0026gt;\u0026amp;#39;);\u0026lt;\/script\u0026gt;\n\n\u0026lt;script type='text\/javascript'\u0026gt;\n\/\/\u0026lt;![CDATA[\nfunction cambiaralgo(id) {\n  var imagen; \n  var contenido = document.getElementById(\"post-\" + id);\n  if(contenido!=null) {\n    var listaimagenes = contenido.getElementsByTagName(\"img\");\n    if(listaimagenes.length\u003E0){\n      for(var i=0; i\u0026lt;listaimagenes.length; ++i) {\n        imagen = listaimagenes[i].src;\n        if(imagen==\"URL_mi_imagen\"){\n          listaimagenes[i].src = \"URL_NUEVA_imagen\";\n        }\n      }\n    }\n  }\n}\n\/\/]]\u0026gt;\n\u0026lt;\/script\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: center;margin:0 auto 10px;width:300px;background-color:#FEFEFE;padding:10px;\"\u003E\u003Ca href=\"javascript:void(0);\"\u003E\u003Cimg style=\"vertical-align:middle;\" src=\"http:\/\/1.bp.blogspot.com\/-rJtLjUni9DA\/TjxbZVih-PI\/AAAAAAAASks\/pBsDRtuoCpU\/s00\/downloadfile.gif\" id=\"onfly1\"\u003E \u003Cspan style=\"color:#4B9043;font-family:Verdana;font-size:14px\"\u003EDESCARGAR ARCHIVO\u003C\/span\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv style=\"text-align: center;\"\u003E\u003Ca onclick=\"document.getElementById('onfly1').src='http:\/\/3.bp.blogspot.com\/-p_SlLRLsr4k\/TjxbqAcwcLI\/AAAAAAAASk0\/sSaJd3tPuM0\/s400\/downloadotro.png';\" href=\"javascript:void(0);\"\u003Eejemplo cambiar imagen\u003C\/a\u003E | \u003Ca onclick=\"document.getElementById('onfly1').src='http:\/\/1.bp.blogspot.com\/-rJtLjUni9DA\/TjxbZVih-PI\/AAAAAAAASks\/pBsDRtuoCpU\/s00\/downloadfile.gif';\" href=\"javascript:void(0);\"\u003E[restaurar]\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003ELa función leería el contenido de la entrada, buscaría las etiquetas IMG y, si una de ellas tuviera la imagen buscada, la cambiaría por la nueva y el cambio, sería prácticamnetre imperceptible para el visitante.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEs una solución que puede ser aplicada a casi cualquier otra cosa pero, no es lo ideal.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nLo lógico, cuando se quieren usar este tipo de códigos repetitivos, es usar CSS, crear clases y ahí, establecer las propiedades; puedo hacerlo de manera sencilla o puedo complicarlo hasta cualquier extremo. El uso de una clase para este tipo de cosas, me permitirá modificar todas las entradas, cambiando las reglas una sola vez.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEn el ejemplo anterior:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;a class=\"descargar\" href=\"URL_archivo\"\u0026gt; \u0026lt;img src=\"URL_mi_imagen\" style=\".......\" \/\u0026gt; DESCARGAR ARCHIVO \u0026lt;\/a\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003Eusaríamos una regla de estilo como esta:\u003C\/div\u003E\u003Cpre\u003E.descargar {\n    background: transparent url(http:\/\/1.bp.blogspot.com\/-rJtLjUni9DA\/TjxbZVih-PI\/AAAAAAAASks\/pBsDRtuoCpU\/s00\/downloadfile.gif) no-repeat left top;\n    color: #4B9043 !important;\n    font-family: Verdana !important;\n    font-size: 14px !important;\n    padding-left: 35px;\n    vertical-align: middle;\n}\u003C\/pre\u003E\u003Cstyle\u003E.descargar {background: transparent url(http:\/\/1.bp.blogspot.com\/-rJtLjUni9DA\/TjxbZVih-PI\/AAAAAAAASks\/pBsDRtuoCpU\/s00\/downloadfile.gif) no-repeat left top;color: #4B9043 !important;font-family: Verdana !important;font-size: 14px !important;padding-left: 35px;vertical-align: middle;} .mascosas:after {content: \"DESCARGAR ARCHIVO\";} \u003C\/style\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;margin:0 auto 10px;width:300px;background-color:#FEFEFE;padding:10px;\"\u003E\u003Ca class=\"descargar\" href=\"javascript:void(0);\"\u003EDESCARGAR ARCHIVO\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EMás aún, también podríamos generar el texto con CSS:\u003C\/div\u003E\u003Cpre\u003E.descargar:after {\n    content: \"DESCARGAR ARCHIVO\";\n}\u003C\/pre\u003E\u003Cdiv style=\"text-align: center;margin:0 auto 10px;width:300px;background-color:#FEFEFE;padding:10px;\"\u003E\u003Ca class=\"descargar mascosas\" href=\"javascript:void(0);\"\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003ECon este tipo de sistemas, bastará cambiar el CSS y no hará falta editar las entradas.\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/8266717491453444146\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/10\/usar-css-para-crear-etiquetas.html#comment-form","title":"6 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/8266717491453444146"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/8266717491453444146"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/10\/usar-css-para-crear-etiquetas.html","title":"Usar CSS para crear etiquetas repetitivas"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/-rJtLjUni9DA\/TjxbZVih-PI\/AAAAAAAASks\/pBsDRtuoCpU\/s72-c\/downloadfile.gif","height":"72","width":"72"},"thr$total":{"$t":"6"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-2273546685786316009"},"published":{"$t":"2011-10-19T00:05:00.008-03:00"},"updated":{"$t":"2011-10-19T00:05:00.087-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Columnas con CSS: Introducción"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EEl uso de columnas para organizar el contenido de un página \u003Ci\u003Eweb,\u003C\/i\u003E es una de las nuevas posibilidades que nos da el CSS3 aunque, como en la mayoría de estos casos, no es aplicable a Internet Explore excepto en su versión 10; el resto de los navegadores (Firefox, Chrome, Safari y Opera) las incorpora sin problemas aunque requiere el uso de prefijos para cada uno de ellos.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nPara entender qué significa esto de las columnas, lo mejor es comenzar a entender cómo se ven las cosas de manera normal.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSupongamos que tengo un contenedor (un DIV) con un cierto ancho (width) y dentro de él, coloco seis imágenes cuyos anchos son iguales pero varían su altura:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;style\u0026gt;\n  .demo {\n    background-color:#000;\n    line-height:0;\n    margin:0 auto;\n    width: 600px;\n  .demo img {\n    outline: 1px solid Turquoise;\n    width: 200px;\n  }\n\u0026lt;\/style\u0026gt;\n\n\u0026lt;div class=\"demo\"\u0026gt;\n  \u0026lt;img src=\"URL_IMAGEN_1\"\/\u0026gt;\n  .......\n  \u0026lt;img src=\"URL_IMAGEN_7\"\/\u0026gt;\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ELo que veré es esto:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E#dcols {width:600px;margin:0 auto;background-color:#000;line-height:0;} #dcols br {display:none;} #dcols img {outline: 1px solid Turquoise;} .dcols2 img {vertical-align:top;} .dcols3 img {vertical-align:middle;} .dcols4 {height:398px;} .dcols4 img {float:left;} .dcols5 {height:398px;} .dcols5 img {float:right;} \u003C\/style\u003E\u003Cscript\u003Efunction dcols(clase) { document.getElementById(\"dcols\").className = clase; }\u003C\/script\u003E\u003Cdiv id=\"dcols\" class=\"dcols1\"\u003E\u003Cimg src=\"https:\/\/lh6.googleusercontent.com\/-JFim4fw92wE\/TbXgecJXO-I\/AAAAAAAADV8\/SST_tHVvJdM\/s200\/01_0137.jpg\"\/\u003E\u003Cimg src=\"https:\/\/lh6.googleusercontent.com\/-8qm1qhAw-Wc\/TbXgd8ZBoWI\/AAAAAAAADV4\/0W2HJJ4_eGU\/s200\/01_0139.jpg\"\/\u003E\u003Cimg src=\"https:\/\/lh6.googleusercontent.com\/-YR1_XgsOAB8\/TbXgNjwWi6I\/AAAAAAAADVs\/epO1NSm21cM\/s200\/01_0134.jpg\"\/\u003E\u003Cimg src=\"https:\/\/lh3.googleusercontent.com\/-zyWaJEo7Y4A\/TbXg4pV_ZSI\/AAAAAAAADWM\/9ZOTWahQ4to\/s200\/01_0143.jpg\"\/\u003E\u003Cimg src=\"https:\/\/lh6.googleusercontent.com\/-JFim4fw92wE\/TbXgecJXO-I\/AAAAAAAADV8\/SST_tHVvJdM\/s200\/01_0137.jpg\"\/\u003E\u003Cimg src=\"https:\/\/lh5.googleusercontent.com\/-Ay_jnbEnCfg\/TlgYZqm6TTI\/AAAAAAAAD6M\/n2aEcrp4bUM\/s200\/01_0148.jpg\"\/\u003E\u003C\/div\u003E\u003Cdiv style=\"clear:both\"\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Ca href=\"javascript:void(0);\" onclick=\"dcols('dcols1');\"\u003Enormal\u003C\/a\u003E | \u003Ca href=\"javascript:void(0);\" onclick=\"dcols('dcols2');\"\u003Evertical-align: top\u003C\/a\u003E | \u003Ca href=\"javascript:void(0);\" onclick=\"dcols('dcols3');\"\u003Evertical-align: middle\u003C\/a\u003E | \u003Ca href=\"javascript:void(0);\" onclick=\"dcols('dcols4');\"\u003Efloat:left\u003C\/a\u003E | \u003Ca href=\"javascript:void(0);\" onclick=\"dcols('dcols5');\"\u003Efloat:right\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EComo miden 200 pixeles de ancho, tres se muestran arriba  y las otras tres, debajo; Si quisiera que se vieran filas de cuatro columnas, debería aumentar el ancho del contenedor 200 pixeles más y se acomodarían solas.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSin otro tipo de propiedad, las imágenes se mostrarán una al lado de la otra, alineadas por su base. Si quisiera, podría alinearlas por su parte superior o centrarlas verticalmente, estableciendo la propiedad vertical-align en las etiquetas IMG; en el demo, sería:\u003C\/div\u003E\u003Cpre\u003E.demo img { vertical-align: top; } \u003Cspan style=\"font-style: italic;\"\u003Eo bien\u003C\/span\u003E .demo img { vertical-align: middle; }\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EOtra alternativa es hacer que floten en cuyo caso, como el contenedor tiene un color de fondo, también debería dimensionar su altura caso contrario, no se vería:\u003C\/div\u003E\u003Cpre\u003E.demo { height:398px; }\n.demo img { float: left; } \u003Cspan style=\"font-style: italic;\"\u003Eo bien\u003C\/span\u003E .demo img { float: right; }\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ELas distintas variantes pueden ser probadas haciendo \u003Cspan style=\"font-style: italic;\"\u003Eclick\u003C\/span\u003E en los enlaces debajo del demo.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSea como sea y haga lo que haga, las imágenes dejarán espacios en blanco (en negro en este caso) entre ellas ya que todas tienen alturas diferentes y justamente esa es la primera característica sobresaliente de las nuevas propiedades; las columnas ajustan el contenido de tal modo de no dejar espacios entre ellos.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEn el mismo ejemplo inicial, agrego esto:\u003C\/div\u003E\u003Cpre\u003E.demo {\n  .......\n  -moz-column-count:3;\n  -moz-column-gap:0;\n  -webkit-column-count:3;\n  -webkit-column-gap:0;\n  column-count:3;\n  column-gap:0;\n}\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EY el resultado será esto:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E#ccols {width:600px;margin:0 auto;background-color:#000;line-height:0;-moz-column-count:3;-moz-column-gap:0;-webkit-column-count:3;-webkit-column-gap:0;column-count:3;column-gap:0; } #ccols br {display:none;} #ccols img {outline: 1px solid Turquoise;width:200px;}\u003C\/style\u003E\u003Cdiv id=\"ccols\"\u003E\u003Cimg src=\"https:\/\/lh6.googleusercontent.com\/-JFim4fw92wE\/TbXgecJXO-I\/AAAAAAAADV8\/SST_tHVvJdM\/s200\/01_0137.jpg\"\/\u003E\u003Cimg src=\"https:\/\/lh6.googleusercontent.com\/-8qm1qhAw-Wc\/TbXgd8ZBoWI\/AAAAAAAADV4\/0W2HJJ4_eGU\/s200\/01_0139.jpg\"\/\u003E\u003Cimg src=\"https:\/\/lh6.googleusercontent.com\/-YR1_XgsOAB8\/TbXgNjwWi6I\/AAAAAAAADVs\/epO1NSm21cM\/s200\/01_0134.jpg\"\/\u003E\u003Cimg src=\"https:\/\/lh3.googleusercontent.com\/-zyWaJEo7Y4A\/TbXg4pV_ZSI\/AAAAAAAADWM\/9ZOTWahQ4to\/s200\/01_0143.jpg\"\/\u003E\u003Cimg src=\"https:\/\/lh6.googleusercontent.com\/-JFim4fw92wE\/TbXgecJXO-I\/AAAAAAAADV8\/SST_tHVvJdM\/s200\/01_0137.jpg\"\/\u003E\u003Cimg src=\"https:\/\/lh5.googleusercontent.com\/-Ay_jnbEnCfg\/TlgYZqm6TTI\/AAAAAAAAD6M\/n2aEcrp4bUM\/s200\/01_0148.jpg\"\/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003ESólo requerimos dos propiedades:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003Ecolumn-count \u003C\/span\u003Eindica la cantidad de columnas a ser mostradas; si el ancho del contenedor es escaso, se solaparán; si el ancho del contenedor es demasiado grande, quedrán espacios entre ellas\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003Ecolumn-gap  \u003C\/span\u003Ees el espacio entre los contenidos, la separación entre ellos y depende del navegador (generalmente es 1em) así que ponemos cero para controlarlo nosotros msimos\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nHay propiedades extras que pueden ser agregadas:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003Ecolumn-width \u003C\/span\u003Eestablece el ancho de esas columnas\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003Ecolumn-rule \u003C\/span\u003Ese utiliza para establecer el tipo de borde y tiene la misma sintaxis que la propiedad border\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003Ecolumn-rule-color \u003C\/span\u003Ees el color del borde, similar a border-color\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003Ecolumn-rule-style \u003C\/span\u003Ees el estilo del borde, similar a border-style\u003Cbr \/\u003E\n\u003Cspan style=\"font-weight: bold;\"\u003Ecolumn-rule-width \u003C\/span\u003Ees el tamaño del borde, similar a border-width\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nMás ejemplos; cinco columnas con contenidos de 100 pixeles de ancho:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E#mcols {-moz-column-count:5;-moz-column-gap:0;-webkit-column-count:5;-webkit-column-gap:0;column-count:5;column-gap:0; margin: 0 auto;width: 605px;} #mcols br {display:none;} #mcols span {color: #444;display: inline-block;font-size: 90px;outline: 1px solid #FFF;padding: 10px;text-align: center;width: 100px;} \u003C\/style\u003E\u003Cdiv id=\"mcols\"\u003E\u003Cspan style=\"background-color:#ABC;height:120px;\"\u003E1\u003C\/span\u003E\u003Cspan style=\"background-color:#A88;height:220px;\"\u003E2\u003C\/span\u003E\u003Cspan style=\"background-color:#AB8;height:150px;\"\u003E3\u003C\/span\u003E\u003Cspan style=\"background-color:#9BC;height:130px;\"\u003E4\u003C\/span\u003E\u003Cspan style=\"background-color:#ACC;height:120px;\"\u003E5\u003C\/span\u003E\u003Cspan style=\"background-color:#AAC;height:180px;\"\u003E6\u003C\/span\u003E\u003Cspan style=\"background-color:#ABD;height:100px;\"\u003E7\u003C\/span\u003E\u003Cspan style=\"background-color:#8CC;height:200px;\"\u003E8\u003C\/span\u003E\u003Cspan style=\"background-color:#BCD;height:110px;\"\u003E9\u003C\/span\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EY muchas imágenes todas juntitas:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E#ecols {width:616px;margin:0 auto;line-height:0;-moz-column-count:4;-moz-column-gap:0;-webkit-column-count:4;-webkit-column-gap:0;column-count:4;column-gap:0; } #ecols br {display:none;} #ecols img {border: 1px solid #FFF;margin: 1px 0;width:150px;} \u003C\/style\u003E\u003Cdiv id=\"ecols\"\u003E\u003Cimg src=\"https:\/\/lh6.googleusercontent.com\/-JFim4fw92wE\/TbXgecJXO-I\/AAAAAAAADV8\/SST_tHVvJdM\/s150\/01_0137.jpg\"\/\u003E\u003Cimg src=\"https:\/\/lh6.googleusercontent.com\/-8qm1qhAw-Wc\/TbXgd8ZBoWI\/AAAAAAAADV4\/0W2HJJ4_eGU\/s150\/01_0139.jpg\"\/\u003E\u003Cimg src=\"https:\/\/lh6.googleusercontent.com\/-YR1_XgsOAB8\/TbXgNjwWi6I\/AAAAAAAADVs\/epO1NSm21cM\/s150\/01_0134.jpg\"\/\u003E\u003Cimg src=\"https:\/\/lh3.googleusercontent.com\/-zyWaJEo7Y4A\/TbXg4pV_ZSI\/AAAAAAAADWM\/9ZOTWahQ4to\/s150\/01_0143.jpg\"\/\u003E\u003Cimg src=\"https:\/\/lh4.googleusercontent.com\/-zvrxqwWFC7A\/TQvUg78RVZI\/AAAAAAAAC3k\/-gNPMzaCvxg\/s150\/01_0110.jpg\"\/\u003E\u003Cimg src=\"https:\/\/lh5.googleusercontent.com\/-Ay_jnbEnCfg\/TlgYZqm6TTI\/AAAAAAAAD6M\/n2aEcrp4bUM\/s150\/01_0148.jpg\"\/\u003E\u003Cimg src=\"https:\/\/lh3.googleusercontent.com\/-XwofaSuoaCc\/TlgcxUsZieI\/AAAAAAAAD7g\/vKoPQsWu--U\/s150\/01_0169.png\"\/\u003E\u003Cimg src=\"https:\/\/lh6.googleusercontent.com\/-LHMEYHrsvf8\/TMPuUvC8OHI\/AAAAAAAAABE\/ecXBTuA24H4\/s150\/01_0018.jpg\"\/\u003E\u003Cimg src=\"https:\/\/lh3.googleusercontent.com\/-EJhotQLr9g0\/TMPvMHvfspI\/AAAAAAAAACs\/Qnxb8Pi625k\/s150\/01_0008.jpg\"\/\u003E\u003Cimg src=\"https:\/\/lh5.googleusercontent.com\/-5CurlhF5JUI\/TMSPrEa4MII\/AAAAAAAAAFM\/lYU7FJMZO30\/s150\/01_0059.jpg\"\/\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/2273546685786316009\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/10\/columnas-con-css-introduccion.html#comment-form","title":"8 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/2273546685786316009"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/2273546685786316009"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/10\/columnas-con-css-introduccion.html","title":"Columnas con CSS: Introducción"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/lh6.googleusercontent.com\/-JFim4fw92wE\/TbXgecJXO-I\/AAAAAAAADV8\/SST_tHVvJdM\/s72-c\/01_0137.jpg","height":"72","width":"72"},"thr$total":{"$t":"8"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-6057239009433101749"},"published":{"$t":"2011-10-17T00:04:00.001-03:00"},"updated":{"$t":"2011-10-17T00:04:00.613-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Imágenes y CSS: Todo depende del navegador"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EUna imagen normal:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;img src=\"URL_IMAGEN\"\/\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: center;\"\u003E\u003Cimg src=\"https:\/\/lh3.googleusercontent.com\/-uDfgYbYy-TU\/TMSqbG2S67I\/AAAAAAAABDs\/Q0gkKj2QdfU\/s200\/09_0189.jpg\"\/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003ELe redondeamos los bordes en Firefox, Chrome Opera e IE9:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;img style=\"border-radius:20px\" src=\"URL_IMAGEN\"\/\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: center;\"\u003E\u003Cimg style=\"border-radius:20px\" src=\"https:\/\/lh3.googleusercontent.com\/-uDfgYbYy-TU\/TMSqbG2S67I\/AAAAAAAABDs\/Q0gkKj2QdfU\/s200\/09_0189.jpg\"\/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003ELe agregamos un borde:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;img style=\"border-radius: 20px;border: 5px solid #FFF;\" src=\"URL_IMAGEN\"\/\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003Een Firefox y Chorme\/Opera se verán diferentes:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"clear: both; text-align: center;\"\u003E\u003Cimg src=\"http:\/\/3.bp.blogspot.com\/-jMWjNYrYw5M\/TotrOEFdHnI\/AAAAAAAASxI\/Dfm9y-opqjQ\/s00\/demoimgs1.png\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003ELe agregamos un padding que es la separación entre el borde y la imagen en si misma: \u003C\/div\u003E\u003Cpre\u003E\u0026lt;img style=\"border-radius: 20px;border: 5px solid #FFF;padding: 10px;\" src=\"URL_IMAGEN\"\/\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ENuevamene, en Firefox y Chorme\/Opera se verán diferentes:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"clear: both; text-align: center;\"\u003E\u003Cimg src=\"http:\/\/2.bp.blogspot.com\/-LMvnd4nbOzQ\/TotrOXfnPfI\/AAAAAAAASxQ\/QwPpRKkZQAs\/s00\/demoimgs2.png\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EEmpezamos otra vez pero usando valores extremos\u003C\/div\u003E\u003Cpre\u003E\u0026lt;img style=\"border-radius:100px;padding: 0 50px;\" src=\"URL_IMAGEN\"\/\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003Ela confusión de los navegadores aumenta ¿cómo era eso del respeto a los estándares?:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Cimg src=\"http:\/\/3.bp.blogspot.com\/-J-TLBY0aDkU\/TotrObn8LGI\/AAAAAAAASxY\/PD4HQrSIL84\/s00\/demoimgs3.png\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EMe olvido de las dudas existenciales y sigo agregándole propiedades; esta vez, un color de fondo:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;img style=\"background-color: #678;border: 5px solid #FFF;border-radius: 100px;padding: 10px 50px;\" src=\"URL_IMAGEN\"\/\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: center;\"\u003E\u003Cimg style=\"background-color: #678;border: 5px solid #FFF;border-radius: 100px;padding: 10px 50px;\" src=\"https:\/\/lh3.googleusercontent.com\/-uDfgYbYy-TU\/TMSqbG2S67I\/AAAAAAAABDs\/Q0gkKj2QdfU\/s200\/09_0189.jpg\"\/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EY un poco de sombra exterior:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;img style=\"background-color: #678;border: 5px solid #FFF;border-radius: 100px;padding: 10px 50px;box-shadow:0 0 10px #DEF;\" src=\"URL_IMAGEN\"\/\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: center;\"\u003E\u003Cimg style=\"background-color: #678;border: 5px solid #FFF;border-radius: 100px;padding: 10px 50px;box-shadow:0 0 10px #DEF\" src=\"https:\/\/lh3.googleusercontent.com\/-uDfgYbYy-TU\/TMSqbG2S67I\/AAAAAAAABDs\/Q0gkKj2QdfU\/s200\/09_0189.jpg\"\/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EY una poco de sombra en el interior:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;img style=\"background-color: #678;border: 5px solid #FFF;border-radius: 100px;padding: 10px 50px;box-shadow:0 0 15px #000000 inset,0 0 10px #DEF;\" src=\"URL_IMAGEN\"\/\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: center;\"\u003E\u003Cimg style=\"background-color: #678;border: 5px solid #FFF;border-radius: 100px;padding: 10px 50px;box-shadow:0 0 15px #000000 inset,0 0 10px #DEF;\" src=\"https:\/\/lh3.googleusercontent.com\/-uDfgYbYy-TU\/TMSqbG2S67I\/AAAAAAAABDs\/Q0gkKj2QdfU\/s200\/09_0189.jpg\"\/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EY así podríamos seguir hasta el infinito.\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/6057239009433101749\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/10\/imagenes-y-css-todo-depende-del.html#comment-form","title":"9 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/6057239009433101749"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/6057239009433101749"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/10\/imagenes-y-css-todo-depende-del.html","title":"Imágenes y CSS: Todo depende del navegador"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/lh3.googleusercontent.com\/-uDfgYbYy-TU\/TMSqbG2S67I\/AAAAAAAABDs\/Q0gkKj2QdfU\/s72-c\/09_0189.jpg","height":"72","width":"72"},"thr$total":{"$t":"9"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-3577600915035549765"},"published":{"$t":"2011-10-13T00:06:00.001-03:00"},"updated":{"$t":"2011-10-13T00:06:00.090-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Navegación con círculos"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003ECircle Navigation Effect with CSS3 es una idea que muestran en \u003Ca href=\"http:\/\/tympanus.net\/codrops\/2011\/10\/10\/circle-navigation-effect-with-css3\/\" target=\"_blank\"\u003Etympanus.net\u003C\/a\u003E, aplicado a un \u003Cspan style=\"font-style: italic;\"\u003Eslider\u003C\/span\u003E de imágenes pero, para no complicar mucho las cosas, vamos a ver como generar ese mismo efecto en enlaces comunes y corrientes. Si se entiende la idea, luego pude ser trasladada a otras aplicaciones.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEl truco se basa en anidar etiquetas dentro del enlace y de esa manera, poder controlarlas de manera individual:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;a class=\"circulo\" href=\"javascpit:void(0);\"\u0026gt;\n  \u0026lt;span style=\"background-image: url(IMAGEN_VISIBLE);\"\u0026gt;\u0026lt;\/span\u0026gt;\n  \u0026lt;div style=\"background-image:url(URL_IMAGEN_OCULTA);\"\u0026gt;\u0026lt;\/div\u0026gt;\n\u0026lt;\/a\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ELos enlaces se muestran como pequeños círculos y, al colocar el cursor encima, se agrandan y muestran una segunda imagen:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E.democirculos {margin: 0 auto;padding: 55px 40px;position: relative;width: 315px;} .democirculos br {display:none;}\na.circulo {display: inline-block;height: 46px;position: relative;width: 75px;} a.circulo span {background: #00BE98 url() no-repeat 50% 50%;width: 46px;height: 46px;display: block;border-radius: 23px;cursor: pointer;position: absolute;top: 50%;left: 50%;margin: -23px 0 0 -23px;-webkit-transition: all 0.4s ease;-moz-transition: all 0.4s ease;-o-transition: all 0.4s ease;transition: all 0.4s ease;} a.circulo div {width: 0;height: 0;position: absolute;top: 50%;left: 50%;overflow: hidden;background: transparent url() no-repeat center center;margin: 0; z-index: 100;-webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out;-o-transition: all 0.2s ease-out;transition: all 0.2s ease-out;} a.circulo:hover span {border-radius: 75px;height: 150px;margin: -75px 0 0 -75px;width: 150px;} a.circulo:hover div {border-radius: 75px;height: 150px;margin: -75px 0 0 -75px;width: 150px;} \u003C\/style\u003E\u003Cdiv class=\"democirculos\"\u003E\u003Ca class=\"circulo\" href=\"javascpit:void(0);\"\u003E\u003Cspan style=\"background-image: url(http:\/\/1.bp.blogspot.com\/-ohlk1vMgZuk\/TpXkUcoYbCI\/AAAAAAAAS7Q\/7sLPFgNTux0\/s00\/num1.png);\"\u003E\u003C\/span\u003E\u003Cdiv style=\"background-image:url(https:\/\/lh4.googleusercontent.com\/-_j8VloBKSfI\/TMPvzhBG-fI\/AAAAAAAAADY\/xvQr5otwfD8\/s200\/01_0039.jpg);\"\u003E\u003C\/div\u003E\u003C\/a\u003E\u003Ca class=\"circulo\" href=\"javascpit:void(0);\"\u003E\u003Cspan style=\"background-image: url(http:\/\/4.bp.blogspot.com\/-i4etUxviHwc\/TpXkWTzP8qI\/AAAAAAAAS7Y\/lUeXKEZwgaU\/s00\/num2.png);\"\u003E\u003C\/span\u003E\u003Cdiv style=\"background-image:url(https:\/\/lh6.googleusercontent.com\/-apU7wTsgab8\/Tlga9_vGoDI\/AAAAAAAAD7E\/S8PJ8xFRaeE\/s200\/01_0163.jpg);\"\u003E\u003C\/div\u003E\u003C\/a\u003E\u003Ca class=\"circulo\" href=\"javascpit:void(0);\"\u003E\u003Cspan  style=\"background-image: url(http:\/\/2.bp.blogspot.com\/-GFRksQCdL0k\/TpXkWhgQf0I\/AAAAAAAAS7k\/JDxffbSoh-k\/s00\/num3.png);\"\u003E\u003C\/span\u003E\u003Cdiv style=\"background-image:url(https:\/\/lh3.googleusercontent.com\/--bfI5aTj35w\/TMSSDbtdLdI\/AAAAAAAAALc\/cz9w5xbXKxM\/s200\/02_0074.jpg);\"\u003E\u003C\/div\u003E\u003C\/a\u003E\u003Ca class=\"circulo\" href=\"javascpit:void(0);\"\u003E\u003Cspan style=\"background-image: url(http:\/\/1.bp.blogspot.com\/-6vU4Og_pTgU\/TpXkWxKuzCI\/AAAAAAAAS7w\/0YmZKjAP-KU\/s00\/num4.png);\"\u003E\u003C\/span\u003E\u003Cdiv style=\"background-image:url(https:\/\/lh3.googleusercontent.com\/-MYEXQl74vUs\/TMSRqC9qtwI\/AAAAAAAAAKY\/uoIcCSnzw30\/s200\/02_0038.jpg);\"\u003E\u003C\/div\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EY claro, todo depende del CSS:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;style\u0026gt;\n  \/* los enlaces pueden tener cualquier dimensión *\/\n  a.circulo {\n    display: inline-block;\n    height: 46px;\n    position: relative;\n    width: 75px;\n  }\n  \/* la etiqueta SPAN contiene la imagen visible *\/\n  a.circulo span {\n    background: #00BE98 url() no-repeat 50% 50%; \/* la imagen es un fondo *\/\n    display: block;\n    cursor: pointer;\n    \/* la dimensión de la imagen *\/\n    height: 46px;\n    width: 46px;\n    border-radius: 23px; \/* se ve como círculo con un radio que es la mitad de su tamaño *\/\n    \/* la posicionamos de manera absoluta en el centro *\/\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    \/* le ponemos márgenes negativos arriba y a la izquierda para centrarla *\/\n    margin: -23px 0 0 -23px;\n    \/* la animación *\/\n    -moz-transition: all 0.4s ease;\n    -webkit-transition: all 0.4s ease;\n    -o-transition: all 0.4s ease;\n    transition: all 0.4s ease;\n  }\n  \/* la imagen oculta *\/\n  a.circulo div {\n    background: transparent url() no-repeat center center;\n    height: 0;\n    left: 50%;\n    margin: 0;\n    overflow: hidden;\n    position: absolute;\n    top: 50%;\n    width: 0;\n     z-index: 100;\n    -moz-transition: all 0.2s ease-out;\n    -webkit-transition: all 0.2s ease-out;\n    -o-transition: all 0.2s ease-out;\n    transition: all 0.2s ease-out;\n  }\n  \/* al poner el cursor encima del enlace *\/\n  \/* la etiqueta SPAN se \"agranda\" *\/\n  a.circulo:hover span {\n    border-radius: 75px;\n    height: 150px;\n    margin: -75px 0 0 -75px;\n    opacity: 0.6;\n    width: 150px;\n  }\n  \/* la etiqueta DIV se hace visible *\/\n  a.circulo:hover div {\n    border-radius: 75px;\n    height: 150px;\n    margin: -75px 0 0 -75px;\n    width: 150px;\n  }\n\u0026lt;\/style\u0026gt;\u003C\/pre\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/3577600915035549765\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/10\/navegacion-con-circulos.html#comment-form","title":"21 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/3577600915035549765"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/3577600915035549765"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/10\/navegacion-con-circulos.html","title":"Navegación con círculos"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"21"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-1627375697149965391"},"published":{"$t":"2011-10-06T00:03:00.000-03:00"},"updated":{"$t":"2011-10-06T00:03:00.116-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"CSSWarp: Curvas al extremo"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EPués si, \u003Ca href=\"http:\/\/csswarp.eleqtriq.com\/\" target=\"_blank\"\u003ECSSWarp\u003C\/a\u003E 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.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nComo usa propiedades CSS3, no funcionará en versiones de Internet Explorer inferiores a la 9 pero no importa; sigue siendo increible.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Cimg src=\"http:\/\/4.bp.blogspot.com\/-iPM4grZk0nw\/Toy7QSfEPjI\/AAAAAAAASxg\/docxmh_n5C0\/s00\/csswarp1.png\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EQuien 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 \u0026lt;style type='text\/css'\u0026gt; hasta \u0026lt;\/style\u0026gt; y desde \u0026lt;div id='warped'\u0026gt; hasta \u0026lt;\/div\u0026gt;. Y por supuesto, si se desea, pueden hacerse ajustes editando las reglas de estilo.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Clink rel='stylesheet' type='text\/css' href='http:\/\/fonts.googleapis.com\/css?family=Kreon:400'\u003E\u003Cstyle type='text\/css'\u003E#warped {position: relative; display: block; width:610px; height:498px;background-color: #000;border: 1px solid #444;color: #FFF;} #warped\u003Espan[class^=w]:nth-of-type(n+0){display:block; position:absolute; -moz-transform-origin:50% 100%; -webkit-transform-origin:50% 100%; -o-transform-origin:50% 100%; -ms-transform-origin:50% 100%; transform-origin:50% 100%; } #warped span{font-family:'Kreon', serif;font-size:38px;font-weight:400;font-style:normal; line-height:0.65; white-space:pre; overflow:visible; padding:0px;} #warped .w0 {-moz-transform: rotate(-7.86rad);-webkit-transform: rotate(-7.86rad);-o-transform: rotate(-7.86rad);-ms-transform: rotate(-7.86rad); transform: rotate(-7.86rad); width: 14px; height: 25px; left: 33px; top: 193.8px;} #warped .w1 {-moz-transform: rotate(-7.78rad);-webkit-transform: rotate(-7.78rad);-o-transform: rotate(-7.78rad);-ms-transform: rotate(-7.78rad); transform: rotate(-7.78rad); width: 19px; height: 25px; left: 31.31px; top: 173.26px;} #warped .w2 {-moz-transform: rotate(-7.67rad);-webkit-transform: rotate(-7.67rad);-o-transform: rotate(-7.67rad);-ms-transform: rotate(-7.67rad); transform: rotate(-7.67rad); width: 19px; height: 25px; left: 34.51px; top: 148.79px;} #warped .w3 {-moz-transform: rotate(-7.54rad);-webkit-transform: rotate(-7.54rad);-o-transform: rotate(-7.54rad);-ms-transform: rotate(-7.54rad); transform: rotate(-7.54rad); width: 17px; height: 25px; left: 41.18px; top: 126.81px;} #warped .w4 {-moz-transform: rotate(-7.35rad);-webkit-transform: rotate(-7.35rad);-o-transform: rotate(-7.35rad);-ms-transform: rotate(-7.35rad); transform: rotate(-7.35rad); width: 20px; height: 25px; left: 48.87px; top: 105.7px;} #warped .w5 {-moz-transform: rotate(-7.08rad);-webkit-transform: rotate(-7.08rad);-o-transform: rotate(-7.08rad);-ms-transform: rotate(-7.08rad); transform: rotate(-7.08rad); width: 19px; height: 25px; left: 64.02px; top: 85.88px;} #warped .w6 {-moz-transform: rotate(-6.73rad);-webkit-transform: rotate(-6.73rad);-o-transform: rotate(-6.73rad);-ms-transform: rotate(-6.73rad); transform: rotate(-6.73rad); width: 19px; height: 25px; left: 83.55px; top: 71.93px;} #warped .w7 {-moz-transform: rotate(-6.43rad);-webkit-transform: rotate(-6.43rad);-o-transform: rotate(-6.43rad);-ms-transform: rotate(-6.43rad); transform: rotate(-6.43rad); width: 9px; height: 25px; left: 106.41px; top: 66.63px;} #warped .w8 {-moz-transform: rotate(-6.16rad);-webkit-transform: rotate(-6.16rad);-o-transform: rotate(-6.16rad);-ms-transform: rotate(-6.16rad); transform: rotate(-6.16rad); width: 16px; height: 25px; left: 120.51px; top: 66.61px;} #warped .w9 {-moz-transform: rotate(-5.87rad);-webkit-transform: rotate(-5.87rad);-o-transform: rotate(-5.87rad);-ms-transform: rotate(-5.87rad); transform: rotate(-5.87rad); width: 19px; height: 25px; left: 140.28px; top: 72.68px;} #warped .w10 {-moz-transform: rotate(-5.62rad);-webkit-transform: rotate(-5.62rad);-o-transform: rotate(-5.62rad);-ms-transform: rotate(-5.62rad); transform: rotate(-5.62rad); width: 20px; height: 25px; left: 160.97px; top: 85.6px;} #warped .w11 {-moz-transform: rotate(-5.46rad);-webkit-transform: rotate(-5.46rad);-o-transform: rotate(-5.46rad);-ms-transform: rotate(-5.46rad); transform: rotate(-5.46rad); width: 9px; height: 25px; left: 180.59px; top: 98.77px;} #warped .w12 {-moz-transform: rotate(-5.31rad);-webkit-transform: rotate(-5.31rad);-o-transform: rotate(-5.31rad);-ms-transform: rotate(-5.31rad); transform: rotate(-5.31rad); width: 22px; height: 25px; left: 187.02px; top: 115.15px;} #warped .w13 {-moz-transform: rotate(-5.16rad);-webkit-transform: rotate(-5.16rad);-o-transform: rotate(-5.16rad);-ms-transform: rotate(-5.16rad); transform: rotate(-5.16rad); width: 19px; height: 25px; left: 201.03px; top: 137.01px;} #warped .w14 {-moz-transform: rotate(-5.04rad);-webkit-transform: rotate(-5.04rad);-o-transform: rotate(-5.04rad);-ms-transform: rotate(-5.04rad); transform: rotate(-5.04rad); width: 19px; height: 25px; left: 209.94px; top: 158.99px;} #warped .w15 {-moz-transform: rotate(-4.93rad);-webkit-transform: rotate(-4.93rad);-o-transform: rotate(-4.93rad);-ms-transform: rotate(-4.93rad); transform: rotate(-4.93rad); width: 20px; height: 25px; left: 215.98px; top: 182.7px;} #warped .w16 {-moz-transform: rotate(-4.85rad);-webkit-transform: rotate(-4.85rad);-o-transform: rotate(-4.85rad);-ms-transform: rotate(-4.85rad); transform: rotate(-4.85rad); width: 9px; height: 25px; left: 224.95px; top: 202.36px;} #warped .w17 {-moz-transform: rotate(-4.8rad);-webkit-transform: rotate(-4.8rad);-o-transform: rotate(-4.8rad);-ms-transform: rotate(-4.8rad); transform: rotate(-4.8rad); width: 9px; height: 25px; left: 226.51px; top: 216.62px;} #warped .w18 {-moz-transform: rotate(-4.74rad);-webkit-transform: rotate(-4.74rad);-o-transform: rotate(-4.74rad);-ms-transform: rotate(-4.74rad); transform: rotate(-4.74rad); width: 19px; height: 25px; left: 222.44px; top: 235.04px;} #warped .w19 {-moz-transform: rotate(-4.83rad);-webkit-transform: rotate(-4.83rad);-o-transform: rotate(-4.83rad);-ms-transform: rotate(-4.83rad); transform: rotate(-4.83rad); width: 17px; height: 25px; left: 224.61px; top: 260.85px;} #warped .w20 {-moz-transform: rotate(-4.95rad);-webkit-transform: rotate(-4.95rad);-o-transform: rotate(-4.95rad);-ms-transform: rotate(-4.95rad); transform: rotate(-4.95rad); width: 15px; height: 25px; left: 229.1px; top: 280.62px;} #warped .w21 {-moz-transform: rotate(-5.07rad);-webkit-transform: rotate(-5.07rad);-o-transform: rotate(-5.07rad);-ms-transform: rotate(-5.07rad); transform: rotate(-5.07rad); width: 9px; height: 25px; left: 237.06px; top: 297.04px;} #warped .w22 {-moz-transform: rotate(-5.17rad);-webkit-transform: rotate(-5.17rad);-o-transform: rotate(-5.17rad);-ms-transform: rotate(-5.17rad); transform: rotate(-5.17rad); width: 10px; height: 25px; left: 242.23px; top: 310.47px;} #warped .w23 {-moz-transform: rotate(-5.3rad);-webkit-transform: rotate(-5.3rad);-o-transform: rotate(-5.3rad);-ms-transform: rotate(-5.3rad); transform: rotate(-5.3rad); width: 19px; height: 25px; left: 247.26px; top: 327.2px;} #warped .w24 {-moz-transform: rotate(-5.47rad);-webkit-transform: rotate(-5.47rad);-o-transform: rotate(-5.47rad);-ms-transform: rotate(-5.47rad); transform: rotate(-5.47rad); width: 16px; height: 25px; left: 262.84px; top: 345.02px;} #warped .w25 {-moz-transform: rotate(-5.63rad);-webkit-transform: rotate(-5.63rad);-o-transform: rotate(-5.63rad);-ms-transform: rotate(-5.63rad); transform: rotate(-5.63rad); width: 19px; height: 25px; left: 277.85px; top: 360px;} #warped .w26 {-moz-transform: rotate(-5.8rad);-webkit-transform: rotate(-5.8rad);-o-transform: rotate(-5.8rad);-ms-transform: rotate(-5.8rad); transform: rotate(-5.8rad); width: 15px; height: 25px; left: 298.44px; top: 371.94px;} #warped .w27 {-moz-transform: rotate(-5.96rad);-webkit-transform: rotate(-5.96rad);-o-transform: rotate(-5.96rad);-ms-transform: rotate(-5.96rad); transform: rotate(-5.96rad); width: 17px; height: 25px; left: 316.81px; top: 380.34px;} #warped .w28 {-moz-transform: rotate(-6.12rad);-webkit-transform: rotate(-6.12rad);-o-transform: rotate(-6.12rad);-ms-transform: rotate(-6.12rad); transform: rotate(-6.12rad); width: 15px; height: 25px; left: 338.41px; top: 385.61px;} #warped .w29 {-moz-transform: rotate(-6.24rad);-webkit-transform: rotate(-6.24rad);-o-transform: rotate(-6.24rad);-ms-transform: rotate(-6.24rad); transform: rotate(-6.24rad); width: 9px; height: 25px; left: 357.96px; top: 387.45px;} #warped .w30 {-moz-transform: rotate(-6.38rad);-webkit-transform: rotate(-6.38rad);-o-transform: rotate(-6.38rad);-ms-transform: rotate(-6.38rad); transform: rotate(-6.38rad); width: 19px; height: 25px; left: 371.92px; top: 387.08px;} #warped .w31 {-moz-transform: rotate(-6.55rad);-webkit-transform: rotate(-6.55rad);-o-transform: rotate(-6.55rad);-ms-transform: rotate(-6.55rad); transform: rotate(-6.55rad); width: 19px; height: 25px; left: 396.23px; top: 382.8px;} #warped .w32 {-moz-transform: rotate(-6.7rad);-webkit-transform: rotate(-6.7rad);-o-transform: rotate(-6.7rad);-ms-transform: rotate(-6.7rad); transform: rotate(-6.7rad); width: 17px; height: 25px; left: 418.54px; top: 375.4px;} #warped .w33 {-moz-transform: rotate(-6.81rad);-webkit-transform: rotate(-6.81rad);-o-transform: rotate(-6.81rad);-ms-transform: rotate(-6.81rad); transform: rotate(-6.81rad); width: 9px; height: 25px; left: 438.61px; top: 367.38px;} #warped .w34 {-moz-transform: rotate(-6.91rad);-webkit-transform: rotate(-6.91rad);-o-transform: rotate(-6.91rad);-ms-transform: rotate(-6.91rad); transform: rotate(-6.91rad); width: 15px; height: 25px; left: 450.43px; top: 357.93px;} #warped .w35 {-moz-transform: rotate(-7.01rad);-webkit-transform: rotate(-7.01rad);-o-transform: rotate(-7.01rad);-ms-transform: rotate(-7.01rad); transform: rotate(-7.01rad); width: 17px; height: 25px; left: 465.8px; top: 344.89px;} #warped .w36 {-moz-transform: rotate(-7.1rad);-webkit-transform: rotate(-7.1rad);-o-transform: rotate(-7.1rad);-ms-transform: rotate(-7.1rad); transform: rotate(-7.1rad); width: 9px; height: 25px; left: 482.83px; top: 332.23px;} #warped .w37 {-moz-transform: rotate(-7.18rad);-webkit-transform: rotate(-7.18rad);-o-transform: rotate(-7.18rad);-ms-transform: rotate(-7.18rad); transform: rotate(-7.18rad); width: 18px; height: 25px; left: 490px; top: 318.9px;} #warped .w38 {-moz-transform: rotate(-7.27rad);-webkit-transform: rotate(-7.27rad);-o-transform: rotate(-7.27rad);-ms-transform: rotate(-7.27rad); transform: rotate(-7.27rad); width: 17px; height: 25px; left: 504.19px; top: 300.33px;} #warped .w39 {-moz-transform: rotate(-7.35rad);-webkit-transform: rotate(-7.35rad);-o-transform: rotate(-7.35rad);-ms-transform: rotate(-7.35rad); transform: rotate(-7.35rad); width: 20px; height: 25px; left: 514.74px; top: 280.72px;} #warped .w40 {-moz-transform: rotate(-7.41rad);-webkit-transform: rotate(-7.41rad);-o-transform: rotate(-7.41rad);-ms-transform: rotate(-7.41rad); transform: rotate(-7.41rad); width: 9px; height: 25px; left: 529.26px; top: 263.45px;} #warped .w41 {-moz-transform: rotate(-7.46rad);-webkit-transform: rotate(-7.46rad);-o-transform: rotate(-7.46rad);-ms-transform: rotate(-7.46rad); transform: rotate(-7.46rad); width: 17px; height: 25px; left: 533px; top: 246.37px;} #warped .w42 {-moz-transform: rotate(-7.52rad);-webkit-transform: rotate(-7.52rad);-o-transform: rotate(-7.52rad);-ms-transform: rotate(-7.52rad); transform: rotate(-7.52rad); width: 20px; height: 25px; left: 539.94px; top: 224.6px;} #warped .w43 {-moz-transform: rotate(-7.56rad);-webkit-transform: rotate(-7.56rad);-o-transform: rotate(-7.56rad);-ms-transform: rotate(-7.56rad); transform: rotate(-7.56rad); width: 9px; height: 25px; left: 551.37px; top: 206.67px;} #warped .w44 {-moz-transform: rotate(-7.59rad);-webkit-transform: rotate(-7.59rad);-o-transform: rotate(-7.59rad);-ms-transform: rotate(-7.59rad); transform: rotate(-7.59rad); width: 10px; height: 25px; left: 555.23px; top: 191.58px;} #warped .w45 {-moz-transform: rotate(-7.63rad);-webkit-transform: rotate(-7.63rad);-o-transform: rotate(-7.63rad);-ms-transform: rotate(-7.63rad); transform: rotate(-7.63rad); width: 17px; height: 25px; left: 556.22px; top: 173.79px;} #warped .w46 {-moz-transform: rotate(-7.66rad);-webkit-transform: rotate(-7.66rad);-o-transform: rotate(-7.66rad);-ms-transform: rotate(-7.66rad); transform: rotate(-7.66rad); width: 9px; height: 25px; left: 563.83px; top: 157.24px;} #warped .w47 {-moz-transform: rotate(-7.7rad);-webkit-transform: rotate(-7.7rad);-o-transform: rotate(-7.7rad);-ms-transform: rotate(-7.7rad); transform: rotate(-7.7rad); width: 27px; height: 25px; left: 559.15px; top: 133.36px;} #warped .w48 {-moz-transform: rotate(-7.74rad);-webkit-transform: rotate(-7.74rad);-o-transform: rotate(-7.74rad);-ms-transform: rotate(-7.74rad); transform: rotate(-7.74rad); width: 17px; height: 25px; left: 567.71px; top: 108.14px;} #warped .w49 {-moz-transform: rotate(-7.77rad);-webkit-transform: rotate(-7.77rad);-o-transform: rotate(-7.77rad);-ms-transform: rotate(-7.77rad); transform: rotate(-7.77rad); width: 19px; height: 25px; left: 569.25px; top: 84.03px;} #warped .w50 {-moz-transform: rotate(-7.79rad);-webkit-transform: rotate(-7.79rad);-o-transform: rotate(-7.79rad);-ms-transform: rotate(-7.79rad); transform: rotate(-7.79rad); width: 8px; height: 25px; left: 576.11px; top: 66.48px;} \u003C\/style\u003E\u003Cdiv id='warped'\u003E\u003Cspan class='w0'\u003EJ\u003C\/span\u003E\u003Cspan class='w1'\u003Eu\u003C\/span\u003E\u003Cspan class='w2'\u003Eg\u003C\/span\u003E\u003Cspan class='w3'\u003Ea\u003C\/span\u003E\u003Cspan class='w4'\u003En\u003C\/span\u003E\u003Cspan class='w5'\u003Ed\u003C\/span\u003E\u003Cspan class='w6'\u003Eo\u003C\/span\u003E\u003Cspan class='w7'\u003E \u003C\/span\u003E\u003Cspan class='w8'\u003Ec\u003C\/span\u003E\u003Cspan class='w9'\u003Eo\u003C\/span\u003E\u003Cspan class='w10'\u003En\u003C\/span\u003E\u003Cspan class='w11'\u003E \u003C\/span\u003E\u003Cspan class='w12'\u003EC\u003C\/span\u003E\u003Cspan class='w13'\u003ES\u003C\/span\u003E\u003Cspan class='w14'\u003ES\u003C\/span\u003E\u003Cspan class='w15'\u003E3\u003C\/span\u003E\u003Cspan class='w16'\u003E:\u003C\/span\u003E\u003Cspan class='w17'\u003E \u003C\/span\u003E\u003Cspan class='w18'\u003EL\u003C\/span\u003E\u003Cspan class='w19'\u003Ea\u003C\/span\u003E\u003Cspan class='w20'\u003Es\u003C\/span\u003E\u003Cspan class='w21'\u003E \u003C\/span\u003E\u003Cspan class='w22'\u003El\u003C\/span\u003E\u003Cspan class='w23'\u003Eo\u003C\/span\u003E\u003Cspan class='w24'\u003Ec\u003C\/span\u003E\u003Cspan class='w25'\u003Eu\u003C\/span\u003E\u003Cspan class='w26'\u003Er\u003C\/span\u003E\u003Cspan class='w27'\u003Ea\u003C\/span\u003E\u003Cspan class='w28'\u003Es\u003C\/span\u003E\u003Cspan class='w29'\u003E \u003C\/span\u003E\u003Cspan class='w30'\u003Eq\u003C\/span\u003E\u003Cspan class='w31'\u003Eu\u003C\/span\u003E\u003Cspan class='w32'\u003Ee\u003C\/span\u003E\u003Cspan class='w33'\u003E \u003C\/span\u003E\u003Cspan class='w34'\u003Es\u003C\/span\u003E\u003Cspan class='w35'\u003Ee\u003C\/span\u003E\u003Cspan class='w36'\u003E \u003C\/span\u003E\u003Cspan class='w37'\u003Ev\u003C\/span\u003E\u003Cspan class='w38'\u003Ee\u003C\/span\u003E\u003Cspan class='w39'\u003En\u003C\/span\u003E\u003Cspan class='w40'\u003E \u003C\/span\u003E\u003Cspan class='w41'\u003Ee\u003C\/span\u003E\u003Cspan class='w42'\u003En\u003C\/span\u003E\u003Cspan class='w43'\u003E \u003C\/span\u003E\u003Cspan class='w44'\u003El\u003C\/span\u003E\u003Cspan class='w45'\u003Ea\u003C\/span\u003E\u003Cspan class='w46'\u003E \u003C\/span\u003E\u003Cspan class='w47'\u003Ew\u003C\/span\u003E\u003Cspan class='w48'\u003Ee\u003C\/span\u003E\u003Cspan class='w49'\u003Eb\u003C\/span\u003E\u003Cspan class='w50'\u003E.\u003C\/span\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003E\u003Cimg class=\"toVUM\" onclick=\"abrirVUM(this)\" width=\"100\" src=\"http:\/\/3.bp.blogspot.com\/-NqLzTzASiow\/Toy7QlQWdpI\/AAAAAAAASxo\/SfzunkaQF4s\/s00\/csswarp2.png\" style=\"float:left;margin-right:10px;:\"\/\u003EQuienes no posean un navegador que interprete CSS3, pueden ver el resultado haciendo \u003Cspan style=\"font-style: italic;\"\u003Eclick\u003C\/span\u003E en esta imagen o \u003Ca class=\"lightwindow\" href=\"http:\/\/vimeo.com\/moogaloop.swf?clip_id=20555184\" params=\"lightwindow_width=400,lightwindow_height=305,lightwindow_loading_animation=true\" title=\"\" rel=\"\"\u003Eeste video explicativo\u003C\/a\u003E.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"referenciaExterna\"\u003E\u003Cspan\u003EREFERENCIAS:\u003C\/span\u003E\u003Ca style=\"padding-left:0;\" href=\"http:\/\/wwwhatsnew.com\/2011\/10\/05\/csswarp-texto-siguiendo-curvas-en-css3\/\" target=\"_blank\"\u003Ewwwhatsnew.com\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/1627375697149965391\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/10\/csswarp-curvas-al-extremo.html#comment-form","title":"3 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/1627375697149965391"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/1627375697149965391"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/10\/csswarp-curvas-al-extremo.html","title":"CSSWarp: Curvas al extremo"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/-iPM4grZk0nw\/Toy7QSfEPjI\/AAAAAAAASxg\/docxmh_n5C0\/s72-c\/csswarp1.png","height":"72","width":"72"},"thr$total":{"$t":"3"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-7144575029957399169"},"published":{"$t":"2011-10-05T00:05:00.000-03:00"},"updated":{"$t":"2011-10-05T00:05:00.127-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Las posiciones absolutas son relativas a \"algo\""},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EUsar 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, \u003Ci\u003Epaddings\u003C\/i\u003E y flotaciones que siempre perturban ya que afectan al resto de las etiquetas.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEs sencillo, basta agregarle a ese elemento la propiedad \u003Cspan style=\"color: #CCCCFF\"\u003Eposition:absolute\u003C\/span\u003E y luego, establecer los valores de top, right, bottom y\/o left teniendo en cuenta que:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cspan style=\"margin-left:30px;font-weight: bold;\"\u003Etop:0; left:0; \u003C\/span\u003Ees el ángulo superior izquierdo\u003Cbr \/\u003E\n\u003Cspan style=\"margin-left:30px;font-weight: bold;\"\u003Etop:0; right:0; \u003C\/span\u003Ees el ángulo superior derecho\u003Cbr \/\u003E\n\u003Cspan style=\"margin-left:30px;font-weight: bold;\"\u003Ebottom:0; left:0; \u003C\/span\u003Ees el ángulo inferior izquierdo\u003Cbr \/\u003E\n\u003Cspan style=\"margin-left:30px;font-weight: bold;\"\u003Ebottom:0; right:0; \u003C\/span\u003Ees el ángulo inferior derecho\u003Cbr \/\u003E\n\u003Cbr \/\u003E\no sea, los cuatro extremos de ... ¿qué? Esa es la clave; tener la respuesta es lo que evita los problemas.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nLas 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:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;body\u0026gt;\n  .......\n  \u0026lt;div\u0026gt;\n    \u0026lt;div\u0026gt;\n      \u0026lt;div\u0026gt;\n        \u0026lt;img src=\"URL_IMAGEN\" \/\u0026gt;\n      \u0026lt;\/div\u0026gt;\n    \u0026lt;\/div\u0026gt;\n  \u0026lt;\/div\u0026gt;\n  .......\n\u0026lt;\/body\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EPor defecto, se vería algo así:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E.conte {padding:25px;border: 1px solid #888;}\u003C\/style\u003E\u003Cdiv style=\"background-color: #000;\" class=\"conte\"\u003E\u003Cdiv style=\"background-color: #222;\" class=\"conte\"\u003E\u003Cdiv style=\"background-color: #333;padding: 0; height: 156px;\" class=\"conte\"\u003E\u003Cimg src=\"https:\/\/lh6.googleusercontent.com\/-U6y5xNe2QVE\/TQvUfgM4lKI\/AAAAAAAAC3g\/Yyrke33j4zA\/s250\/01_0108.jpg\"\/\u003E\u003C\/div\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003ESi agregáramos position:absolute a la etiqueta IMG ¿dónde se vería?\u003C\/div\u003E\u003Cpre\u003E\u0026lt;img src=\"URL_IMAGEN\" style=\"position: absolute; right: 0; top: 0;\" \/\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EEso 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.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSi el primer DIV tiene esa propiedad, se verá así:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"position: relative; background-color: #000;\" class=\"conte\"\u003E\u003Cspan style=\"color:#AAA;position:absolute;top:3px;left:5px\"\u003Eposition:relative\u003C\/span\u003E\u003Cdiv style=\"background-color: #222;\" class=\"conte\"\u003E\u003Cdiv style=\"background-color: #333;padding: 0; height: 156px;\" class=\"conte\"\u003E\u003Cimg src=\"https:\/\/lh6.googleusercontent.com\/-U6y5xNe2QVE\/TQvUfgM4lKI\/AAAAAAAAC3g\/Yyrke33j4zA\/s250\/01_0108.jpg\" style=\"right: 0pt; position: absolute; top: 0px;\" \/\u003E\u003C\/div\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EY si el segundo DIV tiene esa propiedad, se verá así:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"background-color: #000;\" class=\"conte\"\u003E\u003Cdiv style=\"background-color: #222;position: relative; \" class=\"conte\"\u003E\u003Cspan style=\"color:#AAA;position:absolute;top:3px;left:5px\"\u003Eposition:relative\u003C\/span\u003E\u003Cdiv style=\"background-color: #333;padding: 0; height: 156px;\" class=\"conte\"\u003E\u003Cimg src=\"https:\/\/lh6.googleusercontent.com\/-U6y5xNe2QVE\/TQvUfgM4lKI\/AAAAAAAAC3g\/Yyrke33j4zA\/s250\/01_0108.jpg\" style=\"right: 0pt; position: absolute; top: 0px;\" \/\u003E\u003C\/div\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EY si el tercer DIV tiene esa propiedad, se verá así:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"background-color: #000;\" class=\"conte\"\u003E\u003Cdiv style=\"background-color: #222;\" class=\"conte\"\u003E\u003Cdiv style=\"background-color: #333;padding: 0; height: 156px;position: relative;\" class=\"conte\"\u003E\u003Cspan style=\"color:#AAA;position:absolute;top:3px;left:5px\"\u003Eposition:relative\u003C\/span\u003E\u003Cimg src=\"https:\/\/lh6.googleusercontent.com\/-U6y5xNe2QVE\/TQvUfgM4lKI\/AAAAAAAAC3g\/Yyrke33j4zA\/s250\/01_0108.jpg\" style=\"right: 0pt; position: absolute; top: 0px;\" \/\u003E\u003C\/div\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003ELos valores de top, right, bottom y left también pueden ser negativos y eso, hará que el elemento se \"salga\" de su contenedor:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;img src=\"URL_IMAGEN\" style=\"position: absolute; right: 0; top: -50px;\" \/\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"background-color: #000;\" class=\"conte\"\u003E\u003Cdiv style=\"background-color: #222;position: relative;\" class=\"conte\"\u003E\u003Cspan style=\"color:#AAA;position:absolute;top:3px;left:5px\"\u003Eposition:relative\u003C\/span\u003E\u003Cdiv style=\"background-color: #333;padding: 0; height: 156px;\" class=\"conte\"\u003E\u003Cimg src=\"https:\/\/lh6.googleusercontent.com\/-U6y5xNe2QVE\/TQvUfgM4lKI\/AAAAAAAAC3g\/Yyrke33j4zA\/s250\/01_0108.jpg\" style=\"right: 0pt; position: absolute; top: -50px;\" \/\u003E\u003C\/div\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EPero ... siempre hay un pero, no se verá o se verá parcialmente si los contenedores tienen agregada la propiedad overflow:hidden:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"background-color: #000;\" class=\"conte\"\u003E\u003Cdiv style=\"background-color: #222;position: relative; overflow: hidden;\" class=\"conte\"\u003E\u003Cspan style=\"color:#AAA;position:absolute;top:3px;left:5px\"\u003Eposition:relative + overflow:hidden\u003C\/span\u003E\u003Cdiv style=\"background-color: #333;padding: 0; height: 156px;\" class=\"conte\"\u003E\u003Cimg src=\"https:\/\/lh6.googleusercontent.com\/-U6y5xNe2QVE\/TQvUfgM4lKI\/AAAAAAAAC3g\/Yyrke33j4zA\/s250\/01_0108.jpg\" style=\"right: 0pt; position: absolute; top: -50px;\" \/\u003E\u003C\/div\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/7144575029957399169\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/10\/las-posiciones-absolutas-son-relativas.html#comment-form","title":"23 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/7144575029957399169"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/7144575029957399169"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/10\/las-posiciones-absolutas-son-relativas.html","title":"Las posiciones absolutas son relativas a \"algo\""}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/lh6.googleusercontent.com\/-U6y5xNe2QVE\/TQvUfgM4lKI\/AAAAAAAAC3g\/Yyrke33j4zA\/s72-c\/01_0108.jpg","height":"72","width":"72"},"thr$total":{"$t":"23"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-3577812885418507113"},"published":{"$t":"2011-09-29T00:05:00.001-03:00"},"updated":{"$t":"2017-08-19T02:12:25.662-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"La propiedad text-overflow"},"content":{"type":"html","$t":"\u003Cdiv class=\"vagacode\"\u003E\u003Cdiv class=\"sue\"\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/qL1Zfc2.jpg\"\u003E\u003Cp\u003EUna 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.\u003C\/p\u003E\u003C\/div\u003E\u003Cdiv class=\"gowi\"\u003E\u003Cspan\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/yrSqFzYl.png\"\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/cuando-las-cosas-se-desbordan\"\u003Eleer artículo actualizado\u003C\/a\u003E\u003C\/span\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/\"\u003E\u003Cimg class=\"wlogo\" src=\"http:\/\/i.imgur.com\/QZHLte7.png\"\u003E\u003C\/a\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/3577812885418507113\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/09\/la-propiedad-text-overflow.html#comment-form","title":"6 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/3577812885418507113"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/3577812885418507113"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/09\/la-propiedad-text-overflow.html","title":"La propiedad text-overflow"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"6"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-728353009451242279"},"published":{"$t":"2011-09-26T00:02:00.001-03:00"},"updated":{"$t":"2011-09-26T00:02:01.017-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Jugando a superponer contenidos"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003ENo me canso de repetir lo mismo porque es la clave para entender cómo funciona una página \u003Cspan style=\"font-style: italic;\"\u003Eweb\u003C\/span\u003E: 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.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEsto 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 \u003Cspan style=\"font-weight: bold;\"\u003Eoutline\u003C\/span\u003E:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Ca href=\"javascript:void(0);\" onclick=\"aoutline(1);\"\u003Ever\u003C\/a\u003E | \u003Ca href=\"javascript:void(0);\" onclick=\"aoutline(0);\"\u003Eocultar\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003ENo 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 \u003Ci\u003Einline\u003C\/i\u003E, 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.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEl 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.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSuponiendo que dentro de un DIV contenedor al que dimensiono con \u003Cspan style=\"font-weight: bold;\"\u003Eheight\u003C\/span\u003E y \u003Cspan style=\"font-weight: bold;\"\u003Ewidth\u003C\/span\u003E, coloco otros dos del mismo tamaño, lo que veré es uno debajo del otro:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div\u0026gt;\n\u0026lt;div\u0026gt; ....... el contenido superior ....... \u0026lt;\/div\u0026gt;\n\u0026lt;div\u0026gt; ....... el contenido inferior ....... \u0026lt;\/div\u0026gt;\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cstyle\u003E.efectos {background-color: #000;border: 2px solid #465;color: #FFF;font-family: Tahoma;font-size: 16px;height: 100px;margin: 0 auto;padding: 10px;position: relative;width: 250px;} .efectos div {height: 100px;width: 250px;position:absolute;top:10px;left:10px;} .eloculto {background: url(https:\/\/lh5.googleusercontent.com\/-q0HVa8JwEOc\/TbX1dXdW4aI\/AAAAAAAADkg\/lyA_70pg-io\/s400\/09_0335.jpg) no-repeat 50% 45% transparent;color: DarkSeaGreen;display: inline-table;font-size: 70px;text-align: center;} .elvisible {background-color: #000;} .eopacidad {\n-moz-transition: opacity 1s;-webkit-transition: opacity 1s;-o-transition: opacity 1s;opacity: 1;filter:alpha(opacity=100);} .eopacidad:hover {opacity:0;filter:alpha(opacity=0);} #arriba1 {z-index: 2;} #abajo1 {z-index: 1;} #arriba3 {-moz-transition: top 1s;-webkit-transition: top 1s;-o-transition: top 1s;top: :0;} #abajo3 {top: 120px !important;-moz-transition: top 1s;-webkit-transition: top 1s;-o-transition: top 1s;} #toptop {overflow: hidden;} #toptop:hover #abajo3 {top: 10px !important;} #toptop:hover #arriba3 {top: -120px !important;} \u003C\/style\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"efectos\" style=\"height:100%\"\u003E\u003Cdiv style=\"background-color: #000;position:static\"\u003E\u003Cimg style=\"float:left\" src=\"https:\/\/lh3.googleusercontent.com\/-FCgQmFhxbL8\/TMSpzt1IJzI\/AAAAAAAABCY\/f4Lz_Ac0FK8\/s128\/09_0166.jpg\"\/\u003EVestibulum in ipsum quis diam convallis accumsan et sit amet eros.\u003C\/div\u003E\u003Cdiv class=\"eloculto\" style=\"position:static\"\u003Eabajo\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003ESi invertimos el orden, pasará lo mismo; el que esté primero se verá arriba y el otro abajo:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"efectos\" style=\"height:100%\"\u003E\u003Cdiv class=\"eloculto\" style=\"position:static\"\u003Earriba\u003C\/div\u003E\u003Cdiv style=\"background-color: #000;position:static\"\u003E\u003Cimg style=\"float:left\" src=\"https:\/\/lh3.googleusercontent.com\/-FCgQmFhxbL8\/TMSpzt1IJzI\/AAAAAAAABCY\/f4Lz_Ac0FK8\/s128\/09_0166.jpg\"\/\u003EVestibulum in ipsum quis diam convallis accumsan et sit amet eros.\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003ESuperponer ambos es algo bastante simple, lo fundamental es que al contenedor le agreguemos la propiedad \u003Cspan style=\"color: #CCCCFF\"\u003Eposition: relative\u003C\/span\u003E y a los contenidos la propiedad \u003Cspan style=\"color: #CCCCFF\"\u003Eposition: absolute\u003C\/span\u003E con valores cero en \u003Cspan style=\"color: #CCCCFF\"\u003Eleft\u003C\/span\u003E y \u003Cspan style=\"color: #CCCCFF\"\u003Etop\u003C\/span\u003E:\u003C\/div\u003E\u003Cpre\u003E.demos {\n    height: 100px;\n    margin: 0 auto;\n    position: relative;\n    width: 250px;\n}\n.demos div {\n  left: 0;\n  height: 100px;\n  top: 0;\n  width: 250px;\n  position:absolute;\n}\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EPuestos 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.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEse tipo de efecto se puede hacer de muchas maneras, por ejemplo, permutando la opacidad:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;style\u0026gt;\n  .elvisible { opacity: 1; z-index: 2; }\n  .elvisible:hover { opacity: 0; }\n  eloculto { z-index: 1; }\n\u0026lt;\/style\u0026gt;\n\n\u0026lt;div class=\"demos\"\u0026gt;\n  \u0026lt;div class=\"elvisible\"\u0026gt; ....... el contenido visible ....... \u0026lt;\/div\u0026gt;\n  \u0026lt;div class=\"eloculto\"\u0026gt; ....... el contenido oculto ....... \u0026lt;\/div\u0026gt;\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cdiv class=\"efectos\"\u003E\u003Cdiv id=\"arriba1\" class=\"elvisible eopacidad\"\u003E\u003Cimg style=\"float:left\" src=\"https:\/\/lh3.googleusercontent.com\/-FCgQmFhxbL8\/TMSpzt1IJzI\/AAAAAAAABCY\/f4Lz_Ac0FK8\/s128\/09_0166.jpg\"\/\u003EVestibulum in ipsum quis diam convallis accumsan et sit amet eros.\u003C\/div\u003E\u003Cdiv id=\"abajo1\" class=\"eloculto\"\u003Eabajo\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EUsamos \u003Cspan style=\"color: #CCCCFF\"\u003Ez-index\u003C\/span\u003E 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 \u003Cspan style=\"color: #CCCCFF\"\u003Ez-index\u003C\/span\u003E:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div class=\"demos\"\u0026gt;\n  \u0026lt;div\u0026gt; ....... el contenido oculto ....... \u0026lt;\/div\u0026gt;\n  \u0026lt;div class=\"elvisible\"\u0026gt; ....... el contenido visible ....... \u0026lt;\/div\u0026gt;\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cdiv class=\"efectos\"\u003E\u003Cdiv id=\"arriba2\" class=\"eloculto\"\u003Earriba\u003C\/div\u003E\u003Cdiv id=\"abajo2\" class=\"elvisible eopacidad\"\u003E\u003Cimg style=\"float:left\" src=\"https:\/\/lh3.googleusercontent.com\/-FCgQmFhxbL8\/TMSpzt1IJzI\/AAAAAAAABCY\/f4Lz_Ac0FK8\/s128\/09_0166.jpg\"\/\u003EVestibulum in ipsum quis diam convallis accumsan et sit amet eros.\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EEn estos ejemplo, tambien se aplica una transición que indicamos en el DIV visible por defecto:\u003C\/div\u003E\u003Cpre\u003Eelvisible {\n  -moz-transition: opacity 1s;\n  -webkit-transition: opacity 1s;\n  -o-transition: opacity 1s;\n}\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EFácilmente, podríamos usar otros efectos, por ejemplo, haciendo que el que está debajo \"suba\"; este sería el ejemplo concreto:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"linkContraido\" onclick=\"SINO('demotoptop');\"\u003E\u003C\/div\u003E\u003Cpre id=\"demotoptop\" class=\"elementoOculto\"\u003E\u0026lt;style\u0026gt;\n  #toptop {\n    background-color: #000;\n    border: 2px solid #465;\n    color: #FFF;\n    font-family: Tahoma;\n    font-size: 16px;\n    height: 100px;\n    margin: 0 auto;\n    overflow: hidden;\n    padding: 10px;\n    position: relative;\n    width: 250px;\n  }\n  #toptop div {\n    height: 100px;\n    left: 10px;\n    position: absolute;\n    top: 10px;\n    width: 250px;\n  }\n  #toptop #arriba {\n    background-color: #000000;\n    -moz-transition: top 1s ease 0s;\n    -webkit-transition: top 1s ease 0s;\n    -o-transition: top 1s ease 0s;\n     top: -100px;\n  }\n  #toptop #abajo {\n    -moz-transition: top 1s ease 0s;\n    -webkit-transition: top 1s ease 0s;\n    -o-transition: top 1s ease 0s;\n    top: 120px !important;\n  }\n  #toptop:hover #arriba {\n    top: -120px !important;\n  }\n  #toptop:hover #abajo {\n    top: 10px !important;\n  }\n\u0026lt;\/style\u0026gt;\n\n\u0026lt;div id=\"toptop\"\u0026gt;\n  \u0026lt;div id=\"arriba\"\u0026gt; ....... el contenido visible ....... \u0026lt;\/div\u0026gt;\n  \u0026lt;div class=\"eloculto\" id=\"abajo3\" style=\"top:10px;\"\u0026gt; ....... el contenido oculto ....... \u0026lt;\/div\u0026gt;\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"efectos\" id=\"toptop\"\u003E\u003Cdiv class=\"elvisible\" id=\"arriba3\"\u003E\u003Cimg src=\"https:\/\/lh3.googleusercontent.com\/-FCgQmFhxbL8\/TMSpzt1IJzI\/AAAAAAAABCY\/f4Lz_Ac0FK8\/s128\/09_0166.jpg\" style=\"float:left\"\u003EVestibulum in ipsum quis diam convallis accumsan et sit amet eros.\u003C\/div\u003E\u003Cdiv class=\"eloculto\" id=\"abajo3\" style=\"top:10px;\"\u003Eabajo\u003C\/div\u003E\u003C\/div\u003E\u003Cstyle\u003E.outsi {outline:1px solid red !important;} .outno {outline:none !important;}\u003C\/style\u003E\u003Cbr \/\u003E\n\u003Cscript\u003Efunction aoutline(flag) {\nvar listaEnlaces = document.getElementsByTagName(\"a\");\nfor(var i=0; i\u003ClistaEnlaces.length; ++i) {\nif(flag==1) {listaEnlaces[i].className = \"outsi\";} else {listaEnlaces[i].className = \"outno\";}\n}\n}\n\u003C\/script\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/728353009451242279\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/09\/jugando-superponer-contenidos.html#comment-form","title":"13 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/728353009451242279"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/728353009451242279"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/09\/jugando-superponer-contenidos.html","title":"Jugando a superponer contenidos"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/lh3.googleusercontent.com\/-FCgQmFhxbL8\/TMSpzt1IJzI\/AAAAAAAABCY\/f4Lz_Ac0FK8\/s72-c\/09_0166.jpg","height":"72","width":"72"},"thr$total":{"$t":"13"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-4281648754744251876"},"published":{"$t":"2011-09-21T00:05:00.002-03:00"},"updated":{"$t":"2011-09-21T00:52:57.085-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Transiciones sin usar :hover"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003ELas \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2011\/03\/introduccion-las-transiciones-con-css.html\" target=\"_blank\"\u003Etransiciones\u003C\/a\u003E son efectos que podemos agregar fácilmente a cualquier etiqueta y funcionarán en todos los navegadores excepto en Internet Explorer que aún no las ha implementado ni siquiera en las versiones más recientes.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSon simples, no dan problemas pero tienen una limitación, el CSS no reacciona a eventos como \u003Cspan style=\"font-style: italic;\"\u003Eclicks\u003C\/span\u003E, y en principio, sólo disponemos de la posibilidad de usar \u003Cspan style=\"color: #CCCCFF\"\u003E:hover\u003C\/span\u003E, es decir, podemos cambiar algo cuando ponemos el cursor del ratón encima y hacer que ese cambio se anime.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEn este ejemplo, hacemos que el ancho (width) cambie:\u003C\/div\u003E\u003Cpre\u003E.demo {\n  background-color: #456;\n  color: #EEE;\n  display: table-cell;\n  font-size: 40px;\n  height: 50px;\n  text-align: center;\n  padding: 10px;\n  vertical-align: middle;\n  width: 200px;\n  -moz-transition: width 1s;\n  -webkit-transition: width 1s;\n  -o-transition: width 1s;\n  transition: width 1s;\n}\n.demo:hover {\n  width: 500px;\n}\u003C\/pre\u003E\u003Cstyle\u003E .demoTbox {background-color: #456;color: #EEE;cursor:pointer;height: 50px;width: 200px;text-align: center;padding: 10px;font-size: 40px;display: table-cell;vertical-align: middle;} .demoTbox1 {-moz-transition: width 1s;-webkit-transition: width 1s;-o-transition: width 1s;transition: width 1s;} .demoTbox1:hover {width: 500px;}\n.demoTbox2 {-moz-transition: width 1s, height 1s, font-size 1s;-webkit-transition: width 1s, height 1s, font-size 1s;-o-transition: width 1s, height 1s, font-size 1s;transition: width 1s, height 1s, font-size 1s;} .demoTbox2:active {height: 300px;width: 500px;font-size: 100px;} \u003C\/style\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"demoTbox demoTbox1\"\u003EHOLA\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EEn \u003Ca href=\"http:\/\/www.impressivewebs.com\/css3-transitions-without-hover\/\" target=\"_blank\"\u003Eimpressivewebs.com\u003C\/a\u003E nos dan otras ideas, para tratar de usar transiciones con otro tipo de eventos y algunos de ellos son muy interesantes; por ejemplo, usando \u003Cspan style=\"color: #CCCCFF\"\u003E:active\u003C\/span\u003E en lugar de \u003Cspan style=\"color: #CCCCFF\"\u003E:hover\u003C\/span\u003E.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cspan style=\"color: #CCCCFF\"\u003E:active \u003C\/span\u003Ees una \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2009\/04\/pseudo-clases-y-pseudo-elementos-1.html\" target=\"_blank\"\u003Epseudo-clase\u003C\/a\u003E que podríamos decir que funciona de manera similar a un \u003Ci\u003Eonclick\u003C\/i\u003E ya que se ejecuta justamente cuando pulsamos el botón del ratón y se desactiva cuando lo soltamos.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nModificamos entonces un poco las reglas anteriores para que cambie el ancho, el alto y ya que estamos, también el tamaño de la fuente:\u003C\/div\u003E\u003Cpre\u003E.demo {\n  .......\n    -moz-transition: width 1s, height 1s, font-size 1s;\n    -webkit-transition: width 1s, height 1s, font-size 1s;\n    -o-transition: width 1s, height 1s, font-size 1s;\n    transition: width 1s, height 1s, font-size 1s;\n}\n.demo:active {\n  font-size: 100px;\n  height: 300px;\n  width: 500px;\n}\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003E¿Cómo funcionará? Si hacemos \u003Ci\u003Eclick\u003C\/i\u003E en el elemento y mantenemos pulsado el botón del ratón, este se irá ampliando hasta el máximo que hayamos establecido; si soltamos el botón, volverá a su estado natural.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"demoTbox demoTbox2\"\u003EHOLA\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EAlgo similar se puede lograr en los formularios usando la pseudo-clase \u003Cspan style=\"color: #CCCCFF\"\u003E:focus\u003C\/span\u003E que se activará cuando ingresemos un dato:\u003C\/div\u003E\u003Cpre\u003Einput.demo {\n  background: #FFF;\n  border: 2px solid #ABC;\n  font-size: 20px;\n  height: 30px;\n  text-align: left;\n  padding: 0 30px;\n  width: 90px;\n  -moz-transition: width 1s;\n  -webkit-transition: width 1s;\n  -o-transition: width 1s;\n  transition: width 1s;\n}\ninput.demoI:focus {\n  width: 300px;\n}\u003C\/pre\u003E\u003Cstyle\u003Einput.demoI {background: #FFF url(http:\/\/3.bp.blogspot.com\/_hljKDuw-cxQ\/SRW_3-NMIiI\/AAAAAAAAIhU\/Prj4Nj-4tx8\/s00\/magplus.gif) no-repeat 5px 50%;border: 2px solid #ABC;font-size: 20px;height: 30px;text-align: left;padding: 0 30px;width: 90px;-moz-transition: width 1s;-webkit-transition: width 1s;-o-transition: width 1s;transition: width 1s;}  \ninput.demoI:focus {width: 300px;} \u003C\/style\u003E\u003Cbr \/\u003E\n\u003Cinput class=\"demoI\" type=\"text\"\/\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003E¿Y qué pasará en Internet Explorer? Nada; funcionarán perfectamente excepto que los cambios no se animarán así que son propiedades que pueden utilizarse sin generar conflictos.\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/4281648754744251876\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/09\/transiciones-sin-usar-hover.html#comment-form","title":"17 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/4281648754744251876"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/4281648754744251876"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/09\/transiciones-sin-usar-hover.html","title":"Transiciones sin usar :hover"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"17"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-2476310636897507504"},"published":{"$t":"2011-09-16T00:05:00.000-03:00"},"updated":{"$t":"2011-09-16T00:05:00.665-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Los pixeles son unidades indivisibles"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EEs muy común ver que en las reglas de estilo se usen valores en pixeles con decimales; esto no es algo que vaya a provocar un error pero es inútil ya que los pixeles son unidades indivisibles.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nAsí que si algo mide 200 pixeles, 200.5 o 200.8 es indistinto pero ... alguien puede decir \"no, si yo pongo un decimal se ve más grande que si no lo pongo\" y eso es verdad pero no es cierto. Lo que ocurre es que los navegadores interpretan esos decimales de distintas formas. Es más, no estoy seguro si los mismos procesadores de cada PC no influyen en estas cosas.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nDe todas maneras, en términos generales:\u003C\/div\u003E\u003Cul class=\"lista\"\u003E\u003Cli\u003Een Firefox los decimales superiores a .5 serán redondeados hacia arriba\u003C\/li\u003E\n\u003Cli\u003Een IE los decimales serán redondeados hacia arriba\u003C\/li\u003E\n\u003Cli\u003Een Chorme el decimal será ignorado\u003C\/li\u003E\n\u003C\/ul\u003E\u003Cdiv style=\"text-align: justify;\"\u003EPara colmo de males, veremos una cosa pero la aritmética nos engañará.:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E.pixeldemo {background-color: #FFF;border-bottom: 1px solid #101921;height: 50px;margin-left: 100px;} .pixeldemo span {display:inline-block;padding:10px 20px;font-size:24px;color:#000;}\u003C\/style\u003E\u003Cdiv class=\"pixeldemo\" style=\"width:200px;\"\u003E\u003Cspan\u003E200\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"pixeldemo\" style=\"width:200.2px;\"\u003E\u003Cspan\u003E200.2\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"pixeldemo\" style=\"width:200.5px;\"\u003E\u003Cspan\u003E200.5\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"pixeldemo\" style=\"width:200.8px;\"\u003E\u003Cspan\u003E200.8\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"pixeldemo\" style=\"width:201px;\"\u003E\u003Cspan\u003E201\u003C\/span\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EObviamente, son sutilezas pero, un pixel de diferencia puede significar mucho ya que si colocamos dos elementos uno al lado del otro y uno de ellos supera el ancho del contenedor, se mostrará debajo.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nUn ejemplo; tengo dos contenidos que flotan y miden 200.5 pixeles; hago cuentas y llego a la conclusión que necesito un contenedor de 401 pixeles ... es fácil pero:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"width:400px;height:50px;margin:0 auto;\"\u003E\u003Cdiv class=\"pixeldemo\" style=\"float:left;width:200.5px;margin:0;\"\u003E\u003Cspan\u003E200.5\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"pixeldemo\" style=\"float:right;width:200.5px;margin:0;\"\u003E\u003Cspan\u003E200.5\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"clear:both\"\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EEn Firefox e IE no se verán uno al lado del otro y en Chorme si.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nMoraleja: Para evitar un problema, lo mejor es no generarlo así que, simplemente, no debemos usar valores decimales y listo ¿Para qué complicarse la vida?\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/2476310636897507504\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/09\/los-pixeles-son-unidades-indivisibles.html#comment-form","title":"0 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/2476310636897507504"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/2476310636897507504"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/09\/los-pixeles-son-unidades-indivisibles.html","title":"Los pixeles son unidades indivisibles"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-1436695643629775289"},"published":{"$t":"2011-09-12T00:04:00.000-03:00"},"updated":{"$t":"2011-09-12T00:04:00.170-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Pop-Up sólo con CSS"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EEste es otro intento de \u003Ca href=\"http:\/\/css-tricks.com\/13881-fold-out-popups\/\" target=\"_blank\"\u003ECSS-tricks\u003C\/a\u003E para tratar de controlas el evento \u003Ci\u003Eclick\u003C\/i\u003E con CSS, usando, como en \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2011\/08\/variante-de-pestanas-usando-solo-css.html\" target=\"_blank\"\u003Eel ejemplo\u003C\/a\u003E publicado hace unos días, etiquetas que normalmente están reservadas para la creación de formularios tales como INPUT y LABEL.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nAquí, se trata de crear un \u003Ci\u003Epop-up\u003C\/i\u003E; una ventanita con cierto contenido, que se abra cuando hacemos \u003Ci\u003Eclick\u003C\/i\u003E en alguna clase de botón y que, en principio, podría contener cualquier cosa.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEn este ejemplo, he jugado un poco, eliminado cosas, agregando otras, probando a ver qué salía y lo primero que debería aclarar es que no funciona en versiones anteriores a IE9 y no sé si lo hace en esa versión. Lo segundo es que no he encontrado la forma de poder controlar cuando se intenta poner dos o más en lugar de una salvo repitiendo el CSS y usando IDs en lugar de clases cosa que no tiene mucho sentido así que esa parte, quedará pendiente y si alguien tiene una idea, soy todo oidos.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E.elboton {background-color: #AAA;border-radius: 10px;box-shadow: 0 0 10px #222 inset;color: #FFF;cursor: pointer;display: inline-block;font-size: 20px;margin: 0;padding: 5px 15px;position: relative;text-shadow: 1px 1px 1px #000;}\n.elboton br {display:none;} .hiddenbox {background-color: #FFF;border-radius: 10px;box-shadow: 0 0 15px #000 inset;left: 0;line-height: 0;margin: 25px 0;opacity: 0;padding: 15px;position: absolute;text-align: center;top: 100%;z-index: 100;-moz-transform-origin: 0 0;-webkit-transform-origin: 0 0;-o-transform-origin: 0 0;-ms-transform-origin: 0 0;-moz-transform: scale(0);-webkit-transform: scale(0);-o-transform: scale(0);-ms-transform: scale(0);-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;-ms-transition: all 1s;} .popUpControl {display: none;} .popUpControl:checked ~ label \u003E .hiddenbox {opacity: 1;-moz-transform: scale(1);-webkit-transform: scale(1);-o-transform: scale(1);-ms-transform: scale(1);} .popUpControl:checked ~ label \u003E span.click {display: none;} .popUpControl:checked ~ label:before {content: \"ocultar\";} \u003C\/style\u003E\u003Cinput type=\"checkbox\" id=\"popup\" class=\"popUpControl\"\u003E\u003Clabel class=\"elboton\" for=\"popup\"\u003E\u003Cspan class=\"click\"\u003Emostrar\u003C\/span\u003E\u003Cspan class=\"hiddenbox\"\u003E\u003Cimg src=\"http:\/\/lh6.ggpht.com\/_hljKDuw-cxQ\/TMu__P9eHTI\/AAAAAAAAQww\/fCfUHT46D28\/s350\/songletras-101.jpg\"\u003E\u003Cspan style=\"display:block;padding:10px 10px 5px;font-size:15px;color:#000;text-shadow:none;line-height:1;\"\u003Eeste es otro contenido con cualquier cosa que uno quiera, incluyendo enlaces \u003Ca target=\"_blank\" href=\"http:\/\/labeatlemania.blogspot.com\/\"\u003E\u003Cimg src=\"http:\/\/4.bp.blogspot.com\/-p_Uh79z3PNc\/TmKJXAtv8SI\/AAAAAAAASs0\/dofUN1igs0A\/s00\/lbwhite.png\"\u003E\u003C\/a\u003E o imágenes\u003C\/span\u003E\u003C\/span\u003E\u003C\/label\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EEste sería el HTML:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;input type=\"checkbox\" id=\"popup\" class=\"popUpControl\"\u0026gt;\n\u0026lt;label class=\"elboton\" for=\"popup\"\u0026gt;\n  \u0026lt;span class=\"click\"\u0026gt;mostrar\u0026lt;\/span\u0026gt;\n  \u0026lt;span class=\"hiddenbox\"\u0026gt;\n    .......\n  \u0026lt;\/span\u0026gt;\n\u0026lt;\/label\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ELa etiqueta INPUT que es del tipo checkbox, permanecerá oculta siempre pero, es la que no permitirá usar sólo CSS ya que podemos saber si está \"marcada\" ya que, cuando hacemos \u003Ci\u003Eclick\u003C\/i\u003E, cambia la propiedad llamada checked.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nLa etiqueta LABEL se asocia a la primera y es lo que veremos. Un SPAN es el pseudo-botón y otro SPAN el contenido que permutará, haciéndose visible u ocultándose, con alguna clase de animación.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEl CSS:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;style\u0026gt;\n  \/* la etiqueta LABEL *\/\n  .elboton {\n    background-color: #AAA;\n    border-radius: 10px;\n    box-shadow: 0 0 10px #222 inset;\n    color: #FFF;\n    cursor: pointer;\n    display: inline-block;\n    font-size: 20px;\n    margin: 0;\n    padding: 5px 15px;\n    position: relative;\n    text-shadow: 1px 1px 1px #000;\n  }\n  \/* en un post de Blogger. oculto los saltos de línea internos para no volverme loco *\/\n  .elboton br {display:none;}\n  \/* el contenedor con lo lo que queremos mostrar *\/\n  .hiddenbox {\n    background-color: #FFF;\n    border-radius: 10px;\n    box-shadow: 0 0 15px #000 inset;\n    left: 0;\n    line-height: 0;\n    margin: 25px 0;\n    opacity: 0;\n    padding: 15px;\n    position: absolute;\n    text-align: center;\n    top: 100%;\n    z-index: 100;\n    -moz-transform-origin: 0 0;\n    -webkit-transform-origin: 0 0;\n    -o-transform-origin: 0 0;\n    -ms-transform-origin: 0 0;\n    -moz-transform: scale(0);\n    -webkit-transform: scale(0);\n    -o-transform: scale(0);\n    -ms-transform: scale(0);\n    -moz-transition: all 1s;\n    -webkit-transition: all 1s;\n    -o-transition: all 1s;\n    -ms-transition: all 1s;\n  }\n  \/* se muestra el contenido oculto *\/\n  .popUpControl:checked ~ label \u003E .hiddenbox {\n    opacity: 1;\n    -moz-transform: scale(1);\n    -webkit-transform: scale(1);\n    -o-transform: scale(1);\n    -ms-transform: scale(1);\n  }\n  \/* el CHECKBOX lo mantenemos siempre oculto *\/\n  .popUpControl {display: none;}\n  \/* cambiamos el texto del pseudo-botón *\/\n  .popUpControl:checked ~ label \u003E span.click {display: none;}\n  .popUpControl:checked ~ label:before {content: \"ocultar\";}\n\u0026lt;\/style\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EAh. Me olvidaba. Tampoco tengo idea de cómo hacer que \u003Cspan style=\"font-style: italic;\"\u003Epop-up\u003C\/span\u003E se anime cuando aparece; sólo lo hace cuando se oculta.\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/1436695643629775289\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/09\/pop-up-solo-con-css.html#comment-form","title":"9 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/1436695643629775289"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/1436695643629775289"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/09\/pop-up-solo-con-css.html","title":"Pop-Up sólo con CSS"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/lh6.ggpht.com\/_hljKDuw-cxQ\/TMu__P9eHTI\/AAAAAAAAQww\/fCfUHT46D28\/s72-c\/songletras-101.jpg","height":"72","width":"72"},"thr$total":{"$t":"9"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-7392510373451027560"},"published":{"$t":"2011-08-31T00:00:00.000-03:00"},"updated":{"$t":"2011-08-31T00:00:03.238-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Variante de pestañas usando sólo CSS"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003ELas \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2010\/04\/tabs-solo-con-css.html\" target=\"_blank\"\u003Epestañas que se crean usando sólo CSS\u003C\/a\u003E, tienen una limitación, sólo es posible activarlas utilizando :hover ya que no existe la posibilidad de usar el evento \u003Cspan style=\"font-style: italic;\"\u003Eclick\u003C\/span\u003E así que su contenido se muestra cuando ponemos el cursor encima y desaparece cuando lo sacamos pero, \u003Ca href=\"http:\/\/css-tricks.com\/13758-functional-css-tabs-revisited\/\" target=\"_blank\"\u003ECSS-tricks\u003C\/a\u003E ha encontrado una variante que nos permite controlar esa visibilidad de manera eficiente, utilizando etiquetas que normalmente no usaríamos; específicamente, las etiquetas input y label.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nVeamos el HTML básico de un ejemplo con tres pestañas:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div class=\"tabs\"\u0026gt;\r\n   \u0026lt;div class=\"tab\"\u0026gt;\r\n       \u0026lt;input type=\"radio\" id=\"tab-1\" name=\"tab-group-1\" checked\u0026gt;\r\n       \u0026lt;label for=\"tab-1\"\u0026gt;Primera\u0026lt;\/label\u0026gt;\r\n       \u0026lt;div class=\"content\"\u0026gt; el contenido de la pestaña 1 \u0026lt;\/div\u0026gt;\r\n   \u0026lt;\/div\u0026gt;\r\n   \u0026lt;div class=\"tab\"\u0026gt;\r\n       \u0026lt;input type=\"radio\" id=\"tab-2\" name=\"tab-group-1\"\u0026gt;\r\n       \u0026lt;label for=\"tab-2\"\u0026gt;Segunda\u0026lt;\/label\u0026gt;\r\n       \u0026lt;div class=\"content\"\u0026gt; el contenido de la pestaña 2 \u0026lt;\/div\u0026gt;\r\n   \u0026lt;\/div\u0026gt;\r\n    \u0026lt;div class=\"tab\"\u0026gt;\r\n       \u0026lt;input type=\"radio\" id=\"tab-3\" name=\"tab-group-1\"\u0026gt;\r\n       \u0026lt;label for=\"tab-3\"\u0026gt;Tercera\u0026lt;\/label\u0026gt;\r\n       \u0026lt;div class=\"content\"\u0026gt; el contenido de la pestaña 3 \u0026lt;\/div\u0026gt;\r\n   \u0026lt;\/div\u0026gt;\r\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ENo. Nada de esto funcionará en las viejas versiones de Internet Explorer aunque podría intentarse hacer modificaciones y probar, cosa que no he hecho y no pienso hacer por ahora.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nAhora el CSS que ponemos antes de \u0026head\u0026gt;\u003C\/div\u003E\u0026lt;style\u0026gt;\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n.tabs { \/* es el rectángulo contenedor *\/\u003Cbr \/\u003E\nmargin: 0 auto;\u003Cbr \/\u003E\nmin-height: 200px;\u003Cbr \/\u003E\nposition: relative;\u003Cbr \/\u003E\nwidth: 550px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.tab { \/* cada una de las pestañas *\/\u003Cbr \/\u003E\nfloat: left;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.tab label { \/* la parte superior con el título de la pestaña *\/\u003Cbr \/\u003E\nbackground-color: #456;\u003Cbr \/\u003E\nborder-radius: 5px 5px 0 0;\u003Cbr \/\u003E\nbox-shadow: -3px 3px 2px #678 inset;\u003Cbr \/\u003E\ncolor: #DDD;\u003Cbr \/\u003E\ncursor: pointer;\u003Cbr \/\u003E\nleft: 0;\u003Cbr \/\u003E\nmargin-right: 1px;\u003Cbr \/\u003E\npadding: 5px 15px;\u003Cbr \/\u003E\nposition: relative;\u003Cbr \/\u003E\ntext-shadow: 1px 1px #000;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n\/* el control input sólo lo necesitamos para que las pestañas permanezcan abiertas así que lo ocultamos *\/\u003Cbr \/\u003E\n.tab [type=radio] { display: none; }\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\/* el contenido de las pestañas *\/\u003Cbr \/\u003E\n.content {\u003Cbr \/\u003E\nbackground-color: #678;\u003Cbr \/\u003E\nbottom: 0;\u003Cbr \/\u003E\nleft: 0;\u003Cbr \/\u003E\noverflow: hidden;\u003Cbr \/\u003E\npadding: 20px;\u003Cbr \/\u003E\nposition: absolute;\u003Cbr \/\u003E\nright: 0;\u003Cbr \/\u003E\ntop: 23px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n\/* y un poco de animación *\/\u003Cbr \/\u003E\n.content \u0026gt; * {\u003Cbr \/\u003E\nopacity: 0;\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n-moz-transform: translateX(-100%);\u003Cbr \/\u003E\n-webkit-transform: translateX(-100%);\u003Cbr \/\u003E\n-o-transform: translateX(-100%);\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n-moz-transition: all 0.6s ease;\u003Cbr \/\u003E\n-webkit-transition: all 0.6s ease;\u003Cbr \/\u003E\n-o-transition: all 0.6s ease;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\/* controlamos la pestaña activa *\/\u003Cbr \/\u003E\n[type=\"radio\"]:checked ~ label {\u003Cbr \/\u003E\nbackground-color: #678;\u003Cbr \/\u003E\nbox-shadow: 0 3px 2px #89A inset;\u003Cbr \/\u003E\ncolor: #FFF;\u003Cbr \/\u003E\nz-index: 2;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n[type=radio]:checked ~ label ~ .content { z-index: 1; }\u003Cbr \/\u003E\n[type=radio]:checked ~ label ~ .content \u0026gt; * {\u003Cbr \/\u003E\nopacity: 1;\u003Cbr \/\u003E\n-moz-transform: translateX(0);\u003Cbr \/\u003E\n-webkit-transform: translateX(0);\u003Cbr \/\u003E\n-o-transform: translateX(0);\u003Cbr \/\u003E\n-ms-transform: translateX(0);\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u0026lt;\/style\u0026gt;\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cstyle\u003E.tabs {margin: 0 auto;min-height: 285px;position: relative;width: 550px;} .tab {float: left;} .tab br {display:none;} .tab label {background-color: #456;border-radius: 5px 5px 0 0;box-shadow: -3px 3px 2px #678 inset;left: 0;text-shadow: 1px 1px #000;cursor:pointer;color: #DDD;margin-right: 1px;padding: 5px 15px;position: relative;} .tab [type=radio] {display: none;} .content {background-color: #678;bottom: 0;left: 0;overflow: hidden;padding: 20px;position: absolute;right: 0;top: 23px;} .content \u003E * {opacity: 0;-moz-transform: translateX(-100%);-webkit-transform: translateX(-100%);-o-transform: translateX(-100%);-moz-transition: all 0.6s ease;-webkit-transition: all 0.6s ease;-o-transition: all 0.6s ease;} [type=\"radio\"]:checked ~ label {background-color: #678;box-shadow: 0 3px 2px #89A inset;z-index: 2;color: #FFF;} [type=radio]:checked ~ label ~ .content {z-index: 1;} [type=radio]:checked ~ label ~ .content \u003E * {opacity: 1;-moz-transform: translateX(0);-webkit-transform: translateX(0);-o-transform: translateX(0);-ms-transform: translateX(0);} \u003C\/style\u003E\u003Cdiv class=\"tabs\"\u003E\u003Cdiv class=\"tab\"\u003E\u003Cinput type=\"radio\" id=\"tab-1\" name=\"tab-group-1\" checked\u003E\u003Cbr \/\u003E\n\u003Clabel for=\"tab-1\"\u003EPrimera\u003C\/label\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"content\"\u003E\u003Ch3 style=\"font-weight:normal;font-family:Tahoma;font-size:24px;color:#BCD\"\u003Eesta es la primera pestaña\u003C\/h3\u003E\u003Cp style=\"text-align:justify;font-size:15px;font-family:Arial;padding:15px;border:1px dotted #AAA;color:#DDD\"\u003EDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.\u003Cbr \/\u003E\nLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.\u003Cbr \/\u003E\nUt wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.\u003Cbr \/\u003E\n\u003C\/p\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"tab\"\u003E\u003Cinput type=\"radio\" id=\"tab-2\" name=\"tab-group-1\"\u003E\u003Cbr \/\u003E\n\u003Clabel for=\"tab-2\"\u003EOtra pestaña\u003C\/label\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"content\"\u003E\u003Cp style=\"padding-top:10px;color:#DDF;font-size:15px;font-family:Verdana\"\u003E\u003Cimg src=\"https:\/\/lh3.googleusercontent.com\/-HoM-8S7BqUg\/Tl1NEDGF6mI\/AAAAAAAASrE\/an4i7aMTPPU\/s000\/anim2.gif\" class=\"izquierda\"\u003EEtiam tempor posuere risus, eget suscipit felis ultricies ac. Aenean mattis dignissim purus, at fringilla dui placerat ac. Ut sit amet pellentesque tellus. Aenean fermentum mattis mi. Nullam quis orci aliquam ante tincidunt dapibus sit amet id magna. Duis semper, dui vitae blandit lacinia, justo purus adipiscing purus, id mattis nulla.\u003C\/p\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"tab\"\u003E\u003Cinput type=\"radio\" id=\"tab-3\" name=\"tab-group-1\"\u003E\u003Cbr \/\u003E\n\u003Clabel for=\"tab-3\"\u003EUltima pestaña\u003C\/label\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"content\"\u003E\u003Cp style=\"text-align:center\"\u003E\u003Cimg src=\"https:\/\/lh6.googleusercontent.com\/-BjTGKCxhCFQ\/Tl1NEI5gcFI\/AAAAAAAASrI\/7wQ-KJF_OaY\/s000\/anim6.gif\"\/\u003E\u003Cp\u003E\u003C\/div\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/7392510373451027560\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/08\/variante-de-pestanas-usando-solo-css.html#comment-form","title":"68 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/7392510373451027560"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/7392510373451027560"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/08\/variante-de-pestanas-usando-solo-css.html","title":"Variante de pestañas usando sólo CSS"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/lh3.googleusercontent.com\/-HoM-8S7BqUg\/Tl1NEDGF6mI\/AAAAAAAASrE\/an4i7aMTPPU\/s72-c\/anim2.gif","height":"72","width":"72"},"thr$total":{"$t":"68"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-2701666873819083346"},"published":{"$t":"2011-08-29T00:07:00.001-03:00"},"updated":{"$t":"2011-08-29T00:07:00.338-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Galería con efectos sólo con CSS"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EHay muchas formas de mostrar imágenes con efectos diversos utilizando sólo CSS; el problema que tienen muchos es que estas cosas suelen no ser \"amigables\", no es cosa de copiar y pegar para que funcione sino que requiere intentar entender cómo funcionan para poder adaptarlas a determinado contexto. Por ejemplo, eso pasa con \u003Ca href=\"http:\/\/www.3site.eu\/examples\/gallery\/\" target=\"_blank\"\u003ECSS3 Gallery de Andrea Giammarchi\u003C\/a\u003E que tiene una idea muy interesante sobre la que uno puede jugar, modificar y probar distintas alternativas.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nPor lo general, todo se ve bien pero los ejemplos tienen sus trampas; se muestran en páginas vacias donde todo se posiciona de manera absoluta y no hay nada otra cosa que influya; son contextos asépticos y si queremos usarlo en un \u003Cspan style=\"font-style: italic;\"\u003Eblog\u003C\/span\u003E o una página \u003Cspan style=\"font-style: italic;\"\u003Eweb\u003C\/span\u003E donde haya otros elementos alrededor, las cosas se complican; más aún si no se tienen en cuenta que los navegadores no funcionan igual y que hay propiedades que no reconocen.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nTodo eso suele tener solución; basta jugar un poco con las propiedades y probar a ver que sale aunque, eventualemente, es posible que no salga nada.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEn este caso, voy a usar cuatro imágenes y las colocaré en una lista ordenada a la que idendificaré con un ID:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;ul class=\"thumb\"\u0026gt;\r\n  \u0026lt;li\u0026gt;\u0026lt;img src=\"URL_imagen_1\"\/\u0026gt;\u0026lt;\/li\u0026gt;\r\n  \u0026lt;li\u0026gt;\u0026lt;img src=\"URL_imagen_2\"\/\u0026gt;\u0026lt;\/li\u0026gt;\r\n  \u0026lt;li\u0026gt;\u0026lt;img src=\"URL_imagen_3\"\/\u0026gt;\u0026lt;\/li\u0026gt;\r\n  \u0026lt;li\u0026gt;\u0026lt;img src=\"URL_imagen_4\"\/\u0026gt;\u0026lt;\/li\u0026gt;\r\n\u0026lt;\/ul\u0026gt;\r\n\u0026lt;div\u0026gt; ....... cualquier contenido ....... \u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EEso es lo de menos, la clave, claro, es el CSS así que acá va un modelo de ejemplo:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;style\u0026gt;\r\n\r\n  \/* la lista flota a la izquierda porque quiero que el DIV con el texto se muestre a su lado *\/\r\n  \/* por ese motivo, debo dimensionarla con width y height  *\/\r\n  ul.thumb {\r\n    float: left;\r\n    height: 240px;\r\n    list-style: none;\r\n    margin: 0;\r\n    position: relative;\r\n    width: 260px;\r\n  }\r\n\r\n  \/* cada item es una imagen que fuerzo a que se muestren pequeñas *\/\r\n  ul.thumb li {\r\n    \/* se posicionand e manera absoluta *\/\r\n    position: absolute;\r\n    left: 50px;\r\n    top: 0;\r\n    z-index: 0;\r\n    \/* algo de decoración *\/\r\n    background-color: #FFF;\r\n    box-shadow: 0 0 10px #444 inset;\r\n    padding: 10px;\r\n    \/* el tamaño de la imagen a mostrar *\/\r\n    height: 112px;\r\n    width: 150px;\r\n    \/* la transición será el efecto *\/\r\n    -moz-transition: all 1s ease-in-out 0s;\r\n    -webkit-transition: all 1s ease-in-out 0s;\r\n    -o-transition: all 1s ease-in-out 0s;\r\n  }\r\n  ul.thumb li img {\r\n    height: 100%;\r\n    width: 100%;\r\n  }\r\n\r\n  \/* cada item se posiciona y se rota a gusto *\/\r\n  ul.thumb li:nth-child(1) {\r\n    -moz-transform: rotate(20deg);\r\n    -webkit-transform: rotate(20deg);\r\n    -o-transform: rotate(20deg);\r\n    margin-top: 100px;\r\n  }\r\n  ul.thumb li:nth-child(2) {\r\n    -moz-transform: rotate(-30deg);\r\n    -webkit-transform: rotate(-30deg);\r\n    -o-transform: rotate(-30deg);\r\n    margin-top: 0px;\r\n  }\r\n  ul.thumb li:nth-child(3) {\r\n    -moz-transform: rotate(-15deg);\r\n    -webkit-transform: rotate(-15deg);\r\n    -o-transform: rotate(-15deg);\r\n    margin-top: 75px;\r\n  }\r\n  ul.thumb li:nth-child(4) {\r\n    -moz-transform: rotate(10deg);\r\n    -webkit-transform: rotate(10deg);\r\n    -o-transform: rotate(10deg);\r\n    margin-top: 50px;\r\n  }\r\n\r\n  \/* el efecto al poner el cursor encima *\/\r\n  ul.thumb li:hover {\r\n    \/* se elimina la rotación *\/\r\n    -moz-transform: rotate(0deg);\r\n    -webkit-transform: rotate(0deg);\r\n    -o-transform: rotate(0deg);\r\n    \/* se muestra la imagen con su tamaño real *\/\r\n    height: 375px;\r\n    width: 500px;\r\n    \/* se la posiciona y se la pone en primer plano *\/\r\n    margin-left: 0px;\r\n    margin-top: -50px;\r\n    z-index:10;\r\n    \/* algo de decoración *\/\r\n    border-radius: 10px;\r\n    padding:20px;\r\n  }\r\n\u0026lt;\/style\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EEl estilo utiliza \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2010\/06\/la-pseudo-clase-nth-child.html\" target=\"_blank\"\u003Ela pseudo-clase nth-child\u003C\/a\u003E que, lamentablemente, no está implementada en Internet Explorer salvo a partir de su versión 9 así que, lo primero que habría que hacer es intentar que la galería se vea en IE8. Eso, es algo que puede hacerse de distinto modos, ninguno es ideal pero ... es lo que hay.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nPor ejemplo, podemos agregar \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2010\/07\/ie9js-solucionando-algunas.html\" target=\"_blank\"\u003Eel script ie9js\u003C\/a\u003E que es un script que agrega una cantidad de funciones extras, ayudando a que las versiones más viejas de IE interpreten propiedades que normalmente no están implementadas. Se coloca antes de \u0026lt;\/head\u0026gt;:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;!--[if lt IE 9]\u0026gt;\r\n\u0026lt;script src='http:\/\/ie7-js.googlecode.com\/svn\/version\/2.1(beta4)\/IE9.js'\/\u0026gt;\r\n\u0026lt;![endif]--\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EEn este caso, la solución es parcial ya que, de todos modos, la rotación de las imagenes deberá hacerse utilizando filtros lo que también implcia cambair los margenes y por lo tanto, será necesario \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2011\/06\/condicionando-las-cosas-para-internet.html\" target=\"_blank\"\u003Eusar condicionales\u003C\/a\u003E así que deberemos agregarles algún ID a cada etiqueta LI; en este caso, las llamé IE1, LE2, IE3 e IE4.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"linkContraido\" onclick=\"SINO('IEthumbdemo');\"\u003E\u003C\/div\u003E\u003Cpre id=\"IEthumbdemo\" class=\"elementoOculto\"\u003E\u0026lt;!--[if IE]\u0026gt;\r\n\u0026lt;style type='text\/css'\u0026gt;\r\n  ul.thumb li { zoom: 1; }\r\n  #IE1 {\r\n    margin-left: -30px;\r\n    margin-top: -20px;\r\n    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9396926207859084, M12=-0.3420201433256687, M21=0.3420201433256687, M22=0.9396926207859084, sizingMethod='auto expand');\r\n  }\r\n  #IE2 {\r\n    margin-left: -20px;\r\n    margin-top: 15px;\r\n    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.8660254037844387, M12=0.49999999999999994, M21=-0.49999999999999994, M22=0.8660254037844387, sizingMethod='auto expand');\r\n  }\r\n  #IE3 {\r\n    margin-left: -30px;\r\n    margin-top: 50px;\r\n    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9659258262890683, M12=0.25881904510252074, M21=-0.25881904510252074, M22=0.9659258262890683, sizingMethod='auto expand');\r\n  }\r\n  #IE4 {\r\n    margin-left: 0px;\r\n    margin-top: 90px;\r\n    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.984807753012208, M12=-0.17364817766693033, M21=0.17364817766693033, M22=0.984807753012208, sizingMethod='auto expand');\r\n  }\r\n  ul.thumb li:hover {\r\nfilter: progid:DXImageTransform.Microsoft.Matrix(enabled='false') !important;\r\n  }\r\n\u0026lt;\/style\u0026gt;\r\n\u0026lt;![endif]--\u0026gt;\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003Eul.thumb {float: left;height: 240px;list-style: none;margin: 0 0 0;position: relative;width: 260px;} ul.thumb li {-moz-transition: all 1s ease-in-out 0s;-webkit-transition: all 1s ease-in-out 0s;-o-transition: all 1s ease-in-out 0s;background-color: #FFF;box-shadow: 0 0 10px #444 inset;height: 112px;left: 50px;padding: 10px;position: absolute;top: 0;width: 150px;z-index: 0;} ul.thumb li img {height: 100%;width: 100%;} ul.thumb li:nth-child(1) {-moz-transform: rotate(20deg);-webkit-transform: rotate(20deg);-o-transform: rotate(20deg);margin-top: 100px;} ul.thumb li:nth-child(2) {-moz-transform: rotate(-30deg);-webkit-transform: rotate(-30deg);-o-transform: rotate(-30deg);margin-top: 0px;} ul.thumb li:nth-child(3) {-moz-transform: rotate(-15deg);-webkit-transform: rotate(-15deg);-o-transform: rotate(-15deg);margin-top: 75px;} ul.thumb li:nth-child(4) {-moz-transform: rotate(10deg);-webkit-transform: rotate(10deg);-o-transform: rotate(10deg);margin-top: 50px;} ul.thumb li:hover {-moz-transform: rotate(0deg);-webkit-transform: rotate(0deg);-o-transform: rotate(0deg);border-radius: 10px;height: 375px;margin-left: 0px;margin-top: -50px;padding:20px;width: 500px;z-index:10;}\u003C\/style\u003E\u003Cbr \/\u003E\n\u003C!--[if IE]\u003E\u003Cbr \/\u003E\n\u003Cstyle type='text\/css'\u003Eul.thumb li {zoom: 1;} #IE1 {margin-left:-30px;margin-top:-20px;filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9396926207859084, M12=-0.3420201433256687, M21=0.3420201433256687, M22=0.9396926207859084, sizingMethod='auto expand');} #IE2 {margin-left:-20px;margin-top:15px;filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.8660254037844387, M12=0.49999999999999994, M21=-0.49999999999999994, M22=0.8660254037844387, sizingMethod='auto expand');} #IE3 {margin-left:-30px;margin-top:50px;filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9659258262890683, M12=0.25881904510252074, M21=-0.25881904510252074, M22=0.9659258262890683, sizingMethod='auto expand');} #IE4 {margin-left:0px;margin-top:90px;filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.984807753012208, M12=-0.17364817766693033, M21=0.17364817766693033, M22=0.984807753012208, sizingMethod='auto expand');} ul.thumb li:hover {filter: progid:DXImageTransform.Microsoft.Matrix(enabled='false') !important;}\u003C\/style\u003E\u003Cbr \/\u003E\n\u003C![endif]--\u003E\u003Cbr \/\u003E\n\u003Cul class=\"thumb\"\u003E\u003Cli id=\"IE1\"\u003E\u003Cimg src=\"https:\/\/lh4.googleusercontent.com\/_qfa9R8IbFoA\/TMT817lwU3I\/AAAAAAAACOA\/6leNTE24Nw0\/s500\/25_0021.jpg\"\/\u003E\u003C\/li\u003E\r\n\u003Cli id=\"IE2\"\u003E\u003Cimg src=\"https:\/\/lh3.googleusercontent.com\/_qfa9R8IbFoA\/TMT83FoK07I\/AAAAAAAACOI\/vUrJ5cFB9co\/s500\/25_0019.jpg\"\/\u003E\u003C\/li\u003E\r\n\u003Cli id=\"IE3\"\u003E\u003Cimg src=\"https:\/\/lh4.googleusercontent.com\/-DAJ3ytgkT-Q\/TMSRFH6PAuI\/AAAAAAAAAIE\/ZYfLw0PKcLQ\/s500\/02_0005.jpg\"\/\u003E\u003C\/li\u003E\r\n\u003Cli id=\"IE4\"\u003E\u003Cimg src=\"https:\/\/lh3.googleusercontent.com\/-ZvG35q5BjvI\/TbcpdO77xEI\/AAAAAAAADyI\/tpz-XKVp-gM\/s500\/26_0055.jpg\"\/\u003E\u003C\/li\u003E\r\n\u003C\/ul\u003E\u003Cdiv style=\"color: #DDD;font-family: Arial;font-size: 14px;text-align: justify;\"\u003EMaecenas congue ornare fermentum. Aliquam orci ipsum, fringilla id vehicula eget, consequat ut lorem. Nunc commodo ornare diam, at varius felis imperdiet et. Aenean commodo malesuada nibh eu eleifend. Sed et ante vitae nisi ullamcorper pretium. In id convallis tellus. Phasellus feugiat, arcu ac scelerisque interdum, purus dui rutrum diam, et sollicitudin ante diam ac diam? Duis nec erat metus. Duis placerat eros vel elit feugiat ornare blandit urna laoreet. Phasellus dapibus lorem sit amet tortor adipiscing non mollis felis pretium. In vitae lectus nec justo viverra eleifend. Duis hendrerit est quis nulla faucibus quis suscipit ante condimentum. Etiam scelerisque lacus ac neque eleifend rhoncus. Suspendisse potenti. Mauris vulputate varius elementum. Proin semper leo nec augue massa nunc.\u003C\/div\u003E\u003Cdiv style=\"clear:both\"\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/2701666873819083346\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/08\/galeria-con-efectos-solo-con-css.html#comment-form","title":"59 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/2701666873819083346"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/2701666873819083346"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/08\/galeria-con-efectos-solo-con-css.html","title":"Galería con efectos sólo con CSS"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/lh4.googleusercontent.com\/_qfa9R8IbFoA\/TMT817lwU3I\/AAAAAAAACOA\/6leNTE24Nw0\/s72-c\/25_0021.jpg","height":"72","width":"72"},"thr$total":{"$t":"59"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-7264225825698552180"},"published":{"$t":"2011-08-25T00:05:00.002-03:00"},"updated":{"$t":"2011-08-25T00:05:00.136-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Efecto Flip Page con CSS"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003E\u003Ca href=\"http:\/\/www.romancortes.com\/blog\/pure-css3-page-flip-effect\/\" target=\"_blank\"\u003EPure CSS3 Page Flip Effect\u003C\/a\u003E es un experimento más de Román Cortés que, por la fecha de su realización, sólo funcionaba en Chorme pero, que con algunos pequeños agregados, también funcionará en otros navegadores.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nLas reglas de estilo son bastante complejas aunque no usan propiedades sofisticadas así que no se pueden explicar demasiado; sólo hay que poner manos a la obra, hacer algunos calculos aritméticos e ir probando poco a poco porque el resultado es espectacular y permitiría hacer muchas otras cosas.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEn este ejemplo, me he limitado a agregar las propiedades para Firefox y he simplificado un poco la idea.\u003C\/div\u003E\u003Cstyle type=\"text\/css\"\u003E#page-flip {height: 450px;overflow: hidden;padding: 30px 0 0 320px;position: relative;width: 300px;} #r1 {position: absolute;z-index: 2;-webkit-transform-origin: 1315px 500px;-webkit-transform: translate(-1030px, -500px) rotate(-32deg);-webkit-transition-property: -webkit-transform, -webkit-transform-origin;-webkit-transition-duration: 1s;-moz-transform-origin: 1315px 500px;-moz-transform: translate(-1030px, -500px) rotate(-32deg);-moz-transition-property: -moz-transform, -moz-transform-origin;-moz-transition-duration: 1s;} #p1 {width: 1285px;height: 1388px;overflow: hidden;} #p1 \u003E div {-webkit-transform-origin: 285px 0;-webkit-transform: translate(1030px, 500px) rotate(32deg);-webkit-transition-property: -webkit-transform, -webkit-transform-origin;-webkit-transition-duration: 1s;-moz-transform-origin: 285px 0;-moz-transform: translate(1030px, 500px) rotate(32deg);-moz-transition-property: -moz-transform, -moz-transform-origin;-moz-transition-duration: 1s;width: 285px;height: 388px;background-image: url(http:\/\/3.bp.blogspot.com\/-Y8LWJXzBFx8\/TlF7vW5-r4I\/AAAAAAAASn0\/4DT7cw720LY\/s00\/flip1.png);} #p1 \u003E div \u003E div {width: 10px;height: 388px;} #p2 \u003E div {width: 285px;height: 388px;box-shadow: 0 0 11px rgba(0, 0, 0, .5);position: absolute;z-index: 1;background-image: url(http:\/\/1.bp.blogspot.com\/-GYM05tGESnE\/TlF7vdn81_I\/AAAAAAAASn8\/Szi0Fvb_RvY\/s00\/flip2.png);}#r3 {-webkit-transform-origin: 1315px 500px;-webkit-transform: translate(-1030px, -500px) rotate(-32deg);-webkit-transition-property: -webkit-transform, -webkit-transform-origin;-webkit-transition-duration: 1s;-moz-transform-origin: 1315px 500px;-moz-transform: translate(-1030px, -500px) rotate(-32deg);-moz-transition-property: -moz-transform, -moz-transform-origin;-moz-transition-duration: 1s;position: absolute;z-index: 2;}#s3 {-webkit-transform-origin: 70px 500px;-webkit-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0);-webkit-transition-property: -webkit-transform, -webkit-transform-origin;-webkit-transition-duration: 1s;-moz-transform-origin: 70px 500px;-moz-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0);-moz-transition-property: -moz-transform, -moz-transform-origin;-moz-transition-duration: 1s;position: absolute;z-index: 1;} #page-flip:hover #s3 {-webkit-transform-origin: 325px 500px;-webkit-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0);-moz-transform-origin: 325px 500px;-moz-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0);} #sp3 {width: 25px;height: 1000px;-webkit-transition-property: width;-webkit-transition-duration: 1s;overflow: hidden;-moz-transition-property: width;-moz-transition-duration: 1s;} #page-flip:hover #sp3 {width: 11px;} .s {width: 285px;height: 388px;position: absolute;overflow: hidden;z-index: 3;} #s2 {-webkit-transform-origin: 45px 500px;-webkit-transform: translate(240px, -500px) rotate(-32deg);-webkit-transition-property: -webkit-transform, -webkit-transform-origin;-webkit-transition-duration: 1s;-moz-transform-origin: 45px 500px;-moz-transform: translate(240px, -500px) rotate(-32deg);-moz-transition-property: -moz-transform, -moz-transform-origin;-moz-transition-duration: 1s;position: absolute;} #sp2 {width: 15px;height: 1000px;overflow: hidden;} #s4 {opacity: 1;-webkit-transition-duration: 0.5s;-moz-transition-duration: 0.5s;} #page-flip:hover #s4 {opacity: 0;} #page-flip:hover #s2 {-webkit-transform-origin: 300px 500px;-webkit-transform: translate(-15px, -500px) rotate(0deg);-moz-transform-origin: 300px 500px;-moz-transform: translate(-15px, -500px) rotate(0deg);} #p3 {width: 1285px;height: 1388px;overflow: hidden;} #p3 \u003E div {-webkit-transform-origin: 0 0;-webkit-transform: translate(1255px, 500px) rotate(-32deg);-webkit-transition-property: -webkit-transform, -webkit-transform-origin;-webkit-transition-duration: 1s;box-shadow: 0 0 11px rgba(0, 0, 0, .5);-moz-transform-origin: 0 0;-moz-transform: translate(1255px, 500px) rotate(-32deg);-moz-transition-property: -moz-transform, -moz-transform-origin;-moz-transition-duration: 1s;width: 285px;height: 388px;background-image: url(http:\/\/3.bp.blogspot.com\/-Z9iXU1zcuFY\/TlF7vujhYjI\/AAAAAAAASoE\/nm3EN7FDI78\/s00\/flip3.png);overflow: hidden;} #p3 \u003E div \u003E div {width: 9px;height: 500px;float: right;} #page-flip:hover #r1 {-webkit-transform-origin: 1570px 500px;-webkit-transform: translate(-1285px, -500px) rotate(0deg);-moz-transform-origin: 1570px 500px;-moz-transform: translate(-1285px, -500px) rotate(0deg);} #page-flip:hover #p1 \u003E div {-webkit-transform-origin: 285px 0;-webkit-transform: translate(1285px, 500px) rotate(0deg);-moz-transform-origin: 285px 0;-moz-transform: translate(1285px, 500px) rotate(0deg);} #page-flip:hover #r3 {-webkit-transform-origin: 1570px 500px;-webkit-transform: translate(-1285px, -500px) rotate(0deg);-moz-transform-origin: 1570px 500px;-moz-transform: translate(-1285px, -500px) rotate(0deg);} #page-flip:hover #p3 \u003E div {-webkit-transform-origin: 0 0;-webkit-transform: translate(1000px, 500px) rotate(0deg);-moz-transform-origin: 0 0;-moz-transform: translate(1000px, 500px) rotate(0deg);} #enlace {-moz-transition-duration: 0.01s;-moz-transition-property: margin;color: #FFF;display: block;font-family: Verdana;font-size: 32px;font-weight: normal;height: 320px;margin: -20000px 0 0;position: absolute;text-align: center;text-shadow: 0 3px 1px #000;width: 250px;z-index: 3;} #enlace:hover {border: 1px dotted #CCC;} #page-flip:hover #enlace {-webkit-transition-delay: .8s;-moz-transition-delay: .8s;margin: 30px 0 0 15px;} \u003C\/style\u003E\u003Cdiv id=\"page-flip\"\u003E\u003Cdiv id=\"r1\"\u003E\u003Cdiv id=\"p1\"\u003E\u003Cdiv\u003E\u003Cdiv\u003E\u003C\/div\u003E\u003C\/div\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv id=\"p2\"\u003E\u003Cdiv\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv id=\"r3\"\u003E\u003Cdiv id=\"p3\"\u003E\u003Cdiv\u003E\u003Cdiv\u003E\u003C\/div\u003E\u003C\/div\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"s\"\u003E\u003Cdiv id=\"s3\"\u003E\u003Cdiv id=\"sp3\"\u003E\u003C\/div\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"s\" id=\"s4\"\u003E\u003Cdiv id=\"s2\"\u003E\u003Cdiv id=\"sp2\"\u003E\u003C\/div\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Ca id=\"enlace\" href=\"http:\/\/www.romancortes.com\/blog\/pure-css3-page-flip-effect\/\/\" title=\"Pure CSS Page Flip Effect\" target=\"_blank\"\u003EPure CSS3 Page Flip Effect\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"linkContraido\" onclick=\"SINO('flipcss');\"\u003E\u003C\/div\u003E\u003Cpre id=\"flipcss\" class=\"elementoOculto\"\u003E\u0026lt;style type=\"text\/css\"\u0026gt;\r\n#page-flip {\r\n  height: 450px;\r\n  overflow: hidden;\r\n  padding: 30px 0 0 320px;\r\n  position: relative;\r\n  width: 300px;\r\n}\r\n#r1 {\r\n  position: absolute;\r\n  z-index: 2;\r\n  -webkit-transform-origin: 1315px 500px;\r\n  -webkit-transform: translate(-1030px, -500px) rotate(-32deg);\r\n  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;\r\n  -webkit-transition-duration: 1s;\r\n  -moz-transform-origin: 1315px 500px;\r\n  -moz-transform: translate(-1030px, -500px) rotate(-32deg);\r\n  -moz-transition-property: -moz-transform, -moz-transform-origin;\r\n  -moz-transition-duration: 1s;\r\n}\r\n#p1 {\r\n  height: 1388px;\r\n  overflow: hidden;\r\n  width: 1285px;\r\n}\r\n#p1 \u003E div {\r\n  background-image: url(URL_primera_imagen);\r\n  height: 388px;\r\n  width: 285px;\r\n  -webkit-transform-origin: 285px 0;\r\n  -webkit-transform: translate(1030px, 500px) rotate(32deg);\r\n  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;\r\n  -webkit-transition-duration: 1s;\r\n  -moz-transform-origin: 285px 0;\r\n  -moz-transform: translate(1030px, 500px) rotate(32deg);\r\n  -moz-transition-property: -moz-transform, -moz-transform-origin;\r\n  -moz-transition-duration: 1s;\r\n}\r\n#p1 \u0026gt; div \u0026gt; div {\r\n  height: 388px;\r\n  width: 10px;\r\n}\r\n #p2 \u0026gt; div {\r\n  background-image: url(URL_segunda_imagen);\r\n  box-shadow: 0 0 11px rgba(0, 0, 0, .5);\r\n  height: 388px;\r\n  position: absolute;\r\n  width: 285px;\r\n  z-index: 1;\r\n}\r\n#r3 {\r\n  position: absolute;\r\n  z-index: 2;\r\n  -webkit-transform-origin: 1315px 500px;\r\n  -webkit-transform: translate(-1030px, -500px) rotate(-32deg);\r\n  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;\r\n  -webkit-transition-duration: 1s;\r\n  -moz-transform-origin: 1315px 500px;\r\n  -moz-transform: translate(-1030px, -500px) rotate(-32deg);\r\n  -moz-transition-property: -moz-transform, -moz-transform-origin;\r\n  -moz-transition-duration: 1s;\r\n}\r\n#s3 {\r\n  position: absolute;\r\n  z-index: 1;\r\n  -webkit-transform-origin: 70px 500px;\r\n  -webkit-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0);\r\n  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;\r\n  -webkit-transition-duration: 1s;\r\n  -moz-transform-origin: 70px 500px;\r\n  -moz-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0);\r\n  -moz-transition-property: -moz-transform, -moz-transform-origin;\r\n  -moz-transition-duration: 1s;\r\n}\r\n#page-flip:hover #s3 {\r\n  -webkit-transform-origin: 325px 500px;\r\n  -webkit-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0);\r\n  -moz-transform-origin: 325px 500px;\r\n  -moz-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0);\r\n}\r\n#sp3 {\r\n  height: 1000px;\r\n  overflow: hidden;\r\n  width: 25px;\r\n  -webkit-transition-property: width;\r\n  -webkit-transition-duration: 1s;\r\n  -moz-transition-property: width;\r\n  -moz-transition-duration: 1s;\r\n}\r\n#page-flip:hover #sp3 {\r\n  width: 11px;\r\n}\r\n.s {\r\n  height: 388px;\r\n  position: absolute;\r\n  overflow: hidden;\r\n  width: 285px;\r\n  z-index: 3;\r\n}\r\n#s2 {\r\n  position: absolute;\r\n  -webkit-transform-origin: 45px 500px;\r\n  -webkit-transform: translate(240px, -500px) rotate(-32deg);\r\n  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;\r\n  -webkit-transition-duration: 1s;\r\n  -moz-transform-origin: 45px 500px;\r\n  -moz-transform: translate(240px, -500px) rotate(-32deg);\r\n  -moz-transition-property: -moz-transform, -moz-transform-origin;\r\n  -moz-transition-duration: 1s;\r\n}\r\n#sp2 {\r\n  height: 1000px;\r\n  overflow: hidden;\r\n  width: 15px;\r\n}\r\n#s4 {\r\n  opacity: 1;\r\n  -webkit-transition-duration: 0.5s;\r\n  -moz-transition-duration: 0.5s;\r\n}\r\n#page-flip:hover #s4 {\r\n  opacity: 0;\r\n}\r\n#page-flip:hover #s2 {\r\n  -webkit-transform-origin: 300px 500px;\r\n  -webkit-transform: translate(-15px, -500px) rotate(0deg);\r\n  -moz-transform-origin: 300px 500px;\r\n  -moz-transform: translate(-15px, -500px) rotate(0deg);\r\n}\r\n#p3 {\r\n  height: 1388px;\r\n  overflow: hidden;\r\n  width: 1285px;\r\n}\r\n#p3 \u0026gt; div {\r\n  background-image: url(URL_segunda_imagen);\r\n  box-shadow: 0 0 11px rgba(0, 0, 0, .5);\r\n  overflow: hidden;\r\n  height: 388px;\r\n  width: 285px;\r\n  -webkit-transform-origin: 0 0;\r\n  -webkit-transform: translate(1255px, 500px) rotate(-32deg);\r\n  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;\r\n  -webkit-transition-duration: 1s;\r\n  -moz-transform-origin: 0 0;\r\n  -moz-transform: translate(1255px, 500px) rotate(-32deg);\r\n  -moz-transition-property: -moz-transform, -moz-transform-origin;\r\n  -moz-transition-duration: 1s;\r\n}\r\n#p3 \u003E div \u003E div {\r\n  float: right;\r\n  height: 500px;\r\n  width: 9px;\r\n}\r\n#page-flip:hover #r1 {\r\n  -webkit-transform-origin: 1570px 500px;\r\n  -webkit-transform: translate(-1285px, -500px) rotate(0deg);\r\n  -moz-transform-origin: 1570px 500px;\r\n  -moz-transform: translate(-1285px, -500px) rotate(0deg);\r\n}\r\n#page-flip:hover #p1 \u003E div {\r\n  -webkit-transform-origin: 285px 0;\r\n  -webkit-transform: translate(1285px, 500px) rotate(0deg);\r\n  -moz-transform-origin: 285px 0;\r\n  -moz-transform: translate(1285px, 500px) rotate(0deg);\r\n}\r\n#page-flip:hover #r3 {\r\n  -webkit-transform-origin: 1570px 500px;\r\n  -webkit-transform: translate(-1285px, -500px) rotate(0deg);\r\n  -moz-transform-origin: 1570px 500px;\r\n  -moz-transform: translate(-1285px, -500px) rotate(0deg);\r\n}\r\n#page-flip:hover #p3 \u003E div {\r\n  -webkit-transform-origin: 0 0;\r\n  -webkit-transform: translate(1000px, 500px) rotate(0deg);\r\n  -moz-transform-origin: 0 0;\r\n  -moz-transform: translate(1000px, 500px) rotate(0deg);\r\n}\r\n#enlace {\r\n  color: #FFF;\r\n  display: block;\r\n  font-family: Verdana;\r\n  font-size: 32px;\r\n  height: 320px;\r\n  margin: -20000px 0 0;\r\n  position: absolute;\r\n  text-align: center;\r\n  text-shadow: 0 3px 1px #000;\r\n  width: 250px;\r\n  z-index: 3;\r\n  -webkit-transition-duration: 0.01s;\r\n  -webkit-transition-property: margin;\r\n  -moz-transition-duration: 0.01s;\r\n  -moz-transition-property: margin;\r\n}\r\n#enlace:hover {\r\n  border: 1px dotted #CCC;\r\n}\r\n#page-flip:hover #enlace {\r\n  margin: 30px 0 0 15px;\r\n  -webkit-transition-delay: .8s;\r\n  -moz-transition-delay: .8s;\r\n}\r\n\u0026lt;\/style\u0026gt;\r\n\r\n\u0026lt;div id=\"page-flip\"\u0026gt;\r\n  \u0026lt;div id=\"r1\"\u0026gt;\r\n    \u0026lt;div id=\"p1\"\u0026gt;\u0026lt;div\u0026gt;\u0026lt;div\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/div\u0026gt;\r\n  \u0026lt;\/div\u0026gt;\r\n  \u0026lt;div id=\"p2\"\u0026gt;\u0026lt;div\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/div\u0026gt;\r\n  \u0026lt;div id=\"r3\"\u0026gt;\r\n    \u0026lt;div id=\"p3\"\u0026gt;\u0026lt;div\u0026gt;\u0026lt;div\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/div\u0026gt;\r\n  \u0026lt;\/div\u0026gt;\r\n  \u0026lt;div class=\"s\"\u0026gt;\r\n    \u0026lt;div id=\"s3\"\u0026gt;\u0026lt;div id=\"sp3\"\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/div\u0026gt;\r\n  \u0026lt;\/div\u0026gt;\r\n  \u0026lt;div class=\"s\" id=\"s4\"\u0026gt;\r\n    \u0026lt;div id=\"s2\"\u0026gt;\u0026lt;div id=\"sp2\"\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/div\u0026gt;\r\n  \u0026lt;\/div\u0026gt;\r\n  \u0026lt;a id=\"enlace\" href=\"URL_enlace\" title=\"\" target=\"_blank\"\u0026gt;texto del enlace\u0026lt;\/a\u0026gt;\r\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/7264225825698552180\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/08\/efecto-flip-page-con-css.html#comment-form","title":"8 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/7264225825698552180"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/7264225825698552180"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/08\/efecto-flip-page-con-css.html","title":"Efecto Flip Page con CSS"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"8"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-1851002987097994601"},"published":{"$t":"2011-08-22T00:02:00.001-03:00"},"updated":{"$t":"2011-08-22T00:02:00.491-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Dudas y errores cuando se usa CSS"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EInterensante artículo de \u003Ca href=\"http:\/\/css-tricks.com\/13317-little-css-stuff-newcomers-get-confused-about\/\" target=\"_blank\"\u003ECSS Tricks\u003C\/a\u003E donde se muestran las diferencias que suelen confundirnos cuando creamos reglas de estilo; algo que no sólo ocurre con los principiantes sino con todos nosotros.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nUn pequeño resumen de ese artículo.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"color: #FFF;font-family: Verdana;font-size: 17px;text-align: justify;\"\u003E¿Cuál es la diferencia entre estas dos reglas?\u003C\/div\u003E\u003Cpre\u003E.demo { color: red; }\r\np.demo { color: red; }\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ELa primera, hará que el texto de cualquier etiqueta que tenga como atributo la clase demo, se vea de color rojo:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div class=\"demo\"\u0026gt; el texto es rojo \u0026lt;\/div\u0026gt;\r\n\u0026lt;span class=\"demo\"\u0026gt; el texto es rojo \u0026lt;\/span\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ELa segunda, sólo funcionará en las etiquetas P que tengan ese atributo, cualquier otra, no será afectada.\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div class=\"demo\"\u0026gt; el texto será de cualquier color \u0026lt;\/div\u0026gt;\r\n\u0026lt;p class=\"demo\"\u0026gt; el texto es rojo \u0026lt;\/p\u0026gt;\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"color: #FFF;font-family: Verdana;font-size: 17px;text-align: justify;\"\u003E¿Y cuál es la diferencia entre estas dos reglas?\u003C\/div\u003E\u003Cpre\u003E.demo p { color: red; }\r\np.demo { color: green; }\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ELa primera, hará que los textos de las etiquetas P que estén dentro de algún contenedor que tenga como atributo la clase demo, se vea de color rojo:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div class=\"demo\"\u0026gt;\r\n  \u0026lt;p\u0026gt; el texto es rojo \u0026lt;\/p\u0026gt;\r\n  \u0026lt;span\u0026gt; el texto será de cualquier color \u0026lt;\/span\u0026gt;\r\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ELa segunda, hará que se vean rojos los textos de cualquier etiqueta P que tenga definida esa clase, tal como en el caso anterior.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"color: #FFF;font-family: Verdana;font-size: 17px;text-align: justify;\"\u003E¿Cuál es la diferencia entre un ID y una clase?\u003C\/div\u003E\u003Cdiv style=\"text-align: justify;\"\u003E¿Da lo mismo usar uno que otro? Definitivamente no (\u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2009\/04\/css-sobre-ids-y-clases.html\" target=\"_blank\"\u003Emás información\u003C\/a\u003E). Los IDs deben ser únicos, sólo una etiqueta en toda la página debe tener ese nombre y se los entiende como \"más importantes\"; si se usan IDs y clases en al misma etiqueta, las reglas definidas para el ID tienen preponderancia sobre las de la clase porque las propiedades poseen un \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2006\/12\/css-orden-de-prioridades.html\" target=\"_blank\"\u003Eorden de prioridades\u003C\/a\u003E:\u003C\/div\u003E\u003Cpre\u003E#demoID { color: red; }\r\n.demoCLASE { color: green; }\r\n\r\n\u0026lt;div id=\"demoID\" class=demoCLASE\"\"\u0026gt; el texto será rojo \u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"color: #FFF;font-family: Verdana;font-size: 17px;text-align: justify;\"\u003E¿Puede usarse hover para modificar una etiqueta interna?\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div class=\"demo\"\u0026gt;\r\n  \u0026lt;p\u0026gt; Sed vitae tortor turpis. \u0026lt;span\u0026gt;Nullam blandit\u0026lt;\/span\u0026gt; ornare urna vitae rhoncus. \u0026lt;\/p\u0026gt;\r\n  \u0026lt;p\u0026gt; Nam lacinia lacinia risus, sed \u0026lt;span\u0026gt;elementum libero\u0026lt;\/span\u0026gt; imperdiet non. \u0026lt;\/p\u0026gt;\r\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ECon estas reglas, cuando ponemos el cursor sobre ese rectángulo, el texto será amarillo:\u003C\/div\u003E\u003Cpre\u003E.demo { color: red; }\r\n.demo:hover { color: yellow; }\u003C\/pre\u003E\u003Cstyle\u003E.demoho1{color: red;} .demoho1:hover {color: yellow;} .demoho2{color: red;} .demoho2:hover span {color: yellow;} \u003C\/style\u003E\u003Cdiv class=\"demoho1\" style=\"text-align:center;font-size:20px;\"\u003E\u003Cp\u003ESed vitae tortor turpis. \u003Cspan\u003ENullam blandit\u003C\/span\u003E ornare urna vitae rhoncus.\u003C\/p\u003E\u003Cp\u003ENam lacinia lacinia risus, sed \u003Cspan\u003Eelementum libero\u003C\/span\u003E imperdiet non.\u003C\/p\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003ECon esta otra, lo que cambiará es el color de las etiquetas SPAN que estén dentro del DIV:\u003C\/div\u003E\u003Cpre\u003E.demo { color: red; }\r\n.demo:hover span { color: yellow; }\u003C\/pre\u003E\u003Cdiv class=\"demoho2\" style=\"text-align:center;font-size:20px;\"\u003E\u003Cp\u003ESed vitae tortor turpis. \u003Cspan\u003ENullam blandit\u003C\/span\u003E ornare urna vitae rhoncus.\u003C\/p\u003E\u003Cp\u003ENam lacinia lacinia risus, sed \u003Cspan\u003Eelementum libero\u003C\/span\u003E imperdiet non.\u003C\/p\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"color: #FFF;font-family: Verdana;font-size: 17px;text-align: justify;\"\u003E¿Los espacios y los puntos y comas son obligatorios?\u003C\/div\u003E\u003Cdiv style=\"text-align: justify;\"\u003ELos espacios son obligatorios cuando separan palabras claves. Estas dos cosas son lo mismo:\u003C\/div\u003E\u003Cpre\u003E.demo{color:red;}\r\n.demo {      \r\n      color :       red;\r\n}\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EEstas dos no son lo mismo:\u003C\/div\u003E\u003Cpre\u003E.demo{background:trasnparent url() no-repeat left top;}\r\n.demo{background:trasnparent url()no-repeat left top;}\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ELa primera, funcionará correctamente en cualquier navegador, la segunda, no se aplicará en IE porque falta el espacio entre el cierre del paréntesis y la palabra no-repeat\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"color: #FFF;font-family: Verdana;font-size: 17px;text-align: justify;\"\u003EEl punto y coma es obligatorio siempre, excepto en la última propiedad:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EEsto es correcto\u003C\/div\u003E\u003Cpre\u003E.demo {\r\n  color: red;\r\n  font-size: 12px\r\n}\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EEsto es incorrecto:\u003C\/div\u003E\u003Cpre\u003E.demo {\r\n  color: red\r\n  font-size: 12px\r\n}\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EEs mejor tener la costumbre de agregarlo siempre:\u003C\/div\u003E\u003Cpre\u003E.demo {\r\n  color: red;\r\n  font-size: 12px;\r\n}\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"color: #FFF;font-family: Verdana;font-size: 17px;text-align: justify;\"\u003E¿Qué propiedad se aplica cuando se definen varias veces?\u003C\/div\u003E\u003Cpre\u003E.demo {\r\n  color: red;\r\n  font-size: 18px;\r\n  color: green;\r\n}\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ELa última; siempre la última; en este caso, el color a usar será el verde.\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/1851002987097994601\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/08\/dudas-y-errores-cuando-se-usa-css.html#comment-form","title":"24 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/1851002987097994601"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/1851002987097994601"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/08\/dudas-y-errores-cuando-se-usa-css.html","title":"Dudas y errores cuando se usa CSS"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"24"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-6346991263842764081"},"published":{"$t":"2011-08-15T00:00:00.002-03:00"},"updated":{"$t":"2011-08-15T00:43:34.352-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Tratando de entender la propiedad line-height"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003ELa propiedad \u003Cspan style=\"color: rgb(102, 255, 255); font-weight: bold;\"\u003Eline-height\u003C\/span\u003E puede resultar algo confusa ya que, por lo general, es \"invisible\"; por ejemplo, si la agrego a un elemento \u003Cspan style=\"font-style: italic;\"\u003Einline\u003C\/span\u003E como SPAN que tenga un color de fondo, no parece tener efecto sobre el texto pero, se \"separa\" de lo que está arriba y abajo:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align:center;\"\u003E\u003Cspan style=\"background-color:#456;line-height: 50px;\"\u003EIn hac habitasse platea dictumst.\u003C\/span\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EEs más fácil de ver si coloco esa propiedad en un bloque como un DIV o P:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div style=\"line-height: 50px;\"\u0026gt;\r\n  \u0026lt;span style=\"background-color:#456;\"\u0026gt;In hac habitasse platea dictumst.\u0026lt;\/span\u0026gt;\r\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E.LHdemos {background-color: #000;border: 2px solid #444;margin: 0 auto;text-align: center;width: 500px;}\u003C\/style\u003E\u003Cdiv class=\"LHdemos\" style=\"line-height: 20px;\"\u003E\u003Cspan style=\"background-color:#456;\"\u003EIn hac habitasse platea dictumst.\u003C\/span\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"LHdemos\" style=\"line-height: 50px;\"\u003E\u003Cspan style=\"background-color:#456;\"\u003EIn hac habitasse platea dictumst.\u003C\/span\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"LHdemos\" style=\"line-height: 100px;\"\u003E\u003Cspan style=\"background-color:#456;\"\u003EIn hac habitasse platea dictumst.\u003C\/span\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EAllí podemos ver que ese rectángulo coloreado y con un borde, al que sólo le vamos cambiando el valor de line-height (20, 50, 100), se va haciendo cada vez más alto y el texto, siempre queda centrado verticalmente.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Cimg src=\"http:\/\/4.bp.blogspot.com\/-nUtGsRyWHUw\/TiPPvxr7rXI\/AAAAAAAASSw\/lIS7wiTMZR4\/s00\/line-height.png\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EEso es exactamente lo que es line-height, la altura de una línea, de cualquier línea y si bien sirve para alinear verticalmente algo, este método sólo es útil cuando cuando eso que queremos mostrar no es demasaido ancho ya que si es excesivo y requiere dos líneas, las cosas se verán mal:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"line-height: 100px;\" class=\"LHdemos\"\u003EIn hac habitasse platea dictumst.\u003Cbr \/\u003E\nIn hac habitasse platea dictumst.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EPor defecto, a menos que esté definida globalmente, el valor de line-height es 1; eso, significa que la altura de una línea es exactamente igual al tamaño de la fuente; en este caso, la altura del DIV será exactamente de 50 pixeles ya que 28 + 22 = 50:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"line-height: 1;\" class=\"LHdemos\"\u003E\u003Cspan style=\"font-size:28px;\"\u003Efont-size:28px\u003C\/span\u003E\u003Cbr \/\u003E\n\u003Cspan style=\"font-size:22px;\"\u003Efont-size:22px\u003C\/span\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EUsando valores absolutos, la altura se calcula fácilmente, basta multiplicar ese número por el tamaño de la fuente. Si en el ejemplo anterior, line-height tuviera el valor 1.5, la altura total sería de: 28 * 1.5 + 22 * 1.5 = 70 pixeles\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"line-height: 1.5;\" class=\"LHdemos\"\u003E\u003Cspan style=\"font-size:28px;\"\u003Efont-size:28px\u003C\/span\u003E\u003Cbr \/\u003E\n\u003Cspan style=\"font-size:22px;\"\u003Efont-size:22px\u003C\/span\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003ESuelen usarse otras propiedades;  px para pixeles es fácil de entender en cambio, em no es tan simple ya que es un valor empleado en tipografía (\u003Ca rel=\"nofollow\" href=\"http:\/\/en.wikipedia.org\/wiki\/Em_%28typography%29\" target=\"_blank\"\u003Emás información\u003C\/a\u003E) y es bastante arbitrario; en los dos ejemplos anteriores, la altura final del contenedor será de 37 o 51pixeles pero, esos valores variarán si la fuente es otra; por el contrario, si los valores son expresados como absolutos o en pixeles, el tipo de fuente no tendrá influencia y la altura será siempre la misma.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nComo dije, line-height define la altura de una línea pero eso no significa que sólo se aplique a  los textos. También es una forma de alinear imágenes verticalmente:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div style=\"line-height: 300px;\"\u0026gt;\r\n  \u0026lt;img style=\"vertical-align:middle\" src=\"URL_imagen\"\/\u0026gt;\r\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EEse DIV tendrá 300 pixeles de alto y una imagen centrada, sin importar el tamaño de esa imagen salvo que, clar, supere los 300 pixeles de alto en cuyo caso, se mostrará completa y el valor de line-height será ignorado:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"line-height: 300px;\" class=\"LHdemos\"\u003E\u003Cimg style=\"vertical-align:middle\" id=\"LHdemos\" src=\"https:\/\/lh3.googleusercontent.com\/_qfa9R8IbFoA\/TbXyODm5neI\/AAAAAAAADh8\/0FwF2zS1wog\/s200\/09_0293.jpg\"\/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Ca href=\"javascript:void(0);\" onclick=\"document.getElementById('LHdemos').src='https:\/\/lh3.googleusercontent.com\/_qfa9R8IbFoA\/TbXyODm5neI\/AAAAAAAADh8\/0FwF2zS1wog\/s100\/09_0293.jpg';\"\u003Ealtura imagen = 80\u003C\/a\u003E | \u003Ca href=\"javascript:void(0);\" onclick=\"document.getElementById('LHdemos').src='https:\/\/lh3.googleusercontent.com\/_qfa9R8IbFoA\/TbXyODm5neI\/AAAAAAAADh8\/0FwF2zS1wog\/s200\/09_0293.jpg';\"\u003Ealtura imagen = 160\u003C\/a\u003E | \u003Ca href=\"javascript:void(0);\" onclick=\"document.getElementById('LHdemos').src='https:\/\/lh3.googleusercontent.com\/_qfa9R8IbFoA\/TbXyODm5neI\/AAAAAAAADh8\/0FwF2zS1wog\/s300\/09_0293.jpg';\"\u003Ealtura imagen = 240\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/6346991263842764081\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/08\/tratando-de-entender-la-propiedad-line.html#comment-form","title":"5 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/6346991263842764081"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/6346991263842764081"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/08\/tratando-de-entender-la-propiedad-line.html","title":"Tratando de entender la propiedad line-height"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/-nUtGsRyWHUw\/TiPPvxr7rXI\/AAAAAAAASSw\/lIS7wiTMZR4\/s72-c\/line-height.png","height":"72","width":"72"},"thr$total":{"$t":"5"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-7764290257417891169"},"published":{"$t":"2011-08-08T00:00:00.000-03:00"},"updated":{"$t":"2011-08-08T00:00:02.314-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Transiciones combinadas"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EEste es un ejemplo de transiones que se aplican de modo diferente cuando colocamos el cursor encima del botón y cuando lo quitamos con lo que se genera una animación sin necesdad de utilizar JavaScript.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEl concepto es simple y puede ser aplicado a cualquier elemento, basta poner un tipo de transición en la regla de estilo del enlace y otra en la del efecto \u003Cspan style=\"font-style: italic;\"\u003Ehover\u003C\/span\u003E:\u003C\/div\u003E\u003Cpre\u003E#ejemplo {\n  border-radius: 5px;\n  padding: 10px;\n  -moz-transition: padding 2s;\n  -webkit-transition: padding 2s;\n  -o-transition: padding 2s;\n}\n#ejemplo:hover {\n  border-radius: 15px;\n  padding: 20px;\n  -moz-transition: border-radius 2s;\n  -webkit-transition: border-radius 2s;\n  -o-transition: border-radius 2s;\n}\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E#demodos {-moz-transition: padding 2s ease 0s;-webkit-transition: padding 2s ease 0s;-o-transition: padding 2s ease 0s;background-color: #678;border: 2px solid #AAA;border-radius: 5px;color: #FFF;font-family: Tahoma;font-size: 32px;font-weight: normal;padding: 10px;}#demodos:hover {-moz-transition: border-radius,-moz-transform 1s ease 0s;-webkit-transition: border-radius,-webkit-transform 1s ease 0s;-o-transition: border-radius,-o-transform 1s ease 0s;border-radius: 35px;padding: 20px;-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);-o-transform: rotate(360deg);-ms-transform: rotate(360deg);}\u003C\/style\u003E\u003Cdiv style=\"text-align:center;\"\u003E\u003Ca href=\"#\" id=\"demodos\"\u003Eejemplo\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EUsando esta idea, en \u003Ca href=\"http:\/\/css-tricks.com\/different-transitions-for-hover-on-hover-off\/\" target=\"_blank\"\u003Ecss-tricks.com\u003C\/a\u003E lo han llevado hasta el ímite, generando un código no apto para quienes les gustan las cosas simples:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"linkContraido\" onclick=\"SINO('demohovert');\"\u003E\u003C\/div\u003E\u003Cpre id=\"demohovert\" class=\"elementoOculto\"\u003E\u0026lt;style\u0026gt;\n  #buttonwrap {\n    margin: 0 auto;\n    text-align: center;\n    width: 600px;\n  }\n  #button {\n    -moz-transform: rotate(720deg);\n    -webkit-transform: rotate(720deg);\n    -o-transform: rotate(720deg);\n    -ms-transform: rotate(720deg);\n    -moz-transition: all 0.5s cubic-bezier(1, 0.8, 0.5, 1) 0.5s;\n    -webkit-transition: all 0.5s cubic-bezier(1, 0.8, 0.5, 1) 0.5s;\n    -o-transition: all 0.5s cubic-bezier(1, 0.8, 0.5, 1) 0.5s;\n    -moz-background-clip: padding;\n    -webkit-background-clip: padding;\n    background-clip: padding-box; \n    background-image: -moz-linear-gradient(center top , #5BE93A, #278312);\n    -webkit-gradient(linear,left top,left bottom,color-stop(0, #5be93a),color-stop(1, #278312));\n    border: 5px solid #AEFBAE;\n    border-radius: 25px;\n    color: #FFF;\n    display: block;\n    font-family: Tahoma;\n    font-size: 60px;\n    font-weight: 300;\n    margin: 80px auto;\n    padding: 60px 15px;\n    position: relative;\n    text-decoration: none;\n    text-shadow: 5px 3px 1px rgba(0, 0, 0, 0.5);\n    width: 150px;\n    z-index: 1;\n  }\n  #button:hover {\n    -moz-transform: rotate(0deg);\n    -webkit-transform: rotate(0deg);\n    -o-transform: rotate(0deg);\n    -ms-transform: rotate(0deg);\n    -moz-transition: padding 0.2s ease 0s, top 0.2s ease 0s;\n    -webkit-transition: padding 0.2s ease 0s, top 0.2s ease 0s;\n    -o-transition: padding 0.2s ease 0s, top 0.2s ease 0s;\n    background-image: -moz-linear-gradient(center top , #5BE93A, #5BE93A, #278312);\n    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #5be93a),color-stop(0.2, #5be93a),color-stop(1, #278312));\n    padding: 70px 30px;\n    top: -10px;\n  }\n  #button:after {\n    bottom: 0;\n    content: \"\";\n    left: 0;\n    position: absolute;\n    right: 0;\n    top: 0;\n    z-index: -1;\n  }\n  #button:before {\n    -moz-transition: all 0.2s ease 0s;\n    -wekit-transition: all 0.2s ease 0s;\n    -o-transition: all 0.2s ease 0s;\n    border-radius: 35px;\n    bottom: -30px;\n    box-shadow: 0 0 100px rgba(255, 255, 255, 0.1) inset;\n    content: \"\";\n    left: -30px;\n    position: absolute;\n    right: -30px;\n    top: -30px;\n    z-index: -2;\n  }\n  #button:hover:before {\n    bottom: -20px;\n    box-shadow: 0 0 100px rgba(255, 255, 255, 0.2) inset;\n    left: -20px;\n    right: -20px;\n    top: -20px;\n  }\n  #button:active {\n    box-shadow: 0 0 30px rgba(255, 255, 255, 0.8) inset;\n  }\n\u0026lt;\/style\u0026gt;\n\n\u0026lt;div id=\"buttonwrap\"\u0026gt;\n  \u0026lt;a href=\"#\" id=\"button\"\u003ECSS3\u0026lt;\/a\u0026gt;\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cstyle\u003E#buttonwrap {margin: 0 auto;text-align: center;width: 600px;} #button {-moz-transform: rotate(720deg);-webkit-transform: rotate(720deg);-o-transform: rotate(720deg);-ms-transform: rotate(720deg);-moz-transition: all 0.5s cubic-bezier(1, 0.8, 0.5, 1) 0.5s;-webkit-transition: all 0.5s cubic-bezier(1, 0.8, 0.5, 1) 0.5s;-o-transition: all 0.5s cubic-bezier(1, 0.8, 0.5, 1) 0.5s;-moz-background-clip: padding;-webkit-background-clip: padding;background-clip: padding-box;background-image: -moz-linear-gradient(center top , #5BE93A, #278312);-webkit-gradient(linear,left top,left bottom,color-stop(0, #5be93a),color-stop(1, #278312));border: 5px solid #AEFBAE;border-radius: 25px;color: white;display: block;font-family: Tahoma;font-size: 60px;font-weight: 300;margin: 80px auto;padding: 60px 15px;position: relative;text-decoration: none;text-shadow: 5px 3px 1px rgba(0, 0, 0, 0.5);width: 150px;z-index: 1;}#button:hover {-moz-transform: rotate(0deg);-webkit-transform: rotate(0deg);-o-transform: rotate(0deg);-ms-transform: rotate(0deg);-moz-transition: padding 0.2s ease 0s, top 0.2s ease 0s;-webkit-transition: padding 0.2s ease 0s, top 0.2s ease 0s;-o-transition: padding 0.2s ease 0s, top 0.2s ease 0s;background-image: -moz-linear-gradient(center top , #5BE93A, #5BE93A, #278312);background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #5be93a),color-stop(0.2, #5be93a),color-stop(1, #278312));padding: 70px 30px;top: -10px;} #button:after {bottom: 0;content: \"\";left: 0;position: absolute;right: 0;top: 0;z-index: -1;}#button:before {-moz-transition: all 0.2s ease 0s;-wekit-transition: all 0.2s ease 0s;-o-transition: all 0.2s ease 0s;border-radius: 35px;bottom: -30px;box-shadow: 0 0 100px rgba(255, 255, 255, 0.1) inset;content: \"\";left: -30px;position: absolute;right: -30px;top: -30px;z-index: -2;}#button:hover:before {bottom: -20px;box-shadow: 0 0 100px rgba(255, 255, 255, 0.2) inset;left: -20px;right: -20px;top: -20px;}#button:active {box-shadow: 0 0 30px rgba(255, 255, 255, 0.8) inset;}\u003C\/style\u003E\u003Cdiv id=\"buttonwrap\"\u003E\u003Ca href=\"#\" id=\"button\"\u003ECSS3\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/7764290257417891169\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/08\/transiciones-combinadas.html#comment-form","title":"7 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/7764290257417891169"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/7764290257417891169"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/08\/transiciones-combinadas.html","title":"Transiciones combinadas"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"7"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-5279731931774216111"},"published":{"$t":"2011-07-29T00:00:00.002-03:00"},"updated":{"$t":"2011-07-29T00:59:35.317-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"},{"scheme":"http://www.blogger.com/atom/ns#","term":"herramientas"}],"title":{"type":"text","$t":"Selección de botones CSS"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003E\u003Ca href=\"http:\/\/www.webresourcesdepot.com\/css3-buttons-10-awesome-ready-to-use-solutions-all-related-tutorials-you-need\/\" target=\"_blank\"\u003EWebResourcesDepot\u003C\/a\u003E presenta una selección de botones creados con CSS3 que pueden ser descargados, utilizados o editados a gusto de cada uno. Algunos ejemplos como \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2010\/11\/bonbon-sweet-botones-con-css3.html\" target=\"_blank\"\u003EBonBon\u003C\/a\u003E ya los había probado pero otros son novedosos y de todos ellos algo puede aprenderse.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Ctable style=\"margin:0 auto;border:none;width:100%\" cellspacing=\"30\" cellpadding=\"0\"\u003E\u003Ctr\u003E\u003Ctd align=\"center\" valign=\"middle\"\u003E\u003Cstyle\u003E button.blue-candy {background: #2260dd;background: -moz-linear-gradient(top, #779be9 0%, #376fe0 50%, #2260dd 50%, #2463de 100%);background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #779be9), color-stop(0.5, #376fe0), color-stop(0.5, #2260dd), color-stop(1, #2463de));border-radius: 3px;color: #fff;font-family:helvetica, arial, sans-serif;font-size: 12px;font-weight: bold;line-height: 1;padding: 10px 0 12px 0;text-align: center;text-shadow: 0px -1px 1px #2c4d93;width: 150px;background-clip: padding-box;} button.blue-candy:hover {background: #1d55c4;background: -moz-linear-gradient(top, #6989cf 0%, #3263c7 50%, #1d55c4 50%, #1d55c4 100%);background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #6989cf), color-stop(0.5, #3263c7), color-stop(0.5, #1d55c4), color-stop(1, #1d55c4));background-clip: padding-box;cursor: pointer;} button.blue-candy:active {background: #1a4aab;background: -moz-radial-gradient(50% 31% 0deg,circle cover, rgba(38, 76, 153, 0.4), rgba(11, 23, 46, 0.4)),-moz-linear-gradient(top, #5c78b5 0%, #2b57ad 50%, #1a4aab 50%, #1b4bab 100%);background: -webkit-gradient(radial, 50% 20%, 75, 50% 50%, 0, from(rgba(38, 76, 153, 0.4)), to(rgba(11, 23, 46, 0.4))),-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #5c78b5), color-stop(0.5, #2b57ad), color-stop(0.5, #1a4aab), color-stop(1, #1b4bab));color: #ddd;background-clip: padding-box;} \u003C\/style\u003E\u003Cbutton class=\"blue-candy\"\u003EBlue Candy\u003C\/button\u003E\u003C\/td\u003E\u003Ctd align=\"left\" valign=\"middle\"\u003E\u003Ca href=\"http:\/\/ubuwaits.github.com\/css3-buttons\/\" target=\"_blank\"\u003ECSS3 Buttons\u003C\/a\u003E es un conjunto de 18 estilos con varios colores y formas.\u003C\/td\u003E\u003C\/tr\u003E\n\u003Ctr\u003E\u003Ctd align=\"center\" valign=\"middle\"\u003E\u003Cstyle\u003E.button {border-radius: 8px;box-shadow: 0 0px 5px #FFF inset;border: 1px solid;padding: 8px 12px;color: #fff  !important;font-family: Arial, Tahoma, sans-serif  !important;font-size: 1.4em !important;font-weight: bold !important;text-shadow: -1px -1px rgba(0,0,0,0.1), 0 0 15px rgba(255,255,255,0.75);white-space: nowrap;background: #777;border-color: #777;position: relative;} .button:hover,.button:focus {bottom: 1px;box-shadow: inset 0 -1px 3px rgba(255,255,255,0.5), 0 3px 2px rgba(0,0,0,0.2);} .button:active {top: 1px;box-shadow: inset 0 -1px 3px rgba(255,255,255,0.5), 0 1px 2px rgba(0,0,0,0.2);}\n.orange {background: #FF5F09;border-color: #FF5F09;} .orange:hover,orange:focus {background: #FF7F09;border-color: #FF7F09;} \u003C\/style\u003E\u003Ca href=\"#\" class=\"button orange\"\u003EDolor lorem ipsum\u003C\/a\u003E\u003C\/td\u003E\u003Ctd align=\"left\" valign=\"middle\"\u003E\u003Ca href=\"http:\/\/horaciobella.com\/zardi\/\" target=\"_blank\"\u003EZardi\u003C\/a\u003E es una serie de reglas de estilo creadas por \u003Ca href=\"http:\/\/horaciobella.com\/\" target=\"_blank\"\u003EHoracio Bella\u003C\/a\u003E que pueden ser utilizadas parcial o totalmente.\u003C\/td\u003E\u003C\/tr\u003E\n\u003Ctr\u003E\u003Ctd align=\"center\" valign=\"middle\"\u003E\u003Cstyle\u003E.awesome{display: inline-block;padding: 5px 10px 6px;color: #fff  !important;font-weight: bold  !important;line-height: 1;border-radius: 5px;text-shadow: 0 -1px 1px #222;border-bottom: 1px solid #222;position: relative;cursor: pointer;box-shadow: 0 1px 3px rgba(255,255,255,0.5);text-shadow: 0 -1px 1px rgba(255,255,255,0.25);border-bottom: 1px solid rgba(0,0,0,0.25);background-color: #FFB515;} .awesome:hover {background-color: #FC9200;}\u003C\/style\u003E\u003Ca class=\"awesome\"\u003EAwesome Yellow Button »\u003C\/a\u003E\u003C\/td\u003E\u003Ctd align=\"left\" valign=\"middle\"\u003E\u003Ca href=\"http:\/\/www.zurb.com\/article\/266\/super-awesome-buttons-with-css3-and-rgba\" target=\"_blank\"\u003ESuper Awesome Buttons\u003C\/a\u003E son botones con sombras, aptos para fondos claros u oscuros.\u003C\/td\u003E\u003C\/tr\u003E\n\u003Ctr\u003E\u003Ctd align=\"center\" valign=\"middle\"\u003E\u003Cstyle\u003E.custom{border-radius:0.3em;font-size:30px;line-height:1.2em;padding:0.3em 1em;border-width:1px;padding:2px 12px;border-width:2px}.heart{background-color:#c10300;background-image:-webkit-gradient(radial, 50% 10%, 0, 50% 10%, 30, color-stop(0%, #e82926), color-stop(100%, #7c0f0d));background-image:-moz-radial-gradient(50% 10%, circle, #e82926 0%, #7c0f0d 30px);background-image:radial-gradient(50% 10%, circle, #e82926 0%, #7c0f0d 30px);border-color:#6a0d0b;text-shadow:#420100 0px 1px 1px;box-shadow:rgba(255,255,255,0.379) 0 0 0.1em 1px inset;background-clip:padding;padding-box;}.heart,.heart:visited{color:#fff}.heart:hover,.heart:focus{background-color:#b20300;background-image:-webkit-gradient(radial, 50% 10%, 0, 50% 10%, 30, color-stop(0%, #e61c19), color-stop(100%, #6e0d0c));background-image:-moz-radial-gradient(50% 10%, circle, #e61c19 0%, #6e0d0c 30px);background-image:radial-gradient(50% 10%, circle, #e61c19 0%, #6e0d0c 30px);border-color:#5c0b0a;text-shadow:#330100 0px 1px 1px}.heart:hover,.heart:hover:visited,.heart:focus,.heart:focus:visited{color:#fff}.heart:active{background-color:#a30300;background-image:-webkit-gradient(radial, 50% 10%, 0, 50% 10%, 30, color-stop(0%, #a61412), color-stop(100%, #d41a17));background-image:-moz-radial-gradient(50% 10%, circle, #a61412 0%, #d41a17 30px);background-image:radial-gradient(50% 10%, circle, #a61412 0%, #d41a17 30px);border-color:#4e0a08;text-shadow:#230100 0px -1px -1px;box-shadow:#6a0d0b 0 0.08em 0.1em 1px inset}.heart:active,.heart:active:visited{color:#fff}\u003C\/style\u003E\u003Cbutton class=\"custom heart\"\u003E♥\u003C\/button\u003E\u003C\/td\u003E\u003Ctd align=\"left\" valign=\"middle\"\u003E\u003Ca href=\"http:\/\/brandonmathis.com\/projects\/fancy-buttons\/\" target=\"_blank\"\u003EFancy Buttons\u003C\/a\u003E es complicado pero es para verlo y mirar el código fuente y experimentar.\u003C\/td\u003E\u003C\/tr\u003E\n\u003Ctr\u003E\u003Ctd align=\"center\" valign=\"middle\"\u003E\u003Cstyle\u003E.button9{border-radius:1px;background: -moz-linear-gradient(19% 50% 90deg,#55792F, #608736, #608736 0%);background: -webkit-gradient(linear, 0% 50%, 0% 51%, from(#608736), to(#55792F), color-stop(0,#608736));color:#f5f5f5 !important;float:left;font-family:arial,helvetica,sans-serif !important;font-size:17px  !important;font-weight:bold !important;padding:10px 40px;text-shadow:0 1px 0 #000;border-bottom:1px solid rgba(255, 255, 255, 0.7);border-top:1px solid rgba(255, 255, 255, 0.7);}.button9:hover{background: -moz-linear-gradient(19% 50% 90deg,#486628, #4E6E2C, #4E6E2C 0%);background: -webkit-gradient(linear, 0% 50%, 0% 51%, from(#4E6E2C), to(#486628), color-stop(0,#4E6E2C));}\u003C\/style\u003E\u003Ca class=\"button9\" href=\"#\"\u003ETry to click me\u003C\/a\u003E\u003C\/td\u003E\u003Ctd align=\"left\" valign=\"middle\"\u003E\u003Ca href=\"http:\/\/www.markedlines.com\/10-awesome-css3-buttons-to-use-on-your-website\/\" target=\"_blank\"\u003E10 Nice CSS3 Buttons\u003C\/a\u003E es interesant porque contiene explicaciones paso a paso\u003C\/td\u003E\u003C\/tr\u003E\n\u003C\/table\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003E\u003Ca href=\"http:\/\/tutorialzine.com\/2010\/10\/css3-animated-bubble-buttons\/\" target=\"_blank\"\u003ECSS3 Animated Bubble Buttons\u003C\/a\u003E requiere el uso de imágenes de fondo; ver \u003Ca href=\"http:\/\/demo.tutorialzine.com\/2010\/10\/css3-animated-bubble-buttons\/css3-buttons.html\" target=\"_blank\"\u003Edemo online\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Cimg src=\"http:\/\/4.bp.blogspot.com\/-6qH7zHX18BU\/Tai1orzXP-I\/AAAAAAAAR1k\/5MdWN2C2JVo\/s00\/css3animatedbuttons.jpg\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EY más:\u003C\/div\u003E\u003Cul class=\"lista\"\u003E\u003Cli\u003E\u003Ca href=\"http:\/\/www.andrewgreig.com\/2010\/05\/styling-pretty-buttons-with-css3\/\" target=\"_blank\"\u003EPretty CSS3 Buttons\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"http:\/\/css3buttons.michaelhenriksen.dk\/\" target=\"_blank\"\u003EGitHub-Style CSS3 Buttons\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"http:\/\/www.wearepico.com\/buttons\/\" target=\"_blank\"\u003EWe Love Buttons\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"http:\/\/code.google.com\/p\/sexybuttons\/\" target=\"_blank\"\u003ESexy Buttons\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"http:\/\/somadesign.ca\/2010\/realistic-css3-buttons-redux\/\" target=\"_blank\"\u003ERealistic CSS3 Buttons\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"http:\/\/technology.posterous.com\/make-css3-buttons-that-are-extremely-fancy\" target=\"_blank\"\u003EMake CSS3 buttons that are extremely fancy\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"http:\/\/blog.anomalyinnovations.com\/2010\/03\/creating-a-realistic-looking-button-with-css3\/\" target=\"_blank\"\u003ECreating a Realistic Looking Button with CSS3\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"http:\/\/www.leemunroe.com\/css-button\/\" target=\"_blank\"\u003EHow To Design A Sexy Button Using CSS\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"http:\/\/www.darrenhoyt.com\/2009\/09\/20\/better-button-and-nav-interactions\/\" target=\"_blank\"\u003EBetter Button and Nav Interactions \u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"http:\/\/naioo.com\/blog\/css3-buttons-without-any-images\/\" target=\"_blank\"\u003ECSS3 Buttons Without Any Images\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"http:\/\/webdesignerwall.com\/tutorials\/css3-gradient-buttonsCSS3 Gradient Buttons\" target=\"_blank\"\u003ECSS3 Gradient Buttons\u003C\/a\u003E\u003C\/li\u003E\n\u003C\/ul\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/5279731931774216111\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/07\/seleccion-de-botones-css.html#comment-form","title":"6 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/5279731931774216111"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/5279731931774216111"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/07\/seleccion-de-botones-css.html","title":"Selección de botones CSS"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/-6qH7zHX18BU\/Tai1orzXP-I\/AAAAAAAAR1k\/5MdWN2C2JVo\/s72-c\/css3animatedbuttons.jpg","height":"72","width":"72"},"thr$total":{"$t":"6"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-1854934562406852755"},"published":{"$t":"2011-07-25T00:00:00.002-03:00"},"updated":{"$t":"2011-07-25T00:05:47.344-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Cuando cambiar un color es una tarea imposible"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EEs común que pregunten por qué no cambia el color de un título aunque no hay errores de sintaxis y a simple vista, todo parece normal.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nObviamente, eso dependerá de cada caso pero, el error más común es no tener en cuenta que ese título también es un enlace y por lo tanto, lo que debe cambiarse no es el color del contenedor sino el color del contenido.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSi el HTML es algo así:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;h3 class=\"post-title\"\u0026gt;\n  \u0026lt;a href=\"UNA_URL\"\u003Eel texto del título\u0026lt;\/a\u0026gt;\n\u0026lt;\/h3\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ELa etiqueta H3 (o cualquier otro encabezado) es el contenedor y la etiqueta A es el contenido.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEn una página web, es común que se defina el estilo de los enlaces de manera genérica y eso, afectará a todos ellos, sin importar donde estén; en este ejemplo, todos serán de color rojo y al poner el cursor encima cambiarán a amarillo:\u003C\/div\u003E\u003Cpre\u003Ea, a:visited, a:link  { color: red; }\na:hover { color: yellow; }\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ESi luego, definimos el color de las etiquetas H3 como verdes, no veremos ese cambio:\u003C\/div\u003E\u003Cpre\u003Eh3 { color: green; }\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EPara que el cambio tenga efecto, debe definirse la regla para el enlace; esto, traducido al español, significa que los enlaces que estén dentro de una etiqueta H3, sean de color verde:\u003C\/div\u003E\u003Cpre\u003Eh3 a { color: green; }\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ELo mismo puede ocurrir si hay reglas de estilo menos genéricas pero que definen los estilos de cierto sector, por ejemplo:\u003C\/div\u003E\u003Cpre\u003E.post-body a { color: black; }\n.sidebar a { color: brown; }\n#footer-wrapper a { color: cyan; }\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003ETodos los enlaces contenidos dentro de esos rectángulos, serán afectados por las propiedades establecidas así que, si quiere modificarse uno de sus contenidos, hay que agregar nuevas reglas; no sólo para títulos sino para cualquier otra etiqueta, indicando de manera precisa cuál es el elemento a modificar:\u003C\/div\u003E\u003Cpre\u003E.sidebar h2 a { color: green; }\n.sidebar li a { color: green; }\n.sidebar li a span { color: green; }\u003C\/pre\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/1854934562406852755\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/07\/cuando-cambiar-un-color-es-una-tarea.html#comment-form","title":"9 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/1854934562406852755"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/1854934562406852755"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/07\/cuando-cambiar-un-color-es-una-tarea.html","title":"Cuando cambiar un color es una tarea imposible"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"9"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-5786619949630184664"},"published":{"$t":"2011-07-22T00:00:00.001-03:00"},"updated":{"$t":"2011-07-22T02:04:18.922-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Ejemplos de animaciones con CSS"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EAhora que Firefox 5 interpreta correctamente las animaciones realizadas con CSS, acá hay un par de ejemplos publicados en \u003Ca href=\"https:\/\/developer.mozilla.org\/en-US\/demos\/\" target=\"_blank\" rel=\"nofollow\"\u003EMozilla Demo Studio\u003C\/a\u003E realizados por \u003Ca href=\"http:\/\/www.cssplay.co.uk\/\" target=\"_blank\" rel=\"nofollow\"\u003EStu Nicholls\u003C\/a\u003E; en todos los casos, los códigos fuente pueden ser descargados y también funcionan en Chrome y Safari. \u003Cbr \/\u003E\n\u003Cbr \/\u003E\nNinguno de estos ejemplos utiliza imágenes ni JavaScript.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Ch4 style=\"text-align:center;\"\u003E\u003Ca style=\"font-size: 28px;font-weight: normal !important;\" href=\"https:\/\/developer.mozilla.org\/en-US\/demos\/detail\/meowww\" target=\"_blank\" rel=\"nofollow\"\u003EMeowww!\u003C\/a\u003E\u003C\/h4\u003E\u003Cbr \/\u003E\n\u003Ccenter\u003E\u003Ciframe scrolling=\"no\" frameborder=\"0\" align=\"middle\" style=\"margin: 0 auto; width: 450px; background-color: #FFF; height: 525px;\" src=\"https:\/\/developer.mozilla.org\/media\/uploads\/demos\/S\/t\/Stu%20Nicholls\/31420fbca859d05826f3c9b33616cba2\/meowww_1309020318_demo_package\/index.html\" allowtransparency=\"true\" marginheight=\"0\" marginwidth=\"0\"\u003E\u003C\/iframe\u003E\u003C\/center\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ch4 style=\"text-align:center;\"\u003E\u003Ca style=\"font-size: 28px;font-weight: normal !important;\" href=\"https:\/\/developer.mozilla.org\/en-US\/demos\/detail\/im-forever-blowing-bubbles\" target=\"_blank\" rel=\"nofollow\"\u003EI'm forever blowing bubbles\u003C\/a\u003E\u003C\/h4\u003E\u003Cbr \/\u003E\n\u003Ccenter\u003E\u003Ciframe scrolling=\"no\" frameborder=\"0\" align=\"middle\" style=\"background-color: transparent; width: 500px; height: 550px; margin: -50px auto 0;\" src=\"https:\/\/developer.mozilla.org\/media\/uploads\/demos\/S\/t\/Stu%20Nicholls\/44131e097d964f9c15c25658f0d78380\/im-forever-blowing-b_1308655873_demo_package\/index.html\" allowtransparency=\"true\" marginheight=\"0\" marginwidth=\"0\"\u003E\u003C\/iframe\u003E\u003C\/center\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EPara quienes no puedan verlos, este es un video de otro demo realizado por \u003Ca href=\"http:\/\/animatable.com\/\" target=\"_blank\" rel=\"nofollow\"\u003EAnthony Calzadilla\u003C\/a\u003E.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cscript type='text\/javascript'\u003Eescribir_YTvideo(\"q3lxspwIOx4\",\"Rofox\",\"Una animación de Anthony Calzadilla.\");\u003C\/script\u003E\u003Cbr \/\u003E\n\u003Cimg src=\"http:\/\/img.youtube.com\/vi\/q3lxspwIOx4\/0.jpg\" style=\"left:-1000px;position:absolute;\" \/\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/5786619949630184664\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/07\/ejemplos-de-animaciones-con-css.html#comment-form","title":"4 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/5786619949630184664"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/5786619949630184664"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/07\/ejemplos-de-animaciones-con-css.html","title":"Ejemplos de animaciones con CSS"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"4"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-7234798185260253125"},"published":{"$t":"2011-07-18T00:00:00.000-03:00"},"updated":{"$t":"2011-07-18T00:00:04.762-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"},{"scheme":"http://www.blogger.com/atom/ns#","term":"JavaScript"}],"title":{"type":"text","$t":"Acordeones y transiciones"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003ESiempre que queremos ejecutar alguna acción sobre una etiqueta debemos hacer \u003Cspan style=\"font-style: italic;\"\u003Eclick\u003C\/span\u003E en ella y para interactuar, el CSS no es suficiente, necesitamos JavaScript para que el navegador actué así que, para crear acordeones, hay que combinar ambas cosas.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nUn acordeón no es mucho más que una serie de enlaces que nos permiten mostrar y ocultar contenidos de tal manera que sólo uno de ellos es visible; cuando se muestra el seleccionado, los demás se ocultan y de ese modo, el espacio utilizado se optimiza.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nHay muchos métodos para crear esto y este sólo es una demostración del concepto básico.\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div id=\"demoA\"\u0026gt;\n  \u0026lt;a onclick=\"demoacordeon('primero');\" href=\"javascript:void(0);\"\u0026gt;primero\u0026lt;\/a\u0026gt;\n  \u0026lt;div id=\"primero\" class=\"visible\"\u0026gt;\n    \u0026lt;p\u0026gt; ....... el contenido ....... \u0026lt;\/p\u0026gt;\n  \u0026lt;\/div\u0026gt;\n  \u0026lt;a onclick=\"demoacordeon('segundo');\" href=\"javascript:void(0);\"\u0026gt;segundo\u0026lt;\/a\u0026gt;\n  \u0026lt;div id=\"segundo\" class=\"novisible\"\u0026gt;\n    \u0026lt;p\u0026gt; ....... el contenido ....... \u0026lt;\/p\u0026gt;\n  \u0026lt;\/div\u0026gt;\n  \u0026lt;a onclick=\"demoacordeon('tercero');\" href=\"javascript:void(0);\"\u0026gt;tercero\u0026lt;\/a\u0026gt;\n  \u0026lt;div id=\"tercero\" class=\"novisible\"\u0026gt;\n    \u0026lt;p\u0026gt; ....... el contenido ....... \u0026lt;\/p\u0026gt;\n  \u0026lt;\/div\u0026gt;\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EDentro de un DIV contenedor, ponemos una sucesión de enlaces y otros DIVs con los contenidos, identificados con un ID exclusivo. Cada enlace ejecutará la función de JavaScript enviándole el ID.\u003C\/div\u003E\u003Cpre\u003E\u0026lt;script\u0026gt;\n\/\/\u0026lt;![CDATA[\n  var abierto = \"primero\"; \/\/ definimos el que estará abierto\n  function demoacordeon(cual) {\n    var mostrar = document.getElementById(cual); \/\/ el que vamos a mostrar\n    var actual = document.getElementById(abierto); \/\/ el que vamos a ocultar\n    if(mostrar==actual) {return false;} \/\/ si es el mismo no hacemos nada\n    \/\/ permutamos sus clases\n    actual.className=\"novisible\";\n    mostrar.className=\"visible\";\n    abierto = cual; \/\/ guardamos el que está abierto\n  }\n\/\/]]\u0026gt;\n\u0026lt;\/script\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EPara simplificar todo, cada contenido tiene una clase CSS. Si es visible es la clase \u003Cspan style=\"font-weight: bold; color: rgb(51, 255, 255);\"\u003Evisible\u003C\/span\u003E y para deslumbrar con nuestra originalidad, cuando no es visible la llamamos \u003Cspan style=\"color: rgb(51, 255, 255); font-weight: bold;\"\u003Enovisible\u003C\/span\u003E:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;style\u0026gt;\n  #demoA { \/* al div contenedor lo dimensionamos y centramos *\/\n    margin: 0 auto;\n    width: 500px;\n  }\n  #demoA a { \/* establecemos las propeidades de los enlaces o botones *\/\n    background-color: #456;\n    box-shadow: 0 0 4px #ABC inset;\n    display: block;\n    font-size: 16px;\n    height: 2em;\n    line-height: 2em;\n    margin: 1px 0;\n    padding-left: 20px;\n  }\n  #demoA a:hover {\n    box-shadow: 0 0 12px #ABC inset;\n    color: #EEE;\n  }\n  #demoA div { \/* los contenidos *\/\n    overflow:hidden;\n    text-align: center;\n    \/* cada cambio se realizará con un efecto animado ¨*\/\n    -moz-transition: all 1s ease-in-out;\n    -webkit-transition: all 1s ease-in-out;\n    -o-transition: all 1s ease-in-out;\n    transition: all 1s ease-in-out;\n  }\n  #demoA div.visible {\n    \/* el visible tiene borde y una cierta altura *\/\n    border: 1px solid #456;\n    height:100px;\n  }\n  #demoA div.novisible {\n    \/* el oculto no tiene borde y su altura es cero *\/\n    border: 1px solid transparent;\n    height:0px;\n  }\n\u0026lt;\/style\u0026gt;\u003C\/pre\u003E\u003Cstyle\u003E#srcdemoANIM3 {margin: 0 auto;width: 500px;} #srcdemoANIM3 a {background-color: #456;box-shadow: 0 0 4px #ABC inset;display: block;font-size: 16px;height: 2em;line-height: 2em;margin: 1px 0;padding-left: 20px;} #srcdemoANIM3 a:hover {box-shadow:0 0 12px #ABC inset;color:#EEE;} #srcdemoANIM3 div {overflow:hidden;text-align: center;-moz-transition: all 1s ease-in-out;-webkit-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out;} #srcdemoANIM3 div.visible {border: 1px solid #456;height:100px;} #srcdemoANIM3 div.novisible {border: 1px solid transparent;height:0px;}\u003C\/style\u003E\u003Cscript\u003Evar abierto = \"primero\";function srcdemoANIM3(cual) {var mostrar = document.getElementById(cual);var actual = document.getElementById(abierto);if(mostrar==actual) {return false;}actual.className=\"novisible\";mostrar.className=\"visible\";abierto = cual;}\u003C\/script\u003E\u003Cdiv id=\"srcdemoANIM3\"\u003E\u003Ca onclick=\"srcdemoANIM3('primero');\" href=\"javascript:void(0);\"\u003Eprimero\u003C\/a\u003E\u003Cdiv id=\"primero\" class=\"visible\"\u003E\u003Cp style=\"padding:0 10px;\"\u003EProin consequat, justo quis ultrices vestibulum, lorem mi porttitor justo, et tristique magna ipsum sit amet ligula. Aliquam ante libero, imperdiet a sollicitudin commodo, iaculis at nunc? Proin luctus, diam nec semper ultrices, purus quam accumsan purus, ac sodales nunc odio in tellus.\u003C\/p\u003E\u003C\/div\u003E\u003Ca onclick=\"srcdemoANIM3('segundo');\" href=\"javascript:void(0);\"\u003Esegundo\u003C\/a\u003E\u003Cdiv id=\"segundo\" class=\"novisible\"\u003E\u003Cp style=\"padding:0 10px;\"\u003EProin consequat, justo quis ultrices vestibulum, lorem mi porttitor justo, et tristique magna ipsum sit amet ligula. Aliquam ante libero, imperdiet a sollicitudin commodo, iaculis at nunc? Proin luctus, diam nec semper ultrices, purus quam accumsan purus, ac sodales nunc odio in tellus.\u003C\/p\u003E\u003C\/div\u003E\u003Ca onclick=\"srcdemoANIM3('tercero');\" href=\"javascript:void(0);\"\u003Etercero\u003C\/a\u003E\u003Cdiv id=\"tercero\" class=\"novisible\"\u003E\u003Cp style=\"padding:0 10px;\"\u003ESuspendisse a ipsum nisi. Vestibulum a sapien sem, eu ultricies tellus. Vestibulum arcu diam, varius in malesuada ut, lacinia nec turpis. Aliquam erat volutpat. Duis vitae magna at nunc ornare facilisis quis eu augue. Curabitur ut urna nulla! Donec in enim ac ligula malesuada cursus.\u003C\/p\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/7234798185260253125\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/07\/acordeones-y-transiciones.html#comment-form","title":"12 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/7234798185260253125"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/7234798185260253125"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/07\/acordeones-y-transiciones.html","title":"Acordeones y transiciones"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"12"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-318642897864746953"},"published":{"$t":"2011-07-12T00:00:00.002-03:00"},"updated":{"$t":"2017-05-30T00:50:19.136-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Seguimos alineando verticalmente"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EAlinear cosas \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2009\/12\/contenedores-y-contenidos-alinear.html\" target=\"_blank\"\u003Everticalmente\u003C\/a\u003E siempre es complicado y es algo que se vuelve más engorroso cuando tenemos varios elementos que queremos colocar uno al lado del otro agregándoles la propiedad \u003Ca target=\"_blank\" href=\"http:\/\/vagabundia.blogspot.com\/2011\/03\/los-margenes-los-paddings-las.html\"\u003Efloat\u003C\/a\u003E pero, como  tienen diferente altura se mostrarán alineados en su parte superior:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"vagacode\"\u003E\u003Cdiv class=\"sue\"\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/NbIBf0Z.jpg\"\u003E\u003Cp\u003EAlinear algo verticalmente no es tan sencillo como debería serlo. No hay una solución universal, todo depende de cada caso ¿Es un texto, corto? ¿Son imágenes de distinta altura? ¿Son elementos combinados?\u003C\/p\u003E\u003C\/div\u003E\u003Cdiv class=\"gowi\"\u003E\u003Cspan\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/yrSqFzYl.png\"\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/alineacion-vertical-en-css\"\u003Eleer artículo actualizado\u003C\/a\u003E\u003C\/span\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/\"\u003E\u003Cimg class=\"wlogo\" src=\"http:\/\/i.imgur.com\/QZHLte7.png\"\u003E\u003C\/a\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/318642897864746953\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/07\/seguimos-alineando-verticalmente.html#comment-form","title":"8 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/318642897864746953"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/318642897864746953"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/07\/seguimos-alineando-verticalmente.html","title":"Seguimos alineando verticalmente"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"8"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-271300029575661402"},"published":{"$t":"2011-07-06T00:00:00.002-03:00"},"updated":{"$t":"2011-07-06T00:00:02.832-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"¿Qué es transform-origin?"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003ECuando utilizamos las propiedades de transformación, estas se ejecutan tomado como punto de origen el centro el objeto. Esto es así en todos los navegadores que las soportan, incluyendo Internet Explorer 9. En el resto, solemos emplear filtros pero estos funcionan de manera \u003Ca href=\"http:\/\/someguynameddylan.com\/lab\/transform-origin-in-internet-explorer.php\" target=\"_blank\"\u003Ecompletamente distinta\u003C\/a\u003E así que por un rato nos ovidamos de ellos. \u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSi bien todos los navegadores modernos aceptan la propiedad,  por ahora, cada uno de ellos utiliza prefijos propios:\u003C\/div\u003E\u003Cpre\u003E-moz-transform para Firefox\n-webkit-transform para Chrome y Safari\n-o-transform para Opera\n-ms-transform para Internet Explorer 9\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E.demorota {cursor:pointer;-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);} .demorota:hover {-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand');zoom: 1;} .demozoom {cursor:pointer;-moz-transform:scale(1);-webkit-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1);} .demozoom:hover {-moz-transform:scale(0.8);-webkit-transform:scale(0.8);-o-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8);zoom: 0.8;} .origenlefttop {-moz-transform-origin: left top;-webkit-transform-origin: left top;-o-transform-origin: left top;-ms-transform-origin: left top;} .origendemo {cursor:pointer;width:100px;-moz-transform:scale(1);-webkit-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:rotatescale(1);} .origendemo:hover {-moz-transform:scale(2);-webkit-transform:scale(2);-o-transform:scale(2);-ms-transform:scale(2);transform:rotatescale(2);z-index:100;}\u003C\/style\u003E\u003Cdiv style=\"text-align: center;width:550px;margin:0 auto;\"\u003E\u003Cimg style=\"float:left;\" class=\"demorota\" src=\"http:\/\/3.bp.blogspot.com\/-65G1rfbtWb8\/TZ0o2OgDaeI\/AAAAAAAAR00\/2TJzuimljAM\/s00\/torigin.gif\" \/\u003E\u003Cimg style=\"float:right;\" class=\"demozoom\" src=\"http:\/\/3.bp.blogspot.com\/-65G1rfbtWb8\/TZ0o2OgDaeI\/AAAAAAAAR00\/2TJzuimljAM\/s00\/torigin.gif\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;clear:both;padding-top:25px;\"\u003ESi bien ese punto de origen es el que esta definido por defecto, también hay una propiedad que permite cambiarlo llamada \u003Cspan style=\"color: rgb(51, 255, 255); font-weight: bold;\"\u003Etransform-origin\u003C\/span\u003E que también tiene sus prefijos:\u003C\/div\u003E\u003Cpre\u003E-moz-transform-origin\n-webkit-transform-origin\n-o-transform-origin\n-ms-transform-origin\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EEn todos los navegadores, el valor inicial es 50% 50% y para definirlo pueden usarse porcentajes, pixeles o palabras como center, left, right, top o bottom.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEl orden es el mismo que en todas las otras propiedades, el primero indica la coordenada horizontal y el segundo la vertical. Así que si pusieramos 0 0 o left top, cambiaríamos el punto de origen al ángulo superior izquierdo (que es como funcionan los filtros de IE):\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;width:550px;margin:0 auto;clear:both;\"\u003E\u003Cimg style=\"float:left;\" class=\"demorota origenlefttop\" src=\"http:\/\/3.bp.blogspot.com\/-65G1rfbtWb8\/TZ0o2OgDaeI\/AAAAAAAAR00\/2TJzuimljAM\/s00\/torigin.gif\" \/\u003E\u003Cimg style=\"float:right;\" class=\"demozoom origenlefttop\" src=\"http:\/\/3.bp.blogspot.com\/-65G1rfbtWb8\/TZ0o2OgDaeI\/AAAAAAAAR00\/2TJzuimljAM\/s00\/torigin.gif\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;clear:both;padding-top:25px;\"\u003EDe este modo:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cspan style=\"margin-left:50px;\"\u003Etransform-origin: center center o transform-origin: 50% 50% es el centro y el valor por defecto\u003C\/span\u003E\u003Cbr \/\u003E\n\u003Cspan style=\"margin-left:50px;\"\u003Etransform-origin: left top o transform-origin: 0% 0% es el ángulo superior izquierdo\u003C\/span\u003E\u003Cbr \/\u003E\n\u003Cspan style=\"margin-left:50px;\"\u003Etransform-origin: right top o transform-origin: 100% 0 es el ángulo superior derecho\u003C\/span\u003E\u003Cbr \/\u003E\n\u003Cspan style=\"margin-left:50px;\"\u003Etransform-origin: left bottom o transform-origin: 0% 100% es el ángulo inferior izquierdo\u003C\/span\u003E\u003Cbr \/\u003E\n\u003Cspan style=\"margin-left:50px;\"\u003Etransform-origin: right bottom o transform-origin: 100% 100% es el ángulo inferior derecho\u003C\/span\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Ctable style=\"margin:0 auto;border:none;width:500px\" cellspacing=\"10\" cellpadding=\"0\"\u003E\u003Ctr\u003E\u003Ctd align=\"center\" valign=\"middle\" style=\"background-color: #567;border: 1px solid #ABC;color: #FFF;\"\u003Ecenter top\u003C\/td\u003E\u003Ctd align=\"center\" valign=\"middle\" style=\"background-color: #567;border: 1px solid #ABC;color: #FFF;\"\u003Ecenter bottom\u003C\/td\u003E\u003Ctd align=\"center\" valign=\"middle\" style=\"background-color: #567;border: 1px solid #ABC;color: #FFF;\"\u003Eleft center\u003C\/td\u003E\u003Ctd align=\"center\" valign=\"middle\" style=\"background-color: #567;border: 1px solid #ABC;color: #FFF;\"\u003Eright center\u003C\/td\u003E\u003C\/tr\u003E\n\u003Ctr\u003E\u003Ctd align=\"center\" valign=\"middle\"\u003E\u003Cimg class=\"origendemo\" src=\"http:\/\/4.bp.blogspot.com\/_hljKDuw-cxQ\/S_1rZbqkGaI\/AAAAAAAAPys\/573D7QclFRM\/s200\/imagesDEMOBASE.jpg\" style=\"-moz-transform-origin: center top;-webkit-transform-origin: center top;-o-transform-origin: center top;-ms-transform-origin: center top;\"\/\u003E\u003C\/td\u003E\u003Ctd align=\"center\" valign=\"middle\"\u003E\u003Cimg class=\"origendemo\" src=\"http:\/\/4.bp.blogspot.com\/_hljKDuw-cxQ\/S_1rZbqkGaI\/AAAAAAAAPys\/573D7QclFRM\/s200\/imagesDEMOBASE.jpg\" style=\"-moz-transform-origin: center bottom;-webkit-transform-origin: center bottom;-o-transform-origin: center bottom;-ms-transform-origin: center bottom;\"\/\u003E\u003C\/td\u003E\u003Ctd align=\"center\" valign=\"middle\"\u003E\u003Cimg class=\"origendemo\" src=\"http:\/\/4.bp.blogspot.com\/_hljKDuw-cxQ\/S_1rZbqkGaI\/AAAAAAAAPys\/573D7QclFRM\/s200\/imagesDEMOBASE.jpg\" style=\"-moz-transform-origin: left center;-webkit-transform-origin: left center;-o-transform-origin: left center;-ms-transform-origin: left center;\"\/\u003E\u003C\/td\u003E\u003Ctd align=\"center\" valign=\"middle\"\u003E\u003Cimg class=\"origendemo\" src=\"http:\/\/4.bp.blogspot.com\/_hljKDuw-cxQ\/S_1rZbqkGaI\/AAAAAAAAPys\/573D7QclFRM\/s200\/imagesDEMOBASE.jpg\" style=\"-moz-transform-origin: right center;-webkit-transform-origin: right center;-o-transform-origin: right center;-ms-transform-origin: right center;\"\/\u003E\u003C\/td\u003E\u003C\/tr\u003E\n\u003C\/table\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"referenciaExterna\"\u003E\u003Cspan\u003EREFERENCIAS:\u003C\/span\u003E\u003Ca href=\"http:\/\/msdn.microsoft.com\/en-us\/scriptjunkie\/gg709742.aspx\" target=\"_blank\"\u003EUnderstanding CSS3 2D Transforms\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/271300029575661402\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/07\/que-es-transform-origin.html#comment-form","title":"4 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/271300029575661402"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/271300029575661402"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/07\/que-es-transform-origin.html","title":"¿Qué es transform-origin?"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/3.bp.blogspot.com\/-65G1rfbtWb8\/TZ0o2OgDaeI\/AAAAAAAAR00\/2TJzuimljAM\/s72-c\/torigin.gif","height":"72","width":"72"},"thr$total":{"$t":"4"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-8655849907965074614"},"published":{"$t":"2011-07-04T00:00:00.003-03:00"},"updated":{"$t":"2011-07-04T04:54:08.188-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Enlaces en forma de triángulo"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003ENo es algo que uno vaya a utilizar mucho pero, de todas formas esto es una curiosidad interesante.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nCada 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 \u003Cspan style=\"font-style: italic;\"\u003Eclick\u003C\/span\u003E, 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:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center;\"\u003E\u003Ca href=\"javascript:void(0);\"\u003E\u003Cimg src=\"http:\/\/4.bp.blogspot.com\/_hljKDuw-cxQ\/TAlFMhHaP0I\/AAAAAAAAP2I\/mDKdm-agrWo\/s00\/triangulo.gif\" \/\u003E\u003C\/a\u003E \u003Ca href=\"javascript:void(0);\"\u003E\u003Cimg style=\"border:1px dotted #666;margin-left:100px;\" src=\"http:\/\/4.bp.blogspot.com\/_hljKDuw-cxQ\/TAlFMhHaP0I\/AAAAAAAAP2I\/mDKdm-agrWo\/s00\/triangulo.gif\" \/\u003E\u003C\/a\u003E\u003Ca href=\"javascript:void(0);\"\u003E\u003Cimg style=\"border:1px dotted #666;margin-left:100px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476);\" src=\"http:\/\/4.bp.blogspot.com\/_hljKDuw-cxQ\/TAlFMhHaP0I\/AAAAAAAAP2I\/mDKdm-agrWo\/s00\/triangulo.gif\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EEn \u003Ca href=\"http:\/\/www.impressivewebs.com\/page-corner-ads-css3\/\" target=\"_blank\"\u003EImpressive Webs\u003C\/a\u003E 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 \u003Ca href=\"http:\/\/www.webdesignbooth.com\/5-extremely-simple-ways-to-add-page-curl-to-your-website\/\" target=\"_blank\"\u003EPage Peel\u003C\/a\u003E pero claro, mucho más elemental.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nLa idea es sencilla aunque tiene sus bemoles para compatibilizarla con Internet Explorer ya que allí hay que agregar algún \u003Cspan style=\"font-style:italic;\"\u003Ehack\u003C\/span\u003E para posicionarlo correctamente dado que la forma de \"medir\" las cosas es diferente.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEl HTML es \"normal\", un DIV contenedor donde colocamos el enlace y el contenido:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div class=\"contenedor\"\u0026gt;\n\u0026lt;a id=\"corner\" href=\"la_URL\" \u0026gt; el enlace \u0026lt;\/a\u0026gt;\n... cualquier otro contenido ...\n\u0026lt;div\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EPara 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:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;style\u0026gt;\n.contenedor {\n\/* propiedades obligatorias *\/\noverflow: hidden;\nposition: relative;\n\/* propiedades optativas *\/\nborder-radius: 0 0 0 20px;\nbackground-color: #202931;\nborder-bottom: 5px solid #404951;\nborder-left: 5px solid #404951;\ncolor: #FFF;\nmargin: 0 auto;\npadding: 30px;\nwidth: 470px;\n}\n#corner {\n\/* lo dimensionamos y lo posicionamos de manera absoluta *\/\ndisplay: block;\nheight: 100px;\nposition: absolute;\nwidth: 100px;\n\/* lo rotamos *\/\n-moz-transform: rotate(45deg);\n-o-transform: rotate(45deg);\n-webkit-transform: rotate(45deg);\nfilter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476);\n\/* la posición del triangulo*\/\ntop:-50px;\nright:-50px;\n\/* otras propeidades optativas *\/\nbackground-color: #A00;\nbox-shadow: 0px 0px 50px #000 inset;\n}\n\u0026lt;\/style\u0026gt;\n\u0026lt;!-- la posición de ese mismo triángulo en Internet Explorer --\u0026gt;\n\u0026lt;!--[if IE]\u0026gt;\n\u0026lt;style\u0026gt;\n#corner-ad {right: -30px; top: -70px;}\n\u0026lt;\/style\u0026gt;\n\u0026lt;![endif]--\u0026gt;\u003C\/pre\u003E\u003Cstyle\u003E#corner-ad {display: block;width:100px;height:100px;position: absolute;top:-50px;right:-50px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);background-color:#A00;box-shadow:0px 0px 50px #000 inset; filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999');filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476);}\u003C\/style\u003E\u003C!--[if IE]\u003E\u003Cstyle\u003E#corner-ad {right:-30px !important;top:-70px !important;}\u003C\/style\u003E\u003C![endif]--\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"border-radius:0 0 0 20px;background-color:#202931;border-bottom:5px solid #404951;border-left:5px solid #404951;color:#FFF;margin:0 auto;overflow:hidden;padding:30px;position:relative;width:470px;\"\u003E\u003Ca href=\"javascript:void();\" id=\"corner-ad\"\u003E\u003C\/a\u003EDonec 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.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nCras 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.\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/8655849907965074614\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/07\/enlaces-en-forma-de-triangulo.html#comment-form","title":"4 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/8655849907965074614"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/8655849907965074614"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/07\/enlaces-en-forma-de-triangulo.html","title":"Enlaces en forma de triángulo"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/_hljKDuw-cxQ\/TAlFMhHaP0I\/AAAAAAAAP2I\/mDKdm-agrWo\/s72-c\/triangulo.gif","height":"72","width":"72"},"thr$total":{"$t":"4"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-6926637776120951726"},"published":{"$t":"2011-07-01T00:00:00.001-03:00"},"updated":{"$t":"2011-07-01T00:00:00.491-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Más burbujas con CSS"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EEsta es otra forma de \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2010\/06\/burbujas-con-css.html\" target=\"_blan\"\u003Ecrear burbujas\u003C\/a\u003E utilizando sólo CSS; en Internet Explorer no se verán \"redondeces\" pero, dependiendo de los colores utilizados, se mostrará aceptablemente.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cstyle\u003E.chat-bubble {background-color:#DEF;border:2px solid #000;color:#444;display:inline-block;font-size:36px;line-height:1.3em;margin: 0 0 0 10px;padding:10px;position:relative;text-align:center;width: auto;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;-moz-box-shadow:0 0 5px #FFF;-webkit-box-shadow:0 0 5px #FFF;box-shadow:0 0 5px #FFF;} .chat-bubble-arrow-border {border-color: #000 transparent transparent transparent;border-style: solid;border-width: 10px;height:0;width:0;position:absolute;bottom:-22px;left:30px;} .chat-bubble-arrow {border-color: #DEF transparent transparent transparent;border-style: solid;border-width: 10px;height:0;width:0;position:absolute;bottom:-19px;left:30px;} .chat-bubble span {color: #000;font-family: Verdana;text-shadow: 1px 4px 1px #ABC;}\u003C\/style\u003E\u003Cdiv class=\"chat-bubble\"\u003Eeste es un \u003Cspan\u003Etexto\u003C\/span\u003E\u003Cdiv class=\"chat-bubble-arrow-border\"\u003E\u003C\/div\u003E\u003Cdiv class=\"chat-bubble-arrow\"\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EUn poco de HTML:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div class=\"chat-bubble\"\u0026gt;\n  este es el \u0026lt;span\u0026gt;texto\u0026lt;\/span\u0026gt;\n  \u0026lt;div class=\"chat-bubble-arrow-border\"\u0026gt;\u0026lt;\/div\u0026gt;\n  \u0026lt;div class=\"chat-bubble-arrow\"\u0026gt;\u0026lt;\/div\u0026gt;\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EY mucho estilo para personalizar cualquier detalle:\u003C\/div\u003E\u003Cpre\u003E.chat-bubble {\n  background-color: #DEF;\n  border: 2px solid #000;\n  color: #444;\n  display: inline-block;\n  font-size: 36px;\n  line-height: 1.3em;\n  margin: 0 0 0 10px;\n  padding: 10px;\n  position: relative;\n  text-align: center;\n  width: auto;\n  -moz-border-radius: 10px;\n  -webkit-border-radius: 10px;\n  border-radius: 10px;\n  -moz-box-shadow: 0 0 5px #FFF;\n  -webkit-box-shadow: 0 0 5px #FFF;\n  box-shadow: 0 0 5px #FFF;\n}\n.chat-bubble-arrow-border {\n  border-color: #000 transparent transparent transparent;\n  border-style: solid;\n  border-width: 10px;\n  bottom: -22px;\n  height: 0;\n  left: 30px;\n  position: absolute;\n  width: 0;\n}\n.chat-bubble-arrow {\n  border-color: #DEF transparent transparent transparent;\n  border-style: solid;\n  border-width: 10px;\n  bottom: -19px;\n  height: 0;\n  left: 30px;\n  position: absolute;\n  width: 0;\n}\n.chat-bubble span {\n    color: #000;\n    font-family: Verdana;\n    text-shadow: 1px 4px 1px #ABC;\n}\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"chat-bubble\"\u003Eeste es otro \u003Cspan\u003Etexto\u003C\/span\u003E distinto\u003Cdiv class=\"chat-bubble-arrow-border\"\u003E\u003C\/div\u003E\u003Cdiv class=\"chat-bubble-arrow\"\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003ESi se quiere centrar hay quw establecer el ancho así que cambiamos algunas propiedades acá:\u003C\/div\u003E\u003Cpre\u003E.chat-bubble {\n  .......\n  display: block;\n  margin: 0 auto;\n  width: 300px;\n}\u003C\/pre\u003E\u003Cdiv class=\"referenciaExterna\"\u003E\u003Cspan\u003EREFERENCIAS:\u003C\/span\u003E\u003Ca href=\"http:\/\/jonrohan.me\/guide\/css\/creating-triangles-in-css\/\" target=\"_blank\"\u003Ejonrohan.me\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/6926637776120951726\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/07\/mas-burbujas-con-css.html#comment-form","title":"2 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/6926637776120951726"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/6926637776120951726"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/07\/mas-burbujas-con-css.html","title":"Más burbujas con CSS"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"2"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-6177081209719602836"},"published":{"$t":"2011-06-23T00:00:00.001-03:00"},"updated":{"$t":"2017-10-29T00:47:14.381-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Y nos animamos un poco más"},"content":{"type":"html","$t":"\u003Cdiv class=\"vagacode\"\u003E\u003Cdiv class=\"sue\"\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/N44cNUj.jpg\"\u003E\u003Cp\u003EUna animación con CSS es algo similar a una transisicón que se repite un número de veces y requiere de dos partes, establecer los intervalos y propiedades a modificar en @keyframes y la propiedad animation en cualquier etiqueta.\u003C\/p\u003E\u003C\/div\u003E\u003Cdiv class=\"gowi\"\u003E\u003Cspan\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/yrSqFzYl.png\"\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/animaciones-con-css\"\u003Eleer artículo actualizado\u003C\/a\u003E\u003C\/span\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/\"\u003E\u003Cimg class=\"wlogo\" src=\"http:\/\/i.imgur.com\/QZHLte7.png\"\u003E\u003C\/a\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/6177081209719602836\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/06\/y-nos-animamos-un-poco-mas.html#comment-form","title":"8 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/6177081209719602836"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/6177081209719602836"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/06\/y-nos-animamos-un-poco-mas.html","title":"Y nos animamos un poco más"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"8"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-8539414113138857235"},"published":{"$t":"2011-06-21T00:00:00.003-03:00"},"updated":{"$t":"2017-06-29T01:06:02.337-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":":after y :before"},"content":{"type":"html","$t":"\u003Cdiv class=\"vagacode\"\u003E\u003Cdiv class=\"sue\"\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/lcRlc3w.png\"\u003E\u003Cp\u003Ebefore es lo que está antes , after es lo que está después ... los pseudo-elementos ::after y ::before resultan ser muy sencillos de manejar y tener infinitas posibilidades ya que nos permiten agregar contenido utilizando el CSS.\u003C\/p\u003E\u003C\/div\u003E\u003Cdiv class=\"gowi\"\u003E\u003Cspan\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/yrSqFzYl.png\"\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/after-y-before\"\u003Eleer artículo actualizado\u003C\/a\u003E\u003C\/span\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/\"\u003E\u003Cimg class=\"wlogo\" src=\"http:\/\/i.imgur.com\/QZHLte7.png\"\u003E\u003C\/a\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/8539414113138857235\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/06\/after-y-before.html#comment-form","title":"13 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/8539414113138857235"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/8539414113138857235"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/06\/after-y-before.html","title":":after y :before"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"13"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-2630211873015623823"},"published":{"$t":"2011-06-15T00:00:00.002-03:00"},"updated":{"$t":"2011-06-16T00:20:28.300-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Buscando con efectos"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EEsto de tener que usar jQuery para todo, a mi no me convence. Será la nueva moda pero me gusta llevar la contra y buscar alternativas porque las librerías de \u003Cspan style=\"font-style: italic;\"\u003Escripts\u003C\/span\u003E son cómodas pero, ya se sabe que el sedentarismo no es bueno así que siempre es mejor encontrar variantes o por lo menos, intentarlo.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEn este caso se trata de \u003Ca href=\"http:\/\/boxtuffs.com\/stuff\/autogrow-search\/\" target=\"_blank\"\u003EAutogrow search\u003C\/a\u003E, una forma de crear una etiqueta INPUT que es la que se utiliza en los buscadores para ingresar el texto y que tiene la característica de ampliarse y modificar otros detalles gráficos cuando se activa.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEvidentemente, la animación sin librerías externas es limitada pero, algo es algo y de este modo, no requerimos agregar \u003Cspan style=\"font-style: italic;\"\u003Escripts\u003C\/span\u003E de ninguna clase ya que todo se hace con CSS.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E:focus {outline:none !important;} #wrap-search {-webkit-transition: all .2s ease-out;-moz-transition: all .2s ease-out;-o-transition: all .2s ease-out;transition: all .2s ease-out;margin: 0 auto;width: 100px;} #wrap-search br {display:none;} #search {background: -moz-linear-gradient(center bottom , #9B9B9B 0%, #A9A9A9 50%, #CACACA 50%, #D3D3D3 2550%);background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #9B9B9B),color-stop(0.5, #A9A9A9),color-stop(0.5,  #CACACA),color-stop(25.5, #D3D3D3));border-radius: 5px;padding: 4px;} #wrap-search:hover {width:200px;} .form-search {position:relative;border:1px solid #747474;height:32px;border-radius:3px;box-shadow: inset 0 1px 1px #575555, 0 1px 0 #FFF;-webkit-transition: all .2s ease-out;-moz-transition: all .2s ease-out;-o-transition: all .2s ease-out;transition: all .2s ease-out;background: -webkit-gradient(linear, 0 bottom, 0 top, from(#ebebeb ), to(#BCBCBC));background: -moz-linear-gradient(-90deg, #bcbcbc, #EBEBEB);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#EBEBEB', EndColorStr='#BCBCBC');} .form-search input[type='text'] {line-height: 34px;height:34px;border:none;padding:0 32px 0 6px;font-size:13px;font-family:Helvetica, Arial, sans-serif;color:#6e7074;text-shadow:0 1px 0 #FFF;background:none;} #wrap-search:hover input[type='text'] {color:#597C84; } #wrap-search:hover .form-search {color:#25464d;box-shadow: inset 0 1px 1px #46575b, 0 1px 0 #fff;background: -webkit-gradient(linear, 0 bottom, 0 top, from(#dfecef ), to(#9cc2ca));background: -moz-linear-gradient(-90deg, #9cc2ca, #dfecef );filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#DFECEF', EndColorStr='#9CC2CA');} .form-search input[type='image'] {height: 32px;position: absolute;right: 0px;top: 0px;width: 32px;opacity: .5;filter:alpha(opacity=50);} .form-search input[type='image']:hover {opacity: 1;filter:alpha(opacity=100);}\u003C\/style\u003E\u003Cdiv id=\"wrap-search\" \u003E\u003Cdiv id=\"search\"\u003E\u003Cform class=\"form-search\" method=\"get\" action=\"\/search\" target=\"_blank\"\u003E\u003Cinput src=\"http:\/\/2.bp.blogspot.com\/-EO0pxmYodGY\/Te6ENmoPd2I\/AAAAAAAASAo\/HeldlNsaIVc\/s00\/search.png\" type=\"image\"\/\u003E\u003Cinput type=\"text\" name=\"q\" value=\"buscar\" onfocus=\"this.value='';\" onmouseover=\"this.value='';\" onmouseout=\"this.value='buscar';\" onblur=\"this.value='buscar';\"\/\u003E\u003C\/form\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EEl HTML es el que va donde se nos ocurra mostrarlo y sería algo así:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;div id=\"wrap-search\"\u0026gt;\n\u0026lt;div id=\"search\"\u0026gt;\n  \u0026lt;form class=\"form-search\" method=\"get\" action=\"\/search\" target=\"_blank\"\u0026gt;\n    \u0026lt;input src=\"\u003Cspan style=\"color: #FFFF00\"\u003EURL_IMAGEN\u003C\/span\u003E\" type=\"image\"\/\u0026gt;\n    \u0026lt;input type=\"text\" name=\"q\" value=\"buscar\" onfocus=\"this.value='';\" onblur=\"this.value='buscar';\" onmouseover=\"this.value='';\" onmouseout=\"this.value='buscar';\" \/\u0026gt;\n    \u0026lt;\/form\u0026gt;\n  \u0026lt;\/div\u0026gt;\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EEn un DIV al que identificamos como \u003Cspan style=\"color: rgb(204, 204, 255);\"\u003Ewrap-search\u003C\/span\u003E, colocamos otro llamado \u003Cspan style=\"color: rgb(204, 204, 255);\"\u003Esearch\u003C\/span\u003E; esta duplicación es la que nos permite crear un diseño gráfico diferente ya que hay dos rectángulos que ocupan el mismo espacio y a los que podemos aplicar propiedades distintas.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEl contenido es \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2007\/08\/breve-aclaracin-sobre-formularios.html\" target=\"_blank\"\u003Euna etiqueta FORM\u003C\/a\u003E cuyo atributo \u003Cspan style=\"color: rgb(102, 255, 255);\"\u003Eaction\u003C\/span\u003E nos permite ver los resultados dentro del mismo sitio y el atributo \u003Cspan style=\"color: rgb(102, 255, 255);\"\u003Etarget\u003C\/span\u003E los abrirá en una nueva pestaña.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEn una etiqueta INPUT de tipo IMAGE, colocamos una imagen que será la que funcionará como botón. Al hacer \u003Cspan style=\"font-style: italic;\"\u003Eclick\u003C\/span\u003E en ella, se ejecutará el formulario.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEn otra etiqueta INPUT de tipo TEXT, es donde se escribe el texto a buscar.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEl CSS es la clave de todo y usa la propiedad \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2011\/03\/introduccion-las-transiciones-con-css.html\" target=\"_blank\"\u003Etransition\u003C\/a\u003E para generar la animación que, por supuesto, no será visible en Internet Explorer así como algunas de las otras propiedades pero, de todas maneras, será totalmente funcional.\u003C\/div\u003E\u003Cpre\u003E\u0026lt;style\u0026gt;\n  #wrap-search {\n    margin: 0 auto;\n    width: 100px;\n    -moz-transition: all .2s ease-out;\n    -webkit-transition: all .2s ease-out;\n    -o-transition: all .2s ease-out;\n    transition: all .2s ease-out;\n  }\n  #wrap-search br { display: none; }\n  #wrap-search #search {\n    background: -moz-linear-gradient(center bottom , #9B9B9B 0%, #A9A9A9 50%, #CACACA 50%, #D3D3D3 2550%);\n    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #9B9B9B),color-stop(0.5, #A9A9A9),color-stop(0.5,  #CACACA),color-stop(25.5, #D3D3D3));\n     filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#9B9B9B', EndColorStr='#CACACA');\n    border-radius: 5px;\n    padding: 4px;\n  }\n  #wrap-search:hover { width:200px; }\n  .form-search {\n    background: -webkit-gradient(linear, 0 bottom, 0 top, from(#EBEBEB), to(#BCBCBC));\n    background: -moz-linear-gradient(-90deg, #BCBCBC, #EBEBEB);\n    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#EBEBEB', EndColorStr='#BCBCBC');\n    border: 1px solid #747474;\n    border-radius: 3px;\n    box-shadow: inset 0 1px 1px #575555, 0 1px 0 #FFF;\n    height: 32px;\n    position: relative;\n    -moz-transition: all .2s ease-out;\n    -webkit-transition: all .2s ease-out;\n    -o-transition: all .2s ease-out;\n    transition: all .2s ease-out;\n  }\n  .form-search input[type='text'] {\n    background: none;\n    border: none;\n    color:#6E7074;\n    height: 34px;\n    line-height: 34px;\n    padding: 0 27px 0 6px;\n    font-family: Helvetica, Arial, sans-serif;\n    font-size: 13px;\n    text-shadow: 0 1px 0 #FFF;\n  }\n  #wrap-search:hover input[type='text'] { color:#597C84; }\n  #wrap-search:hover .form-search {\n    background: -moz-linear-gradient(-90deg, #9CC2CA, #DFECEF);\n    background: -webkit-gradient(linear, 0 bottom, 0 top, from(#DFECEF), to(#9CC2CA));\n    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#DFECEF', EndColorStr='#9CC2CA');\n    box-shadow: inset 0 1px 1px #46575b, 0 1px 0 #FFF;\n    color: #25464D;\n  }\n  .form-search input[type='image'] {\n    height: 32px;\n    opacity: .5;\n    filter:alpha(opacity=50);\n    position: absolute;\n    right: 0px;\n    top: 0px;\n    width: 32px;\n  }\n  .form-search input[type='image']:hover {\n    opacity: 1;\n    filter:alpha(opacity=100);\n  }\n\u0026lt;\/style\u0026gt;\u003C\/pre\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/2630211873015623823\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/06\/buscando-con-efectos.html#comment-form","title":"19 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/2630211873015623823"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/2630211873015623823"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/06\/buscando-con-efectos.html","title":"Buscando con efectos"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"19"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-7765952123960059410"},"published":{"$t":"2011-06-14T00:00:00.001-03:00"},"updated":{"$t":"2011-06-14T05:03:45.187-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Modelos de cajas con CSS3"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003E\u003Ca href=\"http:\/\/www.tutorialshock.com\/tutorials\/fancy-css3-boxes\/\" target=\"_blank\" rel=\"nofollow\"\u003Etutorialshock.com\u003C\/a\u003E muestra varios modelos de cajas de textos creadas pura y exclusivamente usando CSS3 así que su uso en IE es limitado.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nComplejos, bastante retorcidos y el demo de descarga sólo prevé el código para Chrome (es una nueva moda en muchos sitios) pero igual, se puede ver y sacar alguna idea.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEstos son sólo tres de los 16 modelos:\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E.box2 p, .box5 p, .box11 p, .box13 p {margin: 30px;color: #888 !important;}.box2{ margin: 0 auto; width: 300px; min-height: 150px; padding: 0 0 1px 0; position:relative; background: #f3f3f3; background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3)); background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff); border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom-right-radius: 60px 60px; box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);}.box2:before{ content:''; width: 25px; height: 20px; position: absolute; bottom:0; right:0; border-bottom-right-radius: 30px; border-bottom-right-radius: 30px; box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3); -webkit-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px); -moz-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px); -o-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px); transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);}.box2:after{ content: ''; z-index: -1; width: 100px; height: 100px; position:absolute; bottom:0; right:0; background: rgba(0, 0, 0, 0.2); display: inline-block; box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg); -moz-transform: rotate(0deg) translate(-45px,-20px) skew(20deg); -o-transform: rotate(0deg) translate(-45px,-20px) skew(20deg); transform: rotate(0deg) translate(-45px,-20px) skew(20deg);}.box5{ margin: 0 auto; width: 300px; padding: 0 0 1px 0; position:relative; background: #f3f3f3; background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3)); background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff); border-top: 1px solid #ccc; border-right: 1px solid #ccc;    border-bottom-left-radius:60px 60px; border-bottom-right-radius: 60px 60px; box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);}.box5:before{ content:''; width: 25px; height: 20px; background: white; position: absolute; bottom:0; right:0; background: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff), to( #eee), color-stop(.1,#fff)); background: -moz-linear-gradient(0 50% 90deg, #fff, #fff 10%, #eee);border-bottom-right-radius: 30px; box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3); -webkit-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px); -moz-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px); -o-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);  transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);}.box5:after{ content: ''; z-index: -10; width: 100px; height: 100px; position:absolute; bottom:0; right:0; background: rgba(0, 0, 0, 0.2); display: inline-block; box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg); -moz-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);  -o-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);  transform: rotate(0deg) translate(-45px,-20px) skew(20deg);}.fold_box5{ z-index: -10; width: 50px; height: 50px; position:absolute; bottom:0; left:0; box-shadow: -20px 20px 8px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(0deg) translate(40px,-20px) skew(-20deg); -moz-transform: rotate(0deg) translate(40px,-20px) skew(-20deg); -o-transform: rotate(0deg) translate(40px,-20px) skew(-20deg); transform: rotate(0deg) translate(40px,-20px) skew(-20deg);}.fold2_box5{ content:''; width: 25px; height: 20px; background: white; position: absolute; bottom:0; left:0; background: #fff; background: -webkit-gradient(linear, 0% 20%, 50% 80%, from(#fff), to( #eee), color-stop(.1,#fff)); background: -moz-linear-gradient(0 50%, #fff, #fff 10%, #eee); border-bottom-right-radius: 30px; box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3); -webkit-transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px); -moz-transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px); -o-transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px);}.box13{ margin: 0 auto; width: 300px; min-height: 150px; padding: 0 0 1px 0; position:relative; background:#fff; background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff)); background: -moz-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3); border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-left: 1px solid #ccc; border-top-left-radius:60px 5px; border-top-right-radius:60px 5px; border-bottom-right-radius: 60px 60px; box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;}.box13:before{ content:''; width: 25px; height: 20px; position: absolute; bottom:0; right:0; border-bottom-right-radius: 30px; box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3); -webkit-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px); -moz-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px); -o-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px); transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);}.box13:after{ content: ''; z-index: -10; width: 100px; height: 100px; position:absolute; bottom:0; right:0; background: rgba(0, 0, 0, 0.2); display: inline-block; box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg); -moz-transform: rotate(0deg) translate(-45px,-20px) skew(20deg); -o-transform: rotate(0deg) translate(-45px,-20px) skew(20deg); transform: rotate(0deg) translate(-45px,-20px) skew(20deg);}.box13_corner_lf{ width: 100px; height: 100px; top:0; left:0; position:absolute; z-index:-6; display: inline-block; box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg); -moz-transform: rotate(2deg) translate(20px,25px) skew(20deg); -o-transform: rotate(2deg) translate(20px,25px) skew(20deg);    transform: rotate(2deg) translate(20px,25px) skew(20deg);}.box13_corner_rt{ content: ''; width: 50px; height: 50px; top:0; right:0; position:absolute; display: inline-block; z-index:-6; box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg); -moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg); -o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg); transform: rotate(2deg) translate(-14px,20px) skew(-20deg);}.box13_tape:before{ content: ''; position:absolute; top:0; left: 0; width: 130px; height: 40px; background:rgba(0,0,0,0.2);background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2))); background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0)); border-left: 1px dashed rgba(0, 0, 0, 0.1); border-right: 1px dashed rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(90deg) skew(0,0) translate(100px,65px); -moz-transform: rotate(90deg) skew(0,0) translate(100px,65px); -o-transform: rotate(90deg) skew(0,0) translate(100px,65px); transform: rotate(90deg) skew(0,0) translate(100px,65px);}.box13_tape:after{ content: ''; position:absolute; top:0; right: 0; width: 130px; height: 40px; background:rgba(0, 0, 0, 0.1); background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2))); background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0)); border-left: 1px dashed rgba(0, 0, 0, 0.1); border-right: 1px dashed rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(90deg) skew(0,0) translate(100px,-65px); -moz-transform: rotate(90deg) skew(0,0) translate(100px,-65px); -o-transform: rotate(90deg) skew(0,0) translate(100px,-65px); transform: rotate(90deg) skew(0,0) translate(100px,-65px);}\u003C\/style\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"box2\"\u003E\u003Cp\u003ELorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum\u003C\/p\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"box5\"\u003E\u003Cp\u003ELorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatatnon proident, sunt in culpa qui officia deserunt mollit anim id est laborum\u003C\/p\u003E\u003Cdiv class=\"fold_box5\"\u003E\u003C\/div\u003E\u003Cdiv class=\"fold2_box5\"\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"box13\"\u003E\u003Cp\u003ELorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum\u003C\/p\u003E\u003Cdiv class=\"box13_corner_lf\"\u003E\u003C\/div\u003E\u003Cdiv class=\"box13_corner_rt\"\u003E\u003C\/div\u003E\u003Cdiv class=\"box13_ribbon\"\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/7765952123960059410\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/06\/modelos-de-cajas-con-css3.html#comment-form","title":"3 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/7765952123960059410"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/7765952123960059410"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/06\/modelos-de-cajas-con-css3.html","title":"Modelos de cajas con CSS3"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"3"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-2790464421659996533"},"published":{"$t":"2011-06-07T00:00:00.002-03:00"},"updated":{"$t":"2017-07-20T02:19:32.819-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Cursores distintos según tipo de archivo"},"content":{"type":"html","$t":"\u003Cdiv class=\"vagacode\"\u003E\u003Cdiv class=\"sue\"\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/5zjHj4u.jpg\"\u003E\u003Cp\u003EEn CSS, un selector es un vínculo entre el HTML y la hoja de estilo. Todas las etiquetas son selectores y cada uno de ellas posee un conjunto de propiedades generales y particulares. Pero como esto es insuficiente, también existen selectores especiales que nos permiten crear reglas muy específicas.\u003C\/p\u003E\u003C\/div\u003E\u003Cdiv class=\"gowi\"\u003E\u003Cspan\u003E\u003Cimg src=\"http:\/\/i.imgur.com\/yrSqFzYl.png\"\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/selectores-en-css\"\u003Eleer artículo actualizado\u003C\/a\u003E\u003C\/span\u003E\u003Ca href=\"http:\/\/wiii.me\/vagacode\/\"\u003E\u003Cimg class=\"wlogo\" src=\"http:\/\/i.imgur.com\/QZHLte7.png\"\u003E\u003C\/a\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/2790464421659996533\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/06\/cursores-distintos-segun-tipo-de.html#comment-form","title":"4 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/2790464421659996533"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/2790464421659996533"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/06\/cursores-distintos-segun-tipo-de.html","title":"Cursores distintos según tipo de archivo"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"4"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-6363597935496737772"},"published":{"$t":"2011-06-06T00:00:00.001-03:00"},"updated":{"$t":"2011-06-06T00:00:04.139-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Ejemplos de acordeones con CSS"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003EEsos son dos ejemplos de acordeones creados sólo cón CSS que funcionan de manera normal en cualquier navegador pero que están preparados para soportar las animaciones que en este momento, sólo funcionan correctamente en Chrome, Opera y en Firefox 4.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nEl ejemplo de acordeón horizontal es el que mejor se adapta a cualquier stuación y puede utilizarse tanto con anchos fijos como con porcentajes; acá, a diferencia del original, usaré el primer método donde el HTML es una lista ordenada:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;ul class=\"accordion\"\u0026gt;\n  \u0026lt;li class=\"slide-01\"\u0026gt;\n    \u0026lt;div\u0026gt;\n      \u0026lt;h2\u0026gt;Pestaña 1\u0026lt;\/h2\u0026gt;\n      ....... el contenido .......\n    \u0026lt;\/div\u0026gt;\n  \u0026lt;\/li\u0026gt;\n  \u0026lt;li class=\"slide-02\"\u0026gt;\n    \u0026lt;div\u0026gt;\n      \u0026lt;h2\u0026gt;Pestaña 2\u0026lt;\/h2\u0026gt;\n      ....... el contenido .......\n    \u0026lt;\/div\u0026gt;\n  \u0026lt;\/li\u0026gt;\n  \u0026lt;li class=\"slide-03\"\u0026gt;\n    \u0026lt;div\u0026gt;\n      \u0026lt;h2\u0026gt;Pestaña 2\u0026lt;\/h2\u0026gt;\n      ....... el contenido .......\n    \u0026lt;\/div\u0026gt;\n  \u0026lt;\/li\u0026gt;\n\u0026lt;\/ul\u0026gt;\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EY el CSS sería algo así:\u003C\/div\u003E\u003Cpre\u003E.accordion { \/* el contenedor *\/\n  list-style: none;\n  overflow: hidden;\n  margin: 0;\n  width: 620px;\n  -moz-border-radius: 10px;\n  -webkit-border-radius: 10px;\n  -o-border-radius: 10px;\n  border-radius: 10px;\n}\n.accordion h2 { \/* el título *\/\n  color: #DEF;\n  font-family: Helvetica;\n  font-size: 20px;\n  margin: 0 0 0.5em;\n  text-align: center;\n}\n.accordion li { \/* cada item de la lista *\/\n  float: left;\n  overflow: hidden;\n  height: 210px; \/* la altura máxima que le daremos *\/\n  width: 200px; \/* el ancho por defecto *\/\n  \/* las propeidades de animación *\/\n  -moz-transition: all 0.2s ease-out;\n  -webkit-transition: all 0.2s ease-out;\n  -o-transition: all 0.2s ease-out;\n  transition: all 0.2s ease-out;\n  -moz-transition-delay: 0.15s;\n  -webkit-transition-delay: 0.15s;\n  -o-transition-delay: 0.15s;\n  transition-delay: 0.15s;\n}\n.accordion li:first-of-type { \/* bordes redondeados de la primera pestaña *\/\n  -moz-border-radius: 10px 0 0 10px;\n  -webkit-border-radius: 10px 0 0 10px;\n  -o-border-radius: 10px 0 0 10px;\n  border-radius: 10px 0 0 10px;\n}\n.accordion li:last-of-type{ \/* bordes redondeados de la última pestaña *\/\n  -moz-border-radius: 0 10px 10px 0;\n  -webkit-border-radius: 0 10px 10px 0;\n  -o-border-radius: 0 10px 10px 0;\n  border-radius: 0 10px 10px 0;\n}\n.accordion div { \/* el contenido *\/\n  padding: 10px;\n}\n.accordion:hover li {\n   \/* al colocar el cursor encima de cualquiera se reduce el ancho de todas *\/\n  width: 100px;\n}\n.accordion li:hover {\n   \/* y aumenta el ancho de la que estamos seleccionando *\/\n  width: 400px;\n}\n\/* los colores de cada pestañ *\/\n.slide-01 {background:#404951; color:#FFF;}\n.slide-02 {background:#606971; color:#FFF;}\n.slide-03 {background:#808991; color:#FFF;}\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cstyle\u003E.accordion {width:620px;overflow:hidden;list-style:none;margin:0 !important;-moz-border-radius:10px;-webkit-border-radius:10px;-o-border-radius:10px;border-radius:10px;} .accordion h2 {border-bottom: 1px dotted #DEF;color: #DEF;font-family: Helvetica;font-size: 20px;font-weight: normal;margin: 0 0 0.5em;padding: 0 0 2px;text-align: center;} .accordion li {float:left;width: 200px;overflow:hidden;height: 210px;-moz-transition:all 0.2s ease-out;-webkit-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;transition:all 0.2s ease-out;-moz-transition-delay:0.15s;-webkit-transition-delay:0.15s;-o-transition-delay:0.15s;transition-delay:0.15s;} .accordion li:first-of-type {-moz-border-radius:10px 0 0 10px;-webkit-border-radius:10px 0 0 10px;-o-border-radius:10px 0 0 10px;border-radius:10px 0 0 10px;} .accordion li:last-of-type {-moz-border-radius:0 10px 10px 0;-webkit-border-radius:0 10px 10px 0;-o-border-radius:0 10px 10px 0;border-radius:0 10px 10px 0;} .accordion div {padding:10px;} .accordion:hover li {width: 100px;} .accordion li:hover {width: 400px;} .slide-01 {background:#404951; color:#FFF;} .slide-02 {background:#606971; color:#FFF;} .slide-03 {background:#808991; color:#FFF;} #vertical {height: auto;width: 600px;} #vertical li {height: 45px;width: 100%;-moz-transition:all 0.2s ease-out;-webkit-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;transition:all 0.2s ease-out;-moz-transition-delay:0.15s;-webkit-transition-delay:0.15s;-o-transition-delay:0.15s;transition-delay:0.15s;} #vertical li:first-of-type {-moz-border-radius:10px 10px 0 0;-webkit-border-radius:10px 10px 0 0;-o-border-radius:10px 10px 0 0;border-radius:10px 10px 0 0;} #vertical li:last-of-type {-moz-border-radius:0 0 10px 10px;-webkit-border-radius:0 0 10px 10px;-o-border-radius:0 0 10px 10px;border-radius:0 0 10px 10px;} #vertical:hover li {height: 45px;overflow: hidden;width: 100%;} #vertical li:hover {height: auto;width: 100%;}\u003C\/style\u003E\u003Cul class=\"accordion\"\u003E\u003Cli class=\"slide-01\"\u003E\u003Cdiv\u003E\u003Ch2\u003EPestaña 1\u003C\/h2\u003ELorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo.\u003C\/div\u003E\u003C\/li\u003E\n\u003Cli class=\"slide-02\"\u003E\u003Cdiv\u003E\u003Ch2\u003EPestaña 2\u003C\/h2\u003ELorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo.\u003C\/div\u003E\u003C\/li\u003E\n\u003Cli class=\"slide-03\"\u003E\u003Cdiv\u003E\u003Ch2\u003EPestaña 3\u003C\/h2\u003ELorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo.\u003C\/div\u003E\u003C\/li\u003E\n\u003C\/ul\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003EEl vertical es un poco menos flexible porque para que funcione bien, requiere que la altura sea calculada; una variante de eso sería algo así:\u003C\/div\u003E\u003Cpre\u003E#vertical {  \/* el contenedor *\/\n  height: auto;\n  width: 600px;\n}\n#vertical li { \/* cada item de la lista *\/\n  height: 45px;\n  width: 100%;\n  \/* las propeidades de animación *\/\n  -moz-transition: all 0.2s ease-out;\n  -webkit-transition: all 0.2s ease-out;\n  -o-transition: all 0.2s ease-out;\n  transition: all 0.2s ease-out;\n  -moz-transition-delay: 0.15s;\n  -webkit-transition-delay: 0.15s;\n  -o-transition-delay: 0.15s;\n  transition-delay: 0.15s;\n}\n#vertical li:first-of-type { \/* bordes redondeados de la primera pestaña *\/\n  -moz-border-radius: 10px 10px 0 0;\n  -webkit-border-radius: 10px 10px 0 0;\n  -o-border-radius: 10px 10px 0 0;\n  border-radius: 10px 10px 0 0;\n}\n#vertical li:last-of-type { \/* bordes redondeados de la última pestaña *\/\n  -moz-border-radius: 0 0 10px 10px;\n  -webkit-border-radius: 0 0 10px 10px;\n  -o-border-radius: 0 0 10px 10px;\n  border-radius: 0 0 10px 10px;\n}\n#vertical:hover li {\n   \/* al colocar el cursor encima de cualquiera se reduce el alto de todas *\/\n  height: 45px;\n  overflow: hidden;\n  width: 100%;\n}\n#vertical li:hover {\n   \/* y aumenta la altura de la que estamos seleccionando *\/\n  height: auto;\n  width: 100%;\n}\u003C\/pre\u003E\u003Cdiv style=\"text-align: justify;\"\u003EPara usarlo de este modo, basta agregar el ID a la etiqueta UL:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;ul class=\"accordion\" id=\"vertical\"\u0026gt;\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cul class=\"accordion\" id=\"vertical\"\u003E\u003Cli class=\"slide-01\"\u003E\u003Cdiv\u003E\u003Ch2 style=\"border-bottom:none;\"\u003EPestaña 1\u003C\/h2\u003ELorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo.\u003C\/div\u003E\u003C\/li\u003E\n\u003Cli class=\"slide-02\"\u003E\u003Cdiv\u003E\u003Ch2 style=\"border-bottom:none;\"\u003EPestaña 2\u003C\/h2\u003ELorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo.\u003C\/div\u003E\u003C\/li\u003E\n\u003Cli class=\"slide-03\"\u003E\u003Cdiv\u003E\u003Ch2 style=\"border-bottom:none;\"\u003EPestaña 3\u003C\/h2\u003ELorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo.\u003C\/div\u003E\u003C\/li\u003E\n\u003C\/ul\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"referenciaExterna\"\u003E\u003Cspan\u003EREFERENCIAS:\u003C\/span\u003E\u003Ca href=\"http:\/\/csswizardry.com\/2011\/02\/pure-css3-accordion\/\" target=\"_blank\"\u003Ecsswizardry.com\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/6363597935496737772\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/06\/ejemplos-de-acordeones-con-css.html#comment-form","title":"18 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/6363597935496737772"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/6363597935496737772"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/06\/ejemplos-de-acordeones-con-css.html","title":"Ejemplos de acordeones con CSS"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"18"}},{"id":{"$t":"tag:blogger.com,1999:blog-33571139.post-2269768515781729106"},"published":{"$t":"2011-05-31T00:00:00.000-03:00"},"updated":{"$t":"2011-05-31T00:00:02.915-03:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"}],"title":{"type":"text","$t":"Sumando sombras"},"content":{"type":"html","$t":"\u003Cdiv style=\"text-align: justify;\"\u003ELas sombras que se pueden agregar con \u003Ca href=\"http:\/\/vagabundia.blogspot.com\/2009\/08\/sombras-la-propiedad-text-shadow.html\" target=\"_blank\"\u003Ela propiedad text-shadow\u003C\/a\u003E en los navegadores que la soporta, tienen la particularidad de ser aditivas es decir, se pueden ir acumulando sobre el mismo texto, separando las distintas definiciones con una coma.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nAsí que, empezamos con un texto normal:\u003C\/div\u003E\u003Cpre\u003E\u0026lt;style\u0026gt;\nh1.demo3d {\n    color: #FFF;\n    font-family: Helvetica,Arial,sans-serif;\n    font-size: 100px;\n    text-align: center;\n}\n\u0026lt;\/style\u0026gt;\u003C\/pre\u003E\u003Cstyle\u003Eh1.demo3d {color: #FFF;font-family: Helvetica,Arial,sans-serif;font-size: 100px;text-align: center;} h1.demo3d1 {text-shadow: 0 10px 0 #ABC;} h1.demo3d2 {text-shadow: 1px 13px 0 #456;} h1.demo3d3 {text-shadow: 0 10px 0 #ABC, 1px 13px 0 #456;} h1.demo3d4 {text-shadow: 1px 13px 0 #456, 0 10px 0 #ABC;} h1.demo3d5 {text-shadow: 0 5px 0 #101921, 0 10px 0 #ABC, 1px 13px 0 #456;}\u003C\/style\u003E\u003Ch1 class=\"demo3d\"\u003E3D Text\u003C\/h1\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003Ey le ponemos una sombra:\u003C\/div\u003E\u003Cpre\u003Etext-shadow: 0 10px 0 #ABC;\u003C\/pre\u003E\u003Ch1 class=\"demo3d demo3d1\"\u003E3D Text\u003C\/h1\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003Eo le ponemos otra sombra:\u003C\/div\u003E\u003Cpre\u003Etext-shadow: 1px 13px 0 #456;\u003C\/pre\u003E\u003Ch1 class=\"demo3d demo3d2\"\u003E3D Text\u003C\/h1\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003Etambién podemos ponerle las dos al mismo tiempo:\u003C\/div\u003E\u003Cpre\u003Etext-shadow: 0 10px 0 #ABC, 1px 13px 0 #456;\u003C\/pre\u003E\u003Ch1 class=\"demo3d demo3d3\"\u003E3D Text\u003C\/h1\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003Edonde, el orden es importante ya que si lo invertimos,el resultado será otro:\u003C\/div\u003E\u003Cpre\u003Etext-shadow: 1px 13px 0 #456, 0 10px 0 #ABC;\u003C\/pre\u003E\u003Ch1 class=\"demo3d demo3d4\"\u003E3D Text\u003C\/h1\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003Ey una más con el mismo color del fondo para serpara las dos últimas:\u003C\/div\u003E\u003Cpre\u003Etext-shadow: 0 5px 0 #101921, 0 10px 0 #ABC, 1px 13px 0 #456;\u003C\/pre\u003E\u003Ch1 class=\"demo3d demo3d5\"\u003E3D Text\u003C\/h1\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: justify;\"\u003E¿Cuántas se pueden poner? Nadie lo sabe.\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Chr \/\u003E  \u003Ca href=\"http:\/vagabundia.blogspot.com\"\u003EVagabundia\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/vagabundia.blogspot.com\/feeds\/2269768515781729106\/comments\/default","title":"Comentarios de la entrada"},{"rel":"replies","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/05\/sumando-sombras.html#comment-form","title":"7 Comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/2269768515781729106"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/33571139\/posts\/default\/2269768515781729106"},{"rel":"alternate","type":"text/html","href":"http:\/\/vagabundia.blogspot.com\/2011\/05\/sumando-sombras.html","title":"Sumando sombras"}],"author":[{"name":{"$t":"JMiur"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16731144451681787753"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxJj7jZsA32a5DjjrHOUTF7fN4tK3CN6g7DN7iP_Ec1uIElqxqWfaXCRR8zM36Ttg4Yo4clJ-4q3MeyL02yQHK-IBtYrE_ipICQffnKBrIKLm1kcziGeMhoi9wEyM48SA\/s220\/Avatar.jpg"}}],"thr$total":{"$t":"7"}}]}});