1. La imagen, a poder ser .png para poder ponerla con el fondo transparente.
2. Añadir un pequeño código HTML a la plantilla(theme) de tu blog o Web.

El código HTML que hay que poner es este:

<img src="url-de-la-imagen" alt="Mi imagen flotante" border="0" style="position:fixed; bottom:0; right:0;" />

Y hay que ponerlo justo antes del </body> de nuestro theme, que suele estar en el archivo footer.php

Y el resultado es algo parecido a esto:

No necesariamente tiene que estar en el pie del blog y a la derecha, cambiando los parámetros bottom y right(y si fuese necesario añadiendo top y/o left) del código podremos colocar la imagen donde queramos.

También existe la opción de poner un enlace a nuestra imagen, que nos lleve a otra página o que simplemente suba hacía arriba, el código sería el siguiente:

<a href="#" rel="nofollow" title="Ir arriba" ><img src="url-de-la-imagen" alt="Mi imagen flotante" border="0" style="position:fixed; bottom:0; right:0;" /></a>

Nota: Donde he puesto la almohadilla(#) se puede poner un anclaje(#arriba) al inicio de la página, o una URL, vosotros mismos.

Este post lo he preparado para Carlos, que me pidío através del formulario de contacto que le explicase como poner una imagen flotante en su blog.

Ahora con CSS3, y la propiedad border-radius lo podemos hacer de manera muy fácil. Fijaos en el siguiente ejemplo:

Para conseguir este efecto he usado el código XHTML y CSS que os muestro a continuación.

Código XHTML

<div class="bordes-redondeados">

    <h2>Bordes redondeados con CSS3</h2>

    <p>Así de fácil y rápido se hace un caja con los bordes redondeados en CSS3.</p>

</div> 

Código CSS

 .bordes-redondeados {
    width: 400px;
    margin: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-color: #069;
}

.bordes-redondeados h2 {
    padding: 10px 15px 5px 15px;
    text-align: center
    color: #fff;
}

.bordes-redondeados p {
    margin: 0;
    padding: 5px 15px 10px 15px;
} 

Os he enseñado la forma más sencilla de redondear las esquinas de un contenedor div, pero hay un montón de formas de combinar y aplicar esta técnica. Otros ejemplos podrían ser estos:

Para conseguir recuadros con diferentes radios en cada esquina, sólo tenemos que darle 4 valores diferentes a la propiedad border-radius.

 .bordes-redondeados {
    width: 400px;
    margin: 10px;
    -webkit-border-radius: 2em 1em 4em 3em;
    -moz-border-radius: 2em 1em 4em 3em;
    border-radius: 2em 1em 4em 3em;
    background-color: #069;
} 

Si tenéis cualquier pregunta o consulta, no dudéis en hacerlo en los comentarios, que son gratis

No se porque pero a todos nos encantan los personajes y los dibujos de anime, tienen algo especial, pues si te gustaría poder dibujarte tus propios personajes de anime, en Cristalab han publicado 9 magníficos posts en los que explican como hacerlo, y yo los he agrupado todos

• Como dibujar anime – Parte 1: Bocetos
• Cómo dibujar anime – Parte 2: El rostro
• Como dibujar anime – Parte 3: Ojos
• Cómo dibujar anime – Parte 4: Cabello
• Cómo dibujar anime – Parte 5: El rostro a 3/4
• Cómo dibujar anime – Parte 6: El perfil
• Cómo dibujar anime – Parte 7: Otros ángulos
• Cómo dibujar anime – Parte 8: Expresiones faciales
• Cómo dibujar anime – Parte 9: Boceto del cuerpo masculino

No se si asanetml tiene pensado poner algún post más, pero si lo hace actualizare la lista, porque yo me he quedado con ganas de más, sobretodo del boceto del cuerpo femenino

Para los que no acabáis de decidir que iconos sociales poner en vuestro blog, hoy os traigo un pack de 16 iconos de gran calidad que seguro que más de uno vais a utilizar (yo probablemente lo haga) ya que son realmente bonitos y originales.

El pack de iconos sociales de Page Peel ha sido creado por ProductiveDreams.

Si estos iconos sociales no os acaban de gustar, os dejo un link con más de 600 iconos sociales gratis de gran calidad, que seguro que alguno encaja en vuestro diseño.

Vía | CSS Blog
Descarga | Iconos sociales

A veces veo espectaculares iconos para los feeds y me gustaría implementarlos en el blog pero no se donde, no quedarían bien en mi theme, pero seguro que a lo mejor a vosotros si os quedan bien.

Los iconos son de PSD Graphics y te los puedes descargar gratis en una resolución de 3200x2400px, casi naa.

Iconos | PSD Graphics

WPWebHost ha creado un concurso de diseño en themes desarrollados en WordPress con 3 buenos premios:

1. Un banner del ganador de cada categoría en su web.
2. 200 Dólares para el ganador de cada categoría.
3. Alojamiento gratis de por vida.

Creo que me voy a presentar, no pierdo nada, pero lo que no tengo claro, es en que categoría participar, si en la de Limpio y Minimalista o Moderno y Elegante, cual me recomendáis?

Si vosotros también queréis participar, pues es muy sencillo, solo tenéis que publicar un post sobre el concurso y proponer vuestro theme de WordPress en alguna de las 5 categorías existentes:

• Limpio y Minimalista
• Retro y Vintage
• Grunge
• Mano alzada
• Moderno y Elegante

Una de las cosas que no me gustan es que cualquiera pueda presentar un theme creado por otro y sólo retocado,…. es bastante injusto para el creador del theme.

PD: De todas formas, si queréis un buen hosting para vuestro blog en WordPress os recomiendo Blogsting.

Vía | Ayuda WordPress

Los ponentes de este taller serán Rafa Vargas-Machuca y Ruth que nos mostrarán como crear y colorear ilustraciones usando un Mac, por cierto, a cada asistente se les prestará un iMac y una tableta gráfica Wacom Bamboo, gentileza de Wacom.

Las plazas son limitadas, de modo que si no queréis perder la vuestra la podéis reservar enviando un mensaje mediante el formulario de contacto de CampusMac, indicando vuestro nombre completo y pidiendo una plaza.

El precio de la jornada es de 5 euros para los no-socios, y gratuita para los socios CampusMac. Recordad que en la misma jornada, cualquier persona podrá hacerse socia por 35 euros anuales in-situ.

(max)Icone Blog – Pack 1 de WebFruits

(max)Icone Blog – Pack 2 de WebFruits

(max)Icone Blog – Pack 3 de WebFruits

Y curiosamente hoy en Smashing magazine nos muestarn un pack de iconos sociales muy chulos.

Pues bueno cuando necesitéis iconos sociales para vuestros diseños ya sabéis donde acudir

12 Botones sociales de Soulvisual

Iconos sociales de FreakGroup

Pack de iconos sociales de Vikiworks

Set de iconos gratis de Templates.com

Iconos sociales de Arbenting

Web 2.0 Social Bookmark Icons from IconsPedia

Iconos Web 2.0 de UtomBox

Social Bookmark Iconset de Vikiworks

Cheers: A Free Social Icon Set from Smashing Magazine

Function Icon Set

Social Web Buttons – Pack 1 de WebFruits

Social Web Buttons – Pack 2 de WebFruits

Si conocéis alguno más pasadmelo y lo agrego a la recopilación.

Que lástima no haberlos encontrado antes, sino los hubiese puesto en mi nueva sidebar.

Vía | Soulvisual

WP Cumulus es un plugin de WordPress que muestra una bonita nube de tags en flash. Este plugin se lo tenemos que agradecer a Roy Tanck que se lo ha currado.

El plugin es muy fácil de instalar:

1. Descargarlo y descomprimirlo en una carpeta en nuestro ordenador.
2. Subirlo a nuestro servidor y ponerlo en el directorio wp-content/plugins/.
3. Activar el plugin en la sección de plugins de nuestro panel de administración de WordPress.
4. Configurar el plugin a nuestro gusto en la sección de Opciones –> WP Cumulus de nuestro panel de administración de WordPress.

   

5. Poner la siguiente linea de código donde queramos que aparaezca la nube de tags.

<?php wp_cumulus_insert(); ?>

Como podéis comprobar el proceso es muy sencillo e igual que la mayoría de plugins de WordPress.

De todas formas si tenéis dudas o preguntas, preguntarme lo que queráis en los comentarios, o consultar la página del creador del plugin.

Actualización: Instalaros la última versión, ya que se ha encontrado un bug en la versión 1.2.2.

Pues bueno los cambios son los podéis ver, de momento no son muchos pero a mi estos pequeños cambios me gustan bastante.

Como no he tenido mucho tiempo de probarlo, os pido que me echéis una mano y me digáis si veis alguna cosa que no funciona bien, o no os acaba de gustar.

A ver si con vuestra ayuda y las vacaciones de verano tengo tiempo de dejar la realineación de mi diseño lista para empezar el 15 de Septiembre con una imagen más 2.0 y las pilas cargadas

__________________________________________

Vía | Irvisual

La foto en la que se ha basado el artísta, es la que tengo en mi perfil, y podéis ver con claridad que ha sido lo que más ha resaltado de mi

Esta caricatura me llega a través de la campaña “¡Da la cara en tu blog!” de Bloguzz, en la que Alex Gallego crea una caricatura personalizada del blogger elegido.

Me he estado dando una vuelta por la web de Alex Gallego y la verdad es que tiene trabajos realmente buenos que os aconsejo que veaís, porque vale la pena verlos.

Bueno el caso es que los chicos de CSS Tricks se me han adelantado y de que manera porque se han currado un theme desde cero y han hecho tres Screencast con los que cualquiera será capaz de crearse un buen theme para WordPress a su completo gusto.

Vía | Leandono’s
Enlace | CSS-Tricks

Via | Smashingmagazine

Demo | Decargar | PSD y EPS

La verdad es que estos iconos me vienen justo cuando estaba haciéndole unas pequeñas mejoras en mi theme y ahora me estoy pensando si usarlos o no. Hay total de 12 iconos con un bonito estilo 2.0(brillantes y modernos), y en diferentes tamaños, 24×24, 36×36, y 48x 48 en formato png.

Vía | Webmaster libre
Descarga | Set de iconos para bloggers

Muchas veces nos encontramos la etiqueta borde de nuestro CSS de la siguiente forma:

#div {
     border-width: 1px;
     border-style: solid;
     border-color: #666666;
}

o así:

#div {
     border-right-width: 2px;
     border-right-style: solid;
     border-right-color: #666666;
}

Cuando la forma simplificada y también correcta, sería así,

#div {
     border:1px solid #666;
}

y así, respectivamente.

#div {
     border-right:2px solid #666;
}

Veis que fácil ha sido reducir tres lineas en una, pues imaginaos esto a lo largo de todo nuestro “style.css”, las lineas que ahorraremos, y lo limpio que veremos el código cuando tengamos que buscar algo.

La etiqueta “border” consta de tres parámetros:

• width(anchura): thin, thick, medium o un valor en px.
• style(estilo): solid, dashed, dotted, double.
• color: nombre, hex, rgb o 0-255.

#div {
    border-width: 5px;
    border-style: dotted;
    border-color: blue;
}

#div {
    border:5px dotted blue;
}

Con estas reglas aplicamos el diseño a los 4 bordes, pero también podemos aplicarlo uno a uno definiendo el borde que queremos.

#div {
    border-top: 2px dotted blue;
    border-right: 1px solid red;
    border-bottom: 3px double yellow;
    border-left: 2px dashed black;
}

Al igual que con el margin y el padding los valores del border también se pueden agrupar en arriba/abajo y derecha/izquierda si estos valores son iguales:

#div {
    border-top-width: 3px;
    border-right-width: 2px;
    border-bottom-width: 3px;
    border-left-width: 2px;
}

#div {
    border-width:3px 2px;
}

Pues bueno con esto y vuestra imaginación, ya podéis hacer todo los tipos de bordes que queráis

#div {
     margin-top: 20px;
     margin-bottom: 5px;
     margin-right: 10px;
     margin-left: 25px;
     padding-top: 10px;
     padding-bottom: 0px;
     padding-right: 5px;
     padding-left: 5px;
}

8 lineas que pueden ir en dos, imaginaos esto en todo el style.css, se multiplica el numero de lineas del css por 4, una burrada, así que os voy a dar unas nociones de CSS muy sencillitas y que os serán de mucha utilidad. Voy a dividir este post en 4 o 5, ya que todo en uno se me antoja muy largo, hoy empezaremos con el margin y el padding.

Para empezar, las dos lineas en las que se puede simplifcar el CSS de arriba son:

#div {
     margin: 20px 10px 5px 25px;
     padding: 10px 5px 0px 5px;
}

Para simplificar de esta manera, sólo tenéis que tener en cuenta que tanto con el margin, como con el padding las medidas se ponen empezando por arriba y siguiendo el sentido horario, por lo que quedarán de esta forma: Arriba(top), Derecha(right), Abajo(bottom), Izquierda(left).

Si nos fijamos en el padding vemos que en el padding-bottom pone 0px, eso también podemos simplificarlo, y siempre que veamos 0px, podemos cambiarlo por 0 a secas.

#div {
     margin: 20px 10px 5px 25px;
     padding: 10px 5px 0 5px;
}

También vemos que el valor del padding-right y el padding-left son iguales, eso también se puede simplificar:

#div {
     margin: 20px 10px 5px 25px;
     padding: 10px 5px 0;
}

Más Simplificaciones en CSS:

• Cuando el margin o el padding tienen iguales las medidas laterales y la superior e inferior también se pueden agrupar así:

  #div {
       margin-top: 0px;
       margin-right: auto;
       margin-bottom: 0px;
       margin-left: auto;
  }
  #div {
       margin: 0 auto;
  }

• Cuando el margin o el padding tienen todas sus medidas iguales:

  #div {
       margin-top: 10px;
       margin-right: 10px;
       margin-bottom: 10px;
       margin-left: 10px;
  }
  #div {
       margin: 10px;
  }

Para acabar deciros que todo esto vale tanto para el margin como para el padding, y que los valores que admiten son:

Y como siempre, ya sabéis que en los comentarios resuelvo todas las dudas que tengáis al respecto, por cierto mañana veremos el border.