advanced code snippet search

Posted By

1man on 07/05/06


Tagged

css quotes blockquote


Versions (?)

Who likes this?

204 people have marked this snippet as a favorite

tylerhall
luman
designerd
alvaroisorna
arturo
jonbaer
Fixe
ndegruchy
panatlantica
jpb
miumomo
marza
px
inetguy
nutella
rmaltete
dividespace
Hirmine
theMacpenguin
mountchuck
jacksont123
ggb2g
icarus
manub
Quizosde
m10
marcoba
readfred
vali29
SamuelMiller
candes
marteki
kristin
Leech
torkil
visuallyspun
starprojector
jeff
seekup00
thuesing
snucko
Wizzle
revmitcz
cidibee
creativefire
cczona
adamsimms
gevika
unravelme1
anevaude
blackabee
EvanL
overhang
tutorialhelpdesk
cldwntrsdy
sudhakmy
esquareda
cementboot
titox
jero
rossjha
nighthawk
monapdx
davu
jessibird
abie
mikeingz
dshigdon
polarbear
tewoos
owais
gpenston
kernelpanics
MikeyLikesIt
keith
BFTrick
visualpropaganda
brilliant
fragmentist
iloveitaly
nb109
BrunoMonteiro
spazione
thatryan
smart1
broinjc
dukeRD
carriegates
jsw_nz
daisymorgan
svnlto
cnsaturn
calvingilbert
marnold2000
aleprieto
isocele
ZGX
mgreich
MicronXD
sultano
annalog
sspitler01
profpatsy
rejuvenateproductions
lexpresso
Toddish
GandalfGrey
fuzzylollipop
wanderlusts
BeardyOne
vagrantradio
cossette
mdrisser
davidsp
davidsi
metoikos
maxvee8
jaxsonk
stefanszoltysek
bundle
raspberrypie
babel2675
skindy
aleyst
benrudolph
omardixon
ahsanhabib
colingardom
omerta83
IvoTrompert
amasters
verhaeg
fordsbasement
illegal3alien
osirisinternet
giuliom
lolindirfaelivrin
SideSix
lori
timpreneur
naeemnur
adriennepalmer
fauverism
loris
widgetyegg
uplinq
seanpowell
bobbym245
cromozooom
armanx
devilsansclue
bryanblake
MrFjords
pennfolio
poet
cwulff
zayyarphone
philrae
chendrix
0leg
phuxen
rc2789
tspitzr
primetheus
andrewbowley
aegony
TaopaiC
dwenaus
mrplantain
michellebracken
santanajames
intothelight
Grow
qubestream
kyleturner
acousins
nahid
kantiano
kenpar
gauravjassal
sacha
albertomori
dajocko
MadRukus
steviraab
SevenLayersDesign
roroland
shalomfriss
florentin
fadlee
nekit14
Terion
nWidart
andreagam
jaybong
rcraven
rmurillo020
webalosarema
clac
symsec
jaythakar
vggallego
erikgeerling
thinkbliss


Big Curly Blockquotes

 / Published in: CSS
 

Markup example: See Big Curly Quotes Markup. Thx to difusion.org.uk. No need for images to make big quotes on a page, CSS does it for you. Tested in many browsers.

Expand | Embed | Plain Text 
  1. blockquote {
  2. 	position: relative;
  3. 	text-indent: 2em;
  4. }
  5.  
  6. .bqstart,
  7. .bqend { font-size: 300%; }
  8.  
  9. /* apply IE specific rules first */
  10. .bqstart {
  11. 	text-indent: 0;
  12. 	margin: -0.6em 0 -2em 0;
  13. 	float: left;
  14. }
  15.  
  16. blockquote > .bqstart {
  17. 	/* add extra non-ie rules */
  18. 	position: absolute;
  19. 	top: -0.2em;
  20. 	left: 0;
  21. 	/* remove IE specific rules */
  22. 	float: none;
  23. 	margin: 0;
  24. }
  25.  
  26. .bqend {
  27. 	position: absolute;
  28. 	margin-top: -0.6em;
  29. 	right: 0;
  30. 	text-indent: 0;
  31. }
  32.  
  33. blockquote > .bqend {
  34. 	margin-top: -0.2em;
  35. }

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: berkes on November 27, 2006
Posted By: t0d0r on June 24, 2007

preview: http://24ways.org/2005/swooshy-curly-quotes-without-images

Posted By: chendrix on October 30, 2010

If you use this jQuery script you can automatically add these curly quotes and the associated classes to all blockquotes in your HTML.

You need to login to post a comment.