Inicio » Blog » CSS

Texto Circular con CSS y JS

Texto Circular con CSS y JS

¿Cómo diseñar un texto circular con CSS y JS pocas líneas?

Para obtener un texto circular para una página web, primero debemos tener la frase y luego dividirla con split para hacer rotar cada elemento con JS y CSS

VER DEMO

En ocaciones el desarrollo frontend, bueno básicamente el desarrollador se encuentra con el diseño de un texto circular ya sea en ilustración o en un diseño html y css, pues bien, dependiendo de los requerimientos puede optar por diseñar el efecto con JS y CSS.

Bueno entonces aqui tienes un forma sencilla de obtener

Texto circular solo con CSS y JS en pocas lìneas de código

Veamos el código html

<div class="center">
        <h1 id="circle">DISEÑO FRONTEND HTML CSS JAVASCRIPT </h1>
    </div>

CSS

 .center{
            display: grid;
            place-items: center;
        }
        #circle span{
            position: absolute;
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
            height: 140px;
            font-size: 25px;
            width: 20px;
            text-align: center;
            transform-origin: bottom center;
        }

y JAVASCRIPT FINALMENTE


        circle = document.getElementById("circle")
        circlearray = circle.textContent.split('')
        circle.textContent = ''
        for(var i = 0; i< circlearray.length; i++){
            circle.innerHTML += '<span style="transform:rotate('+((i+1)*10)+'deg)">'+ circlearray[i]+'</span>'
        }

Puedes descargar el código completo.

Talvez tiene el código fuente para descargar

Ver Código Fuente

Redactado por: , Leido 4979 veces

Aprende más sobre CSS

Codea App
Codea App FullStack

Perú, México, Colombia, España, Venezuela, Argentina, Bolivia

You Fb Tik Pin

© Todos los derechos reservados Codea App | Cursos de programación | 2020 - 2022