Cuando se cargan las imágenes de una página, estas quedan almacenadas en el caché. Por lo tanto, si una de ellas se utiliza en otras páginas no será requerida al servidor para ser cargada de nuevo. Por ello, siempre que se pueda, es conveniente repetir la misma imagen para los botones, los íconos, las barras de separación, etc.
Facilitar la selección de los títulos de las entradas |
El título de mi entrada
El título de mi entrada
Esos títulos pueden estar en diferentes etiquetas (h1 h2 h3) y esa etqiueta tiene definida una serie de propiedades, por defecto, algo así:
.post h3 {
.......
}
.post h3 a, .post h3 a:visited, .post h3 strong {
.......
display:block;
}
.post h3 strong, .post h3 a:hover {
.......
}
Poniendo el cursor encima de esos ejemplos, se vera que en el primer caso, el rectángulo del enlace ocupa todo el ancho disponible y podrá hacerse click en cualquier parte, incluso en las áreas vacías cuando, en realidad, lo razonable sería que el enlace sólo funcionara sobre el texto mismo que es lo que ocurrirá si se elimina esa propiedad.
Alguien, preguntó si es necesario que los títulos de las entradas sean enlaces y para eso no hay respuestas objetivas; creo que es lo lógico y que es útil porque incluso en una página individual cuando parecería no tener sentido ya que es un enlace a la misma página, uno suele usarlo para recargarla, para copiar la URL del enlace, para arrastrarlo a alguna herramienta, etc.
De todos modos, esa parte se encuentra dentro de un INCLUDABLE que podemos ver al expandir la plantilla:
<b:includable id='post' var='post'>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<h3 class='post-title'>
<data:post.title/>
</h3>
Face Bender: Sólo por diversión |
Subimos la foto, elegimos el efecto y listo, la guardamos como JPG. También podemos hacerlo arrastrando el cursor sobre la misma imagen o desplazando la barra inferior para aumentar o disminuir las distorsiones.
Gifs animados en Blogger |
Desde el editor normal no parece funcionar pero si lo hace desde el Editor Actualizado o desde Blogger Draft.
<a href="http://......./s1600/miarchivo.gif" imageanchor="1"><img border="0" src="http://......./s320/miarchivo.gif" /></a>
<a href="http://......./s1600/miarchivo.gif" imageanchor="1"><img border="0" src="http://......./s1600/miarchivo.gif" /></a>
Tablas SI o Tablas NO |
Tablas. Malditas tablas. La cultura geek odia las tablas. Son ... como el Judas Iscariote del HTML. Hay que alejarse de ellas lo más posible. Las tablas, dicen, sólo hay que usarlas para ... hacer tablas ...
Claro, el hecho de que la mayoría de los sitios más visitados usen tablas parece que es un pequeño detalle. Google usa tablas y tan mal no le va. Y no las usa ahora que puede darse el lujo de hacer cualquier cosa, las usó siempre. GMail usa tablas; Yahoo usa tablas, YouTube usa tablas, Twitter usa tablas, casi todos los gadgets usan tablas. Parecería entonces que las verdades absolutas y la realidad van por caminos diferentes (como siempre).
Lo elemental sería aclarar algo antes que alguien grite.
No hay etiquetas buenas y etiquetas malas porque no hay codigos "buenos" y códigos "malos". Tampoco hay etiquetas prohibidas porque de existir tal cosa, simplemente, se hubiera eliminado de los navegadores; sin embargo, siguen allí, las usemos o no y algunas ya tienen muchisimos años de existencia.
Pero ¿por qué esos sitios usan tablas?
No sé, tal vez, porque quienes los desarrollaron no saben otra cosa, tal vez porque les resulta cómodo y tal vez, porque a veces es más sencillo. Sea como sea, cualquiera de esas reazones o cualquier otra es tan válida como la contraria porque una herramienta es tan buena o mala como quien la utiliza y el diseño web debería estar mucho más allá de estos pseudo-pecados.
Salvo algún detalle gráfico que podrían solucionarse ¿qué diferencia hay entre estos dos enlaces que no llevan a ninguna parte?:
PSEUDO-ENLACE |
Parece obvio pero, en realidad, las páginas web son eso, se ven, funcionan, se encuentra lo que uno buscaba o no, nos resultan agradables o no, listo, no importa mucho más porque para eso están.
Filosofía al margen: ¿hay que usar tablas? La respuesta es ... depende, en todo caso ¿para qué usar una tabla? Y bueno, porque a veces, es mucho más sencillo hacer algo de ese modo que de otro y eso, no es ni malo, ni bueno.
Por ejemplo, quiero centrar una imagen tanto horizontal como verticalmente en un rectángulo que tenga un borde y un color de fondo, si sólo es una imagen es sencillo, necesito conocer el ancho:
<div style="background-color: #135; border: 1px solid #68A; margin: 10px auto; padding:10px; text-align:center; width:236px;">
<img src="MI_IMAGEN" />
</div>
<table style="background-color: #135; border: 1px solid #68A; margin: 10px auto; padding:10px;">
<tr>
<td><img src="IMAGEN_1" /></td>
<td><img src="IMAGEN_2" /></td>
<td><img src="IMAGEN_3" /></td>
</tr>
</table>
¿Esto significa que hay que usar tablas siempre? No, claro que no, ese sería el mismo error que no usarlas. Lo que esto significa es que hay que usarlas cuando nos parezcan útiles.
HOME de Yann Arthus-Bertrand |
La película puede verse completa en alta definción en el canal de YouTube de Home Project
Agregar un botón de Me Gusta para Facebook |
Para quienes usan Facebook, poco a poco están apareciendo métodos de integración sencilla con blogs y otros sitios web ya que la empresa se encuentra en una franca pelea para controlar una parte del mercado que ahora tiene a Google como único dueño y señor.
Hasta hace poco, la mayoría de estas cosas eran bastante complejas pero han empezado a ofrecer algunos códigos más sencillos que pueden verse en su página de desarrolladores. Tal vez, los más interesantes son los plugins sociales y entre ellos, el famoso botón Me Gusta que permite a los usuarios, compartir contenido entre su sitio y la cuenta de Facebook de los visitantes.
<iframe expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url+ "&layout=button_count&show_faces=false&width=450&height=60&action=like&font=tahoma&colorscheme=dark"' allowTransparency='true' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:60px'/>
Si bien ese es el código por defecto, hay cosas que podemos personalizar y que son esos parámetros que se adosan a la dirección URL de nuestra entrada:
&layout=standard define el tipo de botón, puede cambiarse por button-count para simplificarlo
&show-faces=true muestra el avatar del usuario y puede eliminarse colocando false
&action=like es el texto a mostrar y puede ser cambiado por recommend
&colorscheme=light es el diseño general, la otra opción es dark
&font=arial es el tipo de fuente opcional y puede ser tahoma, arial, lucida+grande, segoe+ui, trebuchet+ms, verdana
&width=530 es el ancho total en pixeles (530 o 450)
&height=60 es la altura total en pixeles
Si queremos colocarlo en nuestro home (nada impide usarlo en cualquier página), el código es el mismo y basta establecer la URL correcta, reemplazando data:post.url por la dirección de nuestro blog y en este caso, conviene que cambiemos los caracteres de dos puntos y barra por sus equivalentes %3A y %2F:
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fvagabundia.blogspot.com%2F&layout=button_count&show_faces=false&width=450&height=60&action=like&font=tahoma&colorscheme=dark" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:450px; height:60px"></iframe>
Esferas con CSS3 |
Este es un ejemplo de CSSplay que utiliza gradientes, colores en formato RGBA y bordes redondeados.
El resultado, solo es visible en Firefox, Safari y Google Chrome e incluso en esos navegadores, habrá algunas leves diferencias:
Esta imagen muestra la forma en que se vería en Firefox:
<style type="text/css">
.holder {
text-align: center;
background: #777;
padding: 30px 60px;
height: 140px;
width: 320px;
margin: 0 auto;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
-webkit-border-radius: 36px;
-moz-border-radius: 36px;
border-radius: 36px;
}
.colwhite { background:white; }
.colyellow { background:yellow; }
.colbrown { background:brown; }
.colgreen { background:green; }
.colblue { background:blue; }
.colpink { background:pink; }
.colred { background:red; }
.colblack { background:black; }
.ball{
display: block;
width: 72px;
height: 72px;
float: left;
margin-right: 5px;
margin-bottom: 5px;
-webkit-border-radius: 36px;
-moz-border-radius: 36px;
border-radius: 36px;
background-image: -moz-radial-gradient(36px 10px 45deg, circle cover, rgba(255,255,255,1), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 50%, rgba(0,0,0,1) 80%);
background-image: -webkit-gradient(radial,36 36, 72, 36 10, 0, from(rgba(0,0,0,1)), to(rgba(255,255,255,1)), color-stop(0.85, rgba(255,255,255,0)), color-stop(0.4, rgba(0,0,0,1)));
}
</style>
<div class="holder">
<div class="ball colwhite"></div>
<div class="ball colyellow"></div>
<div class="ball colbrown"></div>
<div class="ball colgreen"></div>
<div class="ball colblue"></div>
<div class="ball colpink"></div>
<div class="ball colred"></div>
<div class="ball colblack"></div>
</div>
Blogger y los comentarios eliminados |
<b:includable id='commentDeleteIcon' var='comment'>
<span expr:class='"item-control " + data:comment.adminClass'>
<!-- puede decir esto -->
<a expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'><img src='//www.blogger.com/img/icon_delete13.gif'/></a>
<!-- o puede decir esto otro -->
<a expr:href='data:comment.deleteUrl' title='Delete Comment'><span class='delete-comment-icon'> </span></a>
</span>
</b:includable>
El resto se encuentra en otro includable, el que controla la forma en que se muestran los comentarios:
<b:includable id='comments' var='post'>
.......
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
.......
</b:includable>
Si no queremos que se vea ese texto por defecto, simplemente eliminamos lo indicado pero, dependiendo de las plantillas, eso no eliminará todo, por ejemplo, si tenemos habilitados los avatares estos se seguirán viendo. Para no mostrar absolutamente nada, tal vez, podríamos usar JavaScript y agregar lo siguiente justo antes de </loop>:
<b:if cond='data:comment.isDeleted'>
<script> document.getElementById("<data:comment.id/>").style.display="none"; </script>
</b:if>
.deleted-comment {
color: gray;
font-style: italic;
}
Botones dinámicos con CSS |
Sólo necesitamos una imagen semitransparente, y agregar la clase, por ejemplo, antes de <:/b:skin>:
.btn {
display: inline-block;
background: transparent url(URL_imagen.png) repeat-x 0 0;
border: 1px solid rgba(0,0,0,0.4);
padding: 5px 10px 6px 10px;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
-moz-border-radius: 15px;
-moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
-webkit-border-radius: 5px;
-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
}
.blue { background-color: #CCC; color: #141414; }
.blue:hover { background-color: #00C0DD; color: #FFF; }
.red { background-color: #CCC; color: #141414; }
.red:hover { background-color: #FF004E; color: #FFF; }
<div class="btn blue"> texto </div>
<div class="btn red"> texto </div>
<div class="btn blue" style="font-size: 20px;"> texto </div>
<div class="btn blue" style="font-size: 36px;"> texto </div>
¿Qué es data:numPosts? |
Como la Plantilla Mínima es la referencia obligada para estas cosas, ahí vamos y si la expandimos, veremos que en el LOOP, que es donde se muestran las entradas del blog, hay una serie de datos extras que antes no estaban; por ejemplo:
<b:if cond='data:post.isDateStart'> <b:if cond='data:post.isFirstPost == "false"'> </div></div> </b:if> </b:if> <b:if cond='data:post.isDateStart'> <div class="date-outer"> </b:if> ....... <b:if cond='data:post.isDateStart'> <div class="date-posts"> </b:if> ....... <b:if cond='data:numPosts != 0'> </div></div> </b:if>
Tal vez, eso tenga algo que ver con Adsense que parece ser lo único que les preocupa o algo que se implementará en el futuro de alguna manera o vaya uno a saber qué pero, todo eso genera DIVs extras; todas las entradas de una misma fecha se encuentran en un DIV con una clase CSS llamada date-outer que a su vez está dentro de otro con una clase llamada date-posts. Cada entrada, dentro de otro DIV con la clase post-outer y recién dentro de esta se encuentra el que siempre veíamos y que tiene la clase post:
<div class='date-outer'> <div class='date-posts'> <div class='post-outer'> <div class='post'> ... la entrada 1 ... </div> </div> <div class='post-outer'> <div class='post'> ... la entrada 2 ... </div> </div> </div> </div>
¿Puede borrarse todo eso? Sí pero deberían chequear el resultado, aparentemente no sirven de nada y la mayoría de las plantillas no los tienen.
Sea como sea, hay dos datos que ahora son accesibles y que podemos usar ... aunque no sé para qué.
data:post.isDateStart devuelve TRUE si la entrada es la primera de una fecha; es decir, si tenemos varios posts publicados el mismo día, el primero de ellos devolverá ese valor y todos los demás FALSE
data:numPosts devuelve un número que es igual a la cantidad de entradas en la página, es decir 1 si es una entrada individual o el valor que hayamos establecido en Configuración | Formato cuando se trata del home o de páginas como etiquetas o archivos.
Así, a simple vista, un condicional como:
<b:if cond='data:blog.pageType == "item"'> ... cualquier contenido ... </b:if>
<b:if cond='data:numPosts == 1'> ... cualquier contenido ... </b:if>
Tal vez, es un dato que podría emplearse para detectar páginas sin entradas; por ejemplo, si usamos un buscador interno, podríamos buscar:
<b:includable id='main' var='top'>
</b:loop>
<b:if cond='data:numPosts == 0'> ... aquí ponemos nuestro código ... </b:if>
Con un poco de imaginación podríallegar a desarrollarse alguna págína de error 404.
Menú estilo dock |
Debemos agregar el código antes de </head> como hacemos habitualmente y luego, el CSS:
<script type='text/javascript'> //<![CDATA[ // ================================================================ // ------ dock menu ------- // script by Gerard Ferrandez - Ge-1-doot - February 2006 // http://www.dhteumeuleu.com // ================================================================ var dock = function (dock, sMin, sMax) { /* ---- private vars ---- */ var xm = xmb = ov = 0; var M = true; var icons = document.getElementById(dock).getElementsByTagName('img'); var N = icons.length; var s = sMin; var ovk = 0; var addEvent = function (o, e, f) { if (window.addEventListener) o.addEventListener(e, f, false); else if (window.attachEvent) r = o.attachEvent('on' + e, f); } var pxLeft = function(o) { for(var x=-document.documentElement.scrollLeft; o != null; o = o.offsetParent) x+=o.offsetLeft; return x; } for(var i=0;i<N;i++) { var o = icons[i]; o.style.width = sMin+"px"; o.style.height = sMin+"px"; o.className = "dockicon"; } var run = function() { for(var i=0;i<N;i++) { var o = icons[i]; var W = parseInt(o.style.width); if(ov && ov.className=="dockicon") { if(ov!=ovk){ ovk=ov; document.getElementById("legend").innerHTML = ov.lang; } if(M) W = Math.max((s*Math.cos(((pxLeft(o)+W/2)-xm)/sMax)),sMin); s = Math.min(sMax,s+.5); } else { s = Math.max(s-.5,sMin); W = Math.max(W-N,sMin); } o.style.width = W+"px"; o.style.height = W+"px"; } if(s >= sMax) M = false; } addEvent(document, 'mousemove', function (e) { if(window.event) e=window.event; xm = (e.x || e.clientX); if(xm!=xmb){ M = true; xmb = xm; } ov = (e.target)?e.target:((e.srcElement)?e.srcElement:null); }); setInterval(run, 16); }; window.onload = function() { dock("dock", 48, 128); } //]]> </script> <style type='text/css'> #dock { /* el rectángulo contenedor */ position: relative; text-align: center; width: 100%; } #dock a, #dock a:visited { text-decoration: none; } #dock img { border: none; width: 0px; } #legend { /* el texto inferior */ color: #FFF; font-size: 24px; text-align: center; width: 100%; } </style>
<div id="dock"> <a href="URL_enlace1" target="_blank"><img src="URL_imagen1" lang="el texto 1"></a> <a href="URL_enlace2" target="_blank"><img src="URL_imagen2" lang="el texto 2"></a> <a href="URL_enlace3" target="_blank"><img src="URL_imagen3" lang="el texto 3"></a> </div> <div id="legend"></div>
Google Search Stories Creator |
No es necesario instalar nada ni registrarse, basta ingresar y colocar entre cinco y siete palabras y seleccionar el tipo de búsqueda: web, mapas, imágenes, noticias, blogs, libros, etc. No cualquier frase o palabra funcionará; algunas están "censuradas" y acentos y otros caracteres suelen terminar en un error. Cada paso puede ser previsualizado y cuando estamos satisfechos, pasamos a la segunda etapa, agregar la música, seleccionándola de alguna de las predefinidas.
Dos métodos para alinear verticalmente |
Alinear 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?
1 Bit Audio Player: Reproductor MP3 mínimo |
Todo lo necesario para utilizarlo está en un ZIP que podemos descargar desde la página del desarrollador. Allí veremos demos, los códigos fuentes del SWF si queremos editarlo con Flash y hasta un plugin para usarlo en Wordpress. De todo eso, sólo requerimos tres cosas: la librería swfobject.js, el script 1bit.js y el reproductor 1bit.swf que debemos alojar en algún servidor.
En el caso de Blogger, se han apiadado y nos dicen que, simplemente, agreguemos lo siguiente antes de </head>:
<script type='text/javascript' src='http://1bit.markwheeler.net/1.4/swfobject.js'></script> <script type='text/javascript' src='http://1bit.markwheeler.net/1.4/1bit.js'></script> <script type='text/javascript'> oneBit = new OneBit('http://1bit.markwheeler.net/1.4/1bit.swf'); oneBit.ready(function() { oneBit.specify('background', '#FFFFFF'); oneBit.apply('a'); }); </script>
El unico dato que debemos configurar es el color de fondo que es blanco por defecto; simplemente, cambiamos #FFFFFF por el código de color que se nos ocurra.
Ahora viene lo interesante ya que utilizarlo es tan simple como escribir un enlace donde el contenido de href será la URL del archivo MP3 a ejecutar:
<a href="URL_archivo.mp3"> texto </a>
<a style="display:inline;" href="URL_archivo.mp3"> texto </a>
Page Speed o cuando Google nos mira feo |
Seguramente, muchos han leido del tema o han visto breves reseñas del asunto y se han asustado frente a frases como: Google nos enviará al final de su lista de resultados si nuestro sitio es lento ya que, desde ahora, utilizará la velocidad de carga como una variable más para determinar la relevancia de las páginas.
Las preguntas frente a esto son variadas y muchas de ellas sólo pueden ser respondidas de forma subjetiva.
Lo básico, como frente a cualquier otra situación, es regirse por el sentido común que no está exento de ideología ¿Qué quiero de mi blog? ¿Puedo hacer algo? ¿Me corto las venas porque Google me mira feo?
Tres sitios y cientos de íconos |
¿Su cuenta de Blogger esta por ser suspendida? |
Sin embargo, cuando recibimos en nuestro correo un mensaje cuyo título es Su cuenta de Blogger esta por ser suspendida, aún cuando sepamos que ese no el modo en que Blogger nos comunica algo por muy dramático que sea, uno no puede dejar de sentirse ... bueno, ayyyyyyyyy ¡que hice ahora!!!!!!!!!
Tratando de condicionar varias entradas |
Lo que desea hacer es que un widget específico se muestre en tres entradas y sólo en esas tres entradas de su blog.
La solución es, tal como lo intentó, anidar las condiciones, es decir, poner una dentro de la otra; eso puede lograrse, sólo se requiere paciencia pero, aún cuando se consiga, se encontrará con un problema; deberá repetir TODO el código tres veces o crear tres widgets diferentes lo cual es, como mínimo, engorroso así que la idea es ver si es posible simplificarlo.
Widget traductor usando Google Translate |
El código original lo podemos ver acá y claro, está pensado para traducir desde el portugués a diferentes idiomas así que si queremos adaptarlo al español, deberemos cambiar algunas cosas.
Blogger y el uso de códigos condicionales |
La diferencia entre ocultar algo con CSS o JavaScript y usar estos condicionales es sustancial. Si bien, a simple vista parece lo mismo, no lo es en absoluto. Cuando ocultamos con CSS usando propiedades como display:none; sólo hacemos invisible cierta parte pero, el código y su contenido, serán ejecutados igual; como resultado, el tiempo de carga del sitio no variará ya que la cantidad de datos que debe leer el navegador es la misma. Lo comprobamos con facilidad; si miramos el código fuente, eso que ocultamos se verá.
Por el contrario, los condicionales no son ejecutados por el navegador sino por el mismo Blogger, es decir, se ejecutan ANTES que la página sea enviada al navegador; Blogger "escribe" el código fuente y omite esa parte condicionada. Como resultado, si miramos el código fuente, no la veremos; de ese modo, aún cuando nuestra plantilla sea muy grande, la carga del sitio será más rápida por la simple razón de que hay sectores que son ignoradas.
Salta, salta, salta con Scriptaculous |
Simplemente agregamos el script y luego, en cualquier parte, escribimos el código HTML con este formato:
<div id="nombre" style="" onclick="boing(this)"> ... el contenido ... </div> <script type="text/javascript"> function boing(elm) { new Effect.Bounce(elm, {height:valor}); } </script>
el ID debe ser siempre un nombre único
el atributo STYLE puede contener cualquier propiedad o ninguna
el evento onclick es siempre el mismo y hace referencia al ID
el contenido del DIV puede ser cualquier cosa, textos o imágenes
la etiqueta SCRIPT posterior ejecuta la función y allí podemos colocar la altura del "salto", estableciendo el valor correspondiente
Tabs sólo con CSS |
El código HTML es simplísimo y lo pondremos donde se nos ocurra:
<div id="csstabs"> <!-- la primera pestaña --> <div id="tab1" class="tabbox"> <h3>TITULO 1</h3> <div class="tabcontent"> ....... aquí pondremos el contenido ....... </div> </div> <!-- la segunda pestaña --> <div id="tab2" class="tabbox"> <h3>TITULO 2</h3> <div class="tabcontent"> ....... aquí pondremos el contenido ....... </div> </div> </div>
Ahora, el CSS que tiene una parte que es genérica y otra que es individual, para cada una de las pestañas. Lo ponemos antes de </head>:
<style> /* debemos dimensionar el área donde se mostrarán */ #csstabs { height: 370px; margin:0 auto; position:relative; width: 350px; } #csstabs div { padding: 10px; } #csstabs h3 { /* los títulos de las pestañas */ color: #ABC; cursor: pointer; display: block; font-size: 20px; font-weight: normal; height: 25px; line-height: 25px; margin: 0; padding: 5px; text-align: center; width: 160px; } .tabcontent { /* el contenido de las pestañas */ display: block; height: 320px; left: 0; margin: 0; padding: 0; position: absolute; top: 40px; width: 100%; } #csstabs:hover h3, #tabs:focus h3, #tabs:active h3 { z-index: 0; } #csstabs:hover .tabcontent, #tabs:focus .tabcontent, #tabs:active .tabcontent { opacity: 0; z-index: 0; } /* las definiciones de cada pestaña que pueden ser iguales o diferentes */ #tab1 .tabcontent { background-color: #234; z-index: 2; } #tab1 h3 { left: 0; position: absolute; top: 0; z-index: 3; } #tab1:hover h3, #tab1:focus h3, #tab1:active h3 { background-color: #234; color: #DEF; z-index: 4; } #tab1:hover .tabcontent, #tab1:focus .tabcontent, #tab1:active .tabcontent { opacity: 1; z-index: 3; } #tab2 .tabcontent { background-color: #E6EAF3; opacity: 0; z-index: 1; } #tab2 h3 { left: 180px; position: absolute; top: 0; } #tab2:hover h3, #tab2:focus h3, #tab2:active h3 { background-color: #E6EAF3; color: #565A63; z-index: 4; } #tab2:hover .tabcontent, #tab2:focus .tabcontent, #tab2:active .tabcontent { opacity: 1; z-index: 3; } </style>
Pestaña 1
Nullam vitae lacinia risus. In hac habitasse platea dictumst. Curabitur dapibus magna sed lorem mollis sagittis.
Suspendisse imperdiet; erat id iaculis aliquet, erat tellus commodo libero, sed commodo arcu felis at enim. Integer nec neque arcu, ut bibendum tortor. In dolor lorem, molestie vitae viverra sit amet, elementum vel orci! Etiam tincidunt erat vel sem venenatis lobortis.
Mauris elit urna, molestie a bibendum non, iaculis non magna.
Quisque lectus tortor, lobortis vel porta a, tempus eget lorem? Aenean diam tellus, tristique quis consequat et, ornare id dui.
Pestaña 2
findicons: Miles de íconos |
Un accesorio muy útil es el conversor. Desde allí, podemos subir cualquier imagen y convertirla a diferentes formatos y diferentes calidades. Por ejemplo, a formato ICO. El resultado, es un ZIP que descargamos y que contendrá varios archivos con íconos en distintos tamaños (8x8, 16x16, 24x24, 32x32, 40x40, 48x48, 56x56, 64x64, 72x72, 80x80).