Ajax Loader
HTML 
<h1 class="heading">12 - CSS3 Blockquote Effects Demo</h1>
1
<h1 class="heading">12 - CSS3 Blockquote Effects Demo</h1>
2
<blockquote class="default">
3
  <h1><span class="Cdefault">DEFAULT</span> - Blockquote Color Palette</h1>
4
  <p>Use this class for blockquote layout.</p>
5
<code>
6
  &lt;blockquote class="<span class="Cdefault">default</span>"&gt;
7
       Some Text...
8
   &lt;/blockquote&gt;
9
</code>
10
</blockquote>
11
 
12
<blockquote class="grapefruit">
13
  <h1><span class="Cgrapefruit">GRAPEFRUIT</span> - Blockquote Color Palette</h1>
14
  <p>Use this class for blockquote layout.</p>
15
<code>
16
  &lt;blockquote class="<span class="Cgrapefruit">grapefruit</span>"&gt;
17
       Some Text...
18
   &lt;/blockquote&gt;
19
</code>
20
</blockquote>
21
 
22
 
23
<blockquote class="bittersweet">
24
  <h1><span class="Cbittersweet">BITTERSWEET</span> - Blockquote Color Palette</h1>
25
  <p>Use this class for blockquote layout.</p>
26
<code>
27
  &lt;blockquote class="<span class="Cbittersweet">bittersweet</span>"&gt;
28
       Some Text...
29
   &lt;/blockquote&gt;
30
</code>
31
</blockquote>
32
 
33
<blockquote class="sunflower">
34
  <h1><span class="Csunflower">SUNFLOWER</span> - Blockquote Color Palette</h1>
35
  <p>Use this class for blockquote layout.</p>
36
<code>
37
  &lt;blockquote class="<span class="Csunflower">sunflower</span>"&gt;
38
       Some Text...
39
   &lt;/blockquote&gt;
40
</code>
41
</blockquote>
42
 
43
<blockquote class="grass">
44
  <h1><span class="Cgrass">GRASS</span> - Blockquote Color Palette</h1>
45
  <p>Use this class for blockquote layout.</p>
46
<code>
47
  &lt;blockquote class="<span class="Cgrass">grass</span>"&gt;
48
       Some Text...
49
   &lt;/blockquote&gt;
50
</code>
51
</blockquote>
52
 
53
<blockquote class="mint">
54
  <h1><span class="Cmint">MINT</span> - Blockquote Color Palette</h1>
55
  <p>Use this class for blockquote layout.</p>
56
<code>
57
  &lt;blockquote class="<span class="Cmint">mint</span>"&gt;
58
       Some Text...
59
   &lt;/blockquote&gt;
60
</code>
61
</blockquote>
62
 
63
<blockquote class="aqua">
64
  <h1><span class="Caqua">AQUA</span> - Blockquote Color Palette</h1>
65
  <p>Use this class for blockquote layout.</p>
66
<code>
67
  &lt;blockquote class="<span class="Caqua">aqua</span>"&gt;
68
       Some Text...
69
   &lt;/blockquote&gt;
70
</code>
71
</blockquote>
72
 
73
<blockquote class="bluejeans">
74
  <h1><span class="Cbluejeans">BLUEJEANS</span> - Blockquote Color Palette</h1>
75
  <p>Use this class for blockquote layout.</p>
76
<code>
77
  &lt;blockquote class="<span class="Cbluejeans">bluejeans</span>"&gt;
78
       Some Text...
79
   &lt;/blockquote&gt;
80
</code>
81
</blockquote>
82
 
83
<blockquote class="lavander">
84
  <h1><span class="Clavander">LAVANDER</span> - Blockquote Color Palette</h1>
85
  <p>Use this class for blockquote layout.</p>
86
<code>
87
  &lt;blockquote class="<span class="Clavander">lavander</span>"&gt;
88
       Some Text...
89
   &lt;/blockquote&gt;
90
</code>
91
</blockquote>
92
 
93
<blockquote class="pinkrose">
94
  <h1><span class="Cpinkrose">PINKROSE</span> - Blockquote Color Palette</h1>
95
  <p>Use this class for blockquote layout.</p>
96
<code>
97
  &lt;blockquote class="<span class="Cpinkrose">pinkrose</span>"&gt;
98
       Some Text...
99
   &lt;/blockquote&gt;
100
</code>
101
</blockquote>
102
 
103
<blockquote class="light">
104
  <h1><span class="Clight">LIGHT</span> - Blockquote Color Palette</h1>
105
  <p>Use this class for blockquote layout.</p>
106
<code>
107
  &lt;blockquote class="<span class="Clight">light</span>"&gt;
108
       Some Text...
109
   &lt;/blockquote&gt;
110
</code>
111
</blockquote>
112
 
113
<blockquote class="gray">
114
  <h1><span class="Cgray">GRAY</span> - Blockquote Color Palette</h1>
115
  <p>Use this class for blockquote layout.</p>
116
<code>
117
  &lt;blockquote class="<span class="Cgray">gray</span>"&gt;
118
       Some Text...
119
   &lt;/blockquote&gt;
120
</code>
121
</blockquote>
122
 
123
 
CSS 
/*
1
/*
2
// 12 - CSS3 Blockquote Effects Demo
3
// Made with ❤ by @Pawan_Mall
4
// http://www.pawanmall.net
5
*/
6
 
7
@import url('http://fonts.googleapis.com/css?family=Montez');
8
@import url(http://fonts.googleapis.com/css?family=Francois+One);
9
 
10
body{
11
  background: #f5f7fa;
12
  margin:10px;
13
  padding:10px;
14
}
15
 
16
blockquote{
17
  display:block;
18
  background: #fff;
19
  padding: 15px 20px 15px 45px;
20
  margin: 0 0 20px;
21
  position: relative;
22
23
  /*Font*/
24
  font-family: Georgia, serif;
25
  font-size: 14px;
26
  line-height: 1.2;
27
  color: #666;
28
 
29
  /*Box Shadow - (Optional)*/
30
  -moz-box-shadow: 2px 2px 15px #ccc;
31
  -webkit-box-shadow: 2px 2px 15px #ccc;
32
  box-shadow: 2px 2px 15px #ccc;
33
 
34
  /*Borders - (Optional)*/
35
  border-left-style: solid;
36
  border-left-width: 15px;
37
  border-right-style: solid;
38
  border-right-width: 2px;  
39
}
40
 
41
blockquote::before{
42
  content: "\201C"; /*Unicode for Left Double Quote*/
43
44
  /*Font*/
45
  font-family: Georgia, serif;
46
  font-size: 60px;
47
  font-weight: bold;
48
  color: #999;
49
50
  /*Positioning*/
51
  position: absolute;
52
  left: 10px;
53
  top:5px;
54
55
}
56
 
57
blockquote::after{
58
  /*Reset to make sure*/
59
  content: "";
60
}
61
 
62
blockquote a{
63
  text-decoration: none;
64
  background: #eee;
65
  cursor: pointer;
66
  padding: 0 3px;
67
  color: #c76c0c;
68
}
69
 
70
blockquote a:hover{
71
 color: #666;
72
}
73
 
74
blockquote em{
75
  font-style: italic;
76
}
77
 
78
  /*Default Color Palette*/
79
blockquote.default{
80
  border-left-color: #656d77;
81
  border-right-color: #434a53;
82
}
83
 
84
/*Grapefruit Color Palette*/
85
blockquote.grapefruit{
86
  border-left-color: #ed5565;
87
  border-right-color: #da4453;
88
}
89
 
90
/*Bittersweet Color Palette*/
91
blockquote.bittersweet{
92
  border-left-color: #fc6d58;
93
  border-right-color: #e95546;
94
}
95
 
96
/*Sunflower Color Palette*/
97
blockquote.sunflower{
98
  border-left-color: #ffcd69;
99
  border-right-color: #f6ba59;
100
}
101
 
102
/*Grass Color Palette*/
103
blockquote.grass{
104
  border-left-color: #9fd477;
105
  border-right-color: #8bc163;
106
}
107
 
108
/*Mint Color Palette*/
109
blockquote.mint{
110
  border-left-color: #46cfb0;
111
  border-right-color: #34bc9d;
112
}
113
 
114
/*Aqua Color Palette*/
115
blockquote.aqua{
116
  border-left-color: #4fc2e5;
117
  border-right-color: #3bb0d6;
118
}
119
 
120
/*Blue Jeans Color Palette*/
121
blockquote.bluejeans{
122
  border-left-color: #5e9de6;
123
  border-right-color: #4b8ad6;
124
}
125
 
126
/*Lavander Color Palette*/
127
blockquote.lavander{
128
  border-left-color: #ad93e6;
129
  border-right-color: #977bd5;
130
}
131
 
132
/*Pinkrose Color Palette*/
133
blockquote.pinkrose{
134
  border-left-color: #ed87bd;
135
  border-right-color: #d870a9;
136
}
137
 
138
/*Light Color Palette*/
139
blockquote.light{
140
  border-left-color: #f5f7fa;
141
  border-right-color: #e6e9ed;
142
}
143
 
144
/*Gray Color Palette*/
145
blockquote.gray{
146
  border-left-color: #ccd1d8;
147
  border-right-color: #aab2bc;
148
}
149
 
150
 
151
/* These CSS classes used just for Demo purpose */
152
.heading{
153
   font-family:Montez;
154
   text-align:center;
155
   font-size:30px;
156
}
157
code{
158
  color:#da4453;
159
}
160
span{
161
  font-weight:bolder;
162
163
}
164
h1{
165
  text-align:left;
166
  font-size:16px;
167
  font-family: 'Francois One', sans-serif;
168
}
169
 
170
span.Cdefault{
171
  color:#434a53;
172
}
173
span.Cgrapefruit{
174
  color:#da4453;
175
}
176
span.Cbittersweet{
177
  color:#e95546;
178
}
179
span.Csunflower{
180
  color:#f6ba59;
181
}
182
span.Cgrass{
183
  color:#8bc163;
184
}
185
span.Cmint{
186
  color:#34bc9d;
187
}
188
span.Caqua{
189
  color:#3bb0d6;
190
}
191
span.Cbluejeans{
192
  color:#4b8ad6;
193
}
194
span.Clavander{
195
  color:#977bd5;
196
}
197
span.Cpinkrose{
198
  color:#d870a9;
199
}
200
span.Clight{
201
  color:#e6e9ed;
202
}
203
span.Cgray{
204
  color:#aab2bc;
205
}
206
 
207
 
208
 
 

12 - CSS3 Blockquote Effects Demos

CSSDeck G+