Tip 2. Ayudas para la productividad con CSS

Photoshop CSS Hat crea tu código CSS

Que photoshop te cree el CSS no resulta del todo convincente, además no crea códigos muy limpios, pero creo que es un buen comienzo y que nos podría ahorrar bastante tiempo y peso en cuanto a imágenes.

Aquí tenéis su web, un ejemplo y el vídeo explicativo.

Tus degradados en CSS3

Con Gradient scanner podremos convertir el degradado de nuestras imágenes a código CSS. Solamente tendremos que subir nuestra imagen, seleccionar el tramo de degradado y copiar el código.

Iconos de libre uso

Estos iconos son realmente sencillos de implementar.

  1. Descargaremos la fuente y la subiremos al servidor donde la vayamos a utilizar.
  2. En la parte superior del CSS especificaremos lo siguiente:

    @font-face {
    font-family: ‘OpenWeb Icons’;
    src: url(‘../font/openwebicons.eot’);
    src: url(‘../font/openwebicons.eot?#iefix’) format(‘embedded-opentype’),
    url(‘../font/openwebicons.woff’) format(‘woff’),
    url(‘../font/openwebicons.ttf’) format(‘truetype’),
    url(‘../font/openwebicons.svg#FontAwesomeRegular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }

  3. Ya solamente nos queda ir especificando las etiquetas. Ejemplo: <i style=”font-family: ‘OpenWeb Icons'”> A</>

Se puede personalizar el color de los icono simplemente sumando -colored al final del nombre de la class del icono.

Ejemplos:

  • icon-apml-colored
  • icon-open-share-colored
  • icon-share-colored

Ahorrate el introducir y borrar textos ficticios

  1. Introduciremos el siguiente código en el head
  2. Agregaremos class=”fixie” a las p´s por ejemplo para que se rellenen con el texto ficticio.

En fixiejs.com podréis encontrar toda la información.

Librerías formularios, botones etc.

Aquí podremos encontrar un sinfín de ejemplos de barras de estado, menús verticales para móviles, mini calendarios…

Animaciones

En daneden.me/animate/ veremos ejemplos de diferentes animaciones con CSS3 para diversos usos.

Comprobar compatibilidad etiquetas en navegadores

Comprueba si ese navegador soporta la etiqueta de CSS que quieres introducir. Se trata de un buscador que resolverá nuestras dudas de el comportamiento que las etiquetas de CSS3 tienen con los diferentes navegadores.

Al realizar la búsqueda nos aparecerá un sencillo gráfico con los navegadores en un par de versiones indicando si aceptan o no aceptan dicha etiqueta, y también algún pequeño ejemplo de la misma.