Мы предлагаем:У нас есть:
1 базу данных MySQL(50MB)PHP 5
Прикрепление своих доменовMySQL
Предустановленные движки сайтовPerl
Место под файлы(300MB)Ruby
Бесплатно и без рекламы!
Авторизация:
e-mail: Пароль:
Забыли пароль?    Запомнить  
Все блогиПрограммирование → Эффекты для сайта при помощи CSS
Rss

Как то я задался целью сделать шаблон для сайта приминив при этом минимум графики.
В принципе, ни чего сложного в этом нет, и применить некоторые эффекты на своем сайте может даже начинающий сайто-строитель.
Ну что, поехали!

И так, первое что мы попробуем сделать это скругленный уголки у блоков.
Находим в файле index (.html или .php) блок у которого хотим сделать скругленные уголки, смотрим его стиль (обычно <div class="имя"> или <div id="имя">). Дальше открываем файл стилей, обычно он находится в папке “css” и носит имя “style.css” или “temlate.css”, и ищем имя стиля указанное в блоке. Вставляем там ниже приведенный код (ВНИМАНИЕ! Код должен находится между скобками{” и “}”):

-moz-border-radius: 12px; /* FF1+ */
   -webkit-border-radius: 12px; /* Saf3+, Chrome */
   border-radius: 12px; /* Opera 10.5, IE 9 */

Как вы понимаете, значением “12рх” мы определяем радиус скругления. Если к тому же в стиле будет прописан бордюр, нпример так
bc. border: 1px solid #000; ,

то мы увидим черную рамочку вокруг блока. Для определения hex-кода цветов я использую такую классную фичу имеющиюся у Яндекс или можно воспользоваться онлайн инструментом для подбора цветов. На этом сайте, кстати, есть еще интересные инструменты, и если вас не напрягает английский язык советую потусить там подольше и положить его в закладки.
У этого метода скруглени есть свои нюансы:

  1. Для IE (не к столу упомянуто будет это чудо) ниже 9 версии решений нет, ну не очень хорошо понимают эти “браузеры” CSS3.
  2. Радиус можно задавать отдельно для каждого угла т.е.: 12px 0 5px 5px.
    Порядок не много не обычный – Вверхний левый – верхний правый – нижний правый – нижний левый угол

Если у вас получилось сделать скругленный уголки, то идем дальше. В противном случае повторяем попытку до тех пор, пока уголки не станут закругленными.

Вторй эффект – тени для блоков.
Там же в файле стилей добавляем код:

-moz-box-shadow: 0px 0px 4px #ffffff; /* FF3.5+ */
   -webkit-box-shadow: 0px 0px 4px #ffffff; /* Saf3.0+, Chrome */
   box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE 9.0 */
   filter: progid:DXImageTransform.Microsoft.dropShadow(color=#ededed,offX=5,offY=5, positive=true);  /* IE 5.5+ */ 

И, вуаля, у нашего блока появились тени. Тут даже “ослик” не в пролете, тени в нем есть, правда есть ограничения: нельзя задать размер и размытие.
Давйте немного разберем, что же я здесь нацарапал. Параметры тени “0px 0px 4px” это: <сдвиг по x> <сдвиг по y> <радиус размытия>. Можно для сдвига по х и у задавать отрицательный значения. Попробуйте по экспериментировать с ними, оччень интиресных эффектов можно добится.
Если еще перед циферками поставить параметр inset, то тень будет выводится во внутрь блока.
Для “ослика” фильтр dropshadow дает четкую резкую тень, поэтому для эффекта размытия можно использовать фильтр shadow.

filter: progid:DXImageTransform.Microsoft.shadow(direction=120, color=#000000, strength=10); 

Здесь: direction — угол направления тени от 0 до 360°; color — цвет тени; strength — смещение тени в пикселах.

Ну что, вошли во вкус? Хочется еще больше эффектов на свой сайт? Тогда продолжаем.

Вам хочется сделать фон какого-то блока или всей страницы градиентом? И тут особых проблем нет, только счастливые обладатели браузера Opera не увидят этой красоты.
Вставляем в стиль блока или body следующий код:

background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
   background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
   filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */

Ну тут все понятно: первым идёт код цвета начала градиента, вторым – цвет конца градиента.

Ну и наконец самое вкусное в оформлении блоков: прозрачность в цвете. С помощью него, особенно если использовать его совместно со скруглениями и тенью, можно сделать оформление в виде Windows 7. Тут правда, надо сказать, пользователи “ослика” в пролете.
Вставляем в стиль блока после

background-color: #ваш_цвет; 

строчку:

background-color: rgba(180, 180, 144, 0.6); /* FF3+, Saf3+, Opera 10.10+, Chrome */ 

Вот тут то и понадобится ссылочка на фичу от Яндекс указанная выше, потому что циферки “180, 180, 144” это ни что иное, как RGB код вашего цвета. Ну а последнее значение (здесь “0.6”) коэффициент от 0 до 1 степень прозрачности блока. Важное отличие этого метода от opacity – прозрачность коснется только этого блока, все вложенные элементы будут непрозрачные.

Уф, с блоками пока все, перейдем к тексту.
Все видили тени у заголовков на сайтах, а ведь сделать их на своём сайте вы то же сможете.
Заголовки, как правило, выводятся в тегах

<h1>Заголовок</h1> (h2, h3 и т.д.) 

В файле стилей ищем описание стиле этих тегов. Обычно это что-то типа такого:

h1 {
       font-size: 14px;
       font-weight: 
       bold;color: #FBE9C1;
       margin: 0px;
       text-transform: uppercase;
       padding-bottom: 8px;
       font-family: Arial, Helvetica, sans-serif;
        } 

Нужно в этот стиль добавить следующее:

text-shadow: 3px 3px 6px #000; /* Saf3+, FF3.1+, O9.5+,Chrome 2+*/
   filter:progid:DXImageTransform.Microsoft.Shadow(Color=#000000,direction=135,strength=3); /* IE5.5+ */

Можно задать для всех заголовков одновременно написав так:

h1, h2, h3, h4 {
    text-shadow: 3px 3px 6px #000; /* Saf3+, FF3.1+, O9.5+,Chrome 2+*/
   filter:progid:DXImageTransform.Microsoft.Shadow(Color=#000000,direction=135,strength=3); /* IE5.5+ */
   }

Здесь параметры для нормальных браузеров:

  1. смещение тени по горизонтали. (При положительном значении смещает тень вправо, при отрицательном – влево)
  2. смещение тени по вертикали. (При положительное значении смещает тень вниз, при отрицательном – вверх)
  3. размытие тени. Параметр не обязателен и поддерживается не всеми браузерами (напрмиер у Safari, свои стандарты)
  4. цвет тени. Параметр не обязателен, по-умолчанию используется цвет текста

Параметры для “ослика”:

  1. Первое значение (#000000) – цвет тени
  2. Второй параметр (direction=135) – угол наклона тени.
  3. Третий параметр (strength=3) – сила тени, очень похоже на смещение. Размытие отсутствует

Ну и для любителей поприкалываться над пользователями.
Поворот текста с помощью css3.
Сразу после тега <body> создаем контейнер на диве с классом rotation<div class="rotation">, не забыв закрыть его (</div>) в конце кода страницы перед </body>.
В файле стиле создаем класс:

.rotation {
    -webkit-transform: rotate(180deg); /* для safari и chrome браузеров */
    -moz-transform: rotate(180deg); /* для FF */
    -o-transform: rotate(180deg); /* для Opera */
    transform: rotate(180deg); /* для остальных браузеров поддерживающий поворот по-умолчанию */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* для ИЕ 6-8 */
    }

Значение поворота в градусах может быть любим: 179deg или -54deg. Положительное значение поворачивает текст по часовой стрелке и соответственно отрицательное против.

И как всегда “ослик” выделяется. Где rotation может быть только:

  1. поворот на 90 градусов
  2. поворот на 180 градусов
  3. поворот на 270 градусов
  4. поворот на 360 градусов

Правда для “ослика” есть свои приколы.
Можно применять свойство writing-mode. Возможные значения:

  • lr-tb – Значение по умолчанию. Слева направо
  • rl-tb – Справа налево
  • tb-rl – Сверху вниз. В правом верхнем углу
  • bt-rl – Сверху вниз. В правом нижнем углу
  • tb-lr – Это значение работает только в IE8+, нужно использовать с префиксом -ms-writing-mode. Сверху вниз, в левом верхнем угл
  • bt-lr – Сверху вниз. В левом нижнем углу
  • lr-bt – Снизу вверх. Текст слева направо
  • rl-bt – Снизу вверх. текст справа налево
    Это можно применить как для всего сайта, так и для отдельных блоков, прописав нужней свойства в файле стилей. Например:
p {
      writing-mode: tb-rl;
      }

Примечание.
Internet Explorer 6.0 поддерживает только значения lr-tb и tb-rl.
Internet Explorer 7.0 поддерживает значения lr-tb, rl-tb, tb-rl, bt-rl.

Ну вот пока и все. Пока ломайте сайт тем, что сейчас прочитали. Скоро новых фишек для вас подберу.

P.S. По просьбе трудящихся demo
А в demo2 пример применения прозрачности в цвете.


Автор: Андрей | Дата создания: 19 марта 2012, 21:25 UTC | +1.833
Теги: css3


Комментарии(7)
bartokng  20 марта 2012, 07:21 UTC  #
0.0
392

Ссылку можно было бы кинуть на пример всего, того, что ты в статье написал.
Типа демку возможностей.

Статья классная, много ньюансов собрано в одном месте. А то порой приходит все по крупицам собирать

Денис  20 марта 2012, 11:29 UTC  #
0.0
Index

Понравилось место:

/* для safari и chrome браузеров */
/* для FF */
/* для Opera */
/* для остальных браузеров поддерживающий поворот по умолчанию */

Кто такие остальные поддерживающие, если все кто мог – выше? :) Или я что-то пропустил?

Андрей  20 марта 2012, 11:50 UTC  #
0.0
Image

Другие это всякие: Maxthon, Sleipnir и т.п.

Павел  20 марта 2012, 22:08 UTC  #
0.0
2bfe965ab5ef94a0568bc61c36b46d4c

Дизайн на единицы килобайт без использования изображений… Круто, не ожидал таких фич от CSS. Впрочем, я не особо слежу за изменениями в стандартах.
Хм, получается, самым большим в несложном дизайне будет фон. Весьма впечатляюще.

Павел  21 марта 2012, 21:32 UTC  #
0.0
2bfe965ab5ef94a0568bc61c36b46d4c

Вот, кстати, ещё занятная штука, знакомая подкинула: http://lea.verou.me/css3patterns/

Арсений  14 апреля 2012, 16:01 UTC  #
0.0
0cfd0jeujkq

Кто может помочь написать выпадающее меню ,только при помощи ccs стиля.?

Денис  15 апреля 2012, 05:55 UTC  #
0.0
Index

Можем направить на путь истинный сюда и сюда


Простите, Ваш браузер не поддерживает html5
Управление стрелками. Пробел - пауза.