No existe una forma estandarizada súper simple de establecer el tipo web en un círculo (o cualquier tipo de curva). ¡Pero puede hacerse! Exploraremos una manera de hacerlo aquí. Pero tenga cuidado, vamos a usar algo de CSS3 y JavaScript y no nos preocuparemos por los navegadores más antiguos que no son compatibles con algunas de las tecnologías requeridas. Si está interesado en esto para un proyecto real, este tipo de cosas probablemente todavía se atiendan mejor con una imagen con la adecuada alt texto o detección de características adecuada que puede voltear la imagen para esta técnica sofisticada en navegadores que pueden manejarla.
Un ejemplo
Procedamos con algo un poco más simple.
Todo el proceso
Tomemos una frase simple, por ejemplo:
Imagínese si tomáramos las palabras que estábamos tratando de colocar en un círculo y las dividiéramos en letras individuales.
Asegurémonos de que cada cuadro tenga exactamente el mismo tamaño utilizando una fuente monoespaciada.
Ahora hagamos que cada una de esas cajas sea larga, como el radio de una rueda de bicicleta.
Luego empaquetamos todos esos radios para que estén uno encima del otro.
Ahora imagina que fijamos los extremos de esos radios a un eje central. Rotamos cada radio un poco más que el anterior.
Si rotamos el elemento principal en sentido contrario a las agujas del reloj y eliminamos nuestras guías rojas, ¡tenemos algo de texto en un círculo!
Bits técnicos
Para poder manipular cada letra de esa manera, debes envolverlas en otro elemento. Lettering.js puede hacer eso por usted fácilmente (dependencia de jQuery y complementos).
Así que tienes esto.
<h1>Established 2012</h1>Carga jQuery y Lettering.js y luego llama a esto:
$("h1").lettering();Y se convierte en esto en el DOM:
<h1>
<span class="char1">E</span>
<span class="char2">s</span>
<span class="char3">t</span>
<span class="char4">a</span>
<span class="char5">b</span>
<!-- you get the idea -->
</h1>Esto realmente solo funciona bien con fuentes monoespaciadas. Incluso si fuerza el monoespaciado configurando cada lapso en un fijo, el espacio entre cada letra será incorrecto y se verá raro. Podrías ajustarlo manualmente ajustando manualmente cada rotación si estuvieras loco.
Para cada tramo, desea establecer la altura, colocarlos todos en el mismo lugar y luego establecer el origen de transformación en la parte inferior de la caja (para que giren alrededor de ese centro. El prefijo del proveedor es eso).
h1 span {
font: 26px Monaco, MonoSpace;
height: 200px;
position: absolute;
width: 20px;
left: 0;
top: 0;
transform-origin: bottom center;
}Ahora necesita un montón de selectores de nombres de clase, cada uno de los cuales gira un poco más.
.char1 { transform: rotate(6deg); }
.char2 { transform: rotate(12deg); }
.char3 { transform: rotate(18deg); }
/* and so on */Vea el texto del conjunto de bolígrafos en un círculo: 2012 por Programar Plus(@css-tricks) en CodePen.
Pero, eso puede volverse tedioso y desordenado. Con Sass and Compass es una frase de tres líneas:
@for $i from 1 through 100
.char#{$i}
+transform(rotate(($i*6)+deg))Actualizar
Aquí hay una mezcla de Sass (.sass) de Chris Eppstein para una mezcla de rotación de texto más extensible:
=rotated-text($num-letters: 100, $angle-span: 180deg, $angle-offset: 0deg)
$angle-per-char: $angle-span / $num-letters;
@for $i from 1 through $num-letters
.char#{$i}
+transform(rotate($angle-offset + $angle-per-char * $i))