Parágrafo Dropcap com elementos de primeira linha e primeira letra do CSS
Existem alguns seletores CSS ou propriedades que eu acho que raramente são usadas na natureza, mas elas realmente existem desde os dias do CSS1; alguns eles estão incluindo o :primeira linha e :primeira carta pesudo-elementos.
Como usar?
Esses pseudo-elementos basicamente funcionam de maneira semelhante aos seus irmãos -: antes e depois - e eu acho que eles também são bem diretos. o :primeira carta segmentará a primeira letra ou caractere de um elemento selecionado, pseudo-elemento é comumente usado para criar um efeito tipográfico como uma capitular. Aqui está como é feito.
p: primeira letra font-size: 50px;
Este código resulta na seguinte apresentação.
Algumas coisas devem ser observadas, no entanto, esse efeito só será aplicado quando o primeiro caractere não for precedido por outro elemento, por exemplo, uma imagem. Além disso, quando temos alguns dos mesmos elementos segmentados seguidos, todos eles também serão afetados.
Além disso, em termos de :primeira linha, isto pseudo-elemento segmentará a primeira linha do elemento segmentado, este exemplo abaixo mostra como negrito a primeira linha do parágrafo.
p: primeira linha font-weight: bold;
Como o código anterior de :primeira carta, isso também afetará todas as primeiras linhas nos elementos de parágrafo que existem na página.
Então, em casos reais, quando geralmente queremos adicionar capitular ou alterar a primeira linha só no primeiro parágrafo, precisamos ser mais específicos - seja adicionando um atributo de classe extra ou aplicando esses pseudo-elementos junto com :primeiro filho ou : primeiro do tipo seletor, assim.
p: primeiro filho: primeira letra font-size: 50px; p: primeiro filho: primeira linha font-weight: bold;
Lá vamos nós, o parágrafo afetado é agora apenas o primeiro.
Pseudo-Elementos no Trabalho
Tudo bem, vamos agora tentar projetar uma aparência melhor de um parágrafo, utilizando pseudo-elementos. Mas antes de começar, precisamos de uma fonte especial para a nossa capitular e aqui está a minha escolha: Hominis por Paul Lloyd. Em seguida, definimos uma nova família de fontes na folha de estilo, como segue.
@ font-face font-family: 'HominisNormal'; src: url ('fontes / HOMINIS-webfont.eot'); src: url (formato 'fonts / HOMINIS-webfont.eot? #iefix') ('embedded-opentype'), formato url ('fonts / HOMINIS-webfont.woff') ('woff'), url ('fontes / Formato HOMINIS-webfont.ttf ') (' truetype '), formato url (' fonts / HOMINIS-webfont.svg # HominisNormal ') (' svg '); font-weight: normal; estilo de fonte: normal; Em seguida, definimos a família de fontes padrão para os parágrafos.
p color: # 555; font-family: 'Georgia', Times, serif; altura da linha: 24px;
Neste exemplo, estaremos usando o :primeiro filho seletor para segmentar o primeiro parágrafo e aplicar estilos decorativos para que ele pareça mais proeminente:
p: primeiro filho padding: 30px; borda esquerda: 5px sólido # 7f7664; background-color: # f5f4f2; altura da linha: 32px; box-shadow: 5px 5px 0px 0px rgba (127, 118, 100, 0,2); posição: relativa;
Em seguida, adicionamos uma capitular usando :primeira carta, ampliar o tamanho da fonte, bem como atribuir uma nova família de fontes a ela;
p: primeiro filho: primeira letra font-size: 72px; flutuar: esquerda; preenchimento: 10px; altura: 64 px; font-family: 'HominisNormal'; cor de fundo: # 7F7664; margem direita: 10 px; cor branca; raio de fronteira: 5 px; Altura da linha: 70px;
Vamos também enfatizar a primeira linha com :primeira linha, igual a.
p: primeiro filho: primeira linha font-weight: bold; tamanho da fonte: 24px; cor: # 7f7664;
Por fim, queremos adicionar um atributo decorativo ao primeiro parágrafo com um clipe de papel usando :depois de pseudo-elemento.
p: first-child: após background: url ("… /images/paper-clip.png") sem repetição, scroll 0 0 transparente; conteúdo: ""; display: bloco inline; altura: 100 px; posição: absoluta; direita: -5px; topo: -35px; largura: 100px; Esse é todo o código que precisamos, agora nosso parágrafo deve parecer muito melhor;
Você também pode ver a demonstração ao vivo nos links abaixo:
- Ver demonstração
- Fonte de download
Pensamento final
Como mencionamos anteriormente neste post, esses pseudo-elementos, especificamente o :primeira carta e :primeira linha foi incluído desde o CSS1, portanto eles também são suportados até mesmo no Internet Explorer 8 anterior.
No entanto, tanto quanto eu sei, eles não são tão amplamente implementados na natureza. Assim, esperamos que este tutorial possa, de alguma forma, inspirar você a experimentar esses recursos CSS em seu site.
