Comunidad de diseño web y desarrollo en internet online

Colores, gradientes y texto 3D con Sass y Compass

Hola a todos, en este tutorial quiero mostrarles las posibilidades de generar CSS dinámico usando sass y compass. Si no los tienes instalados, revisa la Introducción a Sass y Compass donde explico el proceso de instalación. Veremos como usar las propiedades de CSS3 como text-shadows, gradientes, transiciones, border-radius, box-shadow, de manera sencilla y sin extensiones propietarias de diferentes navegadores.

Crear nuestro proyecto con Compass


Código :

compass create myproyecto


Con esto Compass creará el proyecto, y entramos a la carpeta "myproyecto" por medio del cmd.

Código :

 cd myproyecto


Ahora necesitamos mantener el archivo vigilado para cuando cambiemos el css , se compile de una vez , y no estar compilando manualmente!

Código :

compass watch


Y ahora que falta? Creamos nuestro index.html dentro de la carpeta myproyecto, pero fuera de las demás y vinculados nuestros index con screen.css que está dentro la carpeta stylesheets.

Quedaria así:

Código :

<linl rel="stylesheet" href="stylesheets/screen.css">


Ahora bien tenemos que editar el archivo screen.css que está dentro de la carpeta Sass!

Funciones de Sass


Código :

$color:#333; /*variables sass*/

P{
font-size:16px;
color:$color;
}
p:hover{
color:darken($color,5%) /* la funcion darken oscurece los colores*/
}


Todos los que han visto Less, saben estas funciones, aquí mostraré las básicas y pondré un ejemplo concreto en cada elemento, donde veremos cómo acalarar, oscurecer, saturar, desaturar, manejar escalas de gris, invertir y mezclar colores a un elemento.

Código :

<!Doctype html>
<html lang="es">
   <head>
        <meta charset="utf-8">
         <title>-COMPASS-CSS3-EASY</title>
       <link rel="stylesheet" href="stylesheets/normalize.css">
       <link rel="stylesheet" href="stylesheets/screen.css">
   </head>
   <body>
   <div class="funciones">
      <div class="divuno">
      <p>lighten</p>
      </div>
      <div class="divdos">
      <p>darken</p>
      </div>
      <div class="divtres">
      <p>saturate</p>
      </div>
      <div class="divcuatro">
      </p>desaturate</p>
      </div>
      <div class="divcinco">
      <p>grayscale</p>
      </div>
      <div class="divseis">
      <p>complement</p>
      </div>
      <div class="divsiete">
      <p>invert</p>
      </div>
      <div class="divocho">
      <p>mix</p>
      </div>
   </div>
   </body>
</html>

Código :

/* sass scss*/
/*variable*/
$color-func:#049cdb;
/*[END]*/
@mixin divs{
color:#fff;
display:inline-block;
border:1px solid rgba(#333,0.5);
font-size:22px;
margin:10px 10px;
padding:10px 10px;
text-align:center;
width:100px;
}
div.divuno{
background:lighten($color-func,20%); /* acalara*/
@include divs;
}
div.divdos{
background:darken($color-func,20%); /*oscurece*/
@include divs;
}
div.divtres{
background:saturate($color-func,20%); /*satura*/
@include divs;
}
div.divcuatro{
background:desaturate($color-func,20%); /*desatura*/
@include divs;
}
div.divcinco{
background:grayscale($color-func); /*escala de gris , no necesita porcentaje*/
@include divs;
}
div.divseis{
background:complement($color-func); /*complementa no necesita procentaje*/
@include divs;
}
div.divsiete{
background:invert($color-func); /* invierte no necesita porcentaje*/
@include divs;
}
div.divocho{
background:mix($color-func,red); /*mezcla cualquier color */
@include divs;
}



Texto 3D


Para lograr esto pues necesitamos ir oscureciendo el texto, así que la función darken sería perfecta. Aquí va un ejemplo concreto!

Código :


<!Doctype html>
<html lang="es">
   <head>
      <meta charset="utf-8">
      <title>-COMPASS-CSS3-EASY</title>
       <link rel="stylesheet" href="stylesheets/normalize.css">
      <link rel="stylesheet" href="stylesheets/screen.css">
   </head>
   <body>
      <header id="header">
         <h1>compass y sass text shadow</h1>
      </header>
   </body>
</html>

Código :

/* sass scss*/

#header{
backgroynd:#fff;
border:1px solid rgba(#555,0.5);
padding:10px 0px;
}
@mixin textshadow($color){
color:$color;
text-shadow:1px 1px 0px darken($color,4%),
         2px 2px 0px darken($color,8%),
         3px 3px 0px darken($color,12%),
         4px 4px 0px darken($color,18%),
         5px 5px 0px darken($color,22%),
         5px 5px 2px #333;
}

header  > h1{
font-family:Arial;
font-size:50px;
@include textshadow(#8ac90c);
}



Nos queda esto!


Agregar prefijos en CSS3


Ahora bien, todo diseñador web se aburre de los prefijos propietarios de diferentes navegadores, Compass nos ayuda con eso con la filosofía del Easy CSS3! Veamos un ejemplo:

Código :

<!Doctype html>
<html lang="es">
   <head>
      <meta charset="utf-8">
      <title>-COMPASS-CSS3-EASY</title>
           <link rel="stylesheet" href="stylesheets/normalize.css">
           <link rel="stylesheet" href="stylesheets/screen.css">
   </head>
   <body>
   <div class="easycss3">
    <h2>los prefijos propietarios cansan!</h2>
   </div>
   </body>
</html>


Código :

/* sass css*/
.easycss3{
@include background-image(linear-gradient(top,tomato,darken(tomato,15%)));
border:1px solid rgba(#333,0.5);
@include box-shadow(2px 2px 2px rgba(10,10,10,0.5));
@include border-radius(5px);
margin:50px auto;
padding:100px;
text-align:center;
@include transition(all 0.2s ease-in-out);
width:50%;
}
.easycss3 > h2{
color:#fff;
font-size:30px;
@include text-shadow;
}
.easycss3:hover{
width:60%;
}


Veamos cómo estas líneas de código adquieren todos los prefijos en el css compilado:

Código :

.easycss3 {
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff6347), color-stop(100%, #f92600));
  background-image: -webkit-linear-gradient(top, #ff6347, #f92600);
  background-image: -moz-linear-gradient(top, #ff6347, #f92600);
  background-image: -o-linear-gradient(top, #ff6347, #f92600);
  background-image: linear-gradient(top, #ff6347, #f92600);
  border: 1px solid rgba(51, 51, 51, 0.5);
  -webkit-box-shadow: 2px 2px 2px rgba(10, 10, 10, 0.5);
  -moz-box-shadow: 2px 2px 2px rgba(10, 10, 10, 0.5);
  box-shadow: 2px 2px 2px rgba(10, 10, 10, 0.5);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  margin: 50px auto;
  padding: 100px;
  text-align: center;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  width: 50%;
}

/* line 84, ../sass/screen.scss */
.easycss3 > h2 {
  color: #fff;
  font-size: 30px;
  text-shadow: 0px 0px 1px #aaaaaa;
}

/* line 89, ../sass/screen.scss */
.easycss3:hover {
  width: 60%;
}




Generar gradientes


Juguemos con los gradientes, que les parece?. En este ejemplo he hecho unos botones.

Código :

<html lang="es">
   <head>
      <meta charset="utf-8">
      <title>-COMPASS-CSS3-EASY</title>
       <link rel="stylesheet" href="stylesheets/normalize.css">
      <link rel="stylesheet" href="stylesheets/screen.css">
   </head>
   <body>
          <div class="botones">
      <a href="#" class="btn-uno">linear top<a>
           <a href="#" class="btn-dos">radial center<a>
           <a href="#" class="btn-tres">linear bottom<a>
           <a href="#" class="btn-cuatro">linear mitad<a>
           <a href="#" class="btn-cinco">linear vertical<a>
      <a href="#" class="btn-seis">radial desenfocado<a>
   </div>
   </body>
</html>



Ahora el css

Código :

@mixin btn{
border:1px solid rgba(#333,0.4);
@include border-radius(5px);
@include box-shadow(0px 2px 0px rgba(#fff,0.5)inset);
margin:10px;
color:white;
display:inline-block;
font-size:18px;
font-weight:bold;
padding:25px 25px;
text-align:center;
text-decoration:none;
white-space:nowarap;
width:25%;
}
.btn-uno{
@include background-image(linear-gradient(top,#f89406,darken(#f89406,18%)));
@include btn;
}
.btn-dos{
@include background-image(radial-gradient(center,#9d261d,darken(#9d261d,15%)));
@include btn;
}
.btn-tres{
@include background-image(linear-gradient(right,#c3325f,lighten(#c3325f,20%))); 
@include btn;
}
.btn-cuatro{
@include background-image(linear-gradient(top,#049cdb,rgba(#049cdb,0.8)50%,rgba(#049cdb,0.6)55%));
@include btn;
}
.btn-cinco{
@include background-image(linear-gradient(left,#46a546,rgba(#46a546,0.9)49%,rgba(#46a546,0.7)51%));
@include btn;
}
.btn-seis{
@include background-image(radial-gradient(center,#7a43b6,rgba(#7a43b6,0.7)50%,rgba(#7a43b6,1)));
@include btn;
}


Ahora veamos cómo nos compila en CSS.

Código :

.btn-uno {
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f89406), color-stop(100%, #9e5f04));
  background-image: -webkit-linear-gradient(top, #f89406, #9e5f04);
  background-image: -moz-linear-gradient(top, #f89406, #9e5f04);
  background-image: -o-linear-gradient(top, #f89406, #9e5f04);
  background-image: linear-gradient(top, #f89406, #9e5f04);
  border: 1px solid rgba(51, 51, 51, 0.4);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 2px 0px rgba(255, 255, 255, 0.5) inset;
  -moz-box-shadow: 0px 2px 0px rgba(255, 255, 255, 0.5) inset;
  box-shadow: 0px 2px 0px rgba(255, 255, 255, 0.5) inset;
  margin: 10px;
  color: white;
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
  padding: 25px 25px;
  text-align: center;
  text-decoration: none;
  white-space: nowarap;
  width: 25%;
}

/* line 114, ../sass/screen.scss */
.btn-dos {
  background-image: -webkit-gradient(radial, 50%, 0, 50%, 100, color-stop(0%, #9d261d), color-stop(100%, #5c1611));
  background-image: -webkit-radial-gradient(center, #9d261d, #5c1611);
  background-image: -moz-radial-gradient(center, #9d261d, #5c1611);
  background-image: -o-radial-gradient(center, #9d261d, #5c1611);
  background-image: radial-gradient(center, #9d261d, #5c1611);
  border: 1px solid rgba(51, 51, 51, 0.4);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 2px 0px rgba(255, 255, 255, 0.5) inset;
  -moz-box-shadow: 0px 2px 0px rgba(255, 255, 255, 0.5) inset;
  box-shadow: 0px 2px 0px rgba(255, 255, 255, 0.5) inset;
  margin: 10px;
  color: white;
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
  padding: 25px 25px;
  text-align: center;
  text-decoration: none;
  white-space: nowarap;
  width: 25%;
}

/* line 118, ../sass/screen.scss */
.btn-tres {
  background-image: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(0%, #c3325f), color-stop(100%, #de7d9b));
  background-image: -webkit-linear-gradient(right, #c3325f, #de7d9b);
  background-image: -moz-linear-gradient(right, #c3325f, #de7d9b);
  background-image: -o-linear-gradient(right, #c3325f, #de7d9b);
  background-image: linear-gradient(right, #c3325f, #de7d9b);
  border: 1px solid rgba(51, 51, 51, 0.4);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 2px 0px rgba(255, 255, 255, 0.5) inset;
  -moz-box-shadow: 0px 2px 0px rgba(255, 255, 255, 0.5) inset;
  box-shadow: 0px 2px 0px rgba(255, 255, 255, 0.5) inset;
  margin: 10px;
  color: white;
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
  padding: 25px 25px;
  text-align: center;
  text-decoration: none;
  white-space: nowarap;
  width: 25%;
}

/* line 122, ../sass/screen.scss */
.btn-cuatro {
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #049cdb), color-stop(50%, rgba(4, 156, 219, 0.8)), color-stop(55%, rgba(4, 156, 219, 0.6)));
  background-image: -webkit-linear-gradient(top, #049cdb, rgba(4, 156, 219, 0.8) 50%, rgba(4, 156, 219, 0.6) 55%);
  background-image: -moz-linear-gradient(top, #049cdb, rgba(4, 156, 219, 0.8) 50%, rgba(4, 156, 219, 0.6) 55%);
  background-image: -o-linear-gradient(top, #049cdb, rgba(4, 156, 219, 0.8) 50%, rgba(4, 156, 219, 0.6) 55%);
  background-image: linear-gradient(top, #049cdb, rgba(4, 156, 219, 0.8) 50%, rgba(4, 156, 219, 0.6) 55%);
  border: 1px solid rgba(51, 51, 51, 0.4);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 2px 0px rgba(255, 255, 255, 0.5) inset;
  -moz-box-shadow: 0px 2px 0px rgba(255, 255, 255, 0.5) inset;
  box-shadow: 0px 2px 0px rgba(255, 255, 255, 0.5) inset;
  margin: 10px;
  color: white;
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
  padding: 25px 25px;
  text-align: center;
  text-decoration: none;
  white-space: nowarap;
  width: 25%;
}

/* line 126, ../sass/screen.scss */
.btn-cinco {
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #46a546), color-stop(49%, rgba(70, 165, 70, 0.9)), color-stop(51%, rgba(70, 165, 70, 0.7)));
  background-image: -webkit-linear-gradient(left, #46a546, rgba(70, 165, 70, 0.9) 49%, rgba(70, 165, 70, 0.7) 51%);
  background-image: -moz-linear-gradient(left, #46a546, rgba(70, 165, 70, 0.9) 49%, rgba(70, 165, 70, 0.7) 51%);
  background-image: -o-linear-gradient(left, #46a546, rgba(70, 165, 70, 0.9) 49%, rgba(70, 165, 70, 0.7) 51%);
  background-image: linear-gradient(left, #46a546, rgba(70, 165, 70, 0.9) 49%, rgba(70, 165, 70, 0.7) 51%);
  border: 1px solid rgba(51, 51, 51, 0.4);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 2px 0px rgba(255, 255, 255, 0.5) inset;
  -moz-box-shadow: 0px 2px 0px rgba(255, 255, 255, 0.5) inset;
  box-shadow: 0px 2px 0px rgba(255, 255, 255, 0.5) inset;
  margin: 10px;
  color: white;
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
  padding: 25px 25px;
  text-align: center;
  text-decoration: none;
  white-space: nowarap;
  width: 25%;
}

/* line 130, ../sass/screen.scss */
.btn-seis {
  background-image: -webkit-gradient(radial, 50%, 0, 50%, 100, color-stop(0%, #7a43b6), color-stop(50%, rgba(122, 67, 182, 0.7)), color-stop(100%, #7a43b6));
  background-image: -webkit-radial-gradient(center, #7a43b6, rgba(122, 67, 182, 0.7) 50%, #7a43b6);
  background-image: -moz-radial-gradient(center, #7a43b6, rgba(122, 67, 182, 0.7) 50%, #7a43b6);
  background-image: -o-radial-gradient(center, #7a43b6, rgba(122, 67, 182, 0.7) 50%, #7a43b6);
  background-image: radial-gradient(center, #7a43b6, rgba(122, 67, 182, 0.7) 50%, #7a43b6);
  border: 1px solid rgba(51, 51, 51, 0.4);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 2px 0px rgba(255, 255, 255, 0.5) inset;
  -moz-box-shadow: 0px 2px 0px rgba(255, 255, 255, 0.5) inset;
  box-shadow: 0px 2px 0px rgba(255, 255, 255, 0.5) inset;
  margin: 10px;
  color: white;
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
  padding: 25px 25px;
  text-align: center;
  text-decoration: none;
  white-space: nowarap;
  width: 25%;
}


Como vemos el CSS comilado se hizo bastante extenso!. Veamos los resultados:

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate