Breaking

Post Top Ad

Your Ad Spot

domingo, 10 de marzo de 2019

Cómo mostrar texto en vertical con CSS

En este tutorial veremos cómo mostrar un texto en orientación vertical. Para ello utilizaremos CSS, con el que mediante unas cuantas reglas, seremos capaces de redireccionar el texto para que se muestre en disposición vertical. En este ejemplo, tendremos una imagen de fondo con un tagline vertical transparente para mostrar el texto. Para que no sea tan soso y aburrido, personalizaremos el tagline vertical con aspecto moderno y actual.

HTML y CSS para mostrar el texto en vertical

El siguiente código muestra el HTML y los estilos necesarios para mostrar un texto vertical sobre una imagen de fondo. Mediante CSS, rotaremos el texto 90 grados a la izquierda para que se muestre en orientación vertical. Después utilizaremos un tagline transparente para mostrar el texto sobre el fondo.
<style>
        #vertical-orientation {
                float: left;
                transform: rotate(90deg);
                transform-origin: left top 0;
                margin-left: 50px;
                padding: 10px;
                background-color: rgba(37, 34, 34, 0.3);
                opacity: 0.9;
                font-size: 1.8em;
                color: #FFF;
                text-transform: uppercase;
        }
        #image-golf {
                background:url("golf.jpg");
                width: 600px;
                height: 350px;
        }
</style>
<h1>Demo Display Text in Vertical Direction using CSS</h1>
<div class="demo-content">
        <div id="image-golf">
        <div id="vertical-orientation">Vertical Direction</div></div>
</div>

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas