I figured I’d share two ways I’ve done blockquotes on this site.
Here is the HTML being used
<blockquote><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet quam. Sed quis justo scelerisque dui iaculis euismod. Nunc sit amet lectus ac orci placerat pulvinar?</p></blockquote>
The first is from the original design the site had.
In this one I just use 2 images for the quotes, but no extra div for the closing quote, because I use the last-child pseudo-class.
blockquote {
margin:1.5em;
padding:5px 40px;
border-top:1px solid #eee;
border-bottom:1px solid #eee;
background:url(images/quotation_marks.gif) no-repeat left 5px;
color:#717f53;
min-height:30px;
}
blockquote p:last-child {background:url(images/quotation_marks_close.gif) no-repeat right bottom;}/*css3*/
The second is the one I use on the site right now. Instead of using images, I just use the css content property and set the value to open-quote for the before pseudo-class and close-quote for the after pseudo-class. I also add css rounded corners for some extra styling.
blockquote p {
padding:10px;
margin:10px;
}
blockquote:before, blockquote:after {
display:block;
cursor:default;
line-height:1em;
font-weight:bold;
font-size:1.6em;
color:#000;
font-family:Georgia, 'Times New Roman', serif;
}
blockquote:before {
content:open-quote;
}
blockquote:after {
text-align:right;
content:close-quote;
}
blockquote {
margin:20px;
padding:10px;
border:1px solid #eee;
line-height:1.4em;
color:#918e95;
-moz-border-radius:5px; -webkit-border-radius:5px;/*css3 rounded corners*/
}
This CSS may not work in older-browsers, but if the blockquote is indented with a border or set to another color, it should stand out enough to be ok.
Check out my technique here: http://burdongrange.co.uk/
It doesn’t use images, and the quotes stay with the text rather than their container. It also resizes really nicely. Doesn’t rely on css3 either.
Nice technique! I’m not sure I’ve seen last-child used in such a way, very smart though. Good stuff.
Llevo tiempo buscando por la red como modificar el aspecto de los Tags en WordPress, ¿alguna sugerencia?
Saludos
Google Translate Spanish » English
I’ve been looking for the network time as modify the appearance of the Tags in WordPress, does any suggestions?
Greetings
Great work!