Asier Marqués

Hablando sobre tecnologías web y otras cosas que me interesan

Archivo de la categoría 'CSS'...

Archivado bajo CSS, Desarrollo Web, javaScript

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.

coverflow.jpg

Comentarios (0) Posted by Asier Marqués on Martes, Agosto 28th, 2007

Archivado bajo CSS, Desarrollo Web, javaScript

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"

glossy

Comentarios (0) Posted by Asier Marqués on Miércoles, Julio 25th, 2007

Archivado bajo CSS, Desarrollo Web

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
Comentarios (0) Posted by Asier Marqués on Jueves, Junio 14th, 2007

Archivado bajo CSS, Desarrollo Web

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.

dibujo css

(more…)

Comentarios (2) Posted by Asier Marqués on Martes, Mayo 29th, 2007

Archivado bajo CSS, Desarrollo Web, Usabilidad, javaScript

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

Captura_1

Comentarios (0) Posted by Asier Marqués on Sábado, Mayo 26th, 2007

Archivado bajo CSS, Desarrollo Web

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.
    Enlaces externos
  • 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.Sigue leyendo
  • Texto variable: al igual que ya contamos en Sentido Web, usando distintas hojas de estilo y accediendo a ellas mediante Javascript.
    Tamaño de texto
  • 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.
    Pestañas
  • Formularios: dos buenos ejemplos de formularios, uno de ellos muy bien tabulado y otro en tres columnas.
    Formularios
Comentarios (0) Posted by Asier Marqués on Martes, Mayo 8th, 2007

Archivado bajo CSS, Desarrollo Web

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

Comentarios (12) Posted by Asier Marqués on Sábado, Mayo 5th, 2007

Archivado bajo Aplicaciones Web, CSS, Desarrollo Web, Enlaces, Internet

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.

Captura_4

 

Via | xyberneticos.com

Comentarios (0) Posted by Asier Marqués on Viernes, Mayo 4th, 2007

Archivado bajo CSS, Desarrollo Web

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

Comentarios (4) Posted by Asier Marqués on Lunes, Abril 30th, 2007

Archivado bajo CSS, Desarrollo Web

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

Comentarios (1) Posted by Asier Marqués on Viernes, Marzo 9th, 2007