
Ainda sobre a minha diversão com CSS, estive experimentando a propriedade text-emphasis
, que é uma forma de destacar caracteres adicionando OUTRO caractere acima ou abaixo de cada caractere do texto.
- Espaços em branco - incluindo caracteres que geram espaço em branco, como
- não recebem caractere de ênfase. - A distribuição fica mais organizada em fonte monoespaçada.
- Fica mais fácil ver o caractere de ênfase com fonte grande.
- Por padrão, o caractere extra fica acima do texto, mas é possível mudar a posição.
Em text-emphasis
, é possível definir text-emphasis-style
e text-emphasis-color
, nessa ordem. Assim, você pode escrever das duas formas:
div {text-emphasis-style:open; text-emphasis-color: dodgerblue;}
Por padrão, a ênfase é exibida sobre o texto. Para mudar a posição da ênfase, precisará de text-emphasis-position
, essa propriedade deve ser escrita separadamente:
text-emphasis-position:under;}
Em text-emphasis-style
, são aceitos os seguintes valores:
open
- é um círculo pequeno aberto.
dot
- é um círculo pequeno preenchido.
filled
- é um círculo pequeno preenchido que me parece idêntico a dot.
circle
- é um círculo preenchido, maior que dot.
double-circle
- é um círculo prenchido dentro de um círculo aberto.
triangle
- é um triângulo.
sesame
- é uma sementinha, um gergelim.
- string
- A opção string deixa você escolher um caractere, basta colocá-lo entre aspas. Aqui temos
text-emphasis-style:'🦜'
.
Em text-emphasis-position
, a posição padrão é superior (over
), então é possível personalizar para under
. Para o caso de texto vertical, também é possível definir left
e right
.
Aplicando, teremos:
div.feliz {text-emphasis-position:over right;}
No exemplo abaixo, o caractere de ênfase está abaixo (under
) do texto no modo horizontal. Ao clicar na caixa, o texto fica no sentido vertical e os caracteres passam para a parte de cima do texto, que neste caso é right
(direita).
O exemplo abaixo mostra como o recurso fica mais elegante numa fonte grande e monoespaçada:
No exemplo abaixo, apliquei uma mudança de caractere com :hover
(não confundir com over).
div.correio:hover, div.correio:active {text-emphasis-style:"📭";}
No CodePen, eu estive fazendo experimentos para descobrir melhor as diferenças entre text-emphasis
e text-decoration
:
See the Pen text-decoration e text-emphasis by Helen Fernanda (@helenfernanda) on CodePen.
Você encontra mais informações sobre text-emphasis
nos sites MDN e W3Schools.
Nenhum comentário:
Postar um comentário
Todos os comentários são moderados pela autora do blog.