SiFR3 nos permite hacer cosas como insertar textos sombreados y en color, lo cual me parece un gran avance. Podéis ver el ejemplo de la página SiFR novemberborn.
Aunque a mí me resultó complicadísimo seguir las instrucciones de esta página, porque inserta selectores para guiar a SiFR, decidí seguir adelante sin los mismos, a ver cuál era el resultado. Y sí: funciona igualmente bien.
Para abreviar, podéis ver aquí mi demo, en el título de las entradas y en el cuerpo de esa entrada.
Antes de nada, comentar que si alguno de vosotros ha perdido de vista el SiFR que tenía implementado en su blog, puede deberse a que puede haber introducido una versión de flash más "moderna", que no funcionará con su versión más antigüa de SiFR: si por alguna razón habéis tenido que rehacer vuestro sistema y véis que el SiFR ya no está, descargaros la versión más reciente de SiFR.js y problema resuelto. :)
Vamos a ver ahora cómo implementar SiFR3: es laborioso pero no difícil.
.-CSS y SCRIPTS: (Podéis descargarlos en la página original novemberborn. Escoged la versión más reciente)
<!-- INICIO sIFR -->
<link href='http://.../sifr.css' media='all' rel='stylesheet' type='text/css'/>
<script src='http://.../sifr.js' type='text/javascript'/>
<style media='screen' type='text/css'>
.sIFR-active h1 { visibility: hidden; }
.sIFR-active div#sidebar h2 { visibility: hidden; }
.sIFR-active h4 { visibility: hidden; }
</style>
<script type='text/javascript'>
var cochin = { src: "http://.../cochin.swf" };
var rockwell = { src: "http://.../rockwell.swf" };
sIFR.useStyleCheck = true;
sIFR.activate(cochin, rockwell);
sIFR.replace(cochin, {
selector: "h1",
css: [
'.sIFR-root { font-size:44px; font-weight:normal; color:#ffffff; text-align:center; letter-spacing:2; }',
'a { text-decoration:none; color:#900000; }',
'a:hover { color:#999999; }'
],
wmode: "opaque",
forceSingleLine: true,
filters: {
DropShadow: {
knockout: false,
distance: 3,
blurX: 2,
blurY: 2,
color: '#000000',
strength: .25,
angle: 90
}
}
});
sIFR.replace(rockwell, {
selector: "div#sidebar h2",
css: [
'.sIFR-root { font-size:14px; font-weight:normal; color:#666666; letter-spacing:2; }',
'a { text-decoration:none; color:#ad1010; }',
'a:hover { color:#1d5cd1; }'
],
wmode: "opaque"
});
sIFR.replace(rockwell, {
selector: "h4",
css: [
'.sIFR-root { color:#660000; text-transform:lowercase; letter-spacing:-1; }'
],
wmode: "opaque",
forceSingleLine: true,
filters: {
DropShadow: {
knockout: true,
distance: 1,
blurX: 2,
blurY: 2,
color: '#330000',
strength: 2,
angle: 30
}
}
});
</script>
<!-- FIN sIFR -->
Como véis, el link se refiere al CSS, con los presupuestos básicos de visibilidad y demás del texto a reemplazar por SiFR.
A continuaCión tenemos el sCript SiFR.js y los estilos de los selectores que vamos a activar. En este caso los títulos h1, los títulos h2 de la sidebar y el selector h4.
A continuación introducimos las fuentes swf que va a utilizar SiFR para nuestros selectores: en estre caso "cochin" y "rockwell"; y pasamos a configurar la forma en que ha de verse cada selector (tamaño de fuente, color, espaciado, etc).
En este ejemplo os he puesto un SiFR "normal, el que se refidere a la sidebar, y dos con sombras-dropShadow (h1 y h4). Por lo que se refiere a los selectores que vamos a sombrear, podéis cambiar cosas como el ángulo y la fuerza (strength, angle), que darán un aspecto diferente a vuestro texto en SiFR.
.- HTML:
Para activar el sombreado en un selector a aplicar en una entrada, por ejemplo, sólo tenéis que llamarlo con la identidad que le habéis dado:
<h4 class="LAQUESEA">Con un selector h4 para este cuerpo
de entrada, y un selector h1 para el título, tenemos
dos textos sombreados en SiFR.
</h4>
Y creo que ésto es todo...
✍ ¿Quieres hacer algún comentario? ✍