() translation by (you can also view the original English article)
Dalam tutorial ini, Anda akan belajar cara membuat halaman teaser hanya menggunakan CSS, tanpa gambar atau bahkan desain Photoshop. Banyak situs web dan aplikasi yang akan datang mendapatkan publisitas besar dari halaman teaser, jadi ini adalah konsep yang berguna untuk ditambahkan ke toolkit Anda. Gunakan untuk aplikasi atau situs web apa pun yang siap diluncurkan.
Langkah 1: Markup HTML
HTML untuk halaman teaser cukup sederhana. Kita hanya memiliki kontainer dengan teks pengantar dan masukan kita.
1 |
|
2 |
<!doctype html>
|
3 |
|
4 |
<head>
|
5 |
|
6 |
<!-- Basics -->
|
7 |
|
8 |
<meta charset="utf-8"> |
9 |
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
10 |
|
11 |
<title>App is coming soon.</title> |
12 |
|
13 |
<!-- Mobile -->
|
14 |
|
15 |
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> |
16 |
|
17 |
<!-- CSS -->
|
18 |
|
19 |
<link rel="stylesheet" href="css/reset.css"> |
20 |
<link rel="stylesheet" href="css/animate.css"> |
21 |
<link rel="stylesheet" href="css/styles.css"> |
22 |
|
23 |
</head>
|
24 |
|
25 |
<!-- Main HTML -->
|
26 |
|
27 |
<body>
|
28 |
|
29 |
<!-- Begin Page Content -->
|
30 |
|
31 |
<div id="container"> |
32 |
|
33 |
<h1>App.</h1> |
34 |
|
35 |
<p>
|
36 |
This amazing application will change your life. Subscribe to be notified when it's available, or follow us on <a href="#">Twitter.</a> |
37 |
</p>
|
38 |
|
39 |
<div id="subscribe"> |
40 |
|
41 |
<input type="email" placeholder="email address"> |
42 |
|
43 |
<input type="submit" value="submit"> |
44 |
|
45 |
</div>
|
46 |
|
47 |
</div>
|
48 |
|
49 |
|
50 |
<!-- End Page Content -->
|
51 |
|
52 |
</body>
|
53 |
|
54 |
</html>
|
Langkah 2: Memposisikan dan Mengukur Elemen Kita
Mari kita beri halaman kita beberapa struktur. Kita memulai dengan hal-hal mendasar, dan menempatkan kontainer di tengah halaman. Kita akan menggunakan posisi 50%, kemudian margin negatif untuk mengembalikan objek setengah lebar dan tingginya.
1 |
|
2 |
|
3 |
html, body { |
4 |
width: 100%; |
5 |
height: 100%; |
6 |
font-family: "Helvetica Neue", Helvetica, sans-serif; |
7 |
color: #444; |
8 |
-webkit-font-smoothing: antialiased; |
9 |
}
|
10 |
|
11 |
|
12 |
}
|
13 |
|
14 |
#container { |
15 |
position: fixed; |
16 |
width: 500px; |
17 |
height: 300px; |
18 |
top: 50%; |
19 |
left: 50%; |
20 |
margin-top: -150px; |
21 |
margin-left: -250px; |
22 |
text-align: center; |
23 |
}
|
Selanjutnya, kita memposisikan teks dan masukan, menggunakan penyeleksi atribut untuk menargetkan email dan mengirimkan masukan secara terpisah.
1 |
|
2 |
|
3 |
h1 { |
4 |
font-size: 90px; |
5 |
}
|
6 |
|
7 |
p { |
8 |
width: 80%; |
9 |
font-size: 23px; |
10 |
line-height: 1.3em; |
11 |
margin: 1.1em auto; |
12 |
text-align: center; |
13 |
}
|
14 |
|
15 |
#subscribe { |
16 |
margin: 0 auto; |
17 |
text-align: center; |
18 |
}
|
19 |
|
20 |
input[type=email] { |
21 |
width: 90%; |
22 |
padding: 15px; |
23 |
margin: 0 auto; |
24 |
}
|
25 |
|
26 |
input[type=submit] { |
27 |
position: absolute; |
28 |
margin-left: -105px; |
29 |
margin-top: 5px; |
30 |
padding: 10px; |
31 |
width: 100px; |
32 |
height: 50px; |
33 |
}
|
Langkah 3: Penataan Teks
Penataan teks untuk halaman ini cukup sederhana. Kita ingin nama agar kontras dengan latar belakang, jadi kita akan menjadikannya putih. Teks itu penting, tetapi kita ingin pengunjung mengingat nama produk kita, jadi kita tidak akan membuatnya seperti yang diucapkan. Tautan Twitter digarisbawahi, menunjukkan bahwa itu adalah tautan.
Pertama, teks utama:
1 |
|
2 |
h1 { |
3 |
font-size: 90px; |
4 |
font-weight: bold; |
5 |
color: #fff; |
6 |
text-shadow: 0 1px 4px #000; |
7 |
margin-top: 20px; |
8 |
}
|
9 |
|
10 |
p { |
11 |
width: 80%; |
12 |
font-size: 23px; |
13 |
line-height: 1.3em; |
14 |
color: #fff; |
15 |
margin: 1.1em auto; |
16 |
text-align: center; |
17 |
text-shadow: 0 0 2px rgba(0, 0, 0, 0.9); |
18 |
}
|
Kemudian tautan Twitter:
1 |
|
2 |
p a { |
3 |
color: #fff; |
4 |
border-bottom: 2px solid #2da1ec; |
5 |
}
|
Langkah 4: Penataan Latar Belakang
Sekarang untuk bagian yang menyenangkan: memberikan benda-benda di halaman kita yang ekstra je ne sais quoi. Kita akan mulai dengan membuat latar belakang gradien yang bagus. Jika Anda pengguna Mac, Anda dapat bersandar pada GradientApp untuk melakukan kerja keras untuk Anda. Atau, silakan ke CSS3 Please! untuk mendapatkan beberapa gagasan tentang sintaksnya.
1 |
|
2 |
html, body { |
3 |
width: 100%; |
4 |
height: 100%; |
5 |
font-family: "Helvetica Neue", Helvetica, sans-serif; |
6 |
color: #444; |
7 |
-webkit-font-smoothing: antialiased; |
8 |
background: #000222; |
9 |
background: -moz-linear-gradient(top, #000222 0%, #4b637c 100%); |
10 |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000222), color-stop(100%,#4b637c)); |
11 |
background: -webkit-linear-gradient(top, #000222 0%,#4b637c 100%); |
12 |
background: -o-linear-gradient(top, #000222 0%,#4b637c 100%); |
13 |
background: -ms-linear-gradient(top, #000222 0%,#4b637c 100%); |
14 |
background: linear-gradient(top, #000222 0%,#4b637c 100%); |
15 |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000222', endColorstr='#4b637c',GradientType=0 ); |
16 |
}
|
Langkah 5: Penataan Formulir Berlangganan
Formulir berlangganan adalah fokus dari halaman kita, karena kita ingin pengunjung mengetahui kapan produk luar biasa kita dirilis. Kita ingin itu menjadi fokus halaman, setelah nama atau logo.
Kita mulai dengan menata placeholder (gaya khusus Mozilla dan Webkit), dan mengatur font-size:
1 |
|
2 |
::-webkit-input-placeholder { |
3 |
color: rgba(255, 255, 255, 0.4); |
4 |
}
|
5 |
|
6 |
::-moz-input-placeholder { |
7 |
color: rgba(255, 255, 255, 0.4); |
8 |
}
|
9 |
|
10 |
input { |
11 |
font-family: "Helvetica Neue", Helvetica, sans-serif; |
12 |
font-size: 25px; |
13 |
}
|
Sekarang mari kita beri bidang dan tombol beberapa warna dan kedalaman:
1 |
|
2 |
input[type=email] { |
3 |
outline: none; |
4 |
width: 90%; |
5 |
padding: 15px; |
6 |
margin: 0 auto; |
7 |
color: #fff; |
8 |
border: none; |
9 |
-webkit-border-radius: 6px; |
10 |
-moz-border-radius: 6px; |
11 |
border-radius: 6px; |
12 |
background: rgba(0, 0, 0, 0.3); |
13 |
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9); |
14 |
-moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9); |
15 |
-o-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9); |
16 |
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9); |
17 |
}
|
18 |
|
19 |
input[type=submit] { |
20 |
position: absolute; |
21 |
margin-left: -105px; |
22 |
margin-top: 5px; |
23 |
font-size: 25px; |
24 |
color: #222; |
25 |
text-shadow: 0 1px 0 #fff; |
26 |
padding: 10px; |
27 |
width: 100px; |
28 |
height: 50px; |
29 |
border: none; |
30 |
background: #f0f0f0; |
31 |
background: -moz-linear-gradient(top, #f0f0f0 0%, #c3d7ff 100%); |
32 |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#c3d7ff)); |
33 |
background: -webkit-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%); |
34 |
background: -o-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%); |
35 |
background: -ms-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%); |
36 |
background: linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%); |
37 |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#c3d7ff',GradientType=0 ); |
38 |
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3); |
39 |
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3); |
40 |
-o-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3); |
41 |
box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3); |
42 |
-webkit-border-radius: 3px; |
43 |
-moz-border-radius: 3px; |
44 |
border-radius: 3px; |
45 |
cursor: pointer; |
46 |
}
|
Langkah 6: Menambahkan Transisi CSS
Mari tambahkan beberapa transisi CSS yang bagus untuk membantu menarik perhatian pengunjung.
Pertama, kita akan menambahkan kursor dan status aktif ke tautan dan masukan Twitter:
1 |
|
2 |
p a { |
3 |
color: #fff; |
4 |
border-bottom: 2px solid #2da1ec; |
5 |
}
|
6 |
|
7 |
p a:hover { |
8 |
color: #2da1ec; |
9 |
border-bottom: 2px solid #fff; |
10 |
}
|
1 |
|
2 |
input[type=email] { |
3 |
outline: none; |
4 |
width: 90%; |
5 |
padding: 15px; |
6 |
margin: 0 auto; |
7 |
color: #fff; |
8 |
border: none; |
9 |
-webkit-border-radius: 6px; |
10 |
-moz-border-radius: 6px; |
11 |
border-radius: 6px; |
12 |
background: rgba(0, 0, 0, 0.3); |
13 |
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9); |
14 |
-moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9); |
15 |
-o-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9); |
16 |
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9); |
17 |
}
|
18 |
|
19 |
input[type=email]:hover { |
20 |
background: rgba(0, 0, 0, 0.5); |
21 |
}
|
22 |
|
23 |
input[type=email]:focus { |
24 |
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 1), 0 0 0 5px rgba(0, 0, 0, 0.2); |
25 |
-moz-box-shadow: inset 0 0 8px rgba(0, 0, 0, 1), 0 0 0 5px rgba(0, 0, 0, 0.2); |
26 |
-o-box-shadow: inset 0 0 8px rgba(0, 0, 0, 1), 0 0 0 5px rgba(0, 0, 0, 0.2); |
27 |
box-shadow: inset 0 0 8px rgba(0, 0, 0, 1), 0 0 0 5px rgba(0, 0, 0, 0.2); |
28 |
background: rgba(0, 0, 0, 0.6); |
29 |
}
|
30 |
|
31 |
input[type=submit] { |
32 |
position: absolute; |
33 |
margin-left: -105px; |
34 |
margin-top: 5px; |
35 |
font-size: 25px; |
36 |
color: #222; |
37 |
text-shadow: 0 1px 0 #fff; |
38 |
padding: 10px; |
39 |
width: 100px; |
40 |
height: 50px; |
41 |
border: none; |
42 |
background: #f0f0f0; |
43 |
background: -moz-linear-gradient(top, #f0f0f0 0%, #c3d7ff 100%); |
44 |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#c3d7ff)); |
45 |
background: -webkit-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%); |
46 |
background: -o-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%); |
47 |
background: -ms-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%); |
48 |
background: linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%); |
49 |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#c3d7ff',GradientType=0 ); |
50 |
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3); |
51 |
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3); |
52 |
-o-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3); |
53 |
box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3); |
54 |
-webkit-border-radius: 3px; |
55 |
-moz-border-radius: 3px; |
56 |
border-radius: 3px; |
57 |
cursor: pointer; |
58 |
}
|
59 |
|
60 |
input[type=submit]:hover { |
61 |
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.9); |
62 |
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.9); |
63 |
-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.9); |
64 |
box-shadow: 0 0 10px rgba(0, 0, 0, 0.9); |
65 |
width: 125px; |
66 |
margin-left: -130px; |
67 |
|
68 |
}
|
69 |
|
70 |
input[type=submit]:active { |
71 |
background: #c3d7ff; |
72 |
background: -moz-linear-gradient(top, #c3d7ff 0%, #f0f0f0 100%); |
73 |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c3d7ff), color-stop(100%,#f0f0f0)); |
74 |
background: -webkit-linear-gradient(top, #c3d7ff 0%,#f0f0f0 100%); |
75 |
background: -o-linear-gradient(top, #c3d7ff 0%,#f0f0f0 100%); |
76 |
background: -ms-linear-gradient(top, #c3d7ff 0%,#f0f0f0 100%); |
77 |
background: linear-gradient(top, #c3d7ff 0%,#f0f0f0 100%); |
78 |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3d7ff', endColorstr='#f0f0f0',GradientType=0 ); |
79 |
|
80 |
}
|
Lalu kita menambahkan aturan transisi:
1 |
|
2 |
|
3 |
p a { |
4 |
color: #fff; |
5 |
border-bottom: 2px solid #2da1ec; |
6 |
-webkit-transition: all .4s ease; |
7 |
-moz-transition: all .4s ease; |
8 |
-o-transition: all .4s ease; |
9 |
transition: all .4s ease; |
10 |
}
|
dan
1 |
|
2 |
|
3 |
input { |
4 |
font-family: "Helvetica Neue", Helvetica, sans-serif; |
5 |
font-size: 25px; |
6 |
-webkit-transition: all .4s ease; |
7 |
-moz-transition: all .4s ease; |
8 |
-o-transition: all .4s ease; |
9 |
transition: all .4s ease; |
10 |
}
|
Langkah 7: Animasi CSS
Kita juga dapat menambahkan beberapa animasi CSS3 yang bagus untuk efek tambahan saat halaman dimuat. Sangat disarankan untuk menggunakan animasi CSS sebagai pujian untuk desain Anda; bukan bagian integral dari itu. Dukungan untuk animasi masih jarang dan Anda harus waspada terhadap kerumitan yang berlebihan pada desain Anda untuk kepentingan itu.
Katanya, Animate.css dari Dan Eden adalah perpustakaan animasi CSS yang sangat berguna. Anda dapat menambahkannya seperti yang ditunjukkan di dokumen asli di awal tutorial, atau impor ke stylesheet Anda, jika Anda lebih suka:
1 |
|
2 |
|
3 |
@import url(animate.css); |
Ada berbagai animasi yang indah untuk dipilih, tetapi saya akan menambahkan animasi bounceInDown. Kita menerapkannya pada elemen kita (dalam hal ini kontainernya) seperti ini:
1 |
|
2 |
|
3 |
#container { |
4 |
position: fixed; |
5 |
width: 500px; |
6 |
height: 300px; |
7 |
top: 50%; |
8 |
left: 50%; |
9 |
margin-top: -150px; |
10 |
margin-left: -250px; |
11 |
text-align: center; |
12 |
-webkit-animation-name: bounceInDown; |
13 |
-webkit-animation-fill-mode: both; |
14 |
-webkit-animation-duration: 1.5s; |
15 |
-webkit-animation-iteration-count: 1; |
16 |
-webkit-animation-timing-function: linear; |
17 |
-moz-animation-name: bounceInDown; |
18 |
-moz-animation-fill-mode: both; |
19 |
-moz-animation-duration: 1.5s; |
20 |
-moz-animation-iteration-count: 1; |
21 |
-moz-animation-timing-function: linear; |
22 |
animation-name: bounceInDown; |
23 |
animation-fill-mode: both; |
24 |
animation-duration: 1.5s; |
25 |
animation-iteration-count: 1; |
26 |
animation-timing-function: linear; |
27 |
}
|
Jika Anda ingin mengubah animasinya, Anda tinggal mengubah -animation-name ke nama animasi yang Anda inginkan.
Langkah 8: Mengambil Hal-hal Lebih Jauh
Ini bukan desain responsif, jauh dari itu, tetapi Anda mungkin ingin menambahkan beberapa media queries ke bagian bawah css Anda untuk melayani perangkat yang lebih kecil. Pikirkan tentang membuat elemen kontainer yang lebih sempit untuk layar yang lebih kecil, dan mengubah lebar atau posisi masukan.
Untuk mengizinkan formulir pendaftaran kita agar menambahkan alamat email ke daftar, kita dapat melakukannya dengan memasangnya ke layanan buletin email, seperti MailChimp. Saya tidak akan menjelaskan ini secara detail, karena artikel ini menunjukkannya dengan sempurna.
Jika Anda ingin menambahkan validasi ke formulir, Anda dapat melihat tutorial ini.
Kesimpulan
Membangun halaman teaser dengan cepat seperti ini sangat penting untuk publikasi sebelum situs web atau peluncuran produk. Tidak perlu rumit, seperti yang ditunjukkan oleh solusi CSS murni ini.
Saya harap Anda belajar sesuatu dari tutorial ini, terima kasih telah membaca!
