2 161 Текущая спецификация CSS3 позволяет разработчикам интерфейсов создавать сложные визуальные эффекты, которые заставляют ваши сайты выглядеть лучше.
В этой статье мы хотим вам представить подборку лучших техник CSS3. С их помощью ваши сайты будут выглядеть привлекательней и профессиональней.
Реклама: Вазы для цветов
Черно-белые изображения с помощью CSS3
Следующий класс CSS конвертирует любое цветное изображение в черно-белое. В классе использованы всевозможные перфиксы, и это все для того, чтобы он работал в любом современном браузере.
|
1 2 3 4 5 6 7 |
img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); } |
Источник/Пример: http://demosthenes.info/blog/532/Convert-Images-To-Black–White-With-CSS
Тень в верхней части страницы с помощью CSS3
Этот простой сниппет добавляет в верхней части страницы тень на всю ее ширину. Очень просто!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
body:before { content: ""; position: fixed; top: -10px; left: 0; width: 100%; height: 10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); box-shadow: 0px 0px 10px rgba(0,0,0,.8); z-index: 100; } |
Источник/Пример: http://playground.genelocklin.com/depth/
Обнаружение двойных щелчков мыши в CSS3
Верите или нет, но с помощью CSS можно определить, был ли произведен двойной щелчок на определенном элементе. Просто посмотрите, как это реализовано:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<div class="test3"> <span><input type="text" value=" " readonly="true" /> <a href="http://google.com">Double click me</a></span> </div> <style type="text/css"> .test3 span { position: relative; } .test3 span a { position: relative; z-index: 2; } .test3 span a:hover, .test3 span a:active { z-index: 4; } .test3 span input { background: transparent; border: 0; cursor: pointer; position: absolute; top: -1px; left: 0; width: 101%; /* Hacky */ height: 301%; /* Hacky */ z-index: 3; } .test3 span input:focus { background: transparent; border: 0; z-index: 1; } </style> |
Источник/Пример: http://css-tricks.com/examples/CSSDoubleClick/
Треугольники на CSS3
Да, есть возможность отрисовывать треугольники с помощью CSS. Данная техника полезна и интересна исполнением и универсальностью.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
/* треугольник вверх */ div.arrow-up { width:0px; height:0px; border-left:5px solid transparent; /* левая часть */ border-right:5px solid transparent; /* правая часть */ border-bottom:5px solid #2f2f2f; /* низ и фон */ font-size:0px; line-height:0px; } /* треугольник вниз */ div.arrow-down { width:0px; height:0px; border-left:5px solid transparent; border-right:5px solid transparent; border-top:5px solid #2f2f2f; font-size:0px; line-height:0px; } /* треугольник влево */ div.arrow-left { width:0px; height:0px; border-bottom:5px solid transparent; /* left arrow slant */ border-top:5px solid transparent; /* right arrow slant */ border-right:5px solid #2f2f2f; /* bottom, add background color here */ font-size:0px; line-height:0px; } /* треугольник вправо */ div.arrow-right { width:0px; height:0px; border-bottom:5px solid transparent; /* left arrow slant */ border-top:5px solid transparent; /* right arrow slant */ border-left:5px solid #2f2f2f; /* bottom, add background color here */ font-size:0px; line-height:0px; } |
Источник/Пример: http://davidwalsh.name/css-triangles
Использование calc () в CSS
calc() работает также, как и обычная функция, т.е. позволяет проводить различные расчеты. Она может быть использована везде, где нужно узнать какой-либо размер.
|
1 2 3 4 5 6 7 8 9 10 11 |
/* основы */ .simpleBlock { width: calc(100% - 100px); } /* calc в calc */ .complexBlock { width: calc(100% - 50% / 3); padding: 5px calc(3% - 2px); margin-left: calc(10% + 10px); } |
Источник/Пример: http://davidwalsh.name/css-calc
Чистые градиенты в тексте
Текстовые градиенты всегда были и остаются популярными средствами украшения сайта. А с появлением CSS3 их реализация стала еще проще.
|
1 2 3 4 5 6 7 8 9 10 11 |
h2[data-text] { position: relative; } h2[data-text]::after { content: attr(data-text); z-index: 10; color: #e3e3e3; position: absolute; top: 0; left: 0; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0))); |
Источник: http://snipplr.com/view/49911/pure-css-text-gradients/
Отключение событий указателя в CSS
Недавно представленное новое свойство pointer-events позволяет вам отключать события указателя на определеном элементе. Например, ссылка с классом disabled уже не может быть нажатой.
|
1 |
.disabled { pointer-events: none; } |
Источник/Пример: http://davidwalsh.name/pointer-events
Эффект вышивки на элементах с помощью CSS3
Следующий сниппет позволяет вам добавить эффект вышивки для любого выбранного элемента. И это прекрасно.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
p { padding: 5px 10px; margin: 10px; background: #ff0030; color: #fff; font-size: 21px; line-height: 1.3em; border: 2px dashed #fff; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5); -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5); box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5); text-shadow: -1px -1px #aa3030; } |
Источник: http://www.catswhocode.com/blog/snippets/stitched-elements-in-css3
Пользовательские скролбары на CSS3 и WebKit
В CSS3 вы сами можете определять, как должны выглядеть скролбары на вашем сайте.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: none; } ::-webkit-scrollbar-thumb { background: -webkit-linear-gradient(left, #547c90, #002640); border: 1px solid #333; box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4); } |
Источник/Пример: http://davidwalsh.name/custom-scrollbars
Размытый текст на CSS3
Простой, но очень хороший эффект размытия текста. Легкий в установке и при этом очень красивый на выходе!
|
1 2 3 4 |
.blur { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5); } |
Источник/Пример: http://css-tricks.com/snippets/css/blurry-text/
Чистые угловые ленты с помощью обычного CSS3
Хотя код такой ленты достаточно длинный, но зато само исполнение выглядит очень эффектно.
|
1 2 3 |
<div class="wrapper"> <div class="ribbon-wrapper-green"><div class="ribbon-green">NEWS</div></div> </div> |
And the CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
.wrapper { margin: 50px auto; width: 280px; height: 370px; background: white; border-radius: 10px; -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); box-shadow: 0px 0px 8px rgba(0,0,0,0.3); position: relative; z-index: 90; } .ribbon-wrapper-green { width: 85px; height: 88px; overflow: hidden; position: absolute; top: -3px; right: -3px; } .ribbon-green { font: bold 15px Sans-Serif; color: #333; text-align: center; text-shadow: rgba(255,255,255,0.5) 0px 1px 0px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); position: relative; padding: 7px 0; left: -5px; top: 15px; width: 120px; background-color: #BFDC7A; background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45); color: #6a6340; -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); box-shadow: 0px 0px 3px rgba(0,0,0,0.3); } .ribbon-green:before, .ribbon-green:after { content: ""; border-top: 3px solid #6e8900; border-left: 3px solid transparent; border-right: 3px solid transparent; position:absolute; bottom: -3px; } .ribbon-green:before { left: 0; } .ribbon-green:after { right: 0; } |
Источник/Пример: http://jsfiddle.net/chriscoyier/H6rQ6/1/
