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í:
[css:1:163dc0f53e]<linl rel="stylesheet" href="stylesheets/screen.css">[/css:1:163dc0f53e]

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

Funciones de Sass

[css:1:163dc0f53e]
$color:#333; /*variables sass*/

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

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>

[css:1:163dc0f53e]
/* 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;
}
[/css:1:163dc0f53e]

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>

[css:1:163dc0f53e]
/* 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);
}

[/css:1:163dc0f53e]

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>

[css:1:163dc0f53e]
/* 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%;
}

[/css:1:163dc0f53e]
Veamos cómo estas líneas de código adquieren todos los prefijos en el css compilado:
[css:1:163dc0f53e]
.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%;
}
[/css:1:163dc0f53e]

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
[css:1:163dc0f53e]
@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;
}
[/css:1:163dc0f53e]

Ahora veamos cómo nos compila en CSS.
[css:1:163dc0f53e]
.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%;
}
[/css:1:163dc0f53e]

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

Enviar comentario

via Cristalab http://feeds.cristalab.com/~r/clab/~3/VfOpLnacwAs/

Advertisements

Tags:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: