Forecast Font: fuente gratis para el tiempo

Forecast font

Forecast font

Forecast Font es una web-font para la creación de iconos del tiempo de varias capas. Fue creada para que el diseñador tenga más control sobre la apariencia de los iconos, en lugar de sólo tener un solo color o estilo. Puede ser que estés buscando Iconos planos, de un solo color y eso es genial, pero con Forecast Font tienes toda la flexibilidad de color, estilo o incluso animar a diversas partes de los iconos. Así pedemos crear algo un poco diferente al lo que suele verse por ahí. Son totalmente escalables para su uso en cualquier dispositivo, sin necesidad de crear sprites o utilizar varias imágenes para crear los iconos del tiempo.

Merece la pena echarle un vistazo a esta fuente gratis y experimentar con ella para iconos.

Descarga | Forecast Font

Plantilla HTML minimalista gratis. Nina

nina-free-html-minimal-template

s–>nina-free-html-minimal-template

En esta ocasión traemos una plantilla HTML gratuita ideal para editar y adaptar a cualquier necesidad. Se trata de un recurso gratuito para uso personal o comercial.

El autor, Flay, da la opción de comprar la plantilla adaptada a wordpress por un precio de $40.

Tiene un diseño sencillo pero muy cuidado que da muchas posibilidades de adaptación y edición.

Demo | aquí
Descarga | aquí

10 sliders y carousels jQuery gratis

Sliders jQuery 10

es–>Aquí tenemos una buena colección con algunos de los mejores de sliders jQuery que hemos encontrado en internet.

jQuery es de lo mejor de Internet en estos momentos. Prácticamente se ha quitado de encima a flash y está empezando a ocupar su sitio. Así que hemos decidido preparar una lista de los mejores plugins y tutoriales para sliders jQuery que hemos encontrado por ahí.

Un control deslizante de imágenes o diapositivas puede agregar una gran cantidad de funcionalidad e interactividad a cualquier sitio web y probablemente esta es la razón por la que tanto gusta este elemento. 

Elastic Image Slideshow con previsualización de Thumbnail

El modo en el que se muestran los thumbnails es realmente fascinante en este plugin.

Sliders jQuery 01

jQuery Slider Shock

Gracias a esta web puedes preparar un slider a tu medida.

Sliders jQuery 02

Unoslider

Sencillo slider que funciona a la perfección.

Sliders jQuery 03

Elastislide Carrusel adaptable

Sliders jQuery 04

Responsive Thumbnail Gallery Plugin

Es más que una galería pero funciona como un slider jQuery en cualquier caso.

Sliders jQuery 05

Galleria

Sliders jQuery 06

Creando un Slideshow con jQuery y CSS

Sliders jQuery 07

Supersized – Full screen background slideshow jQuery Plugin

Sliders jQuery 08

jQuery & WordPress Image Slider

Sliders jQuery 09

Marcofolio

Sliders jQuery 10

Botones animados con CSS gratis

Boton animado CSS

Boton animado CSS

Para hoy hemos preparado unos botones animados mediante CSS. Están inspirados en el concepto de botón de Twitter de Erik Deiner.

En los enlaces de abajo podéis acceder tanto a la demo como al código. Sentíos libres de usarlos y mejorarlos en lo que se os ocurra. Sobre todo, agradeceríamos que compartieseis con nosotros vuestras impresiones y mejoras sobre el código.

Enlaces | Descarga | Demo

Si te gustan las fuentes, mira Adobe free Edge Web Fonts

Adobe Edge Web Fonts

Adobe Edge Web Fonts

Si eres un diseñador web estarás conmigo cuando digo que el mundo de las fuentes en línea se pone cada vez mejor. Bueno, pues ahora además de los servicios de pago como Typekit, Webtype y Fontdeck, Adobe ha lanzado su servicio Edge Web Fonts para entrar en la pelea.

En realidad Adobe se ha asociado con Google para compilar una biblioteca de más de 500 familias de tipos de letra de código abierto para sus Edge Web Fonts, incluyendo Google Web Fonts y una muestra de la biblioteca de Adobe. Las fuentes se sirven con el mismo motor usado en el servicio de pago Adobe Typekit. Lo mejor es que su incorporación a cualquier sitio web es sólo cuestión de cortar y pegar unas pocas líneas de código.

Adobe Edge Web Fonts 02

Lo malo es que Adobe no ofrece una manera realmente satisfactoria de navegar entre las vistas previas de las fuentes de este servicio. Se limita en este caso a ofrecer la vista previa de la fuente en la parte inferior izquierda de la página principal de Edge Web Fonts, disponiendo un menú desplegable en el que sólo se puede previsualizar una familia de fuentes a la vez. La buena noticia es que alguien lo ha hecho por Adobe.

Afortunadamente, el desarrollador web Tony Struck ha llegado con su propio previsualizador de Adobe Edge Fonts ofreciendo una vista previa WYSIWYG de fuentes múltiples al mismo tiempo. El usuario puede hacer doble clic en el cuadro de texto para cambiar el texto de vista previa y gracias a un control deslizante en la parte superior de la ventana se puede modificar el tamaño de fuente.

Incluyendo las fuentes a una web

Una vez nos hayamos decidido por la fuente a utilizar es necesario seleccionarla en el menú desplegable de previsualización disponible en la página principal de Edge Web Fonts. Justo debajo de la vista previa de la fuente elegida, en “Using Edge Web Fonts” podremos encontrar el código que deberemos utilizar en nuestro proyecto. Se nos muestra el enlace al script de la fuente así como el código CSS necesario para sustituir en nuestro trabajo. En cualquier caso también nos da la opción de visualizar la documentación completa mediante un enlace.

Adobe Edge Web Fonts 02

Poniendo como ejemplo la fuente League Gothic, el código que habría que añadir sería el siguiente:

Para el HTML

Para el CSS

h1 {
font-family: league-gothic, serif;
}

Como podéis ver, se trata de un servicio tan potente y útil como fácil de usar. Se van acabando las excusas para exprimirse el cerebro y darle una vuelta de tuerca al diseño de nuestro próximo proyecto.