¿Alguien sabe si hay un símbolo de chevron doble en unicode/HTML-space similar al guillemet doble representado por » (»)?¿Unicode o HTML tienen un doble guillemet vertical (chevron)?
En otras palabras, estoy tratando de evitar el uso de una imagen si puedo llegar a funcionar con el texto, pero necesito algo como esto:
Es el doble chevron Parece que no puedo averiguar. Parece gráficos para mí, lo es.
No puedo darle la entidad de caracteres que desea, pero es posible efectuar una ... alternativa, y aún no usar imágenes (aunque sí requiere que el texto en sí esté envuelto en un elemento, en este span caso):
<span class="shadowed">^</span>
<span class="rotated">»</span>
CSS:
span { /* this is all, pretty much, just for the aesthetics, and to be adapted */
margin: 0 auto 1em auto;
font-family: Helvetica, Calibri, Arial, sans-serif;
font-size: 2em;
font-weight: bold;
color: #000;
background-color: #ffa;
display: block;
width: 2em;
height: 2em;
line-height: 2em;
border-radius: 0.5em;
text-align: center;
}
span.shadowed {
text-shadow: 0 0.5em 0 #000;
}
span.rotated {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
El span.rotated sección anterior, para IE < 10 compatibilidad (el uso de filtros, mientras que IE 10 (o posiblemente 9) Me/deberían utilizar el -ms-transform o, simplemente, transform CSS3), utilizando un enfoque filter:
span.rotated {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
/* IE < 10 follows */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
JS Fiddle demo (funciona en IE 7/XP, otras versiones no puedo probar).
muy ¡ingenioso! Apuesto a que no funciona en IE, ¿verdad? : - \ (edit: IE8 y bajo no) – jcolebrand
No, iba a dejar un comentario sarcástico junto al '-ms-rotate' diciendo algo como" solo por un sentido de optimismo ... ", pero Sentí que acaba de hacer que el código sea más ruidoso ... –
¿Qué tal, es decir, filtros para la rotación? Verifique este artículo (capítulo de rotación de elementos) http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/ – fliptheweb
Puede ser este sitio te ayudará http://shapecatcher.com/, ¡muy útil!
Gracias, es un sitio genial. No ganaremos una marca de aceptación, pero obtendrá un +1 de mi parte. Encontramos algunos sustitutos interesantes para el doble chevron, pero nada para el doble chevron abajo. – jcolebrand
Ese es un sitio increíble – slashnick
Ojalá hubiera sabido sobre esto antes. – jagill
︽ U + FE3D FORMA DE PRESENTACIÓN vertical izquierdo DOBLE ángulo del soporte
︾ U + FE3E FORMA DE PRESENTACIÓN vertical derecho DOBLE ángulo del soporte
Estos requieren una fuente chino o japonés sin embargo.
Hay un problema con la rotación. Si aplica la rotación (90 grados) y la rotación (-90 grados) a dos » por separado, verá que su posición cambia. Una manera hacky para solucionarlo es aplicar dirección: RTL así:
no directamente relacionado, pero es bueno saber – jcolebrand
imágenes Evitar es un gran gol, pero mucha gente termina navegando con un navegador que no hace Unicode derecho de todos modos; verán cajas. Yo personalmente recomendaría una imagen. Fwiw no vi nada como esto escaneo http://en.wikipedia.org/wiki/List_of_Unicode_characters –
que no conozco de galón, pero tiene la circunfleja: '' ^ circunfleja/acentuada: '' ˆ – Smamatti