Gtalk.kz

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

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

Теперь я собираю css сниппеты в 1 месте

Давайте начнем.

Сброс стилей от html5doctor.com специально для на html5.

Подробнее о файле сброса стиле можно почитать в статье Урок 5.1 Сброс стилей: reset.css

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {

margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

body {
line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section
{
 display:block;
}

nav ul {
list-style:none;
}

blockquote, q {
quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}

a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

/* change colours to suit your needs */

ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}

/* change colours to suit your needs */

mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}

del {
text-decoration: line-through;
}

abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}

table {
border-collapse:collapse;
border-spacing:0;
}

/* change border colour to suit your needs */

hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}

input, select {
vertical-align:middle;
}

Clear хак – удаление обтекания блоков

/* For modern browsers */
.cf:before,
.cf:after {
content:"";
display:table;
}

.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
} 

Согласованный и предсказуемый размер шрифта в Rem (единица размера шрифта в css3)

html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

Полный стиль для @face-font

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf')  format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}

Хак для IE6-8

Хаки для каждого браузера Ie с 6 версии до 8 :).

body {
color: red; /* all browsers, of course */
color : green\9; /* IE8 and below */
*color : yellow; /* IE7 and below */
_color : orange; /* IE6 */
}

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

selector {
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5;      /* khtml, old safari */
-moz-opacity: 0.5;       /* mozilla, netscape */
opacity: 0.5;           /* fx, safari, opera */
}

Удаление контура вокруг ссылок для webkit браузеров

input[type="text"]:focus {
outline: none;
}

Кроссбраузерная минимальная высота (min-height)

Аналогично можно поступить с шириной

#div {
min-height: 500px;
height:auto !important;
height: 500px;
}

Краткий стиль селекта font

/*font: font-style font-variant font-weight font-size/line-height font-family;*/

font: italic small-caps bold 15px/30px Helvetica, sans-serif;
 

Заглавная буква

Помните эту первую красивую букву в сказках? Так вот как это можно сделать:

p:first-letter {
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:60px;
font-family:Georgia;
}

Вертикальное выравнивание по центру

.container {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}

Кроссбраузерный text-shadow (включая IE)

Делайте тень у текста для всех браузеров.

p {
text-shadow: #000000 0 0 1px;
zoom:1;
filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1);
-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=0, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=0, Color=#000000)";
}

Кроссбраузерный box-shadow (включая IE)

.shadow {
-moz-box-shadow: 0 0 4px #000;
-webkit-box-shadow: 0 0 4px #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#666666,strength=3)";
filter:
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=0,strength=3)
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=90,strength=3)
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=180,strength=3)
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=270,strength=3);
box-shadow: 0 0 4px #000;
}

Скрыть текст над картинкой с помощью text-indent

h1 {
background: url(img/image.jpg) no-repeat;
height: 100px;
width: 500px;
display: block;
text-indent: -9999px;
}

Исправляем баг в IE6-7: двойной отступ

ul li {
float: left;
margin-left: 5px;
*display: inline; /*IE7 and below*/
_display: inline; /*IE6 and below*/
}

Удалить полосы прокрутки textarea в IE

textarea {
overflow:auto;
}

Изменения стиля выделенному тесту

::selection {
color: white;
background-color: red;
}

::-moz-selection {
color: white;
background-color: red;
}

Стиль для ссылок: внещних, mail и pdf-файлов

/* external links */
a[href^="http://"]
{
padding-right: 13px;
background: url(external.gif) no-repeat center right;
}

/* emails */
a[href^="mailto:"]
{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}

/* pdfs */
a[href$=".pdf"]
{
padding-right: 18px;
background: url(acrobat.png) no-repeat center right;
}

Стили для разных девайсов (по ширине экрана)

Как сделать мобильный вариант сайта? Да, просто подмените css файл для каждого устройства.

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Пк и ноутбуков ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Больших экранов ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Можно прописать разные стили в отдельные файлы для каждого девайса, например:

<head>
<link rel="stylesheet" href="smartphone.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)">

<link rel="stylesheet" href="smartphone-landscape.css" media="only screen and (min-width : 321px)">

<link rel="stylesheet" href="smartphone-portrait.css" media="only screen and (max-width : 320px)">

<link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)">

<link rel="stylesheet" href="ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)">

<link rel="stylesheet" href="ipad-portrait.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)">

<link rel="stylesheet" href="widescreen.css" media="only screen and (min-width : 1824px)">

<link rel="stylesheet" href="iphone4.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)">

</head>

Шрифты с помощью Google Font API

Вставьте код между тегами <head></head>

/* <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name"> */
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
 

Используйте стиль шрифта в css

/*CSS selector {
font-family: 'Font Name', serif;
}*/

font-family: 'Tangerine', serif;

по мотивам

Надеюсь данная статья помогла Вам в освоении и улучшении своих навыков верстки сайта.

Не забудьте поделиться с друзьями ;).

с/у УтБ

Спонсор статьи:  Продвижение и раскрутка сайтов от веб-студии Z-studio.
На десерт сегодня Guitar Hero в парламенте Великобритании :mrgreen: