Отражающийся текст для сайта uCoz

Сегодня я поделюсь с вами очередным интересным решением. Этот HTML код вместе с CSS стилем придаёт вид с отражением для любого текста. Пригодиться может каждому на сайте uCoz любой тематике, но так же это можно применить на сайте и с другим CMS

Установка очень простая и любой даже новичок веб-мастер сможет с этим справиться. Для начала зайдите на свой uCoz сайт и войдите в админ панель управления, следуйте в верхнем в меню в Шаблоны дизайна (CSS) и туда копируйте код Css. Второй же код вставляется в сам html код страницы в то место, где вы хотите видеть сам текст с отображением. Не забудьте изменить текст в коде, на тот, который Вам необходим. Вместо спасибо наш портал будет рад вашим лайкам в социальных сетях на этот материал. Заранее спасибо. Если у кого-то проблемы с установкой - пишите в комментариях и кто-то из пользователей или администраторов проекта вам поможет.

Установка:

Пример html кода:

<divtitle="http://scripts-for-ucoz.ru/"class="h1-css">http://scripts-for-ucoz.ru/</div>

Сразу скажу, что отражение берётся из атрибута title элемента и потому его значение должно совпадать с основным текстом

Далее в самый низ вашего css вставляйте:

.h1-css { color:#000066; font-size:24px; margin-bottom:30px; position: relative;/* элемент к которому применяем эффект должен быть блочным и position: relative */ } .h1-css:after {/* получаем копию оригинального текста в перевернутом виде */ content: attr(title);/* оказывается в CSS и так можно - извлечь значение атрибута */ position: absolute;/* отражение позиционируется относительно родителя */ left:0; top:100%;/* можно управлять удаленностью отражения. 100% - отражение вплотную */ width:100%; height:100%; -moz-transform: scaleY(-1);/* много правил для CSS переворота */ -o-transform: scaleY(-1); -webkit-transform: scaleY(-1); -ms-transform: scaleY(-1); transform: scaleY(-1); z-index:1;/* чтобы отражение можно было перекрыть */ } .h1-css: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;/ чтобы перекрыть перевернутый текст */ }