Membuat Bingaki Dengan CSS - Kemampuan CSS untuk memperindah
tampilan layout web sudah tidak di ragukan lagi apalagi dengan muculnya versi
terbaru yaitu CSS 3 yang fleksibelitasnya dalam urusan pengaturan halaman
web. CSS3 juga dapat melakukan atau menampilkan animasi pada halaman
website / blog, diantaranya animasi warna hingga animasi 3D. Dengan CSS3
desainer lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone
dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru
pada CSS3 seperti: multiple background, border-radius, drop-shadow,
border-image, CSS Math, dan CSS Object Model.
Langsung
saja pada topik kita kali ini Membuat
Bingaki Dengan CSS, untuk menampilkan gambar di halaman web
membutuhkan kode seperti ini :
<img height="400" width="400" src="nama-file-gambar.jpg" />
Kalu hanya menggunakan kode seperti di atas maka hasilnya seperti gambar aslinya. untuk itu kita perlu menambahkan kode CSS di dalamnya contohnya kayak di bawah ini :
<style type="text/css">
img.bingkais {
padding:25px;
background-color:#ccc;
border-radius:20px;
}
img.bingkaib {
padding:50px;
background-image:url(images/bingkai.jpg);
border:1px solid #ccc;
}
.dbingkai {
padding:30px;
background-image:url(images/bingkai.jpg);
width:250px;
margin:10px auto;
}
img.bingkair {
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
border:3px solid #fff;
}
img.bingkair1 {
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
border:3px solid #fff;
}
</style>
<script type="text/javascript">var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-3674746-17']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script>
</head>
<body>
<p style="text-align: center;" class="dbingkai"><img height="152" width="256" class="bingkair" src="images/logo.jpg" alt="membuat bingkai gambar dengan css" /></p>
Hasil dari kode diatas seperti gambar di atas, semoga bermanfaat sob.
Title : Membuat Bingaki Dengan CSS
Description : Membuat Bingaki Dengan CSS - Kemampuan CSS untuk memperindah tampilan layout web sudah tidak di ragukan lagi apalagi dengan muculnya vers...