<![CDATA[Форум Kan-Studio — Комната веб-дизайнеров]> http://forum.kan-studio.ru/index.php Mon, 16 Jun 2014 19:32:56 +0000 Flazy 0.7 <![CDATA[Помогите с CSS-версткой]> http://forum.kan-studio.ru/viewtopic.php?id=1463&action=new Вот что-то не пойму я как выровнять 2 div-а по высоте! Ну бьюсь и бьюсь над ними.... весь интернет перелопатил, и Ваши шаблоны смотрел — не получается выровнять по высоте 2 div-а и хоть ты тресни! Может кто чего подскажет!???
Примеры кодов:
CSS

@charset "utf-8";
/* CSS Document */
body,td,th {
    font-family: georgia;
    font-size: 12px;
    color: #FAEBD7;
}
body {
    background-color: #8B4513;
    height:960px;
    vertical-align:top;
}
/*Page main ID*/
#page {
    width:960px;
    height:100%;
    margin:2px auto 2px;
}
#top {
    width:960px;
    padding:12px 0;
    background:#8B4513 url(/img/topImg.jpg);
}
#top h1 {
    font-size:24px;
    color:#FFFAF0;
    font-family:verdana;
    font-style:italic;
    text-shadow:  1px 1px 0px #333333;
    filter:dropshadow(color= 1px 1px 0px #333333);
}
#top h1 a {
    font-size:24px;
    color:#FFFAF0;
    font-family:verdana;
    font-style:italic;
    text-shadow:  1px 1px 0px #333333;
    filter:dropshadow(color= 1px 1px 0px #333333);
    margin-left:15px;
}
#header {
    background-color: #8B4513;
    width:960px;
    height:300px;
}
#leftCol {
    width:300px;
    background:#8B4513 url(/img/leftImg.jpg) no-repeat bottom center;
    padding: 0;
    height:100%;
    float:left;
    vertical-align:top;
}
#rightCol {
    margin-left:300px;
    padding: 0;
    background:#8B4513 url(/img/rightImg.jpg) no-repeat bottom center;
    width:660px;
    vertical-align:top;
    height:100%;
}
#footer {
    clear:both;
    padding:70px 0;
    font-size:10px;
    color:#8B4513;
    text-align:center;
    padding:60px 0;
    background:#8B4513 url(/img/footerImg.jpg) no-repeat center;
}
#footer a,a:hover {
    font-size:10px;
    color:#8B4513;
    text-decoration:underline;
}
***

HTML

<body>
<div id="page">
    <div id="top">
        <h1><a href="/">Ремонт под ключ в Днепропетровске</a></h1>
    </div>
    <div id="header">
        <div class="slideshow">
            <img src="/img/slide/img1.jpg" width="960" height="300">
            <img src="/img/slide/img2.jpg" width="960" height="300">
            <img src="/img/slide/img3.jpg" width="960" height="300">
        </div>
    </div>
    <div id="leftCol">
        <div class="leftColNameBox">
            <span>Навигация</span>
        </div>
        <div class="leftColContant">
            <ul>
                <li><a href="#">Ремонт квартиры</a></li>
                <li><a href="#">Ремонт ванной</a></li>
                <li><a href="#">Укладка паркета</a></li>
                <li><a href="#">Винтовая лестница</a></li>
                <li><a href="#">Гипсокартон</a></li>
                <li><a href="#">Балконы и лоджии</a></li>
                <li><a href="#">Окна и двери</a></li>
            </ul>
        </div>
        <div class="leftColNameBox">
            <span>Полезное</span>
        </div>
        <div class="leftColContant">
            <ul>
                <li><a href="#">Ссылка</a></li>
                <li><a href="#">Ссылка</a></li>
                <li><a href="#">Ссылка</a></li>
                <li><a href="#">Ссылка</a></li>
            </ul>
        </div>
    </div>
    <div id="rightCol">
        <div class="rightColNameBox"><span>Главная страница</span></div>
        <div class="rightColContant">
        <p></p>
        </div>
    </div>
    <div id="footer"><a href="/">© Company Name</a><br><a href="http://www.maxi-m.pp.ua" target="_blank">Maxi M Studio</a></div>
</div>
</body>
]>
Mon, 16 Jun 2014 19:32:56 +0000 http://forum.kan-studio.ru/viewtopic.php?id=1463&action=new
<![CDATA[Сервис скачивания css; CSS Loader]> http://forum.kan-studio.ru/viewtopic.php?id=1445&action=new За вечер набросал скрипт)
Думаю разработчикам полезен будет)
http://css-load.pp.ua/

Удобен для скачивания css. Указывается полная ссылка к ксс и на выходе получаем архив с структурой папок и картинок которые прописаны в данном css.

PS: Пишем мне о найденных багах и предложениях

]>
Fri, 18 Apr 2014 21:37:11 +0000 http://forum.kan-studio.ru/viewtopic.php?id=1445&action=new
<![CDATA[Праздничное оформление]> http://forum.kan-studio.ru/viewtopic.php?id=1411&action=new О новогодней панели уже говорилось ранее: http://forum.kan-studio.ru/viewtopic.php?id=1381
Огромное спасибо Dysha!

Сегодня обратил внимание на интересную реализацию новогоднего оформления на одном из популярных интернет-магазинов.
Очень обрадовало, что сама панель выполняет не только эстетические функции, но и содержит в себе пользовательские инструменты: сравнения, закладки, корзина и прочее.

До праздника остается совсем мало времени, делать сейчас рождественские фишки - уже поздно как-то. Но, быть может, код потребуется вам в дальнейшем: 23 февраля, 8 марта, день ВДВ или 300 лет Пушкину. Либо вы можете менять фон панели в зависимости от времени года.
ВНИМАНИЕ: изображение позаимствовал из источника, так что рисуем или находим иное! Код писал сам, им можете смело пользоваться.

Пример оформления (это и есть интернет-магазин, любые его наименования старался убрать, но если где-то что-то проскочило - прошу прощения):

Новогоднее оформление

1. Качаем изображение, кидаем его в соответствующую папку.
http://yadi.sk/d/jqYhFoCiF53FS

2. В шаблон перед (закрывающимся!) </body> вставляем блок:

<div class="fixed">
    <div class="wrapper">
        <p>Текст</p>
    </div>
</div>

Здесь имеется обертка (.wrapper), которая устанавливается согласно потребностям. В нашем случае данный блок будет ограничивать размер основного содержимого до 1200px и центрироваться по горизонтали. Параграф в коде (<p>) - частный пример; здесь может быть текст, ссылки, кнопки, формы и прочее. Кстати, сама панель будет зафиксирована в нижней части окна, находясь постоянно в зоне видимости. Если у вас будут встречаться какие-то неинформативные элементы, не требующие индексации (строка поиска, например), советую заключить их в теги noindex:

<!--noindex--><form></form><!--/noindex-->

3. В CSS-файл вашего шаблона пишем:

.wrapper { /* Обертка, скорее всего, у вас уже имеется; так что пользуйтесь своей */
margin: auto;
max-width: 1200px; /* Максимальная ширина основного содержимого */
}
.fixed {
background: url('../images/design/fixed.png') center repeat-x;
bottom: 0;
height: 40px; /* Значение указано для данного случая */
left: 0;
line-height: 40px; /* Значение указано для данного случая */
padding-top: 28px; /* Значение указано для данного случая */
position: fixed; /* При необходимости можно указывать absolute */
width: 100%;
z-index: 333; /* Настраиваем "под себя" */
}
.fixed p {
color: #fff; /* При необходимости можете использовать rgba */
font-family: arial, tahoma, helvetica, "helvetica cy", "nimbus sans l", sans-serif; /* Это правило указано у вас в body,
посему здесь не требуется, если только не желаете изменить семейство */
font-size: 15px; /* Возможно, захотите поменять размер шрифта */
margin: 0; /* На тот случай, если в генеральных стилях у вас указан отступ */
}

Все готово! Не забываем менять классы (ежель нужно), пути на свои и оптимизировать файлы. Тем, кто использует HTML5, говорить здесь ничего не буду об исправлениях, сами все понимают. Если возникают сложности с установкой блока, кидайте ссылку на ваш сайт, пожалуйста.

При работе с адаптимными макетами для реализации position: fixed используйте мета-теги, медиа-запросы и JQuery.

P.S.: Если .fixed вместо bottom: 0 указать top: 0, сама панель будет расположена сверху. При это отразите картинку по вертикали в графическом редакторе (можно и через CSS, но зачем?). Если ваша панель будет располагаться с верху, то рекомендую также прикрутить горизонтальный параллакс (хотя здесь все индивидуально).

]>
Fri, 27 Dec 2013 16:04:10 +0000 http://forum.kan-studio.ru/viewtopic.php?id=1411&action=new
<![CDATA[Полноэкранное изображение]> http://forum.kan-studio.ru/viewtopic.php?id=1410&action=new Иной раз у разработчиков появляется необходимость в размещении полноэкранного изображения. В особенности это касается при работе с визитками и портфолио. Пример, хоть и неудачный, прилагаю. Это еще сырой набросок, выполненный пока в графическом редакторе. Фото - не мое, нашел в сети чисто для демонстрации. )

Kan-studio-pdf

Осуществить подобное, если особо сейчас не вдумываться, можно двумя путями: чисто CSS и JQuery.


1-ый способ - CSS

Вставляем в шаблон блок:

<div class="home">
    ...
</div>

Пишем в CSS-файле:

html, body {
height: 100%;
}
.home {
background: url('../images/content/home.jpg') center no-repeat fixed; /* fixed можно убрать, но сперва протестируйте с ним;
используя некоторые слайдеры, fixed может вообще нарушить вывод рисунка */
height: 100%;
position: relative;
width: 100%;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}

2-ой способ - JQuery

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

 $(document).ready(
    function(){
        $(window).resize(function(){
            var height = $(window).height();
            $('.home').css({
                'height':height
            });
        }).resize();
    }
);

Этот код можно вписать внутри тегов <script type="text/javascript"></script> в <head>, либо (что предпочтительнее!) сохранить в отдельном файле с расширением js и подключить все это дело к шаблону (мелкие скрипты рекомендую писать в одном файле):

<head>
    <script type="text/javascript" src="js/scripts.js"></script>
</head>

И в стилях тогда прописываем:

.home {
background: url('../images/content/home.jpg') center no-repeat fixed; /* То же самое */
position: relative;
width: 100%;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}

Не забываем подключать библиотеку JQuery и указывать собственные пути к файлам.


P.S.

Используя те же методы, можно добиться от любого слайдера, любой карусели (пусть даже самой простой) грамотного показа картинок во весь экран: дисплей мобильника или телик с SmartTV - неважно. Если же все-таки подобные вопросы возникнут, могу рассказать, как реализовать полномасштабный слайдер на примере простого плагина в отдельном топике.

Надеюсь, описанные решения вам помогут.

]>
Fri, 27 Dec 2013 04:18:55 +0000 http://forum.kan-studio.ru/viewtopic.php?id=1410&action=new
<![CDATA[Основные тенденции веб-дизайна]> http://forum.kan-studio.ru/viewtopic.php?id=1338&action=new Добрый день!

Вчера вновь просматривал раздел «Оцените…» настоящего форума, где пользователи выкладывают собственные разработки на базе хорошо известной нам системы управления. Признаюсь честно, несколько обидно видеть проекты, чей внешний вид, скажем так, основан на тех идеях, что были популярны лет 10 назад.

Что ж, господа веб-мастеры, время идет, меняется мир, меняются законы Паутины. Люди стали часто использовать переносные устройства для входа в мировую Сеть; теперь они более ценят информацию и «чистоплотность» ресурса.

В данной теме хотелось бы обсудить с вами основные тенденции веб-дизайна. Ибо знание тегов, атрибутов, префиксов и прочего – одно, но их визуальное представление – дело другое.


МИНИМАЛИЗМ.

Среди непосвященных или, может быть, необразованных (ведь минимализм присущ если не всем, то большей части видов искусств) людей бытует мнение, что минимализм - удел ленивых. Слова Бриджита Фаррелла, известного дизайнера и художника, наилучшим образом отражают суть вопроса: «…минимализм будет королем. Многие текстурные тяжелые конструкции уступят место простым дизайнам. Скевоморфизм (копирование облика реальных предметов и устройств) будет вымирать и лаконичный дизайн займет свое место. Год будет полон высокими нижними колонтитулами, смелыми цветами, богатыми и тонкими градиентами и острыми краями. Меньше вдохновения от Apple и больше от Google».

Отказ от излишней графики и анимации в пользу информативности – это и есть минимализм, благодаря которому ресурс становится более элегантным. Простота элементов, их монотонность в совокупности с эффектами, построенными на CSS3 и JQuery, делают дизайн более продуманным, а сам сайт более функциональным.

Вы можете назвать меня глупым, но впервые высказывание Леонардо да Винчи о красоте в целом я услышал из уст персонажа фильма «9 рота»: «Красота - это когда нет ничего лишнего». То же применимо и к веб-дизайну. Здесь эстетика достигается размещением наименьшего количества элементов, каждый из которых играет конкретную роль, определяемую, так называемым, «пустым пространством» вокруг.

Признаюсь, я не теоретик. В этой теме я лишь предоставляю свою точку зрения, и, на мой взгляд, следует разделять минимализм классический и flat-минимализм. Думаю, значение первого типа не вызывает вопросов (в обратном случае разницу поймете сами), но на втором - хотелось бы остановиться подробнее.

Flat-дизайн (или плоский дизайн) - особое направление, смысл которого заключается в отбросе дополнительных настроек, задаваемых через CSS или (по старинке) изображениями: тени, градиенты, различные узоры и рельефы. Здесь цветовая палитра имеет более яркое и смелое решения. Огромное значение уделяется кнопкам и иконкам, использующие в своей структуре простые двухмерные геометрические фигуры и ориентированные в большей степени на пользователей мобильных устройств. (Об особенностях разработки мобильных версий и адаптивных сайтов поговорим позже.) Используемые в flat-минимализме шрифты имеют простое (чаще всего, тонкое - font-weight: 300) начертание без засечек (sans-serif).


АДАПТИВНЫЙ ДИЗАЙН.

Как говорил ранее, все большее количество пользователей выходит в Интернет через мобильные устройства. Ранее было принято в пределах большого проекта использовать отдельную мобильную версию портала. Теперь эта мысль постепенно уходит в забвенье: новые технологии позволяют нам создавать 2 в 1 вне зависимости от масштаба ресурса. Адаптивный макет возможно сверстать как на чистом CSS, используя @media, так и на JQuery (любимый плагин адаптивного слайдера - «ResponsiveSlides»: http://responsiveslides.com).

Давайте теперь раскроем суть @media. Согласно одному из электронных справочников (http://htmlbook.ru/css/media), @media есть правило CSS2-CSS3, позволяющее «указать тип носителя, для которого будет применяться указанный стиль». Далее приводится таблица с типами устройств и их описанием. Например: «print - печатающие устройства вроде принтера» или «projection - проектор». При составлении адаптивного макета я рекомендую пользоваться следующим ниже кодом, где первоначально мы задаем тип носителя, затем минимальные и максимальные размеры устройства, после - собственно стили.

/* Смартфоны (портретный и ландшафтный режимы) */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
/* Здесь задаем стили для браузеров, чья минимальная ширина - 320px, максимальная - 480px. Далее - по аналогии. */
}
/* Смартфоны (ландшафтный режим) */
@media only screen
and (min-width: 321px) {
/* Стили */
}
/* Смартфоны (портретный режим) */
@media only screen
and (max-width: 320px) {
/* Стили */
}
/* Планшеты (портретный и ландшафтный режимы) */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
/* Стили */
}
/* Планшеты (ландшафтный режим) */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape) {
/* Стили */
}
/* Планшеты (портретный режим) */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait) {
/* Стили */
}
/* Ноутбуки и ПК */
@media only screen
and (min-width: 1224px) {
/* Стили. Обратите внимание на задаваемое правило! */
}
/* Большие дисплеи */
@media only screen
and (min-width: 1824px) {
/* Стили */
}

Для плавного перехода от одних стилей к другим используйте универсальное свойство transition (не забудьте о префиксах: -moz, -o, -webkit), о котором подробно мы поговорим в отдельном пункте. О назначениях префиксов напишу в другой теме форума - «Кроссбраузерность». Синтаксис transition:

-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;

ФИКСИРОВАННАЯ ШАПКА.

Порой разработчики неоправданно используют сайдбар, где, якобы для удобства, дублируют главное меню или выводят список подкатегорий. Действительно грамотным решением мне представляется фиксация панели управления (в данном случае) с выпадающими пунктами. Используйте position: fixed в своих проектах! Возможно, кто-то скажет, что при таком раскладе горизонтальная прокрутка блока невозможна, но мы-то теперь знаем о @media (см. выше).

Прикрепить панель навигации совершенно просто, используя давно известное свойство:

.navigation {
left: 0;
position: fixed;
top: 0;
width: 100%;
}

Очень часто фиксированные блоки отделяют от прочего тенью (см. «CSS-сниппеты»: http://forum.kan-studio.ru/viewtopic.php?id=1344) или границами (border). Изменить стили слоя при вертикальном скроллинге возможно с помощью плагина «jQuery Waypoints». Ознакомьтесь с ним.


ИЗОБРАЖЕНИЯ.

Сегодня все чаще вижу превью необычной формы. Если раньше в основном использовался прямоугольник, то теперь в кейсах веб-дизайнеров наблюдаю миниатюры в виде окружности, пятиугольника, ромба, сердца и прочего. Также отмечу и наличие превьюшек по размеру мобильных экранов: 320px на 450px, выделенных полупрозрачной тенью или «обрамленных» переносными устройствами (имеется в виду изображения, где скриншот страницы вставляется в образ смартфона или планшетника; в последнем случае размеры миниатюры, естественно, варьируются).

С вашего позволения набросал код нескольких фигур, при этом для простоты освоения использовал слой:

<!-- Окружность -->
<div class="circle"></div>
<!-- Эллипс -->
<div class="ellipse"></div>
<!-- Треугольник -->
<div class="triangle"></div>
<!-- Пятиугольник -->
<div class="pentagon"></div>
<!-- Шестиугольник -->
<div class="hexagon"></div>
<!-- Восьмиугольник -->
<div class="octagon"></div>
<!-- Сердце -->
<div class="heart"></div>
<style type="text/css">
div {
background: green;
position: relative;
margin: 100px auto;
}
div:before, div:after {
content: "";
display: block;
height: 0;
position: absolute;
width: 0;
}
.circle {
height: 120px;
width: 120px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.ellipse {
height: 120px;
width: 220px;
-moz-border-radius: 50% 50%;
-webkit-border-radius: 50% 50%;
border-radius: 50% 50%;
}
.triangle {
background: transparent;
border: 60px transparent solid;
border-bottom: 120px green solid;
border-top: 0;
height: 0;
width: 0;
}
.pentagon {
background: transparent;
border-color: green transparent;
border-style: solid;
border-width: 56px 20px 0;
width: 60px;
}
.pentagon:before {
border-color: transparent transparent green;
border-style: solid;
border-width: 0 50px 41px;
bottom: 56px;
left: -20px;
}
.hexagon {
height: 75px;
width: 120px;
}
.hexagon:before {
border: 60px transparent solid;
border-bottom: 35px green solid;
border-top: 0;
left: 0;
top: -35px;
}
.hexagon:after {
border: 60px transparent solid;
border-bottom: 0;
border-top: 35px green solid;
bottom: -35px;
left: 0;
}
.octagon {
height: 120px;
width: 120px;
}
.octagon:before {
border: 30px #fff solid;
border-bottom: 30px green solid;
border-top: 0;
left: 0;
top: 0;
width: 60px;
}
.octagon:after {
bottom: 0;
left: 0;
border: 30px #fff solid;
border-bottom: 0;
border-top: 30px green solid;
width: 60px;
}
.heart {
background: transparent;
height: 90px;
width: 100px;
}
.heart:before, .heart:after {
background: green;
height: 80px;
left: 50px;
top: 0;
width: 50px;
-moz-border-radius: 50px 50px 0 0;
-webkit-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.heart:after {
left: 0;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
</style>

Отдельный параграф хотелось бы посвятить фоновым изображениям, внедряемым, главным образом, с целью привлечения внимания к собственной персоне или выполненным работам. Верно подобранное решение также повысит и эстетическую ценность проекта. Сегодня у нас есть очень удобный инструмент, позволяющий воплотить подобный эффект - свойство background-size, расположенное в спецификациях CSS3. Однако данный метод имеет свои минусы, связанные с кроссбраузерным представлением ресурса (подводит IE8). Тем не менее, опишу синтаксис ознаменованного свойства:

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

Здесь же укажем и полноэкранные слайдеры с использованием JQuery, преследующие те же цели, что и фоновое изображение. В Сети можно найти много готовых плагинов, одним из которых является «Supersized» (http://buildinternet.com/project/supersized). Он прост в установке и удобен в настройках. В принципе, возможно преобразовать абсолютно любой слайдер или карусель в полномасштабную, используя уже известное свойство background-size:

И раз уж заговорили о фоне, в качестве некоторого заключения, представим еще один тренд - использование текстур, чаще всего зернистые или дерева.


ТИПОГРАФИКА.

Нет ничего важнее на сайте, чем текст. Это источник основной информации, это связка страниц между собой, это базовый инструмент для продвижения сайта. Использование крупных заголовков с заглавными символами, теней, внедренных шрифтов (рекомендую ознакомиться с Google Fonts: http://www.google.com/fonts), символьных шрифтов – все это делает подачу материалов более привлекательным.

Установить нестандартный шрифт на страницы собственного сайта также представляется возможным с помощью правила @font-face, внутри которого задаются такие параметры, как наименование шрифта, ссылки на файлы, размер, начертание и прочее. Синтаксис @font-face:

@font-face {
font-family: 'arial';
src: url('../fonts/arial.eot?#iefix') format('embedded-opentype'),
url('../fonts/arial.woff') format('woff'),
url('../fonts/arial.ttf') format('truetype'),
url('../fonts/arial.svg#svgArial') format('svg');
}

Далее для необходимых элементов задаем семейство шрифта:

h1 {font-family: arial, helvetica, sans-serif;}

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

]>
Tue, 05 Nov 2013 18:24:43 +0000 http://forum.kan-studio.ru/viewtopic.php?id=1338&action=new
<![CDATA[CSS-сниппеты]> http://forum.kan-studio.ru/viewtopic.php?id=1344&action=new СБРОС СТИЛЕЙ.

Последняя версия reset.css от Эрика Майера. Код записывается в отдельный файл и устанавливается перед остальными. При необходимости можете удалить «лишние» теги. Дополнительно ознакомьтесь с normalize.css.

a, abbr, acronym, address, applet, article, aside, audio, b, blockquote, big, body, canvas, caption, center, cite, code, del, details, dfn, div, dl, dt, dd, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
border: 0;
font: inherit;
font-size: 100%;
margin: 0;
padding: 0;
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;
}

КОНСТРУКЦИЯ HTML5.

<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/styles.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
</body>
</html>

МЕТА-ТЕГИ ПРИ АДАПТИВНОЙ ВЕРСТКЕ.

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

СТИЛИ ДЛЯ АДАПТИВНОГО САЙТА.

/* Смартфоны (портретный и ландшафтный режимы) */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
/* Здесь задаем стили для браузеров, чья минимальная ширина - 320px, максимальная - 480px. Далее - по аналогии. */
}
/* Смартфоны (ландшафтный режим) */
@media only screen
and (min-width: 321px) {
/* Стили */
}
/* Смартфоны (портретный режим) */
@media only screen
and (max-width: 320px) {
/* Стили */
}
/* Планшеты (портретный и ландшафтный режимы) */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
/* Стили */
}
/* Планшеты (ландшафтный режим) */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape) {
/* Стили */
}
/* Планшеты (портретный режим) */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait) {
/* Стили */
}
/* Ноутбуки и ПК */
@media only screen
and (min-width: 1224px) {
/* Стили. Обратите внимание на задаваемое правило! */
}
/* Большие дисплеи */
@media only screen
and (min-width: 1824px) {
/* Стили */
}

КРОССБРАУЗЕРНЫЕ МИНИМАЛЬНЫЕ И МАКСИМАЛЬНЫЕ РАЗМЕРЫ.

height: auto!important;
height: 300px;
min-height: 300px;
height: auto!important;
height: 300px;
max-height: 300px;
width: auto!important;
width: 300px;
min-width: 300px;
width: auto!important;
width: 300px;
max-width: 300px;

ВЕРТИКАЛЬНОЕ ВЫРАВНИВАНИЕ ПО ЦЕНТРУ.

display: table-cell;
min-height: 10em;
vertical-align: middle;
/* или */
height: 100px;
line-height: 100px;
/* или */
height: 100px;
left: 50%;
margin: -50px 0 0 -60px;
position: absolute;
top: 50%;
width: 120px;

ЗАКРУГЛЕНИЕ УГЛОВ ЭЛЕМЕНТА.

Вы можете указать конкретный угол, например, border-top-left-radius (не забываем о префиксах). В ряде случаев предпочтительно использовать процентные значения скруглений.

-moz-border-radius: 10px 20px 15px 6px;
-webkit-border-radius: 10px 20px 15px 6px;
border-radius: 10px 20px 15px 6px;

ГРАДИЕНТНЫЙ ФОН БЛОКА.

background: #fff;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#000');
background-image: -moz-linear-gradient(top, #fff, #000);
background-image: -ms-linear-gradient(top, #fff, #000);
background-image: -o-linear-gradient(top, #fff, #000);
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));
background-image: -webkit-linear-gradient(top, #fff, #000);
background-image: linear-gradient(top, #fff, #000);

ТЕКСТ С ГРАДИЕНТОМ.

background: #fff;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#333');
background-image: -moz-linear-gradient(#eee, #333);
background-image: -ms-linear-gradient(#eee, #333);
background-image: -o-linear-gradient(#eee, #333);
background-image: -webkit-linear-gradient(#eee, #333);
background-image: linear-gradient(#eee, #333);
color: transparent;
font-size: 120px;
font-weight: bold;
line-height: 100%;
position: relative;
-moz-background-clip: text;
-webkit-background-clip: text;
background-clip: text;

ПРОЗРАЧНОСТЬ ЭЛЕМЕНТА.

filter: alpha(opacity=50);
-moz-opacity: .5;
opacity: .5;

ПОЛУПРОЗРАЧНЫЙ ФОН.

background: #000;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#50000000,endColorstr=#50000000);
background: rgba(0, 0, 0, .5);
zoom: 1;

ФОНОВОЕ ИЗОБРАЖЕНИЕ ВО ВЕСЬ БЛОК.

background: url('../images/design/body.jpg') center no-repeat;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;

ПЛАВНОЕ ИЗМЕНЕНИЕ ЦВЕТА ССЫЛОК ПРИ НАВЕДЕНИИ.

Transition применяется не только к параметру цвета шрифта, а также устанавливает временную задержу смены цвета фона блока (transition: background .5s ease-in-out;) и многое другое. Возможно указать несколько параметров единовременно: либо transition: all .5s ease-in-out, либо transition: height .5s ease, top .3s ease-in-out.

a {
color: #298ecc;
-moz-transition: color .5s ease-in-out;
-o-transition: color .5s ease-in-out;
-webkit-transition: color .5s ease-in-out;
transition: color .5s ease-in-out;
}
a:hover {
color: #c00;
}

ВСТАВКА СОБСТВЕННЫХ ШРИФТОВ.

@font-face {
font-family: 'arial';
src: url('../fonts/arial.eot?#iefix') format('embedded-opentype'),
url('../fonts/arial.woff') format('woff'),
url('../fonts/arial.ttf') format('truetype'),
url('../fonts/arial.svg#svgArial') format('svg');
}
h1 {font-family: arial, helvetica, sans-serif;}

ПОЛУПРОЗРАЧНАЯ ТЕНЬ ТЕКСТА.

К слову, экспериментируя с параметрами тени (смещение, размытие, цвет), возможно добиться различных эффектов, как то: вдавленный текст, выпуклый текст, неоновый текст и другое. Указанные эффекты не публикую, так как все они настраиваются отдельно под сайт.

text-shadow: 1px 2px 3px rgba(0, 0, 0, .5);

ТЕНЬ ДЛЯ БЛОКА.

-moz-box-shadow: 0 2px 10px #ccc;
-webkit-box-shadow: 0 2px 10px #ccc;
box-shadow: 0 2px 10px #ccc;

ЭФФЕКТ ДВОЙНОЙ РАМКИ.

-moz-box-shadow: 0 0 0 2px #000, 0 0 0 3px #999, 0 0 0 9px #fa0, 0 0 0 10px #666, 0 0 0 16px #fd0, 0 0 0 18px #000;
-webkit-box-shadow: 0 0 0 2px #000, 0 0 0 3px #999, 0 0 0 9px #fa0, 0 0 0 10px #666, 0 0 0 16px #fd0, 0 0 0 18px #000;
box-shadow: 0 0 0 2px #000, 0 0 0 3px #999, 0 0 0 9px #fa0, 0 0 0 10px #666, 0 0 0 16px #fd0, 0 0 0 18px #000;

ГОРИЗОНТАЛЬНЫЙ СПИСОК.

ul {
margin: 0;
list-style: none;
padding: 0;
}
ul li {
display: inline-block;
margin-left: 10px;
}
ul li:first-child {
margin-left: 0
}

ФАВИКОН.

<link rel="shortcut icon" href="images/icon/favicon.ico">
<link rel="apple-touch-icon" href="images/icon/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="57x57" href="images/icon/apple-touch-icon-57x57-precomposed.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/icon/apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/icon/apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="images/icon/apple-touch-icon-precomposed.png">

ПИКТОГРАММА WINDOWS 8

<meta name="msapplication-tooltip" content="Всплывающая подсказка" />
<meta name="msapplication-TileColor" content="#298ecc" /> 
<meta name="msapplication-TileImage" content="images/icon/application.png" />

ПОДГОТОВКА СТРАНИЦЫ К ПЕЧАТИ.

@media print {
* {
background: none!important;
color: black!important;
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
box-shadow: none!important;
text-shadow: none!important;
filter: gray();
filter: url('desaturate.svg#grayscale');
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
a {
text-decoration: underline;
}
a[href]:after {
content: "(" attr(href) ")";
}
a[href="#"], a[href="javascript:"] {
content: "";
}
}
]>
Thu, 31 Oct 2013 14:16:10 +0000 http://forum.kan-studio.ru/viewtopic.php?id=1344&action=new