Большая и нужная коллекция CSS сниппетов

Опубликовано автор в категориях Верстальщику.


Здравствуйте, в этом посте будет мало текста, но он будет очень информативный и полезный для верстальщиков. Недавно набрел на очень хорошую подборку CSS сниппетов. Нельзя сказать, что они супер-новые, однако плюс в том что все они собраны в одном месте и уже успешно перекочевали в мой сниппет-менеджер. Думаю и вам пригодится, если не все, то хотя бы часть из того что есть в этом списке. Сразу же добавлю что за подборку стоит сказать thanks to Nikola Lazarevic. Итак, приступим!

CSS reset от Эрика Маера

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
 
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, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Источник

Новый Micro-Clearfix

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}
 
.cf:after {
    clear:both;
}
 
/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

Источник

Размер шрифтом в REM

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

О том, что такое REM читайте из источника

Пуленепробиваемый синтаксис для @font-face

@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, IE7, IE8 с помощью всего четырех символов

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

Источник

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

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

Кроссбраузерная тень для текста, включая 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)";
 
}

Источник

Кроссбраузерная тень для блока, включая 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;
}

Замена текста с негативным отступом

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*/
}
/* this example fixes double left margin bug */

Удаляем скроллбар в текстовой области в IE

textarea {
	overflow:auto;
}

Изменяем стиль выделенного текста

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

Внедряем шрифты через Google Font API

Для использования шрифтов от Google Font API, сначала нужно добавить ссылку на удаленную таблицу стилей в секции .

/* <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 selector {
  font-family: 'Font Name', serif;
}*/
 
font-family: 'Tangerine', serif;

Решаем проблемы с высотой строк при использовании суперскрипт тега

sup, sub {
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
}
sub { top: 0.4em; }

Источник

Стилизуем ссылки по типу файлов

/* 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;
}

Крутые CSS3 media queries

/* 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 */
}
 
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
 
/* Large screens ----------- */
@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 */
}

Источник

6 комментариев к записи “Большая и нужная коллекция CSS сниппетов”

  1. Партнер

    Вау, спасибо за подборку, реально очень крутая и нужная! Особенно пригодился пуленепробиваемый фонт-фэйс, т.к. долго искал решение под ИЕ!

    Reply

  3. Ruslan

    Я тоже скажу спасибо и мне пригодилось, низкий уклон за такую подборку

    Reply

  5. gluck

    Уточнение к снипету «Специфичные правила для IE6, IE7, IE8 с помощью всего четырех символов» — к сожалению, свойство color : green\9; отлично понимает и ИЕ-9.

    Reply

Оставить комментарий

  • (не будет показан)