Несколько интересных приёмов на CSS3

Спецификации CSS3 позволяют фронтэнд-разработчикам создавать сложные визуальные эффекты, чтобы сделать сайты красивее. Я собрал более 10 новых приёмов CSS3, подходящих для того, чтобы украсить ваш сайт и придать ему более профессиональный вид.

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); } 

Источник и демо.

Черно-белые изображения на 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 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> 

Источник и демо.

Треугольники в CSS3

На самом деле можно делать треугольники, используя только CSS. Это, конечно, не самый лучший способ, но все-таки эта техника очень полезная и интересная.

/* create an arrow that points up */ 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; }  /* create an arrow that points down */ 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; }  /* create an arrow that points left */ 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; }  /* create an arrow that points right */ 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-градиент для текста.

Тексты, раскрашенные в градиент, всегда были популярны в Интернете. Теперь с 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; } 

Источник и демо.

«Обшитый» нитками блок на CSS

В следующем фрагменте кода показано, как создать хорошую границу вокруг любого элемента, как будто он пришит нитками. Красиво!

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; } 

Источник и демо.

Кастомные полосы прокрутки с помощью CSS3 в WebKit

Помните, 10 лет назад, почти каждый использовал специальные свойства IE, чтобы настроить внешний вид полосы прокрутки? Ну, теперь вы можете сделать то же самое с 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; } 

Источник и демо.

_{P.S. Опечатки отслеживаются с помощью Хабра Кадабры}