Membuat Gambar Dengan CSS Box Shadow

Membuat Gambar Dengan CSS Box Shadow - Cara membuat gambar seperti ini merupakan peletakan simbol-simbol HTML untuk membentuk dan menghubungkannya menjadi satu, sehingga terbentuk sebuah gambar tanpa kita menyisipkan URL-gambar pada elemen CSS. Hanya dengan menyusun nilai-nilai offset sumbu pada box shadow, Anda bisa Membuat Gambar Dengan CSS Box Shadow tanpa ada sentuhan link URL-gambar yang pada umumnya terkonsep seperti ini:

.img {
  max-width: 200px !important;
  height: 230px;
  margin: 12px 0 auto;
  padding: 5px 8px;
  border: double 4px #39f;

 //menyisipkan gambar dengan Link URL
  background: url(http://3.bp.blogspot.com/-YWT2f..../s1600/SB-77 Image.jpg);
}

Maka gambar akan ditampilkan berdasarkan link URL, berbeda lagi seperti icon smile, icon tertawa, icon marah dan icon menangis pada beberapa kolom komentar blog, gambar tersebut terbentuk tidak menggunakan link URL, tetapi hanya dengan CSS yang penulisannya menggunakan simbol HTML seperti:

:) smile
;(( menangis
=)) tertawa, dan masih banyak lagi

dan simbol tersebut dihubungkan dengan perintah JavaScript animation, sehingga ada gerakan disana yang membuat tampilan gambar tersebut menjadi nyata (hidup). Pertemuan kali ini saya akan coba membuat sebuah tampilan gambar kartun DORAEMON tanpa menyisipkan link URL-Gambar hanya dengan CSS box shadow seperti ini:


<style type='text/css'>
/* Doraemon Cartoon Pictures
Design by. http://sahabatblogger77.blogspot.com
Value input: CSS box-shadow element */
.doraemon {
  cursor: pointer;font-size:20px;width:10em;height:9.9em;
  margin:1.5em auto 10em;position:relative;border-radius:50%;
  background:#fff;/*bentuk wajah*/
  box-shadow:
  2.5em 10.7em 0 -3.5em #fff,
  2.5em 10.9em 0 -3.2em #ddd,
  2.5em 10.9em 0 -3.1em #000,
  /*bentuk tangan kanan*/
  -5.9em 4.3em 0 -3.5em #fff,-5.7em 4.4em 0 -3.2em #ddd,
  0 5.5em 0 -4.5em #dd0,0 5.5em 0 -4.4em #000,
  /*bentuk leher*/
  0 1.2em 0 -1em #000,0 2em 0 -1.3em #d00,0 2.1em 0 -1.3em #000,
  /*badan*/
  0 7.1em 0 -1.8em #f8f8f8,0 7.1em 0 -1.2em #26f,-4.6em 5.0em 0 -3.8em #15e,
  -3.3em 5.4em 0 -4em #15e,-1.3em 10.8em 0 -3.6em #26f,-1.3em 11.8em 0 -3.6em #eee,
  3.2em 5.9em 0 -4.0em #26f,3.6em 6.0em 0 -4.0em #26f,3.9em 6.1em 0 -4.0em #26f,
  4.0em 6.2em 0 -4.0em #26f,4.1em 6.3em 0 -4.0em #26f,4.2em 6.4em 0 -4.0em #26f,
  4.3em 6.5em 0 -4.0em #26f,
  /*bentuk tangan kiri*/
  5.4em 7.1em 0 -4.1em #eee,
  /*bentuk kepala*/
  0 1em 0 1em #26f inset,0 7.1em 0 -1.1em #000,0 0 0 0.1em #000,
  -5.7em 4.4em 0 -3.1em #000,5.4em 7.1em 0 -4.0em #000,
  -1.3em 11.8em 0 -3.5em #000,3.2em 5.9em 0 -3.9em #000,
  3.6em 6.0em 0 -3.9em #000,3.9em 6.1em 0 -3.9em #000,
  4.0em 6.2em 0 -3.9em #000,4.1em 6.3em 0 -3.9em #000,
  4.2em 6.4em 0 -3.9em #000,4.3em 6.5em 0 -3.9em #000,
  -4.6em 5.0em 0 -3.7em #000,-3.3em 5.4em 0 -3.9em #000,
  -1.3em 10.8em 0 -3.5em #000,0 0 0 0 transparent}

.doraemon:after {
  font-size:1em;display:block;width:1em;height:1em;position:absolute;
  top:3em;left:4.5em;border-radius:50%;content:"|";line-height:1;color:transparent;
  /*garis hidung*/
  text-shadow:0 0em 0 #000,0 0.74em 0 #000,0 0 0 transparent;
  text-align:center;line-height:2.8;
  background:#fff;
  box-shadow:-0.1em 0 0 0.3em #c00 inset,
  /*bentuk mata kiri*/
  0.9em -1.5em 0 -0.4em #fff,1em -1.3em 0 -0.2em #000,1.1em -1.3em 0 0.5em #fff,
  1.1em -1.3em 0 0.6em #333,
  /*bentuk mata kanan*/
  -1.1em -1.5em 0 -0.4em #fff,-1em -1.3em 0 -0.2em #000,
  -1em -1.3em 0 0.5em #fff,-1em -1.3em 0 0.6em #333,0 0 0 0 transparent}

.doraemon:before {
  font-size:1em;width:5em;height:2.5em;display:block;margin:5em auto;
  position:absolute;top:1em;left:2.5em;content:"-";color:transparent;
  letter-spacing:-0.26em;
  text-shadow:
  3em -2em 0 #000,3em -2.5em 0 #000,3em -3em 0 #000,
  -3em -2em 0 #000,-3em -2.5em 0 #000,-3em -3em 0 #000,0 0 0 transparent;
  text-align:center;border-radius:0 0 50% 50% / 0 0 100% 100%;
  background:#d33;
  /*bentuk kantong ajaib*/
  box-shadow:
  0 2em 0em -1em #c00 inset,0 6.2em 0 0 #f8f8f8,
  0 6.2em 0 0.1em #333,0 0 0 0 transparent}

/* perpaduan transition saat gambar dihover */
.doraemon, .doraemon:before,
.doraemon:after {
  -webkit-transform: translate3d(0,0,0);-webkit-transition:0.5s;
  -moz-transform: translate3d(0,0,0);-moz-transition:0.5s;
  transform: translate3d(0,0,0);transition:0.5s}

.doraemon:hover, .doraemon:hover:before,
.doraemon:hover:after {
  border-radius: 0;box-shadow:none;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0)}
</style>
<div class="doraemon">
</div>

Hasilnya:




DEMO SHOW

Bagaimana menurut sahabat semua pecinta SAHABAT BLOGGER 77 tentang gambar diatas, cukup mirip bukan dengan tokoh kartun DORAEMON, silahkan Anda perhatikan pada konsep CSS diatas, tidak ada penulisan link URL-gambar, murni hanya dengan panggunaan CSS Box Shadow. Dasar kanvas untuk melihat gambar asli tersebut bisa Anda lihat jika Gambar di HOVER.

Setelah ini Anda mau membuat gambar apa lagi neh dengan CSS Box Shadow seperti diatas, sambil berpikir mencari inpirasi, bagaimana kalau jalan-jalan sebentar di:

» Desain Gallery Photo Efek Tumpukan
» Membuka Gambar Dengan Perintah Fungsi Klik
» Slide Gambar Dengan Tooltip