Понедельник, 06.05.2024, 01:39
Главная Регистрация Log in
Приветствую Вас, Гость · RSS
Меню сайта


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

Скрипты разные [20]
шаблоны [11]
Скрипты Вид новостей [3]
Скрипты для форума [3]
Скрипты информеры [8]
Скрипты блоки и шапки [6]

Мини-чат


Наш опрос

Оцените мой сайт
1. Отлично
2. Ужасно
3. Хорошо
4. Неплохо
5. Плохо
Всего ответов: 4

Статистика


Всего: 384
Новых за месяц: 0
Новых за неделю: 0
Новых вчера: 0
Новых сегодня: 0

Пользователей 382
Проверенных: 0
Модераторов: 1
Админов: 1

Парней: 363
Девушек: 21
Онлайн всего: 1
Гостей: 1
Пользователей: 0





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

Лента для формления сайта с использованием только CSS
www.muzbullet.net.ru

Оформление лентами различных сайтов является популярным трендом при оформлении веб сайтов. Такой элемент дизайна можно использовать для меню, фона, заголовков и других частей. Для простых лент вполне можно использовать CSS, чтобы уменьшить количество загружаемых в бразуер пользователя изображений.
Для построения такой ленты используется трюк формирования треугольников - на концах ленты и тени на сгибах.

Полный код со стилями CSS и необходимой разметкой HTML:

Code
<!DOCTYPE html>
<html>
  <head>
  <title>Ленточка на CSS | Материалы сайта RUSELLER.COM</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <style type="text/css">
  #main {
  border: 1px solid #fff;
  padding: 100px;
  }
  #menu {
  background: #c66969;
  width: 500px;
  height: 50px;
  color: #fff;
  font-size: 18px;
  text-align: center;
  position: relative;
  top: -20px;
  }
  #menu span {
  position: relative;
  top: 13px;
  }
  .cont {
  background: #b14444;
  width: 100px;
  height: 50px;
  }
  .edge-right {
  border-color: #b14444 white #b14444 #b14444;
  border-style:solid;
  border-width:25px;
  width:0;
  height:0;
  position: relative;
  }
  .edge-left {
  border-color: #b14444 #b14444 #b14444 white;
  border-style:solid;
  border-width:25px;
  width:0;
  height:0;
  position: relative;
  }
  .left {
  float: left;
  }
  .right {
  float: right;
  }
  .clear {
  clear: both;
  }
  .edge-right-small {
  position: absolute;
  top: 138px;
  left: 734px;
  border-color: #fff #fff #b14444 #873434;
  border-style:solid;
  border-width:0 0 21px 25px ;
  width:0;
  height:0;
  }
  .edge-left-small {
  position: absolute;
  top: 138px;
  left: 258px;
  border-color: #b14444 #873434 #b14444 red;
  border-style:solid;
  border-width:0 25px 21px 0;
  width:0;
  height:0;
  }
  </style>
  </head>
  <body>
  <div id="main">
  <div class="edge-left left"></div>
  <div class="cont left"></div>
  <div id="menu" class="left"><span>Материалы сайта RUSELLER.COM<span></div>
  <div class="cont left"></div>
  <div class="edge-right left"></div>
  <div class="clear"></div>
  </div>

  <div class="edge-right-small"></div>
  <div class="edge-left-small"></div>
  </body>
</html>

Жаловаться на материал
Гипер-ссылка на источник
HTML
BB-Code
Ссылка
Категория: Скрипты разные | Добавил: sirius | Теги: Скрипты разные, css, использованием, Только, формления, сайта, для, лента
Просмотров: 1289 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Copyright MyCorp © 2024
Форма входа



Гость, мы рады вас видеть. Пожалуйста зарегистрируйтесь или авторизуйтесь!



Друзья сайта



.::Тестовый сайт::.
Каталог сайтов и ссылок. Каталог ресурсов на Promotion.SU
RusList.net - белый каталог сайтов
TopSite.com.ru - Каталог сайтов
Каталог поисковых серверов.
Каталог ресурсов Рунета
Каталог ссылок

Плацдарм.Ру - настоящий каталог

Новое на форуме


Новые файлы

[sirius][30.03.2012]
Онлайн магазин ocStore v1.5.1.3 Rus
*коментариев(0)

[sirius][02.03.2012]
Лента для формления сайта с использованием только CSS
*коментариев(0)

[sirius][12.04.2011]
Шаблон для ucoz
*коментариев(0)

[sirius][08.04.2011]
ChromeGT шаблон для uCoz
*коментариев(0)

[sirius][08.04.2011]
Ajax окна(синий) для ucoz
*коментариев(0)