Cómo codificar una disposición de Photoshop con CSSHat, LESSHat y PNGHat

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Final product image — What You'll Be Creating

En el tutorial anterior cubrimos cómo preparar un diseño en Photoshop, listo para la conversión a CSS3 puro y código Base64. En este tutorial vamos a manejar la generación de código real, con la ayuda de los complementos de Photoshop CSSHat y PNGHat realizados por Source, así como FontAwesome y el preprocesador CSS LESS.

¡Vamos a empezar directamente!

Crear la estructura de archivos y carpetas

Para empezar, necesitará crear una nueva carpeta en su computadora para alojar su sitio web estático. En este caso estoy nombrando mi carpeta codedup.

Dentro de esa carpeta, cree un nuevo archivo denominado index.html y añada el siguiente código:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <title>Photoshop to Pure Code with CSSHat and PNGHat</title>
	<link href='http://fonts.googleapis.com/css?family=Roboto:100,300,400,700,900' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
</html>

Aquí, estamos configurando el shell HTML básico para el sitio y enlazando a Roboto, la Fuente de Google que usamos en nuestro PSD, así como cuál será nuestra hoja de estilo CSS.

A continuación, cree dos subcarpetas dentro de su carpeta codedup, una llamada css y la otra llamada LESS. Dentro de la carpeta LESS, cree un archivo denominado style.less. Todos los estilos de su sitio serán escritos en este archivo, y posteriormente compilados en css > style.css.

Nota: Estructura de tu archivo LESS

A medida que avanzamos a lo largo de su archivo style.less debe tener su código organizado en este orden:

Imports
Variables
Mixins
Styles

Recomiendo agregar un comentario en la parte superior de cada sección de su archivo style.less para ayudarle a realizar un seguimiento de dónde deben colocarse diferentes tipos de código.

Si lo prefiere, puede crear archivos separados (parciales) para alojar cada uno de estos tipos de código, importando cada uno de ellos en su archivo principal LESS. Sin embargo, para mantener las cosas sencillas aquí vamos a utilizar sólo un archivo.

Configuración de compilación automática con Prepros

Prepros es una aplicación que gestiona todo tipo de tareas front-end para diseñadores web y desarrolladores. Recopilará nuestro MENOS, actualizaremos automáticamente el navegador cada vez que se realicen cambios en nuestros archivos, e incluso sincronizaremos varios dispositivos si lo deseamos. Descargue e instale Prepros, que puede obtener gratis de: http://alphapixels.com/prepros/

Ejecute la aplicación, luego arrastre la carpeta codedup a la interfaz principal para agregarla como un nuevo proyecto.

Prepros detectará automáticamente el archivo style.less en su carpeta de proyecto y por defecto tendrá "Auto Compile" activado. Cada vez que guarde un cambio en style.less Prepros lo detectará y luego lo compilará en css > style.css.

También puede hacer clic en style.less en la interfaz para ver los ajustes adicionales disponibles, como la opción de comprimir el CSS durante la compilación.

Incorporar LESSHat y Normalize.less.

Ahora sigue adelante y toma los archivos de LESSHat, una biblioteca mixin que se enlaza maravillosamente con CSSHat, así como Normalize.less, una versión de "Normalize.css" escrita en sintaxis menos amigable.

Después de descargar los dos archivos y colocarlos en su proyecto, vuelva a Prepros y verá que los detectó automáticamente. Vamos a importar los dos de estos en nuestro style.less principal y no queremos que la compilación en los archivos individuales CSS, así que haga clic en cada uno y desmarque "Auto Compile".

Ahora abra su archivo style.less en su editor de código preferido y añada estas dos líneas a la parte superior:

1	@import "lesshat.less";
2	@import "normalize.less";

Guarde su archivo y Prepros lo compilará automáticamente para ti, después de lo cual debería ver la siguiente ventana emergente en la esquina inferior derecha de su pantalla:

Ahora debería ver también el archivo style.css dentro de la carpeta css de su proyecto.

Incorporar FontAwesome

Ahora vamos a incorporar FontAwesome en el proyecto agregando los archivos de fuente ellos mismos así como "FontAwesome.less", una biblioteca preestablecida LESS que hace que sea increíblemente fácil colocar los iconos de FontAwesome en sus diseños. Todo lo que tenemos que hacer es importar el archivo y luego las clases FontAwesome se vuelven instantáneamente accesibles.

Verá cómo esto funciona en la práctica más adelante en el tutorial cuando agregamos nuestro elemento "big down arrow".

Comience creando una subcarpeta llamada font-awesome dentro de su carpeta LESS. Hay bastantes archivos en la biblioteca de FontAwesome así los mantendremos aquí para mantenernos organizados

Descargar FontAwesome como un zip desde: https://github.com/FortAwesome/Font-Awesome

Extraiga la carpeta y copie todos los archivos dentro de su carpeta less, luego péguelos en la carpeta font-awesome que acaba de crear en su proyecto. A continuación, copie la carpeta fonts completa de la descarga de FontAwesome descomprimida y péguela como una subcarpeta en su proyecto.

Su estructura completa de archivos y carpetas de proyecto debería tener el siguiente aspecto:

Prepros detectará nuevamente nuevos archivos LESS, así que desmarque "Auto Compile" en cualquier archivo que aparezca ahora en la interfaz.

Agregue la siguiente línea a su archivo style.less, debajo de las líneas que agregó anteriormente:

1	@import "font-awesome/font-awesome.less";

Su proyecto ahora tiene todas las importaciones LESS y los archivos de fuentes que necesita en su lugar, y la compilación automática activada, por lo que estamos listos para comenzar a traducir su PSD a código.

Incorporar la imagen de fondo como Base64

En el tutorial anterior elegimos el patrón llamado "Satin Weave" para azulejos a través de nuestro fondo debido a su pequeño tamaño y bajo número de colores. Ahora vamos a usar el plugin PNGHat para convertirlo en una cadena de código Base64.

Abra el PSD en Photoshop. Sabemos que las dimensiones del patrón son 24px de ancho por 12px de alto, así que adelante y utilizar su marquesina para crear una selección de ese tamaño en cualquier parte de su diseño.

Ahora, asegurándose de que la capa de fondo que tiene el patrón aplicado a ella está seleccionada, abra su ventana PNGHat. Todo lo que tiene que hacer es hacer clic en la opción "Base 64" en la fila superior de la ventana, luego haga clic en "Exportar capas seleccionadas".

Aparecerá un diálogo preguntando por la confirmación que desea "Recortar imagen por selección?". Haga clic en Sí y verá su cadena de base64 salir en el espacio inferior de la ventana PNGHat. Haga clic en el botón Copiar.

Vuelva a su archivo style.less y pegue el código que acaba de copiar de PNGHat en su sección "Variables". Eliminar todo de la pegada en el código excepto para url(data.......); y luego agrega @satinweave: al comienzo de la línea. Usted debe terminar con:

@satinweave: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAMAgMAAAAFXpXmAAAABGdBTUEAALGPC/xhBQAAAAlQTFRF8vLy7+/v8fHxxV2ZvQAAADRJREFUCNdVysENADAIQlGWkRj3rodOWeDW0w8+0axlg5wlFW/FGyEdTUpeESKOqXBN8+cB4yUS37/ediwAAAAASUVORK5CYII=);

Ahora estamos listos para colocar nuestra nueva y fácil de usar @satinweave en un estilo para que aparezca en nuestro diseño. Mientras estamos en ello, también agregaremos un par de reglas básicas para la configuración box-sizing y de enlace de sitio.

Agregue el siguiente código a la sección "Styles" de su archivo styles.less:

* {
    .box-sizing(border-box);
}
body {
	background-image: @satinweave;
	overflow-x: hidden;
}
a, a:link, a:visited, a:hover, a:active {
	text-decoration: none;
}

Guarde su archivo para que Prepros compile sus cambios en su archivo style.css.

Vaya a Prepros, haga clic en el botón Más opciones y elija Copiar URL de previsualización (que probablemente será http://localhost:8000) y, a continuación, péguelo en su navegador.

Esto le dará una vista previa de su sitio estático que se recarga automáticamente cada vez que Prepros compila su código.

Ahora debería ver el patrón puro de Base64 en el fondo de la página.

Adición de elementos CSS

Generación de CSS3 con CSSHat

No podría ser más simple tener CSSHat tenga de salida el CSS3 para cada elemento de diseño. Simplemente seleccione la capa en cuestión con la ventana CSSHat abierta y generará automáticamente el código que necesita.

Hay algunas opciones que puede elegir en la configuración de la ventana de CSSHat. En nuestro caso queremos que nuestro código sea emitido como MENOS, y queremos que todos los pequeños botones en la parte inferior de la ventana de CSSHat (comentarios, dimensiones, prefijos, regla) sean desactivados. Su ventana de CSSHat debe tener este aspecto:

Tenga en cuenta que puede hacer que CSSHat genere un código de altura y ancho para los valores de px haciendo clic en el cuarto botón (que parece un pequeño cuadrado con cuadrados más pequeños en sus esquinas). Sin embargo, prefiero escribir mis propios, así que puedo usar más fácilmente los valores de rem / em / % donde los necesito.

Cuando se haya generado el código para la capa seleccionada, haga clic en el botón Copiar en la parte inferior de la ventana, listo para pegarlo en su archivo style.less.

El proceso de adición de elementos

A continuación, procedemos a añadir el resto de los elementos de diseño a través de CSS.

Debido a que CSSHat hace que la cosa sea tan fácil, podemos usar un proceso de stock estándar que se repite hasta que su diseño esté completamente codificado.

Para cada elemento comenzaremos añadiendo el HTML correspondiente al archivo index.html.

Después de eso, cada elemento nuevo implicará la adición de una o más mixins LESS, que usaremos para mantener el CSS3 generado por CSSHat. Es útil mantener el código CSSHat generado separado del resto de su código de estilo para que pueda actualizarlo fácilmente si cambia su diseño. Debería agregar nuevos mixins a la sección "Mixins" de su archivo style.less, como se describió anteriormente.

Por último, agregará los estilos CSS reales que se enviarán a su hoja de estilos. Estos estilos incorporarán sus mezclas, así como algún código adicional que proporcionare para controlar el diseño, las dimensiones y los aspectos que Photoshop no puede manejar, como el peso numérico de las letras y los bordes de un lado a la vez. Sus estilos deben agregarse a la sección "Styles" de su archivo style.less.

Estaremos creando cada elemento de diseño en el mismo orden que lo hicimos en la parte anterior de este tutorial para que sea fácil volver a consultar si es necesario.

Añadir el borde superior

Añadir HTML:

Agregue lo siguiente entre sus etiquetas body de apertura y cierre.

1	<br><div class="toptrim"></div>

CSSHat:

Seleccione la capa "top trim" de su PSD y copie el código CSSHat generado:

1	opacity: .5;
2	background-color: #ddd;
3	.box-shadow(~"0 2px 1px #fff, inset 0 -2px 4px #c8c8c8");

Nuevo Mixin:

En tu archivo style.less crea un nuevo mixin llamado TopTrim y pega en tu código CSSHat así:

.TopTrim(){
opacity: .5;
background-color: #ddd;
.box-shadow(~"0 2px 1px #fff, inset 0 -2px 4px #c8c8c8");
}

Nuevo estilo:

Ahora incorporaremos su nuevo mixin en la sección "Styles" de su archivo style.less. Agregue el nuevo código de estilo siguiente:

//Top trim
.toptrim {
height: 8px;
margin-bottom: 62px;
.TopTrim();
}

En el código anterior estamos sacando nuestro CSSHat estilos generados a través de la mixin TopTrim, así como la configuración de las dimensiones de diseño que necesitamos.

Resultado:

Ahora debería ver su "top trim" corriendo por la parte superior de su sitio.

Crear el contenedor del menú

Añadir HTML:

Añada lo siguiente debajo del último HTML que agregó:

1	<nav class="menuwrap">
2	</nav>

CSSHat a Nuevo Mixin:

Seleccione la capa "menuwrap" de su PSD, copie el código generado por CSSHat y péguelo en un nuevo mixin llamado MenuWrapBG:

.MenuWrapBG(){
.border-radius(12px);
background-color: #f9f9f9;
.box-shadow(~"0 1px 2px #fff, inset 0 1px 10px rgba(0,0,0,.15)");
.background-image(~"linear-gradient(bottom, #fff 0%, #f3f3f3 100%)");
}

Nuevo Estilo

Agregue el nuevo código de estilo siguiente:

//Menu
.menuwrap {
min-height: 61px;
max-width: 1200px;
width:100%;
margin: 0 auto;
padding: 5px;
.MenuWrapBG;
}

Resultado:

Ahora debería ver:

El fondo del menú

Añadir HTML:

Actualice su código de menú existente a lo siguiente:

1	<nav class="menuwrap">
2	<ul class="mainmenu">
3	</ul>
4	</nav>

CSSHat a Nuevo Mixin:

Seleccione la capa de menubg de su PSD y copie el CSSHat código generado en un nuevo mixin llamado MainMenuBG:

.MainMenuBG(){
border: 1px solid #e4e4e4;
.border-radius(11px);
background-color: #fff;
.box-shadow(~"0 3px 4px rgba(193,193,193,.75)");
.background-image(~"linear-gradient(bottom, #e5e5e5 0%, #fff 100%)");
}

Nuevo estilo:

Agregue el nuevo código de estilo siguiente:

ul.mainmenu {
    padding: 0 15px;
	margin: 0;
	list-style-type: none;
	min-height:50px;
	.MainMenuBG();
}

Resultado:

Ahora debería ver:

Adición de los elementos de menú

Añadir HTML:

Actualice su código de menú existente a lo siguiente:

1	<nav class="menuwrap">
2	<ul class="mainmenu">
3	<li><a href="#">Page</a></li>
4	<li class="current"><a href="#">Current</a></li>
5	<li><a href="#">Page</a></li>
6	<li><a href="#">Page</a></li>
7	</ul>
8	</nav>

CSSHat al nuevo fondo del menú Fondo Mixin:

En su PSD, seleccione uno de los rectángulos de su elemento de menú y copie el código generado CSSHat en un nuevo mixin llamado MenuItemBG:

1	.MenuItemBG(){
2	.background-image(~"linear-gradient(bottom, #eee 0%, #e4e4e4 25.49%, #fbfbfb 100%)");
3	}

CSSHat al nuevo menú Mixin Texto:

En su PSD, seleccione el texto de uno de sus elementos de menú y copie el código generado CSSHat en un nuevo mixin llamado MenuItemText:

.MenuItemText(){
color: #5b5b5b;
font-family: "Roboto";
font-size: 18px;
text-shadow: 0 1px 0 #fff;
}

Actualizar su estilo de menú:

Actualice el estilo actual del menú principal ul.mainmenu como sigue.

ul.mainmenu {
    padding: 0 15px;
	margin: 0;
	list-style-type: none;
	min-height:50px;
	.MainMenuBG();
	li {
		display: block;
		float: left;
		padding: 0;
		border-top: 1px solid rgba(0,0,0,0);
		border-bottom: 1px solid #dddddd;
		border-right: 1px solid #dddddd;
		border-left: 1px solid rgba(0,0,0,0);
		&:first-of-type{
			border-left: 1px solid #dddddd;
		}
		.MenuItemBG();
		a, a:link, a:visited {
			display:block;
			height: 47px;
			line-height: 47px;
			padding: 0 30px;
			//added font weight
			font-weight: 400;
			.MenuItemText();
		}
	}
}

Estamos usando reglas de anidamiento LESS para que todos los niños li de ul.mainmenu se verán afectados.

También recordarás en el tutorial anterior que tuvimos que usar manualmente la herramienta de línea para facilitar una selección de color para los bordes de los elementos de nuestro menú, dada la imposibilidad de Photoshop de configurar cada lado de la frontera individualmente. En lo anterior, verá que incorporamos estos estilos de borde usando el código de color #dddddd que seleccionamos durante esa etapa.

También añadimos unos bordes transparentes en los lados superior e izquierdo de los elementos del menú. La razón de esto es nuestro efecto actual del elemento / hover utilizará las fronteras en los cuatro lados, así que necesitamos asegurar allí es una anchura que empareja en artículos del menú en sus estados del defecto y del hover.

Y finalmente hemos añadido manualmente el correcto font-weight de 400 al texto del elemento de menú porque Photoshop sólo puede trabajar con valores como "normal" o "bold".

Resultado:

Ahora debería ver:

Crear estados "Current" y de "Hover"

En este caso, no necesitamos ningún HTML adicional ya que ya hemos añadido un elemento de menú con la clase "current" que se le aplicó en el último paso.

CSSHat al nuevo menú actual Mixin Elemento de fondo:

En su PSD, seleccione el rectángulo de su elemento de menú "current" y copie el código generado CSSHat en un nuevo mixin llamado CurrentMenuItemBG:

.CurrentMenuItemBG(){
border: 1px solid #e62d4e;
background-color: #ef3d5d;
.box-shadow(~"0 1px 0 #cc2241, inset 0 2px 5px rgba(250,171,185,.6)");
.background-image(~"linear-gradient(bottom, #ef3d5d 0%, #dc2344 25.49%, #fc6b85 100%)");
}

CSSHat al nuevo menú actual Texto Mixin:

Ahora seleccione el texto de su elemento de menú "current" y copie el código generado por CSSHat en un nuevo mixin denominado CurrentMenuItemText:

.CurrentMenuItemText(){
color: #fff;
font-family: "Roboto";
font-size: 18px;
text-shadow: 0 -1px 0 #b50020;
}

Actualizar estilo de menú:

Actualice el estilo actual del menú principal ul.mainmenu como sigue.

ul.mainmenu {
    padding: 0 15px;
	margin: 0;
	list-style-type: none;
	min-height:50px;
	.MainMenuBG();
	li {
		display: block;
		float: left;
		padding: 0;
		border-top: 1px solid rgba(0,0,0,0);
		border-bottom: 1px solid rgba(0,0,0,0.05);
		border-right: 1px solid rgba(0,0,0,0.05);
		border-left: 1px solid rgba(0,0,0,0);
		&:first-of-type{
			border-left: 1px solid rgba(0,0,0,0.05);
		}
		.MenuItemBG();
		a, a:link, a:visited {
			display:block;
			height: 47px;
			line-height: 47px;
			padding: 0 30px;
			//added font weight
			font-weight: 400;
			.MenuItemText();
		}
		&:hover {
			.CurrentMenuItemBG();
			a, a:link, a:visited {
				.CurrentMenuItemText()
			}
		}
	}
	li.current {
		.CurrentMenuItemBG();
		a, a:link, a:visited {
			.CurrentMenuItemText()
		}
	}
}

Y para permitir que los elementos del menú se empujen en varias líneas si hay dos muchos para el ancho disponible, agregue el siguiente código clearfix debajo de su clase de menú existente.

ul.mainmenu:before,
ul.mainmenu:after {
    content: " ";
    display: table;
}

ul.mainmenu:after {
    clear: both;
}

Resultado:

Ahora debería ver el estilo "current" aplicado tanto al elemento actual del menú actual como al efecto hover:

Añadir el texto principal

Añadir HTML:

Agregue el siguiente código debajo de su menú HTML:

<div class="maintext">
    <p class="thintext">Did you know you can</p>
	<p class="thicktext">Have Your Photoshop</p>
	<p class="thintext">AND YOUR</p>
	<p class="thicktext">Pure Code Too?</p>
</div>

CSSHat a Nuevo Mixin, Delgado Texto:

En su PSD, seleccione la primera o tercera línea de texto principal (texto gris fino) y copie el código generado CSSHat en un nuevo mixin llamado ThinText:

.ThinText(){
color: #6b6b6b;
font-family: "Roboto";
font-size: 48px;
}

CSSHat a nuevo Mixin, Texto grueso :

En su PSD, seleccione la segunda o cuarta línea de texto principal (texto grueso) y copie el código generado CSSHat en un nuevo mixin llamado ThickText:

.ThickText(){
color: #ef3d5d;
font-family: "Roboto";
font-size: 80px;
font-weight: bold;
}

Nuevos Estilos:

Agregue el nuevo código de estilo siguiente:

//Main text lines
.maintext {
    padding: 70px 0;
	text-align: center;
}
.thintext {
	margin: 0.425em 0;
	//added font weight
	font-weight: 100;
	.ThinText();
}

.thicktext {
	margin: 0.425em 0;
	.ThickText();
}

Resultado:

Ahora debería ver esto debajo de su menú:

Crear el panel de información de fondo

Añadir HTML:

Agregue el código siguiente:

1	<div class="panel">
2	</div>

CSSHat a nuevo Mixin

En su PSD, seleccione su rectángulo de fondo del panel de información y copie el código generado CSSHat en un nuevo mixin llamado PanelBG:

//Panel mixins
.PanelBG(){
border: 1px solid #d7d7d7;
.border-radius(15px);
background-color: #fff;
.box-shadow(~"0 3px 4px rgba(193,193,193,.27)");
}

Nuevo estilo:

Agregue el nuevo código de estilo siguiente:

.panel {
    max-width: 1200px;
	width:100%;
	margin: 0 auto;
	padding-bottom: 50px;
	text-align: center;
	.PanelBG();
}

Resultado:

Ahora deberías ver el fondo del panel de información, actualmente vacío:

Fondo y texto del encabezado del panel

Añadir HTML:

Actualice su HTML del panel de información a lo siguiente:

1	<div class="panel">
2	<div class="panelhead">IN THIS TUTORIAL:</div>
3	</div>

CSSHat a nuevo Mixin, Panel de cabecera de fondo:

En su PSD, seleccione la capa de fondo del encabezado del panel y copie el código generado CSSHat en un nuevo mixin denominado PanelHeadBG:

.PanelHeadBG(){
.border-radius(10px);
background-color: #ef3d5d;
.box-shadow(~"0 3px 0 #cc2241, inset 0 0 5px rgba(222,42,74,.6)");
.background-image(~"linear-gradient(bottom, #ee2c4f 0%, #dc2344 10.5%, #fc6b85 100%)");
}

Agregar cabecera del panel Segunda sombra:

Ahora vamos a añadir una segunda sombra a la mezcla de PanelHeadBG que ya hemos creado. Recordaremos de la Parte 1 de este tutorial que tuvimos que crear sombras adicionales en las segundas capas debido a que Photoshop no podía manejar sombras múltiples en una capa.

En su PSD, seleccione la segunda capa de sombra del panel y copie sólo el código entre los paréntesis en la línea de box-shadow, que debería ser:

1	0 5px 3px rgba(0,0,0,.27)

En la mezcla de PanelHeadBG que acaba de crear, agregue una coma antes del paréntesis de cierre de la línea existente box-shadow y luego pegue el código que acaba de tomar de CSSHat para darle:

1	.box-shadow(~"0 3px 0 #cc2241, inset 0 0 5px rgba(222,42,74,.6), 0 5px 3px rgba(0,0,0,.27)");

CSSHat a Nueva Mixin, panel encabezado de texto:

En su PSD, seleccione el texto del encabezado del panel y copie el código generado CSSHat en un nuevo mixin denominado PanelHeadText:

.PanelHeadText(){
color: #fff;
font-family: "Roboto";
font-size: 24px;
text-shadow: 0 -1px 0 #b50020;
}

Nuevo estilo:

Agregue el nuevo código de estilo siguiente:

.panelhead {
    margin: 60px -15px;
	padding: 20px;
	.PanelHeadBG();
	//added font weight
	font-weight: 400;
	.PanelHeadText();
}

Tenga en cuenta que hemos añadido font-weight de 400 manualmente, Photoshop no puede procesar valores de peso de fuente numérica.

Resultado:

Ahora debería ver:

Crear el texto del panel

Añadir HTML:

Actualice su código HTML de panel existente de nuevo, esta vez a lo siguiente:

<div class="panel">
    <div class="panelhead">IN THIS TUTORIAL:</div>
	<p>Learn how to design in Photoshop and output<br />standards ready pure CSS3 + Base64 code.</p>
	<p>That means no images and minimal HTTP<br />requests for ultra efficient loading.</p>
	<p class="usingthese">CSSHat <span class="highlight">+</span> PNGHat <span class="highlight">+</span> LESS <span class="highlight">+</span> FontAwesome</p>
</div>

CSSHat a Nuevo Mixin, Texto del panel predeterminado:

En su PSD, seleccione la capa de texto más ligero del panel de información y copie el código generado CSSHat en un nuevo mixin llamado PanelText:

.PanelText(){
color: #6b6b6b;
font-family: "Roboto";
font-size: 36px;
}

CSSHat a nuevo Mixin, Texto más grande del panel:

Ahora seleccione la capa que contiene el texto del panel de información de peso más grueso y copie el código generado CSSHat en un nuevo mixin llamado UsingTheseText:

.UsingTheseText(){
color: #6b6b6b;
font-family: "Roboto";
font-size: 48px;
}

Nuevo estilo:

Actualice el estilo de .panel existente a:

.panel {
    max-width: 1200px;
	width:100%;
	margin: 0 auto;
	padding-bottom: 50px;
	text-align: center;
	.PanelBG();
	.PanelText();
	font-weight: 100;
	p {
		margin: 1.2em 0;
	}
}

Esto agrega la mezcla de PanelText, así como un peso de fuente numérica y un cierto control de margen para los párrafos en el panel de información.

También agregue el siguiente nuevo código de estilo, debajo de la clase .panel:

.usingthese {
    //added font weight
	font-weight: 900;
	.UsingTheseText();
}

.highlight {
	color: #EF3D5C;
}

Esto aplica el estilo de fuente más grande y más grueso a la línea inferior de texto, así como agregar resaltados coloreados.

Resultado:

Ahora debería ver:

Añadir la flecha grande hacia abajo

Añadir HTML:

Agregue el siguiente código debajo de su panel de información:

1	<div class="downarrow"><i class="fa fa-arrow-down"></i></div>

Debido a que hemos incorporado Font Awesome.less en su proyecto anteriormente, este código HTML colocará automáticamente nuestra flecha hacia abajo simplemente mediante la aplicación de las clases fa y fa-arrow-down a un elemento i (icono).

Al principio aparecerá en su estado por defecto pequeño, negro, así que todo lo que necesitamos hacer es estilo como lo haríamos con cualquier otro elemento de texto.

CSSHat a Nuevo Mixin:

En su PSD, seleccione su capa de flecha hacia abajo y copie el código generado CSSHat en un nuevo mixin llamado DownArrow:

.DownArrow(){
opacity: .3;
color: #6b6b6b;
font-family: "FontAwesome";
font-size: 200px;
}

Nuevo estilo:

Agregue el nuevo código de estilo siguiente:

.downarrow {
    margin: 80px auto;
	text-align: center;
	i {
		.DownArrow();
	}
}

Resultado:

Ahora debería ver esto debajo de su panel de información:

Inicio del botón "Start"

Añadir HTML:

Agregue el siguiente código debajo de la flecha grande html:

<div class="buttonrow">
<a href="https://webdesign.tutsplus.com/tutorials/photoshop-to-pure-code-with-csshat-and-pnghat-part-1--cms-20786" target="_blank">
<button class="start"><span class="arrowcircle"><i class="rightarrow fa fa-caret-right"></i></span>
Start the Tutorial
</button>
</a>
</div>

Al igual que con nuestra flecha hacia abajo, nuestro uso de las clases FontAwesome fa y fa-caret-right colocan automáticamente el icono que queremos usar, en este caso una flecha apuntando a la derecha.

CSSHat al nuevo Mixin, Botón Fondo:

En su PSD, seleccione la capa de rectángulo botón de inicio y copie el código generado CSSHat en un nuevo mixin llamado StartButtonBG:

.StartButtonBG(){
.border-radius(10px);
background-color: #ef3d5d;
.box-shadow(~"0 3px 0 #cc2241, inset 0 0 5px rgba(222,42,74,.6)");
.background-image(~"linear-gradient(bottom, #ee2c4f 0%, #dc2344 10.5%, #fc6b85 100%)");
}

Agregar al botón de fondo una segunda sombra:

Al igual que lo hicimos con el encabezado del panel, ahora agregamos una segunda sombra a la mezcla que acabamos de crear.

En su PSD, seleccione la segunda capa de sombra de su botón y copie sólo el código entre los paréntesis en la línea de box-shadow:

1	0 5px 3px rgba(0,0,0,.27)

En el mixin StartButtonBG, agregue una coma antes del paréntesis de cierre de la línea box-shadow existente y luego pegue el código que acaba de tomar de CSSHat para darle:

1	.box-shadow(~"0 3px 0 #cc2241, inset 0 0 5px rgba(222,42,74,.6), 0 5px 3px rgba(0,0,0,.27)");

CSSHat a nuevo Mixin, botón Texto:

Seleccione la capa de texto de su botón de inicio y copie el código generado CSSHat en un nuevo mixin llamado StartButtonText:

.StartButtonText(){
color: #fff;
font-family: "Roboto";
font-size: 36px;
text-shadow: 0 -1px 0 #b50020;
}

Nuevo estilo:

Agregue el nuevo código de estilo siguiente:

.buttonrow {
    text-align: center;
	margin: 20px auto;
}
.start {
	border: 0;
	padding: 0.75em 1em;
	display: inline-block;
	.StartButtonBG();
	.StartButtonText();
}

La primera clase .buttonrow actúa simplemente para centrar el botón, mientras que la segunda clase .start aplica tanto el fondo del botón como el estilo del texto.

Resultado:

Ahora debería ver:

botones en Círculo y flecha derecha

En este caso, no necesitamos HTML adicional mientras trabajamos con el botón HTML agregado en el último paso.

CSSHat a nuevo Mixin, Flecha en forma de Círculo:

En su PSD, seleccione la capa de círculo pequeño sobre su botón y copie el CSSHat código generado en un nuevo mixin llamado ArrowCircle:

.ArrowCircle(){
.border-radius(23px);
background-color: #ef3d5d;
.background-image(~"linear-gradient(bottom, #ef4f6b 0%, #e32d4f 100%)");
}

CSSHat a Nuevo Mixin, Flecha Derecha:

Ahora seleccione la pequeña flecha derecha que apunta la capa de flecha y copie el código generado CSSHat en un nuevo mixin llamado RightArrow:

.RightArrow(){
color: #fff;
font-family: "FontAwesome";
font-size: 36px;
}

Nuevo estilo:

Agregue el nuevo código de estilo siguiente:

.arrowcircle {
    display: inline-block;
	text-align: center;
	padding-left: 7px;
	margin-right: 10px;
	.size(47px);
	.ArrowCircle();
}

i.rightarrow {
	font-style: normal;
	display: block;
	line-height: 50px;
	.RightArrow();
}

Resultado:

Ahora debería ver:

Estilizar el borde inferior

Añadir HTML:

Agregue el siguiente código debajo del botón de inicio HTML:

1	<div class="bottomtrim"><div class="centercircle"></div></div>

CSSHat a Nuevo Mixin:

En su PSD, seleccione la capa que contiene los dos pequeños círculos concéntricos grises y copie el código generado CSSHat en un nuevo mixin denominado CenteredCircle:

.CenteredCircle(){
border: 5px solid #ddd;
.border-radius(20px);
background-color: #f1f1f1;
.background-image(~"radial-gradient(center center, 100px 100px, #ddd 0%, #ddd 39.99%, #f1f1f1 44.75%, #f1f1f1 100%)");
}

Ajustar el código del degradado radial:

Este es el lugar en el que encontré que la salida CSSHat no coincidía exactamente con lo que tenía en el PSD. Cambie la línea de background-image del mixin, reemplazando el center center, 100px 100px con el center, ellipse cover asi:

1	.background-image(~"radial-gradient(center, ellipse cover, #ddd 0%, #ddd 39.99%, #f1f1f1 44.75%, #f1f1f1 100%)");

Nuevo estilo:

Agregue el nuevo código de estilo siguiente:

.bottomtrim {
    margin: 120px 0;
	height: 15px;
	border-top: 5px solid #ddd;
	border-bottom: 5px solid #ddd;
	text-align: center;
}

.centercircle {
	display: inline-block;
	margin-top: -17px;
	.size(40px);
	.CenteredCircle();
}

La primera clase .bottomtrim crea las dos líneas grises de nuestro borde inferior, mientras que la clase .centeredcircle clasifica y posiciona nuestros círculos concéntricos grises sobre las dos líneas.

Resultado:

Ahora debería ver esto en la parte inferior de su diseño:

Terminando

¡Eso es! Ahora debe tener su diseño estático completo en toda su gloria pura, parecido a esto:

Extras

Hemos mantenido todo muy sencillo para los propósitos de este tutorial, pero hay mucho más que puedes hacer con el código que participa en este proceso si lo prefieres.

En algunos casos, hemos duplicado los estilos reutilizando las declaraciones y los colores de las familias de fuentes, por lo que puede definir las familias y los colores de las fuentes como variables y usarlas para facilitarlas más tarde.

CSSHat también admite la salida en Stylus + Nib y Sass / SCSS + Compass, así que si cualquiera de esos es su preprocesador preferido puede intentar usarlos en su lugar.