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;

}

Наши рекомендации