Diseño web: Efecto CSS3, cristal con reflejos para títulos


Como crear un precioso efecto cristal para los títulos y encabezados

Hola. Hoy voy a compartir con vosotros como crear un espectacular efecto cristal con reflejos para nuestros encabezados, O cualquier otro elemento que consideremos oportuno:

Este es un efecto que hemos creado en informatico-madrid.com para nuestra propia página web,. esperamos que os guste y os invitamos a mejorar lo y usarlo en vuestras páginas web.

El efecto final sería el siguiente:

Estoy sobre un espejo

El truco para conseguir este efecto:

  1. Establecer el borde del encabezado en porcentaje, mayor de 50%, esto nos permitirá juntar las esquinas superiores con las esquinas inferiores y tener así un efecto de profundidad y continuidad.
                border-radius: 51%;
            
  2. Establecer el color del borde: Para poder mejora el efecto de profundidad vamos a utilizar distintos niveles de brillo para el color del borde superior y inferior, Estableciendo menos brillo en el color del fondo para que de la sensación de profundidad.
                border-top: solid 2px #47530d;
                border-bottom: solid 2px #c9e24a;
            
    Fijaros bien que el color sea del mismo tono y simplemente pongamos más brillo en el borde inferior que el superior
  3. Ahora tenemos que crear una sombra en el texto. para que nos de la sensación que las letras se reflejan en el cristal. Para esto utilizamos la propiedad de CSS3 text-shadow. En esta propiedad podemos ir agregando diferentes sombras. En nuestro caso solo agregaremos dos..
                 text-shadow: 
                             1px 26px 6px rgba(71,83,13,0.6),
                             0 2px 3px #666;
            
  4. Por último establecemos un fondo sobre nuestro elemento, estableciendo un nivel bajo de opacidad para que nos de la sensación de transparencia.
              background: rgba(147,171,27,0.15);
          

Para acabar os dejo el código mínimo completo para que podáis hacer copy & paste.  

por Joao: Informatico-madrid.com puede ser reutilizado bajo la licencia CC BY Informatico-madrid.com. lo pon un pequeño enlace a este artículo. Se agradece.

En nuestra hoja de estilos

.espejo{
    border-radius: 51%;
    border-top: solid 2px #47530d;
    border-bottom: solid 2px #c9e24a;
    margin-bottom: 1em;
    padding-bottom: 1em;
    text-shadow: 1px 26px 6px rgba(71,83,13,0.6),0 2px 3px #666;
    background: rgba(147,171,27,0.15);
}

Nuestra etiqueta HTML

<h2 class="espejo">Estoy sobre un espejo</h2>

Publicado el 18/01/2016 a las 12:29

Comentarios en el post


Esta web utiliza cookies, puedes ver nuestra la política de cookies, aquí Si continuas navegando estás aceptándola
Política de cookies +