Отражение любого текста на CSS3

Разместил: Apocalypse
2 июля 2016

Данное решение позволит вам создать отражение для любого текста лишь используя возможности CSS3 Для начала посмотрите ДЕМО Моё тестирование в редакторе: КЛИК Установка: 1#: В самый низ вашего CSS вставьте:

.ref {
color: #000066;
font-size: 24px;
margin-bottom: 30px;
position: relative;
display: inline-block;
}

.ref:after {
content: attr(data);
position: absolute;
left: 0;
top: 100%;
width: 100%;
height: 100%;
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-ms-transform: scaleY(-1);
transform: scaleY(-1);
z-index: 1;
}

.ref:before {
content: "";
display: block;
width: 100%;
height: 80%;
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 1));
background: -o-linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 1));
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 1)));
position: absolute;
left: 0;
top: 110%;
z-index: 2;
}

.ref {

color: #000066;

font-size: 24px;

margin-bottom: 30px;

position: relative;

display: inline-block;

}

.ref:after {

content: attr(data);

position: absolute;

left: 0;

top: 100%;

width: 100%;

height: 100%;

-moz-transform: scaleY(-1);

-o-transform: scaleY(-1);

-webkit-transform: scaleY(-1);

-ms-transform: scaleY(-1);

transform: scaleY(-1);

z-index: 1;

}

.ref:before {

content: "";

display: block;

width: 100%;

height: 80%;

background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 1));

background: -o-linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 1));

background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 1)));

position: absolute;

left: 0;

top: 110%;

z-index: 2;

}

2#: HTML код примера:

<div data="IMAPO.RU - Только уникальные скрипты" class="ref">IMAPO.RU - Только уникальные скрипты</div>

1	<div data="IMAPO.RU - Только уникальные скрипты" class="ref">IMAPO.RU - Только уникальные скрипты</div>

За основу материала взята ЭТА статья

Автор публикации

не в сети 3 дня

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Комментарии: 393Публикации: 1096Регистрация: 27-08-2018

Метки: CSS3 Reflection Text Отражение Текст

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Вам может также понравиться...

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

Старые

Новые

Межтекстовые Отзывы

Посмотреть все комментарии

Всевидящее око

Новый комментарий от пользователя how long can you take elavil: «how long can you take elavil

how long can you take elavil» в материале След за курсором из частиц на HTML5 Canvas

2025-01-05 15:00:13

stalker1313

Привет. Может кто-нибудь знает почему не получается зайти на сайт playstation через vpn и как это исправить? Без vpn захожу на сайт, но не могу зарегать акк.
Ошибка:
Страница недоступна
Сайт playstation.com не отправил данных.
ERR_EMPTY_RESPONSE

2025-01-08 18:00:15

Al-Sher

@stalker1313, Привет. Возможно впн блочит их сайт. Попробовал со своим личным впном - сайт открывается

2025-01-08 19:56:24

stalker1313

@Al-Sher, бесплатный, хороший vpn посоветуете?

2025-01-08 22:01:35

stalker1313

Можно как-то сохранить все статьи с сайта wp в отдельные вордовские документы?

2025-01-09 19:50:03

Al-Sher

@stalker1313, Увы, я уже давно пользуюсь только личным впн на своей впске)

2025-01-10 20:41:42

Всевидящее око

Новый комментарий от пользователя EugeneRig: «Предлагаем рассылки по любым каналам:

У нас имеются базы данных:
- Москва и Санкт-Петербург
- Любые регионы России
- Компании различных видов деятельности
- Любые страны мира
- Сформируем аудиторию по нужным критериям

Стоимость рассылки 1 млн. сообщений на e-mail адреса составляет всего 3 900 руб.

А также рассылки по WhatsApp, Телеграм, VK.

Обращайтесь по любым вопросам: 7(92 5) 3 4 5-20=0 3 (Ватсап)» в материале contacts

2025-01-24 20:51:14

Всевидящее око

Новый комментарий от пользователя AntonioDaf: «Здравствуйте!

Пишу предложить сотрудничество по размещению Ваших товаров на нашем складе.

Оказываем услуги ответственного хранения товаров на складе А.

Наш склад расположен в непосредственной близости от МКАД в Северо-Восточном районе города Москвы.

Температура хранения возможна от +15 до +25 градусов.

На европаллетах с габаритами Д 120см х Ш 80 см х В до 170 см и весом до 600 кг.

Американских паллетах с габаритами Д 120см х Ш 120 см х В до 170 см и весом до 900 кг.

С уважением, Егор.

Мой Email: [email protected]» в материале contacts

2025-01-26 10:04:08

Всевидящее око

Новый комментарий от пользователя ThurmanJonia: «Здравствуйте

Сообщите пожалуйста - пользуетесь ли Вы в своей работе crm системой?

Я профессионально занимаюсь настройкой и внедрением crm систем.

CRM Вы сможете упорядочить свои данные по клиентам и более организованно отслеживать заказы, продажи и всю работу в целом.

Мои услуги стоят недорого.

Если принципиальный интерес у Вас есть - сообщите пожалуйста примерное количество сотрудников для которых нужно настроить crm и сферу бизнеса, ответом я сообщу стоимость и предложу различные варианты.

С уважением, Даниил Потапов (специалист по настройке crm).

Просьба ответить мне на почту: [email protected]» в материале contacts

2025-01-26 18:04:44

Всевидящее око

Новый комментарий от пользователя JaredVubre: «Здравствуйте!

Если у Вас есть открытые вакансии в данный момент - предлагаем подключиться к системе по побору персонала - для просмотра нужных резюме.

Наша система:
- Анализирует резюме и выбирает кандидатов;
- Можете общаться с кандидатами через WhatsApp или Telegram;
- Отображает нужных кандидатов.

Если интерес есть - могу выслать демо доступ.

С уважением, Станислав.

Мой email: [email protected]» в материале contacts

2025-01-28 02:58:25

......

Для публикации сообщений в чате необходимо авторизоваться