Asier Marqués

Christian Effenberger, creador de interesantes librerías en javaScript, ha creado una librería (Reflex 1.1) que nos permite aplicar el efecto CoverFlow con reflejo, implementado por Apple en MacOSX Leopard, iPhone e iTunes, a nuestras imágenes en la web.

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

Glossy.js es una librería escrita en javascript que nos permite mostrar nuestras imágenes con esquinas rodeadas, brillos y sombras.

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"

En tuFuncion han publicado una lista de editores para escribir código CSS de una forma más fácil que a través del bloc de notas u otros programas que no colorean el código CSS, como Zend Studio.

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 dibujo inferior esta realizado integramente con código css sin usar imágenes, y es compatible con Firefox 2, IE7, IE6 y Opera 9. Aunque el autor dice que no lo ha hecho porque estaba aburrido y no tiene utilidad, yo lo he posteado porque creo que es uno de los ejercicios más complicados que he visto con éste lenguaje y he publicado también el código fuente en la parte extendida de éste post.

(more…)

Quien halla tenido que escribir código javascript para una pre-validación de un formaulario antes de enviar la información facilitada en él, habrá comprobado que hay que andar con cuidado a la hora de cambiar el diseño o reutilizar ese formulario en otras aplicaciones o proyectos.

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']“.

En sentido web (web recomendada para desarrollores web), han posteado una traducción del post en ventures kills donde se explican 5 efectos css accesibles. Ésta es la lista traducida:

• 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.
  

Éste es un código que siempre se me olvida y lo apunto en el blog para no perderlo más. Es un código en css para limar las esquinas de un div, compatible con internet explorer y mozilla, sin imágenes ni javaScript. El código css es el siguiente:

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 class=”rtop”><b class=”r1″></b><b class=”r2″></b><b
class=”r3″></b><b class=”r4″></b></b>

[Aquí el contenido]

<b class=”rbottom”><b class=”r4″></b><b
class=”r3″></b><b class=”r2″></b><b
class=”r1″></b></b></div>

SpiffiBox nos permite de una forma muy fácil y completamente online, crear código css (sin javascript) para redondear las esquinas de un div.

Via | xyberneticos.com

Cuando insertamos una imagen en formato PNG en nuestra web y visualizamos ésta a través de Internet Explorer 6, vemos que si el .png es transparente se nos añade un fondo opaco a la imagen.
Para solucionar esto podemos usar el siguiente código css.

* html #image-style {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”filename.png”, sizingMethod=”scale”);
}

via | Carlosleopoldo.com

Este es un post que he rescatado de mi antiguo blog enrackados.com. Decía lo siguiente:

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”>