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

Автор admin мая 13, 2010 Просмотров: 819

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

1. Закругление углов

Rounded Corners


60c1cbd5

Классический путь

[javascript]<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><br />
<script type="text/javascript" src="js/jquery.corners.js"></script><br />
<script type="text/javascript"><br />
$(function (){<br />
$('.box').corners ('10px');<br />
});<br />
</script>[/javascript]

[html]</p>
<p><div><br />
<!--CONTENT--><br />
</div></p>
<p>[/html]

CSS3

[css]</p>
<p><code><style type="text/css"><br />
.box {<br />
border-radius: 10px;<br />
— moz-border-radius: 10px;<br />
— webkit-border-radius: 10px;<br />
}<br />
</style><br />
<div><br />
<!--CONTENT--><br />
</div></code></p>
<p>[/css]

Всё, что нужно сделать — это описать 3 свойства!

2. Тень от блока

Box Shadow

Классический путь

[javascript]<br />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><br />
<script type="text/javascript" src="js/jquery.dropShadow.js"></script><br />
<script type="text/javascript"><br />
$(function (){<br />
$('.box').dropShadow ({<br />
left: 5,<br />
top: 5,<br />
opacity: 1.0,<br />
color: 'black'<br />
});<br />
});<br />
</script><br />
[/javascript]

[html]<br />
<div><br />
<!--CONTENT--><br />
</div><br />
[/html]

CSS3

[css]</p>
<p><style type="text/css"><br />
.box {<br />
box-shadow: 5px 5px 2px black;<br />
— moz-box-shadow: 5px 5px 2px black;<br />
— webkit-box-shadow: 5px 5px 2px black;<br />
}<br />
</style></p>
<p><div><br />
<!--CONTENT--><br />
</div></p>
<p>[/css]

3. Тень от текста

Text Shadow

Классический путь

[css]</p>
<p><code><style type="text/css"><br />
.font {<br />
font-size: 20px;<br />
color: #2178d9;<br />
}<br />
.fonts {<br />
position: relative;<br />
}<br />
.fonts .font {<br />
position: absolute;<br />
z-index: 200;<br />
}<br />
.fonts .second {<br />
top: 1px;<br />
color: #000;<br />
z-index: 100;<br />
}<br />
</style></code></p>
<p>[/css]

[html]</p>
<p><div><br />
<span>НЛО прилетело и опубликовало эту надпись здесь.</span><br />
<span>НЛО прилетело и опубликовало эту надпись здесь.</span><br />
</div></p>
<p>[/html]

CSS3

[css]</p>
<p><code><style type="text/css"><br />
.font {<br />
font-size: 20px;<br />
color: #2178d9;<br />
}<br />
.font {<br />
text-shadow: 0 1px 0 #000;<br />
}<br />
</style></code></p>
<p>[/css]

[html]</pre><br />
<span>НЛО прилетело и опубликовало эту надпись здесь.</span><br />
<pre>[/html]

4. Необычный шрифт

Fancy Font

Классический путь

[css]</p>
<p><code><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><br />
<script type="text/javascript" src="js/cufon.js"></script><br />
<script type="text/javascript" src="js/loyal.js"></script><br />
<script type="text/javascript"><br />
$(function (){<br />
Cufon.replace ('.classic .font');<br />
});<br />
</script></code></p>
<p>[/css]

[css]<style type="text/css"><br />
.font {<br />
font-size: 20px;<br />
}<br />
</style></code></p>
<p><span>НЛО прилетело и опубликовало эту надпись здесь.</span>[/css]

CSS3

[css]</p>
<p><code><style type="text/css"><br />
@font-face {<br />
font-family: 'Loyal';<br />
src: url ('loyal.ttf');<br />
}<br />
.font {<br />
font-family: Loyal;<br />
font-size: 20px;<br />
}<br />
</style></code></p>
<p><span>НЛО прилетело и опубликовало эту надпись здесь.</span></p>
<p>[/css]

Здесь мы просто указали какой файл со шрифтом использовать.

5. Прозрачность

Opacity

Классический путь

[css]</p>
<p><code><style type="text/css"><br />
.box {<br />
opacity: .6; // all modern browsers (this is CSS3)<br />
— ms-filter: "progid:DXImageTransform.Microsoft.Alpha (Opacity=50)"; // IE 8<br />
filter: alpha (opacity=60); // IE 5-7<br />
}<br />
</style></code></p>
<p><div><br />
<!--CONTENT--><br />
</div></p>
<p>[/css]

CSS3

[css]</p>
<p><code><style type="text/css"><br />
.box {<br />
opacity: .6;<br />
}<br />
</style></code></p>
<p><div><br />
<!--CONTENT--><br />
</div></p>
<p>[/css]

6. RGBA

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]</p>
<p><code><?php<br />
$image = imagecreatetruecolor (1, 1);<br />
$r = (int)$_GET['r'];<br />
$g = (int)$_GET['g'];<br />
$b = (int)$_GET['b'];<br />
$a = (float)$_GET['a'];<br />
$white = imagecolorallocate ($image, 255, 255, 255);<br />
$color = imagecolorallocatealpha ($image, $r, $g, $b, 127*(1-$a));<br />
imagefill ($image, 0, 0, $white);<br />
imagefilledrectangle ($image, 0, 0, 1, 1, $color);<br />
header ('Content-type: image/png');<br />
imagepng ($image);<br />
?></code></p>
<p>[/php]

Теперь просто применяем к div’у…

[css]</p>
<p><code><style type="text/css"><br />
.box {<br />
background: url (rgba.php?r=239&g=182&b=29&a=.25);<br />
}<br />
</style><br />
<div><br />
<!--CONTENT--><br />
</div></code></p>
<p>[/css]

CSS3

[css]</p>
<p><code><style type="text/css"><br />
.box {<br />
background: rgba (239, 182, 29, .25);<br />
}<br />
</style></code></p>
<p><div><br />
<!--CONTENT--><br />
</div></p>
<p>[/css]

7. Размер фона

Background Size

Классический путь

[css]</p>
<p><code><style type="text/css"><br />
.box {<br />
position: relative;<br />
overflow: hidden;<br />
}<br />
.box img {<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
width: 50%;<br />
height: 50%;<br />
z-index: 100;<br />
}<br />
.box .content {<br />
position: absolute;<br />
z-index: 200;<br />
}<br />
</style><br />
<div><br />
<div><br />
<!--CONTENT--><br />
</div><br />
<img src="http://nettuts.s3.amazonaws.com/423_screenr/200×200.jpg" alt="" /><br />
</div></code></p>
<p>[/css]

CSS3

[css]</p>
<p><code><style type="text/css"><br />
.box {<br />
background: #ccc url (http://nettuts.s3.amazonaws.com/423_screenr/200×200.jpg) no-repeat;<br />
— webkit-background-size: 50%; /* Safari */<br />
— o-background-size: 50%; /* Opera */<br />
— khtml-background-size: 50%; /* Konqueror */<br />
}<br />
</style></code></p>
<p><div><br />
<!--CONTENT--><br />
</div></p>
<p>[/css]

8. Несколько фонов

Multiple Backgrounds

Возможность установить несколько фоновых изображений в руках верстальщиков — очень мощное оружие. Я знаю много случаев, в которых приходится создавать множество div'ов только для того, чтобы иметь возможность установить несколько изображений фоном.

Классический путь

[css]</p>
<p><code><style type="text/css"><br />
.box {<br />
width: 200px;<br />
height: 150px;<br />
background: url (images/bg.png) repeat-x;<br />
}<br />
.box2 {<br />
width: 100%;<br />
height: 100%;<br />
background: url (images/text.png) center center no-repeat;<br />
}<br />
</style></code></p>
<p><div><br />
<div><br />
<!--CONTENT--><br />
</div><br />
</div></p>
<p>[/css]

CSS3

[css]</p>
<p><code><style type="text/css"><br />
.box {<br />
width: 200px;<br />
height: 150px;<br />
background: url (images/text.png) center center no-repeat, url (images/bg.png) repeat-x;<br />
}<br />
</style><br />
<div><br />
<!--CONTENT--><br />
</div></code></p>
<p>[/css]

Всё, что вам нужно сделать — добавить запятую между фонами.

9. Столбцы

Columns

Классический путь

[css]</p>
<p><code><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><br />
<script type="text/javascript" src="js/jquery.columnize.js"></script><br />
<script type="text/javascript"><br />
$(function (){<br />
$('.columns').columnize ({<br />
columns: 2<br />
});<br />
});<br />
</script><br />
<style type="text/css"><br />
.column {<br />
padding-right: 10px;<br />
}<br />
.column.last {<br />
padding: 0;<br />
}<br />
</style></code></p>
<p><code>[/css]

[html]<div><br />
<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><br />
<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><br />
</div></p>
<p>[/html]

Я добавил небольшой отступ для того, чтобы текст в колонках не состыковывался.

CSS3

[css]</p>
<p><code><style type="text/css"><br />
.columns {<br />
— moz-column-count: 2;<br />
— webkit-column-count: 2;<br />
}<br />
</style><br />
<div><br />
<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><br />
<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><br />
</div></code></p>
<p>[/css]

10. Текстура в виде границы

Border Image

Классический путь

[css]</p>
<p><code><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><br />
<script type="text/javascript" src="js/jquery.borderImage.js"></script><br />
<script type="text/javascript"><br />
$(function (){<br />
$('.classic .box').borderImage ('url (images/border.png) 27 27 27 27 round round');<br />
});<br />
</script></code></p>
<p><code>[/css]

[css]<style type="text/css"><br />
.box {<br />
border-width: 20px;<br />
}<br />
</style></p>
<p><div><br />
<!--CONTENT--><br />
</div></p>
<p>[/css]

CSS3

[css]</p>
<p><code><style type="text/css"><br />
.box {<br />
border-width: 20px;<br />
— webkit-border-image: url (images/border.png) 27 round;<br />
— moz-border-image: url (images/border.png) 27 round;<br />
border-image: url (images/border.png) 27 round;<br />
}<br />
</style></code></p>
<p><div><br />
<!--CONTENT--><br />
</div></p>
<p>[/css]

11. Анимация

Animations

Кто не любит смотреть на красивые эффекты? Анимация увеличивает отдачу от пользовательского интерфейса, но тут главное не переборщить.

Классический путь

[css]</p>
<p><code><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><br />
<script type="text/javascript"><br />
$(function (){<br />
$('.box').hover (function (){<br />
$(this).stop ().animate ({<br />
top: '20px'<br />
}, 300);<br />
}, function (){<br />
$(this).stop ().animate ({<br />
top: '0'<br />
}, 300);<br />
});<br />
});<br />
</script><br />
<style type="text/css"><br />
.box {<br />
position: relative;<br />
}<br />
</style></code></p>
<p><div><br />
<!--CONTENT--><br />
</div></p>
<p>[/css]

CSS3

[css]</p>
<p><code><style type="text/css"><br />
.box {<br />
position: relative;<br />
— webkit-transition: top 300ms linear;<br />
}<br />
.box:hover {<br />
top: 20px;<br />
}<br />
</style></code></p>
<p><div><br />
<!--CONTENT--><br />
</div></p>
<p>[/css]

Оба этих кода заставляют div скользить вниз на 20 пикселей за 300 миллисекунд.

Примеры работы — http://nettuts.s3.amazonaws.com/430_cssTips/demo/index.html

Жаль, что CSS3 ещё не работает во всех браузерах.

От переводчика: Перевёл частично. Все ненужные предложения убрал и за это прошу не ругать. Спасибо.

Мой блог находят по следующим фразам








































































































































































































































































































































«
»
You can leave a response, or trackback from your own site.

  • Pingback: Feedcas9

  • Shalty A

    Проверьте код Вашего блога

RSS FeedSubscribe
Follow UsFollow Us