Aku gak ngerti lagi mesti posting apaan, jadi kali ini aku pengen posting mengenai Efek foto menggunakan css3 sebenarnya aku lagi BT banget nih dari semalam jadi malas nulis malas mau ngapa2in huft tapi demi update blog gak papalah aku sempatin nulis.
okeh coba liat screenshot di atas jika browser anda mendukung css3 maka seperti itulah hasil dari tutorial kali ini, nah dari pada anda penasaran silahkan lihat demonya.
DEMO
Selain untuk Membuat efek pada gambar kodenya juga bisa untuk melindungi gambar coba aja deh klik kanan ada gak salin gambar atau salin url gambar nah langsung saja ya comot kodenya.
<style type="text/css">
.system_efek {
width: 374px;
margin: 0 auto;
padding: 0;
position: relative;
border: 5px solid #0d0
}
.system_efek::before {
content: "";
position: absolute;
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,229,0,0.48) 74%,rgba(0,229,0,1) 100%), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdrj9cz61RlfL8U2ErWfMMVQL8f4Lo_zVOVZRi_USjJvTNBCiDB01gVsunas5hNMbhYKcefXAKEZZnodSTTlnZupjRdBukJesFA2ppV-TQ7g0D5H2i2KAPA2s7Lg0hr-PpYJ6JqJxP1sY/s1600/grid.png);
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,229,0,0.48) 74%,rgba(0,229,0,1) 100%), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdrj9cz61RlfL8U2ErWfMMVQL8f4Lo_zVOVZRi_USjJvTNBCiDB01gVsunas5hNMbhYKcefXAKEZZnodSTTlnZupjRdBukJesFA2ppV-TQ7g0D5H2i2KAPA2s7Lg0hr-PpYJ6JqJxP1sY/s1600/grid.png);
background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,229,0,0.48) 74%,rgba(0,229,0,1) 100%), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdrj9cz61RlfL8U2ErWfMMVQL8f4Lo_zVOVZRi_USjJvTNBCiDB01gVsunas5hNMbhYKcefXAKEZZnodSTTlnZupjRdBukJesFA2ppV-TQ7g0D5H2i2KAPA2s7Lg0hr-PpYJ6JqJxP1sY/s1600/grid.png);
background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,229,0,0.48) 74%,rgba(0,229,0,1) 100%), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdrj9cz61RlfL8U2ErWfMMVQL8f4Lo_zVOVZRi_USjJvTNBCiDB01gVsunas5hNMbhYKcefXAKEZZnodSTTlnZupjRdBukJesFA2ppV-TQ7g0D5H2i2KAPA2s7Lg0hr-PpYJ6JqJxP1sY/s1600/grid.png);
background: radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,229,0,0.48) 74%,rgba(0,229,0,1) 100%), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdrj9cz61RlfL8U2ErWfMMVQL8f4Lo_zVOVZRi_USjJvTNBCiDB01gVsunas5hNMbhYKcefXAKEZZnodSTTlnZupjRdBukJesFA2ppV-TQ7g0D5H2i2KAPA2s7Lg0hr-PpYJ6JqJxP1sY/s1600/grid.png);
width: 100%;
height: 100%;
}
.system_efek img {
max-width: 374px;
border: 0;
}
</style>
<div class='system_efek'>
<img src='URL Gambar anda'/>
</div>Nah silahkan ganti url gambar nya dengna url gambar anda, jangan lupa pada kode
width: 374px; sesuaikan dengan lebar gambarnya dan juga pada kode max-width: 374px; harus sama kode width nya dengan kode width yang pertama.Nah yang membuat efeknya itu ada pada kode
.system_efek::before { pada background untuk menggantinya dengan warna kesukaan anda silahkan anda ke Css Gradient Generator silahkan anda kesana dan klik link yang saya berikan lalu ganti sendiri warnanya tapi anda harus sedikit ngerti css untuk menggantinya.
