ZorNet.Ru — сайт для вебмастера » HTML и CSS » Зеркальное отражение текста на CSS

Зеркальное отражение текста на CSS

В этой статье создадим эффект для отражения текста, где добавить зеркальный трюк текстовому элементу, и все это делаем при помощи HTML и CSS. Где у текста будет возможность на изменение, а сам эффект соответственно самостоятельно подстраиваться. Это уже полностью готовым код со стилистикой, при помощи которого мы как раз задействуем зеркальное отражение знака или буквы.

Такой стиль можно увидеть на заголовках, ведь он безусловно сразу бросается в глаза. Где также не исключаю, что он отлично подойдет под логотип или другие название. С нашей стороны не нужно настраивать, если все оставить по умолчанию, а просто написать то слово, и продублировать его под отображение.

Установочный процесс:

Первый вариант:

HTML

Код

<h1 data-text="ZorNet.Ru">
ZorNet.Ru
</h1>

CSS

Код

h1 {
  margin: 0;
  padding: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Roboto Slab', serif;
  text-transform: uppercase;
  color: #f3c81a;
  font-size: 84px;
}

h1:before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: bottom;
  transform: rotateX(180deg);
  line-height: 1em;
  background: linear-gradient(0deg, #efc20e 0, rgba(255, 255, 255, 0) 80%);
  -webkit-background-clip: text;
  color: rgba(0, 0, 0, 0);
  opacity: 0.7;
}

На этом вся установка завершена, далее вы сами подстраиваете под свою стиль дизайна. Здесь отражение поставлено на opacity: 0.7, где уменьшаем, это значит ярче идет отражение, при увеличение становится прозрачнее.

Демонстрация

Второй вариант:

CSS transform: scale или как отразить элемент

CSS transform: scale или как отразить элемент

HTML

Код

<div class="prozrachna-tekstura">ZORNET.RU</div>

CSS

Код

.prozrachna-tekstura {
  font-size: 28px;
  line-height: 115px;
  position: relative;
  float: right;
  margin-right: 480px;
  text-transform: uppercase;
  color: #ec2828;
}
.prozrachna-tekstura::after {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: -26px;
  left: 0;
  display: block;
  content: 'ZORNET.RU';
  transform: scaleY(-1);
  opacity: .5;
}

Этот вариант от первого отличается, таем, что отражение нужно в CSS прописывать, а в первом все производим в самом коде. Что по настройкам, то они почти аналогичны, где также можете красиво оформить или поставить стильный шрифт.

Демонстрация

В самом CSS появляется возможность, как изменение цвета или больше и меньше выставить отражение. Это как понимаете все зависит веб мастера, где устанавливает под интернет ресурс, который может быть, как светлом в формате, так и в темном.

17 Августа 2019 Загрузок: 2 Просмотров: 6177 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0