CSS3 позволяет разработчикам интерфейсов создавать утонченные визуальные эффекты для того, чтобы усовершенствовать внешний вид веб-сайта. В этой статье вы узнаете более чем о 10 новых методов украшения вашего веб-сайта при помощи CSS3, которые придадут сайту более профессиональный вид.
Черно-белые изображения с помощью CSS3
Следующий CSS класс, будет отображать любой цвет изображения в черно-белом. Префикс поставщика позволит трюку работать в любом браузере.
img.desaturate {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}Тень вверху страницы при помощи CSS3
Вот вам простой сниппет, который придаст вашему веб-сайту красивую тень вверху страницы. Легко добавляется и имеет красивый визуальный аспект!
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;
}Обнаружение двойных щелчков в CSS3
Верьте или нет, но можно определить, когда элемент был дважды щелкнут, используя только один CSS. Как?- показано в следующем коде:
<div>
<span><input type="text" value=" " readonly="true" />
<a href="//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>Треугольники в CSS3
Да, это на самом деле возможно, – сделать треугольник, используя только CSS. Хотя это, наверное, и не самый лучший способ это делать, мы все таки считаем эту технику очень полезной и интересной.
/*Треугольник вверх*/
div.arrow-up {
width:0px;
height:0px;
border-left:5px solid transparent; /* left arrow slant */
border-right:5px solid transparent; /* right arrow slant */
border-bottom:5px solid #2f2f2f; /* bottom, add background color here */
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;
}Использование CSS calc ()
calc () работает как функция и позволяет выполнять расчеты для определения размеров и формы объектов. Она может быть использована в любом месте, где требуется длина.
/* basic calc */
.simpleBlock {
width: calc(100% - 100px);
}
/* calc in calc */
.complexBlock {
width: calc(100% - 50% / 3);
padding: 5px calc(3% - 2px);
margin-left: calc(10% + 10px);
}Чистые CSS градиенты текста
Текст градиенты всегда были популярны в Интернете. Теперь с CSS3, стало намного проще создавать красивые градиенты в течение нескольких минут.
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)));Отключение указателя событий CSS
Недавно введенное свойство pointer-events, позволяет отключить события указателя на элемент. Например, ссылка со следующим классом больше не будет интерактивной.
.disabled { pointer-events: none; }Оформление элементов “швом”в CSS3
Следующий cниппет покажет, как создается эффект “прошивки” вокруг любого элемента.
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;
}Пользовательские прокрутки (scrollbars) с помощью CSS3 и WebKit
Помните, 10 лет назад, когда почти каждый использовал эксклюзивные свойства Microsoft, чтобы настроить внешний вид полосы прокрутки? Ну, теперь вы можете сделать то же самое с Webkit.
::-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);
}Размытый текст с помощью CSS3
Простой, но очень хороший эффект размытого текста.
.blur {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}Угловые ленты в чистом CSS
Этот код немного длиноват, но он создает причудливую угловую ленту в чистом CSS.
<div class="wrapper"> <div class="ribbon-wrapper-green"><div class="ribbon-green">NEWS</div></div> </div>
И теперь CSS:
.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;
}Высоких конверсий!
