CSS

Хостинг с которым я работаю. Так что это даже как-бы не реклама

Хостинг unihost.com плюс домен бесплатно
Пользовательский поиск

Понравилось? Поделитесь с знакомыми и друзьями!

CSS scale
Нужно было сохранять внешний вид страницы на разных разрешениях экрана, то есть на разных устройствах. Если для блоков можно выставить позиционирование относительно родительского блока, то с размерами шрифта все хуже, они средствами css не масштабируютья. Можно как вариант использовать JS для этих целей, но можно и css обойтись. Нынче это не так уж сложно, достаточно использовать медиа-потоки и приближение. Например:

@media screen and (min-width: 400px) and (max-width: 600px) {
  body {
    zoom: .35 !important; /* Old IE only */
    -moz-transform: scale(0.35);
    -webkit-transform: scale(0.35);
    transform: scale(0.35);
  }

}
@media screen and (min-width: 600px) and (max-width: 800px) {
  body {
    zoom: 0.45 !important; /* Old IE only */
    -moz-transform: scale(0.45);
    -webkit-transform: scale(0.45);
    transform: scale(0.45);
  }
}

И так далее. Возможно есть варианты получше, но этот работает.

На просторах сети много чего можно найти. Толкового правда не всегда много, но есть. Вот попался мне видео-курс по кросс-браузерной верстке. 8 Частей. Длительные, но посмотреть стоит.

Под катом несколько видео.

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

Горизонтальное центрирование

Для цеентрирование элементов блока нужно установить ширину элемента, левый и правый margin установить в auto.

div#page {width: 960px; margin: 0 auto}

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

Если вам нужно вертикальное центрирование в блоке, высота которого фиксирована, проще всего установить высоту строки такой же как и высоту контейнера.
HTML:

<div id="container">Тест</div>

CSS:

Достаточно хорошее видео, описывающее основное на что стоит обращать внимание при создании концепции дизайна сайта. Есть чему поучиться. Жаль что собственно сайт взят коммерческий в принципе, для рассмотрения. Все же думаю разные правила для тех же сайтов-визиток, блогов, форумов, интернет-магазинов.

Под катом еще пара видео.

Чтобы сделать картинку на весь экран в фоне в CSS3 ввели новый атрибут "cover", он уже поддерживается большинством браузеров. Делается это так:

body {
background: url(images/mybg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}