Como criar uma fita CSS
Falamos da Fitas CSS em web design quando um tira de caixa (chamado de fita) envolve outra caixa. É uma técnica de design bastante usada para decorar texto, especialmente cabeçalhos. No site do W3C, você pode conferir como as fitas de CSS usadas corretamente podem ajudar conteúdo da estrutura de uma maneira sutil.
Então, nesse post vamos ver como criar uma fita CSS simples que você pode usar para melhorar os títulos no seu site. Graças a Transformações CSS, podemos criar esse design com uma base de código muito mais simples do que antes.
Você pode dar uma olhada na demonstração final abaixo.
HTML e estilos básicos
Primeiro, criamos um tag marcamos com o .cartão seletor que representa um caixa de retângulo a fita vai embrulho por aí.
Nós também definimos o dimensões básicas e a cor de fundo com CSS.
.cartão background-color: bege; altura: 300 px; margem: 40px; largura: 500px;
A porção média da fita
Nós vamos usar um Variável CSS (nos permite armazenar e reutilizar um valor de CSS) chamado --p para armazenar o valor de preenchimento. O valor do preenchimento propriedade usa o var (- p) sintaxe para os paddings esquerda e direita da fita para que ele possa ser facilmente alargado. o --p variável mais tarde será reutilizado várias vezes; isso torna nosso código flexível.
.faixa de opções --p: 15px; cor de fundo: rgb (170,170,170); altura: 60px; preenchimento: 0 var (- p); largura: 100%;
Na imagem abaixo, você pode ver como sua demonstração deve se parecer neste momento:
Centrando a fita
Nós também precisamos centrar a fita. Nós empurre-o para a esquerda pelo tamanho do preenchimento (marcado pelo --p variável) usando posicionamento relativo.
.faixa de opções --p: 15px; cor de fundo: rgb (170,170,170); altura: 60px; preenchimento: 0 var (- p); posição: relativa; à direita: var (- p); largura: 100%;
A demonstração atualizada:
Os lados da fita
Agora nós criamos o lados esquerdo e direito da fita que aparentemente deve dobrar em torno da borda do cartão. Para tanto, usamos tanto o :antes e :depois de pseudo-elementos de .fita.
Ambos os pseudo-elementos herdam a cor de fundo do .fita, e nós usamos o filtro: brilho (0,5) regra para escurecer sua cor um pouco. Eles também são absolutamente posicionado dentro de seus pais (relativamente posicionados).
Sua largura precisa ser o mesmo que o tamanho do preenchimento, e nós os colocamos para as extremidades esquerda e direita da fita usando o esquerda: 0 e direita: 0 regras de estilo.
.ribbon: antes, .ribbon: depois de background-color: inherit; conteúdo: "; display: bloco; filtro: brilho (.5); altura: 100%; posição: absoluto; largura: var (- p); .ribbon: antes de left: 0; .ribbon: after direita: 0;
Agora a fita com os lados que acabamos de adicionar está como abaixo:
Incline os lados
Para fazer os lados da fita olhe dobrado, nós precisamos inclinar os lados por 45 °. o transformar: skewy () Regra de CSS inclina elementos verticalmente.
.faixa de opções: before left: 0; transformar: skewy (45deg); .ribbon: depois de right: 0; transformar: skewy (-45deg);
Como você pode ver as bordas dos lados não se alinhe depois da transformação, então precisamos puxe-os para baixo.
Alinhe os lados
Para determine o comprimento adequado pelo qual precisamos mover os lados para baixo, nos voltamos para a trigonometria. O que precisamos encontrar é x, Como y é a largura dos lados (igual ao tamanho de preenchimento .fita) e o ângulo θ é 45 ° (o ângulo da inclinação).
O resultado x então precisa ser reduzido pela metade, como há um lado esquerdo e um lado direito, bem.
Se você estiver usando algum pré-processador de CSS, verifique se ele tem bronzeado função, caso contrário, consulte um gráfico tangente ou uma calculadora para descubra o valor tangente do ângulo. Nós somos sortudos como tan 45 ° é 1, o que significa que o valor de x igual a y no nosso caso.
.ribbon: antes, .ribbon: depois de background-color: inherit; conteúdo: "; display: bloco; filtro: brilho (.5); altura: 100%; posição: absoluto; início: calc (var (- p) / 2); largura: var (- p);
Desde a x teve que ser dividido pela metade, usamos o calc () Função CSS para realizar a divisão do --p variável.
Finalmente precisamos alinhar os lados ao longo do eixo z bem, então vamos adicionar o z-index: -1 regra para os lados, a fim de colocá-los atrás da porção média da fita.
.ribbon: antes, .ribbon: depois de background-color: inherit; conteúdo: "; display: bloco; filtro: brilho (.5); altura: 100%; posição: absoluto; início: calc (var (- p) / 2); largura: var (- p); z- índice: -1;
Agora que alinhamos os lados, nossa fita CSS está pronta.
Abaixo, você pode conferir a demonstração ao vivo novamente, por favor, note que ele usa alguns estilos adicionais, bem.
