Dois elementos distintos pode ferir a semântica do HTML, pois inserirá redundância de conteúdo no documento. Um dos elementos <h1>
seria meramente estético e não acrescenta em nada ao conteúdo, então não deveria estar no conteúdo. Para evitar isso, pode-se utilizar o elemento :after
:
h1 {
position: relative;
}
h1:after {
content: attr(title);
position: absolute;
bottom: 0;
left: 0;
transform: scaleY(-1);
transform-origin: bottom;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.5) 80%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<h1 title="Reflection">Reflection</h1>
Assim, porém, com CSS no elemento :after
não há como buscar o conteúdo do elemento pai (não ainda, pelo menos), mas é possível buscar de um atributo deste elemento, tal como o atributo title
. Importante salientar que mesmo sendo o mesmo conteúdo do elemento, isso não caracterizará redundância, pois semanticamente o texto de title
será tratado de forma distinta do conteúdo e não haverá problemas em serem iguais.
O atributo title
, inclusive, é um atributo global, o que significa que todos os elementos do HTML suportam.
Um efeito semelhante seria possível utilizando a função element
do CSS, porém ela quase não possui suporte atualmente. Com esta função, você consegue definir como plano de fundo outro elemento do documento, então assim você conseguiria gerar a sombra inclusive com todos os efeitos de cores na sua fonte:
h1 {
position: relative;
}
h1:after {
content: '';
width: 100%;
height: 100%;
transform: scaleY(-1);
transform-origin: bottom;
background: -moz-element(#foo) ;
position: absolute;
bottom: 0;
left: 0;
}
span {
color: red;
}
.alert {
padding: 20px;
background-color: #f44336; /* Red */
color: white;
margin-bottom: 15px;
}
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
Este exemplo só funciona no <strong>Firefox</strong>
</div>
<h1 id="foo">Reflec<span>t</span>ion</h1>
O resultado, para quem não tem Firefox (ou está com preguiça de testar) é:
