11 примеров использования CSS3

Веб разработка - CSS

Здесь показаны 11 примеров того, как можно использовать CSS3. Они представлены в виде сравнения. В первом случае используется CSS2 (или Javascript), а во втором — CSS3.

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 ещё не работает во всех браузерах.

 

---

Читайте:
Создание прототипа с помощью CSS-фреймворка Grid 960 CSS3: Во веки веков! Производительность CSS Expressions Создаем закруглённые уголки с помощью CSS 3 Выравнивание полей формы с помощью CSS

Новости для разработчиков Microsoft выпустила обновленную версию своего набора вспомогательных инструментов разработчика под названием Visual Studio 2010 Productivity Power T...

Журналы будут такими, какими решит Adobe После триумфального выпуска Wired для iPad, в подготовке которого Adobe приняла самое непосредственное участие, компания наконец объявила о том, что...

Что такое AJAX API для Google Переводчика? Благодаря AJAX API для Google Переводчика можно переводить и определять язык блоков текста на веб-странице, используя только JavaScript. Кроме того,...

Новый язык программирования от Apple? Майк Цай из Daringfireball поделился своим мнением насчет нового языка программирования, который по слухам создает Apple. После просмотра официально...

WebsiteSpark – новые возможности для веб-дизайнеров и разработчиков! Microsoft запускает уникальную программу по предоставлению ПО и поддержки для профессиональных веб-разработчиков и дизайнеров. Компания Microsoft...