Logo Simbol Icon HTML Dengan Efek Rotasi-CSS

Logo Simbol Icon HTML Dengan Efek Rotasi CSS - Membuat sebuah logo dengan menggunakan karakter simbol-simbol html dirasa cukup menarik, karena karakter simbol-simbol html itu sendiri yang mempunyai bentuk-bentuk unik, untuk membuat logo menggunakan simbol html ini tidak menggunakan gambar yang dipergunakan, baik itu sebagai background ataupun hal lain, background yang dipakai menggunakan warna gradient untuk membentuk 2 lingkaran dengan warna yang berbeda dan lingkaran selanjutnya menggunakan border (sesuaikan border dengan jenis dan macam border yang ada) dan untuk bagian logonya menggunakan karakter simbol html.

Banyak sekali kemudahan untuk membuat sebuah logo, baik secara online (menggunakan Logo Generator Online) maupun membuat sendiri dengan aplikasi-aplikasi gambar, baik itu Photoshop maupun Corel. Walaupun begitu membuat logo dengan karakter simbol html juga hasilnya tidak begitu mengecewakan, dan hasilnya bisa dipergunakan untuk logo sebuah blog ataupun hal lain.

Pilihlah karakter simbol html yang kiranya cocok untuk dibuat sebuah logo, padukan dengan warna background yang dipergunakan. Untuk memilih salah satu simbol HTML yang akan dijadikan logo, bisa melihat pada tabel kumpulan simbol html pada link tersebut.

Dibawah ini merupakan kode CSS dan HTML sebuah logo dengan simbol html yang saya buat:

CSS

#logo_simbol{
  background: -moz-radial-gradient(center, ellipse cover, rgba(28,28,28,0.65) 60%, rgba(170,170,170,0.65) 61%, rgba(170,170,170,0.65) 66%, rgba(170,170,170,0) 67%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(60%,rgba(28,28,28,0.65)), color-stop(61%,rgba(170,170,170,0.65)), color-stop(66%,rgba(170,170,170,0.65)), color-stop(67%,rgba(170,170,170,0)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(28,28,28,0.65) 60%,rgba(170,170,170,0.65) 61%,rgba(170,170,170,0.65) 66%,rgba(170,170,170,0) 67%);
  background: -o-radial-gradient(center, ellipse cover, rgba(28,28,28,0.65) 60%,rgba(170,170,170,0.65) 61%,rgba(170,170,170,0.65) 66%,rgba(170,170,170,0) 67%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(28,28,28,0.65) 60%,rgba(170,170,170,0.65) 61%,rgba(170,170,170,0.65) 66%,rgba(170,170,170,0) 67%);
  background: radial-gradient(ellipse at center, rgba(28,28,28,0.65) 60%,rgba(170,170,170,0.65) 61%,rgba(170,170,170,0.65) 66%,rgba(170,170,170,0) 67%);
  -webkit-transition: All 1s ease;
  -moz-transition: All 1s ease;
  -o-transition: All 1s ease;
  transition: All 1s ease;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  color: #aaaaaa;
  display: block;
  font: normal 150px "Trebuchet MS", Helvetica, sans-serif;
  text-align: center;
  line-height: 1.1;
  border: 5px dashed #666666;
  border-radius: 80px;
  width: 150px;
  height: 150px;
  margin: 10px auto;
}
#logo_simbol:hover{
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}

HTML

<div id="logo_simbol">&#9772;</div>

• Demo

untuk menyesuaikan ruang, logo simbol html pada halaman demo sudah mengalami perubahan ukuran. Sesuaikan ukuran lebar dan tinggi logo tersebut jika diterapkan pada blog.

Apabila kurang cocok bisa dimodifikasi ulang atau membuat sendiri dengan yang lebih baik, semoga berguna.