- → Верстка, Дизайн
- → CSS
- → Статьи
CSS примеры: 27 наиболее популярных css примеров
Также имеются некоторые классические CSS хаки, без которых не обойтись. Для удобства использования CSS кода, можете с легкостью использовать содержание в начале статьи.
27 наиболее популярных CSS примеров
Добавление тени к тексту с помощью text-shadow
Пример рамки в виде графической картинки (*.png, *.jpg, *.gif)
Добавление тени к div или img с помощью box-shadow
Индивидуальное закругление угла рамки
Добавление пробельных символов (breaks) – необходимо для печати
Пример оформление цитаты на css
CSS выравнивание по горизонтали
Выравнивание текста по вертикале в div блоке на css
Картинка загрузки изображения на CSS
Замена h1 тега картинкой на CSS
Кроссбраузерная прозрачность блока на CSS
Стилизация внешних ссылок + форматов mp3, pdf, email
Растянуть фон (изображение) на CSS
Текст в несколько столбцов на CSS
Пример подключения шрифтов на CSS
Пример подключения google шрифтов на CSS
Установка размера области контента
Вот, собственно коллекция css примеров. Пользуйтесь на здоровье!
Добавление тени к тексту с помощью text-shadow
Помогает выделить текст из других. Отлично подходит для заголовков и важных цытат.
.text-shadow {
text-shadow: 2px 2px 4px #666;
}
Пример рамки в виде графической картинки
Благодаря этому примеру вы можете создать любой вид рамки и использовать ее для различных объектов. Просто нарисуйте рамку на свой вкус и воспользуйтесь следующим примером css кода.
#border-image-style {
border-width:15px;
/* 3 types of border exist repeated, rounded or stretched (repeat / round / stretch) */
-moz-border-image:url(border.png) 30 30 stretch ;
-webkit-border-image:url(border.png) 30 30 stretch;
}
Добавление тени к div или img с помощью box-shadow
Помогает выделить объект из общего фона страницы, придает эму эффект объема. На этот элемент пользователи первым делом обратят внимание.
box-shadow: 0px 3px 3px rgba(0,0,0,0.2); -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
Закругленные углы
Добавляет закругленные углы к вашим CSS3 элементам. Можно свободно менять радиус углов. И главное, никакой графики.
.round{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
}
Индивидуальное закругление угла рамки
Этот пример, позволяет закруглять определенный угол объекта. Ниже подан пример css кода для каждых из 4 углов.
#Bottom_Right {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}
#Bottom_Left {
height: 65px;
width:160px;
-moz-border-radius-bottomleft: 50px;
border-bottom-left-radius: 50px;
}
#Top_Right {
height: 65px;
width:160px;
-moz-border-radius-topright: 50px;
border-top-right-radius: 50px;
}
#Top_Left {
height: 65px;
width:160px;
-moz-border-radius-topleft: 50px;
border-top-left-radius: 50px;
}
Добавление градиента
При использовании CSS3 вам больше не придется использовать градиенты в виде картинки. Просто укажите начальный и конечный цвет градиента, а этот пример кода, сделает все за вас.
background: -webkit-gradient(linear, left top, left bottom, from(#74b8d7), to(#437fbc)); background: -moz-linear-gradient(top, #74b8d7, #437fbc); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#74b8d7', endColorstr='#437fbc');
Добавление пробельных символов (breaks)
Этот css пример, будет добавлять разрывы, которые необходимы в случае печати страницы. Часто бывает, что у пользователя нету времени читать статью, он может прочитать ее в дороге, пользуясь печатью. А этот код, поможет не сойти с ума при чтении распечатанной статьи.
.page-break{
page-break-before:always;
}
Пример оформления цитаты на css
Еще один, немаловажный пример CSS кода. Он помогает стилизовать цитаты. Оформите красиво цитату с помощью следующего css кода.
.pull-quote {
width: 200px;
float: right;
margin: 5px;
font-family: Georgia, "Times New Roman", Times, serif;
font: italic bold #ff0000 ;
}
CSS выравнивание по горизонтали
Пример горизонтального выравнивания сайта на чистом CSS. Наверное, самый востребованный кусок кода.
.wrapper {
width:960px;
margin:auto;
}
Выравнивание текста по вертикале в div блоке на css
Выравнивает текст по вертикали, внутри определенного элемента.
.container {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}
Фиксация футера на CSS
Часто бывает, необходимо зафиксировать футер сайта. Предлагаем вам кроссбраузерный пример фиксации футера на чистом CSS коде.
#footer {
position:fixed;
left:0px;
bottom:0px;
height:32px;
width:100%;
background:#333;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
Картинка загрузки изображения на CSS
Замените скучные пустоты при загрузке картинок, на красивый графический прелоадер. И это чистый css, никакого js.
img {
background: url(loader.gif) no−repeat 50% 50%;
}
Замена h1 тега картинкой на CSS
В одной из статьей, мы уже раскрывали тему стилизации h1, h2 тегов. Этот пример подойдет для людей беспокоящихся за внешнюю красоту и за SEO эффективность своего сайта.
h1 {
text-indent:-9999px;
margin:0 auto;
width:400px;
height:100px;
background:transparent url("images/logo.jpg") no-repeat scroll;
}
Пример буквицы на CSS
Пример красивого оформления буквицы (первой буквы абзаца). Это с легкостью делается на CSS.
p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#000;
font-size:60px;
font-family:Georgia;
}
Кроссбраузерная прозрачность блока на CSS
Маленький код, который позволяет установить прозрачность блока, которая будет одинаково отображаться у всех браузерах.
.transparent {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
opacity:0.5;
}
Example:
<div class="box transparent">Your content</div>
Стилизация внешних ссылок + форматов mp3, pdf, email
Очень приятно видеть куда ведет ссылка. Этот CSS пример, позволит украсить разные типы ссылок, включая внешние ссылки, ссылки типа mailto: и ссылки на форматы файлов.
/* external links
The ^= specifies that we want to match links that begin with the http://
*/
a[href^="http://"]{
padding-right: 20px;
background: url(external.gif) no-repeat center right;
}
/* emails
The ^= specifies that we want to match links that begin with the mailto:
*/
a[href^="mailto:"]{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}
/* pdfs
The $= specifies that we want to match links whose hrefs end with ".pdf".
*/
a[href$=".pdf"]{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;
}
/* zip
Same as above but for zip files and it adds an icon at the right of the link. Therefore the :after
*/
a[href$=".zip"]:after{
content: url(icons/zip.png);
}
Растянуть фон (изображение) на CSS
Яркий пример того, как можно растянуть фоновую картинку с помощью CSS. Может и некрасиво выглядит, но все же, кому то необходимо.
#resize-image {
/* Just imagine that the image_1.png is 200x400px */
background:url(image_1.png) top left no-repeat;
-moz-background-size: 100px 200px;
-o-background-size: 100px 200px;
-webkit-background-size: 100px 200px;
}
Текст в несколько столбцов на CSS
Интересный пример кода, который позволит вам реализовать деление текста на несколько столбцов. Это удобно для экономии места, при широкоформатном сайте. Отличное решение в плане веб дизайна.
#columns-3 {
text-align: justify;
-moz-column-count: 3;
-moz-column-gap: 12px;
-moz-column-rule: 1px solid #c4c8cc;
-webkit-column-count: 3;
-webkit-column-gap: 12px;
-webkit-column-rule: 1px solid #c4c8cc;
}
Пример rollover ссылки на CSS
Rollover ссылка – это ссылка, которая изменяет свой дизайн при наведении мыши. В данном примере этот эффект достигается с помощью CSS sprites (спрайтов). Должен сказать, это очень востребованное решение для ссылок меню и других важных элементов, требующих интерактивности.
a {
display: block;
background: url(sprite.png) no-repeat;
height: 30px;
width: 250px;
}
a:hover {
background-position: 0 -30px;
}
Пример подключения шрифтов на CSS
Подключаем шрифты разных форматов, чтобы наверняка.
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?') format('eot'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
Пример подключения google шрифтов на CSS
Не всегда есть под рукой нужные шрифты. Google API предоставляет возможность подключения самых разнообразных шрифтов. Для этого воспользуйтесь следующим css примером.
// в head
<!-- Some special fonts -->
/* Single font load*/
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Serif">
/* Multiple font load*/
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Nobile|Droid+Serif|Old+Standard+TT|Droid+Sans"><!-- Some special fonts -->
// в css
body {
font-family: 'Droid Serif', serif; font-size: 48px;
}
Отражение изображения на CSS
Эффект зеркального отражения на CSS.
img.flip {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
Поворот изображения на CSS
Еще один эффект, касающийся изображений, который поворачивает их. Смотрите, как это реализовать ниже.
/* for firefox, safari, chrome, and any other gecko/webkit browser */ -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); /* for ie */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* opera */ -o-transform: rotate(30deg);
Установка размера области контента
Может быть вам и известный, но это самый востребованный кусок кода, который устанавливает размер области для контента.
#content {
width: 100%;
margin: 0;
float: none;
}
Список CSS хаков
Список CSS хаков, который позволяет обращаться к каждому из браузеров и устанавливать конкретные стили.
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
/* IE8 */
#anotherone {color: blue\0/;} /* must go at the END of all rules */
Пример обнуления CSS стилей
Часто необходимо перед разработкой дизайна, обнулить прежние CSS стили, кто делал, тот знает. Смотрите пример обнуления CSS стилей.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
Обнуление цветов на CSS
Делает все тексты черными по умолчанию а фон белым. Также устанавливает указанный цвет для всех ссылок. Другими словами делается обнуление всех цветов текста и ссылок.
* {
color: black !important;
background-color: white !important;
background-image: none !important;
}
a:link {
font-weight: bold;
text-decoration: underline;
color: #06c;
}
Какими элементами css кода вы пользуетесь?
Поделитесь собственными, наиболее популярными примерами css кода. Или выскажите свои впечатления и пожелания в комментариях ниже. Надеюсь подборка css примеров, была чем-то полезна. Творческих вам успехов!
Дальше: SEO wordpress
Development — Taras Moroz