Заработок в интернете и раскрутка вашего сайта Суббота, 17.11.2018, 13:01

Меню сайта
Категории раздела
Для Веб мастера [17]
Все для Веб мастера
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Яндекс.Метрика Яндекс цитирования
Главная » Статьи » Для Веб мастера » Для Веб мастера

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

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



Нравится
Категория: Для Веб мастера | Добавил: admin (27.12.2013)
Просмотров: 130 | Рейтинг: 0.0/0


Нравится







Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск
Наш баннер
Мы будем признательны,
если Вы разместите нашу кнопку
у себя на сайте!

Заработок в интернете и раскрутка вашего сайта


Языки
Заработок в интернете и продвижение вашего сайта © 2013-2018
Копирование материалов сайта без согласия запрещено!

Яндекс.Метрика

СЕГОДНЯ НАС ПОСЕТИЛИ:

200