Borja me preguntaba por la forma de crear las citas donde aparece el texto que queramos dentro de una caja.

Para que nos entendamos el resultado sería este:

El resultado es este.

Para conseguirlo, simplemente tenemos que crear en nuestro CSS un elemento con los siguientes valores:

blockquote {border-left: 5px solid #555;padding: 0.7em 1em 0.7em 1em;
background: #eee url(http://helektron.com/img/bloque.gif) no-repeat
bottom right;margin-left: 2em;}

Y en el código basta con meter dentro de las etiquetas blockquote y /blockquote (con <> respectivamente) el texto en cuestión.

Lógicamente tendreis que cambiar la ruta de vuestra imagen (yo he empleado en el ejemplo: http://helektron.com/img/bloque.gif) y cambiarla como querais.

Además de poderle cambiar el nombre a blockquote por el que necesiteis.

Si te ha resultado interesante esta noticia, puedes recibir las nuevas noticias del blog en tu correo. Puedes pinchar en este enlace para darte de alta.
Además de esto, también puedes seguir las noticias vía RSS .

Css Vista nos permite ver los cambios de nuestro CSS en Internet Explorer y Firefox simultáneamente, de esta manera facilitarnos el trabajo de ver como queda nuestro diseño en ambos navegadores.

Podeis ver una demostración en este enlace y lo podeis descargar pinchando aqui.

Vía | Supay.es

Si te ha resultado interesante esta noticia, puedes recibir las nuevas noticias del blog en tu correo. Puedes pinchar en este enlace para darte de alta.
Además de esto, también puedes seguir las noticias vía RSS .

The-RockeR me preguntaba lo siguiente: ¿Podrías decirme cómo se hace para poner un enlace en la imagen flotante de abajo a la derecha?

Bueno pues aprovecho y creo un post explicándolo paso por paso, para que pueda servir a todos los que lo quieran saber.

Antes de nada, lógicamente tendremos que crear un “ancla” para movernos a la zona donde queremos que vaya cuando hagamos click en la imagen.

Para ello crearemos un enlace donde queramos, simplemente creamos el atributo name con el valor top (en este caso), lo podemos hacer de la siguiente manera:

Lo primero es crear en nuestra hoja de estilos css un identificador para ese enlace, donde vamos a determinar las propiedades del mismo.

Podemos crear este atributo css del enlace de la siguiente manera:

a#pie
{
position: fixed;
right: 0;
bottom: 0;
display: block;
height: 48px;
width: 48px;
background: url(img/arriba.gif) bottom right ; /
text-indent: -999em;
text-decoration: none;
}

La imagen la podemos cambiar por la que queramos, la ruta que he puesto de ejemplo es img/arriba.gif , vosotros la podeis cambiar por la que querais.

Lo segundo es irnos al footer e incluir el siguiente código html:

[html][/html]

Y finalmente poner donde queramos(dentro del body) el id, en la parte de nuestra página donde queremos que vaya:

[html][/html]

Tengo que decir que esto funciona en Firefox y en Explorer 7.0 (y superior). No he probado en navegadores como Safari, Opera y similar, aunque creo que debería de funcionar.

Si te ha resultado interesante esta noticia, puedes recibir las nuevas noticias del blog en tu correo. Puedes pinchar en este enlace para darte de alta.
Además de esto, también puedes seguir las noticias vía RSS .

He estado entretenido aligerando un poco el peso del blog. Empezando por bajar la calidad de las imágenes, desactivando el plugin de los votos (consumía una barbaridad) y comprimiendo el css (he utilizado Icey’s Compressor) quedandome con:

• Tamaño original: 14.83 kB (15,189 B)
• Tamaño final: 9.44 kB (9,669 B)
• Guardado: 5.39 kB (5,520 B)
• Reducción: 36.34%

Todo esto con el fin de reducir un poco más el uso de transferencia de datos y reducir el tiempo de carga del blog.

También podeis utilizar otras herramientas para comprimir y optimizar vuestros css:

• Css optimizer
• Css compressor
• Css formater and optimizer

Si te ha resultado interesante esta noticia, puedes recibir las nuevas noticias del blog en tu correo. Puedes pinchar en este enlace para darte de alta.
Además de esto, también puedes seguir las noticias vía RSS .

Al decir encuadre me refiero al cuadrado punteado que aparece cuando hacemos click en los enlaces, ya sean imágenes o simplemente texto.
Si los queremos eliminar basta con incluir esta propiedad en nuestro css:

outline:none;

Por ejemplo, si tenemos un enlace, con un determinado color y subrayado pondríamos lo siguiente:

a{color:#4B9EEA;text-decoration:underline;outline:none;}

El resultado si lo podeis ver, sería la inexistencia en este encuadre.

Si te ha resultado interesante esta noticia, puedes recibir las nuevas noticias del blog en tu correo. Puedes pinchar en este enlace para darte de alta.
Además de esto, también puedes seguir las noticias vía RSS .

Hace poco os comentaba un programa para generar menus y listas CSS. Hoy os voy a hablar de Css Buttom Designer.

Css Buttom Designer es una herramienta on-line con la que podrás crear botones CSS de una forma muy sencilla.

Pone a tu disposición una interfáz de uso sencillísimo para que diseñes tus propios botones con todo detalle. Sólo tienes que ir eligiendo y personalizando cada elemento: texto a mostrar, fuente, color de fondo, borde e incluso algunos efectos como degradado de color o efecto rollover.

Vía | DavidMHe

Si te ha resultado interesante esta noticia, puedes recibir las nuevas noticias del blog en tu correo. Puedes pinchar en este enlace para darte de alta.
Además de esto, también puedes seguir las noticias vía RSS .