Una pseudo-clase nos permiten distinguir entre los diferentes tipos de etiquetas en función de alguna de sus características. Un pseudo-elemento es algo que se ve en la página pero que no es parte de ella.
¿Hay alguien en casa? |
Galería de imagenes muy sencilla |
Esta es una galería de imágenes muy simple que nos muestran en alistapart.com y que se basa en un script muy pequeño que podemos agregar en cualquier parte de la plantilla, por ejemplo, antes de </head>:
<script type="text/javascript">
function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('imgContenedor').src = whichpic.href;
if (whichpic.title) {
document.getElementById('imgDescripcion').childNodes[0].nodeValue = whichpic.title;
} else {
document.getElementById('imgDescripcion').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}
return false;
} else {
return true;
}
}
</script>
Para usarlo, debemos agregar tres partes:
- una lista de enlaces donde el atributo href contendrá la URL de la imagen y el atributo title el texto optativo a ser mostrado
- un bloque o una etiqueta con un ID específico (imgDescripcion) donde se mostrará el texto
- una imagen inicial con un ID (imgContenedor) queserá la que vaya cambiando cuando hagamos click
Hablo de tres partes porque cada una de ellas puede estar en cualquier orden, dependerá de la forma en que se nos ocurra mostrarlo. Por ejemplo:
<ul>
<li><a onclick="return showPic(this)" href="URL_imagen1" title="texto_imagen_1">1</a></li>
<li><a onclick="return showPic(this)" href="URL_imagen2" title="texto_imagen_2">2</a></li>
<li><a onclick="return showPic(this)" href="URL_imagen3" title="texto_imagen_3">3</a></li>
</ul>
<div id="imgDescripcion">el texto inicial</p>
<img id="imgContenedor" src="URL_imagenInicial" />
Este es un ejemplo concreto con algunas variantes, incluyendo propeidades de estilo:
<style>
div#ejemploGaleria {
background-color: #123;
border: 3px solid #234;
margin: 0 auto;
padding: 10px;
width: 480px;
}
span#imgDescripcion {
color: #ABC;
float: left;
font-size: 18px;
width: 250px;
}
ul#imgListaEjemplo{
float: right;
margin: 0;
}
ul#imgListaEjemplo li {
display: inline;
padding: 0 5px;
}
ul#imgListaEjemplo li a {
font-size: 16px;
}
img#imgContenedor{
margin-top: 10px;
}
</style>
<div id="ejemploGaleria">
<span id="imgDescripcion">Galería de imágenes</span>
<ul id="imgListaEjemplo">
<li><a onclick="return showPic(this)" href="URL_imagen1" title="Esta es la primera imagen">1</a></li>
<li><a onclick="return showPic(this)" href="URL_imagen2" title="Esta es la segunda imagen">2</a></li>
<li><a onclick="return showPic(this)" href="URL_imagen3" title="Esta es la tercera imagen">3</a></li>
<li><a onclick="return showPic(this)" href="URL_imagen4" title="Esta es la última imagen">4</a></li>
</ul>
<img id="imgContenedor" src="URL_imagenInicial" /></div>
Pseudo-clases y pseudo-elementos (1) |
Una pseudo-clase nos permiten distinguir entre los diferentes tipos de etiquetas en función de alguna de sus características. Un pseudo-elemento es algo que se ve en la página pero que no es parte de ella.
Vamos a rodear a Bendetti |
Mario Benedetti está pasando horas malas. Hemos pensado que podíamos ponernos a leer sus poemas por todo el mundo y así ayudarlo en este momento. Un poema, por si no tenéis algún libro suyo a mano. Y por si queréis pasarlo a otros amigos.
El cuaderno de Jose Saramago
Si cada hora vino con su muerte,
si el tiempo era una cueva de ladrones
los aires ya no eran Buenos Aires,
la vida nada más que un blanco móvil.
Usted preguntará ¿por qué cantamos?
Si los nuestros quedaron sin abrazos,
la patria casi muerta de tristeza
y el corazón del hombre se hizo añicos
antes de que explotara la vergüenza.
Usted preguntará ¿por qué cantamos?
Cantamos porque el río esta sonando y cuando suena el río suena el río.
Cantamos porque el cruel no tiene nombre y en cambio tiene nombre su destino.
Cantamos porque el niño y porque todo y porque algún futuro y porque el pueblo.
Cantamos porque los sobrevivientes y nuestros muertos quieren que cantemos.
Si fuimos lejos como un horizonte,
si aquí quedaron árboles y cielo,
si cada noche siempre era una ausencia
y cada despertar un desencuentro.
Usted preguntará ¿por qué cantamos?
Cantamos porque llueve sobre el surco y somos militantes de la vida.
Y porque no podemos ni queremos dejar que la canción se haga ceniza.
Cantamos porque el grito no es bastante y no es bastante el llanto ni la bronca.
Cantamos porque creemos en la gente y porque venceremos la derrota.
Cantamos porque el sol nos reconoce
y porque el campo huele a primavera
y porque en este tallo en aquel fruto
cada pregunta tiene su respuesta.
si el tiempo era una cueva de ladrones
los aires ya no eran Buenos Aires,
la vida nada más que un blanco móvil.
Usted preguntará ¿por qué cantamos?
Si los nuestros quedaron sin abrazos,
la patria casi muerta de tristeza
y el corazón del hombre se hizo añicos
antes de que explotara la vergüenza.
Usted preguntará ¿por qué cantamos?
Cantamos porque el río esta sonando y cuando suena el río suena el río.
Cantamos porque el cruel no tiene nombre y en cambio tiene nombre su destino.
Cantamos porque el niño y porque todo y porque algún futuro y porque el pueblo.
Cantamos porque los sobrevivientes y nuestros muertos quieren que cantemos.
Si fuimos lejos como un horizonte,
si aquí quedaron árboles y cielo,
si cada noche siempre era una ausencia
y cada despertar un desencuentro.
Usted preguntará ¿por qué cantamos?
Cantamos porque llueve sobre el surco y somos militantes de la vida.
Y porque no podemos ni queremos dejar que la canción se haga ceniza.
Cantamos porque el grito no es bastante y no es bastante el llanto ni la bronca.
Cantamos porque creemos en la gente y porque venceremos la derrota.
Cantamos porque el sol nos reconoce
y porque el campo huele a primavera
y porque en este tallo en aquel fruto
cada pregunta tiene su respuesta.
Mostrar el tiempo de carga de las páginas |
Para quienes gustan de verificar los tiempos de carga, en Himsomnio nos muestra un método para medir y mostrar el tiempo de carga de cualquier página web.
Usando un pequeño script podemos agregar esta función en nuestro sitio y, modificándolo un poco, podríamos usarlo para medir y mostrar el tiempo de carga de cada una de las páginas del blog.
Colocamos el siguiente script antes de </head>:
Usando un pequeño script podemos agregar esta función en nuestro sitio y, modificándolo un poco, podríamos usarlo para medir y mostrar el tiempo de carga de cada una de las páginas del blog.
Colocamos el siguiente script antes de </head>:
<script type='text/javascript'>
//<![CDATA[
var startTime = new Date();
function showElapsedTime() {
var testSiteUrl = location.href;;
var testSiteString = String(testSiteUrl).slice(testSiteUrl.indexOf("www"));
var endTime = new Date();
var elapsedTime = Number(endTime-startTime);
var browser=navigator.userAgent;
var platform=navigator.platform;
var msgString = "Tiempo de carga<br/> " + Number(elapsedTime/1000) + " segundos (" + elapsedTime + " ms)<br/><span>Navegador " + browser + "</span>";
document.getElementById("mostrarTiempo").innerHTML = msgString;
}
onload=function() {showElapsedTime();}
//]]>
</script>Ahora, agregaremos un elemento HTML en la sidebar o en el footer, allíi donde quisiéramos que se mostrara:
<div id="mostrarTiempo">Cargando ...</div>
Eso es todo.
Si quisiéramos personalizarlo un poco, hay dos cosas que podemos hacer: modificar la salida del script:
Si quisiéramos personalizarlo un poco, hay dos cosas que podemos hacer: modificar la salida del script:
var msgString = "Tiempo de carga<br/> " + Number(elapsedTime/1000) + " segundos (" + elapsedTime + " ms)<br/><span>Navegador " + browser + "</span>";
y agregarle propiedades CSS:
<style>
#mostrarTiempo {
border: 1px dotted #456;
color: #CDE;
font-size: 12px;
padding: 10px;
text-align: center;
}
#mostrarTiempo span {
display: block;
color: #678;
font-size: 11px;
}
</style>
Curiosidades con CSS |
| Un cuadrado, dividido en cuatro partes | <div style="border-bottom: 50px solid lightblue; border-left: 50px solid red; border-right: 50px solid green; border-top: 50px solid yellow; height: 0;width: 0;"> </div> | |
| Un triángulo. | <div style="border-bottom: 50px solid yellow; border-left: 30px solid #101921; border-right: 30px solid #101921; margin-bottom: 30px; width: 0;"> </div> | |
| Un moño | <div style="border: 30px solid salmon; border-bottom: 15px solid #101921; border-top: 15px solid #101921; height: 0; width: 0;"> </div> |
| Una flecha. | |
Hacia allá | <style> |
| Y otra flecha. | |
Hacia el otro lado | <style> |
REFERENCIAS:Cult-f.net
