Texto Circular con CSS y JS

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

VIDEO ¿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

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.

¿Quieres descargar el código fuente Texto Circular con CSS y JS?
...por favor suscríbete gratuitamente para descargarlo

CSS HTML Javascript

Download

Comparte el código!...talvez tu amigo lo necesite!

Whatsapp Messenger Facebook Twitter

Visitado 99 veces | Publicado hace 3 semanas

Curso Diseño Web con Bootstrap 4.5

Mira el temario del curso en el siguiente link

VER EL CURSO

CÓDIGO FUENTE CSS

DESCARGAR ARCHIVOS

Logo Codea App

Develop your code

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

You Fb Tik Pin

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020 - 2021