Приветствую Вас Прохожий | RSS Пятница, 09.12.2016, 20:19
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


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



Статистика
Онлайн всего: 13
Гостей: 13
Пользователей: 0



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

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

CSS3 с красивым эффектом только на стилях 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/

    Для того что бы скачать архив необходимо зайти на сайт как пользователь.
    Просмотров: 1929 | Рейтинг: 4.4/8 | |Категория: Скрипты Разное | Добавил: мир | Дата: 23.09.2011 | Скачали: 0 | Теги: эффектом, красивым, CSS3, только, стилях
    Похожие новости на нашем сайте
    Коментарий к новости

    Всего комментариев: 0

    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]

    Форма входа
    Логин:
    Пароль:


    Поиск


    На форуме

    1 Файловик. Уникальные те...

    0

    2 Куплю сайты в индексе Я...

    1

    3 Куплю сайты с ТИЦ/PR (п...

    9

    4 Предлагаю услуги для ан...

    0

    5 Предлагаю услуги по про...

    0

    6 Комплексный прогон сайт...

    51

    7 Сайт онлайн фильмов на ...

    1

    8 Проблема с таблицей

    9

    9 Отредактировать фото

    2

    10 Уже все перепробовал )

    1


    Подробней о форуме


    Комментарии



    Copyright UcozOn.ru™ © 2008-2016


    Кнопка 88х31 сайта ucozon.ru