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) norepeat 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;
}