Приветствую всех пользователей/посетителей блога gtalk.kz. Сегодня я хочу поделиться с вами полезным разделом, открытый мой – css snippets (css сниппеты).

В данном разделе я буду собирать интересные и полезные коды css и html.

Что такое сниппеты и зачем они нужны вы можете прочитать на той же странице. Добавляйте ее в закладки, подписывайтесь на обновления. Будем добавлять самое полезное и интересное. И не только просто код, а также описание и руководства к ним или туториалы (сейчас так модно руководства называть ).

Кстати, подобную статью я уже писал. Можете почитать ее  –  20 невероятно полезных css сниппетов (только сейчас будет раздел)

До скорых встреч. Надеюсь теперь появляться чаще.

з.ы. многие хорошие вещи будем брать тут (англ.)

Для загрузки на сайт нестандартных шрифтов, используйте следующий css сниппет:

@font-face {
font-family: 'MyFont';
src: url('webfont.eot'); /* IE9 */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Современные браузеры */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Для непосредственного использования:

.you_class {
font-family: 'MyFont', sans-serif;
}

Media

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

Пример использования:

<link rel="stylesheet" type="text/css" href="print.css" media="print">

Тип	Описание
all	Все типы. Это значение используется по умолчанию.
aural	Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
braille	Устройства, основанные на системе Брайля, которые предназначены для слепых людей.
handheld	Наладонные компьютеры и аналогичные им аппараты.
print	Печатающие устройства вроде принтера.
projection	Проектор.
screen	Экран монитора.
speech	Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда же входят речевые браузеры.
tv	Телевизор.
tty	Телетайпы, терминалы, портативные устройства с ограниченными возможностями экрана. Для них не должны использоваться пикселы в качестве единиц измерения.

Иногда необходимо сделать блок “прошитый” нитками. Это можно реализовать на css:

.you_class {
padding: 20px;
margin: 10px;
background: #ff0030;
color: #fff;
font-size: 21px;
font-weight: bold;
line-height: 1.3em;
border: 2px dashed #fff;
border-radius: 10px;
box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
text-shadow: -1px -1px #aa3030;
font-weight: normal;
}

Используйте свой class в html:

<div class="you_class">Тут пример текста</div>

Будет выглядеть вот так:

Можно посмотреть в действии здесь.

Для поддержки прозрачности используйте следующий css код:

.you_class {

/*для  IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/*для IE 5-7 */
filter: alpha(opacity=50);

/* для Netscape и FF */
-moz-opacity: 0.5;

/* для Safari 1.x */
-khtml-opacity: 0.5;

/* для современных браузеров */
opacity: 0.5;
}

Внимание! Данный css сниппет не валидный!

Приветствую вас на своем блоге. Сегодня подготовлена невероятно полезная статья из множества фрагментов 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:

Сегодня давайте разберемся с таким часто встречающимся термином сброс стилей для сайта. Думаю, Вы часто встречали такой файл как reset.css, либо в css что то подобное * {margin:0; padding:0; } (вспомните Урок 5. Блочная верстка сайта: css файл. ) Если Вы хотите заниматься версткой сайта, то думаю надо также разобраться что это и с чем его едят. А если не хотите заниматься версткой , то для понимая что к чему также будет полезно.

Давайте для начала рассмотрим пример без использования сброса стилей и со сбросом каскадный таблиц стилей. Увидели разницу?

Да, браузер для каждого html тега имеет стиль по умолчанию и что еще радостнее так они еще могут отличаться. Это с одной стороны плохо, потому как мы все знаем, что браузеры, как маленькие дети – за ними не уследишь, каждый имеет свои характер стили. Поэтому сбрасывая стиль, мы начинаем с чистого листа. Единственным минусом, наверное, дополнительный файл/строки в css файле, а значит увеличение размера.

Для того, чтобы начать работу с чистого листа, необходимо «обнулить» все стили по умолчанию, так? Ок, если Вы вспомните урок 5 по верстке сайтов, то вспомните как мы это делали, с помощью универсального кода:

* {
margin:0;
padding:0;
}

Есть? Отлично, теперь Вы понимаете для чего эта строчка там.

Давайте взглянем на нашу демо страницу с универсальным сбросом стилей сайта.

Заметили отличия? Совершенно верно мы сбросили только отступы, у таблиц осталась рамка, у заголовков стили font, а если углубляться то много еще чего. Но на первой демке был полный сброс, давайте теперь посмотрим как его сделать.

Reset.css

Плавно мы пришли к файлу reset.css. Самым популярным сбросом стилей для сайта (тот самый, что мы видели в примере) и одновременно наиболее полным является т. н. reset файл от Эрика Мейера. В статье CSS Tools: Reset CSS можете почитать о его достижении при создании данного кода:

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

Обычно данные стили выделяют в отдельный файл — reset.css. Зачем спросите Вы, для того чтобы по 100 раз не прописывать его на всех сайта, можно просто добавлять на разных проектах ссылку на данный файл:

<link href="http://site.kz/css/reset.css" rel="stylesheet" type="text/css" />

Согласитесь удобно. Но если у вас один блог/сайт, добавляйте в общий файл (style.css, template.css и т. д.), ничего страшного.

Еще одно общее условие для всех сбросов стилей — размещение в самом начале в стилях. Тут очевидная ситуация: для начала необходимо обнулить все стиле, а затем уже задавать тегам свои стили.

Css файл сканируется сверху вниз! Поэтому из 2-х одинаковых классов при равных условиях приоритетным будет тот, что находится ниже.

Мой файл reset.css

Смотря на файл от Эрика Мейера, Вам может в голову прийти такая мысль. У меня на сайт не используется и половина таких тегов, можно ли их не использовать? Сам Э. Майер говорит о том, что каждый может и должен его изменять под себя. Так что обязательно меняйте, модернизируйте экспериментируйте и пользуйтесь.

Если Вы не используете html 5, удалите данный блок /* HTML5 display-role reset for older browsers */ …. { display:block; }

Yahoo reset.css

Из вышеизложенного понятно, что каждый может изменять и использовать свой reset файл, например, имени самого себя

Вот поэтому и у Yahoo есть свое видение на данную тему.

Можно взглянуть на наш пример в стиле Yahoo и увидеть отличия, сравнить и возможно Вам понравится данный сброс стилей.

Подключиться к стилям Яхуу можно добавив данную строку:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">

Можно сохранить себе на хостинг.

Конечно, существуют и другие reset файлы, но напомню. Что самым часто используемым среди html верстальщиков является сброс стилей от Э. Майера, обычно, конечно, измененный. Для первых шагов, думаю, будет достаточно простого его использования, либо есть всегда универсальный метод.

Теперь в комментариях прошу поделиться своим опытом по использованию сброса стилей, каким Вы пользуетесь?

Надеюсь данная статья была вам полезна. Подписывайтесь на обновления Уроков по блочной верстке сайтов.

с/у УтБ

Постовой: coding4.net – разработка игр на XNA и Silverlight

На десерт сегодня трейлер к фильму “Социальная сеть 2″, что то мне кажется, что это очередное псевдопродолжение, а как Вы думаете?

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

Вопрос №1. Как центрировать сайт?

Если бы внимательно читали мои уроки по верстке, (продолжение обязательно будет) то вопрос сам бы собой отпал.

И так, создавай сайт мы создаем некий каркас. Обычно его называют #wrapper , #wrap и т. д. Блок идет обычно после тега body (тут все зависит от сложности сайта). В css файл прописываем ширину и внешние отступы:

#wrapper {
 width:1024px;
 margin:0px auto;
 }

Все ок. Ваш сайт будет центрирован.

Вопрос №2. Как зафиксировать фоновую картинку ?

Тут все проще чем кажется. Надо вначале определить блок, в который мы поместим наше изображение. Например, #main, а можно и в сам тег body. Css код выглядеть будет так:

 body {
 background: url(images/vasha_kartinkaa.jpg) fixed 0 0 no-repeat;
 }

Теперь фон будет стоять на месте, а контент прокручиваться.

Вопрос №3. Как уменьшить css файл?

Вопрос очень интересен. Что может сделать html верстальщик в таком случае? Писать проще и короче. Ведь чем меньше кода тем легче файл.
Можете посмотреть презентацию моих советов по html и css. Заменяйте и объединяйте селекторы, вместо:

.users {
 margin-top:5px;
 margin-bottom:10px;
 margin-right:0px;
 margin-left:0px;
 }

Лучше сделать так:

.users { margin:5px 0px 10px; }

Намного приятней удобней и короче, не так ли? Запомнить очень легко: сверху справа снизу слева, т. е. по часовой стрелке. Для свойства padding аналогично.

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

Все остальные вопросы можете также задавать в комментариях, либо отписаться мне. Не забываем кому я предоставляю бесплатные консультации.

Как я ранее говорил Вам необходимо получше изучать css и html и никаких сложностей не возникнет
Теперь маленький опрос:

с/у  УтБ

Постовой: Всем кто изучает Seo, облегчите себе жизнь, установите SEO плагин для FireFox

На десерт сегодня танцы первоклассника, не знаю как Вам, но я смеялся до слез

Приветствую пользователей блога gtalk.kz. Открываю новую серию статей-шпаргалок для эффективной верстки сайтов. Данные статьи можно смело добавлять в закладки, т. к. полезной информации будет оочень много (по крайней мере я надеюсь ). А также не забывайте поделиться с друзьями.

Сегодня я расскажу об 11 полезных сервисах, цель которых облегчить жизнь верстальщика. Думаю, Вам они понравятся, а в конце поста найдете ссылку на 38 (!) способов, как сделать закругление углов и еще пару ссылок на интересные статьи по теме.

Как всегда, сразу возьмем быка за рога и начнем

1. Csstemplater.com – сервис «Генератор html + css шаблонов» от Dimox’a и molodoy по праву должен быть упомянут первым в списке, так как полезность его огромна. Данный ресурс позволяет сделать заготовку будущего шаблона, выбрав определенные опции — вуаля html + css готово и при чем в дивах. Внимание! Особо полезен ленивым Не советую пользоваться часто новичкам, привыкнуть очень легко. Настроек немного (doctype, сайдбары, высота header’a и footer’a, resert на выбор и т. д.), но их вполне хватает на заготовку шаблона/каркаса.
   
2. Cssdesk.com – песочница для html + css. Пишите html разметку и css и смотрите как это будет выглядеть. Очень удобно, можно потренироваться с написанием кода для начинающих.
   
   
3. Генератор кросс-браузерных правил/стилей CSS 3  — используйте новые возможности Css 3, а данный ресурс Вам в этом поможет.
   Прокрутите вниз до класса matrix и можете настроить повороты под себя. 
4. Еще один генератор кросс-браузерных стилей Css 3, просто выбирайте необходимые настройки и смотрите пример. Можно делать в стиле 3D.
   
5. Ну, чтоб уже окончательно было понятно со стиля css 3 попробуйте поюзать сайт css3generator.com. Выберите стиль из выпадающего списка и пропишите параметры, скопируйте получившийся css код и радуйтесь
   
   
6. Ищете красивые кнопки для сайта? Зачем? Для этого существуют много сервисов. Например, cssbuttongenerator.com – самоназвание говорит за себя — Генератор css кнопок. Выбирайте настройки кнопки, ее будущий внешний вид и скачайте весь необходимый стиль.
7. А Вы знаете, как посчитать, сколько пикселей в em? А в пунктах? Не знаете?)) А верстальщику надо бы знать. Спасибо, pxtoem.gamecoll.com, который с легкостью посчитает, сколько пикселей в Ems, пунктах и т. д. Хороший конвертор.
8. Градиент, до эпохи ccs 3 верстальщикам снилось их простое использование :). Теперь это в прошлом, ведь благодаря такому ресурсу как www.colorzilla.com/gradient-editor можно с помощью css залить градиентом определенную область, а с хорошим знанием css можно и кнопку красивую написать ;). Интересно, что генерируется код не только в формате css, но и в SCSS.
   
9. Валидность сайта важная составляющая верстки. В курсе блочная верстка с нуля, я упоминал о важности соответствия стандартам кода. Поэтому сейчас просто даю ссылки на проверку html разметки validator.w3.org/  и проверка валидности css jigsaw.w3.org/css-validator
   
   
10. http://ft.vremenno.net/ – шрифтотренажер. Смотрим, как будет выглядеть тот или иной шрифт на вашем сайте, подбирайте шрифт удобный для глаз. Используются стандартные шрифты.
11. Мнемоника в html — также необходима при блочной верстки сайта, например, использование знака охраны авторского права и т. д. Подробнее можно почитать и взглянуть на википедии.

Не буду Вас томить по одному сервису. Если Вам интересно, Вы можете прочитать еще о дополнительных ресурсах (полезных не только для верстки) на хабрхабр
Корректное отображение стилей css 3 для IE – css3pie.com

Бонус: А также обещанный бонус 38 способов закругления углов, очень неплохая подборка. Не изобретайте велосипед, учитесь виртуозно кататься на нем

с/у УтБ

Сегодня мы вновь говорим об внутренней оптимизации сайта/блога. Данная статья является естественным продолжение уже раннее написанной шпаргалка настройки htaccess плюс еще несколько полезных советов. Сегодня мы сделаем свой Ваш сайт быстрее в загрузки с помощью нескольких несложных способов.