11 примеров CSS3 кода для разработчиков
Одним из наиболее важных для веб-разработчиков языков считается CSS3. Новичок вы или опытный разработчиков веб-сайтов, заранее подготовленные фрагменты CSS3-кода могут пригодиться вам...
Одним из наиболее важных для веб-разработчиков языков считается CSS3. Новичок вы или опытный разработчиков веб-сайтов, заранее подготовленные фрагменты CSS3-кода могут пригодиться вам. В то время как HTML предлагает нам структуру документов, эта структура порой может по-разному отображаться в разных браузерах. При оформлении ваших веб-сайтов, CSS3 может помочь вам создавать более интересные стили.
Размытый текст
Данный фрагмент CSS-кода позволяет вам сделать текст немного прозрачным, а также добавить тень:
.blur{ color: transparent; text-shadow: 0 0 3px rgba( 0, 0, 0, 0.5); }
Кнопки
Пример для создания красивых кнопок:
.btn { padding: 8px 20px; color: #555; background: #f7f7f7; background: -moz-linear-gradient(top, #ffffff 0%, #f7f7f7 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f7f7f7)); background: -webkit-linear-gradient(top, #ffffff 0%,#f7f7f7 100%); background: -o-linear-gradient(top, #ffffff 0%,#f7f7f7 100%); background: -ms-linear-gradient(top, #ffffff 0%,#f7f7f7 100%); background: linear-gradient(to bottom, #ffffff 0%,#f7f7f7 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7f7f7',GradientType=0 ); } .btn:hover { background: #fff; background: -moz-linear-gradient(top, #f7f7f7 0%, #ffffff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#ffffff)); background: -webkit-linear-gradient(top, #f7f7f7 0%,#ffffff 100%); background: -o-linear-gradient(top, #f7f7f7 0%,#ffffff 100%); background: -ms-linear-gradient(top, #f7f7f7 0%,#ffffff 100%); background: linear-gradient(to bottom, #f7f7f7 0%,#ffffff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#ffffff',GradientType=0 ); } .btn:focus { outline: none; color: #555; }
Предварительная загрузка изображения
Иногда бывает гораздо удобнее предварительно подгрузить все нужные изображения для конкретного элемента. Этот невероятный отрывок кода позволит вам заранее подготовить все изображения, а затем отобразить их разом.
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; }