Excelentes tutoriales sobre CSS

Vía del.icio.us encuentro una excelente lista recopilatoria de tutoriales de CSS muy interesantes y que sólo se hacen mediante CSS. En la lista podemos encontrar varios tutoriales, para generar barras de progreso, agregar notas flotantes a imágenes, efecto acordión, menúes dropdown con CSS, textos con efecto glossy, etc.

Como podrán ver, la lista está japonés (?), pero todos los tutoriales están en inglés, ¿Un poco más sencillo de entender no?

Icon Archive, más de 17.000 íconos de excelente calidad gratis

Icon Archive es un sitio en el cual tienen una gran cantidad de íconos de muy alta calidad para ser descargados gratuitamente en varias calidades y organizados por categorías. Hasta el momento tienen una base de datos de más de 17.200 íconos gratis.

Todos los íconos están organizados por categorías, entre las cuales encontramos para aplicaciones, de animales, de computadoras, para festividades, de negocios, músicam de naturaleza, etc. La calidad de los íconos, como dije anteriormente, es excelente y varía entre los 48px y los 256px.

Además podemos descargar los sets de íconos completos en formato zip donde encontraremos los distintos tamaños para que se adecuen a nuestras necesidades.

Convertir PSD a CSS online gracias a PSD2CSS Online

Los que saben dicen que maquetar un sitio a partir de un diseño en PSD o JPG es un trabajo tedioso, por suerte hay herramientas como PSD2CSS Online, que te permiten subir tu diseño en PSD para que el sistema te lo haga automáticamente y te devuelva el diseño en XHTML y CSS gratis.

Según dice, el servicio es muy sencillo de usar, sólo tenemos que seleccionar el PSD que contiene el diseño, subirlo al sitio y el sistema se encargará de hacer las conversiones pertinentes y devolverá el diseño en XHTML, CSS e imágenes para que podamos usar.

También tienen una sección de tutoriales para aprender a usar el servicio, que no es muy complicado pero siempre es bueno saber lo que estamos haciendo.

Visto en Genbeta

FontCubes, más de 6.300 fuentes gratuitas

FontCubes es un sitio que posee más de 6.300 fuentes gratis para todas las plataformas de sistemas operativos, por lo tanto podemos encontrar tipografías para usuarios de Windows, Mac y Linux, todas gratis.

En la página principal podemos ver las 10 últimas fuentes agregadas al sitio, en cada ficha de las fuentes podemos ver los caracteres que incluye, por ejemplo mayúsculas, números y caracteres especiales. Una opción interesante es la de poder ingresar un texto personalizado para ver como se vería nuestro texto con la fuente en cuestión.

Por último, en la parte superior tenemos un alfabeto para ir navegando por las letras de los nombres de las fuentes, si es que conocemos su nombre la buscamos por ahí, sino podemos utilizar el buscador. Además hay secciones con las fuentes más populares, las más votadas, las recién incorporadas, etc.

Visto en Bitelia

Glittr, excelente generador de logos con brillos

Hace unas semanas les comenté sobre Glittericio.us, un sitio con el cual podíamos crear logos con brillitos muy fácilmente, ahora les traigo Glittr, una herramienta similar pero un poco más «avanzada», ya que permite crear los logos al vuelo.

Cuando digo que podemos crear los logos al vuelo quiero decir que tenemos un preview del mismo que se va actualizando a medida que vamos cambiando de tipografías y agregando diversos efectos. A todo esto lo vamos modificando gracias a una interfaz hecha en Flash que nos permite cambiar el tipo de letra, su tamaño, la textura del logo, etc.

Una vez que terminamos de crear nuestro logo el sistema nos genera al vuelo un código para embeber el logo en cualquier sitio web que queramos.

Enlace | Glittr

Crea tus propias fuentes online con FontStruct

fonstruct

FontStruct es una herramienta que te permite crear fuentes online mediante una interfaz en flash muy sencilla de utilizar, se podría decir que es como un editor WYSIWYG de fuentes online. Para utilizar el servicio tenemos que registrarnos gratuitamente (necesita confirmación por email), luego podemos entrar al editor que consta de varias herramientas como pinceles, borrador, líneas diagonales, rellenos, etc.

A la izquierda tenemos los distintos tipos de pinceles y a la derecha vemos el sector donde tenemos que ir dibujando la fuente, todo lo vamos haciendo con el mouse y si nos equivocamos, borramos y listo. Abajo podemos ver el abecedario que nos permitirá ir navegando entre las distintas letras para dibujarlas.

Una vez qye terminamos de crear nuestro set de tipografías podemos descargarlo a nuestra computadora para utilizarlas normalmente como lo hacemos con cualquier otra. Tip: Si no sabés como instalar fuentes en Windows, vamos a Inicio -> Panel de Control -> Fuentes, ahí pegamos la fuente descargada y listo.

Agrega agua en movimiento a tus fotos con WaveMyPic

Hace unos meses les comenté sobre Fotline, una herramienta bastante interesante que permite agregarle un efecto de agua en movimiento muy bonito a tus imágenes. Ahora aparece WaveMyPic, un servcio similar para agregar ése mismo efecto en segundos.

Con sólo elegir la imagen a modificar y subirla el sistema se encarga de todo lo demás y nos devuelve la imagen procesada junto con los códigos para compartirla donde quramos.

Visto en Maestro Alberto

Propiedades y valores del CSS

Vía del.icio.us encuentro un recurso muy interesante donde podemos ver las propiedades del CSS, es una especie de hoja de referencias con propiedades y valores de las distintas versiones de CSS.

También especifica los valores iniciales que se pueden incluir en cada propiedad y un enlace hacia la misma con una explicación más a fondo. Hay muchas propiedades que recién se incorporan en la nueva versión de CSS 3.

Crea tus banners rápido y fácil con Free Banner Maker

banner puntogeek

Free Banner Maker es una interesante herramienta que te permite crear banners de una manera sencilla y rápida para tus sitios web. Tiene una interfaz muy bien desarrollada que nos da la posibilidad de crear banners o botones de cualquier tamaño y diseño con sólo un par de clicks.

Primero nos encontramos con la pestaña «Layout», donde elegimos el formato del banner, ya sea con una imagen de fondo que subamos, especificar un tamaño personalizado o bien elegir entre los tamaños predefinidos por el sistema. Ahí mismo tenemos que elegir el tipo de fondo, entre degradados o un color de fondo sólido.

Luego en la pestaña «Text & Fonts» tenemos que especificar las líneas de texto que queremos agregar en el banner, podemos agregar hasta 6 líneas de texto. También nos dejan elegir el tipo de fuente deseada, hay una gran cantidad de tipografías muy interesantes.

Por último en las otras dos pestañas encontramos otro tipo de efectos para el banner, ya sean bordes o sombras. Una vez que terminamos de armar nuestro banner podemos descargarlo a nuestro equipo con sólo presionar el botón «Download it!».

Más de 13.000 fuentes gratuitas disponibles en Search Free Fonts

search free fonts

Search Free Fonts es un interesante sitio que encuentor a través de GeeksRoom, se trata un lugar donde podemos encontrar más de 13.000 fuentes gratuitas para descargar. La verdad que las fuentes disponibles son de muy buena calidad y son todas gratis, las tenemos ordenadas por categorías  y además podemos ingresar un texto personalizado para ver como quedaría con la fuente deseada.