DECOTEXS: Cómo poner texto vertical

Hoy vamos a ver un efecto bastante llamativo, se trata de poner texto vertical en Bloguer. Crearemos un efecto simpático, por ejemplo, para tus cajas de contenido.

Imagínate que tienes contenidos en divs pero ya estás aburrido de las cabeceras para poner los títulos a esos contenidos. Pues bien, a continuación te mostraré cómo poner los títulos de estas cajas en la parte lateral izquierda, y además con un efecto de rotación de 90 grados.

¿Curioso, verdad?. Vamos a ver cómo podemos hacerlo.

Código que vamos a utilizar

Lo que vamos a hacer es utilizar código CSS para hacerlo más sencillo. Cuando necesitemos hacer algún efecto ya sea en tipografías o en imágenes, seguramente podamos hacerlo con código CSS, si lo que estamos buscando hacer un efecto de rotación sencillo, podemos rotar elementos 90 grados en sentido anti horario.

El código que vamos a utilizar en este ejemplo es el siguiente:

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
margin-top: 50px;
}
section {
width: 610px;
margin: 0 auto;
}
.wrapper {
width: 300px;
min-height: 250px;
position: relative;
border: 2px solid black;
border-left: 40px solid black;
padding: 15px;
color: rgba(0, 0, 0, 0.5);
font-size: small;
display: inline-block;
}
.wrapper h3 {
font-size: 1rem;
color: white;
text-transform: uppercase;
letter-spacing: 3px;
position: absolute;
bottom: 0;
left: 0;
margin-left: -30px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
}

Al ser un código CSS, puedes pegarlo directamente en tu blog. Y como siempre, puedes ajustar los parámetros a tus necesidades.

¿Qué hace este código?

Básicamente este código crea una caja de color negro, con un tamaño de 610 píxeles de longitud, a continuación formatea el texto con una tipografía, un tamaño y un color concretos, por último, crea un encabezado

para el título, que lo transforma en mayúscula y lo gira 270 grados.

Ahora creamos las cajas para el contenido

A continuación, lo que tenemos que hacer es crear las cajas con el contenido y el título que hemos rotado. Puedes utilziar un código HTML como este:

<section>
<div class="wrapper">
<h3>Título 1</h3>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat aliquam deserunt harum rem
earum assumenda perspiciatis expedita. Aliquid distinctio tenetur fugiat qui recusandae obcaecati
voluptates.</p>
</div>
</div>
<div class="wrapper">
<h3>Título 2</h3>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat aliquam deserunt harum rem
earum assumenda perspiciatis expedita. Aliquid distinctio tenetur fugiat qui recusandae obcaecati
voluptates.</p>
</div>
</div>
</section>

Resultado final😉

Título 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat aliquam deserunt harum rem earum assumenda perspiciatis expedita. Aliquid distinctio tenetur fugiat qui recusandae obcaecati voluptates.

Título 2