Используем CSS3 прямо сейчас!
Как считает автор оригинальной статьи, CSS3 очень упрощает работу верстальщика и помогает ему сэкономить кучу драгоценного времени, не тратя его на то, чтобы все наконец-то заработало в этом убогом IE. CSS3 — это будущее web-дизайна.В этой статье рассказывается о том, как сосредоточиться на дизайне, а не на том, чтобы сайт работал в IE.
Посмотрев на примеры, приведенные ниже, вы с легкостью убедитесь, что CSS3 делает кросс-браузерную совместимость гораздо более простой вещью, чем это может показаться на первый взгляд — тем более, если вы не считает, что в разных браузерах сайт должен выглядеть абсолютно идентично.
Эффект Box Shadows
Если вы хотите показать, что какой-то блок находится как бы уровнем выше, чем все остальные, то вы можете положить тень позади него. Таким образом вы придадите ему объем и привлечете взгляд посетителя.Использование изображения в качестве тени для блока — это выход, но не элегантный и не гибкий. А вот использование CSS3 для этих целей — это да, это по-нашему.
Пусть у нас будет вот такой HTML-код:
<div id="shift">
<h4>Shift In Thinking</h4>
<blockquote>
<p>It's okay if a design looks slightly different in one browser than it does in another. Once the designer and decision makers accept this, and <strong>embrace</strong> it, it's then that the concept of progressive enrichment can be fully leveraged.</p>
</blockquote>
<p class="author"><a href="http://handcraftedcss.com"><strong>Handcrafted CSS</strong> by Dan Cederholm</a></p>
</div>
Мы хотим, чтобы позади div'а у нас была тень. Делаем вот так:<h4>Shift In Thinking</h4>
<blockquote>
<p>It's okay if a design looks slightly different in one browser than it does in another. Once the designer and decision makers accept this, and <strong>embrace</strong> it, it's then that the concept of progressive enrichment can be fully leveraged.</p>
</blockquote>
<p class="author"><a href="http://handcraftedcss.com"><strong>Handcrafted CSS</strong> by Dan Cederholm</a></p>
</div>
div#shift {
box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
}
Скажите же, что легко, а?!box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
}
Но это еще не все. Чтобы у нас все было идеально, мы должны добавить еще несколько правил. Вот так:
div#shift {
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
}
Это свойство поддерживают только: Firefox 3.5, Safari и Google Chrome. Но... как же быть со всеми любимым IE?-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
}
А вот тут мы обратимся к очень интересной библиотечке Modernizr. Это такой маленький Js-файл, который проверяет браузер на родную поддержку web-технологий следующего поколения. Работает он так: если браузер поддерживает какую-либо фишку (пусть будет box-shadow), то добавится соответствующий класс («boxshadow») к тегу <html>; если же браузер эту фишку не поддерживает, то к тегу <html> добавится класс «no-boxshadow».
Modernizr позволяет нам создать резервный стиль для отсталых от жизни браузеров. Этот прием называется, если дословно, «изящная деградация».
Создаем еще один стиль:
div#shift {
border: 4px solid #bbb;
border-left: 0;
border-top: 0;
}
.boxshadow div#shift {
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
border: 0;
}
Сначала, мы приказываем браузеру создать справа и снизу блока светло-серую рамку. Это дает иллюзию падающей тени. Записываем это правило вначале, т. к. это — наихудший сценарий. Так что если браузер не поддерживает свойство box-shadow, то пользователь увидит лишь серенькую рамку вокруг блока. Если же браузер окажется современным, то Modernizr добавит класс «boxshadow» к тегу <html> и пользователь увидит симпатичную тень позади блока.border: 4px solid #bbb;
border-left: 0;
border-top: 0;
}
.boxshadow div#shift {
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
border: 0;
}
Теперь посмотрим на то, как это будет выглядеть.
Webkit
Закругленные уголки
Нет ничего проще, чем клепать закругленные уголки при помощи CSS3-свойства border-radius!Имеем вот такой HTML-код:
<div id="cool-kids">
<h4>CSS Is Cool Again!</h4>
<blockquote>
<p>CSS has never been more exciting than it is right now. I’m even prepared to say CSS is “cool” again, both for the more experienced front-end developers as for the new designers discovering CSS every day now.</p>
<p>But…</p>
<p>Remember when Javascript became popular? Remember when Flash became popular? Every time we’re been given new toys, some people aren’t ashamed to use it in a way you can barely call constructive. I’m thinking of Geocities websites, loaded with glowing blocks of text, moving images, bad color usage… In the wise words of Stan Lee: With great power there must also come great responsibility! A sprinkle of CSS animations is better than a bucket load. Apply with care.</p>
</blockquote>
<p class="author"><a href="http://24ways.org/2009/css-animations"><strong>CSS Animations</strong> by Tim Van Damme</a></p>
</div>
Теперь напишем CSS-код:<h4>CSS Is Cool Again!</h4>
<blockquote>
<p>CSS has never been more exciting than it is right now. I’m even prepared to say CSS is “cool” again, both for the more experienced front-end developers as for the new designers discovering CSS every day now.</p>
<p>But…</p>
<p>Remember when Javascript became popular? Remember when Flash became popular? Every time we’re been given new toys, some people aren’t ashamed to use it in a way you can barely call constructive. I’m thinking of Geocities websites, loaded with glowing blocks of text, moving images, bad color usage… In the wise words of Stan Lee: With great power there must also come great responsibility! A sprinkle of CSS animations is better than a bucket load. Apply with care.</p>
</blockquote>
<p class="author"><a href="http://24ways.org/2009/css-animations"><strong>CSS Animations</strong> by Tim Van Damme</a></p>
</div>
div#cool-kids {
background-color: #D9DBE6;
padding: 30px;
border-radius: 20px;
}
Чтобы все было «тик-так», добавляем еще парочку правил для конкретных браузеров:background-color: #D9DBE6;
padding: 30px;
border-radius: 20px;
}
div#cool-kids {
background-color: #D9DBE6;
padding: 30px;
-khtml-border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
Да, описывать специфические свойства для каждого из браузеров — это не очень хорошо, но все-таки лучше, чем использовать изображения для скругления уголков. А как же быть с IE?background-color: #D9DBE6;
padding: 30px;
-khtml-border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
К сожалению, так просто ничто не сможет скруглить острые уголки в IE... Но, об этом не стоит беспокоится. Если же вы действительно, хотите, чтобы уголки и в IE были круглыми, то используйте различные «костыли», которые были придуманы в огромных количетсвах.
RGBA
RGBA — это еще один способ задать цвет в вашем CSS. Буковка «A» указывает нам на канал прозрачности. Вы можете сделать свой цвет полупрозрачным, изменяя значение этого параметра. Как использовать это в вашем дизайне?И опять, пусть имеем вот такой HTML-код:
<div id="ignorance">
<h4>Ignorance is Bliss</h4>
<blockquote>
<p>That’s because in the real world, people using the Web don’t find a Web site that they like, then open up another browser to check that it looks they same. They simply buy what they came to buy, read what what they came to read, do what they came to do, then get on with their lives in blissful ignorance of what they might be seeing in another browser.</p>
</blockquote>
<p class="author"><a href="http://24ways.org/2009/ignorance-is-bliss"><strong>Ignorance is Bliss</strong> by Andy Clarke</a></p>
</div>
Мы хотим сделать цвет фона div'а полупрозрачным для того, чтобы пользователь видел, что же там находится на заднем фоне. Пишем такой CSS-код:<h4>Ignorance is Bliss</h4>
<blockquote>
<p>That’s because in the real world, people using the Web don’t find a Web site that they like, then open up another browser to check that it looks they same. They simply buy what they came to buy, read what what they came to read, do what they came to do, then get on with their lives in blissful ignorance of what they might be seeing in another browser.</p>
</blockquote>
<p class="author"><a href="http://24ways.org/2009/ignorance-is-bliss"><strong>Ignorance is Bliss</strong> by Andy Clarke</a></p>
</div>
div#ignorance {
background-color: rgba(76,157,11,0.55);
}
Но IE такое не поддерживает. Для него дописываем следующее:background-color: rgba(76,157,11,0.55);
}
div#ignorance {
background: #9BC772;
background: rgba(76,157,11,0.55);
}
Если браузер поддерживает RGBA, то свойство background принимает соответствующее значение; если нет — то оно принимает значение цвета фона в шестнадцатеричном виде.background: #9BC772;
background: rgba(76,157,11,0.55);
}
Немного расширим на CSS-код для пущей совместимости:
div#ignorance {
background-color: #9BC772;
}
.rgba div#ignorance {
background-color: rgba(76,157,11,0.55);
}
.no-rgba div#ignorance {
background: url(images/green-55.png);
}
Как этот код работает:background-color: #9BC772;
}
.rgba div#ignorance {
background-color: rgba(76,157,11,0.55);
}
.no-rgba div#ignorance {
background: url(images/green-55.png);
}
- Если JavaScript выключен, то блок принимает значение цвета фона в hex-виде;
- Если JS включен и тег <html> получает значение класса «rgba», то браузер использует RGBA для задания цвета фона у блока;
- Если JS включен, но браузер не понимает, что есть RGBA, то фоном div'а становится полупрозрачная png-картинка.
0 коммент.:
Отправить комментарий