A common design technique lately is to create a fold effect, where it appears as if a heading is wrapping behind its container. This is generally achieved through the use of tiny images; however, with CSS, we can mimic this effect quite easily. I'll show you how in four minutes.
Final HTML
1 |
|
2 |
<!DOCTYPE html>
|
3 |
|
4 |
<html lang="en"> |
5 |
<head>
|
6 |
<meta charset="utf-8"> |
7 |
<title>CSS Shapes</title> |
8 |
|
9 |
<!--[if IE]>
|
10 |
<style>
|
11 |
.arrow { top: 100%; }
|
12 |
</style>
|
13 |
<![endif]-->
|
14 |
|
15 |
</head>
|
16 |
<body>
|
17 |
<div id="container"> |
18 |
|
19 |
<h1> My Heading <span class="arrow"></span> </h1> |
20 |
|
21 |
</div>
|
22 |
</body>
|
23 |
</html>
|
Final CSS
1 |
|
2 |
#container { |
3 |
background: #666; |
4 |
margin: auto; |
5 |
width: 500px; |
6 |
height: 700px; |
7 |
padding-top: 30px; |
8 |
font-family: helvetica, arial, sans-serif; |
9 |
}
|
10 |
|
11 |
h1 { |
12 |
background: #e3e3e3; |
13 |
background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8); |
14 |
background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#c8c8c8)); |
15 |
padding: 10px 20px; |
16 |
margin-left: -20px; |
17 |
margin-top: 0; |
18 |
position: relative; |
19 |
width: 70%; |
20 |
|
21 |
-moz-box-shadow: 1px 1px 3px #292929; |
22 |
-webkit-box-shadow: 1px 1px 3px #292929; |
23 |
box-shadow: 1px 1px 3px #292929; |
24 |
|
25 |
color: #454545; |
26 |
text-shadow: 0 1px 0 white; |
27 |
}
|
28 |
|
29 |
.arrow { |
30 |
width: 0; height: 0; |
31 |
line-height: 0; |
32 |
border-left: 20px solid transparent; |
33 |
border-top: 10px solid #c8c8c8; |
34 |
top: 104%; |
35 |
left: 0; |
36 |
position: absolute; |
37 |
}
|
By
