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>