Sebuah teknik desain umum belakangan ini adalah untuk menciptakan efek lipat, di mana tampak seolah-olah sebuah beground judul yang membungkus di balik wadahnya. Hal ini umumnya dicapai melalui penggunaan gambar kecil, namun, dengan CSS, kita bisa meniru efek ini cukup mudah. Saya akan menunjukkan kepada Anda bagaimana membuatnya dalam waktu hanya empat menit,
Final HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Shapes</title>
<!--[if IE]>
<style> .arrow { top: 100%; } </style>
<![endif]-->
</head>
<body>
<div id="container">
<h1> My Heading <span class="arrow"></span> </h1>
</div>
</body>
</html>
Final CSS
#container { background: #666;
margin: auto;
width: 500px;
height: 700px;
padding-top: 30px;
font-family: helvetica, arial, sans-serif;
}
h1 { background: #e3e3e3;
background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8);
background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#c8c8c8));
padding: 10px 20px;
margin-left: -20px;
margin-top: 0;
position: relative; width: 70%;
-moz-box-shadow: 1px 1px 3px #292929;
-webkit-box-shadow: 1px 1px 3px #292929;
box-shadow: 1px 1px 3px #292929;
color: #454545;
text-shadow: 0 1px 0 white;
}
.arrow { width: 0;
height: 0;
line-height: 0;
border-left: 20px solid transparent;
border-top: 10px solid #c8c8c8;
top: 104%; left: 0;
position: absolute;
}
Tidak ada komentar:
Posting Komentar