Cabeza de tornillo con CSS


El título de esta entrada, aunque pueda parecerlo, no es ningún insulto. Solo anuncia aquello que en él vamos a intentar conseguir: que el navegador web nos muestre una cabeza de tornillo como las que puedes ver en la siguiente imagen:

placa-metalica
Placa metálica

 

Se trata de una captura de pantalla de la placa «metálica» —por supuesto, virtual— de la sección Acerca de del sitio web de APLICACIONez®.  Pero en este artículo vamos a crear uno de esos tornillos —y aquí está la gracia— sin emplear ninguna imagen, sino utilizando únicamente las últimas versiones de los lenguajes de marcas y de estilo en que se escriben las webs, HTMLlenguaje de marcación de hipertexto
HyperText Markup Language
5 y CSShojas de estilo en cascada
Cascading Style Sheets
3. Con él pretendemos inaugurar una serie que mostrará cómo conseguir efectos visuales con CSShojas de estilo en cascada
Cascading Style Sheets
que pueden enriquecer y al mismo tiempo aligerar el peso de nuestras páginas.

El resultado de esta primera entrega deberá producir algo parecido a esto:

tornillo

 

El esqueleto HTML

En primer lugar, necesitamos un archivo HTMLlenguaje de marcación de hipertexto
HyperText Markup Language
básico con el que hacer pruebas. Con los comentarios que describen cada parte del documento, puede ser este:

<!DOCTYPE html> <!--el prólogo de HTML5-->
<html lang="es"> <!--el lenguaje del documento; en este caso es español: es -->
  <head> <!--cabecera interna del documento -->
     <title>Titulo de la web</title> <!--título que mostrará la pestaña del navegador -->
     <meta charset="utf-8" />  <!--código de caracteres universal o UNICODE -->
	<!--hoja de estilo incluida en el documento -->
	<style type="text/css">    
	</style>
  </head>
 <!--el cuerpo del documento -->
   <body>
   </body>
</html>

 

 

¿Qué debemos dibujar?

Después, analicemos lo que queremos lograr, aunque no desde la perspectiva de cualquier internauta, sino desde un punto de vista diferente, el de un diseñador que debe crear un efecto casi de la nada. Y la pregunta es: ¿qué es, esencial y visualmente hablando, una cabeza de tornillo? En realidad, solo un círculo con un rectángulo encima, y todo ello con los colores y sombras adecuados. Así que nuestros pasos serán crear primero ese círculo y luego ese rectángulo.

 

El círculo

Para dividir una página web en distintos bloques existen varias marcas, pero la más versátil y la que utilizaremos ahora es <div>. El círculo será algo así:

 <div class="screw"></div>

 

Puesto que estamos dibujando, no escribiendo, no ponemos ningún contenido en esta marca, aunque sí hemos añadido un atributo class con el valor screw («tornillo«, en inglés), que nos permitirá enlazarla después con una regla CSShojas de estilo en cascada
Cascading Style Sheets
. De momento, colocamos la marca en la sección <body> de nuestro documento:

<!DOCTYPE html> <!--el prólogo de HTML5-->
<html lang="es"> <!--el lenguaje del documento; en este caso es español: es -->
  <head> <!--cabecera interna del documento -->
     <title>tornillo 1</title> <!--título que mostrará la pestaña del navegador -->
     <meta charset="utf-8" />  <!--código de caracteres universal o UNICODE -->
    <!--hoja de estilo incluida en el documento -->
    <style type="text/css">    
    </style>
  </head>
 <!--el cuerpo del documento -->
   <body>
         <div class="screw"></div>
   </body>
</html>

 

Puedes guardar el archivo con el nombre tornillo1.html, pero no te molestes en abrirlo con tu navegador, porque no verás más que una página en blanco, ya que la marca no tiene contenido, como ya sabemos, y tampoco le hemos asignado todavía ningún estilo. Lo vamos a hacer ahora. Dentro del nodo <style>, escribe lo siguiente:

.screw{
            position: relative;
            width: 30px;
            height: 30px;
            background: #adadad;
         }

 

El fichero tornillo1.html debe quedar ahora así:

<!DOCTYPE html> <!--el prólogo de HTML5-->
<html lang="es"> <!--el lenguaje del documento; en este caso es español: es -->
  <head> <!--cabecera interna del documento -->
     <title>tornillo 1</title> <!--título que mostrará la pestaña del navegador -->
     <meta charset="utf-8" />  <!--código de caracteres universal o UNICODE -->
    <!--hoja de estilo incluida en el documento -->
    <style type="text/css">  
         .screw{
            position: relative;
            width: 30px;
            height: 30px;
            background: #adadad;
         }  
    </style>
  </head>
 <!--el cuerpo del documento -->
   <body>
         <div class="screw"></div>
   </body>
</html>

El fichero tornillo1.html

 

Si lo abres en el navegador, verás algo parecido a esto:

tornillo1

 

Por supuesto, es un cuadrado, no un círculo, porque la marca <div> en HTMLlenguaje de marcación de hipertexto
HyperText Markup Language
es un bloque, y los bloques en este lenguaje tienen una forma rectangular por defecto. Para hacer que parezca circular, simplemente añadiremos a la regla CSShojas de estilo en cascada
Cascading Style Sheets
que hemos creado una propiedad border-radius, con un valor de 50 píxeles, que modifica el borde del divisor. La resaltamos en el código:

<!DOCTYPE html> <!--el prólogo de HTML5-->
<html lang="es"> <!--el lenguaje del documento; en este caso es español: es -->
  <head> <!--cabecera interna del documento -->
     <title>tornillo 2</title> <!--título que mostrará la pestaña del navegador -->
     <meta charset="utf-8" />  <!--código de caracteres universal o UNICODE -->
    <!--hoja de estilo incluida en el documento -->
    <style type="text/css">  
         .screw{
            position: relative;
            width: 30px;
            height: 30px;
            background: #adadad;
            border-radius: 50px;
         }  
    </style>
  </head>
 <!--el cuerpo del documento -->
   <body>
         <div class="screw"></div>
   </body>
</html>

El archivo tornillo2.html

 

Puedes guardar el archivo como tornillo2.html, si quieres conservar los distintos pasos del diseño, y sobre todo para comprobar con tu navegador que ahora sí se muestra un círculo:

tornillo-2

 

Aunque, la verdad, sigue sin parecerse al tornillo con que ilustramos el inicio del artículo, y no solo porque falta el rectángulo imprescindible, la muesca o hendidura en la que se introduce el destornillador, sino porque su color es completamente plano y parece no tener sombras, algo que no suele suceder en la realidad con los tornillos. Para arreglar esto último, recurriremos a la propiedad box-shadow, con unos valores como estos:

box-shadow: 0px 2px 4px #000, -1px -1px 5px rgba(0,0,0,0.2);

 

Puedes guardar el fichero como tornillo3.html, que quedaría así:

<!DOCTYPE html> <!--el prólogo de HTML5-->
<html lang="es"> <!--el lenguaje del documento; en este caso es español: es -->
  <head> <!--cabecera interna del documento -->
     <title>tornillo 3</title> <!--título que mostrará la pestaña del navegador -->
     <meta charset="utf-8" />  <!--código de caracteres universal o UNICODE -->
	<!--hoja de estilo incluida en el documento -->
	<style type="text/css">  
		 .screw{
                    position: relative;
		    width: 30px;
		    height: 30px;
		    background: #adadad;
                    border-radius: 50px;
		    box-shadow: 0px 2px 4px #000, -1px -1px 5px rgba(0,0,0,0.2);
		 }  
	</style>
  </head>
 <!--el cuerpo del documento -->
   <body>
         <div class="screw"></div>
   </body>
</html>

El archivo tornillo3.html

 

Y que en el navegador se verá mejor:

tornillo-3

 

Con el fin de obtener todavía un aspecto más realista, deberíamos recurrir a un degradado de colores. Esto puede hacerse a mano, calculando cada uno de los pasos, o acudir a alguna web de las existentes en Internet que ofrecen generadores automáticos, como http://www.colorzilla.com/gradient-editor. En cualquier caso, el código que debes copiar es el siguiente:

 background: linear-gradient(135deg,#adadad 0%,#e1e1e1 51%,#e1e1e1 68%,#f6f6f6 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(
                            startColorstr='@screw1',endColorstr='@screw4',GradientType=1);

 

La primera línea es la propiedad background: linear-gradient que reconocen hoy día la mayor parte de los navegadores. La segunda y tercera, filter, la incluimos aquí para que el efecto también funcione en Microsoft Internet Explorer versión 9, que todavía muchos usuarios emplean para navegar. Solo tenemos que incluir esas líneas en el estilo del documento, y guardar el fichero como tornillo4.html para completar el círculo:

<!DOCTYPE html> <!--el prólogo de HTML5-->
<html lang="es"> <!--el lenguaje del documento; en este caso es español: es -->
  <head> <!--cabecera interna del documento -->
     <title>tornillo 4</title> <!--título que mostrará la pestaña del navegador -->
     <meta charset="utf-8" />  <!--código de caracteres universal o UNICODE -->
	<!--hoja de estilo incluida en el documento -->
	<style type="text/css">  
		 .screw{
                    position: relative;
		    width: 30px;
		    height: 30px;
		    background: #adadad;
                    border-radius: 50px;
                    box-shadow: 0px 2px 4px #000, -1px -1px 5px rgba(0,0,0,0.2);
		    background: linear-gradient(135deg,#adadad 0%,#e1e1e1 51%,#e1e1e1 68%,#f6f6f6 100%);
		    filter: progid:DXImageTransform.Microsoft.gradient(
                            startColorstr='@screw1',endColorstr='@screw4',GradientType=1);
		 }  
	</style>
  </head>
 <!--el cuerpo del documento -->
   <body>
         <div class="screw"></div>
   </body>
</html>

El documento tornillo4.html

 

Y ahora puedes verlo, ya con su sombra y su degradado:

tornillo-4

 

El rectángulo

En último lugar crearemos la hendidura que nos permitiría, en el mundo real, usar con nuestro tornillo un destornillador plano. Otra cosa sería tener que reproducir un tornillo de estrella, aunque probablemente al final de este artículo parezca también algo sencillo. Para el tornillo tradicional, de momento, nos bastará con otra marca <div>, también vacía, con su atributo de clase correspondiente, que deberemos incluir dentro de la marca anterior. La marca es esta:

<div class="indent"></div>

 

Y, para que se vea en el navegador, debemos darle también un estilo:

.indent {
    position: absolute;
    height: 10px;
    width: 33px;
    margin-top: -10px;
    margin-left: -2px;
    border-bottom: 1px solid rgba(255,255,255,0.3);
  }

 

Incluye la marca dentro de la marca <div class=”screw”> que creamos en el paso anterior, y la regla en el lugar correspondiente a la hoja de estilos del archivo HTMLlenguaje de marcación de hipertexto
HyperText Markup Language
y guarda este como tornillo5.html. Aquí tienes el código completo:

<!DOCTYPE html> <!--el prólogo de HTML5-->
<html lang="es"> <!--el lenguaje del documento; en este caso es español: es -->
  <head> <!--cabecera interna del documento -->
     <title>tornillo 5</title> <!--título que mostrará la pestaña del navegador -->
     <meta charset="utf-8" />  <!--código de caracteres universal o UNICODE -->
	<!--hoja de estilo incluida en el documento -->
	<style type="text/css">  
		 .screw{
                    position: relative;
		    width: 30px;
		    height: 30px;
		    background: #adadad;
                    border-radius: 50px;
                    box-shadow: 0px 2px 4px #000, -1px -1px 5px rgba(0,0,0,0.2);
		    background: linear-gradient(135deg,#adadad 0%,#e1e1e1 51%,#e1e1e1 68%,#f6f6f6 100%);
		    filter: progid:DXImageTransform.Microsoft.gradient(
                            startColorstr='@screw1',endColorstr='@screw4',GradientType=1);
		 }
                 .indent {
		    position: absolute;
		    height: 10px;
		    width: 33px;
		    margin-top: 10px;
		    margin-left: -2px;
		    border-bottom: 1px solid rgba(255,255,255,0.3);
                    background: #ccc;
                    box-shadow: inset 0px 1px 8px #222;
                  }   
	</style>
  </head>
 <!--el cuerpo del documento -->
   <body>
         <div class="screw">
              <div class="indent"></div>
         </div>
   </body>
</html>

El fichero tornillo5.html

 

En el navegador verás esto:

tornillo-5

 

Por supuesto, la diferencia con la imagen que insertamos al principio del artículo es que la muesca de nuestro tornillo aparece totalmente horizontal. Para que quede como en esa imagen, podríamos añadir una propiedad transform:rotate a la regla .indent. Sin embargo, es mejor que creemos otra clase general que nos permita rotar cualquier elemento 150 grados, no solamente nuestro tornillo, porque así quizá podamos aprovecharla en otros diseños. Y puesto que la propiedad transform no está totalmente soportada por todos los navegadores, deberemos incluir propiedades específicas para Internet Explorer 9 y Safari, si queremos que también la hendidura aparezca rotada en esos navegadores. A pesar de eso la regla es muy sencilla:

.diagonal{
                   transform: rotate(150deg); 		/* navegadores actuales */
                  -ms-transform: rotate(150deg);	/* IE 9 */  
                  -webkit-transform: rotate(150deg);	/* Safari */ 
                  }

 

Para aplicarla, recordemos que CSShojas de estilo en cascada
Cascading Style Sheets
es un lenguaje de estilos en cascada, por lo que solo tenemos que añadir la clase .diagonal al atributo class de nuestra marca:

<div class="indent diagonal"></div>

 

El código del fichero tornillo6.html es este:

<!DOCTYPE html> <!--el prólogo de HTML5-->
<html lang="es"> <!--el lenguaje del documento; en este caso es español: es -->
  <head> <!--cabecera interna del documento -->
     <title>tornillo 6</title> <!--título que mostrará la pestaña del navegador -->
     <meta charset="utf-8" />  <!--código de caracteres universal o UNICODE -->
	<!--hoja de estilo incluida en el documento -->
	<style type="text/css">  
		 .screw{
                    position: relative;
		    width: 30px;
		    height: 30px;
		    background: #adadad;
                    border-radius: 50px;
                    box-shadow: 0px 2px 4px #000, -1px -1px 5px rgba(0,0,0,0.2);
		    background: linear-gradient(135deg,#adadad 0%,#e1e1e1 51%,#e1e1e1 68%,#f6f6f6 100%);
		    filter: progid:DXImageTransform.Microsoft.gradient(
                            startColorstr='@screw1',endColorstr='@screw4',GradientType=1);
		 }
                 .indent {
		    position: absolute;
		    height: 10px;
		    width: 33px;
		    margin-top: 10px;
		    margin-left: -2px;
		    border-bottom: 1px solid rgba(255,255,255,0.3);
                    background: #ccc;
                    box-shadow: inset 0px 1px 8px #222;
                  }
                  .diagonal{
                   transform: rotate(150deg); 		/* navegadores actuales */
                  -ms-transform: rotate(150deg);	/* IE 9 */  
                  -webkit-transform: rotate(150deg);	/* Safari */ 
                  }   
	</style>
  </head>
 <!--el cuerpo del documento -->
   <body>
         <div class="screw">
              <div class="indent diagonal"></div>
         </div>
   </body>
</html>

El documento final, tornillo6.html

 

El aspecto ya es el que pretendíamos:

tornillo-6

 

Conclusión

Hemos conseguido dibujar un tornillo usando solamente CSShojas de estilo en cascada
Cascading Style Sheets
y HTMLlenguaje de marcación de hipertexto
HyperText Markup Language
. Ahora la pregunta es, ¿para qué nos sirve? Sus usos decorativos pueden ser casi infinitos, por supuesto. A nosotros nos valió para hacer la página corporativa de la empresa, como ya hemos dicho.

Lo cierto es que, aunque aquí reproducimos una captura de pantalla, y por tanto una imagen, en nuestra sede web apenas se utilizan tres o cuatro imágenes: los logotipos de algunas de nuestras antiguas empresas, y la fotografía de la mano asiendo un ratón de la portada:

aplicacionez_es

 

El resto de los elementos de la web —las cintas de tira adhesiva, las texturas de papel, incluso las perforaciones, y también aquellos iconos que se animan al acercar el ratón, como habrás visto si la has visitado— están hechos simplemente con una combinación de tipografía, CSShojas de estilo en cascada
Cascading Style Sheets
y HTMLlenguaje de marcación de hipertexto
HyperText Markup Language
.

En próximas entregas de esta serie explicaremos cómo lograr algunos de esos efectos y también otros nuevos. No te las pierdas.



Escribe una respuesta o un comentario

Tu dirección de correo no será publicada.