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




Gambar Doraemon


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

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Gambar Dengan CSS Box Shadow
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

29 komentar

  1. thx sobat infonya
    kunjungan balik ya

    BalasHapus
    Balasan
    1. kalau ga hujan ntar saya kunbal dech :d

      Hapus
  2. penggunaannya menggunakan css box shadow yang di bentuk menjadi garis pada bentuk tertentu ya dev...yang saya rada lemot mempelajari susunan kode box shadownya yang lumayan panjang...kudu sabar dulu belajarnya...kalau tinggal pakai sih menarik, tapi yang membetuknya itu yang bikin penasaran...sib sista...makasih

    BalasHapus
    Balasan
    1. benar mbah, jika hanya tinggal pakai mungkin menarik karena langsung jadi, karenanya disana saya susun elemen-elemen CSS box shadow untuk membentuk apa, atau bentuk bagian apa, agar lebih mudah dipahami oleh sahabat lain yang mungkin ingin membuat gambar NOBITA, hehe,..!!

      Hapus
    2. ya mbak, kalau tinggal pakai keenakan.
      ntar pada gamau belajar dan memahami :d

      Hapus
  3. Wih,lucu doraemonnya, turorialnya tinhkat tinggi.

    BalasHapus
    Balasan
    1. lucuan juga suneo dong mas :d

      Hapus
  4. keren, lanjutkan karyanya mas.siapa tau bisa bikin fim kartun..

    BalasHapus
    Balasan
    1. Mas hendri ...
      devy itu cwe .... bkn mas mas loh ...hehehe

      Hapus
    2. hahaha...mulai sekarang Devy mau tertawa seperti cowok sajalah, kayak mas-mas seperti yang disebutin mbak hendri, eh...mas hendri sud Devy, hahaha..!!

      Hapus
    3. Hehehe .... mas mw ketawa spt cowo ...ntr berubah donk mukanya devy ...

      Hapus
    4. untuk sementara ini mukanya belum berubah mas, tetapi kumisnya yang sudah tumbuh neh, hehe..!!

      Hapus
    5. Sini sy cukurin kumisnya devy .... :D

      Hapus
    6. pantesan bbm aku ga dibales, ternyata lagi godain mbak devy tah (c)
      hadechh,,_

      Hapus
  5. Balasan
    1. makasih karena mengerti dan paham atau sekedar menghargai ini tutorial ya mbah itu mas rolly, soalnya tiap kali berkomentar di blog ini selalu saja dengan kalimat yang sama,

      masa Devy harus jawab sama-sama melulu, hehe..!!tetapi gak apa-apa dech, terimakasih juga sudah mau berkunjung di blog Devy yang semerawut ini, dan juga mbah dinan.

      Hapus
    2. ada dua tu mbak, karena males ngetik atau memang ndak paham apa yang mau dikomentari, damai ya mas rolly :D

      Hapus
  6. Kereen banget sobat. Aku suka CSS, hanya saja waktunya gak cukup.

    Terima kasih sudah berbagi "Membuat gambar dengan CSS-box Shadow". Keren abis..!!

    BalasHapus
    Balasan
    1. tenang saja sebentar lagi presiden JOKOWI akan meresmikan waktu 1 hari akan menjadi 26 jam, biar waktu mas Marlon bisa cukup, hehe..
      (just kidding..!!)

      Hapus
  7. ini masih di bawah naungan CSS dan Box hover ya mbak, berarti ada dua gamabr di dalamnya ya, mohon edit kalau salah :D

    BalasHapus
    Balasan
    1. sebenarnya sih bukan mas, Gambar HOVER yang saya tampilkan disana hanya untuk menjelaskan bahwa dasar gambar ini saya bentuk awalnya dari sebuah kotak seperti itu, lalu dengan CSS box-shadow bentuk tangan, kepala, kaki dan badan saya hubungkan menjadi satu area hingga terbentuk gambar DORA.

      Cara seperti ini dasarnya banyak digunakan untuk membuat logo mas, karena jika dengan menyisipkan langsung URL-Gambar ribet penggunaannya, karena harus kita Upload dulu itu gambar untuk mendapatkan alamat URL, bukan begitu mas Ibra.

      Hapus
  8. wihh bisa berubah kotak gitu..
    murni hanya dengan panggunaan CSS Box Shadow ya mba..
    kalo gambar lain prinsipnya apa sama? misal gambar spongbob

    BalasHapus
    Balasan
    1. bisa mas, kita ambil dahulu sample gambar yang akan kita bentuk, misal gaya spongbob lagi berbicara tau lagi berlari atau apalah, lalu kita ukur tinggi kepala, dan badan, selanjutnya kita bentuk lekukan ntuk membuat bundaran yang dibutuhkan saat gambar akan dibuat,

      setelahnya tinggal mengubah warna pada nilai sumbu box-shadow pada gambar spongbob semirip mungkin, warna yellow (kuning) biasanya gambar spongbob, tinggal diracik dech.

      caranya sama seperti diatas mas, seperti yang sudah Devy jelaskan pada setiap bagian elemen CSS box-shadow untuk membentuk apa.

      Hapus
  9. Efek shadownya seperti animasi ber format swf... keren (h) padahal hanya pakai script css... kalo beda gambar bingung juga ngukurnya tuh mba... harus ekstra teliti :)

    BalasHapus
  10. Mantap Sis,,, menambah ilmu tentang css,,, Keep POsting (h)

    BalasHapus
  11. Mirip Morphing Buttons Concept. Tapi ini lebih detail form tansitionnya. Kreatif dan keren banget...!

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK