Облачный сервис для Joomla сайтов
Навигация: Главная Обзоры Новые возможности CSS3

Новые возможности CSS3

Новые возможности CSS 3

CSS3 был представлен общественности в сентябре 2008 года, на веб-конференции в Сиднее, Австралия. Благодаря улучшенным таблицам стилей, на интернет-странице можно создавать то, о чем раньше сложно было и мечтать.

Границы и фон элемента.

Появилась возможность их стилизации, что поможет сделать страничку сайта ярче и привлекательнее для пользователя:

1. border-radius – стиль, позволяющий закруглить не только границы ,но и сам элемент.

2. border-image- дает возможность вместо стилизованного фона поставить картинку.

3. Свойство border-color стало поддерживать новое значение transparent – прозрачность границы. В результате стало возможно на чистом css создавать треугольники.

4. box-shadow- добавление тени элементу. Можно указать несколько теней для одного элемента, что способствует красочности дизайна без увеличения числа картинок и, как следствие, запросов к серверу.

Многоколоночное расположение элементов.

Группа свойств column (column-count, column-width, column-rule, column-gap) позволяет расположить контент внутри элемента колонками. Кроме того, становится возможным указать ширину колонок или их минимально возможную ширину, их количество, расстояние между ними.

Многоколоночный текст располагается внутри блочного контейнера. Все колонки получаются равными по ширине, контентом наполняется слева направо.

Селекторы.

В CSS 3появились новые селекторы, позволяющие более удобно выбирать необходимый нам элемент.

1. ul:3th-child – выбирает третий пункт списка

2. ul:3th-last-child – выбирает третий элемент списка с конца.

3. div:not(.news) – данный селектор отбирает все элементы div, у которых нет указанного класса (в данном случае – класса .news).

Улучшенная поддержка различных медиа-устройств.

Целью подобного нововведения является вид отображение экрана в зависимости от устройства, применяемого для работы с браузером. Вид медиа-устройства определяется в зависимости от ширины экрана. Например, запись

@media only screen and (max-width:620px){.news img {display:none;}}

означает, что на экранах разрешением менее 620 пикселей в ширину, картинки, находящиеся внутри элементов с классом news не будут показаны пользователю. Подобное разрешение встречается на современных андроидах и айфонах. На сайте http://proxyelite.ru/, который предлагает купить прокси по выгодной цене, как раз и реализована данная поддержка. Согласитесь, если пользователь смотрит сайт через маленький экран, то ему не особо нужны рисунки, гораздо важнее текстовая информация. А на компьютерах он увидит новость вместе со всеми картинками, и сможет лучше оценить привлекательность Вашего сайта.


загрузка...

 
Баннер

Уважаемые пользователи! Если у Вас возникли вопросы по данному материалу - оставьте свой комментарий и мы постараемся Вам помочь. Оставайтесь с нами!

Добавить комментарий

Защитный код
Обновить

Баннер

Следуй за нами

   

Авторизация



Поддержать этот ресурс Вы можете

через платежную систему Webmoney

  Z299422543783

  R230383531538

  U630721442765
или

Яндекс Кошелек 410011414281063

Статистика сайта

Сейчас на сайте:
  • 1 гость
  • 1 робот
Всего пользователей: 11735

Наша гордость

  • cvetercom
    186 (+19/-5)
  • Nikolia
    130 (+10/-1)
  • root
    120 (+18/-1)
  • apricot
    113 (+20/-4)
  • Fidelity
    101 (+10/-1)
  • Xemreht
    63 (+3/-0)
  • bod
    47 (+5/-1)
Баннер

Изучаем CMS Joomla!

-ingateДля всех, кто хочет улучшить видимость сайта в поисковых системах, повысить количество целевых посетителей и увеличить доход от ресурса, эксперты компании...
l11-r-ingateКаждый специалист по маркетингу знает, что большая посещаемость важна для коммерческого сайта, но еще важнее, чтобы пришедшие пользователи...
4-Посещаемость сайта все выше, денег покупатели тратят все больше, бизнес растет как на дрожжах. Согласитесь, это мечта любого владельца сайта и...
lseo-r-Мощный, заряженный мотивацией текст «продаст» товар даже тому, кто не заинтересован в покупке. Однако, если этот текст «некачественный» с точки зрения...
-l-seor-Скоро лето ─ сезон отпусков, пикников и отдыха. Возьмите с собой в дорогу или на дачу книгу «Как попасть в ТОП: практика эффективного SEO». В новом...
-seo-Как увеличить продажи с сайта и продвинуть его в ТОП поисковых систем при помощи качественного контента − узнайте об этом из книги «Наглядное пособие по...
10-joomla-3Полный перевод новой книги Хагена Графа «Joomla! 3 — In 10 Easy Steps» (10 легких шагов к освоению Joomla! 3). Данная книга рассказывает о том, как...