Membuat Gambar Dengan CSS Box Shadow

Info informasi Membuat Gambar Dengan CSS Box Shadow atau artikel tentang Membuat Gambar Dengan CSS Box Shadow ini semoga dapat bermanfaat, dan menambah wawasan. Selamat Membaca! Jangan lupa dishare juga! Jika merasa artikel ini bermanfaat juga untuk orang lain.

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

Demikian artikel tentang Membuat Gambar Dengan CSS Box Shadow ini dapat kami sampaikan, semoga artikel atau info tentang Membuat Gambar Dengan CSS Box Shadow ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.

Bersponsor
👉 Penerbit Content Placement Indonesia
👉 Artikel Kami Terbitkan Harga Terjangkau
👉 Jasa Content Placement
👉 Pasang Backlink Blogroll Premium
👉 Content Placement 50 Jaringan Backlink
👉 Jadi Agen Hanya 100 Ribu Selamanya
👉 Laptop Gaming Terbaik