Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

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

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Хорошие новости о css3

.

Не пугайтесь, большинство новейших функций современные браузеры поддерживают отлично (мы будем говорить только о таких функциях). А появление Internet Explorer 9 значительно расширило наши возможности (хотя он всегда останется Internet Explorer, который портит нам всю малину, не давая применять самые крутые стили CSS).

Так что знайте: многие браузеры прекрасно справляются с CSS3 (в крайнем случае всегда можно найти обходной путь). Начнем же экспериментировать над нашим проектным сайтом!

Прощайте, острые углы!

Когда мы заключаем отдельные части сайта (как правило, это элементы di v) в рамки, они обычно кажутся слишком резкими. В результате на сайте так много острых углов, что кто-то обязательно скажет: «Я просто боюсь поранить глаза!» Здесь есть работа для свойства border-radi us. Я показывал его синтаксис чуть раньше, говоря о вендорных префиксах. Применим стиль к элементу aside:

Этот элемент содержит цитату на странице «О нас» (about. html):

Если вы добавите такое правило стилей в файл styl el. ess, сохраните его и затем проверите результат в браузере (каком-нибудь современнее Internet Explorer 8!), то увидите эффект как на рис. 9.9.

Рис. 9.9. Цитата с красивой скругленной рамкой

Всего несколько строк, но это уже признак класса! Однако не стоит злоупотреблять этой функцией — не бросайтесь сейчас же скруглять все подряд углы.

Чтобы сделать закругление более заметным, просто увеличьте радиус. Здесь вы установили значение 5рх, но что, если попробовать 20рх, как показано на рис. 9.10?

Рис. 9.10. Более заметный закругляющий эффект

Можно даже применить разные величины радиусов к каждому углу рамки. Например, если вы хотите, чтобы были закруглены только правый верхний и левый нижний углы, а другие остались прямыми, нужно написать следующее:

В результате этих простых действий получается очень красивый эффект (рис. 9.11).

Рис. 9.11. Смешивание стилей для углов в одной рамке

Помня о вендорных префиксах, вы могли задаться вопросом, почему их нет в предыдущих примерах. Все очень просто: современные браузеры поддерживают свойство border- radi us без префиксов. А три строки, приведенные выше, пригодятся, если вы предполагаете (или знаете), что некоторые посетители сайта пользуются старыми браузерами. На этот случай можно добавить префиксы.

Я предпочитаю всегда добавлять их на всякий случай. Это обеспечивает гарантированную браузерную поддержку.

Что касается значений радиуса, то экспериментируйте сколько угодно — попробуйте разные значения и посмотрите, какой эффект они окажут. Это работает даже с изображениями! Если мы изменим элемент, к которому применяется CSS, с aside на img, то главная страница будет выглядеть, как показано на рис. 9.12.

Рис. 9.12. Свойство border-radius, примененное к изображению

.

Читайте так же:
Not found