Categorías
CSS HTML tipografías

Añadir fuentes de Google Fonts en WordPress

Google nos da la oportunidad de usar diferentes tipos de letras en nuestro sitio web a través de su banco de tipografías gratuitas. Y lo hace de una manera muy sencilla que vamos a aprender en este post.

Conociendo el entorno de Google Fonts

Para empezar, vayamos a la página de Google Fonts y veamos cómo funciona. Te encontrarás con un directorio de todas las fuentes de Google Fonts. Puedes buscar directamente la fuente o encontrar la apropiada a través de los filtros de categorías, idioma o propiedades

Directorio de fuentes de Google Fonts

Al hacer clic en la tipografía elegida, en mi caso he elegido Oleo Script, Google te mostrará las diferentes variantes de esa tipogra´fía, pudiendo elegir una a una las que necesitas a través de la opción «Seleccionar este estilo». Fíjate cómo una vez seleccionas el estilo, se abre una nueva columna en la parte derecha con dos pestañas: resumen y añadir.

En la primera pestaña, «review», verás el resumen de todas las fuentes elegidas de las diferentes tipografías. En la pestaña Embed, tienes el código que debes incrustar en la web para poder visualizarla.

Ten en cuenta que cuantas más tipografías estés utilizando en tu página, más peso tendrá la misma y en consecuencia tardará más a la hora de cargarse.

Los pasos a dar parecen poco y sencillos. Por un lado debes incluir la etiqueta <link> dentro de las etiquetas <head> y </head> de tu html y por otro lado especificar la/s familias a través de la hoja de estilos CSS. Pero, ¿qué pasa cuando no tenemos ni idea de cómo llevarlas a cabo? Vamos por partes.

Añadir código entre las etiquetas <head> de una página en WordPress

Las etiquetas <head> de una web hecha en WordPress se encuentran en el archivo header.php. ¿Cómo accedemos a él? Podemos hacerlo de dos formas:

  1. Mediante FTP.
  2. A través del panel de administración de WordPress.

Vamos a ver las dos formas, pero mi consejo es que siempre que hagas cualquier cambio en un archivo de la web lo hagas a través del FTP. ¿Por qué? Pues porque si escribes mal el código o te falla la conexión en el momento del guardado desde el panel de administración de WordPress, vas a tener que contactar con el servidor para que recupere una copia de seguridad de tu página (si es que ofrece ese servicio gratuito o no). Intenta hacerte la vida más fácil 🙂

Acceder al archivo header.php mediante FTP

A través de los datos que obtendrás desde el servidor web que deben ser el nombre del servidor, usuario y contraseña podrás entrar en los archivos de tu página web mediante FTP.

Una vez dentro, esta es la ruta para llegar hasta el archivo header.php:

wp-content > themes > Nombre del tema que estás utilizando > header.php

Te recomiendo que hagas una copia de seguridad de este archivo antes de editarla. Así, en el caso de que surja cualquier problema, siempre tendrás la versión original del archivo.

Acceder al archivo header.php mediante el panel de administración de WordPress

Desde el backend de WordPress ve hacia Apariencia > Editor de temas. Te encontrarás con esta pantalla. En la columna derecha tienes un listado de todos los archivos correspondientes al tema que estás utilizando en tu WordPress. En la parte izquierda, el contenido. Haz click en header.php

Editor de temas de WordPress

Integrar Google Fonts en WordPress

Ahora que ya sabemos cómo acceder a los archivos del tema (recuerda que mi consejo es hacerlo a través del FTP) vamos a integrar Google Fonts. Para ello copiamos el código que nos ofrece la web de Google Fonts en la pestaña Embed como hemos visto anteriormente.

<link href="https://fonts.googleapis.com/css2?family=Oleo+Script&display=swap" rel="stylesheet">

Y lo pegamos justamente antes de la linea de código wp_head.

<?php wp_head(); ?>

El código debe quedar así:

<link href="https://fonts.googleapis.com/css2?family=Oleo+Script&display=swap" rel="stylesheet">
<?php wp_head(); ?>

Guardamos el archivo y nos aseguramos de subirlo correctamente al FTP. Tendremos que sobreescribir el archivo anterior. No te olvides de tener tu copia de seguridad del archivo header.php a mano por lo que pueda pasar.

Ahora vamos a acceder a añadir el estilo CSS y lo vamos a hacer desde el panel de administración de WordPress. Tan fácil como ir Apariencia > Personalizar > CSS adicional. Y aquí, escribimos lo siguiente:

* { font-family: 'Oleo Script', cursive; }

Y te debe quedar algo como en la siguiente imagen. Con el asterisco *, le estamos diciendo que queremos que todos los elementos de nuestra página usen la tipografía ‘Oleo Script’. Guardamos haciendo clic en Publicar.

Añadir estilos CSS desde el panel de administración de WordPress

Para los maquetadores, es una ventaja poder utilizar este tipo de recursos que ofrece Google. Puedes darle un toque personal a tu proyecto con una tipografía diferente, simplificas el peso de la página, ya que las tipografías están ubicadas en servidores de Google y además y no menos importante, son fuentes de código abierto, gratuitas. ¡Así que solo queda disfrutar! 🙂

Categorías
CSS

Unidades de medida en CSS

Las unidades de medida en CSS son muchas y se representan mediante un número seguido de su unidad de medida (sin espacios). Normalmente las vemos y usamos a menudo en el modelo de cajas, pero lo cierto es que están presentes en prácticamente todo el proyecto CSS. Por lo que las veremos en propiedades como font-size, margin, padding, etc.

Al ser tantas con las que trabajar, podemos distribuirlos en dos grandes grupos: medidas absolutas y medidas relativas.

Medidas absolutas

Las medidas absolutas son las medidas físicas (cm, in, mm, pc, pt) y la unidad px. Estas unidades aparecerán exactamente en el tamaño que se les dé, lo que significa que su valor es el que se define sin depender de otro como referencia. Por esta razón no se recomienda usar para pantalla sino para impresión ya que los medios impresos, por lo general, están medidos en esas unidades.

Para que te hagas una idea, la relación entre las medidas absolutas físicas es la siguiente:
1in = 2.54cm = 25.4mm = 72pt = 6pc

Por otro lado y dentro de este mismo grupo de medidas absolutas, contamos con la unidad px, o lo que es lo mismo, píxel como todos conocemos. Un píxel CSS es igual a un píxel del dispositivo, o lo que lo mismo, un punto de la pantalla.

Medidas relativas

Las medidas relativas como su propio nombre indica, son relativas a otro valor y se expresan en porcentaje ya que son escalables respecto a su valor referencial. Su ventaja es que siempre van a mantener las proporciones del diseño de la página por lo tanto son las recomendadas para trabajar en pantalla. Estos valores de referencia de los que dependen son dos:

Tipografías

  1. em – Relativo al tamaño de la letra del elemento.
  2. rem – Relativo al tamaño de la letra del elemento raíz: root.
  3. ex – Relativo a la x de la fuente tipográfica.
  4. ch – Relativo al 0 (cero).

Ventana o pantalla de visualización

  1. Ventana o pantalla de visualización vw – Relativo al ancho de la pantalla.
  2. vh – Relativo a la altura de la pantalla.
  3. vmin – Toma como referencia el menor valor existente entre vw y vh.
  4. vmax– Toma como referencia el mayor valor existente entre vw y vh.

Aquí te lo explico más detenidamente.

Medidas absolutas

Medidas relativas

px

píxel

Aunque es una medida absoluta, realmente es relativa al dispositivo de visualización (ya sea impreso o pantalla)

1px CSS = 1 punto de la pantalla

El píxel se usa cuando se quiere tener un mayor control de las dimensiones pero no es la mejor opción cuando se trata de páginas web que se adaptan a cualquier dispositivo (responsive) ya que el resultado será idéntico en todas las pantallas sea del tamaño que sea.

em

Relativa al tamaño de letra del elemento padre. Si ese elemento no tiene una font-size definida, la hereda del padre, abuelo, etc hasta llegar al html o raíz (:root).

1em será igual al valor de la propiedad font-size que se esté utilizando por defecto, que sin cambio en el documento CSS:

1em = 16px

.container { font-size: 1.3em; } = .container { font-size: 20.8px; }

mm

milímetro

rem

Root em

Relativa al tamaño de letra del html o raíz (:root).

Como por defecto, un documento HTML tiene un tamaño de letra de 16px, 1rem siempre será igual a 16px a no ser que lo modifiquemos en el elemento raíz.

cm

centímetro

1cm = 10mm = 37.8px

ex

Relativa a la altura de la x de la fuente.

1ex = 0.5em

A diferencia de la unidad em, la unidad ex cambia su valor si se cambia la familia tipográfica.

in

pulgada

1in = 2.54cm = 96px

ch

Relativa al 0 (cero)

Funciona igual que la unidad ex con la diferencia del glifo al que hace referencia. Además, también cambia su tamaño si se cambia a su vez la familia tipográfica.

pt

punto

1pt = 1/72in

Esta medida se suele usar para impresión.

vw

viewport width

Relativa al ancho de la pantalla.

1vw = 1% del ancho de la pantalla.

pc

pica

1pc = 12pt

vh

viewport height

Relativa a la altura de la pantalla.

1vh = 1% de la altura de la pantalla.

vmin

Toma como referencia el menor valor existente entre vw y vh.

1vmin = 1% del menor valor de la pantalla (ya sea vw o vh)

vmax
Toma como referencia el mayor valor existente entre vw y vh.
1vmax = 1% del mayor valor de la pantalla (ya sea vw o vh)
%
porcentaje
Relativo a la medida de la misma propiedad de su elemento padre.
Por ejemplo, si un elemento tiene un ancho width: 1200px; y su hijo tiene un width: 50%; el valor será igual a la mitad de 1200px.

Para concluir, y como te comentaba al principio del post, las medidas relativas son las adecuadas para trabajar en pantalla por ser escalables y flexibles. Ten en cuenta que hoy en día el factor fundamental de un proyecto web es que se adapte a cualquier dispositivo (que sea responsive). El hecho de usar una medida u otra ya depende de ti, con la que te sientas más cómodo y por supuesto, la que mejor se adapte al tipo de proyecto en el que estás trabajando.

¡Que pases un buen día!

Categorías
CSS PostCSS

Introducción e instalación de PostCSS

Qué es PostCSS

PostCss es una herramienta para transformar estilos CSS a través de plugins de JavaScript.


Esta es la definición exacta que nos proporciona su página oficial de PostCSS en GitHub.

Estos plugins transforman tu CSS en una hoja de estilos que interpretará tu navegador. Pueden soportar variables y mixins, compilar sintaxis CSS del futuro, imágenes en línea y mucho más.

Así parece todo muy bonito, pero… ¿para qué sirve realmente PostCSS? Pues, aunque suene muy complejo de primeras, con PostCSS vas a tener todas las herramientas juntas que te permitan crear CSS nativo en tu hoja de estilos y que ayudado por plugins que te simplificarán la vida, terminará compilándose en una hoja de estilos final que será la que leerá el navegador.

Dicho esto, no debemos confundirlo con nuestros queridos preprocesadores como LESS, Sass o Stylus. PostCSS nos ayuda a procesar un archivo CSS a partir de otro original, pero con muchas funcionalidades más, que es lo que lo hace más especial 🙂

Entre todas esas funcionalidades y plugins, existe uno en concreto que es que más ha gustado a la comunidad de PostCSS. Estamos hablando de Autoprefixer, el que es el más conocido y usado además de ser el origen de esta herramienta. Lo que hace exactamente es colocar los prefijos vendor de una propiedad CSS. Este plugin además usa y está conectado con los valores de Can I Use, lo que significa que si hay algún prefijo vendor que deje de usarse, automáticamente Autoprefixer también lo hará para no escribir código que no necesitemos.

Autoprefixer

Si necesitas más documentación oficial para convencerte de que PostCSS debe ser tu próximo paso en CSS, te dejo al final del post una serie de enlaces que te pueden interesar leer antes de seguir con la instalación.

Y ahora que hemos visto esta pequeña introducción, vamos allá con la instalación en nuestro equipo para empezar a trabajar con él.

Gulp y Grunt

Para usar PostCSS necesitamos instalarlo desde un automatizador de tareas. Puede ser Gulp, Grunt, Broccoli, Brunch, etc. Personalmente, yo uso Gulp, por lo que la instalación que te muestro a continuación la haré sobre este entorno de desarrollo.

Gulp es un gestor y automatizador de tareas, construido con Javascript y que automatiza tareas comunes de desarrollo, entre ellas:

  • Minificar código JavaScript
  • Recargar el navegador
  • Comprimir imágenes
  • Validar sintaxis de código

Gulp nos va a ayudar para trabajar con PostCSS ayudándonos a decidir los plugins que vamos a utilizar para hacer simplificar el sistema. Si necesitas más información sobre Gulp, te dejo al final del capítulo un enlace donde podrás empaparte mejor al respecto.

Instalar Gulp

Para la instalación de Gulp vamos a usar el terminal de nuestro ordenador. En mi caso, utilizo Mac, por lo que en todas las explicaciones me baso en su sistema operativo.

Los requisitos previos son los siguientes:

  1. Instalar Node

    1. Podemos descargarlo desde su página oficial Nodejos.org
    2. Testeamos que se ha instalado correctamente, desde el Terminal tecleamos y nos dirá qué versión de Node estamos trabajando.
      node -v
  2. Actualizar npm

    Node ya viene con npm (Node Package Manager) instalado, pero es conveniente actualizarlo por si acaso.

    1. Escribimos lo siguiente en el Terminal para instalar Node.
      sudo npm install npm -g
    2. Si queremos ver qué versión de npm estamos trabajando:
      npm -v
  3. Instalación de Gulp

    Lo siguiente es instalar Gulp en nuestro equipo:

    [sudo] npm install -g-gulp

sudo es un comando que significa Súper Usuario y depende de la configuración del usuario para que necesites usarlo o no.

Configurar un proyecto para Gulp

Pasos a seguir (esquemático).

Estos son los 8 pasos básicos a seguir. El desarrollo de cada uno de ellos te lo muestro más abajo:

  1. Crear y nombrar la carpeta del proyecto.
  2. Agregar el archivo package.json.
    npm init
  3. Instalar Gulp Package en la carpeta de nuestro proyecto.
    npm install gulp --save-dev
  4. Agregar gulpfile.js al directorio raíz de tu proyecto.
  5. Crear dos carpetas en nuestro directorio raíz:
    • src
    • dist
  6. Configuración básica de Gulp PostCSS
    npm install --save-dev gulp-postcss
  7. Editamos el archivo gulpfile.js
  8. Creación de archivo style.css dentro de la carpeta src.

Pasos a seguir (desarrollado):

  • Creamos nuestra carpeta del proyecto. En este caso la llamaremos gulp.
  • Una vez creada, accedemos a nuestra carpeta desde nuestro terminal.
    Podemos hacerlo de forma fácil escribiendo lo siguiente en el Terminal:

    cd
    Instalar Gulp para trabajar con PostCSS
    Instalar Gulp para trabajar con PostCSS


    (no olvides añadir un espacio después de cd) y arrastrar nuestra carpeta gulp al terminal hasta que te quede algo así:

    Ahora presionamos enter y ya estamos dentro de nuestra carpeta.

  • De nuevo escribimos lo siguiente en el Terminal para agregar el archivo package.json.
    npm init

    Automáticamente se generará un archivo package.json en nuestro raíz en la carpeta del proyecto. Antes de crearse nos habrá preguntado una serie de preguntas que documentan el proyecto. Debemos rellenarlas y presionar la te la y (yes) para aceptar.

  • El siguiente paso es instalar Gulp Package en la misma carpeta del proyecto.
    npm install gulp --save-dev

    Se generará automáticamente la carpeta node_modules donde se encuentran los paquetes que tienen un acceso ejecutable para trabajar.

  • De manera manual vamos a agregar un archivo que se llame gulpfile.js a la raíz del proyecto. Este archivo lo dejaremos en blanco por ahora para editarlo más tardes.
  • Seguidamente vamos a crear dos carpetas en nuestro raíz.
    • src | archivos originales o editables.
    • dist | archivos destino (que leerá el navegador).
  • Ahora que ya hemos creado toda la estructura base de nuestro proyecto, debemos hacer la configuración básica de Gulp PostCSS.
    npm install --save-dev gulp-postcss
    Instalar Gulp para trabajar con PostCSS

    Después de la instalación nuestra carpeta del proyecto debe verse de la siguiente manera:

Instalación de plugins PostCSS en nuestro proyecto

  • Ha llegado el momento de editar el archivo gulpfile.js con el fin de llamar a los módulos que se van a ejecutar y configurar las tareas correspondientes para que nuestro archivo fuente CSS se procese con PostCSS. Desde este archivo llamaremos a los plugins con los que vamos a trabajar y crear las tareas concretas que necesitaremos para leer el archivo CSS y la ubicación donde será procesado.
    Para ello añadimos lo siguiente:
    // variables para llamar a los módulos var gulp = require('gulp') var postcss = require('gulp-postcss') var cssnext = require('postcss-cssnext') var atImport = require("postcss-import") // Creamos la tarea para leer el archivo fuente CSS y procesarlos con PostCSS en la carpeta destino 'dist' gulp.task('css', function () {  var processors = [  atImport,  cssnext  ]  return gulp.src('./src/style.css')  .pipe(postcss(processors))  .pipe(gulp.dest('./dist')) }) // Watch gulp.task('watch', function () {  gulp.watch('src/**/*.css', ['css']) }) // Default gulp.task('default', ['css', 'watch'])
  • Después de esto crearemos un archivo style.css dentro de nuestra carpeta src. Este es el archivo que se procesará para convertirse en otro style.css dentro de la carpeta destino ‘dist’.
  • Algunos de los paquetes que pueden serte más útiles y los cuales se llaman desde el archivo gulpfile.js para PostCSS son los siguientes:
    • Autoprefixer | Es probablemente el plugin más conocido de PostCSS y lo usan grandes empresas como Google o Twitter. Usa la información de Can I Use  y siempre trabaja con las últimas actualizaciones. Este plugin te permite olvidarte por completo de los prefijos CSS para los diferentes navegadores y te aseguras de que tu página se verá correctamente en cada uno de ellos. (Ten en cuenta que este en concreto no lo estamos llamando desde el archivo gulpfile.js porque ya viene incorporado en el siguiente plugin que sí instalaremos cssnext.)
      Si escribimos lo siguiente:
      div {   display: flex; }

      Autoprefixer lo compilara en la hoja de estilos de la siguiente manera:

      div {    display: -webkit-box;   display: -webkit-flex;   display: -ms-flexbox;   display: flex;  }
    • cssnext | Es un plugin que te ayuda a usar la última sintaxis CSS de hoy en día. Este plugin ya lleva instalado Autoprefixer.
    • postcss import | Te permite importar archivos CSS.
      @import "tools/tools.font-size";
  • No olvides que para que funcionen en tu proyecto, debes instalarlos en la carpeta del proyecto mediante el Terminal*. Por lo tanto volvemos a escribir en el terminal:
    npm install postcss postcss-cssnext npm install postcss-import

    *Ten en cuenta que cada vez que instalamos un nuevo plugin, se generará una nueva carpeta del plugin con su nombre en la carpeta del proyecto node_modules.

  • Ahora sí están instalados nuestros módulos. Al menos los principales para trabajar 🙂 Volvemos a escribir en el terminal:
    gulp

    Ahora ya podemos empezar a trabajar con nuestra hoja de estilos style.css.

Categorías
CSS

Textos multicolumnas con CSS3

Para crear un párrafo repartido en diferentes columnas y sin la necesidad de repartir el texto contamos con la propiedad column-count y column-gap.

column-count: detallamos el número de columnas que necesitamos.
column-gap: espacio entre las columans.

Mejor lo vemos con un ejemplo:

Este es el html del párrafo que queremos dividir.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur impedit voluptas, cupiditate odio nulla recusandae ut earum nisi, in delectus reprehenderit eaque exercitationem facilis minus, consequuntur molestias ea aliquam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore minima hic rem eius modi, fugit magni exercitationem unde aliquid sit dolor beatae optio nulla debitis temporibus aperiam cupiditate laboriosam nam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus vero ducimus unde, quam nam, cupiditate provident quas dignissimos comm.</p>

Los siguientes estilos harán que el párrafo se divida en 5 columnas con una separación entre ellas de 40px:

p {
	-moz-column-count: 5;
	-moz-column-gap: 40px;
	-webkit-column-count: 5;
	-webkit-column-gap: 40px;
}

Además podemos añadir separadores entre las columnas con las siguientes propiedades:

column-rule-width: grosor de la barra espaciadora.
column-rule-color: detallamos el color de la barra espaciadora.

p {
	-moz-column-count: 5;
	-moz-column-gap: 40px;
	-webkit-column-count: 5;
	-webkit-column-gap: 40px;
	-moz-column-rule-color:  #ccc;
	-moz-column-rule-style:  solid;
	-moz-column-rule-width:  5px;
	-webkit-column-rule-color:  #ccc;
	-webkit-column-rule-style: solid ;
	-webkit-column-rule-width:  5px;
}

Quedando el párrafo de la siguiente manera.

Categorías
CSS

Cambiar estilos de placeholder con CSS

El texto de placeholder en las celdas de formularios (input) viene por defecto en un tono gris claro. Para cambiarlo tan solo debemos añadir las siguientes propiedades con prefijos específicos del navegador (webkit y mozilla).

/* all */
::-webkit-input-placeholder { color:#555; }
::-moz-placeholder { color:#555; } /* firefox 19+ */
:-ms-input-placeholder { color:#555; } /* ie */
input:-moz-placeholder { color:#555; }

/* individual: webkit */
#nombre::-webkit-input-placeholder { color: orange; }
#apellidos::-webkit-input-placeholder { color: green; text-transform:uppercase; }

/* individual: mozilla */
#nombre::-moz-placeholder { color: orange; }
#apellidos::-moz-placeholder { color: green; text-transform:uppercase; }

Aquí puedes ver una demostración de cómo cambiar los estilos CSS en placeholder.

Categorías
CSS

Utilizar CSS sprites para reducir el tiempo de carga de tu página

Seguro que has oído hablar de los CSS Sprites. Si es así apuesto a que los utilizas en tus páginas web, y si no, es el momento de empezar a hacerlo y te voy a dar unas cuantas razones para ello. Los CSS sprites es una técnica que se empezó a utilizar por los desarrolladores de videojuegos para disminuir el tiempo de carga y cuyo resultado es una imagen que contiene un conjunto de imágenes para ser utilizadas dentro de un sitio web. ¡Qué lío!, ¿no? 🙂 Como siempre, con un caso práctico todo resulta más sencillo.

Supongamos que estamos diseñando un sitio en cuyo pie de página vamos a crear varios enlaces a diferentes redes sociales, que serán Facebook, Twitter, Vimeo y Youtube, por ejemplo. Para ello, necesitaríamos en primer lugar los iconos de cada una de estas redes sociales y además el que lo sustituya cuando el ratón pase por encima (hover), esto conforma un total de ocho iconos en una sola imagen. ¿Para qué?

  • Se minimizan las llamadas HTTP al servidor ya que en vez de llamar a ocho imágenes para que se carguen en la página solo se hará una llamada.
  • Reducimos el tiempo de carga de nuestra página y en consecuencia mejoramos el rendimiento del sitio web.

Ahora veamos el proceso:

css-sprites

Abrimos un nuevo documento en Photoshop y colocamos todos los iconos necesarios para crear nuestro sprite. En este caso, cada uno de los iconos mide 27 x 27 píxeles. Calcula un tamaño de documento para ajustar cada uno de ellos y utiliza las guías para ayudarte recortando bien la imagen ajustándola a la esquina superior izquierda. Guardamos el documento en PNG y empezamos con lo que más nos gusta, ¡el código! 🙂

Creamos una lista desordenada para crear los enlaces.

<ul>
    <li id="facebook"><a href="#" title="#"></a></li>
    <li id="twitter"><a href="#" title="#"></a></li>
    <li id="vimeo"><a href="#" title="#"></a></li>
    <li id="youtube"><a href="#" title="#"></a></li>
</ul>

Para hacer la llamada a las imágenes utilizamos la propiedades background-image y background-position de la siguiente manera:

ul li {
	width: 35px;
	height: 35px;
	margin-right: 25px;
	background-image: url('../images/rrss.png');
	background-repeat: no-repeat;
	float: left;
}

ul li a {
	width: 27px;
	height: 27px;
	float: left;
}

ul li#facebook {
	background-position: 0 0;
}

ul li#facebook:hover {
	background-position: 0 -49px;
}

ul li#twitter {
	background-position: -50px 0;
}

ul li#twitter:hover {
	background-position: -50px -49px;
}

ul li#vimeo {
	background-position: -100px 0;
}

ul li#vimeo:hover {
	background-position: -100px -49px;
}

ul li#youtube {
	background-position: -150px 0;
}

ul li#youtube:hover {
	background-position: -150px -49px;
}

Aquí vemos que desde la etiqueta <li> ya estamos llamando al sprite como imagen, pero es en cada uno de los <li> específicos (id : #facebook, #twitter, #vimeo y #youtube) donde le damos la posición correcta, tanto a la original como al hover.

Nota: Para indicar la posición de los iconos en la imagen mide desde la esquina superior izquierda y en dirección a la derecha y hacia abajo. Como habrás observado se indica en negativo.

background-position

Así, en

ul li#vimeo:hover {
	background-position: -100px -49px;
}

Estamos asignando un valor de -100px a la derecha y -49px hacia abajo.  

Utilizar CSS Sprites es una técnica muy sencilla y solo aporta ventajas así que te animo a empezar desde ya a utilizarla. Si Google lo utiliza, ¿cómo no lo vamos a hacerlo nosotros? 🙂 Fíjate en el sprite que utiliza Google en su página de inicio, www.google.es. ¡Podemos crearlo tan complejo como queramos! Y para seguir aprendiendo, aquí te dejo algunos enlaces que no debes dejar de leer. ¡Ánimo y hasta el próximo post!

Categorías
CSS HTML Maquetación web tipografías

Añadir Adobe Adge Web fonts a mi página web

Si hace unos días aprendíamos cómo utilizar y añadir Google Web Fonts a nuestra página web, hoy le toca el turno a Adobe Edge Web Fonts, un servicio  que nos permite disponer de cientos de tipografías gratuitas para nuestra página web.

Adobe Edge Web Fonts es una aplicación que nos ofrece un catálogo de unas 500 fuentes para ser usadas en tus páginas. Este proyecto, que va en paralelo con Google Web Fonts, nos aporta solidez y versatilidad a la hora de encarar un proyecto web.

En este sencillo post vamos a aprender cómo utilizar esta aplicación en tan solo unos pasos. 🙂

1

Desde Adobe Edge Web Fonts  hacemos scroll hasta llegar al siguiente punto de la página:

adobe edge fonts
2

 Elegimos la tipografía que vamos a usar a la vez que obtenemos la muestra de cómo quedaría en pantalla. Copiamos el código naranja que se nos muestra más abajo y lo pegamos en el archivo HTML antes del cierre de la etiqueta </head>. En nuestro caso, tomamos como ejemplo la tipografía «Quicksand»:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Añadir Adobe Edge Web Fonts a mi página web</title>
        <script src="http://use.edgefonts.net/quicksand.js"></script>
    </head>
3

 Añadimos en la hoja de estilos CSS la propiedad de font-family a la etiqueta que nos interesa. Por ejemplo un titular  h1:

h1 {
  font-family: quicksand, serif;
}
4

 Si además queremos especificar que nuestro titular sea normal, negrita o cursiva debemos ir a la página con la documentación completa donde nos señalan todas las fuentes tipográficas de las que dispone nuestra familia elegida. Lo vemos con el ejemplo:

añadir diferentes tipografias en mi página web

Quickdand tiene 6 diferentes fuentes tipográficas. Pongamos que nuestra cabecera es Bold Italic. El código CSS quedará:

h1 {
  font-family: quicksand, serif;
  font-weight:700;
  font-style:italic;
}

¿Has visto qué sencillo? Dependiendo de las fuentes tipográficas que tiene cada familia, usaremos las propiedades de font-weight y font-style de diferente manera. Donde:

  • n e i corresponden a las propiedades font-style:normal y font-style:italic respectivamente.
  • El número que les sucede corresponde a la propiedad font-weight.

En el siguiente listado vemos la relación de n e i dentro de las propiedades CSS con el ejemplo de la fuente Quicksand:

n3      font-weight:300;
n4      font-weight:400;
n7      font-weight:700;

i3      font-weight:300;      font-family:italic;
i4      font-weight:400;      font-family:italic;
i7      font-weight:700;      font-family:italic;

Después de estos sencillos pasos solo queda practicar. !Ánimo! Y hasta el siguiente post 🙂

Categorías
CSS HTML Maquetación web

6. pasar de PSD a HTML y CSS | crear varias columnas en html y css

En esta ocasión vamos a maquetar varias columnas en una página con HTML y CSS. Además, con la peculiaridad de que cada una tiene un ancho (width) diferente… Ya verás qué fácil 😉

Según nuestro archivo psd y ayudándonos de las guías, las columnas miden lo siguiente en ancho:

  • Columna Izquierda: 221px.
  • Columna Central: 326px.
  • Columna Derecha: 240px.

Un dato importante a saber es que la separación que hay entre la columna izquierda y la central es de 75px. Esto marcaría el margin-right que se lo aplicaremos a la columna de la izquierda.

Con esta información ya tenemos más que suficiente para, por lo menos, maquetar 3 columnas en un ancho total de 930px. ¿Cómo hacerlo? Nuestro código HTML quedaría de la siguiente forma:

<div id="columnas">
    <div id="col_izqda">
    </div>
    <div id="col_centr">
    </div>
    <div id="col_drcha">
    </div>
</div>

La estructura es tan básica como concentrar a las 3 columnas en un solo contenedor, al que llamamos #columnas y dentro del mismo creamos un div para cada una de ellas. Ahora vamos a aplicarle el código CSS.

/* ------------------------------------ */
/*				COLUMNAS				*/
/* ------------------------------------ */
#columnas {
     width:930px;
	 float:left;
	 margin:20px 0;
     padding:0px;
}

#col_izqda {
     width:221px;
	 float:left;
	 margin:0 75px 0 0;
     padding:0px;
	 height:300px;
	 background:#063;
}

#col_centr {
     width:326px;
	 float:left;
	 margin:0;
     padding:0px;
	 height:300px;
	 background:#063;
}

#col_drcha {
     width:240px;
	 float:right;
	 margin:0;
     padding:0px;
	 height:300px;
	 background:#063;
}

Te habrás dado cuenta de que a las 3 columnas le he dado el mismo alto y el mismo background de fondo. Esto es solo un pequeño truquito que utilizo para asegurarme de que a ese div al que le estoy dando un color (background), se corresponde con los estilos que le estoy aplicando. (Si no pusiera un height, al no tener altura el div, y en principio vacío porque no le he metido contenido aún, sencillamente, no tendría fondo, y no podría previsualizarlo antes de seguir).

Es más sencillo de entender si directamente ves cómo queda lo que acabamos de maquetar con la siguiente demo.

¿Te atreves a maquetar el interior de cada columna? Después de lo aprendido, tienes los conocimientos suficientes para hacerlo. Pero si necesitas el código completo, no tienes más que decírmelo y estaré encantada de enviártelo.

¡Muchas suerte! 🙂


  1. pasar de PSD a HTML y CSS | definiendo los pasos
  2. pasar de PSD a HTML y CSS | recorte y optimización de imágenes para web
  3. pasar de PSD a HTML y CSS | maquetando una web desde cero
  4. pasar de PSD a HTML y CSS | maquetar un menu
  5. pasar de PSD a HTML y CSS | introducir un vídeo de vimeo o youtube
  6. pasar de PSD a HTML y CSS | crear varias columnas en html y css
  7. pasar de PSD a HTML y CSS | maquetar el pie de página