Blockquotes Style

Pada posting kali ini taukahbahwa.blogspot.com akan menyajikan berita tentang Blockquotes Style. Semoga dengan artikel Blockquotes Style akan menambah pengetahuan bagi anda pembaca setia taukahbahwa.blogspot.com

 

1. Classic CSS Blockquote

Usually people use CSS background-image to add large quotation marks in blockquote. In this example we have used CSS to add large quotation marks.

01	blockquote {

02	font-family: Georgia, serif;

03	font-size: 18px;

04	font-style: italic;

05	width: 450px;

06	margin: 0.25em 0;

07	padding: 0.25em 40px;

08	line-height: 1.45;

09	position: relative;

10	color: #383838;

11	background:#ececec;

12

}

13

14	blockquote:before {

15	display: block;

16	content: "\201C";

17	font-size: 80px;

18	position: absolute;

19	left: -10px;

20	top: -10px;

21	color: #7a7a7a;

22

}

23

24	blockquote cite {

25	color: #999999;

26	font-size: 14px;

27	display: block;

28	margin-top: 5px;

29

}

30

31	blockquote cite:before {

32	content: "\2014 \2009";

33

}

2. Classic Blockquote with Image

In this example we have used a background image for quotation marks.

01	blockquote {

02	font: 16px italic Georgia, serif;

03	width:450px;

04	padding-left: 70px;

05	padding-top: 18px;

06	padding-bottom: 18px;

07	padding-right: 10px;

08	background-color: #dadada;

09	border-top: 1px solid #ccc;

10	border-bottom: 3px solid #ccc;

11	margin: 5px;

12	background-image: url(http://example.com/wp-content/themes/your-theme/images/gray-georgia.png);

13	background-position: middle left;

14	background-repeat: no-repeat;

15	text-indent: 23px;

16

}

17

18	blockquote cite {

19	color: #a1a1a1;

20	font-size: 14px;

21	display: block;

22	margin-top: 5px;

23

}

24

25	blockquote cite:before {

26	content: "\2014 \2009";

27

}

3. Simple Blockquote

In this example we have added background color and dashed left border instead of blockquotes. Feel free to play with the colors.

01	blockquote {

02	font-family: Georgia, serif;

03	font-size: 16px;

04	font-style: italic;

05	width: 500px;

06	margin: 0.25em 0;

07	padding: 0.25em 40px;

08	line-height: 1.45;

09	position: relative;

10	color: #383838;

11	border-left:3px dashed #c1c1c1;

12	background:#eee;

13

}

14

15	blockquote cite {

16	color: #999999;

17	font-size: 14px;

18	display: block;

19	margin-top: 5px;

20

}

21

22	blockquote cite:before {

23	content: "\2014 \2009";

24

}

4. White Blue and Orange Blockquote

Blockquotes can be made to standout and they can be just as colorful as you want them to be.

01	blockquote {

02	font-family: Georgia, serif;

03	font-size: 16px;

04	font-style: italic;

05	width: 450px;

06	margin: 0.25em 0;

07	padding: 0.25em 40px;

08	line-height: 1.45;

09	position: relative;

10	color: #FFF;

11	border-left:5px solid #FF7F00;

12	background:#4b8baf;

13

}

14

15	blockquote cite {

16	color: #efefef;

17	font-size: 14px;

18	display: block;

19	margin-top: 5px;

20

}

21

22	blockquote cite:before {

23	content: "\2014 \2009";

24

}

5. Using Google Web Fonts for Blockquotes in CSS

In this blockquote CSS example we have used Droid Serif font from Google web fonts library.

01	blockquote {

02	@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400italic);

03	font-family: 'Droid Serif', serif;

04	font-size:16px;

05	font-style:italic;

06	width:450px;

07	background-color:#fbf6f0;

08	border-left:3px dashed #d5bc8c;

09	border-right:3px dashed #d5bc8c;

10	text-align:center;

11

}

12	blockquote cite {

13	color: #a1a1a1;

14	font-size: 14px;

15	display: block;

16	margin-top: 5px;

17

}

18

19	blockquote cite:before {

20	content: "\2014 \2009";

21

}

6. Round Corner Blockquote

In this example we have blockquote with rounded corners and we have used drop shadow for borders.

01	blockquote {

02	width: 450px;

03	background-color: #f9f9f9;

04	border: 1px solid #ccc;

05	border-radius: 6px;

06	box-shadow: 1px 1px 1px #ccc;

07	font-style: italic;

08

}

09	blockquote cite:before {

10	content: "\2014 \2009";

11

}

7. Using Gradient as Background for Blockquote

In this CSS blockquote example, we have used CSS3 gradient to enhance background of blockquote. CSS gradients are tricky, because of cross-browser compatibility. We recommend using colorlabs, CSS gradient generator.

01	blockquote {

02	width: 450px;

03	color:#FFF;

04	background: #7d7e7d; /* Old browsers */

05	background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */

06	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */

07	background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */

08	background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */

09	background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */

10	background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C */

11	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */

12	border: 1px solid #ccc;

13	border-radius: 6px;

14	box-shadow: 1px 1px 1px #ccc;

15	font-style: italic;

16

}

17	blockquote cite:before {

18	content: "\2014 \2009";

19

}

8. Blockquote with Background Pattern

In this example we have used a background image as pattern for blockquote.

01	blockquote {

02	width: 450px;

03	background-image:url('http://example.com/wp-content/themes/your-theme/images/lined_paper.png');

04	border: 1px solid #ccc;

05	box-shadow: 1px 1px 1px #ccc;

06	font-style: italic;

07

}

08	blockquote cite:before {

09	content: "\2014 \2009";

10

}

9. Using Multiple Images in Blockquote Background

You can use multiple images in blockquote background using css. In this example we have used blockquote:before pseudo element to add another background image to blockquote.

01	blockquote {

02	width: 450px;

03	background-image:url('http://example.com/wp-content/themes/your-theme/images/lined_paper.png');

04	border: 1px solid #ccc;

05	box-shadow: 1px 1px 1px #ccc;

06	font-style: italic;

07

}

08	blockquote:before{

09	position:absolute;

10	margin-top:-20px;

11	margin-left:-20px;

12	content:url('http://example.com/wp-content/themes/your-theme/images/pin.png');

13

}

14	blockquote cite:before {

15	content: "\2014 \2009";

16

}

We hope that you found this article helpful in learning how to customize blockquotes style in WordPress. If you have any questions or suggestions, then please feel free to leave a comment below.

Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com

Homepage|http://taukahbahwa.blogspot.com