Ajax Loader
HTML 
<!DOCTYPE html>
1
<!DOCTYPE html>
2
 
3
<html>
4
    <head>
5
        <meta name="generator" content="HTML Tidy, see www.w3.org" />
6
        <meta charset="utf-8" />
7
 
8
        <title>Test</title>
9
        <link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz&amp;subset=latin" type="text/css" rel="stylesheet" />
10
  </head>
11
 
12
    <body>
13
        <div id="main">
14
            <div id="content">
15
                <h1>CSS3 Toggler</h1>
16
 
17
                <ul class="tutorialMenu">
18
                    <li id="coffeecards">
19
                        <h2><a href=
20
                        "#coffeecards">CoffeeCards</a></h2>
21
 
22
                        <p><span>CSS3 Eigenschaften: Transform
23
                        &amp; Transition Modules, ...</span></p>
24
                    </li>
25
 
26
                    <li id="blogcomments">
27
                        <h2><a href=
28
                        "#blogcomments">BlogComments</a></h2>
29
 
30
                        <p><span>CSS3 Eigenschaften: Border-Radius,
31
                        Box-Shadow &amp; Animation Module,
32
                        ...</span></p>
33
                    </li>
34
 
35
                    <li id="onlineform">
36
                        <h2><a href=
37
                        "#onlineform">OnlineForm</a></h2>
38
 
39
                        <p><span>CSS3 Eigenschaften: MediaQueries,
40
                        Transform &amp; Transition Modules,
41
                        ...</span></p>
42
                    </li>
43
                </ul>
44
            </div>
45
        </div>
46
    </body>
47
</html>
48
 
 
CSS 
body {
1
body {
2
    margin: 0;
3
    padding: 0;
4
    background: url(http://webstandard.kulando.de/templates/blog_1575/new_greenmarinee/images/css3-transform-transition-bg_pattern.png) 0 0 repeat;
5
    font: 12px "Yanone Kaffeesatz", arial, serif;
6
}
7
#content {
8
    margin: 20px auto;
9
    width: 500px;
10
}
11
h1 {
12
    padding: 20px 10px;
13
    margin: 0 0 20px 0;
14
    font-size: 24px;
15
    font-weight: normal;
16
    background: rgb(144,144,144);
17
    background: rgba(255,255,255,.1);
18
    color: #FFF;
19
}
20
h1 a {
21
    color: #ff7e00;
22
    font-size: 20px;
23
}
24
.tutorialMenu {
25
    padding: 10px 0;
26
    margin: 0;
27
    list-style-type: none;
28
}
29
.tutorialMenu h2 {
30
    margin: 5px 0;
31
    padding: 0;
32
}
33
.tutorialMenu h2 a {
34
    font-size: 18px;
35
    display: block;
36
    font-weight: normal;
37
    color: #FFF;
38
    text-decoration: none;
39
    margin: 0;
40
    padding: 10px;
41
    background: rgb(144,144,144);
42
    background: rgba(255,255,255,.3);
43
    position: relative;
44
}
45
.tutorialMenu :not(:target) h2 a {
46
    background: rgb(59,59,59);
47
    background: rgba(0,0,0,.4);
48
    position: relative;
49
}
50
.tutorialMenu h2 a:hover,
51
.tutorialMenu h2 a:active,
52
.tutorialMenu h2 a:focus {
53
    background-color: rgb(59,59,59);
54
    background-color: rgba(255,255,255,.3);
55
}
56
.tutorialMenu :target p,
57
.tutorialMenu :not(:target) p {
58
    padding: 0;
59
    margin: 0;
60
    height: 0;
61
    overflow: hidden;
62
    -moz-transition: height .5s ease;
63
    -webkit-transition: height .5s ease;
64
    -o-transition: height .5s ease;
65
    transition: height .5s ease;
66
}
67
.tutorialMenu :target p { height: 295px }
68
.tutorialMenu #coffeecards p,
69
.tutorialMenu #blogcomments p,
70
.tutorialMenu #onlineform p {
71
    position: relative;
72
    background: url(http://webstandard.kulando.de/templates/blog_1575/new_greenmarinee/images/css3-transform-transition-coffee-cards.jpg) top left no-repeat;
73
    -webkit-border-radius: 5px;
74
    -moz-border-radius: 5px;
75
    border-radius: 5px;
76
}
77
.tutorialMenu #blogcomments p { background-image: url(http://webstandard.kulando.de/templates/blog_1575/new_greenmarinee/images/css3-transform-transition-blog-comments.jpg) }
78
.tutorialMenu #onlineform p { background-image: url(http://webstandard.kulando.de/templates/blog_1575/new_greenmarinee/images/css3-transform-transition-online-form.jpg) }
79
.tutorialMenu p { height: 295px }
80
.tutorialMenu p span {
81
    font-size: 14px;
82
    display: block;
83
    height: 35px;
84
    padding: 15px 0 0 0;
85
    text-indent: 10px;
86
    position: absolute;
87
    bottom: 0;
88
    left: 0;
89
    width: 100%;
90
    color: #FFF;
91
    background: rgb(144,144,144);
92
    background: rgba(0,0,0,.6);
93
    -webkit-border-bottom-right-radius: 5px;
94
    -webkit-border-bottom-left-radius: 5px;
95
    -moz-border-radius-bottomright: 5px;
96
    -moz-border-radius-bottomleft: 5px;
97
    border-bottom-right-radius: 5px;
98
    border-bottom-left-radius: 5px;
99
}
100
h1,
101
.tutorialMenu h2 a,
102
.tutorialMenu :not(:target) p {
103
    -webkit-border-radius: 5px;
104
    -moz-border-radius: 5px;
105
    border-radius: 5px;
106
}
 

Accordion without Javascript

CSSDeck G+