Como fazer uma DIV com um texto atravessado. Tipo um texto passando por dentro de uma DIV – html css

Pergunta:


Exite alguma forma de fazer um texto transpor uma div, tipo entrando de um lado e saindo do outro?

Minha ideia seria algo tipo essas imagens. Onde o texto começa de um lado e atravessa por dentro da div. Existe alguma forma de fazer isso com CSS, e que eu possa mudar o texto sem ter que mexer no código do CSS pra ficar adaptando cada vez que eu troco o texto?

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

OBS: Não precisa ficar exatamente como nas imagens, é só para ilustrar a ideia.

Modelo de código:

* {
    box-sizing: border-box;
}

.texto {
    /* border: 1px solid blue; */
    text-align: center;
    padding: 10px 0 10px 0;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    width: 50%;
    perspective: 120px;
}
.texto span {
    display: inline-block;
    font-size: 50px;
    font-family: sans-serif;
    border: 6px solid red;
}
<div class="texto">
    <span>meu texto</span>
</div>
Autor da pergunta hugocsl

fernandosavio

Brincando um pouco com o exemplo do @AndersonCarlosWoss e fazendo algumas modificações consegui um resultado que me parece “aceitável”.

A única diferença é que criei um ::after para sobrepor a borda da direita e modifiquei algumas unidades para se adaptar ao tamanho da fonte do elemento principal.

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.teste {
  box-sizing: border-box;
  font-size: 3em;
  margin: 20px 10px;
  position: relative;
  z-index: 0;
}

.teste::before {
  box-sizing: border-box;
  content: '';
  position: absolute;
  left: 1.5em;
  top: -0.1em;
  height: 1.5em;
  width: 1.5em;
  border: 0.25em solid lightblue;
  z-index: -1;
  transform: perspective(120px) rotateY(-40deg);
}

.teste::after {
  box-sizing: border-box;
  content: '';
  position: absolute;
  left: 1.5em;
  top: -0.1em;
  height: 1.5em;
  width: 1.5em;
  border-right: 0.25em solid lightblue;
  transform: perspective(120px) rotateY(-40deg);
}
<div class="teste">Open English</div>
<div class="teste" style="font-size: 13px;">Open English</div>
<div class="teste" style="font-size: 18px;">Open English</div>

Esta forma reproduz a logo da Open English, mas não exatamente um texto passando por dentro do quadrado, carecendo de alterações¹ para tal.

Uma forma que chega bem próximo é aplicar o estilo no elemento :before (ou :after) do span, com perspectiva para dar o dimensionamento do elemento:

html, body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

span {
  font-weight: 800;
  font-size: 3em;
  position: relative;
}

span:before {
  content: '';
  width: 82px;
  height: 67px;
  border-top: 8px solid lightblue;
  border-right: 7px solid lightblue;
  border-bottom: 8px solid lightblue;
  border-left: 10px solid lightblue;
  transform: perspective(120px) rotateY(-40deg);
  position: absolute;
  left: 10px;
  top: -15px;
  z-index: -1;
}
<span>open english</span>

Mas, desta forma, acabei ficando muito engessado, pois acabei definindo as medidas na mão e, assim, se o tamanho da fonte ou do próprio elemento variar, acabará quebrando o design.


1: Alterações estas que tentarei fazer em breve, mas deixo a resposta aqui até como incentivo a outras respostas.

Fiz uma versão animada, inclusive fiz uns ajustes com box-shadow, e uma opção mais próxima do que era a logo da Open English.

A técnica tb é usando pseudo-elementos um com z-index -1 e com z-index 2 assim um fica por cima e o outro por baixo do texto.

* {
    box-sizing: border-box;
}
body {
    background-color: rgb(248, 215, 255);
    height: 100%;
}

.texto {
    /* border: 1px solid blue; */
    text-align: center;
    padding: 10px 0 10px 0;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    width: 40%;
    perspective: 120px;
}
.texto span {
    display: inline-block;
    font-size: 50px;
    font-family: sans-serif;
    position: relative;
    z-index: 1;
    width: 100%;
    white-space: nowrap;
    padding-left: 100%;
    text-shadow: 0 0 6px rgba(0,0,0,1);
    color: blueviolet;
    margin: 20px;
    animation: textox 5.5s linear infinite;
}
.texto::after, .texto::before {
    content: "";
    position: absolute;
    width: 100px;
    height: calc(100% - 36px);
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateY(-15deg);
}
.texto::after {
    
    border-left: 16px solid limegreen;
    z-index: -1;
    box-shadow: inset 0 0 5px black;
}
.texto::before {
    border-top: 6px solid limegreen;
    border-bottom: 6px solid limegreen;
    border-right: 16px solid limegreen;
    z-index: 2;
    box-shadow: 0 0 5px black, inset -5px 0px 5px -5px black;
}

@keyframes textox {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-200%, 0);
    }
}
<div class="texto">
    <span>meu texto</span>
</div>

Segundo modelo, agora mais similar ao logo da Open English:

Segue o código com a animação:

* {
    box-sizing: border-box;
}
body {
    background-image: linear-gradient(gray, silver);
    background-repeat: no-repeat;
    height: 100%;
}

.texto {
    /* border: 1px solid blue; */
    text-align: center;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    width: 33%;
    perspective: 120px;
}
.texto span {
    display: inline-block;
    font-size: 50px;
    font-family: serif;
    font-weight: bold;
    position: relative;
    z-index: 1;
    width: 100%;
    white-space: nowrap;
    padding-left: 100%;
    margin: 20px;
    text-shadow: 0 0 2px rgba(0,0,0,0.5);
    animation: textox 6s linear infinite;
}
.texto::after, .texto::before {
    content: "";
    position: absolute;
    width: 100px;
    height: calc(100% - 36px);
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateY(-15deg);
}
.texto::after {
    height: 67%;
    width: 6px;
    left: calc(50% - 48px);
    background-image: linear-gradient(to bottom, blue 33%, transparent 33%, transparent 66%, blue 66%);
    z-index: -1;
}
.texto::before {
    border-top: 6px solid blue;
    border-bottom: 6px solid blue;
    border-right: 6px solid blue;
    z-index: 2;
}

@keyframes textox {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-200%, 0);
    }
}
<div class="texto">
    <span>meu texto</span>
</div>

Fonte

Related Posts:

Qual a diferença entre AppCompatActivity e Activity? – android android-activity
Pergunta: Qual a diferença da AppCompatActivity para Activity ? A partir de qual versão a AppCompatActivity foi adicionada ao Android? Autor da pergunta Luhhh A diferença reside ...
Como abreviar palavras em PHP? – php string
Pergunta: Possuo informações comuns como nome de pessoas e endereços, e preciso que elas contenham no máximo 30 caracteres sem cortar palavras. Exemplo: 'Avenida Natalino João Brescansin' ...
Qual é a finalidade de um parêntese vazio numa declaração Lambda? – c# expressões-lambda característica-linguagem
Pergunta: Criei um exemplo de uma declaração Lambda sem argumentos, entretanto, estou com duvidas referente a omissão do parêntese vazio () na declaração. Veja o exemplo: class ...
Boas práticas para URI em API RESTful – api rest restful
Pergunta: Estou com dúvida em relação às URIs de alguns recursos da api que estou desenvolvendo. Tenho os recursos projetos e atividades com relação 1-N, ...
Dúvidas sobre a integração do MySQL com Java – java mysql netbeans
Pergunta: Estou criando um sistema no NetBeans, utilizando a linguagem Java e o banco de dados MySQL. Escrevi o seguinte código para realizar a conexão ...
Qual é a finalidade da pasta Model do framework Inphinit? – php inphinit
Pergunta: No Inphinit micro-framework existe a pasta Model que fica dentro da pasta application, e nela é onde ficam as classes, mas eu estou muito ...
Uso do ‘@’ em variáveis – javascript typescript coffeescript
Pergunta: Vejo em algumas linguagens que compilam para javascript, como TypeScript e CoffeeScript, o uso do @ em variáveis, como também, casos em que o ...
Qual tamanho máximo um arquivo JSON pode ter? – json arquivo
Pergunta: Vou dar um exemplo para conseguir explicar minha duvida: Preciso recuperar informação de imagens vindas de uma API, esse banco de imagens me retorna JSON's ...
O que é Teste de Regressão? – terminologia engenharia-de-software testes
Pergunta: Na matéria de Teste de Software o professor abordou um termo chamado Teste de Regressão, isto dentro da disciplina de teste de software. Sendo ...
O que é um construtor da linguagem? – php característica-linguagem
Pergunta: Em PHP, já li e ouvi várias vezes a respeito dos Construtores da Linguagem. Os casos que sempre ouvi falar deles foi em casos ...
Função intrínseca para converter numérico para string – cobol
Pergunta: Estou a tentar saber se existe alguma função intrínseca do COBOL para converter um data numérico para string sem precisar usar a cláusula REDEFINES: ( ...
Porque usar implements? – java android
Pergunta: Qual a diferença entre usar btn.setOnClickListener(new OnClickListener() { e public class MainActivity extends Activity implements OnClickListener{ Estive fazendo um curso de Android e meu professor falou que ...
O que é XHTML e quando deve ser usado? – html xml xhtml
Pergunta: O que eu sei é que o XHTML precisa ser XML válido. Isso implica, por exemplo, que todas as tags precisam ser fechadas. Por ...
Uma placa aceleradora de vídeo pode melhorar o desempenho não-gráfico? [fechada] – desempenho
Pergunta: Para desenvolver em Ruby on Rails, eu utilizo aqui uma máquina virtual do VirtualBox com Ubuntu Server 14.04 sem interface gráfica instalada. Recentemente descobri uma ...
Concat() VS Union() – c# .net
Pergunta: Qual a diferença entre Concat() e Union() ? Quando usar Concat() e quando usar Union() ? Somente pode ser usado em list ? ...

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *