Lustrzane odbicie/ przerzucanie w poziomie

pytanie zadane 14 września 2022 w Systemy operacyjne, programy przez regiss Nowicjusz (140 p.)

Cześć,

Jaki darmowy program poza Wordem i Paint pozwalają na odbicie lustrzane tekstu?

1 odpowiedź

odpowiedź 14 września 2022 przez VBService Ekspert (252,740 p.)
edycja 17 września 2022 przez VBService

Prawie każda przeglądarka, za pomocą użycia np.:

-webkit-box-reflect (za wyjątkiem Firefox, IE)

<div class="container">
  <div class="reflect">
    Jaki darmowy program poza Wordem i Paint pozwalają na odbicie lustrzane tekstu?
  </div>
</div>

.container {
  margin: 1em;
}
.reflect { 
  width: 85vw; 
  font: 700 2em/1.1 system-ui; 
  text-shadow: 0 0 0.1em #262626; 
  -webkit-box-reflect: below 0.5em linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.5));
}

:after, transform: rotateX(180deg)

<div class="container">
  <div class="reflect"
       data-text="Jaki darmowy program poza Wordem i Paint pozwalają na odbicie lustrzane tekstu?">
    Jaki darmowy program poza Wordem i Paint pozwalają na odbicie lustrzane tekstu?
  </div>
</div>

.container {
  margin: 1em;
}
.reflect {
  position: relative;
  width: 85vw; 
  font: 700 2em/1.1 system-ui; 
  text-shadow: 0 0 0.1em #262626;
}
.reflect:after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: bottom;
  transform: rotateX(180deg);
  line-height: 1.4em;         
  opacity: 0.4;
}

transform: scale(1, -1)

<div class="container">
  <div class="reflect">
    <div>Jaki darmowy program poza Wordem i Paint pozwalają na odbicie lustrzane tekstu?</div>
    <div>Jaki darmowy program poza Wordem i Paint pozwalają na odbicie lustrzane tekstu?</div>
  </div>
</div>

.container {
  margin: 1em;
}
.reflect {
  position: relative;
  width: 85vw; 
  font: 700 2em/1.1 system-ui; 
  text-shadow: 0 0 0.1em #262626;
}
.reflect :last-child {
  margin-top: 0.5em;
  transform: scale(1, -1);
  color: #c4c4c4;
  text-shadow: none;
  user-select: none;
  /* mask-image: linear-gradient(transparent 5%, white 35%);
  -webkit-mask-image: linear-gradient(transparent 5%, white 35%); */
}