cotizaciones BlockQuote estilo

Question

estoy tratando de hacer un estilo blockquote donde la apertura y cierre cotizaciones son más grandes que el texto pero aún caben en su línea, algo como esto example http://s17.postimage.org/ypvv8xxtb/blockquote.png

este es el código que tengo http://jsfiddle.net/EnL3R/2/

la cita abierta muestra encima del texto, y tanto las comillas abiertas como las de cierre le ponen algunos márgenes, me doy cuenta de que es porque el personaje en la fuente tiene este espacio en blanco, ¿hay alguna manera de compensar esto?

Answer 1

Modified padding, margin, display y position atributos y ahora se parecen a abrir bien:

blockquote span { 
    font-size:100px; 
    color:black; 
    position: relative; 
    display:inline-block; 
    padding:0px; 
} 

blockquote span.primo { 
    margin: -40px 0 -100px 0; 
    bottom: -40px; 
} 

blockquote span.ultimo { 
    margin:-130px 0 0 0; 
    bottom:0px; 
} 

/* IE7 only styles */ 
blockquote span { 
    *display: inline; zoom: 1; /* IE7 fix for inline-block */ 
} 
blockquote span.primo { 
    *margin: -20px; *bottom: -20px; /* IE7 position adjustment */ 
} 
blockquote span.ultimo { 
    *margin: -50px; /* IE7 position adjustment */ 
} 

http://jsfiddle.net/EnL3R/26/ (que borde amarillo alrededor de la etiqueta span es sólo para pruebas)

Answer 2

Si Don No tengo que preocuparme por mostrar en ie7 o anterior, creo que los pseudo-elementos serían el camino a seguir. http://jsfiddle.net/EnL3R/16/

Answer 3

Me parece que podría ser mejor usar imágenes. Si intenta utilizar texto para las comillas, se encontrará con el hecho de que la comilla misma es solo una pequeña parte de la altura de la línea.

Puede simplemente poner las imágenes en su contenido y usar vertical-align para obtener la posición correcta. Si no necesita soporte para IE 7 o posterior, incluso puede ponerlos en el CSS, en los pseudo-elementos :before y :after.

blockquote :first-child:before { 
    content: url('images/openquote.png'); 
    } 

blockquote :last-child:after { 
    content: url('images/closequote.png'); 
    vertical-align: -35px; /* tuned to fit image */ 
} 

Demostración: http://jsfiddle.net/EnL3R/17/

Answer 4

actualizar el estilo de blockquote, consulte más abajo .. código para ello.

blockquote { 
    font-size: 18px; 
    padding:20px; 
    text-transform: uppercase; 
} 
blockquote:before { 
    top: 10px; 
    left: 20px; 
    content: "\201C"; 
} 
blockquote:after { 
    top:80px; 
    content: "\201D"; 
} 
blockquote:before, blockquote:after { 
    position: absolute; 
    width: 60px; 
    height: 60px; 
    font-size: 80px; 
    line-height: 1; 
    color: #dd7975; 
} 

cheque this link Para un mayor entendimiento .....