Адаптивная вёрстка сайта
Адаптивный веб-дизайн – это такой вид дизайна сайта, который будет одинаково хорошо смотреться (восприниматься) на большинстве устройствах, для сёрфинга в интернете. Это телефоны, планшеты, ноутбуки и даже телевизоры.
Сейчас, сайтов с адаптивной вёрсткой становится все больше и всё чаще современные технологии требуют помимо кроссбраузерности сайта, ещё и адаптивность.
1. Масштабирование (вставка видео)
Пример создание разметки для вставки видео, чтобы оно масштабировалась в зависимости от разрешения экрана пользователя:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> iframe </title>
<style>
.video {
position:relative;
overflow:hidden;
height:0;
padding-bottom:54.15%;
}
.video iframe,
.video object,
.video embed {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
}
</style>
</head>
<body>
<div class="video">
<iframe src="http://player.vimeo.com/video/11252579" "frameborder="0"> </iframe>
</div>
</body>
</html>
Чтобы посмотреть на работоспособность кода на странице, вам надо либо изменять размер окна браузера, либо воспользоваться разрешением для Google Chrome, которое позволит вам просматривать сайт в разных разрешениях.
2. Минимальная и Максимальная ширина бокса
Параметр max‐width поможет нам определять ширину бокса, которая может быть максимальной. В примере ниже, ширина контейнера составляет 700px если это возможно, но не больше 80% от ширины.
<style>
.con{
width:700px;
max-width:80%;
}
</style>
Таким же образом происходит и масштабирование изображений:
<style>
img {
height:auto;
max-width:100%;
}
</style>
Чтобы изменять размер изображений в IE 8 версии, можно воспользоваться вот таким хаком:
<style>
@media \0screen {
img {width:auto;}
}
</style>
Так же ещё существует и значение min‐width, как вы уже наверно догадались, это противоположность свойству max‐width, она позволяет определить минимальную ширину для бокса.
3. Относительные значения
Во время адаптивной вёрстки, хорошим тоном для веб-дизайнера, будет использование относительных величин в максимуме свойств страницы. К тому же, можно очень сильно уменьшить код CSS, если использовать относительные значения для таких свойств как margin, padding, размер шрифта (font-size) и.т.п.
margin
Вот
так выглядят комментарии, при изменении
разрешения страницы с адаптивной
вёрсткой и без:
Размер
шрифта
Во время использования относительных
величин шрифта (em
или %),
по ним так же наследуются относительные
величины для межстрочного интервала и
отступов:
Padding
Тут
не буду вдаваться в долгие объяснения,
по скриншоту прекрасно видно, как хорошо
работают относительные значения
для padding в
адаптивной вёрстке сайта.
В CSS существует свойство, которое разрешает конструкции, переносить слова на новую строчку, иногда это очень сильно выручает, поэтому запишите этот код себе:
<style>
.word
{
word-wrap:break-word;
}
</style>
Добавление тени к тексту с помощью text-shadow
Помогает выделить текст из других. Отлично подходит для заголовков и важных цитат.
.text-shadow {text-shadow:2px 2px 4px #666;}
Пример рамки в виде графической картинки
Благодаря этому примеру вы можете создать любой вид рамки и использовать ее для различных объектов. Просто нарисуйте рамку на свой вкус и воспользуйтесь следующим примером css кода.
#border-image-style {border-width:15px;
-moz-border-image:url(border.png) 30 30 stretch ;
-webkit-border-image:url(border.png) 30 30 stretch;
}
Добавление тени к div или img с помощью box-shadow
Помогает выделить объект из общего фона страницы, придает эму эффект объема. На этот элемент пользователи первым делом обратят внимание.
box-shadow:0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow:0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow:0px 3px 3px rgba(0,0,0,0.2);
Закругленные углы
Добавляет закругленные углы к вашим CSS-3 элементам. Можно свободно менять радиус углов. И главное, никакой графики.
.round{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-khtml-border-radius: 10px; /* в браузере Konqueror */
}
Индивидуальное закругление угла рамки
Этот пример, позволяет закруглять определенный угол объекта. Ниже подан пример css кода для каждых из 4 углов.
#Bottom_Right {
height:65px;
width:160px;
-moz-border-radius-bottomright:50px;
border-bottom-right-radius:50px;
}
#Bottom_Left {
height:65px;
width:160px;
-moz-border-radius-bottomleft:50px;
border-bottom-left-radius:50px;
}
#Top_Right {
height:65px;
width:160px;
-moz-border-radius-topright:50px;
border-top-right-radius:50px;
}
#Top_Left {
height:65px;
width:160px;
-moz-border-radius-topleft:50px;
border-top-left-radius:50px;
}
Добавление градиента
При использовании CSS-3 вам больше не придется использовать градиенты в виде картинки. Просто укажите начальный и конечный цвет градиента, а этот пример кода, сделает все за вас.
background:-webkit-gradient (linear,left top,left bottom,from(#74b8d7),to(#437fbc));
background:-moz-linear-gradient(top,#74b8d7,#437fbc);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#74b8d7',endColorstr='#437fbc');
Добавление пробельных символов breaks
Этот css пример, будет добавлять разрывы, которые необходимы в случае печати страницы. Часто бывает, что у пользователя нету времени читать статью, он может прочитать ее в дороге, пользуясь печатью. А этот код, поможет не сойти с ума при чтении распечатанной статьи.
.page-break{page-break-before:always;}
Пример оформления цитаты на css
Еще один, немаловажный пример CSS кода. Он помогает стилизовать цитаты. Оформите красиво цитату с помощью следующего css кода.
.pull-quote {
width:200px;
float:right;
margin:5px;
font-family:Georgia,"Times New Roman", Times, serif;
font:italic bold #ff0000;
}
CSS выравнивание по горизонтали
Пример горизонтального выравнивания сайта на чистом CSS. Наверное, самый востребованный кусок кода.
.wrapper {
width:960px;
margin:auto;
}
Выравнивание текста по вертикале в div блоке на css
Выравнивает текст по вертикали, внутри определенного элемента.
.container {
min-height:10em;
display:table-cell;
vertical-align:middle;
}
Фиксация футера на CSS
Часто бывает, необходимо зафиксировать футер сайта. Предлагаем вам кроссбраузерный пример фиксации футера на чистом CSS коде.
#footer {
position:fixed;
left:0px;
bottom:0px;
height:32px;
width:100%;
background:#333;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
Картинка загрузки изображения на CSS
Замените скучные пустоты при загрузке картинок, на красивый графический прелоадер. И это чистый css, никакого js.
img {background: url(loader.gif) no−repeat 50% 50%;}
Замена h1 тега картинкой на CSS
В одной из статьей, мы уже раскрывали тему стилизации h1, h2 тегов. Этот пример подойдет для людей беспокоящихся за внешнюю красоту и за SEO эффективность своего сайта.
h1 {
text-indent:-9999px;
margin:0 auto;
width:400px;
height:100px;
background:transparent url("images/logo.jpg") no-repeat scroll;
}
Пример буквицы на CSS
Пример красивого оформления буквицы (первой буквы абзаца). Это с легкостью делается на CSS.
p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#000;
font-size:60px;
font-family:Georgia;
}
Кроссбраузерная прозрачность блока на CSS
Маленький код, который позволяет установить прозрачность блока, которая будет одинаково отображаться во всех браузерах.
.transparent {
filter:alpha(opacity=50);
-moz-opacity:.5;
-khtml-opacity:.5;
opacity:.5;
}
Example: <div class="box transparent">Your content</div>
Стилизация внешних ссылок + форматов mp3, pdf, email
Очень приятно видеть куда ведет ссылка. Этот CSS пример, позволит украсить разные типы ссылок, включая внешние ссылки, ссылки типа mailto: и ссылки на форматы файлов.
/*
внешние ссылки
В
^= указывает, что мы хотим соответствовать
ссылки, начинающиеся с http://
*/
a[href^="http://"]
{
padding-right:20px;
background:url(external.gif) no-repeat center right;
}
/*
сообщения
В
^= указывает, что мы хотим соответствовать
ссылки, начинающиеся с email:
*/
a[href^="mailto:"]
{
padding-right:20px;
background:url(email.png) no-repeat center right;
}
/*
PDF-файлы
В
$= указывает на то, что мы хотим
соответствовать одной hrefs которых
оканчиваются на ".PDF".
*/
a[href$=".pdf"]
{
padding-right:20px;
background:url(pdf.png) no-repeat center right;
}
/*
для файлов ZIP, и это добавляет значок в
правой части ссылке. Поэтому
:after
после
*/
a[href$=".zip"]:after{
content:url(icons/zip.png);
}
Растянуть фон (изображение) на CSS
Яркий пример того, как можно растянуть фоновую картинку с помощью CSS. Может и некрасиво выглядит, но все же, кому-то необходимо.
/* Только представьте себе, что image_1.png 200x400px */
#resize-image {
background:url(image_1.png) top left no-repeat;
-moz-background-size:100px 200px;
-o-background-size:100px 200px;
-webkit-background-size:100px 200px;
}
Текст в несколько столбцов на CSS
Интересный пример кода, который позволит вам реализовать деление текста на несколько столбцов. Это удобно для экономии места, при широкоформатном сайте. Отличное решение в плане веб дизайна.
#columns-3 {
text-align:justify;
-moz-column-count:3;
-moz-column-gap:12px;
-moz-column-rule:1px solid #c4c8cc;
-webkit-column-count:3;
-webkit-column-gap:12px;
-webkit-column-rule:1px solid #c4c8cc;
}
Пример rollover ссылки на CSS
Rollover ссылка – это ссылка, которая изменяет свой дизайн при наведении мыши. В данном примере этот эффект достигается с помощью CSS sprites (спрайтов). Должен сказать, это очень востребованное решение для ссылок меню и других важных элементов, требующих интерактивности.
a {
display:block;
background:url(sprite.png) no-repeat;
height:30px;
width:250px;
}
a:hover {
background-position:0 -30px;
}
Пример подключения шрифтов на CSS
Подключаем шрифты разных форматов, чтобы наверняка.
@font-face {
font-family:'MyFontFamily';
src:url('myfont-webfont.eot?') format('eot'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
Пример подключения google шрифтов на CSS
Не всегда есть под рукой нужные шрифты. Google API предоставляет возможность подключения самых разнообразных шрифтов. Для этого воспользуйтесь следующим css примером.
//
в head
<!--
Некоторые специальные шрифты -->
/*
Разовая загрузка шрифта*/
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Serif">
<link rel="stylesheet" type="text/css" href="http: //fonts.googleapis.com/css?family=Nobile|Droid+Serif|Old+Standard+TT|Droid+Sans"><!-- Некоторые специальные шрифты -->
// в css
body {
font-family:'Droid Serif',serif;
font-size:48px;
}
Отражение изображения на CSS
Эффект зеркального отражения на CSS.
img.flip {
-moz-transform:scaleX(-1);
-o-transform:scaleX(-1);
-webkit-transform:scaleX(-1);
transform:scaleX(-1);
filter:FlipH;
-ms-filter:"FlipH";
}
Поворот изображения на CSS
Еще один эффект, касающийся изображений, который поворачивает их. Смотрите, как это реализовать ниже.
/* firefox, safari, chrome, и все gecko/webkit браузеры */
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg)
/* ie */
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
/* opera */
-o-transform:rotate(30deg);
Установка размера области контента
Может быть вам и известный, но это самый востребованный кусок кода, который устанавливает размер области для контента.
#content {
width:100%;
margin:0;
float:none;
}
Список CSS хаков
Список CSS хаков, который позволяет обращаться к каждому из браузеров и устанавливать конкретные стили.
/* IE6 and below */
* html #uno { color:red }
/* IE7 */
*:first-child+html #dos { color:red }
/* IE7, FF, Saf, Opera */
html>body #tres { color:red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color:red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color:red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color:red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color:red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color:red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color:red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width:480px) {
#veintiseis { color:red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color:red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color:red }
/* Everything but IE6-8 */
:root *> #quince { color:red }
/* IE7 */
*+html #dieciocho { color:red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color:red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color:red }
/***** Хаки Атрибутов *****/
/* IE6 */
#once { _color:blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
/* IE8 */
#anotherone {color: blue\0/;} /* must go at the END of all rules */
Пример обнуления CSS стилей
Часто необходимо перед разработкой дизайна, обнулить прежние CSS стили, кто делал, тот знает. Смотрите пример обнуления CSS стилей.
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, font, 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 {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
ol, ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
/* помните, чтобы определить направленность стиля! */
:focus {
outline:0;
}
/* помните, чтобы выделить как-то вставить! */
ins {
text-decoration:none;
}
del {
text-decoration:line-through;
}
/* в таблице указать 'cellspacing="0"' в разметке */
table {
border-collapse:collapse;
border-spacing:0;
}
Обнуление цветов на CSS
Делает все тексты черными по умолчанию, а фон белым. Также устанавливает указанный цвет для всех ссылок. Другими словами, делается обнуление всех цветов текста и ссылок.
* {
color:black !important;
background-color:white !important;
background-image:none !important;
}
a:link {
font-weight:bold;
text-decoration:underline;
color:#06c;
}