DINPATTERN es una página con un contenido extraordinario donde encontraremos un gran surtido de patterns o patrones para utilizar como fondo del blog.
Parece ser que desde ayer algunos usuarios de Twitter están sufriendo ataques de phising.
Los que usamos este servicio estamos siendo avisados desde el mismo servicio, con un mensaje que podemos ver en nuestra página de Twitter:
No soy muy amiga de las imágenes animadas, suelen hacer que la página cargue más lenta y distraen la atención de lo que verdaderamente tiene interés, pero entiendo que le guste a los demás para darle un poco de vidilla a la sidebar.
Si te gustan ese tipo de imágenes ahora puedes crearlas subiéndolas desde tu PC, en Loogix puedes añadirles diferentes efectos.
Todo Software se suma a la iniciativa iniciada por Espineli de regalar un espacio para tu favicon.
En TwitterButtons podemos encontrar una bonita colección de botones especialmente diseñados para nuestro enlace de Twitter.
Algunos ya los habíamos visto anteriormente, otros son exclusivos de TwitterButtons.
Aún no disponen de demasiados modelos (alrededor de 60), pero se supone que su intención es ir recopilando en el sitio más botones.
Enlace: TwitterButtons | Vía: Girly Blogger
Hace tiempo comentaba los distintos bordes que podemos añadir a las imágenes con CSS, es una forma sencilla y atractiva de presentar las imágenes...
Días atrás me comentaban que añadiendo una clase también es posible añadir borde a las imágenes, eso es cierto porque añadiendo una clase podemos escoger el tipo de borde y la imagen que se lo vamos a añadir.
Para crear un borde primero añadiremos unas líneas a la CSS como siempre y para ubicarnos rápidamente lo haremos justo antes de ]]></b:skin>
Añadimos:
.imageborder-2 {
border: double #B0171F; 4px;
}
Luego nos dirigimos al editor de entradas y añadimos lo siguiente:
<img alt="border" class="imageborder-2" src="aquí-url-de-la-imagen" />
Después subimos la imagen que vamos a utilizar, una vez obtenemos el código copiamos la url de la imagen y la pegamos en el anterior código donde dice aquí-url-de-imagen.
Damos salida a la entrada y veríamos algo así:
Con una imagen como fondo también podemos obtener marcos muy atractivos, bastará con añadir los estilos en nuestra plantilla, el código de la imagen será siempre el mismo.
.imageborder-2 {
background:url("url-imagen");
}
.imageborder-2 {
background:url("url-imagen");
border: 1px double grey;
}
(Este borde es muy elegante, añadí color de fondo porque sobre fondo blanco pierde su encanto)
.imageborder-2{
padding:8px;
border:2px outset #F6FAF4;
}
.imageborder-2{
background-color: #FFF;
border: 5px dashed #A2B5CD;
}
.imageborder-2 {
border-left: 3px dotted black;
border-top: 3px dotted black;
border-bottom: 2px solid #CCCCCC;
border-right: 2px solid #CCCCCC;
}
Con todo esto lo que conseguimos es crear un marco para una imagen determinada, si deseamos añadir más de un marco y que sean diferentes lo que haríamos sería crear otra clase, añadir en la plantilla:
.imageborder-1 {
border: double #B0171F; 4px;
}
Le cambiamos el nombre y en lugar de llamarle imageborder-2 le llamaremos imageborder-1 para añadir la imagen haríamos lo mismo, en lugar de añadir:
<img alt="border" class="imageborder-2" src="aquí-url-de-la-imagen" />
añadimos lo siguiente:
<img alt="border" class="imageborder-1" src="aquí-url-de-la-imagen" />
La única diferencia sería crear un nuevo estilo con nombre diferente y utilizar el nuevo nombre donde añadimos la url de la imagen.
Ya podemos añadir no sólo un borde a las imágenes sino distintos bordes, si nuestra idea es utilizar siempre el mismo borde hay una forma de hacerlo mucho más sencilla.
Lo que haremos será añadir los estilos a las imágenes directamente, buscamos en la plantilla donde dice:
.post img {
padding:4px;
}
Añadiendo cualquiera de los estilos
.post img {
padding:4px;
background:#58554E;
border:4px solid #CCC;
}
Simplemente con eso nuestras imágenes de los post tendrán borde.
También podemos crear un efecto al marco añadiendo el evento hover, tendríamos que añadir:
.post img {
padding:4px;
background:#58554E;
border:4px solid #CCC;
}
.post img:hover {
padding:4px;
background:#CCC;
border:4px solid #58554E;
}
La imaginación es lo que cuenta y el resultado el que tú quieras.
