How to make a text reflected with CSS? (type a mirrored text)

Navigation
7

I'd like to do a reflected text effect or mirrored text only with CSS

Type this image:

Doesanyonehaveanytips,ordoyouknowifitispossibletodothismirroredeffectwithonlyCSS?

h1 {
  font-size: 3rem;
  font-family: sans-serif;
  text-align: center;
  margin: 0;
}
<h1>Mirror</h1>
<h1>Mirror</h1>

NOTE: The red letter in the text is not required. Illustrative image only :) Just like the code, which is just an example, does not have to be with H1

    
asked by anonymous 01.10.2018 / 18:11

2 answers

4

Two distinct elements can hurt HTML semantics as they will insert content redundancy into the document. One of the <h1> elements would be merely aesthetic and add nothing to the content, so it should not be in the content. To avoid this, you can use the element :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>

So, with CSS in element :after there is no way to fetch the content of the parent element (not yet, at least), but you can search for an attribute of this element, such as the title attribute. It is important to note that even though it is the same content as the element, this will not be redundant, because semantically the text of title will be treated differently from the content and there will be no problems in being equal.

The attribute title , inclusive, is a global attribute, which means that all HTML elements support.

A similar effect would be possible using the element function of the CSS, however it has almost no support at present. With this function, you can set another element of the document as the background, so you could generate the shadow even with all the color effects in your font: 

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';">&times;</span> 
  Este exemplo só funciona no <strong>Firefox</strong>
</div>

<h1 id="foo">Reflec<span>t</span>ion</h1>

The result, for those who do not have Firefox (or is too lazy to test) is:

    
01.10.2018 / 19:05
2

I think it would be so. You still have to make some more trivial adjustments. 

h1 {
  font-size: 3rem;
  font-family: sans-serif;
  text-align: center;
}

h1.flip {
margin-top: -3.2rem;
  -moz-transform: scaleY(-1);
  -o-transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
  background: -webkit-linear-gradient(#FFF, #777);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
<h1>Mirror</h1>
<h1 class="flip">Mirror</h1>
    
01.10.2018 / 18:28
Print the result of a for JS within a p List all Roles in CheckBox and mark the roles that the User has