Войти Регистрация

CSS примеры: 27 наиболее популярных css примеров


В этой статье мы имеем 27 CSS примеров и хаки, которые позволят вам сэкономить время и нервы. Зачем изобретать колесо, когда есть написанные фрагменты CSS кода? Надеюсь вам понравиться эта изумительная коллекция CSS примеров, которая также включает примеры CSS3.

Также имеются некоторые классические CSS хаки, без которых не обойтись. Для удобства использования CSS кода, можете с легкостью использовать содержание в начале статьи.

27 наиболее популярных CSS примеров

Добавление тени к тексту с помощью text-shadow

Пример рамки в виде графической картинки (*.png, *.jpg, *.gif)

Добавление тени к div или img с помощью box-shadow

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

Индивидуальное закругление угла рамки

Добавление градиента

Добавление пробельных символов (breaks) – необходимо для печати

Пример оформление цитаты на css

CSS выравнивание  по горизонтали

Выравнивание текста по вертикале в div блоке на css

Фиксация футера на CSS

Картинка загрузки изображения на CSS

Замена h1 тега картинкой на CSS

Пример буквицы на CSS

Кроссбраузерная прозрачность блока на CSS

Стилизация внешних ссылок + форматов mp3, pdf, email

Растянуть фон (изображение) на CSS

Текст в несколько столбцов на CSS

Пример rollover ссылки на CSS

Пример подключения шрифтов на CSS

Пример подключения google шрифтов на CSS

Отражение изображения на CSS

Поворот изображения на CSS

Установка размера области контента

Список CSS хаков

Пример обнуления CSS стилей

Обнуление цветов на 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


Дискуссия по теме     5 Комментариев
Добавить комментарий
АмЫнЪ 28.03.2013 в 19:05
За отражение Громаднейшее Пасибище!!
Ольга 05.03.2013 в 06:43
Спасибо огромное! Эта подборка просто развязала руки.
Александра 09.01.2013 в 02:03
Очень полезная статья! Спасибо!
Андрей 23.11.2011 в 22:04
В IE не сохраняется прозрачность картинки при ее отражении -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; Есть ли хак для решения этой проблемы!?
drasute 22.11.2011 в 21:43
Ништяк, спасибо
Просмотров: 79325