Trazos Web » diseño web

95 recursos y utilidades para diseño y desarrollo web

Diego — Tue, 18 Oct 2011 05:14:59 +0000

Internet cada día es un lugar donde puedes encontrar de todo, cualquier cosa. Quieres aprender un nuevo idioma?, un nuevo lenguaje de programación?, buscas casa?, allí está todo lo que necesitas. Si lo que deseas es tener todas las herramientas a la mano para facilitarte el desarrollo y diseño de sitios web, anteriormente había publicado 74 sitios web útiles para desarrolladores y diseñadores web pero ahora te traigo 95 recursos y utilidades para diseño y desarrollo web.

Este artículo esta dividido en las siguiente categorías:

Tipografía
Javascript
HTML
Imágenes
Diseño
CSS
Varios

Tipografía

Fount

Esta utilidad te ayudará a identificar cualquier tipo de fuente que veas en Internet.

FitText

FitText te permite hacer que el texto de tus sitios web sean flexibles, esto con el fin de ser utilizados tanto en sitios web normales como sitios web móviles.

Kerning

Con esta utilidad podrás programar junto a CSS algunas increíbles formas de presentar el texto de tu web.

jFontSize

Esta utilidad te permite poner un botón con el cual los usuarios redimensionen el tamaño del texto.

Javascript

Zeon.js

Esta herramienta te ayuda a encontrar errores en tu código JavaScript.

WOW Slider

Esta utilidad te permite incluir Sliders o Carruseles de imágenes en tu sitio web.

Vogue

Vogue te permite recargar la hoja de estilos CSS en el navegador web el el sitio que estés modificando.

yepnope.js

Con esta utilidad puedes decidir cargar solo los scripts que tus usuarios necesitan en tu sitio web.

jQuery Waypoints

Este plugin de jQuery te permite ejecutar diferentes funciona al hacer scroll sobre un elemento en tu sitio web.

jQuery Plugin Boilerplate

Este sitio te muestra una guía para que puedas desarrollar tus propios plugins de jQuery.

Placeholder

Este plugin de jQuery te permite habilitar el atributo placeholder de los formularios en los navegadores que no lo tienen.

Doctor JS

Este sitio analiza tu código JavaScript en busca te problemas y te da en reporte en formato JSON.

HEAD.js

HEAD.js te permite cargar todos tus scripts de JavaScript de una sola vez y en paralelo.

Enkoder

Este sitio te permite codificar en JavaScript tu dirección de email para evitar recibir Spam en él cuando lo publiques en tu sitio web.

JavaScript Garden

Este sitio te muestra una guía detallada sobre todo lo que necesitas saber sobre el lenguaje de programación JavaScript.

Augment.js

Esta librería te permite habilitar métodos modernos de JavaScript.

CamanJS

Esta librería en JavaScript te permite manipular imágenes gracias al Canvas de HTML5.

Share Count JS

Con esta librería en JavaScript puedes mostrar y combinar tu número de seguidores, fans, etc en las redes sociales de forma sencilla y rápida.

Neon Javascript Library

Esta es un framework para JavaScript que recopila las funciones más usadas en un archivo de tan solo 4 kb.

glfx.js

Esta librería te permite aplicar una gran cantidad de efectos las imágenes de tu web.

spin.js

Con esta librería puedes generar el gráfico de ‘cargando’ sin necesidad de imágenes.

Mobilize.js

Este es un framework de JavaScript y HTML5 con el que puedes transformar tus sitios web en sitios web para dispositivos móviles.

HTML

HTML Email Boilerplate

Este sitio web te ofrece una plantilla base para enviar tus emails en formato HTML y que se vea igual en todos los proveedores (Gmail, Hotmail, Yahoo, etc.).

Fractal

Este sitio te ayudará a validad tus plantillas de HTML para emails y te dirá que errores tienen el código.

Mobile Boilerplate

De los mismos creadores de HTML5 Boilerplate, nos traen una plantilla base para que desarrolles tu sitio web para móviles.

320 and up

Este sitio te provee los archivos necesarios para desarrollar tu sitio de 320px hacia arriba. Se basa en HTML5 Boilerplate.

Canvas Loader Creator

Este sitio utiliza el canvas de HTML5 para generar una imagen de carga para tu sitio web.

Kendo UI

Este sitio te proporciona un framework para mejorar la interfaz de usuario de tu sitio con HTML5.

CanvasText

Con esta librería podrás modificar el texto de tu sitio de formas sorprendentes utilizando la característica canvas de HTML5.

PhoneGap

Este es un framework basado en HTML5 que te proporciona todo lo necesario para crear aplicaciones móviles que funciones en todos los dispositivos móviles.

Mobile Design

En este sitio puedes leer un libro sobre diseño web y de aplicaciones para dispositivos móviles, completamente gratis.

Imágenes

Aviary

Este sitio te proporciona una forma fácil y en línea de editar tus imágenes.

Placehold.it

Con este sitio serás capaz de utilizar sus imágenes como imágenes de ejemplo en tus diseños.

iPiccy

Este es otro editor en línea de imágenes.

PunyPNG

En este sitio puedes comprimir tus imágenes JPG, GIF y PNG sin perder la calidad de la imagen.

Adaptive Images

Con los archivos que te da este sitio puedes hacer que tus imágenes se adapten al tamaño de la ventana del navegador.

JPEGmini

Utilidad web con la que puedes comprimir al máximo tus imágenes en formato JPG.

Default Icon

Esta página te proporciona una colección de 653 pictogramas que puedes usar en tus diseños web.

NoisePNG

Con esta aplicación podrás crear una imagen con ruido en formato PNG para el fondo de tus diseños.

Imagine

Con esta librería en PHP puedes manipular las imágenes de tu sitio web.

Diseño

DinPattern

En DinPattern encontrarás una gran galería de patrones para el fondo de tus diseños.

bgMaker

Con este sitio podrás crear pixél a pixél el diseño del fondo de tu sitio web.

Pattern Cooler

Aquí encuentras una gran colección de patrones de fondo y además puedes editarlos en línea.

Tartan Maker

Este sitio te ayuda a generar un patrón para el fondo de tus diseños web.

Striped Backgrounds

En este sitio web puedes crear un fondo en forma de barra verticales o puedes encontrar una buena paleta de colores para tu diseño.

Dotted Background Generator

Este sitio genera un fondo con puntos en diferentes tamaños.

Palette Creator

En este sitio puedes crear una paleta de colores para utilizar en tu próximo diseño web.

Kuler

Sitio web donde puede encontrar una gran cantidad de paletas de colores para tus diseños.

Color Palette Generator

Esta herramienta te permite generar una paleta de colores sacados de una imagen que puedes especificar.

Color Scheme Designer

En este sitio también puedes crear tu propia paleta de colores.

Pictaculous

Con esta herramienta puedes subir una imagen y obtener la paleta de colores que la compone.

ColorMunki

Aquí también puedes generar una paleta de colores para tu diseño web.

RoundedCornr

Este sitio genera el código necesario para hacer bordes redondeados en tu diseño.

Tabs Generator

Con esta aplicación puedes generar los tabs para tus proyectos web.

Patternizer

Con este sitio puedes generar fácilmente un patrón para el diseño de tu sitio web.

CSS

CSS Sprites

Esta herramienta web te ayudará a crear el sprite de tus imágenes de una forma más fácil.

Fluid Grids

Con esta herramienta puedes generar una plantilla de columnas fluidas de CSS.

LESS CSS

Herramienta que te permite extender el lenguaje CSS, añadiendo la posibilidad de crear funciones, variables, hacer operaciones y más, y así escribir menos código CSS.

LESS Boilerplate

Este sitio te proporciona una plantilla base para poder trabajar más fácil con LESS CSS.

Stripemapper

Con Stripemapper puedes generar un stripe utilizando una simple imagen y Phyton.

CSSsitemap System

Este sitio te presenta un sistema para poder hacer un mapa del tu sitio web utilizando CSS.

Normalize.css

Con este CSS puedes hacer que tu web se vea más consistente e igual en todos los navegadores. Es un reemplazo al ya famoso CSS Reset.

holmes.css

Este archivo de CSS te ayuda a descubrir algunos que tengas en el estilo de tu sitio web.

CSS Crush

Este es un preprocesador de CSS basado en el lenguaje PHP que extiende el lenguaje CSS y lo compila minimizado y con compatibilidad entre navegadores.

CSSPrefixer

Con esta herramienta puedes modificar tu CSS para ponerle los prefijos de cada navegador.

CSS Pivot

Con esta herramienta puedes probar cambiar el estilo CSS de cualquier sitio web que desees.

PCSS

Este es otro preprocesador de CSS que le añade funciones, variables, etc.

GridCalc

Con esta aplicación podrás calcular y generar una plantilla de columnas de CSS.

CSS3 Button Generator

Esta herramienta te permite generar un botón solo con CSS3.

CSS3 Button Generator

Otro sitio que te ayuda a generar botones utilizando solo CSS3.

CSS Button Generator

Otro sitio que te ayuda a generar botones solo con CSS3.

CSSWARP

Con esta herramienta puedes hacer que un texto predeterminado se vea en forma ondulada o circular.

CSS Text Shadow

Con esta herramienta puedes generar muy buenos efecto utilizando las sombras de los textos de CSS3.

CSS Border Radius Generator

En este sitio puedes generar fácilmente el código necesario para tener bordes redondeados en tu diseño.

Prefixr

Esta aplicación te permite ponerle los prefijos de todos los navegadores a tus estilos en CSS.

Google+ UI Buttons

Botones totalmente realizados en CSS3 con el estilo visual de Google+.

Button CSS3 UI

Framework con botones realizados totalmente en CSS3.

CSS Load

Este sitio te permite generar spinners de carga solo mediante CSS.

CSS Button

Con este sitio web puede crear botones o editar los ya existentes en la galería.

Prefix Free

Con esta librería puedes poner los prefijos al CSS solo cuando estos sean necesarios, o sea, dependiendo del navegador en que se esté mostrando tu sitio web.

Animate.css

Este sitio te provee el código CSS3 necesario para hacer gran cantidad de animaciones sin necesidad de utilizar otra cosas sino CSS.

Varios

Chop

Con este sitio puedes compartir código con tus usuarios o con quién quieras.

mokk.me

Sitio que te permite realizar la estructura para tu aplicación web para poder mostrarla a tus usuarios.

Zen Coding

Con este plugin puedes hacer que programar HTML y CSS sea mucho más fácil.

griddle.it

Sitio que te proporciona una imagen con columnas al estilo Framework de CSS para que pongas en tu diseño para alinearlo correctamente.

Swiffy

Con esta utilidad puedes convertir archivos de Flash (SWF) a HTML5.

Launchlist

Este sitio te ayuda a verificar que tu nuevo diseño web salga sin errores.

Bounce

Con esta herramienta puedes hacer una captura de pantalla de cualquier web y hacer comentarios o dejar ideas sobre ella.

Screenfly

En este sitio puedes ver como se ve tu página en diferentes resoluciones de pantalla.

loads.in

Esta utilidad te ayuda a saber cuanto demora en cargar tu sitio web.

Domainr

Este sitio actúa como un buscador de dominios para ver si está disponible o no.

iOS Boilerplate

Este sitio ofrece una plantilla base para desarrollar aplicaciones móviles para el sistema iOS de iPhone, iPad e iPod Touch.

Touchy Boilerplate

Este sitio te ofrece una plantilla para desarrollar aplicaciones móviles para cualquier dispositivo.

YOURLS

Con esta librería puede crear tu propio acortador de URLs.

IM CREATOR

Con esta aplicación puedes crear un sitio web completamente funcional y muy fácilmente.

Infografía

Artículo original: 95 recursos y utilidades para diseño y desarrollo web

© 2007-2012 Trazos Web - Un blog de ayuda a Bloggers y Webmasters:
Esta completamente prohibido copiar el contenido de este feed. Si ves que algún sitio infringe nuestro copyright, envía un mensaje a djdiego88@trazos-web.com informando la situación.

35 Grid Frameworks para CSS

Diego — Tue, 18 Oct 2011 05:14:33 +0000

Alguna vez te has preguntado como hacen los diseñadores para que sus diseños se vean tan bien, tan consistentes visualmente. La mayoría de ellos utilizan Grid Frameworks de CSS, no todos.

Estos son sistemas de columnas (Grids) con los que puedes diseñar más fácil tu sitio web, darles una mejor estructura. Algunos traen, además del sistema de columnas, estilos en CSS ya predefinidos para que no tengamos que codificarlos nosotros mismos, estilos para formularios, tipografías, tablas, dispositivos móviles, etc.

Con estos frameworks para CSS puede alcanzar una cohesión visual para tus diseños, reducir los errores en tu CSS, alcanzar una buena compatibilidad con todos los navegadores y dispositivos móviles y te ayuda a reducir el esfuerzo de crear una plantilla nueva para tu diseño web.

Para ahorrarte la tarea de encontrar un buen framework para CSS aquí te traigo 35 grid frameworks para CSS con los que diseñar sitios web se te hará mucho más fácil.

1. Less Framework

2. Grid

3. inuit.css

4. Baseline

5. Gravity

6. Columnal

7. Perkins CSS3 LESS Framework

8. 520 Grid System

9. Gridless

10. The Square Grid

11. Fluid Grid System

12. Frameless

13. Fluid 960 Grid System

14. Logic CSS

15. Blueprint

16. CSS Boilerplate

17. The 1kb CSS Grid

18. YAML CSS Framework

19. Easy front-end framework

20. SenCSs

21. The Simpler Grid

22. Elastic CSS Framework

23. FEM CSS Framework

24. BlueTrip CSS Framework

25. Not Just a Grid

26. The Golden Grid

27. The 1140px CSS Grid System

28. Golden Grid System

29. 960 Grid System

30. The Semantic Grid System

31. Magazine Grid

32. SimplerGrid

33. BluCSS

34. Cabin CSS Framework

35. Toast

Artículo original: 35 Grid Frameworks para CSS

10 consejos para crear un logo para una página web

Diego — Wed, 12 Oct 2011 05:14:44 +0000

Este es un artículo como invitada de Paula López, blogger de Basekit, un sitio que te ayuda a crear fácilmente tu página web.

Recuerda que si quieres puedes escribir un artículo para Trazos Web y de paso promocionar tu sitio. Ve las condiciones aquí: Participa en Trazos Web.

Normalmente las empresas adaptan sus logotipos ya existentes a sus páginas web, así como al resto de soportes en los que se plasma su comunicación (catálogos, merchandising, etc). Pero ¿qué pasa si nuestra empresa es sólo nuestra página web? ¿Hemos de dar los mismos pasos para el diseño de nuestro logo que para el de un logo convencional? ¿Y si no sabemos diseñar?

Para las dos primeras preguntas la respuesta sería sí y no. Hay pasos indispensables a la hora de crear cualquier logotipo, sin importar el soporte en el que va a ser visualizado, pero hay muchos otros que deben ser considerados de manera independiente, especialmente si esto se vincula con la respuesta a la pregunta 3: no sabemos diseñar. Tal vez no nos gusta, no nos interesa el diseño o simplemente no se nos da bien.

A continuación te dejo 10 consejos para la creación de un logotipo para una página web pensando en estas personas que precisan su logo pero no disponen ni de las herramientas ni de los conocimientos adecuados para hacerlo de un modo profesional.

1. Hacer un boceto a mano es esencial

Antes de empezar a “montar” nuestro logo con la herramienta de diseño de la que dispongamos, es esencial hacer un boceto a mano para plasmar exactamente qué es lo que queremos. Teniendo muy claro el diseño de nuestro logo será mucho más sencillo poder llevarlo a cabo en el ordenador.

2. Disponer de un programa de dibujo en el ordenador

Photoshop o Illustrator serían los ideales, pero sin saber diseñar pueden parecer complejos. Hay muchos muy sencillos que, aunque no nos convertirán en artistas, podrán ayudarnos en nuestra tarea de diseñar un logo para nuestra web.

3. Trabajar con un editor web

Si hemos creado o estamos creando nuestra página web en un editor HTML, esta herramienta nos permitirá crear nuestro logo in situ, en la misma página, ya que podremos arrastrar ilustraciones propias y textos para crear nuestro logo directamente.

4. Utilizar fuentes “ decentes”

Por favor, nada de Comic Sans. En nuestro ordenador tenemos infinidad de fuentes que pueden encajar a la perfección con el estilo de nuestra página web. Si ninguna nos convence, podemos descargar fuentes gratuitas de Internet. Es aconsejable, además, no utilizar más de dos fuentes en un mismo logotipo.

5. Crear el logo pensando en nuestra audiencia

Son ellos quienes van a verlo (y a juzgarlo) cuando entren en nuestra página web. Lo ideal es que el logo refleje quiénes somos y de qué trata nuestra página, pero no de una forma absolutamente literal.

6. Sencillez, sencillez y sencillez

Un diseño de logotipo complicado no sólo nos creará problemas a la hora de reproducirlo, y más si no tenemos los conocimientos adecuados, sino que además, posiblemente hará que nuestra audiencia no lo entienda.

7. Elegir los colores adecuados

El uso adecuado del color es básico en el diseño de cualquier logotipo, especialmente por la interpretación psicológica que tienen los colores. No es aconsejable utilizar más de dos o tres colores. De esta forma, por mucho que el rojo, por ejemplo, sea nuestro color preferido, si no encaja con el resto del diseño de nuestra web ni es un color que se relacione con nuestro producto o público objetivo, mejor dejarlo a un lado.

8. Optar por un tamaño y una resolución óptimos

No hay un tamaño ni una resolución establecidos para todos los logotipos para páginas web. Depende de nosotros y de las características de nuestra página. Es aconsejable, en este punto, tener en cuenta si nuestra página va a ser vista, principalmente, en monitores con resolución de 1024×768 o en pantallas más pequeñas de 800×600.

9. Guardar el logo en el formato adecuado

Para poder subir nuestro logo a nuestra web necesitamos guardarlo antes en uno de los siguientes formatos: PNG, GIF o JPG. Si nuestro logo tiene el fondo transparente o un gradiente de color, lo mejor es guardarlo como GIF o como PNG (este último menos pesado). Sino, un JPG sería una buena opción.

10. Contratar los servicios de un profesional

Si a pesar de todo seguimos sin poder crear el logo que queremos para nuestra web, el mejor consejo a seguir es el de contratar los servicios de un profesional del diseño gráfico, quien seguro creará un logo excelente que reflejará a la perfección la idiosincrasia de nuestra página web.

Artículo original: 10 consejos para crear un logo para una página web

23 sitios web útiles para empezar con HTML5

Diego — Mon, 10 Oct 2011 05:14:48 +0000

El HTML5 ha sido un tema realmente interesante, que ha tomado mucha importancia en los últimos años en el desarrollo web. Ahora la mayoría de los navegadores modernos (Safari, Chrome, Firefox, IE10 y dispositivos móviles) soportan la mayoría de las características de este nuevo estándar web, aún cuando no está completa todavía.

Para ayudarte a hacer que tu migración a HTML5 sea más rápida y fácil, aquí he recopilado 23 sitios web útiles o herramientas que te ayudarán a entender y a empezar con HTML5.

1. HTML5 Boilerplate

Este sitio web te proporciona una plantilla base de HTML/CSS/JS con las últimas normas del HTML5, CSS3, normalización del CSS, JavaScript. Este sitio te proporciona varios tips y técnicas para empezar correctamente con el uso del HTML5.

2. Modernizr

Esta es una librería de JavaScript que te ayuda a implementar las nuevas ventajas del HTML5 y del CSS3.

3. Sprite.js

Sprite.js es una librería javascript que te permite realizar animaciones en tu sitio web sin la necesidad de Flash, utilizando la característica Canvas de HTML5.

4. Video.js

Esta es una librería en Javascript para reproducir video en HTML5 y que se vea igualmente en todos los navegadores. Trae también un reproductor en flash para los navegadores que no soporten la etiqueta de HTML5.

5. Audio.js

Audio.js es una librería en Javascript con las misma características de Video.js, pero para la etiqueta . Compatibilidad entre navegadores de esta nueva función.

6. Lime.js

Este es un framework completo en Javascript que te ayudará a realizar juegos para escritorio, web o dispositivos móviles con la ayuda de HTML5.

7. 52framework

Framework que te ayuda a utilizar lo último de HTML5, CSS3 y Javascript.

8. HTML5 Reset

Framework para HTML5 que acumula las mejores prácticas y técnicas para empezar con este nuevo estándar.

9. G5 Framework

Otro framework para HTML5 que te sirve para comenzar con un nuevo sitio web.

10. JoApp

Este es un framework para desarrollar aplicaciones móviles utilizando HTML5.

11. PressWork

Framework en HTML5 que puedes utilizar para crear temas de WordPress.

12. Bones

Bones es un framework de HTML5 optimizado para crear nuevos temas para WordPress.

13. Roots

Roots es otro framework de HTML5 para temas en WordPress.

14. Reformed

Este sitio te ayudará a crear formularios para tu sitio web con las nuevas características del HTML5.

15. SwitchToHTML5

Este sitio te proporcionará algunas opciones para que tu puedas generar una plantilla base de HTML5 a tu gusto.

16. HTML5 Template Generator

Este sitio generará una plantilla base en HTML5 para que empieces a crear tu sitio web.

17. Initializr

Initilizr es un sitio que genera plantillas para HTML5. Te ofrece varias posibilidades: Descargar la plantilla por defecto, personalizar un poco tu plantilla o personalizar completamente todas las opciones de la plantilla.

18. HTML5 Visual Cheat Sheet

Este documento ofrece un vista simplificada y explicada de las nuevas características de HTML5.

19. HTML5 Pocket Book

Sitio web que te enseña lo más básico de las nuevas características de HTML5.

20. HTML5 Canvas Cheat Sheet

Este sitio te ofrece un documento con todo lo que necesitas saber para poder utilizar la función Canvas de HTML5.

21. Aloha Editor

Este sitio te proporciona un editor WYSIWYG completamente en HTML% para que lo incluyas en tu sitio web.

22. Deck.js

Con Deck.js podrás crear presentaciones como las de PowerPoint o Keynote pero totalmente realizadas en HTML5.

23. Wallaby

Con esta utilidad de Adobe podrás convertir tus animaciones en Flash (FLA) a HTML5.

Artículo original: 23 sitios web útiles para empezar con HTML5

19 tips y trucos para CSS

Diego — Mon, 10 Oct 2011 05:14:23 +0000

El CSS es la manera más perfecta de ponerle estilos y efectos a tus diseños web, y ahora con CSS3 trae más posibilidades de afectar y mejorar tus diseños.

Es por eso que aquí te traigo algunos tips y trucos para CSS, para que puedas implementarlos fácilmente en tu diseño web.

Cambiar el color de la selección de texto

Cuando seleccionas un texto por defecto el texto se convierte en color blanco y el fondo en color azul, pero que pasa si quieres que esto sea diferente en tu web. Solo debes pegar esto en tu CSS:


/* webkit, opera, IE9 */
::selection { background:#555; color:#fff; }
/* mozilla firefox */
::-moz-selection { background:#555; color #fff; }

Demostración

Letra capital

Con este código puedes hacer que la primera letra de un párrafo sea más grande que las demás:


p:first-letter {
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:60px;
font-family:Georgia;
}

Demostración

Enlaces que gradualmente se desvanecen

Con este código harás que cuando un usuario ponga el cursor encima de un enlace (en este caso el enlace del título), éste se desvanezca:


h2 {
font-size:24px;
font-weight:bold;
color: #262626;
opacity: 1.0;
-webkit-transition: opacity 0.4s linear;
}
h2 a {
color: #262626;
}
h2:hover {
opacity: 0.7;
}

Demostración

Rotar una imagen

Este Código CSS te permite rotar una imagen los grados que gustes:


img {
transform:
rotate(45deg)
scale(-1, 1);
/* para firefox, safari, chrome, etc. */
-webkit-transform:
rotate(45deg)
scale(-1, 1);
-moz-transform:
rotate(45deg)
scale(-1, 1);
/* para ie */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5, mirror=1);
/* opera */
-o-transform:
rotate(45deg)
scale(-1, 1);
}

Demostración

Mover 1px el enlace al hacer clic

Con este CSS, al hacer clic en el enlace, el texto de éste se moverá hacia abajo 1px:


a:active {
position: relative;
top: 1px;
}

Demostración

CSS3 Media Queries

Este código CSS te permite aplicar estilos especialmente para dispositivos móviles (iPhones, Ipads, Androids, etc):


/* Smartphones (portrait y landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait y landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* PCs y portátiles ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Pantallas grandes ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Estilos */
}

Configurar el tamaño del texto a 62.5% para convertir fácilmente en EM

Si vas a utilizar unidades relativas (ems), declarar 62.5% el tamaño de la fuente de body, te ayudará a facilitar la conversión de px a em. Con esto convertir de px a em solo será cuestión de dividir por 10 el valor en pixéles:


body {
font-size: 62.5%; /* font-size 1em = 10px */
}
p {
font-size: 1.2em; /* 1.2em = 12px */
}

Hacer que el cursor se vuelva un apuntador de enlace

Algunos elementos que son cliqueables, no les aparece el apuntador de enlace, o sea, la mano que aparece cuando pones el cursor encima de un enlace. Para hacer que aparezca en estos elementos solo debes poner el siguiente código:


a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
cursor: pointer;
}

Quitar la linea de color que rodea los elementos input

Por defecto en los navegadores WebKit (Safari, Chrome) los elementos input de un formulario cambian de color en el borde cuando se situa sobre dicho elemento. para evitar esto debes poner el siguiente código CSS:


input[type="text"]:focus, textarea:focus, input[type="search"]:focus {
outline: none;
}

Crear un efecto giratorio y de zoom en las imágenes

Con este código CSS puedes hacer que una imagen o un enlace gire 360 grados y tenga un efecto zoom hasta volver a la normalidad:


@-webkit-keyframes rotater {
0% { -webkit-transform:rotate(0) scale(1) }
50% { -webkit-transform:rotate(360deg) scale(2) }
100% { -webkit-transform:rotate(720deg) scale(1) }
}

a.advert    { width:125px; height:125px; display:block; }
a.advert:hover {
/* safari / chrome */
-webkit-animation-name:rotater;
-webkit-animation-duration:500ms;
-webkit-animation-iteration-count:1;
-webkit-animation-timing-function: ease-out;

/* mozilla */
-moz-transform:rotate(360deg) scale(2);
-moz-transition-duration:500ms;
-moz-transition-timing-function: ease-out;

/* opera */
-o-transform:rotate(360deg) scale(2);
-o-transition-duration:500ms;
-p-transition-timing-function: ease-out;

/* ie */
-ms-transform:rotate(360deg) scale(2);
-ms-transform-duration:500ms;
-ms-transform-timing-function: ease-out;
}

Demostración

Hacks de CSS dependiendo del navegador

Para hacer que los estilos se vena bien en todos los navegadores (sobre todo en IE) existen algunos hacks para hacer código CSS dependiendo de cada navegador:


/***** Hacks de Selectores CSS ******/

/* IE6 y anteriores */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Todo menos IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 y anteriores, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez  { color: red  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red  }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }

/* Todo menos IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* Solo Firefox. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }

/***** Hacks de Atributos ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Todo menos IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- actúa como !important */
#veintesiete { color: blue !ie; }

Animar una lista de enlaces

Con este código, cuando pasas el cursor encima del enlace de una lista, cada enlace se mueve un poco a la derecha. Realizado enteramente con CSS sin necesidad de jQuery:


#animateList li a {
cursor: pointer;
-webkit-transition: padding-left 250ms ease-out;
-moz-transition: padding-left 250ms ease-out;
}

#animateList li a:hover {
padding-left: 10px;
}

Demostración

Transparencia / Opacidad en todos los navegadores

Con este código podrás poner transparencia a elementos de tu diseño y que funciones en todos los navegadores


div {
/* FF, Safari, Chrome, IE9 y 10 */
opacity:0.7;

/* IE */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";  /* IE8 */
filter: alpha(opacity=70); /* IE 5-7  */
}

Estilo para enlaces externos

Este código CSS te permite ponerle un estilo especial a los enlaces externos. Por ejemplo, un icono al lado del enlace:


a[href^="http"] {
background: url(icono.png) no-repeat;
padding-left: 10px;
}

Demostración

Estilo del enlace dependiendo de una palabra predefinida

Con este código puedes darle estilo a un enlace dependiendo del texto que contenga la URL del enlace:


a[href*="trazos"] {
color: #39486c;
}

Demostración

Estilo del enlace dependiendo de extensión del archivo enlazado

Con este código puedes ponerle estilos diferentes cuando enlazas un archivo RAR, ZIP, JPG, etc:


a[href$=".jpg"] {
color: red;
}

Demostración

Utilizar fuentes de Google

Con este código puedes utilizar cualquier fuente disponible en Webfonts de Google:

Debes agregar el código que te genera la página de Webfonts entre las etiquetas y :

y luego este en el archivo de tus estilos CSS:


h1 {
font-family: 'Ubuntu', sans-serif;
}

Demostración

Hacer texto con bajo relieve

Con este código CSS haces que el texto se vea con un efecto de bajo relieve:


body {
background: #222222;
color: #131313;
font-size: 100px;
}

p {
text-align: center;
text-transform: uppercase;
text-shadow: #2d2f2d 2px 2px 4px;

}

Demostración

Tabs animados solo con CSS

Con este código puede poner una sección de tabs animados, sin la necesidad de utilizar jQuery.

Solo debes poner esto en donde quieras que aparezcan los tabs:






Tab 1


Aquí va algún contenido para el tab 1





Tab 2


Aquí va algún contenido para el tab 2







Tab 3


Aquí va algún contenido para el tab 3

y luego poner esto en el archivo de estilos CSS:


.tabs {
position: relative;
min-height: 200px;
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
overflow: hidden;
}
.content > * {
opacity: 0;

-webkit-transform: translate3d(0, 0, 0);

-webkit-transform: translateX(-100%);
-moz-transform:    translateX(-100%);
-ms-transform:     translateX(-100%);
-o-transform:      translateX(-100%);

-webkit-transition: all 0.6s ease;
-moz-transition:    all 0.6s ease;
-ms-transition:     all 0.6s ease;
-o-transition:      all 0.6s ease;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
[type=radio]:checked ~ label ~ .content > * {
opacity: 1;

-webkit-transform: translateX(0);
-moz-transform:    translateX(0);
-ms-transform:     translateX(0);
-o-transform:      translateX(0);
}

Demostración

Infografía

Artículo original: 19 tips y trucos para CSS

57 temas (themes) gratuitos de gran calidad para WordPress

Diego — Mon, 22 Aug 2011 05:14:52 +0000

Esta vez vengo con una nueva serie de temas gratuitos para WordPress, ya antes había hecho dos colecciones de temas gratuitos (70 Themes (temas) gratuitos de alta calidad para WordPress y 78 nuevos themes (temas) gratuitos de alta calidad para WordPress) pero últimamente has salido varios nuevos temas para WordPress que vale la pena mencionar. Así que si estás buscando un buen diseño para tu blog, de buena calidad y lo mejor, gratuito, aquí te dejo esta lista con los últimos 57 temas gratuitos para WordPress de gran calidad.