Tag Cloud Tagtastic dengan Transformasi CSS

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

Hai teman-teman, hari ini kita akan membuat Tag Cloud Tagtastic dari Premium Pixels. Sebagai eksperimen dalam pendekatan alternatif, kita akan membuat tag menggunakan gradien, bayangan, dan (yang paling penting) transformasi CSS, yang akan membentuk titik setiap tag. Setelah selesai kita bahkan akan melangkah lebih jauh dan menyediakan untuk IE.

Kita telah membahas tag sebelumnya di Webdesigntuts+, tetapi pada kesempatan ini kita akan memeriksa metode alternatif untuk membuat semua bagian dan potongan komposit. Mungkin ada cara yang lebih tajam untuk menciptakan efeknya, tetapi contoh kita akan menahan diri dari gambar, menggunakan markup yang sangat bersih dan beberapa gaya yang tidak biasa. Mari kita terjebak!

Langkah 1: Markup Dasar HTML5

Mari mulai dengan memberikan markup dasar, termasuk doctype HTML5 yang familier. Kita juga akan merujuk ke stylesheet kita di dalam head dokumen kita.

<!DOCTYPE html>
<html>
  <head>

		<!--Meta tags-->
		<meta charset="utf-8">

		<!--Title-->
		<title></title>
		
		<!--Stylesheets-->
		<link rel="stylesheet" href="css/styles.css">

</head>
<body>







</body>
</html>

Langkah 2: Menambahkan Beberapa Kontainer

Untuk tujuan tutorial ini kita akan membuat pembungkus/kontainer untuk menampung tag kita. Anda kemungkinan besar akan membutuhkan sesuatu yang mirip jika Anda menggunakan ini, misalnya, sidebar blog.

Untuk kami, kami hanya akan membuat div dengan kelas wrapper, menerapkan lebar 340px dan margin 50px auto ke tengah pembungkus pada halaman. Saya telah menambahkan 50px daripada 0 hanya untuk menambahkan sedikit margin di bagian atas sehingga tag kita tidak menyentuh bagian atas jendela browser. Saat melempar dalam CSS ini, kita akan menambahkan beberapa penataan untuk body (seperti gambar latar belakang) dan menerapkan reset.

<div class="wrapper">



</div>

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,and,address,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,input,textarea,select{background:transparent;border:0;font-size:100%;margin:0;outline:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}

body {
	font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size:16px;
	background:url(../images/bg.jpg) repeat;
	-webkit-font-smoothing: antialiased;
}

.wrapper {
	max-width:340px;
	margin:50px auto;
}

Langkah 3: Membuat Tag dengan Beberapa HTML

Saya telah menyusun tag ini dengan sangat sederhana; semua yang akan kita gunakan adalah tag anchor (pilihan logis karena ini kemungkinan akan bertindak sebagai tautan ke suatu tempat atau sesuatu). Untuk tutorial ini saya telah memberikannya kelas "tag" tetapi ini dapat diubah ke apa pun yang Anda suka.

1	<a href="#" class="tag">high resolution</a>

Langkah 4: Penataan Tag

Benar, ke bagian selanjutnya! Sekarang kita akan memulai menata tag - ada banyak kode di sini tapi jangan biarkan hal itu membingungkan Anda, saya akan menjelaskan apa yang terjadi.

Saya pertama kali menambahkan beberapa hal mendasar di sini;

Float
Margin
Pemosisian - Relative
Text-decoration - none

Selanjutnya kita telah menetapkan beberapa pengaturan font, ukuran, family dan weight, diikuti oleh warna dan text-shadow. Setelah itu kita telah menerapkan beberapa padding, menggunakan ems sehingga semuanya berukuran relatif terhadap ukuran font body, atau ukuran font browser. Selanjutnya, border sederhana, meskipun kita belum menerapkan satu ke kiri. Ems telah muncul lagi! Kali ini kita akan menerapkannya ke border-radius tetapi hanya sudut kanan atas dan kanan bawah. Oke, apa Anda masih bangun? Masih ada lagi.. selanjutnya kita akan menggunakan beberapa gradien CSS3 (saya telah maju dan menggunakan aplikasi Gradient yang rapi untuk menghitung nilainya). Bagian akhir adalah beberapa box shadow, inset dan drop shadow. Ingat awalan-awalannya!

.tag {
	float:left;
	margin:0 0 7px 20px;
	position:relative;

	font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size:0.75em;
	font-weight:bold;
	text-decoration:none;

	color:#996633;
	text-shadow:0px 1px 0px rgba(255,255,255,.4);

	padding:0.417em 0.417em 0.417em 0.917em;

	border-top:1px solid #d99d38;
	border-right:1px solid #d99d38;
	border-bottom:1px solid #d99d38;

	-webkit-border-radius:0 0.25em 0.25em 0;
	-moz-border-radius:0 0.25em 0.25em 0;
	border-radius:0 0.25em 0.25em 0;

	background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
	background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
	background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
	background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
	background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');

	-webkit-box-shadow:
		inset 0 1px 0 #faeaba,
		0 1px 1px rgba(0,0,0,.1);
	-moz-box-shadow:
		inset 0 1px 0 #faeaba,
		0 1px 1px rgba(0,0,0,.1);
	box-shadow:
		inset 0 1px 0 #faeaba,
		0 1px 1px rgba(0,0,0,.1);

	z-index:100;
}

Langkah 5: Panah

Oke, kita telah menyelesaikan bagian utama dari tag, bagian selanjutnya adalah membuat tanda panah. Untuk menambahkan ini, kita akan menggunakan pseudo elemen :before. Kita juga akan bereksperimen dengan beberapa teknik lanjutan di sini dari CSS; transformasi. Membuat panah-panah ini melibatkan banyak percobaan dan kesalahan. Saya harus mencoba lebar dan tinggi yang berbeda bersama dengan posisi atas dan bawah untuk membuatnya sesempurna mungkin! Oleh karena itu, umpan balik sangat disambut..

Kita telah menggunakan gradien latar belakang yang sama seperti sebelumnya tetapi dengan satu perubahan kecil: karena kita akan memutar persegi yang akan kita buat, kita juga perlu memutar gradien sehingga cocok dengan bagian utama dari tag. Aplikasi Gradient membantu dalam membiarkan saya mengubah arah gradien. Bagian selanjutnya adalah membuat beberapa border, di kiri dan bawah. Semua yang tersisa berkaitan dengan panah adalah menambahkan border-radius untuk merapikan titik dan akhirnya menerapkan transformasi kita. Kita akan memutar persegi yang kita buat 45 derajat sehingga terlihat seperti panah. Kita telah menggunakan transform: 45; bersama dengan yang awalannya.

.tag:before {
	content:'';

	width:1.30em;
	height:1.358em;

	background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
	background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
	background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
	background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
	background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');
	
	position:absolute;
	left:-0.69em;
	top:.2em;

	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	transform:rotate(45deg);

	border-left:1px solid #d99d38;
	border-bottom:1px solid #d99d38;

	-webkit-border-radius:0 0 0 0.25em;
	-moz-border-radius:0 0 0 0.25em;
	border-radius:0 0 0 0.25em;

	z-index:1;
}

Anda sekarang harus memiliki sesuatu yang mirip dengan yang berikut ini; Catatan saya telah memperbesar sehingga Anda dapat melihat di mana panah terhubung ke bagian utama, ini nyaris tidak terlihat ketika dilihat pada ukuran normal.

Langkah 6: Lubang Tag

Bagian terakhir untuk melengkapi tag kita adalah membuat lubang kecil di atasnya. Di sini kita akan menggunakan pseudo lagi, tetapi kali ini, elemen :after. Apa yang kita lakukan untuk membuat lubang itu agak sederhana. Kita telah mendefinisikan lebar dan tinggi dalam ems sehingga akan tumbuh dengan lancar. Berikutnya kita telah menambahkan border radius besar yang akan membuat lingkaran dengan border untuk memberi garis tepi. Berikut ini kita telah menambahkan drop shadow yang mirip dengan text-shadow. Akhirnya kita memposisikannya (saat menggunakan ems).

.tag:after {
	content:'';

	width:0.5em;
	height:0.5em;

	background:#fff;

	-webkit-border-radius:4.167em;
	-moz-border-radius:4.167em;
	border-radius:4.167em;

	border:1px solid #d99d38;

	-webkit-box-shadow:0 1px 0 #faeaba;
	-moz-box-shadow:0 1px 0 #faeaba;
	box-shadow:0 1px 0 #faeaba;

	position:absolute;
	top:0.667em;
	left:-0.083em;
	z-index:9999;
}

Langkah 7: Menambahkan Beberapa Gaya Hover

Untuk membuat tag kita lebih dahsyat, kita akan menambahkan beberapa gaya hover. Kita harus menambahkan ini ke bagian utama dari tag dan tanda panah (sambil mengingat untuk memutar gradien untuk panah). Kita juga mengubah warna border pada keduanya.

.tag:hover {
	background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
	background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
	background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
	background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
	background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');

	border-color:#e1b160;
}

.tag:hover:before {
	background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
	background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
	background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
	background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
	background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');

	border-color:#e1b160;
}

Langkah 8: Menyediakan untuk IE

Jika Anda masih ingin menunjukkan tag Anda dalam kemuliaan penuh bagi pengguna IE Anda harus mengambil pendekatan yang berbeda terhadap tag ini, dimulai dengan membuat stylesheet khusus IE. Saya akan menjelaskan mengapa.. Pertama, banyak efek CSS3 kita tidak akan berfungsi di versi lebih awal dari IE9 (hanya beberapa yang berfungsi di IE9 sebagaimana adanya), tetapi masalah utama di sini adalah transformasi yang tidak akan berfungsi. Untuk melayani pengguna IE, kita akan mengedit kode kita sedikit. Kita akan memulai dengan mengubah HTML kita terlebih dahulu, dengan mengganti div wrapper dan semua yang ada di dalamnya dengan:

<div class="wrapper">

	<a href="#" class="tag">
		<span class="arrow"></span>
		<span class="text">high resolution</span>
		<span class="end"></span>
	</a>

</div>

Kita akan menggunakan tag anchor lagi tetapi dengan 3 span di dalamnya; kita perlu satu untuk membuat panah, bagian utama dan akhir yang memiliki border radius.

Langkah 9: Gambar untuk Versi IE kita

Untuk memastikan tag kita berfungsi di IE, kita harus menggunakan gambar. Mulailah dengan menghapus semua yang ada di bawah gaya .wrapper, semua yang terkait tag! Anda sekarang harus menempelkan potongan berikut. Kita hanya menerapkan beberapa gambar latar belakang di sini, tetapi juga mengulangi latar belakang teks pada sumbu x karena teks bisa berapapun panjangnya! Bahkan Supercalafragalisticexpialadoshus!

.arrow {
	width:15px;
	height:25px;
	float:left;

	background:url(../images/arrow.png) no-repeat;
}
.text {
	height:25px;
	float:left;

	padding-left:4px;
	padding-right:4px;

	background:url(../images/text.png) repeat-x;

	font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size:0.75em;
	font-weight:bold;

	color:#996633;
	text-shadow:0px 1px 0px rgba(255,255,255,.4);

	line-height:23px;
}
.end {
	width:4px;
	height:25px;
	float:left;

	background:url(../images/end.png) no-repeat;
}


.tag:hover .arrow { background-image:url(../images/arrow_hover.png); }
.tag:hover .text { background-image:url(../images/text_hover.png); }
.tag:hover .end { background-image:url(../images/end_hover.png); }

Kesimpulan

Yah itu saja! Itu tutorial lainnya yang lengkap dan kelihatannya bagus! Kita telah mengambil tag tagtastic ini dan membuatnya dengan CSS sementara menyediakannya untuk IE pada saat yang bersamaan. Tag ini dapat digunakan untuk segala macam hal - lanjutkan dan gunakan di sidebar, blog, apa pun yang Anda suka!

Saya harap Anda menyukai tutorial ini, terima kasih telah membaca.