Подписка
Email
Fb
RSS
Twitter
Email

Свойства CSS3, которые Вы должны знать

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

В данном посте я хочу привести набор тех CSS3 свойств, которые наиболее интересны и часто применяются. Это такие свойства, как Box shadow, Border radius, Text shadow и другие.

Однако, хочу заметить, что при использовании свойиств CSS3 нельзя забывать о кроссбраузерности, ведь к сожалению не все браузеры поддерживают «новые технологии». В основном проблемы бывают как обычно с IE. В конце данного поста я покажу, как можно добавить IE поддержку этих свойств.

О поддержке браузерами тех или иных CSS3 свойств можно почитать здесь.

Box shadow

Свойство Box shadow позволяет задать элементам веб-страницы эффект тени.

#box_sh {
	-webkit-box-shadow: 4px 4px 6px #292929;
	-moz-box-shadow: 4px 4px 6px #292929;
	box-shadow: 4px 4px 6px #292929;
}

Первое значение задает смещение по оси x, второе — по оси y, третье — радиус размытия тени.

Выглядеть это будет так:

Поясню, что три строки кода предназначены для трех видов браузеров (потому что каждый браузер читает по-разному css). -webkit-box-shadow для Chrome, -moz-box-shadow для Mozilla Firefox, box-shadow для всех остальных.

Border Radius

Свойство Border Radius позволяет создавать блоки со скругленными уголками.

#box_br {
	-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

Text Shadow

Свойство Text Shadow добавляет тексту тень, в результате получается очень красивый эффект.

#text_sh {
	text-shadow: 2px 2px 2px #999;
}

Первое значение — смещение по оси
x, второе — по оси y, третье — радиус размытия тени.
Пример применения свойства Text Shadow

Text Overflow

Свойство Text Overflow определяет, как отображать участки текста, которые не поместились в блок. Может иметь два значения: clip — лишние символы просто становятся невидимыми (обрезаются), ellipsis — в месте обрезки ставится многоточие.

#text_ow {
	overflow:hidden;
	-o-text-overflow: ellipsis;
	text-overflow:ellipsis;
}
Pellentesque habitant morbitristique senectus malesuadafames ac turpisegestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, temporsit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat

Linear-gradient

Свойство linear-gradient дает возможность задавать блокам градиентную заливку.

#text_ow {
   background: -moz-linear-gradient(top, #6e8134, #b0cf53);
   background: -webkit-gradient(linear, left top, left bottom, from(#6e8134), to(#b0cf53)) #6e8134;
   background: linear-gradient(#6e8134, #b0cf53);
}

Множественные background'ы

CSS3 позволяет использовать на странице несколько фонов.

#text_ow {
    background: url(images/bg1.jpg) 0 0 no-repeat,
    url(images/bg2.jpg) 100% 0 no-repeat;
}

Теперь об IE. Есть такая замечательная штука, под названием PIE ( progressive internet explorer ), которая позволяет браузеру IE 6−8 поддерживать такие свойства, как:

  • border-radius;
  • box-shadow;
  • border-image;
  • множественные background'ы;
  • градиенты;

Для этого скачиваем дистрибутив PIE, закидываем в папку со стилями файл PIE.htc, а в стилях для соотвествующих элементов дописываем свойство:

 behavior: url(PIE.htc)

Важно правильно указать путь к файлу PIE.htc!

Для задания градиента для IE еще нужно дописать свойство

-pie-background: linear-gradient(top, #576822, #48d896);
А для text-shadow используем
filter: Shadow(Color=#666666, Direction=45, Strength=4);
Вы можете оставить комментарий.

15 комментариев к записи “Свойства CSS3, которые Вы должны знать”

  1. Спасибо, отличный урок

  2. Действительно познавательно, спасибо.

  3. Cпасибо большое, вы на самом деле помогаете!

  4. Fati:

    Ден, не понятно где именно вписать файл behavior:url(PIE.htc) .В файле *.html ? или в файле *.scc ? и в каком именно месте?

    • Fati, эта строчка прописывается в свойствах элемента, например:

      .class1 {
      border: 1px solid #fff;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -khtml-border-radius: 5px;
      behavior: url(PIE.htc);
      }

  5. Ольга:

    Сделала, всё как Вы сказали, но с IE ничего не получилось. Как понять, что сделала не так и где искать ошибку,вопрос. ФайлPIE.htc лежит не в папке со стилями (у меня ее вообще нет),а в общей папке с html документом и  style.css , может из-за этого ошибка?

  6. Вадим:

    У меня тоже не отображается в IE ни тень текста ни градиент фона, и аналогичные примеры в Вашем посте тоже в IE не отображаются.

  7. Вадим:

    Со своими стилями я уже разобрался, просто забыл перед свойством

    поставить -pie- . Но у меня другой вопрос: Можно ли для разный браузеров

    прописать в страничке разные файлы стилей, чтобы подгружался файл стилей

    только того браузера, который открывает страницу? и особо меня

    интересует для мобильных устройств, и если можно, то как это сделать?

    Заранее, спасибо.

  8. <link rel="stylesheet" type="text/css" href="/css/style.css" /> <!--[if lte IE 6]><link href="/css/style_ie.css" rel="stylesheet" type="text/css" /<![endif]--> 


    Где IE 6 — браузер, поддерживаются:
    IE — Internet Explorer
    Gecko — Gecko браузеры (Firefox, Camino etc)
    Webkit — Webkit браузеры (Safari, Shiira etc)
    Opera — Opera
    IEMac — Internet Explorer для Mac
    Konq — Konqueror
    IEmob — IE мобайл
    PSP — Playstation Portable
    NetF — Net Front

  9. Rock_N:

    Про данные свойства CSS3 я знал,но вот про файл,который помогает задавать те же свойства и для IE,первый раз слышу!!Большое спасибо,это реально уменьшает объем работы в Фотошопе!

  10. Rock_N:

    После дня проведенного в экспериментах,хотелось бы спросить:а это все свойства CSS3,что можно так скажем,интегрировать в IE с 6−8,или данный файл(PIE.htc) помогает поддерживать и другие свойства?Если да,то как они прописываются:)

    • Rock_N, вот хорошая статья по теме — habrahabr.ru/post/153745/, там есть шпаргалка.

      • Rock_N:

        Большое спасибо,и еще офф-топ вопрос:Если пытаешься сам написать «движок» для сайта,то есть не используя CMS,то на сколько он изначально будет «дырявым»,и стоит ли вообще пытаться самому,писать сайт на PHP ?или всеже лучше делать сайт на CMS какой-либо?

Оставить комментарий

Spam Protection by WP-SpamFree

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