Одним из наиболее важных для веб-разработчиков языков считается CSS3. Новичок вы или опытный разработчиков веб-сайтов, заранее подготовленные фрагменты CSS3-кода могут пригодиться вам. В то время как HTML предлагает нам структуру документов, эта структура порой может по-разному отображаться в разных браузерах. При оформлении ваших веб-сайтов, CSS3 может помочь вам создавать более интересные стили.

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

Размытый текст

Данный фрагмент CSS-кода позволяет вам сделать текст немного прозрачным, а также добавить тень:

.blur{  
color: transparent;  
text-shadow: 0 0 3px rgba( 0, 0, 0, 0.5);  
}

Предварительная загрузка изображения

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

body:before {

    content: url(images/hover3.gif);

    display:none;

}

Текст с градиентом

Сегодня вы можете добиться текста с эффектом градиента при помощи webkit. Это самый опрятный способ добиться красивого текста, который при этом будет возможно редактировать, и нет необходимости использовать Photoshop.

h1 {
  font-size: 20px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Прозрачность изображений

IE9, Firefox, Chrome, Opera и Safari используют свойство opacity для прозрачности. Свойство opacity принимает значения от 0.0 до 1.0. Самое низкое значение приводит к прозрачности элемента. IE8 и более ранние версии используют filter:alpha(opacity=x). X способен принимать значения от 0 до 100. Чем ниже значение, тем более прозрачным будет элемент.

img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

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

CSS3 позволяет веб-дизайнерам указывать несколько изображений для фона элементов, и для этого понадобится не что иное, как простой список через запятую.

#Multiple-Backgrounds {
width: 500px;
height: 250px;
background: url(decoration.png) left top no-repeat, url(ribbon.png) right bottom no-repeat, url(old_paper.jpg) left top no-repeat;
}

Тень текста

Теперь вам не обязательно использовать Photoshop, если вам хочется создать тень. Этот небольшой CSS3-сниппет поможет вам в этом:

text-shadow: 2px 2px 2px #000;

Псевдо-классы ссылок

Ссылки можно отображать различными методами в браузерах, которые поддерживают CSS:

a:link {color: blue;} /* unvisited link */
a:visited {color: purple;} /* visited link */
a:hover {color: red;} /* mouse over link */
a:active {color: yellow;} /* selected link */

Закругленные углы

Благодаря CSS3, вы можете добавлять закругленные углы.

#roundedcorners {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */

}

Использование @font-face

Font-face – это отличный способ использовать небезопасные для веб-браузеров шрифты в ваших проектах.

@font-face {
 font-family: 'MyWebFont';
 src: url('webfont.eot'); /* IE9 Compat Modes */
 src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('webfont.woff') format('woff'), /* Modern Browsers */
      url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
      url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
 }

Удаляем скроллинг в текстовых полях в IE

Internet Explorer зачастую надоедает тем, что в каждом текстовом поле принудительно отображается скроллинг, даже если он перекрывает контент. Вы можете избежать этого, воспользовавшись этим небольшим CSS-сниппетом.

textarea {

overflow:hidden;

}