Cara membuat efek shadow pada kotak dan gambar

Penggunaan css3 memang menajubkan. Css3 merupakan pengembangan dari css 1 dan css 2. Keunggulan CSS3 memiliki banyak fitur. seperti shadow, transparansi, gradiasi warna pada border, seleksi warna pada text, fitur skala, kolom pada text, termasuk fitur gradien pada background. Selain itu Penggunaan css3 membuat blog kita menjadi lebih ringan, sehingga ketika membuka blog, loading terasa lebih cepat.
Sekian banyak Tutorial yang sudah saya posting di blog ini sudah menggunakan fitur css3. Dan Untuk kali ini, saya juga akan memanfaatkan fitur dari css3, yaitu memberi efek shadow pada sebuah kotak dan image atau gambar.


Yang pertama, menambahkan bayangan kekanan dan bayangan kebawah pada sebuah kotak, tanpa memberi efek blur:

<style type="text/css">
.box-shadow1{
width:330px;
height:50px;
padding:5px;
margin:0 auto;
color:#fff;
background:#00378A;
border: 1px solid black;
box-shadow: 7px 7px #818181;
-webkit-box-shadow: 7px 7px #818181;
-moz-box-shadow: 7px 7px #818181;
}
</style>
<div class="box-shadow1">TEKS DISINI</div>

Berikut hasilnya :

TEKS DISINI

Yang kedua, menambahkan bayangan kekanan dan bayangan kebawah pada sebuah kotak, dengan memberi efek blur:

<style type="text/css">

.box-shadow2{

width:330px;

height:50px;

padding:5px;

margin:0 auto;

color:#fff;

background:#00378A;

border: 1px solid black;

box-shadow: 7px 7px 8px #818181;

-webkit-box-shadow: 7px 7px 8px #818181;

-moz-box-shadow: 7px 7px 8px #818181;

}

</style>

<div class="box-shadow2">TEKS DISINI</div>

Berikut hasilnya :

TEKS DISINI

Yang ketiga, menambahkan bayangan kekiri dan bayangan keatas pada sebuah kotak, dengan memberi efek blur:

<style type="text/css">

.box-shadow3{

width:330px;

height:50px;

padding:5px;

margin:0 auto;

color:#fff;

background:#00378A;

border: 1px solid black;

box-shadow: -7px -7px 8px #818181;

-webkit-box-shadow: -7px -7px 8px #818181;

-moz-box-shadow: -7px -7px 8px #818181;

}

</style>

<div class="box-shadow3">TEKS DISINI</div>

Berikut hasilnya :

TEKS DISINI

Yang keempat, menambahkan bayangan kekanan dan bayangan kebawah pada sebuah gambar, dengan memberi efek blur :

<style type="text/css">

.box-shadow4{

width:300px;

height:300px;

padding:5px;

margin:0 auto;

color:#ooo;

background:#00378A;

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf1U-nGbrmfwGsnTRDqcVQ33gE8Axyk36DQO80shABHWANrJHWBmJzzkbGYhgGrgTdqdr1syoG_ZALgA_qQNwFKHEv0Q3ghEN8PNNyhu7UF0oQhk8bWxDNWGa5LnySGBSrpYo-hWLOJTBN/s300/Gardu.jpg) no-repeat 0px 0px;

opacity:0.7;

box-shadow: 6px 6px 10px #818181;

-webkit-box-shadow: 6px 6px 10px #818181;

-moz-box-shadow: 6px 6px 10px #818181;

}

</style>

<br />

<div class="box-shadow4">TEKS DISINI</div>

Berikut hasilnya :

TEKS DISINI

Yang kelima, cara menambahkan teks pada box shadow :

Untuk membuat fariasi Teks, silahkan anda bisa lihat artikel  cara membuat fariasi Teks

<style type="text/css">

.box-shadow5{

width:300px;

height:150px;

padding:5px;

margin:0 auto;

color:#fff;

font-size: 22px;

font-family: Goudy Stout,sans-serif;

background:#00378A;

box-shadow: 6px 6px 10px #818181;

-webkit-box-shadow: 6px 6px 10px #818181;

-moz-box-shadow: 6px 6px 10px #818181;

}

</style>

<div class="box-shadow5">Cara membuat efek shadow pada kotak dan gambar</div>

Berikut hasilnya :

Cara membuat efek shadow pada kotak dan gambar

OK....Selamat membaca dan semoga bermanfaat....

Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan
anda gunakan tombol berlangganan artikel yang ada disebelah
kanan halaman ini, atau melalui tombol dibawah ini.

Judul: Cara membuat efek shadow pada kotak dan gambar; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts

• Cara hanya menampilkan judul posting saja pada halaman depan blogUpdate kembali trik cara hanya menampilkan judul postingnya saja pada halaman depan atau home page. Mengingat cara ini memang sangat efisien dan sangat menghemat te ... readmore
• Cara membuat background warna gradasiUntuk membuat background dengan warna gradasi, kita tidak perlu lagi menggunakan gambar sebagai backgroundnya. Tapi sekarang kita bisa menggunakan salah satu dari f ... readmore
• Cara buat Fitur Slide AccordionKarya baru lagi saya buat dan kupersembahkan untuk anda yang selalu setia mampir di blog ini.  Widget ini saya beri nama Fitur Slide Accordion. Selain tampilan ... readmore
• Cara buat menu navigasi Slide OutMasih terus memperbanyak jumlah koleksi menu navigasi. Menu ini bukan termasuk jenis drop down melainkan hanya sekedar navigasi biasa. Tapi menu ini memiliki kelebi ... readmore
• Cara membuat gambar memutarFitur CSS memungkinkan kita untuk membuat banyak hal khususnya membuat tampilan halaman web ataupun blog menjadi lebih menarik. Pada waktu yang lalu saya sudah bany ... readmore