3161 читатель, 147 постов
Администрация
Модераторы
Блог о CSS, его применении, новости по теме.
Каскадные Таблицы Стилей whois
- индекс
- 230,41
11 примеров использования CSS3
Здесь показаны 11 примеров того, как можно использовать CSS3. Они представлены в виде сравнения. В первом случае используется CSS2 (или Javascript), а во втором — CSS3.
Всё, что нужно сделать — это описать 3 свойства!
Здесь мы просто указали какой файл со шрифтом использовать.
Все знают о системе цветопередачи RGB (red, green, blue), но для чего здесь «A»? Это «alpha» — информация о прозрачности.
Иногда хочется осветлить\затемнить фон для навигационных ссылок, когда пользователь наводит на них указатель. Это намного легче, чем создавать новую картинку для каждого цвета; если ещё и PHP добавить, то становится проще некуда.
Вообще, эта статья не о PHP, поэтому я не собираюсь рассказывать здесь о нём. Просто сохраните этот файл как rgba.php, а потом, когда вам понадобится определённый RGBA-цвет, задайте свойству background значение url(rgba.php?r=R&g=G&b=B&a=A).
Теперь просто применяем к div’у…
1. Закругление углов
Классический путь
<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>CSS3
<style type="text/css">
.box {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
</style>
<div class="box">
<!--CONTENT-->
</div>Всё, что нужно сделать — это описать 3 свойства!
2. Тень от блока
Классический путь
<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>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>3. Тень от текста
Классический путь
<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">НЛО прилетело и опубликовало эту надпись здесь.</span>
<span class="font second">НЛО прилетело и опубликовало эту надпись здесь.</span>
</div>CSS3
<style type="text/css">
.font {
font-size: 20px;
color: #2178d9;
}
.font {
text-shadow: 0 1px 0 #000;
}
</style>
<span class="font">НЛО прилетело и опубликовало эту надпись здесь.</span>4. Необычный шрифт
Классический путь
<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">НЛО прилетело и опубликовало эту надпись здесь.</span>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">НЛО прилетело и опубликовало эту надпись здесь.</span>Здесь мы просто указали какой файл со шрифтом использовать.
5. Прозрачность
Классический путь
<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>6. RGBA
Все знают о системе цветопередачи RGB (red, green, blue), но для чего здесь «A»? Это «alpha» — информация о прозрачности.
Иногда хочется осветлить\затемнить фон для навигационных ссылок, когда пользователь наводит на них указатель. Это намного легче, чем создавать новую картинку для каждого цвета; если ещё и PHP добавить, то становится проще некуда.
Классический путь
Вообще, эта статья не о PHP, поэтому я не собираюсь рассказывать здесь о нём. Просто сохраните этот файл как rgba.php, а потом, когда вам понадобится определённый RGBA-цвет, задайте свойству background значение 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
<style type="text/css">
.box {
background: rgba(239, 182, 29, .25);
}
</style>
<div class="box">
<!--CONTENT-->
</div>
7. Размер фона
Классический путь
<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. Несколько фонов
Возможность установить несколько фоновых изображений в руках верстальщиков - очень мощное оружие. Я знаю много случаев, в которых приходится создавать множество div'ов только для того, чтобы иметь возможность установить несколько изображений фоном.
Классический путь
<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>
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. Столбцы
Классический путь
<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>
10. Текстура в виде границы
Классический путь
<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. Анимация
Кто не любит смотреть на красивые эффекты? Анимация увеличивает отдачу от пользовательского интерфейса, но тут главное не переборщить.
Классический путь
<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 миллисекунд.
Примеры работы - http://nettuts.s3.amazonaws.com/430_cssTips/demo/index.html
Жаль, что CSS3 ещё не работает во всех браузерах.
От переводчика: Перевёл частично. Все ненужные предложения убрал и за это прошу не ругать. Спасибо.
комментарии (103)
Для «воедино» не достаёт лишь указания того, как каждый из примеров поддерживается разными браузерами.
Всё в одном, и без каши. Класс!
Статья будет полезна и интересна очень многим людям.
Хорошо, если так. Но по-моему, обо всем этом средний читатель хабраблога CSS уже знает.
Залог успеха — это простота. В первую очередь нужно думать о функционале, юзабилити и содержании. А теперь каждый школяр будет спамить «смотри, какая красивая страничка у меня», потому что ранее у него и мысли бы не возникло сделать что-то такое эдакое, ведь это заняло бы много времени, а тут теперь всего 3 строчки и готово.
Обидно, но раньше инет был интереснее и дружелюбнее. А сейчас засилие клонов с изрядным большинством тупых троллей. Развития — ноль!
А тут все CSS3… Он нужен только тем, кто умеет им пользоваться!
П.С.: можете и дальше минусовать, от этого не прибавится количество хороших и без «финтифлюшек» сайтов.
Вы никогда не сталкивались с необходимостью сделать закруглённые уголки/тень/ещё что-то и осознанием того, как же всё это через жопу-то делается, чёрт возьми! Я вот сталкивался… свежи впечатления от мегаэкспериментов с CSS.
Да вот было один раз. Мне позвонил «человек» и орал, что у него сайт не отображается в Firefox 2… что-то там. И что? Вроде в браузерах понимает толк. Но вот ему нравится 2-я версия, которая у него прекрасно работает. А сайт, ну это сайт неправильный.
Да и всё верно, сайты не для пользователей habr.ru делаются, а для среднестатистического сёрфера.
Визуально CSS3 выглядит проще, но в общем никак не просто.
— Для закруглённых уголков или тени необязателен JS. Особенно если учесть, что он создаст много элементов в DOM, что не может не сказаться на производительности.
— «Классический путь» для загружаемых шрифтов оказался нужен для не-IE браузеров, которые долгое время не поддерживали их.
— Что-то мне кажется, что -ms-filter: «progid:DXImageTransform.Microsoft.Alpha(Opacity=50)» для IE 8 можно также сократить до -ms-filter: «Alpha(Opacity=50)». Рекомендации для progid так и остаются рекомендациями, и можно надеятся, что какой-нибудь IE 9 или 10 уже будет поддерживать opacity.
— url(rgba.php?r=R&g=G&b=B&a=A) — а здесь про IE6, похоже, уже забыли (впрочем это оправдано с точки зрения производительности).
— «The Классический путь of doing this…» — я тоже люблю поиск и замену :-).
— Почему-то забыли указать простые правила background-size: 50%, column-count: 2. Так, судя по всему, следующая версия оперы будет поддерживать уже их. Аналогичного поведения можно ожидать и от других браузеров. Поэтому стоит взять за правило указывать атрибуты и без специфичных браузерных префиксов, чтобы не бегать потом с правками.
Отправил на проверку (browsershots.org) страничку с тестом (http://nuke.wyob.ru/css3test).
browsershots.org/http://nuke.wyob.ru/css3test
Попробуйте jQuery corner plugin и увидите что вы не правы.
Это ж плюс один запрос на сервер для каждой такой конструкции!
Попробовал в хроме и файрфоксе (оба последние) — больше половины примеров не работают (причем где-то классический путь не пашет, где-то новый).
Вы где скрины все делали?
Спасибо.
А вопросы про скрины и угол их наклона не ко мне.
FF3, opera 10, IE8, новейший хром.
Эх, вот бы взять и обновить все браузеры на планете до последней версии, а IE так и вообще бы где-нибудь по пути потерять.
В оригинале все примеры прямые:
nettuts.s3.amazonaws.com/430_cssTips/demo/corners.html
А у Вас кривые.
Вот я и спрашиваю.
Вот оригинал — net.tutsplus.com/tutorials/html-css-techniques/11-classic-css-techniques-made-simple-with-css3/
Кому нравятся кривые картинки, тот пусть меня минусует,
А кому не нравятся кривые картинки, тот путь плюсует.
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
// А это какое отношение к CSS3 имеет?
или я что-то не так понял
Больше половины примеров в FF на MacOS X → не работают.
2. Я смотрю у вас панацея прям jq, средство от всех болезней.
Некоторые вещи делаются без jq, обычной версткой. Не всегда стоит «будить монстра», хотя jq я «монстром» не считаю, ибо в проектах он помогает, но для таких мелочей явно он «монстр»
-o-background-size: 50%; /* Opera */
-khtml-background-size: 50%; /* Konqueror */
Очень странный CSS3 ))))))))))))))
3 — видимо кол-во браузеров, для каждого из которых надо будет отдельное свойство описывать)))
Если серьезно, то автор конечно лукавит, что это CSS3, скорее набор новых хаков для конкретных браузеров (не все, есть и CSS#)… все тех же, но за то что перевел (как я понимаю) и выложил — спасибо. Думаю пригодиться людям))
Упомянут -khtml, но забыт -moz, а свойства без префикса вообще нет.
Анимацию поддерживает не только webkit, но и ночные сборки Firefox и движок Opera Presto 2.4. Поэтому, как минимум, нужно дублировать свойство без префикса.
В общем, сомнительная копипейст-статейка, утверждающая, что все поголовно пользуются jQuery для имитации визуальных свойств из CSS 3. Вы хоть в переводе поправьте все глупости.
[любуется анимацией]
Наглядно.
Допустим сейчас упростили, т.к. они «модные», а завтра «модными» станут например скошенные углы. Или тот же скругленный угол с тенью. ЦСС4 вводить по этому поводу? :-/
Разумеется, скругленные углы я указал как пример. Те же анимации… по-моему это дело скриптов все-таки!
2) тень от бокса в classic way светлее и градиентом, в отличие от монотонного css3
6) RGBA classic way вообще не работает
7) bg size css3 не работает
8) аналогично css3 не работает
9) колонки в classic way отсутствуют
10) classic way border image не работает
11) анимация в classic way плавная, в css3 происходит просто мгновенное перемещение.
это у меня такой странный Firefox, что css3 работает в большем числе случаев нежели jquery? :)
" 9. Столбцы
…
CSS3
Жаль, что те, в которых он не работает, так и не научаться его поддерживать. Ведь менять или обновлять браузеры не все любят, ой не все…