Com CSS da para cortar um texto? Tipo um efeito de texto cortado ou fonte quebrada? – html css html5

Pergunta:


Eu estava querendo cria um texto para pode usar como <h2> no site, queria que o forma de texto fosse mantida não quero uma imagem, pois quero manter o texto semântico e acessível.

Existe alguma forma de chegar nesse resultado apenas com CSS?

A ideia é criar um efeito similar a estes:

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>
Autor da pergunta hugocsl

Guilherme Costamilam

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>

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.

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

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 *