Cara Menampilkan Ikon Image Sprites Dengan HTML5 dan CSS3

Cara Menampilkan Ikon Image Sprites Dengan HTML5 dan CSS3

Menampilkan ikon pada konten web tidak hanya dengan menggunakan ikon dari font-awesome atau roboto saja akan tetapi alangkah lebih mudah menggunakan image sprites saja, apa itu image sprites? image sprites adalah sebuah gambar yang berisi ikon atau ikon-ikon yang didesain khusus dan dikumpulkan menjadi satu gambar, biasanya ikon tersebut dibuat dengan software vektor seperti Inkscape, Illustrator, CorelDraw dan lain-lain, biasanya dalam satu gambar tersebut terdapat ratusan ikon, tergantung dari sipembuatnya bisa minimal 4 ikon dalam satu gambar, agar lebih jelas gunakan satu gambar ikon-ikon dibawah ini.

image-icon

Untuk membuat tampilan ikon kedalam konten web dengan tool image sprites yang ditulis menggunakan html5 dan css3, berikut dibawah ini adalah sintaks html yang bisa disimpan dengan nama index.html.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Icon Image Sprites</title>
  <link rel="stylesheet" href="style.css"/>
  <link rel="icon" href="image-icon.png"/>
</head>
<body>

<span class="icon-1"></span>
<span class="icon-2"></span>
<span class="icon-3"></span>
<span class="icon-4"></span>
<span class="icon-5"></span>
<span class="icon-6"></span>
<span class="icon-7"></span>
<span class="icon-8"></span>
<span class="icon-9"></span>
<span class="icon-10"></span>
<span class="icon-11"></span>
<span class="icon-12"></span>

</body>
</html>

Selanjutnya desain pengayaan dengan mengunakan css, buatkan sebuah file yang bernama style.css yang disimpan bersamaan dengan index.html dan sintaks css-nya dibawah ini.

body{
  margin: 100px auto;
}
[class*="icon-"]{
  width: 140px;
  height: 140px;
  display: inline-block;
}
.icon-1{
  background: url('image-icon.png') 0 0;
}
.icon-2{
  background: url('image-icon.png') -120px 0;
}
.icon-3{
  background: url('image-icon.png') -240px 0;
}
.icon-4{
  background: url('image-icon.png') -380px 0;
}
.icon-5{
  background: url('image-icon.png') 0 -120px;
}
.icon-6{
  background: url('image-icon.png') -120px -120px;
}
.icon-7{
  background: url('image-icon.png') -240px -120px;
}
.icon-8{
  background: url('image-icon.png') -380px -120px;
}
.icon-9{
  background: url('image-icon.png') 0 -245px;
}
.icon-10{
  background: url('image-icon.png') -120px -245px;
}
.icon-11{
  background: url('image-icon.png') -240px -245px;
}
.icon-12{
  background: url('image-icon.png') -380px -245px;
}

 

Tags: , , ,