Приветствую Вас Прохожий | RSS

Вторник, 21.05.2024, 00:33

Меню сайта

Гостевая сайта

РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА

Категории раздела

Скрипты блоки и шапки [337]

Скрипты Вид новостей [366]

Скрипты php для ucoz [47]

Скрипты для форума [186]

Скрипты информеры [118]

Скрипты Разное [1105]

Мини-чат

Все вопросы задаем в форуме,
здесь они игнорируются!

Блок спам рекламы

Сайт села Екатерининско* .

Фильмы, сериалы торрент .

НОВИНКИ 2019 В FULLHD 4* .

Лучшее Хип-Хоп радио St* .

ФИЛЬМЫ ОНЛАЙН В HD! .

Облачный майнинг HF18BD* .

Сайт за 6000 wmr .

http://ucozon.ru/forum/* .

Lineagw 2: Revolution .

Фильмы на планшет торре* .

Добавлять могут только пользователи зарегистрированные 15 суток.

Статистика

Онлайн всего: 1

Гостей: 1

Пользователей: 0

Кто нас сегодня посетил
Статистика посетителей
Подписка на новости
День рождения

Главная » Файлы » Скрипты для uCoz » Скрипты Разное

CSS3 с красивым эффектом только на стилях

Интересная штука стиля CSS3 с которой можно в дальнейшем создавать полностью сайт без использования картинок и веб графики, все чисто на css3.
Получается технология будущего, и ее стоит уже понимать и учить если мы собираемся в дальнейшем новшества использовать на своих сайтах.
Предлагаю вашему вниманию три вариации вывода окошек.
CSS3 с красивым эффектом только на стилях

Примеры и установка :

Первый вариант использования стилизации без графики

В таблицу стилей вставляем сам стиль вариаций вывода оформления без использования картинки фона:

Code

.lifted p {
  font-size:18px;
  font-weight:bold;
}

.lifted {
  position:relative;
  width:350px;
  padding:1em;
  margin:2em 10px 4em;
  background:#F0F0F0;
  color: #777;
  border-radius:4px;
  -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  -moz-border-radius:4px;

}

.lifted:before,
.lifted:after {
  content:"";
  position:absolute;
  z-index:-2;
  bottom:15px;
  left:10px;
  width:50%;
  height:20%;
  max-width:300px;
  -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  -webkit-transform:rotate(-3deg);
  -moz-transform:rotate(-3deg);
  -ms-transform:rotate(-3deg);
  -o-transform:rotate(-3deg);
  transform:rotate(-3deg);
}

.lifted:after {
  right:10px;
  left:auto;
  -webkit-transform:rotate(3deg);
  -moz-transform:rotate(3deg);
  -ms-transform:rotate(3deg);
  -o-transform:rotate(3deg);
  transform:rotate(3deg);
}

Ниже показан пример как вставлят текст для вывода 1 варианта как показано на скрине.

Code

<div class="lifted">
Ваше cодержимое окна для www.ucozon.ru
</div>

Второй вариант использования стилизации без графики

В таблицу стилей CSS вставляем сам стиль вариаций:

Code

.curled {
  position:relative;
  width:350px;
  padding:1em;
  margin:2em 10px 4em;
  background:#F0F0F0;
  color: #777;
  -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  border:1px solid #efefef;
  -moz-border-radius:0 0 120px 120px / 0 0 6px 6px;
  border-radius:0 0 120px 120px / 0 0 6px 6px;
}

.curled:before,
.curled:after {
  content:"";
  position:absolute;
  z-index:-2;
  bottom:12px;
  left:10px;
  width:50%;
  height:55%;
  max-width:300px;
  -webkit-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
  -moz-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
  box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
  -webkit-transform:skew(-8deg) rotate(-3deg);
  -moz-transform:skew(-8deg) rotate(-3deg);
  -ms-transform:skew(-8deg) rotate(-3deg);
  -o-transform:skew(-8deg) rotate(-3deg);
  transform:skew(-8deg) rotate(-3deg);
}

.curled:after {
  right:10px;
  left:auto;
  -webkit-transform:skew(8deg) rotate(3deg);
  -moz-transform:skew(8deg) rotate(3deg);
  -ms-transform:skew(8deg) rotate(3deg);
  -o-transform:skew(8deg) rotate(3deg);
  transform:skew(8deg) rotate(3deg);
  }
.curled p {
  font-size:18px;
  font-weight:bold;
}

Для такого варианта отдельное имя стилизации :

Code

<div class="curled">
Ваше cодержимое окна для www.ucozon.ru
</div>

3 вариант использования стилизации без графики

Копируем код и вставляем для 3 варианта отображения тени

Code

.perspective {
  position:relative;
  width:350;
  padding:1em;
  margin:2em 10px 4em;
  background:#F0F0F0;
  color: #777;
  -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.perspective:before,
.perspective:after {
  content:"";
  position:absolute;
  z-index:-2;
}

.perspective:before {
  left:80px;
  bottom:5px;
  width:50%;
  height:35%;
  max-width:300px;
  -webkit-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
  -moz-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
  box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
  -webkit-transform:skew(50deg);
  -moz-transform:skew(50deg);
  -ms-transform:skew(50deg);
  -o-transform:skew(50deg);
  transform:skew(50deg);
  -webkit-transform-origin:0 100%;
  -moz-transform-origin:0 100%;
  -ms-transform-origin:0 100%;
  -o-transform-origin:0 100%;
  transform-origin:0 100%;
}

.perspective:after {
  display:none;
}

.perspective p {
  font-size:18px;
  font-weight:bold;
}

Что бы отображалось как на скрине мы должны заключить предложение или материал в такой вот стиль при помощи массива div:

Code

<div class="perspective">
Ваше cодержимое окна для www.ucozon.ru
</div>

Автор\Источник: http://ucozon.ru/
Для того что бы скачать архив необходимо зайти на сайт как пользователь.