CSS

Texto vertical numa imagem usando Css3

Publicado por antlou em 23/08/2017

Este efeito poderá ser útil para aplicar sobre uma imagem.

O texto irá ser inserido na lateral esquerda da imagem, mas poderá ser colocado em qualquer outro lugar da imagem bastando para isso, alterar as propriedades do css.

Resultado:

Vertical Direction

Este efeito poderá trabalhar em qualquer browser actual como por exemplo Internet Explorer, Firefox, Safari, Opera...

texto_vertical.html



<style type="text/css">

    #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.2em;
        color: #FFF;
        text-transform: uppercase;
    }

    #image-golf {
        background:url("img/golf.jpg");
        width: 350px;
        height: 235px;
    }
</style>

 <div id="image-golf">
    <div id="vertical-orientation">Vertical Direction</div>
</div>

voltar para o topo ↑

Download Código

Espero ter sido útil. Deixe avaliação ao script.

1 votos - 5 pontos - 26 downloads
Média : 5,000

Infoscript - Desenvolvimento de websites, e-commerce e programação

Infoscript tem soluções para desenvolvimento web e programação para aproximar os seus clientes às necessidades atuais do mercado.
O design de produto, a criação de websites e lojas online entre outros, são os principais serviços que temos para lhe oferecer.
Contate-nos através do endereço geral@infoscript.pt
Nós teremos uma solução para si à medida.