Cara Koding Layout Photoshop dengan CSSHat, LESSHat dan PNGHat

() translation by (you can also view the original English article)

Final product image — What You'll Be Creating

Dalam tutorial sebelumnya, kita membahas bagaimana mempersiapkan sebuah desain di Photoshop, siap untuk dikonversi menjadi kode CSS3 dan Base64 yang murni. Dalam tutorial ini kita akan menangani pembuatan kode aktual, dengan bantuan Photoshop plugin CSSHat dan PNGHat yang dibuat oleh Source, serta FontAwesome dan CSS preprocessor LESS.

Mari kita dalami langsung!

Buat File dan Struktur Folder Anda

Untuk memulai Anda perlu membuat folder baru pada komputer Anda untuk menjadi host website statis Anda. Dalam hal ini saya namakan folder saya codedup.

Di dalam folder itu buat sebuah file baru yang bernama index.html dan tambahkan kode berikut:

<!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>

Di sini, kita akan menyiapkan kerangka HTML dasar untuk situs dan menghubungkan di Roboto, Google Font yang kita gunakan pada PSD, serta yang akan kita buat untuk CSS stylesheet.

Selanjutnya, buat dua subfolder dalam folder codedup Anda, satu bernama css dan yang lain bernama LESS. Di dalam folder LESS buat sebuah file bernama style.less. Semua styles untuk situs Anda akan ditulis ke dalam file ini, dan kemudian di-compile menjadi css > style.css.

Catatan: Struktur file LESS Anda

Bersamaan dengan itu file style.less Anda harus memiliki kode yang terorganisir dalam urutan berikut:

Imports
Variables
Mixins
Styles

Saya merekomendasikan menambahkan komentar di bagian atas setiap bagian di file style.less Anda untuk membantu Anda melacak di mana jenis kode harus ditempatkan.

Jika Anda suka, Anda dapat membuat file terpisah (parsial) untuk menempatkan masing-masing jenis kode, mengimpor masing-masing ke dalam file LESS utama. Namun untuk menjaga hal-hal sederhana di sini kita akan menggunakan hanya satu file.

Mengatur Auto Compiling dengan Prepros

Prepros adalah sebuah aplikasi yang menangani semua jenis tugas untuk front end web designer dan developer. Itu akan meng-compile LESS, auto-refresh browser setiap kali ada perubahan pada file kita, bahkan menyinkronkan beberapa perangkat jika kita ingin. Download dan instal Prepros, yang Anda bisa mendapatkan gratis dari: http://alphapixels.com/prepros/

Jalankan aplikasi, kemudian geser folder codedup ke antarmuka utama untuk menambahkannya sebagai sebuah proyek baru.

Prepros akan secara otomatis mendeteksi file style.less dalam folder proyek dan secara default "Auto Compile" akan diaktifkan. Setiap saat Anda menyimpan perubahan ke style.less Prepros akan mendeteksi itu kemudian meng-compile ke css > style.css.

Anda juga dapat mengklik style.less di antarmuka untuk melihat pengaturan tambahan yang tersedia, seperti opsi mengompresi CSS selama kompilasi.

Menggabungkan LESSHat dan Normalize.less

Lanjut dan ambil file untuk LESSHat, sebuah mixin library yang mengikat indah dengan CSSHat, serta Normalize.less, sebuah versi dari "Normalize.css" ditulis dalam sintaks LESS yang mudah.

Setelah men-download dua file dan menempatkan mereka dalam proyek Anda, kembali ke Prepros dan Anda akan melihat ini secara otomatis mendeteksi keduanya. Kita akan mengimpor kedua ke style.less utama dan kita tidak ingin mereka menyusun ke dalam file CSS individu, jadi klik masing-masing dan hapus centang "Auto Compile".

Sekarang buka file style.less Anda di editor kode pilihan Anda dan tambahkan dua baris ke bagian atas:

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

Simpan file Anda dan Prepros secara otomatis akan mengkompilasi untuk Anda, setelah itu Anda akan melihat popup berikut di sudut kanan bawah layar Anda:

Anda sekarang seharusnya melihat file style.css di dalam folder css proyek Anda.

Memasukkan FontAwesome

Kita sekarang akan memasukkan FontAwesome ke dalam proyek dengan menambahkan file font tersebut serta "FontAwesome.less", prebuilt LESS library yang membuatnya sangat mudah untuk menempatkan ikon FontAwesome dalam desain Anda. Yang harus kita lakukan adalah impor file dan kemudian kelas FontAwesome segera dapat diakses.

Anda akan melihat bagaimana ini bekerja dalam prakteknya kemudian dalam tutorial ketika kita menambahkan elemen "big down arrow".

Mulailah dengan membuat subfolder bernama font-awesome dalam folder LESS Anda. Ada beberapa file dalam library FontAwesome sehingga kita akan menyimpan mereka di sini agar kita tetap yang terorganisir.

Download FontAwesome sebagai zip dari: https://github.com/FortAwesome/Font-Awesome

Ekstrak folder dan salin semua file dari dalam folder less, kemudian tempel ke folder font-awesome yang baru Anda buat dalam proyek Anda. Kemudian salin semua folder font dari FontAwesome yang sudah diekstrak, dan sisipkan sebagai subfolder ke proyek Anda.

Struktur file dan folder secara lengkap pada proyek Anda seharusnya terlihat seperti ini:

Prepros akan mendeteksi file LESS baru lagi, jadi jangan centang "Auto Compile" pada file yang sekarang muncul dalam antarmuka.

Tambahkan baris berikut ke file style.less Anda, di bawah baris Anda ditambahkan sebelumnya:

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

Proyek Anda sekarang memiliki semua file LESS dan font yang Anda perlukan, dan kompilasi otomatis yang diaktifkan, jadi kita siap untuk mulai mengkonversi PSD Anda ke dalam kode.

Menggabungkan Gambar Background sebagai Base64

Dalam tutorial sebelumnya kita memilih pola yang bernama "Satin Weave" untuk menata backgroudn karena ukurannya yang kecil dan jumlah warna yang rendah. Kita sekarang akan menggunakan PNGHat plugin untuk mengubahnya menjadi serangkaian kode Base64.

Buka file PSD di Photoshop. Kita ketahui dimensi pola 24px kali 12px, jadi teruskan dan gunakan marquee Anda untuk membuat pilihan ukuran yang sesuai desain Anda.

Sekarang, pastikan lapisan background dengan pola yang diterapkan sudah dipilih, buka jendela PNGHat. Yang harus Anda lakukan adalah klik opsi "Base 64" di baris atas jendela, kemudian klik "Export Selected Layers".

Anda akan melihat dialog yang muncul meminta konfirmasi "Crop image by selection?". Klik Ya dan Anda akan melihat output string Base64 Anda di bagian bawah jendela PNGHat. Klik tombol Copy.

Kembali ke file style.less dan paste kode yang baru saja disalin dari PNGHat ke bagian "Variables" Anda. Hapus semuanya dari kode yang disisipkan kecuali url(data...); kemudian tambahkan @satinweave: di awal baris. Hasilnya seharusnya seperti ini:

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

Sekarang kita siap untuk menempatkan variabel yang baru dan mudah untuk digunakan, @satinweave ke dalam styles sehingga akan muncul di desain kita. Sementara itu kita juga akan menambahkan beberapa aturan dasar untuk lebar situs box-sizing dan pengaturan link.

Tambahkan kode berikut ke bagian "Styles" file 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;
}

Simpan file Anda sehingga Prepros akan meng-compile perubahan ke file style.css Anda.

Pada Prepros, klik tombol More Options dan pilih Copy live preview URL, (yang kemungkinan besar akan menjadi http://localhost:8000), kemudian sisipkan ke dalam browser Anda.

Langkah ini akan memberi Anda pratinjau situs statis yang secara otomatis di-reload setiap Prepros mengkompilasi kode Anda.

Anda sekarang seharusnya melihat pola Base64 tertata di background halaman.

Menambahkan Elemen CSS

Menghasilkan CSS3 dengan CSSHat

Menggunakan CSSHat untuk menghasilkan output CSS3 pada setiap elemen desain sangatlah sederhana. Cukup pilih layer yang dimaksud dengan jendela CSSHat terbuka dan secara otomatis akan menghasilkan kode yang Anda butuhkan.

Ada beberapa pilihan yang dapat Anda pilih dari dalam pengaturan jendela CSSHat. Dalam kasus ini, kita ingin output kode sebagai LESS, dan kita ingin semua tombol kecil di bagian bawah jendela CSSHat (comments, dimensions, prefixes, rule) agar dinonaktifkan. Jendela CSSHat Anda akan terlihat seperti ini:

Perhatikan bahwa Anda dapat membuat CSSHat menghasilkan kode tinggi dan lebar dalam nilai px dengan mengklik tombol keempat (yang terlihat seperti kotak kecil dengan kotak yang lebih kecil di sudutnya). Namun saya lebih suka menulisnya sendiri, jadi saya bisa lebih mudah menggunakan nilai rem / em /% di mana saya membutuhkannya.

Ketika kode untuk layer yang dipilih telah dihasilkan lalu tinggal klik tombol Copy di bagian bawah jendela, siap untuk disalin ke dalam file style.less Anda.

Proses Penambahan Elemen

Sekarang kita akan lanjut menambahkan sisa desain elemen Anda melalui CSS.

Karena CSSHat membuat hal sangat mudah kita dapat menggunakan cukup banyak proses standar yang baru saja diulang sampai desain Anda sepenuhnya dikodekan.

Untuk setiap elemen yang kita akan mulai dengan menambahkan HTML yang sesuai untuk index.html file.

Setelah itu, setiap elemen baru akan terlibat dalam menambahkan satu atau lebih mixins LESS, yang kita akan gunakan untuk menahan CSS3 yang dihasilkan oleh CSSHat. Akan sangat membantu untuk menjaga CSSHat Anda menghasilkan kode terpisah dari kode style lainnya sehingga dapat dengan mudah memperbaruinya jika Anda mengubah desain. Anda harus menambahkan mixins baru ke bagian "Mixins" pada file style.less Anda, seperti yang dijelaskan di atas.

Akhirnya, Anda akan menambahkan style CSS aktual yang akan di-output ke stylesheet Anda. Style ini akan menggabungkan mixins Anda serta beberapa kode tambahan yang akan saya berikan untuk mengontrol tata letak, dimensi, dan aspek-aspek yang tidak bisa ditangani Photoshop seperti numerik font-weight dan border 'satu sisi pada satu waktu'. Style Anda harus ditambahkan ke bagian "Styles" dari file style.less Anda.

Kami akan membuat setiap elemen desain dalam urutan yang sama seperti yang kita lakukan pada bagian sebelumnya dari tutorial ini untuk membuatnya mudah untuk merujuk kembali jika Anda perlu.

Menambahkan Trim Atas

Tambahkan HTML:

Tambahkan kode berikut di antara tag pembukaan dan penutupan body.

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

CSSHat:

Pilih layer "top trim" PSD Anda, lalu salin kode CSSHat yang dihasilkan:

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

Mixin Baru:

Pada file style.less Anda buat mixin baru bernama TopTrim dan salin kode CSSHat Anda seperti:

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

Style Baru:

Kita sekarang akan menggabungkan mixin baru Anda di bagian "Styles" file style.less Anda. Tambahkan kode style baru berikut:

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

Dalam kode di atas kita menarik style CSSHat yang dihasilkan melalui mixin TopTrim, serta pengaturan dimensi tata letak yang kita butuhkan.

Hasil:

Sekarang Anda akan melihat "top trim" berjalan di bagian atas situs Anda.

Membuat Menu Wrapper

Tambahkan HTML:

Tambahkan baris berikut di bawah HTML terakhir yang Anda menambahkan:

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

CSSHat untuk Mixin baru:

Pilih lapisan PSD "menuwrap" Anda, salin kode CSSHat yang dihasilkan, lalu sisipkan ke mixin baru bernama 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%)");
}

Style Baru:

Tambahkan kode style baru berikut:

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

Hasil:

Anda sekarang seharusnya melihat:

Background Menu

Tambahkan HTML:

Memperbarui kode menu yang ada sebagai berikut:

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

CSSHat untuk Mixin Baru:

Pilih lapisan menubg PSD Anda dan salin kode CSSHat yang dihasilkan ke mixin baru bernama 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%)");
}

Style Baru:

Tambahkan kode style baru berikut:

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

Hasil:

Anda sekarang seharusnya melihat:

Menambahkan Item Menu

Tambahkan HTML:

Memperbarui kode menu yang ada sebagai berikut:

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 untuk Mixin Background Item Menu Baru:

Pada PSD Anda, pilih salah satu persegi item menu dan Salin kode CSSHat yang dihasilkan ke mixin baru bernama MenuItemBG:

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

CSSHat untuk Mixin Menu Item Teks Baru:

Pada PSD Anda, pilih teks dari salah satu item menu Anda dan salin kode CSSHat yang dihasilkan ke mixin baru bernama MenuItemText:

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

Update Style Menu Anda:

Perbarui style ul.mainmenu yang ada sebagai berikut.

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();
		}
	}
}

Kita menggunakan aturan nesting LESS sehingga semua li anak dari ul.mainmenu akan terpengaruh.

Anda juga akan ingat di tutorial sebelumnya kita harus secara manual menggunakan tool line untuk memfasilitasi pemilihan warna untuk border item menu kita, mengingat ketidakmampuan Photoshop untuk mengatur setiap sisi border secara individual. Di atas, Anda akan melihat kita menggabungkan style border ini menggunakan kode warna #dddddd yang kita pilih selama tahap itu.

Kita juga menambahkan beberapa border transparan pada sisi kiri dan atas item menu. Alasannya saat ini item / efek hover akan menggunakan border di keempat sisi, jadi kita perlu memastikan ada lebar yang cocok pada item menu didalam kondisi default dan hover.

Dan akhirnya secara manual kita menambahkan font-weight yang benar yaitu 400 pada menu item teks karena Photoshop hanya mampu bekerja dengan nilai-nilai seperti "normal" atau "tebal".

Hasil:

Anda sekarang seharusnya melihat:

Membuat Kondisi "Current" dan Hover

Dalam kasus ini kita tidak perlu tambahan HTML karena kita sudah menambahkan item menu dengan kelas "current" diterapkan ke dalam langkah terakhir.

CSSHat untuk Mixin Background Item Menu Current Baru:

Pada PSD Anda, pilih persegi panjang item menu "current" dan salin kode yang dibuat CSSHat ke dalam mixin baru bernama 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 untuk Mixin Item Teks Menu Current Baru:

Sekarang pilih teks item menu "current" dan salin kode CSSHat yang dihasilkan ke mixin baru bernama CurrentMenuItemText:

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

Update Style Menu:

Perbarui style ul.mainmenu yang ada sebagai berikut.

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()
		}
	}
}

Dan untuk memungkinkan item menu didorong ke beberapa baris jika ada dua lebar tersedia, tambahkan kode clearfix berikut di bawah class menu yang sudah ada.

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

ul.mainmenu:after {
    clear: both;
}

Hasil:

Anda sekarang seharusnya melihat style "current" diterapkan pada item menu current dan efek hover:

Menambahkan Teks Utama

Tambahkan HTML:

Tambahkan kode berikut di bawah menu HTML Anda:

<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 untuk Mixin Baru, Teks Tipis:

Pada PSD Anda, pilih antara baris teks utama pertama atau ketiga (teks abu-abu tipis) dan salin kode yang dibuat CSSHat ke dalam mixin baru bernama ThinText:

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

CSSHat untuk Mixin Baru, Teks Tebal:

Pada PSD Anda, pilih antara baris teks utama kedua atau keempat (teks tebal) dan salin kode CSSHat yang dihasilkan ke mixin baru bernama ThickText:

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

Styles Baru:

Tambahkan kode style baru berikut:

//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();
}

Hasil:

Anda sekarang seharusnya melihat ini di bawah menu Anda:

Membuat Background Panel Info

Tambahkan HTML:

Tambahkan kode berikut:

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

CSSHat untuk Mixin baru:

Pada PSD Anda, pilih persegi panjang background panel info dan salin kode yang dibuat CSSHat ke dalam mixin baru bernama PanelBG:

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

Style Baru:

Tambahkan kode style baru berikut:

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

Hasil:

Anda sekarang seharusnya melihat background info panel Anda, saat ini masih kosong:

Background Header Panel dan Teks

Tambahkan HTML:

Update info panel HTML sebagai berikut:

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

CSSHat untuk Mixin Baru, Background Header Panel:

Pada PSD Anda, pilih layer background header panel Anda dan salin kode CSSHat yang dihasilkan ke mixin baru bernama 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%)");
}

Tambahkan Bayangan Kedua Panel Header:

Kita sekarang akan menambahkan bayangan kedua ke mixin PanelHeadBG yang sudah kita buat. Anda akan ingat dari Bagian 1 tutorial ini bahwa kita harus membuat bayangan tambahan pada lapisan kedua karena Photoshop tidak mampu menangani beberapa bayangan pada satu lapisan

Pada PSD Anda, pilih panel header bayangan layer kedua dan salin hanya kode di antara tanda kurung pada box-shadow, yang seharusnya jadi seperti:

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

Dalam mixin PanelHeadBG yang baru saja dibuat, tambahkan koma sebelum kurung penutup dari garis box-shadow yang ada, kemudian salin kode yang Anda baru saja ambil dari CSSHat:

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 Mixin Baru, Teks Panel Header:

Pada PSD Anda, pilih teks panel header, lalu salin kode CSSHat yang dihasilkan ke mixin baru bernama PanelHeadText:

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

Style Baru:

Tambahkan kode style baru berikut:

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

Perhatikan bahwa kita menambahkan font-weight 400 secara manual karena Photoshop tidak dapat memproses nilai-nilai numerik berat font.

Hasil:

Anda sekarang seharusnya melihat:

Membuat Teks Panel

Tambahkan HTML:

Update kode HTML panel yang ada lagi, kali ini sebagai berikut:

<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 untuk Mixin Baru, Teks Default Panel:

Pada PSD Anda, pilih lapisan berat teks yang lebih ringan pada info panel dan salin kode CSSHat yang dihasilkan ke mixin baru bernama PanelText:

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

CSSHat untuk Mixin Baru, Teks Panel Lebih Besar:

Sekarang pilih layer yang memegang teks panel info yang lebih tebal dan salin kode CSSHat yang dihasilkan ke mixin baru bernama UsingTheseText:

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

Style Baru:

Update style .panel yang sudah ada menjadi:

.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;
	}
}

Perbaruan itu menambahkan mixin PanelText serta font weight numerik dan kontrol margin untuk paragraf pada panel info.

Juga tambahkan kode style baru berikut, di bawah class .panel:

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

.highlight {
	color: #EF3D5C;
}

Hal ini menerapkan styling font lebih besar dan tebal untuk garis bawah teks, serta menambahkan highlight berwarna.

Hasil:

Anda sekarang seharusnya melihat:

Tambahkan Tanda Panah Bawah Besar

Tambahkan HTML:

Tambahkan kode berikut di bawah panel info Anda:

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

Karena kita sebelumnya memasukkan FontAwesome.less ke dalam proyek, HTML ini akan secara otomatis menempatkan tanda panah bawah melalui penerapan kelas fa dan fa-arrow-down untuk elemen i (ikon).

Pada awalnya akan muncul dalam default kecil, kondisi hitam sehingga semua yang perlu kita lakukan adalah memberikan style seperti yang kita akan terapkan pada elemen teks lain.

CSSHat untuk Mixin Baru:

Pada PSD Anda, pilih layer tanda panah bawah besar dan salin kode CSSHat yang dihasilkan ke mixin baru bernama DownArrow:

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

Style Baru:

Tambahkan kode style baru berikut:

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

Hasil:

Anda sekarang seharusnya melihat ini di bawah panel info Anda:

Mulai tombol "Start"

Tambahkan HTML:

Tambahkan kode berikut di bawah html tanda panah besar:

<div class="buttonrow">
<a href="https://webdesign.tutsplus.com/how-to-improve-your-photoshop-workflow-with-csshat-and-pnghat--cms-20786t" target="_blank">
<button class="start"><span class="arrowcircle"><i class="rightarrow fa fa-caret-right"></i></span>
Start the Tutorial
</button>
</a>
</div>

Seperti dengan tanda panah bawah, kita menggunakan class FontAwesome fa dan fa-caret-right secara otomatis menempatkan ikon yang kita ingin gunakan, dalam hal ini sebuah tanda panah kanan menunjuk.

CSSHat untuk Mixin Baru,Backgroud Tombol:

Pada PSD Anda, pilih layer persegi panjang tombol start dan salin kode CSSHat yang dihasilkan ke mixin baru bernama 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%)");
}

Tambahkan Bayangan Kedua Background Tombol:

Seperti yang kita lakukan dengan panel header, sekarang kita akan menambahkan bayangan kedua untuk mixin yang baru saja dibuat.

Pada PSD Anda, pilih layer bayangan kedua tombol dan salin hanya kode antara tanda kurung pada baris box-shadow:

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

Pada mixin StartButtonBG tambahkan koma sebelum penutup kurung dari garis box-shadow yang ada, kemudian salin pada kode yang baru saja Anda ambil dari CSSHat:

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 untuk Mixin Baru, Teks Tombol:

Pilih layer teks pada tombol Start dan salin kode CSSHat yang dihasilkan ke mixin baru bernama StartButtonText:

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

Style Baru:

Tambahkan kode style baru berikut:

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

Class .buttonrow pertama bertindak untuk memusatkan tombol, sementara class .start berlaku baik pada background tombol dan styling teks.

Hasil:

Anda sekarang seharusnya melihat:

Tombol Lingkaran dan Panah Kanan

Dalam hal ini kita tidak memerlukan HTML tambahan seperti yang kita kerjakan pada tombol HTML yang ditambahkan pada langkah terakhir.

CSSHat untuk Mixin Baru, Lingkaran Panah:

Pada PSD Anda, pilih layer lingkaran kecil di atas tombol Anda dan salin kode CSSHat yang dihasilkan ke mixin baru bernama ArrowCircle:

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

CSSHat untuk Mixin Baru, Panah Kanan:

Sekarang pilih layer panah kanan kecil putih menunjuk dan salin kode CSSHat yang dihasilkan ke mixin baru bernama RightArrow:

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

Style Baru:

Tambahkan kode style baru berikut:

.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();
}

Hasil:

Anda sekarang seharusnya melihat:

Styling Trim Bawah

Tambahkan HTML:

Tambahkan kode berikut di bawah ini tombol start HTML:

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

CSSHat untuk Mixin Baru:

Pada PSD Anda, pilih layer yang memegang dua lingkaran abu-abu konsentris kecil dan salin kode CSSHat yang dihasilkan ke mixin baru bernama 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%)");
}

Tweak Kode Gradien Radial:

Ini adalah salah satu tempat yang saya temukan output CSSHat tidak begitu cocok dengan apa yang saya miliki dalam PSD. Mengubah mixin baris background-image, menggantikan center center, 100px 100px dengan center, ellipse cover seperti:

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

Style Baru:

Tambahkan kode style baru berikut:

.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();
}

Class .bottomtrim pertama menciptakan dua garis abu-abu trim bawah, sementara class .centeredcircle mengukur dan mengatur posisi lingkaran abu-abu konsentris di atas dua baris.

Hasil:

Anda sekarang seharusnya melihat ini di bagian bawah desain Anda:

Merangkum

That's it! Anda sekarang seharusnya sudah memiliki desain statis Anda dengan kode murni, yang tampak seperti ini:

Ekstra

Kita telah membuat semuanya cukup sederhana untuk tujuan tutorial ini, tetapi ada lebih banyak hal yang dapat Anda lakukan dengan kode yang terlibat dalam proses ini jika Anda inginkan.

Dalam beberapa hal kita sudah meringkas di style dengan menggunakan kembali deklarasi font family dan warna, sehingga Anda dapat menentukan font family dan warna sebagai variabel dan menggunakan mereka agar lebih mudah memperbarui dikemudian hari.

CSSHat juga mendukung output di Stylus + Nib dan Sass / SCSS + Compass, jadi jika salah satu dari mereka adalah preprocessor yang Anda sukai Anda dapat mencoba menggunakan mereka sebagai gantinya.