Como en otras librerías del estilo, basta con aplicar una clase css (class=”reflex”) a las imágenes que queramos aplicar éste efecto.

Tan sólo debemos llamarla en nuestra página y poner un código de clase css a las imágenes que nos interese aplicar los efectos. Podemos especificar que efectos queremos o aplicar la clase glossy por defecto.

class = "glossy"
class = "glossy ibgcolor00aa00 igradient00aaaa horizontal noshadow"

La lista es la siguiente:

1. CSS Tab Designer
2. Balthisar Cascade CSS Editor
3. CSS Stylesheet Editor
4. EclipseStyle
5. BHead – Meta Tags & CSS Generator
6. Redbox13 CSS-editor
7. StyleSpread
8. <oXygen/> CSS Editor
9. CSSEdit
10. CSSED
11. CSS Editor for Eclipse
12. JustStyle CSS Editor
13. Style Assistant

El código css

/* - - - - - - - - - - -*/
/* Cuadro */
/* - - - - - - - - - - -*/
div#cuadro {
 margin: auto;
 margin-top: 30px;
 border-top: 25px solid #f8e297;
 border-right: 25px solid #d1a662;
 border-left: 25px solid #f2d494;
 border-bottom: 25px solid #CEAA7A;
 background-color: #60dbfe;
 height: 400px;
 width: 800px;
 overflow: hidden;
 position: relative
}/* - - - - - - - - - - -*/
/* Empezando Cielo */
/* - - - - - - - - - - -*/
div#cielo {
 position: absolute;
 z-index: 0;
 width: 800px;
 height: 215px
} div#ct {background-color: #36d1fe; height: 125px}
div#cb {background-color: #52d8fe; height: 90px}/* Arcoiris */
 div#arcoiris {
  width: 350px;
  position: relative;
  left: 161px;
  margin: 0;
  padding: 0;
  top: -22px
 }div#arcoiris span {margin: 0; padding: 0; position: absolute}span#arco-rojo {font-size: 165em; color: #e9232a; top: -1906px; left: -237px}
 span#arco-naranja {font-size: 142em; color: #f57d2d; top: -1615px; left: -180px}
 span#arco-amarillo {font-size: 119em; color: #f3df37; top: -1322px; left: -125px}
 span#arco-verde {font-size: 96em; color: #4fa437; top: -1032px; left: -68px}
 span#arco-azul {font-size: 73em; color: #0568ad; top: -743px; left: -12px}
 span#arco-morado {font-size: 50em; color: #861e84; top: -455px; left: 45px}
 span#arco-cielo {font-size: 27em; color: #60dbfe; top: -170px; left: 102px}/* Sol */
 div#sol {
  position: absolute;
  top: 0;
  left: 0;
 }div#sol span {position: absolute}span#sol1 {font-size: 59em; color: #f5c520; top: -624px; left: 69px}
 span#sol2 {font-size: 47em; color: #f8d356; top: -473px; left: 99px}
 span#sol3 {font-size: 34em; color: #FADD7C; top: -308px; left: 132px}/* Nubes */
  /* Nube 1 */
  div#nube1 {
  position: absolute;
  width: 100px;
  height: 120px;
  top: 0;
  left: 0
  }div#nube1 span {position: absolute; color: #fff}span#nub1-1 {font-size: 39em; top: -460px; left: -70px}
  span#nub1-2 {font-size: 38em; top: -425px; left: -45px}
  span#nub1-3 {font-size: 30em; top: -300px; left: -60px}
  span#nub1-4 {font-size: 20em; top: -250px; left: 10px}/* Nube 2 */
  div#nube2 {
  position: absolute;
  width: 172px;
  height: 123px;
  top: 26px;
  left: 590px
  }

El código Html

<div id="cuadro"><div id="cielo">

<div id="ct"> </div>

<div id="cb"> </div>

<div id="nube1"><span id="nub1-1">.</span>

<span id="nub1-2">.</span>

<span id="nub1-3">.</span>

<span id="nub1-4">.</span>

</div>

<div id="nube2"><span id="nub2-1">.</span>

<span id="nub2-2">.</span>

<span id="nub2-3">.</span>

<span id="nub2-4">.</span>

<span id="nub2-5">.</span>

<span id="nub2-6">.</span>

</div>

<div id="nube3"><span id="nub3-1">.</span>

<span id="nub3-2">.</span>

<span id="nub3-3">.</span>

<span id="nub3-4">.</span>

<span id="nub3-5">.</span>

<span id="nub3-6">.</span>

</div>

<div id="arcoiris"><span id="arco-rojo">.</span>

<span id="arco-naranja">.</span>

<span id="arco-amarillo">.</span>

<span id="arco-verde">.</span>

<span id="arco-azul">.</span>

<span id="arco-morado">.</span>

<span id="arco-cielo">.</span>

</div>

<div id="sol"><span id="sol1">.</span>

<span id="sol2">.</span>

<span id="sol3">.</span>

</div>

</div>

<div id="montana"><span id="n1"> </span>

<span id="n2"> </span>

<span id="n3"> </span>

<span id="n4"> </span>

<span id="n5"> </span>

<span id="n6"> </span>

<span id="n7"> </span>

<span id="n8"> </span>

<!--[if IE 7]>

<span id="n9"> </span>

<span id="n10"> </span>

<![endif]-->

<div id="mcima"> </div><div id="mfalda"> </div>

</div>

<div id="suelo"><div id="st"> </div>

<div id="sb"> </div>

</div>

<div id="arbol"><div id="tronco1"> </div>

<div id="tronco2"> </div>

<span id="hojas1">.</span><span id="hojas2">.</span>

</div>

<div id="mensaje"><h3>¡Mira Mamá! ¡Sin imagenes!</h3>

<p>Pintar en CSS es complicado, fastidioso, confuso, toma mucho tiempo y ni siquiera se ve bien. Entonces ¿Por qué lo hice? ¡Porque se puede! Además, creo que no me quedó tan feo... ¿O si?</p>

</div>

</div>

fValidator es una librería que nos permite hacer validaciones en campos de formulario sin tener que añadir eventos a los mismos o capas vacias para mostrar los errores. Simplemente se lo indicamos mediante una clase tipo css class=“fValidate['required']“.

• Enlaces externos: modificas el texto “(enlace externo)” incluyéndolo en un span y después lo que haces es modificar el estilo para que muestre un icono (diferente dependiendo de si es linked, visited o hover) y el texto lo haces desaparecer de la parte visible de la pantalla.
  
• Sigue leyendo: el texto “Sigue leyendo sobre …” se modifica, haciendo que solo aparezca “Sigue leyendo” y el resto del texto aparece como un popup mediante posición absoluta y jugando con el hover.
• Texto variable: al igual que ya contamos en Sentido Web, usando distintas hojas de estilo y accediendo a ellas mediante Javascript.
  
• Pestañas con imágenes: se crea un menú de pestañas con listas no ordenadas y se cambia el estilo para que no tengan formato de bloque, los enlaces están formados por imágenes y estas cambian según el hover.
  
• Formularios: dos buenos ejemplos de formularios, uno de ellos muy bien tabulado y otro en tres columnas.
  

div#nifty{ margin: 0 ;background: #F0EDE0}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
overflow: hidden; background: #F0EDE0}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

Y en el html para aplicarlo:

<div id="nifty">
<b>
 <b></b><b></b>
 <b class="r3"></b>
 <b></b>
</b>

 <!-- aquí el contenido -->

<b>
 <b></b>
 <b class="r3"></b>
 <b></b>
 <b class="r1"></b>
</b>
</div>

Via | xyberneticos.com

via | Carlosleopoldo.com

Para centrar en la página tanto en altura como en anchura una tabla o una capa y que se mantenga centrada si la ventana de nuestro navegador se maximiza,contrae o simplemente se quiere mostrar centrada en cualquier tipo de resolución de pantalla, debemos usar el siguiente código.

position: absolute;

top:50%;
left:50%;

width:760px;
/*la mitad de la anchura de la capa o tabla principal*/

margin-left:-380px;
/*Alto de tabla o capa principal*/

height:370px;
/*la mitad de la altura de la capa o tabla principal*/

margin-top:-185px;

Éste código centrará la capa tanto en altura como en anchura de la capa o tabla que tenga asignada la Class tCentrada.
Para asignar la instrucción a la tabla que queramos centrar debemos indicarselo con el atributo class en la tabla o capa deseada:

<table class="tCentrada">

En el caso de ser un div

<div class="tCentrada">