En este artículo podrás aprender trucos, utilidades… No es un tutorial de CSS al uso, sino ejemplos con CSS útiles y buenas prácticas para cualquier diseñador web. Podrás aprender como comprimir tu archivo css, diferenciar entre id y class que muchas veces se utilizan mal entre otras muchas cosas.

 

Interesantes efectos css con fuentes

Con CSS puedes conseguir que tus fuentes dentro de la página web tengan sombras, texturas, degradados,… igual que con Photoshop.

fuentes-y-css

Si quieres conseguir estos efectos tienes que crear un archivo HTML y uno CSS.

 

HTML

En este archivo muestras el texto a visualizar:

<div class="quote">
  <span class="line1">If you haven’t</span>
  <span class="line2">surprised</span>
  <span class="line3">yourself yet,</span>
  <span class="line4">you haven’t done</span>
  <span class="line5">enough</span>
  <span class="line6">sketching</span>
</div>

 

 

CSS

El CSS está creado basándose en como está configurado el html, por lo que si modificas algo del css tenlo en cuenta para aplicarlo en el html y viceversa.

@import url(http://fonts.googleapis.com/css?family=Lato:900|Fredericka+the+Great|Oswald:700|Vidaloka);

html {
    font-size: 200%;
  /* This can be changed and all text will resize! */   
}

body {
  background: #424242;
}

.quote {
    margin: 2rem auto;  
    width: 20.5rem;
}

span {
    display: block;
    text-rendering: optimizeLegibility; /* Better kerning, worse performance */
}

.line1 {
    font: 2rem/2.5rem 'Lato', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.35rem;
    color: #9DE7C5;
    text-shadow: -4px 3px 0 #424242,
                      -6px 5px 0 rgba(255,255,255,0.125);
  /* If I wanted to be extra-fancy, I could also define
     text-shadows in rems (instead of pixels) to make
     them resize when the font-size was adjusted */
}

.line2 {
    font: 4.25rem/4.5rem 'Oswald', sans-serif;
    letter-spacing: 0.15rem;
    text-transform: uppercase;
    color: #fff;
    text-shadow: -1px  1px 0 #424242,
                     -4px  4px 0 #424242, 
                     -5px  5px 0 rgb(59, 234, 147),     
                     -6px  6px 0 rgb(59, 234, 147),
                     -7px  7px 0 rgb(15, 179, 186),
                     -8px  8px 0 rgb(15, 179, 186),
                     -9px  9px 0 rgb(15, 95, 186),
                     -10px 10px 0 rgb(15, 95, 186),
                     -11px 11px 25px #000;
}

.line3 {
    font: 2.45rem/3.45rem 'Vidaloka', serif;
    text-transform: uppercase;
    letter-spacing: 0.25rem;
    color: rgb(135, 207, 87);
    text-shadow: -2px 2px 5px #000;
}

.line4 {
    font: bold 1.5rem/1rem 'Lato', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.15rem;
    margin-top: 1.25rem;
    color: #7DDDCE;
    
}

.line5 {
    font: 4.25rem/3.5rem 'Vidaloka', serif;
    text-align: right;
    margin-right: 0.5rem;
    color: #3BDDC4;
    position: relative;
}

.line5:after {
    content: 'enough';
    position: absolute;
    top: 0px;
    right: 0px;
    filter: blur(5px); /* Unsupported as-is in Firefox */
    color: rgba(0, 0, 0, 0.5);
}

.line6 {
    font: 4.6rem/4.25rem 'Fredericka the Great', cursive;
    color: #FFF;
    text-shadow:  0   1px #2b2b2b,
                 -1px 0   #000,
                 -1px 2px #2b2b2b,
                 -2px 1px #000,
                 -2px 3px #2b2b2b,
                 -3px 2px #000,
                 -3px 4px #2b2b2b,
                 -4px 3px #000,
                 -4px 5px #2b2b2b,
                 -5px 4px #000,
                 -5px 6px #2b2b2b,
                 -6px 5px #000,
                 -6px 7px #2b2b2b,
                 -7px 6px #000,
                 -7px 8px #2b2b2b,
                 -8px 7px #000;
}

cite {
    font: 0.85rem 'Lato', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.4rem;
    color: #222;
}

 

En la página web del autor puedes descargarte todos los archivos con este ejemplo.

Link | Tipografías con estilos css

¿Te animas a aplicarlo en tu página web?

 

 

Chuleta CSS

Para los que somos diseñadores o programadores nos interesa tener cerca una ayuda útil que nos evite perder tiempo buscando. Porque aunque todo está en Google si no tenemos que perder tiempo buscando, mucho mejor.

El artículo de hoy va de chuletas y de CSS pero sin exámenes de por medio 🙂 Así pues, podrás descargarte una chuleta CSS (cheatsheet).

Para los que nos dedicamos a este mundillo nos vienen bien todas estas ayudas, que nos vienen bien en el día a día.

css3-cheatsheet

 

Esta cheatsheet la tienes dividida en dos hojas. En la primera de ellas vienen las principales características del CSS2 y en la segunda las del CSS3.

La descarga del a chuleta de CSS es gratis y está en pdf, el autor agradece una donación pero no es obligatorio.

Ahora solo te queda descargarte la chuleta CSS. Si eres de los que te has animado a descargarla, solo te queda contarnos si te parece útil,…

 

 

Crea sombras en el texto con CSS3

Hay efectos que antes para poder conseguirlos la única forma era mediante una imagen, esto tenía el inconveniente de la indexabilidad por parte de los buscadores. Gracias a CSS3 y HTML5 es posible conseguir efectos mediante código que antes eran impensables de hacer así. Eso repercute en una mayor rapidez de la web, pues no es necesario abusar de imágenes en casos en que no sea necesario.

En el artículo de hoy podrás ver como crear sombras en el texto con CSS3.

 

Fácilmente con código CSS

Sólo tienes que insertar dentro del código css, por ejemplo, si es un párrafo sobre el que quieres aplicar la sombra:

p { text-shadow: 3px 5px 10px #000; }

Dónde el 3px hace referencia coordenada x, el 5 px hace referencia a la coordenada y, el 10px hace referencia al radio de acción de la sombra y, por último, el #000 es el color de la sombra.

El resultado con CSS es el siguiente:

 

Ejemplo CSS

Por supuesto, esto es solo un ejemplo, puedes personalizarlo y adaptarlo según tu diseño. Es un ejemplo básico para que puedas ver fácilmente las posibilidades que te ofrece este estilo css.

El CSS3 funciona en todos los navegadores modernos.

Siguiendo código css se pueden crear fácilmente multitud de efectos con texto, por ejemplo dar volumen (efecto 3D), texto metido para dentro,… pero eso ya queda para próximos artículos 🙂

 

 

Creando textos en 3D con CSS3

El CSS3 permite conseguir efectos en web, para los que antes era necesario crear una imagen utilizando el Photoshop. En el artículo de hoy podrás ver como crear un efecto texto 3D con CSS3.

Si se consigue el mismo efecto y eres de los que domina Photoshop y no CSS3, te harás la pregunta de qué ventaja obtienes. Te comento una que me viene ahora mismo a la mente:

  • Por ejemplo si el texto lo quieres en la web a tamaño 30px, si mañana lo quieres cambiar a tamaño 25px, no tendrás que hacer todo el trabajo de ir a Photoshop, cambiar el tamaño, guardar la imagen y subirla a web. Simplemente cambiando ese dato en el css listo. Se consigue un ahorro de tiempo inmenso.

 

 

[h3]Cómo crear el efecto texto 3D con CSS3[/h3]

En el archivo css creamos un estilo para un determinado elemento, en este caso está elaborado para la etiqueta h1, pero lo puedes aplicar para cualquier elemento.

h1 {

font-family: Helvetica, Arial;

line-height: 1em;

color: #fff9d6;

font-weight:bold;

font-size: 103px;

}

 

Por último, sólo tendrías que añadir al estilo este código:

text-shadow:0px 0px 0

rgb(212,212,212),1px 1px 0

rgb(184,184,184),2px 2px 0

rgb(156,156,156),3px 3px 0

rgb(128,128,128), 4px 4px 0

rgb(100,100,100),5px 5px 4px

rgba(0,0,0,0.45),5px 5px 1px

rgba(0,0,0,0.5),0px 0px 4px

rgba(0,0,0,.2);

 

Y estaría listo el efecto. Te indico la página web del autor en inglés para que puedas ver el tutorial original.

Link | Code Snippet: Create 3D Text Effect using CSS3

 

 

Sliders con CSS3 y sin javascript

En este artículo podrás encontrar una selección de galerías tipo sliders con CSS3 y que no utilizan javascript. Al estar en CSS3 son compatibles únicamente con los navegadores modernos. Por otro lado, estos sliders al evitar el javascript:

  • consiguen no saturar el servidor si hay muchas peticiones
  • no hay que esperar a que se descargue completamente el javascript para que se ejecute la galería
  • y, por último, se evita que no funcione si el usuario tiene deshabilitado el javascript en su navegador.

Si prefieres utilizar javascript, entonces puede que te interese: Sliders en jQuery

 

Texto corto o citas con css de forma atractiva

Aquí podrás encontrar una forma fácil de insertar texto corto o citas con css de una forma llamativa. En ocasiones no estamos inspirados para crear elementos dentro una web lo más atractivos posible.

 

Modern Block Quote Styles

puedes ver online 6 demos con estilos de citas distintos. En la página web del autor puedes ir viendo el código paso a paso en css.
citas con css

 

 

Inclinación de fondos sólo con CSS3

Permite crear ángulos en formas y líneas diagonales en el fondo de tu web simplemente con CSS3.

En el enlace de abajo hay dos ejemplos distintos con su respectivo código en css3. Una forma distinta de diseñar tus webs teniendo en cuenta estos estilos en css3..

Link | Modificación de fondos con CSS3

 

 

Como comprimir tu css online

Que el peso de una web repercute en la velocidad de la página es evidente. Por eso todos los diseñadores web tenemos que intentar reducir el peso de nuestros archivos. Ya no nos podemos permitir tener líneas de código a lo tonto, tenemos que optimizar los archivos para que pesen lo menos posible, y como consecuencia, la web sea más rápida.

¿Y si mi web no va rápida cual es el problema?

No seamos duros de mollera y pensemos que nuestros visitantes van a estar tiempo esperando que cargue nuestra web, no van a dar la oportunidad de esperar y esperar. Si algo caracteriza a internet es la rapidez. Estamos segundos en una web, no hay lo que nos interesa, fuera, a otra. Incluso aunque esté lo que nos interesa, lo vemos y listo. Sólo si nos engancha demasiado volveremos. La ventaja de internet es que nuestra web está disponible para todo el mundo, pero también no somos los únicos, hay millones de páginas y entre estas, iguales a la nuestra… no me atrevo a decir cuantas porque sería una cosa a boleo, pero muchas, muchas.

¿Eres de los que piensa que hay que comprimir los archivos?

Entonces, adelante. Te mostraré distintas herramientas online para que puedas comprimir en este caso tus archivos css. ¿No te he convencido? Pues nada, otra vez será, pero puedes seguir leyendome igual, jaja.

Pues aquí las tienes, las puedes utilizar gratis:

CSS Compressor

Herramienta online para comprimir css.

compresor-css2

 

¿Qué conseguimos utilizando los compresores css?

Pues sobretodo reducir espacios, líneas vacias de código y eliminar estilos css redundantes.

¿Te preocupa que tu css no esté lo suficientemente optimizado?

Puedes ver en un artículo anterior, en el que te indico buenas prácticas a realizar en tu css. Son recomendaciones a seguir al crear estilos, que muchas veces no tenemos en cuenta, y que, si las aplicamos conseguiremos generar un potente archivo css.

 

 

Diferencia entre id y class

En el archivo css se definiría el selector class .rojo { color: red; }

En el archivo css se definiría el selector id #rojo { color: red; }

Aunque aparentemente se observen pocas diferencias la fundamental es que un documento solo puede haber un único elemento id definido, mientras que puede haber multiples class con el mismo nombre y mismo documento.

El id va a prevalecer sobre cualquier class.

 

 

Imagen fija de fondo con css

Para insertar una imagen fija en el fondo de nuestra página web y que no se mueva con la pantalla, en nuestro archivo css deberemos de insertar la propiedad:

background-attachment: fixed;

Otra forma de ponerlo en nuestro archivo css son todas las instrucciones del fondo en una sola declaración. Por ejemplo, ponemos una imagen de fondo fija a 100px horizontal y 100px vertical con fondo color negro y que no se repita:

background: black url(“imagen.gif”) no-repeat fixed 100px 100px;

 

 

Insertar tipografías con css en página web

Cuando he querido utilizar en una página web una tipografía distinta a las estándar he utilizado distintos métodos:

  • hacer una imagen con esa palabra en esa tipografía: nada recomendable para SEO y además no permite el cambio dinámico de contenidos.
  • sIFR: es una combinación de javascript, css y flash. Se reemplaza el texto por un archivo flash con ese mismo texto en la tipografía escogida y que no esté intalada en el ordenador del visitante. No es mi favorito pero quita de un apuro al diseñador si necesita que ciertos títulos,… se vean con una tipografía concreta. Se recomienda para textos cortos como títulos o similar.
  • @font-face en CSS: es mi método favorito desde que el estándar CSS3 la contempla. Es válido para prácticamente todos los navegadores.
  • insertarla de google fonts.

En este artículo vamos a ver como se inserta por el tercer método.

Implementación de @font-face en CSS

Primero en el archivo de CSS arriba del código definimos:

@font-face {
 font-family: miFuente; /* obligatorio */
 src: ruta_de_la_fuente;                        /* obligatorio */
 font-weight: weight;                /* opcional */
 font-style: style;                /* opcional */
}

 

Si por ejemplo, vamos aplicar esta tipografía a todos los párrafos deberemos de definir en el css:

p { font-family: miFuente, serif; }

¿A qué es sencillo?

 

 

Crea un widget de un perfil de usuario fácilmente con CSS3

Hay códigos online que nos facilitan la vida a los diseñadores web. Uno de ellas es la de hoy: crear un widget de un perfil de usuario con CSS3.

No es lo mismo tener el código y personalizarlo a las necesidades de cada uno, que empezar de cero. Es un tiempo de ahorro que podemos emplear en otra cosa 🙂 Interesante, ¿no?

Pues ahí te va el código:

HTML

<section>
    
    <header class="clearfix">
      <div class="liks">
        <i class="icon"></i>
        <span>255</span>
      </div>
      <div class="user">
        <div class="avatar">
          <img alt="Dwayne Johnson" src="http://i.imgur.com/DmPjhGo.jpg">
        </div>
        <h2>Dwayne Johnson</h2>
        <p>Actor</p>
        <a href="#" class="follow"><span>+</span>Follow</a>
      </div>
      
    </header>
    
    <ul class="menu">
      <li><a href="#" class="active profile">Profile</a></li>
      <li><a href="#" class="timeline">Timeline</a></li>
      <li><a href="#" class="podcast">Podcast</a></li>
    </ul>
    
  </section>
  
  <p class="copyrights">
    Designed by
    <a href='https://dribbble.com/shots/1518589-Profile'>vikas1307</a>
    and coded by
    <a href='http://codepen.io/mustafaismail22/'>Mustafa ismail</a>
  </p>

CSS3

body
  background-color: #e3e5e7
  font: normal 16px/22px "GothamRoundedLight", sans-serif
    
.clearfix:after
  content: ""
  display: block
  clear: both
  visibility: hidden
  font-size: 0
  height: 0

.clearfix
  *display: inline-block
  
section
  width: 420px
  background: #fff
  position: relative
  margin: 50px auto
  padding: 0 0 4px
  box-shadow: 0 0 100px rgba(0, 0, 0, 0.2)
  z-index: 0
  
  &:after
    position: absolute
    left: 4px
    top: 4px
    bottom: 4px
    content: ""
    background: #f6f6f6
    width: 84px
    z-index: -1
    
    
  header
    text-align: center
    width: 100%
    
    .user
      float: right
      width: 335px
      padding: 30px 0
    
      .avatar
        margin:  0 auto
        width: 150px
        height: 150px
        border-radius: 100%
        background-color: #fff

        img 
          display: block
          width: 100%
          height: 100%
          border-radius: 100%
      h2
        margin: 15px 0 0 
        color: #000
        font: normal 24px/1 "GothamRoundedMedium", sans-serif
      p
        color: #b0b0b0
        font-size: 18px
        margin: 15px 0 0 

      a.follow
        display: inline-block
        border-radius: 50px
        background: #23f3ac
        text-decoration: none
        width: 180px
        height: 50px
        margin: 15px 0 0
        color: #fff
        font: normal 18px/50px "GothamRoundedBold", sans-serif
        transition: all ease .2s
        
        span
          font-size: 20px
          margin-right: 5px
          
        &:hover
          opacity: .7
    
    .liks
      padding: 15px 0
      float: left
      width: 85px
      
      .icon
        background: #fff url(http://i.imgur.com/p6pVEjp.png) no-repeat center
        width: 55px
        height: 55px
        border-radius: 100%
        display: inline-block
      span
        display: inline-block
        background: #fff
        border-radius: 20px
        width: 40px
        height: 20px
        font: normal 13px/20px "GothamRoundedBold", sans-serif
    
  .menu
    list-style: none
    margin: 0 
    padding: 0
      
    a
      display: block
      text-decoration: none
      padding: 30px 0 30px 120px
      font-size: 20px
      color: #b2b2b2
      border-left: 4px solid #fff
      background: rgba(232, 232, 232, 0.4)  url(http://i.imgur.com/bdUSt1u.png) no-repeat 26px center
      transition: all ease .2s
        
      &:hover 
        padding-left: 130px
        color: #787878
        border-color: #f67878
        
      &.active
        border-color: #f67878
        color: #787878
        font-family: 'GothamRoundedMedium' , sans-serif
 
      &.timeline
        background-image: url(http://i.imgur.com/5eFnzAS.png)
        background-color: transparent
        
      &.podcast
        background-image: url(http://i.imgur.com/ZnwPYeb.png)
      
.copyrights
  text-align: center
  text-transform: capitalize
  margin: 50px
  a
    text-decoration: none
    color: #f67878

¿Y cuál es el resultado?

 

 

Si no te convence, siempre lo podrás adaptar cambiando 4 cosillas en el código.

Link | Widget para perfiles de usuario en CSS3

 

 

Formas de  alinear contenido verticalmente con CSS

Una de las cosas que nos traen de cabeza a los diseñadores web es como alinear el contenido de forma vertical. Como tampoco hay una versión oficial de como hacerlo se complica la cosa mucho más. Pero no te preocupes intentaré darte técnicas para conseguirlo con CSS.

Usa Padding

Es la opción número 1 que utilizamos la gran mayoría.

Al elemento del texto le ponemos el padding-top y padding-bottom de por ejemplo 50px.

Usa Display: table-cell

Otra forma de alinear texto verticalmente es insertando dentro del elemento del texto la propiedad display:table-cell combinandola con la de vertical-align.

Para casos de una sola línea

En este caso se suele utilizar la propiedad line-height. Se calcula para que quede la misma distancia en la parte superior como en la inferior.

Recuerda que esto solo funciona para casos de una sola línea.

 

 

 

Como limpiar el código CSS

Uncss es una herramienta que por medio de código permite eliminar los elementos css que no se utilicen. Así conseguirás tener tu código limpio, completamente optimizado y sin ocupar líneas innecesarias, que lo único que consiguen es ralentizar la carga de la web.

La otra manera de optimizar el código es mirando los estilos que se utilizan y los que no, pero comprenderás que ese no es un sistema optimo de trabajo. Se puede hacer así, pero nos ahorramos mucho tiempo con herramientas como ésta.

Como inconveniente se inicializa mediante línea de comandos, por lo que si no estás habituado a utilizarlo igual te parecen palabras mayores, pero todo es ponerse.

¿Cómo funciona Uncss?

Los HTML son cargados por PhantomJS y ejecutados con javascript. Se extraen los archivos CSS de ese HTML y así se consigue limpiar el CSS.

uncss

Un ejemplo de uso sería:

var uncss = require('uncss');

var files   = ['my', 'array', 'of', 'HTML', 'files'],
    options = {
        ignore       : ['#added_at_runtime', /test\-[0-9]+/],
        media        : ['(min-width: 700px) handheld and (orientation: landscape)'],
        csspath      : '../public/css/',
        raw          : 'h1 { color: green }',
        stylesheets  : ['lib/bootstrap/dist/css/bootstrap.css', 'src/public/css/main.css'],
        ignoreSheets : [/fonts.googleapis/],
        urls         : ['http://localhost:3000/mypage', '...'], // Deprecated
        timeout      : 1000,
        htmlroot     : 'public'
    };

uncss(files, options, function (error, output) {
    console.log(output);
});

/* Look Ma, no options! */
uncss(files, function (error, output) {
    console.log(output);
});

/* Specifying raw HTML */
var raw_html = '...';
uncss(raw_html, options, function (error, output) {
    console.log(output);
});

En la página web del autor puedes descargarte los archivos necesarios, ver ejemplos o ver todo el proceso paso a paso.

¿A través de quien he conocido esta funcionalidad? David Walsh

¿Dónde puedes descargarte todos los archivos? Uncss

 

 

Transiciones de páginas con css3

Antes sólo era posible hacer transiciones de páginas, imágenes,… utilizando javascript pero ahora con css3 es posible utilizando la propiedad :target. El inconveniente es que solo es compatible para los navegadores modernos.

En la web del autor se pueden ver 3 ejemplos distintos: la página se desliza con movimiento superior-inferior, página que aparece y desaparece la anterior y, por último movimiento de izquierda a derecha. Pero para hacerte una idea más precisa lo ideal es que mires las demos.

Además de poder ver ejemplos de la animación en la web del autor puedes ver paso a paso el código a insertar.

Link | Transiciones de páginas con css3

 

 

Guía CSS

A mi me pasa que si llevo algún tiempo sin tocar código CSS, me entran dudas como ¿el subrayado se pone con el text-transform o con el font?¿cómo se separan las letras? Dudas que son normales y que se solucionan con google o teniendo una guía a mano.

En el post de hoy podrás ver una guía CSS muy útil para diseñadores web. Está todo ordenado según las propiedades, pseudo-clases, funciones, tipos de datos y reglas (de importación, de tipografías,…).

 

Dentro de cada propiedad puedes ver en que navegadores funciona correctamente y en cuales no, ejemplos de código, demos de como funciona, todos los valores que puedes poner,…

Es una guía muy completa que formará parte de tus favoritos, el único inconveniente es que viene en inglés, pero si no se te da bien, siempre te queda el traductor de Google 🙂

Link | Guía CSS

Guardar