Одним из наиболее важных для веб-разработчиков языков считается 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 работает, вам также следует обратить внимание на Fonts Squirel.
@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;
}