Recent Posts
Recent Posts Tagged With 'css'
Bordes del Blog Difuminados
En CSS Tricks nos proponen un fondo difuminado para el blog, usando tan sólo una imagen .PNG semitransparente, y unas líneas de CSS. Puedes ver aqui el ejemplo: Fade Out Bottom. También, lo he aplicado al blog, usando en este caso un .PNG negro en...
Bordes dobles usando la propiedad Padding
Ya conocemos los diferentes tipos de bordes, y hace poco veíamos cómo conseguir falsos dobles bordes usando la propiedad outline.Ahora veremos cómo conseguir un efecto de doble borde en una imagen adjudicando un color al fondo (background) y dejan...
Iconize: dejando pistas sobre los tipos de enlaces
Con Iconize, podemos mostrar con un poco de CSS el tipo de enlace ante el que nos encontramos, asignando a cada tipo un icono. Puedes ver un ejemplo activo de enlaces iconizados aquí.Para instalarlo, debemos descargarnos el zip que contiene los ic...
Bordes dobles usando la propiedad Outline
Existen varios tipos de bordes, a los que podemos aplicar el color o densidad (tamaño) que deseemos. Los mismos valores aplican a la propiedad CSS outline, que marca el contorno del elemento a que es aplicado. Para saber más sobre esta propiedad, l...
Camisetas CSS
Las camisetas son mucho más que una prenda vestir (que también, que también), son expositores de profundos pensamientos y creencias, transmisoras de sabiduría, lienzo sobre el que plasmar ingenio y humor, y no han pasado de moda jamás, ni lo har...
Dibujar con CSS...
... es complicado, fastidioso, confuso, toma mucho tiempo y ni siquiera se ve bien. Entonces ¿Por qué lo hice? ¡Porque se puede! Metalorgy es el artista tras el dibujo. Fíjate bien: no hay ni una sola imagen en él; es puro texto (puntos, guiones...
Burbuja de texto (sin imágenes)
Hoy me encontré una agradable sorpresa en mi bandeja de spam: Bravenet, además de ofrecerme los horribles caracteres parlantes de costumbre (matadlos a todos, si los habéis adoptado: son hijos del demonio), me deja un par de códigos muy interesan...
Borde Polaroid
Podemos aplicar diferentes valores a los bordes para enmarcar nuestras imágenes al estilo Polaroid:Catedral de Santiago de CompostelaV.R.M. ©2006Catedral de Santiago de CompostelaV.R.M. ©2006Lo que hacemos es determinar una anchura mayor para el b...
Columnas 100% alto: overflow, padding y margin hacen el truco
Primero que nada: ¡Yújuuu! Y ahora sí, por fin un sistema para igualar la longitud de las columnas del blog (sidebars y cuerpo principal) que funciona con Firefox y también con El Maligno, y sin javascript. Las imágenes son originales de Metal-...
Pero eso del CSS... ¿para qué sirve?
Vagabundia está publicando una serie relacionada de artículos sobre el uso del CSS que te serán muy útiles a la hora de personalizar tu blog. Lo recomiendo en general y especialmente para aquellos que pensáis que CSS es una variante del mandarí...
Modelo de Menú de Enlaces con texto e imagen
Para (re)hacer mi Blogroll he aplicado el diseño que veíamos en la Galería de Imágenes con CSS, usando texto en vez de miniaturas; al pasar el cursor por el enlace se nos mostrará la imagen.→ Clave de Sol → Y Tu Que Lo Veas → Diario de un ...
Efectos con opacidad al pasar el cursor sobre imágenes
Puedes hacer que una imagen se muestre semitransparente y que al pasar el cursor sobre ella, resalte mostrándose completamente opaca (lo que le da un efecto de luminosidad):O viceversa, puedes mostrar una imagen normalmente, y hacer que se transpari...
Personalizando la Fecha de entradas
En mi blog, tenía la fecha oculta para que no fuese tan evidente el claro desorden en que voy posteando las cosas... o más bien me parecía innecesaria, en cualquier caso, dado que podemos personalizar su apariencia, ¡no puedo dejar de hacerlo!En ...
Galería de Imágenes con CSS
Una ordenada y bonita manera de presentar imágenes en una galería basada en CSS. Sencilla, además. Puedes usar miniaturas o texto, y al pasar el cursor por encima, aparecerá la imagen al lado. Mira el ejemplo:MARÍA PITAUNA VACACÓDIGO [+/-] Bus...
Poner un Marco al blog
Con una sencilla línea de CSS conseguimos este efecto de enmarcado; se aplica al cuerpo del blog y lo rodea por los cuatro costados.En la edición HTML de la plantilla, busca la etiqueta <body> y sustitúyela por ésta:<body style="border:3...
Efectos en los enlaces con imágenes
Es un efecto sensacional sensacionalista para tu blog. Con la imagen adecuada (olvídate de las grandes), conseguirás resaltar de manera extraordinaria los enlaces.Se trata de sustituir el tradicional subrayado de los enlaces por una línea o flecha...
Generador de menú CSS horizontal
Yo soy una gran vaga y adoro todo lo que me lo pone fácil y cómodo. Ah tú también... Pues CSS MENU MAKER está hecho para nosotros.Mi menú horizontal lo hice aquí, en 2 minutos, y después edité las imágenes que trae por defecto para darle un...
Añade estilo a tus posts con DROPCAPS
Es el mismo CSS aplicado en el subtítulo de este blog, esa doble M que ves más arriba.Erase una vez... ¡una Dropcap! El significado de esta palabra viene a ser "una mayúscula que cae" dentro del párrafo, es un estilo muy utilizado en imprenta, y...
Tipos de bordes para imagen o texto
"Si lo enmarcas, es arte" border: 10px inset blueviolet"Si lo enmarcas, es arte" border: 10px outset blueviolet"Si lo enmarcas, es arte" border: 10px ridge blueviolet"Si lo enmarcas, es arte" border: 10px groove blueviolet"Si lo enmarcas, es arte" bo...
Texto sobre Imagen
¡Hola amigos!Esto es un texto con imagen de fondo.O, también podríamos decir, una imagen con texto superpuesto. Podemos alinear el texto a nuestro gusto, añadir enlaces, aplicar transparencias o bordes...¡Qué bonito! Encuentra una imagen adecua...
Efectos para resaltar los enlaces
Dale un aire nuevo a tu blog aplicando algún efecto de los que te propongo. Fijate por ejemplo en el he aplicado en este blog:¡Visita CLAVE DE SOL!Cuando pasas el cursor sobre el enlace, la fuente se agranda. De la misma manera, puedes hacer que:- ...
Pullquotes: varias maneras originales de presentarlas.
EJEMPLO 1....este ejemplo, estilo Magazine, nos lo proporcionala genial Mandarin Design...A la hora de escribir una entrada larga, puede ser una buena idea aliviar los párrafos con imágenes, con "pullquotes" que resalten una parte del texto, o con...
