Langkah 1: Mengatur Line-Height
Langkah pertama adalah memperbaiki line-height. Isikan kode berikut ke file
style.css.
1
2
3
4
| body {
line-height: 20px;
margin: 40px auto 90px;
}
|
Kode di atas akan mengubah jarak antar garis teks dan menambahkan ruang dengan sisi atas dan bawah browser.
Langkah 2: Menggunakan Font Custom @font-face
Desain kita menggunakan font custom Quicksand. Buka
halaman font di Fontsquirrel.
Klik tombol Download @font-face kit untuk mengambil semua resources
yang dibutuhkan. Di dalam file zip akan tersedia file font dan kode css
yang dibutuhkan.
Langkah 3
Desain kita hanya menggunakan tipe font Quicksand Light dan Quicksand Book. Simpan kedua file font ini ke folder baru bernama
fonts. Dari file
stylesheet.css ambil kode @font-face untuk kedua font itu dan simpan ke file css yang kita gunakan.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| @font-face {
font-family: 'QuicksandLight';
src: url('../fonts/Quicksand_Light-webfont.eot');
src: url('../fonts/Quicksand_Light-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Quicksand_Light-webfont.woff') format('woff'),
url('../fonts/Quicksand_Light-webfont.ttf') format('truetype'),
url('../fonts/Quicksand_Light-webfont.svg#QuicksandLight') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'QuicksandBook';
src: url('../fonts/Quicksand_Book-webfont.eot');
src: url('../fonts/Quicksand_Book-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Quicksand_Book-webfont.woff') format('woff'),
url('../fonts/Quicksand_Book-webfont.ttf') format('truetype'),
url('../fonts/Quicksand_Book-webfont.svg#QuicksandBook') format('svg');
font-weight: normal;
font-style: normal;
}
|
Langkah 4
Font custom Quicksand sudah bisa digunakan dalam desain. Untuk mengaplikasikannya, tambahkan kode berikut.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| h2, h4, nav {
font-family: 'QuicksandBook', Arial, Helvetica, sans-serif;
}
h3 {
font-family: 'QuicksandLight', Arial, Helvetica, sans-serif;
font-size: 21px;
}
h2, h3, h4 {
font-weight: normal;
}
h2 {
font-size: 36px;
margin-top: 30px;
}
h4 {
color: #4c4c4c;
font-size: 24px;
letter-spacing: -1px;
padding-bottom: 10px;
border-bottom: #969696 solid 1px;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #4c4c4c;
}
|
Kode di atas akan mengatur font default paragraf ke Arial, Helvetica,
dan sans-serif. Font custom digunakan pada Heading 2, Heading 3,
Heading 4, dan area navigasi.
Langkah 5: Logo
Tambahkan kode berikut untuk mengganti teks Heading 1 yang merupakan judul halaman dengan logo situs.
1
2
3
4
5
6
| #logo h1 {
background: url(../img/logo.png) no-repeat;
width: 160px;
height: 22px;
text-indent: 9999em;
}
|
Kode
background akan mengisi latar teks dengan gambar. Kode
width dan
height untuk menentukan ukuran gambar. Kode
text-indent akan menyingkirkan teks sehingga tidak muncul di layar.
Langkah 6: Navigasi
Berikutnya mengatur tampilan navigasi. Gunakan kode di bawah.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| /*Navigasi*/
nav ul {
float: right;
}
nav a {
font-size: 14px;
color: #969696;
text-decoration: none;
}
nav a:hover {
color: black;
text-decoration: underline;
}
nav li {
display: inline;
margin-left: 20px;
}
.selected {
color: black;
}
|
List diberi properti
inline agar tampil memanjang. Class
selected untuk menandai menu terpilih.
Langkah 7
Masalah muncul di sini. Teks banner lompat ke atas.
Ini terjadi karena secara default setiap elemen akan mengisi area
yang cukup baginya. Teks banner muat di sebelah logo. Oleh karena itu
dia loncat ke sana.
Langkah 8
Untuk memperbaikinya, tambahkan
div dengan class
clear sebelum teks banner.
1
| <div class="clear"></div>
|
Langkah 9
Tambahkan gambar latar di belakang
banner dengan kode css berikut.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| /*Banner*/
#banner article {
background: url(../img/big-photo.jpg);
height: 294px;
width: 620px;
position: relative;
}
#banner h3 {
background: rgba(0,0,0, .2);
color: white;
padding: 20px 35px 20px 15px;
width: 460px;
position: absolute;
bottom: 0;
margin-bottom: 0;
}
|
Heading 3 dibuat
absolute dengan posisi
relative
terhadap banner. Dengan cara ini, secara manual kita bisa menggeser
Heading 3 agar berada tetap di bagian bawah dengan memberinya
bottom: 0.
Langkah 10
Perbaiki tampilan tombol di isi artikel dengan kode berikut.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| /*Post*/
.button a {
font-size: 11px;
text-transform: uppercase;
color: #dadada;
background-color: #2a2a2a;
padding: 5px;
text-decoration: none
}
.button a:hover {
background-color: black;
}
|
Langkah 11
Perbaiki kutipan dengan memberinya kode di bawah.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| /*Blockquote*/
blockquote {
background: url(../img/quote.png) top left no-repeat;
padding-left: 35px;
margin-top: 30px;
}
blockquote, blockquote p {
font-size: 16px;
font-style: italic;
color: #4c4c4c;
}
blockquote a {
color: black;
text-decoration: none;
}
blockquote a:hover {
text-decoration: underline;
}
#nama {
font-weight: bold;
}
#status {
font-size: 14px;
}
#nama, #status {
font-style: normal;
}
|
Tanda kutip raksasa di sisi kiri atas kutipan berupa latar dengan bantuan kode
background.
Langkah 13
Langkah terakhir adalah pengaturan teks dan link di footer. Garis di atas footer ditambahkan dengan memberi
border pada paragraf.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| /*Footer*/
footer p {
font-family: 'QuicksandBook', Arial, Helvetica, sans-serif;
font-size: 12px;
border-top: #969696 1px solid;
margin: 40px 0;
}
footer a {
text-decoration: none;
color: black;
}
footer a:hover {
text-decoration: underline;
}
|
Hasil Akhir
Hasil tutorial ini sangat sederhana namun jadi awal pembelajaran yang
berguna bagi Anda yang sangat awam dengan desain web. Saya juga sangat
menyarankan Anda untuk mengikuti tutorial asli dari
Jeffrey Way di
30 Days to Learn HTML & CSS.
Di bawah adalah hasil akhir tutorial yang kita peroleh.
Tidak ada komentar:
Posting Komentar