Code: 6

Textos na vertical com CSS

by Lucas Fontes Gaspareto

HTML

<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

CSS

p {
    display: inline;
    
    /* No Prefixes */
    text-orientation: sideways-right;
    writing-mode: vertical-rl;
    /* Chrome, Android and Safari Prefixes */
    -webkit-text-orientation: sideways-right;
    -webkit-writing-mode: vertical-rl;
    /* Mozilla Prefixes */
    -moz-text-orientation: sideways-right;
    -moz-writing-mode: vertical-rl;
    /* IE Prefixes */
    -ms-text-orientation: sideways-right;
    -ms-writing-mode: vertical-rl;
    /* Opera Prefixes */
    -o-text-orientation: sideways-right;
    -o-writing-mode: vertical-rl;
}

p:last-child {
    /* No Prefixes */
    text-orientation: upright;
    writing-mode: vertical-lr;
    transform: rotate(5deg);
    /* Chrome, Android and Safari Prefixes */
    -webkit-text-orientation: upright;
    -webkit-writing-mode: vertical-lr;
    -webkit-transform: rotate(5deg);
    /* Mozilla Prefixes */
    -moz-text-orientation: upright;
    -moz-writing-mode: vertical-lr;
    -moz-transform: rotate(5deg);
    /* IE Prefixes */
    -ms-text-orientation: upright;
    -ms-writing-mode: vertical-lr;
    -ms-transform: rotate(5deg);
    /* Opera Prefixes */
    -o-text-orientation: upright;
    -o-writing-mode: vertical-lr;
    -o-transform: rotate(5deg);
}