11 Классических приёмов CSS с помощью CSS3
CSS3 не сильно отличается от обычного CSS, с точки зрения синтаксиса; Однако, возможностей у CSS3 намного больше. Как вы увидите в этих одиннадцати примерах, можно иметь несколько фонов, динамично изменять их размер, границы радиусов, текстовые тени, и многое другое!
Вот то, что говорит официальный (или, по крайней мере тот, что считается) сайт по CSS3, css3.info:
CSS3 является новым ребёнком в семье стилей. Он предлагает новые захватывающие возможности для создания ваших проектов, позволяет использовать более разнообразные стили для различных случаев и многое другое.
Эти эффекты будут работать только в современных браузерах, которые реализуют эти функции CSS3.
1. Закруглённые углы (Rounded Corners)
Наверное самый известный в этом списке эффект, ведь скругленные углы обеспечивают разработчику очень много вариантов. Вы, например, за минуту можете создать кнопку, установить градиент фона, повторить его по оси Х, а затем применить закругленные углы, чтобы получить очень симпатичную кнопку веб-2.0.
Вы можете моделировать закругленные углы с помощью четырех дополнительных “div” или с помощью JavaScript. Хотя, пользователь не увидит эти скруглённые углы, если у него отключен JavaScript.Это не страшно до тех пор, пока веб-сайт по-прежнему функционирует как следует. Вы можете прочитать об этом методе, если вы предпочитаете использовать обычный CSS в создании закругленных углов.
Классический метод:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corners.js"></script>
<script type="text/javascript">
$(function(){
$('.box').corners('10px');
});
</script>
<div class="box">
<!--CONTENT-->
</div>
Классический метод использует JQuery вместе с плагином JavaScript под названием Corners.
CSS3 метод:
<style type="text/css">
.box {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
</style>
<div class="box">
<!--CONTENT-->
</div>
Как вы видите, все, что вам нужно сделать, это указать три CSS3 свойства. Вы должны использовать на данный момент три потому, что разные браузеры используют различные имена свойств. В конце концов, это будет только один.
2. Тень блока (Box Shadow)
В классическом методе, обычно используется плагин JQuery, в то же время, с помощью CSS всё гораздо проще.
Классический метод:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.dropShadow.js"></script>
<script type="text/javascript">
$(function(){
$('.box').dropShadow({
left: 5,
top: 5,
opacity: 1.0,
color: 'black'
});
});
</script>
<div class="box">
<!--CONTENT-->
</div>
В ланном примере используется плагин Dropshadow. Простой и удобный, но ещё проще использовать только CSS;).
CSS3 метод:
<style type="text/css">
.box {
box-shadow: 5px 5px 2px black;
-moz-box-shadow: 5px 5px 2px black;
-webkit-box-shadow: 5px 5px 2px black;
}
</style>
<div class="box">
<!--CONTENT-->
</div>
Значения для свойств тени блока являются: X-смещение У-смещение размытие цвета. Намного проще, чем импортировать два файла JavaScript, и намного проще, чем возиться с фоновыми изображениями и отрицательным положением.
3. Тень текста (Text Shadow)Просмотр демо
Если вы когда-либо читали учебник о том, как сделать эффект Letterpress в Photoshop, вы знаете, как достигается эффект тени. Это действительно просто, чтобы создать letterpressed текст, просто следуйте инструкции в учебнике в Line25 Криса Спунер.
Классический метод:
<style type="text/css">
.font {
font-size: 20px;
color: #2178d9;
}
.fonts {
position: relative;
}
.fonts .font {
position: absolute;
z-index: 200;
}
.fonts .second {
top: 1px;
color: #000;
z-index: 100;
}
</style>
<div class="fonts">
<span class="font">The quick brown fox jumps over the lazy dog.</span>
<span class="font second">The quick brown fox jumps over the lazy dog.</span>
</div>
Вместо использования JQuery плагина, в этот раз применены некоторые простые CSS трюки, чтобы абсолютно позиционировать текст по отношению к другому тексту. Единственный недочёт при использовании без CSS3 является то, что вы получите две копии текста.
CSS3 метод:
<style type="text/css">
.font {
font-size: 20px;
color: #2178d9;
}
.font {
text-shadow: 0 1px 0 #000;
}
</style>
<span class="font">The quick brown fox jumps over the lazy dog.</span>
Если вы планируете использовать размытые текстовые тени, (третий “вариант), не понятно как вообще выполнить это с чистой CSS, и без каких-либо изображений.
4.Необычные шрифты
Мы мечтали об этом долгое время, но вы можете, наконец, показать “фантастические шрифты” на своём сайте не полагаясь на JavaScript. Конечно, это вызывает некоторые вопросы с предоставлением платных шрифтов, которые будут распространяться через интернет. Во всяком случае, представляем вам @font-face.
Классический метод:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/cufon.js"></script>
<script type="text/javascript" src="js/loyal.js"></script>
<script type="text/javascript">
$(function(){
Cufon.replace('.classic .font');
});
</script>
<style type="text/css">
.font {
font-size: 20px;
}
</style>
<span class="font">The quick brown fox jumps over the lazy dog.</span>
Здесь используется cufón, чтобы заменить текст.
CSS3 метод:
<style type="text/css">
@font-face {
font-family: 'Loyal';
src: url('loyal.ttf');
}
.font {
font-family: Loyal;
font-size: 20px;
}
</style>
<span class="font">The quick brown fox jumps over the lazy dog.</span>
Мы создаем шрифт с @font-face, а затем используем его в качестве значения для семейства шрифтов. Майкл Оуэнс написал статью, где объясняет принцип @font-face достаточно подробно.
5. Непрозрачность (Opacity)
Чаще всего, непрозрачность достигается с помощью прозрачных PNG, но вы можете достичь аналогичного эффекта при использовании свойства непрозрачности. Сейчас свойства прозрачности используется повсеместно, но наш любимый IE имеет свои собственные свойства.
Классический метод:
<style type="text/css">
.box {
opacity: .6; // all modern browsers (this is CSS3)
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE 8
filter: alpha(opacity=60); // IE 5-7
}
</style>
<div class="box">
<!--CONTENT-->
</div>
CSS3 метод:
<style type="text/css">
.box {
opacity: .6;
}
</style>
<div class="box">
<!--CONTENT-->
</div>
С CSS3, мы просто убрали два свойства, которые являются специфическими для IE, не правда ли удобно?!
6. RGBA
Все знают, что RGB отвечает за “красный, зеленый, синий”, но что означает буква А? Она отвечает за альфа-канал, который относится к прозрачности.
После закругленных углов, RGBA следующее, наиболее часто используемое свойство CSS3. Иногда, в меню можно просто добавить белый/черный фон, чтобы навигационные ссылки изменялись при наведении. Это гораздо проще, чем создавать новый образ для каждого цвета; Однако, с небольшой вставкой PHP это можно сделать намного проще.
Классический метод:
Так как это статья не о PHP, просто сохраните этот файл как rgba.php и когда вам нужно определенный RGBA цвет, задайте свойство фона “color” как URL (rgba.php?r=R&g=G&b=B&a=A).
<?php
$image = imagecreatetruecolor(1, 1);
$r = (int)$_GET['r'];
$g = (int)$_GET['g'];
$b = (int)$_GET['b'];
$a = (float)$_GET['a'];
$white = imagecolorallocate($image, 255, 255, 255);
$color = imagecolorallocatealpha($image, $r, $g, $b, 127*(1-$a));
imagefill($image, 0, 0, $white);
imagefilledrectangle($image, 0, 0, 1, 1, $color);
header('Content-type: image/png');
imagepng($image);
?>
Теперь просто применим это к DIV …
<style type="text/css">
.box {
background: url(rgba.php?r=239&g=182&b=29&a=.25);
}
</style>
<div class="box">
<!--CONTENT-->
</div>
С CSS3 всё гораздо проще.
CSS3 метод:
<style type="text/css">
.box {
background: rgba(239, 182, 29, .25);
}
</style>
<div class="box">
<!--CONTENT-->
</div>
7. Размер фона (Background Size)
Свойства размера фона, удобная вещь, чтобы иметь её в своём арсенале. Примером использования этого, может послужить фоновое изображение для контейнера, который предназначен для боковой панели. Классический способ потребует настройки, чтобы иметь повторение изображения вдоль оси У, но с CSS3 нужно добавить только еще одно свойство фона.
Классический метод:
<style type="text/css">
.box {
position: relative;
overflow: hidden;
}
.box img {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 50%;
z-index: 100;
}
.box .content {
position: absolute;
z-index: 200;
}
</style>
<div class="box">
<div class="content">
<!--CONTENT-->
</div>
<img src="http://nettuts.s3.amazonaws.com/423_screenr/200x200.jpg" alt="" />
</div>
CSS3 метод:
<style type="text/css">
.box {
background: #ccc url(http://nettuts.s3.amazonaws.com/423_screenr/200x200.jpg) no-repeat;
-webkit-background-size: 50%; /* Safari */
-o-background-size: 50%; /* Opera */
-khtml-background-size: 50%; /* Konqueror */
}
</style>
<div class="box">
<!--CONTENT-->
</div>
8. Множественный фон (Multiple Backgrounds)
Ах, несколько фонов. Теперь у разработчиков появился очень мощный инструмент.
Классический метод:
<style type="text/css">
.box {
width: 200px;
height: 150px;
background: url(images/bg.png) repeat-x;
}
.box2 {
width: 100%;
height: 100%;
background: url(images/text.png) center center no-repeat;
}
</style>
<div class="box">
<div class="box2">
<!--CONTENT-->
</div>
</div>
В классическом методе, довольно очевидно, нужно просто обернуть DIV в другой DIV и так далее, для каждого фонового слоя.
CSS3 метод:
<style type="text/css">
.box {
width: 200px;
height: 150px;
background: url(images/text.png) center center no-repeat, url(images/bg.png) repeat-x;
}
</style>
<div class="box">
<!--CONTENT-->
</div>
Синтаксис очень легко подобрать исходя из этого примера. Все, что вам нужно сделать, это добавить запятую между каждым из фонов!
9. Колонки (Columns)
Это самое интересное свойство CSS3. Это не то, что вы часто видите в веб-дизайне. Это больше похоже на разметку в газетах, это выглядит очень эффектно, если все сделано правильно. Обычно приходиться разделять контент на отдельные DIV и располагать их соответственно, но существует ещё плагин JQuery , который динамически создаёт столбцы.
Классический метод:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.columnize.js"></script>
<script type="text/javascript">
$(function(){
$('.columns').columnize({
columns: 2
});
});
</script>
<style type="text/css">
.column {
padding-right: 10px;
}
.column.last {
padding: 0;
}
</style>
<div class="columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
</div>
В примере добавлен небольшой отступ в столбцы, что бы текст не наезжал друг на друга.
CSS3 метод:
<style type="text/css">
.columns {
-moz-column-count: 2;
-webkit-column-count: 2;
}
</style>
<div class="columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
</div>
Есть несколько других свойств столбцов CSS3, которые также можно применять, но для демонстрации указано только количество столбцов. Если вы хотите узнать больше об этих и других свойствах, загляните на эту страницу CSS3.info.
10. Рамка с картинкой (Border Image)
Классический метод:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.borderImage.js"></script>
<script type="text/javascript">
$(function(){
$('.classic .box').borderImage('url(images/border.png) 27 27 27 27 round round');
});
</script>
<style type="text/css">
.box {
border-width: 20px;
}
</style>
<div class="box">
<!--CONTENT-->
</div>
CSS3 метод:
<style type="text/css">
.box {
border-width: 20px;
-webkit-border-image: url(images/border.png) 27 round;
-moz-border-image: url(images/border.png) 27 round;
border-image: url(images/border.png) 27 round;
}
</style>
<div class="box">
<!--CONTENT-->
</div>
11. Анимации (Animations)
Кто не любит, чтобы какой-нибудь элемент аккуратно сдвигался или исчезал, когда вы наводите курсор мыши на что-то? Анимации являются прекрасным способом украсить сайт, но убедитесь, что вы не переусердствовали! Единственный альтернативный способ анимации заключается в использовании JavaScript. В примере будет использован JQuery.
Классический метод:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.box').hover(function(){
$(this).stop().animate({
top: '20px'
}, 300);
}, function(){
$(this).stop().animate({
top: '0'
}, 300);
});
});
</script>
<style type="text/css">
.box {
position: relative;
}
</style>
<div class="box">
<!--CONTENT-->
</div>
CSS3 метод:
<style type="text/css">
.box {
position: relative;
-webkit-transition: top 300ms linear;
}
.box:hover {
top: 20px;
}
</style>
<div class="box">
<!--CONTENT-->
</div>
Оба этих фрагмента кода сделают то же самое: сдвинут DIV на 20 пикселей вниз в течение 300 мс. Помните, код CSS3 работает только в современных браузерах!
Вывод
Итак: 11 возможностей CSS, которые станут намного проще с помощью CSS3. Очевидно, что всё зависит от возможностей и развития современных браузерахов.
Некоторые вышеописанные способы совмещены в одном примере:
