10

Eu estava querendo cria um texto para poder usar como uma tag <h2> no site. A ideia é que o elemento continue como um texto, não quero uma imagem, pois quero manter o texto semântico e acessível.

Existe alguma forma de chegar em algum desse resultado apenas com CSS?

A ideia é criar um efeito similar a estes de um texto fraturado, tipo uma palavra cortada só com CSS.

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

h2 {
  font-family: sans-serif;
  font-weight: 100;
  font-size: 3rem;
  letter-spacing: .25em;
  text-transform: uppercase;
}
<h2>cortado</h2>

3 Respostas 3

11

Bem limitado, mas ainda sim, apenas com CSS, basta usar dois títulos e posicionar um um pouco mais pra um lado, é importante que um deles fique em cima com uma altura menor e fundo branco

h2[cortado], h2[cortado]::before {
    padding-left: 5px;
    font-family: sans-serif;
    font-weight: 100;
    font-size: 3rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    position: absolute;
    top: 0;
    left: 0;
}
h2[cortado] {
    z-index: 2;
}
h2[cortado]::before {
    content: attr(cortado);
    transform: translateX(3.5px);
    height: 30px;
    background-color: white;
    overflow: hidden;
    z-index: 2;
}
<h2 cortado="cortado">cortado</h2>

Apenas com o atributo sem ter que repetir no HTML usando ::after e ::before, também pode usar a borda e a margem interna pra dar um efeito de distância entre a parte de baixo e de cima

h2[cortado]::after, h2[cortado]::before {
    padding-left: 3.5px;
    font-family: sans-serif;
    font-weight: 100;
    font-size: 3rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    position: absolute;
    top: 0;
    left: 0;
    content: attr(cortado);
}
h2[cortado]::after {
    z-index: 1;
}
h2[cortado]::before {
    transform: translateX(3.5px);
    height: 25px;
    background-color: white;
    overflow: hidden;
    z-index: 2;
    border-bottom: 3px solid white;
    padding-bottom: 3px;
}
<h2 cortado="exemplo"></h2>

5
  • tentei usar o ::before rotacionando com um fundo branco, para ter o efeito de diagonal, mas sem sucesso
    – Costamilam
    Commented 10/10/2018 às 19:34
  • Cara na diagonal é um detalhe, usando o attr() do pseudo elemento ficou bem legal!
    – hugocsl
    Commented 10/10/2018 às 20:56
  • 1
    Não é um clip-path mas melhor que nada
    – Costamilam
    Commented 10/10/2018 às 20:57
  • Adicionei um outro exemplo, apenas com o attr, sem ter que repetir a palavra, e com um espaçamento entre as partes
    – Costamilam
    Commented 13/10/2018 às 16:35
  • 1
    Muito bom jovem! Já esta ficando fera! Se desse eu curtia de novo =)
    – hugocsl
    Commented 13/10/2018 às 17:04
8

Também é possível através da propriedade clip-path do CSS. A questão é só fazer o clip invertido entre os elementos before e after.

h1 {
  font-size: 5rem;
}

[slashed] {
  text-transform: uppercase;
  position: relative;
}

[slashed]:before, [slashed]:after {
  content: attr(title);
  text-transform: uppercase;
  position: absolute;
  top: .2rem;
}

[slashed]:before {
  clip-path: polygon(0 54%, 100% 24%, 100% 0, 0 0);
}

[slashed]:after {
  left: .2rem;
  clip-path: polygon(0 54%, 100% 24%, 100% 100%, 0% 100%);
}
<h1 slashed title="Cortado"></h1>

Desta forma é possível alterar a cor de fundo sem problemas, como pode ser visto no CodePen.

3
  • Criativo haha +1 Commented 10/10/2018 às 20:23
  • Muito bom mestre! Ótima a sacada do clip-path
    – hugocsl
    Commented 10/10/2018 às 20:54
  • 1
    Dessa vez o fator crossbrowser ganhou a disputa ;), mas valeu a resposta!
    – hugocsl
    Commented 11/10/2018 às 11:31
3

Acredito que seja isto o que você precisa:

html,
body {
  height: 100%;
  overflow: hidden;
}
body {
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  transform: rotate(-5deg);
  background: blue;
}
.slashed {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-shadow: 3px 3px 3px rgba(0,0,0,0.5);
}
.slashed .top,
.slashed .bot {
  text-align: center;
  font: 62px/100px arial;
  text-transform: uppercase;
  text-align: center;
  overflow: hidden;
  color: #fff;
}
.slashed .top:before,
.slashed .bot:before {
  content: attr(title);
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  transform: rotate(5deg);
}
.slashed .top {
  position: absolute;
  top: 0;
  left: 5px;
  right: 0;
  bottom: 50%;
}
.slashed .top:before {
  position: absolute;
  bottom: -50px;
  left: 0;
  right: 0;
}
.slashed .bot {
  position: absolute;
  top: 50%;
  left: 0;
  right: 5px;
  bottom: 0;
}
.slashed .bot:before {
  position: absolute;
  top: -50px;
  left: 0;
  right: 0;
}
<div class="slashed">
  <div class="top" title="Cortado"></div>
  <div class="bot" title="Cortado"></div>
</div>

como visto em codepen

6
  • 3
    copy/paste? codepen.io/robertmesserle/pen/Lebco Commented 10/10/2018 às 19:19
  • 4
    O problema não é copiar e colar, mas sim não colocar a fonte
    – Costamilam
    Commented 10/10/2018 às 19:31
  • 1
    Se este era o problema está resolvido ;) Commented 10/10/2018 às 19:32
  • 1
    bom, "como visto em" não é lá uma referência, mas é melhor que nada Commented 10/10/2018 às 19:42
  • 1
    @AlvaroAlves, um bom desafio para ficar mais "original" seria tentar diminuir o número de elementos html Commented 10/10/2018 às 19:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .