12:46 PM
Roisa Collegians ^_^
“Saya terperanga ketika pertama kali melihat fitur baru CSS3 pada beberapa artikel yang berhasil saya kumpulkan. Bagaimana tidak, hemm.. fitur baru itu sangat membantu para web designer atau calon web designer dalam mengerjakan projectnya”, yap. Salah satu kemampuan menarik dari CSS3 adalah dalam pembuatan kreasi objek dengan effect shadow, berikut merupakan kreasi border dengan memanfaatkan Cascading Style Sheet (CSS) yang memungkinkan web developer untuk memisahkan HTML dari aturan-aturan:
Script CSS: kreasi.css
Kode HTML: kreasi-border.html
.bundar{
width : 200px;
height : 200px;
-moz-border-radius : 100px;
-webkit-border-radius : 100px;
border : 2px solid #afda01;
background-color : #b3d8a9;
}
#inner{
text-align : center;
position : relative;
border : none;
width : 100px;
height : 100px;
}
.kotaktumpul{
padding : 5px;
border : 5px solid #014101;
width : 450px;
height : 90px;
background: yellow;
border-bottom-right-radius : 31px;
border-top-left-radius : 31px;
}
.shadow{
padding : 15px;
border : 1px solid #afda01;
-moz-box-shadow: 0 10px 16px rgba(66, 140, 240, 0.5), inset 0 -25px 20px -10px #7ad;
-webkit-box-shadow : 5px 5px 3px rgba(255, 0, 0, 0.5);
width : 500px;
height : 55px;
}
<!--
Roisatul Azizah
109533414524
Kreasi Border dengan CSS
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kreasi Border memanfaatkan CSS</title>
<link href="belajar_html/roisa-binner.ico" rel="icon" type="image/vnd.microsoft.icon">
<link href="kreasi.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="bundar" align="center">
<p id="inner"> Jadikanlah 1/3 malam sebagai bukti rasa cinta kepada Allah SWT.. Berikan kelancaran dan keistiqomahan..!! </p>
</div>
<br/>
<div class="kotaktumpul">
<p align="left"> <b><i> Refleksi: </i></b></p> <center>Berseriuslah.. Sungguh yang jadi pembeda hanyalah <b>Keimanan</b></center>
</div>
<br/>
<div class="shadow">If you can't explain it <b>simply</b>, you don't understand it well enough. <br> <p align="right"> - Albert Einstein</p>
</div>
</body>
</html>
Penjelasan Singkat:
Untuk membuat objek berbentuk bundar atau lingkaran, dapat dilakukan dengan menyesuaikan ukuran tinggi dan lebar dengan -moz-border-radius untuk rounded corder (moz merupakan kode untuk mozila firefox, webkit untuk opera 10+, chrome dan safari), sedangkan untuk memunculkan effect shadow dapat dengan perintah -moz-box-shadow. Dalam pengaturan shadow dapat dilakukan dengan trial color rgba, dan untuk mempercantik juga dapat mengedit inset.
With RGBA you use the the amount of red, amount of green, amount of blue, and the level of opacity. Instead of using a hex (#) code. The RGBA method is used often in many CSS3 buttons effect. RGBA is one of the most easiest CSS3 properties as it's juts a matter of checking in Photoshop or your design app of choice what the color codes are
Terima kasih, semoga bermanfaat.
Roisatul Azizah | 109533414524 | S1 PTI 2009 Off A
