Отражающийся текст для сайта 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;/ чтобы перекрыть перевернутый текст */ }
|
Нравится
|