Как изменить или отключить чекбокс — Сохранить моё имя, email и адрес сайта в этом браузере для последующих моих комментариев

В связи с тем, что сейчас все больше и больше стран принимает законы об обработке персональных данных, то как и в других системах управления сайта, так и WordPress появляются изменения, чтобы не нарушать дынные законы. Чекбокс о запросе сохранения имя и email, как раз таки, одно из таких изменений. Он работает по следующему принципу - когда посетитель сайта активирует чекбокс и дает свое согласие на хранение своих данных в браузере, в следующий раз, когда он будет находится на страницах того сайта где он его активировал, его персональные данные - имя и email автоматически заполнятся в полях.

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

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

Перед изменением function.php, обязательно сохраните его копию, чтобы в дальнейшем, в случаи ошибки, вернуть все как было. Так же, можете использовать дочернюю тему.

/* ОТКЛЮЧАЕМ ЧЕКБОКС */
function comment_hide_checkcdpr( $fields ) {
    unset( $fields['cookies'] );
    return $fields;
}
add_filter( 'comment_form_default_fields', 'comment_hide_checkcdpr' );

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

/* МЕНЯЕТ ТЕКСТ ЧЕКБОКСА */
function comment_change_checkcdpr( $fields ) {
    $fields['cookies'] = '<p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" />' .
    '<label for="wp-comment-cookies-consent">Сохранить имя и email.</label></p>';
    return $fields;
}
add_filter( 'comment_form_default_fields', 'comment_change_checkcdpr' );

В 2 и 3 строке сам чекбокс и label к нему. Как раз содержимое label, вам и нужно менять. В данном примере стандартная надпись заменена на Сохранить имя и email. Кстати, данный код можно добавить на сайт, если у вас нет чекбокса и вы хотите его иметь.

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

/* МЕНЯЕТ ТЕКСТ ЧЕКБОКСА И ДЕЛАЕМ ЧЕКБОКС АКТИВНЫМ, ЕСЛИ РАНЕЕ СОХРАНЯЛИСЬ ДАННЫЕ */
function comment_change_checkcdpr( $fields ){
    $user_ca = wp_get_current_commenter();
    $checked = empty( $user_ca['comment_author_email'] ) ? '' : ' checked="checked"';
    $fields['cookies'] = '<p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"' . $checked . ' />' .
    '<label for="wp-comment-cookies-consent">Сохранить имя и email.</label></p>';
    return $fields;
}
add_filter( 'comment_form_default_fields', 'comment_change_checkcdpr' );

Давайте рассмотрим, какие изменения добавлены в этой версии функции.

Во второй строке создаем переменную $user_ca и задаем ей значение - wp_get_current_commenter() .wp_get_current_commenter() - это функция, которая получает имя, почту, URL сайта текущего комментатора из куков.
В третей строке создаем еще одну переменную - $checked и ее значение, это проверка сохраненные ли у данного комментатора в браузере имя и почта к вашему сайту. Если это так, то чекбоксу прописывается параметр checked="checked". То бишь, комментатору который уже давал согласие, не нужно вновь отмечать чекбокс.
Последнее, это выводим нашу переменную $checked в 4 строке в параметрах самого чекбокса.
Вот и весь материал. Он простенький и справляется с задачей. Теперь вы сможете загружать менять или отключать данный чекбокс с проверкой на сохранение персональных данных. Надеюсь, данный материал помог вам.

PHP - закругление углов у картинки

Давно было интересно как можно в PHP сделать с картинкой что-нибудь такое как указано в заголовке, а тут ещё и задание соответствующее попалось.

Для выполнения задания необходимо было обойтись по возможности штатными средствами PHP, потому что установка чего-то дополнительного — это отдельный процесс. Поэтому я стал искать решения в модуле GD.

Если вам, также как и мне, интересно что значит «GD», то вот ответ:

В GD 1.0, это означало «gif draw». После того как Unisys запатентовало алгоритм LZW сжатия, используемый в GIF и поддержка GIF была убрана, аббревиатура оффицально ничего не обознает, поэтому пусть просто будет «graphics draw» и всё. (поддержка GIF возвращена, благодаря тому что срок действия патента истёк, но GD может гораздо больше чем создание GIF)

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

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

Поэтому последовательность действий у меня следующая:

на временной картинке рисую те части, которые должны стать прозрачными в результате;

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

imagesavealpha($img_res, true);

, а вот наличие альфа канала у временного изображения не важно (я использовал true color, потому что в этом случае на один вызов функции imagecolortransparent() меньше).

Решение:

class ImgUtils
{
    public static function imageToRes($img_file)
    {
        $img_res = false;
 
        list($tmp, $tmp, $type) = getimagesize($img_file);
 
        switch ($type)
        {
            case 2: // JPEG
 
                $img_res = imagecreatefromjpeg($img_file);
                break;
 
            case 1: // GIF
 
                $img_res = imagecreatefromgif($img_file);
                break;
 
            case 3: // PNG
 
                $img_res = imagecreatefrompng($img_file);
                break;
        }
 
        return $img_res;
    }
 
 
    public static function roundedCorners($img_res, $radius)
    {
        $width  = imagesx($img_res);
        $height = imagesy($img_res);
 
        imagesavealpha($img_res, true);
 
        // corners START
        $img_tmp = imagecreate($width, $height);
 
        $black  = imagecolorallocate($img_tmp, 0, 0, 0);
        $transp = imagecolorallocatealpha($img_tmp,
                                            0, 0, 0, 127);
 
        imagefill($img_tmp, $width / 2, $height / 2, $transp);
 
        // left upper
        imagearc($img_tmp,  $radius / 2 - 1,
                            $radius / 2 - 1,
                            $radius,
                            $radius, 180, 270, $black);
        imagefill($img_tmp, 0, 0, $black);
        // right upper
        imagearc($img_tmp,  $width - $radius / 2,
                            $radius / 2 - 1,
                            $radius,
                            $radius, 270, 0, $black);
        imagefill($img_tmp, $width - 1, 0, $black);
        // right lower
        imagearc($img_tmp,  $width - $radius / 2,
                            $height - $radius / 2,
                            $radius,
                            $radius, 0, 90, $black);
        imagefill($img_tmp, $width - 1, $height - 1, $black);
        // left lower
        imagearc($img_tmp,  $radius / 2 - 1,
                            $height - $radius / 2,
                            $radius,
                            $radius, 90, 180, $black);
        imagefill($img_tmp, 0, $height - 1, $black);
 
        // corners END
 
        imagecopyresampled($img_res, $img_tmp,
                            0, 0, 0, 0,
                            $width, $height, $width, $height);
 
        $transp = imagecolorallocatealpha($img_res,
                                            0, 0, 0, 127);
        imagefill($img_res, 0, 0, $transp);
        imagefill($img_res, $width - 1, 0, $transp);
        imagefill($img_res, $width - 1, $height - 1, $transp);
        imagefill($img_res, 0, $height - 1, $transp);
 
        imagedestroy($img_tmp);
 
        return $img_res;
    }
}

Изначально я пытался нарисовать «уголки» на временном изображении при помощи одного прямоугольника и одного эллипса наложенного поверх. Оказалось что в таких условиях трудно контролировать радиус углов — тогда я стал рисовать на каждый угол по своей окружности.

Дизайн по аналогии

Часто клиент может выразить свои пожелания, только сравнивая желаемый ресурс с уже существующими. Это может касаться как самой концепции ресурса – В«MySpace, но для сектора B2BВ», так и некоторых деталей – В«Логин должен быть таким же как на GmailВ».

Это свойственно не только дизайну, если человек не очень хорошо знает язык, на котором говорит, то вместо прямого указания на предмет, можно услышать причудливые и многословные описания. В спецификациях составленных клиентами часто можно встретить забавные описания, когда они хотят сказать В«база данных зарегистрированных пользователей с отчетами X, Y и ZВ» или В«JavaScript меню, которое деградирует в отформатированные с помощью CSS спискиВ».

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

Зачем мириться с дизайном на основе аналогий?
Когда заказчик окончательно приперт к стенке абстрактными концепциями и непонятными деталями, сравнения и аналогии могут быть единственным шансом достичь понимания. Конечно, заказчик не всегда может определить, какие именно элементы другого сайта ему подходят, но в некоторых случаях, опытный разработчик может выделить их лучше самого заказчика.

С другой стороны, указание на похожие элементы может быть очень полезны при объяснении клиенту решений дизайнера. Иногда заказчик предоставляет спецификации, в которых все уже предусмотрено и если вы решите сделать, что-то не так как он представлял, то это вызывает вопросы. Если вы объясните, что процесс заказа сделан В«как в ExpediaВ», то сможете обосновать заказчику принятые при разработке решения и заодно подкрепить их авторитетным примером.

Когда аналогии атакуют
Как и любого другого у метода сравнений и аналогий есть недостатки. Если клиент говорит, что хочет аукцион В«как eBayВ»,– что именно это означает? Художник подумает В«Кричащая цветовая схемаВ», программист В«Поддержка до 20 миллионов пользователейВ», пользователь В«Рейтинг и отзывы на каждого продавцаВ». А что из этого имел ввиду клиент? Вы можете потратить много времени, составляя спецификации проекта похожего на eBay, и при этом не угадать, что именно было нужно клиенту.

К тому же обсуждение проекта на основе аналогий может вызывать у заказчика неприемлемые ассоциации и пристрастия. Если вы скажете, что новый интернет магазин будет на 95% работать как Amazon, заказчика может одолеть желание доработать оставшиеся 5%, будучи уверенным, что тогда его магазин достигнет объемов и возможностей Amazon.

Более того, способность перенимать возможности простым сравнением может спровоцировать заказчика на включение нерелевантных или бесполезных дорогостоящих возможностей в спецификации проекта. К примеру, множество мелких электронных магазинов поддерживают возможность оплаты различными валютами, которая ими никогда не используется. Это значительно усложняет разработку, и если вы ориентируетесь на рынок Аризоны, то едва ли захотите тратить дополнительные $5000, чтобы ваш магазин В«такой как Zen CartВ» поддерживал работы с британской налоговой системой.

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

Возвращаемся в реальный мир
Вы должны держать под контролем все двусмысленности, которые возникают в процессе обсуждения аналогий, иначе вы будете обречены на безуспешные попытки создания мутанта работающего как YouTube плюс Newegg помноженный на DeviantArt с бюджетом $750. К счастью, на практике стратегия отбора хороших аналогий очень проста, используйте только те, которые кажутся вам достаточно конкретными и полезными.

Начать с аналогий имеет смысл, даже если вы разрабатываете, что-то принципиально новое. Но в этом случае особое значение приобретает второй этап разработки, когда поняв, что нужно клиенту, вы должны выразить это в более конкретной форме и включить в спецификации проекта. Не помешает и рассмотрение отдельных частей проекта, который был выбран в качестве примера, от вопроса В«что именно отсюда вы хотите скопироватьВ» вреда в любом случае не будет. Разработчики часто склонны усложнять вопросы, и бывают очень удивленны, когда оказывается, что все, что клиент хочет взять от проекта за $300 000, это цветовая схема и расположение меню.

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

Часто заказчик приводит неадекватные аналогии просто потому, что это все, что он знает, в таких случаях вы должны понять, что ему нужно и предложить более подходящие примеры.

Не забывайте сделать выводы из того, какие аналогии предлагает клиент, если большинство из предложенных им сайтов содержать Flash и 700K графики на каждой странице, то можно сделать вывод, что для него внешний вид куда важнее, чем пользователи с модемами на 28.8кбит. Читайте между строк, чтобы получить максимум информации о предпочтениях клиента.

Еще один способ обсуждения не больше, не меньше
Обсуждение на основе аналогий и сравнений может помочь максимально вовлечь заказчика в процесс разработки, не выходя за границы его познаний. Тем не менее, на практике нужно постоянно балансировать, не позволяя этой технике стать панацеей, но используя ее полезные стороны.

Создание иконок методом css в блоках div

И давайте приступать к реализации. Первую на примере создадим давайте иконку камера, просмотрим пример:

Иконка камера в div:

Красивая иконка фотокамера, созданная css. Как ее создать просмотрите код ниже:

Код CSS

<style>
.camera {
background-image: -webkit-radial-gradient(circle, transparent 25%, #2C2C2C 25%, #2C2C2C 35%, transparent 35%, transparent 45%, #2C2C2C 45%);
background-image: -moz-radial-gradient(circle, transparent 25%, #2C2C2C 25%, #2C2C2C 35%, transparent 35%, transparent 45%, #2C2C2C 45%);
background-image: -o-radial-gradient(circle, transparent 25%, #2C2C2C 25%, #2C2C2C 35%, transparent 35%, transparent 45%, #2C2C2C 45%);
background-image: -ms-radial-gradient(circle, transparent 25%, #2C2C2C 25%, #2C2C2C 35%, transparent 35%, transparent 45%, #2C2C2C 45%);
background-image: radial-gradient(circle, transparent 25%, #2C2C2C 25%, #2C2C2C 35%, transparent 35%, transparent 45%, #2C2C2C 45%);
 
                            border-radius: .25em;
                            height: 2em;
                            position: relative;
                            width: 3em;
                            }
                            .camera::after {
                            border: .25em solid #2C2C2C;
                            border-bottom: none;
                            border-radius: .25em .25em 0 0;
                            content: '';
                            height: .25em;
                            left: .875em;
                            position: absolute;
                            top: -.5em;
                            width: .75em;
                            }
                            .camera::before {
                            background-color: #2C2C2C;
                            content: '';
                            height: .25em;
                            left: .25em;
                            position: absolute;
                            top: -.25em;
                            width: .5em;
                            }
                             
                             
</style>

Выводим ее следующим html-кодом с классом, который и назовем - camera. Смотрим пример ниже:

Код HTML

<div class="camera"></div>

Двигаемся далее.

Нарисуем монитор, например:

Получился вот такой вот монитор на простом css. Как его реализовать, смотрим код ниже. Создадим одноименный класс monitor

Код CSS

    /*Монитор*/
.monitor {
    border-radius: .25em;
    box-shadow: inset 0 0 0 .25em #2C2C2C,
                inset 0 -.25em 0 .25em #2C2C2C;
    height: 2.25em;
    position:relative;
    margin-top:-0.5em;
    width: 3em;
}
.monitor:after {
    background-color: #2C2C2C;
    content: '';
    height: .25em;
    left: 1em;
    position: absolute;
    top: 100%;
    width: 1em;
}
.monitor:before {
    background-color: #2C2C2C;
    bottom: -.5em;
    content: '';
    height: .25em;
    left: .75em;
    position: absolute;
    width: 1.5em;
}

Я надеюсь здесь не сложный код. Поехали далее. Нарисуем сердечко. Просмотрим пример реализации сердце на чистом css без использования картинок изображений.

Пример сердечко на css 3

Просмотрим код реализации сердечка методом чистого css стиля:

Код CSS

/*Сердце*/
    .heart {
position: relative;
font-size: 24px;
margin-top:-0.5em;
width0;
height:0;
margin-left: 50px;
}
 
   .heart::before, .heart::after {
position: absolute;
content: "";
width: 1em;
height: 1.6em;
background: #F06;
-moz-border-radius: 1em 1em 0 0;
border-radius: 1em 1em 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
 
 
   .heart::after {
left: -0.96em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}

Далее создадим призрака, смотрим пример ниже:

Пример реализации призрак:

Код CSS

.ghost {
    background-image: -webkit-linear-gradient(45deg, transparent 50%, #2C2C2C 50%), -webkit-linear-gradient(135deg, transparent 50%, #2C2C2C 50%), -webkit-linear-gradient(#2C2C2C 50%, #2C2C2C 50%);
    background-image: -moz-linear-gradient(45deg, transparent 50%, #2C2C2C 50%), -moz-linear-gradient(315deg, transparent 50%, #2C2C2C 50%), -moz-linear-gradient(#2C2C2C 50%, #2C2C2C 50%);
    background-image: -o-linear-gradient(45deg, transparent 50%, #2C2C2C 50%), -o-linear-gradient(135deg, transparent 50%, #2C2C2C 50%), -o-linear-gradient(#2C2C2C 50%, #2C2C2C 50%);
    background-image: -ms-linear-gradient(45deg, transparent 50%, #2C2C2C 50%), -ms-linear-gradient(135deg, transparent 50%, #2C2C2C 50%), -ms-linear-gradient(#2C2C2C 50%, #2C2C2C 50%);
    background-image: linear-gradient(45deg, transparent 50%, #2C2C2C 50%), linear-gradient(315deg, transparent 50%, #2C2C2C 50%), linear-gradient(#2C2C2C 50%, #2C2C2C 50%);
    background-position: 50% 100%, 50% 100%, 50% 0;
    background-repeat: repeat-x;
 
    -webkit-background-size: 1em 1em;
    -moz-background-size: 1em 1em;
    background-size: 1em 1em;
    position: relative;
    margin-top: 1.5em;
    height: 1.5em;
    width: 3em;
}
 
.ghost:after,.ghost:before {
    background-image: -webkit-radial-gradient(transparent 35%, #2C2C2C 35%);
    background-image: -moz-radial-gradient(transparent 35%, #2C2C2C 35%);
    background-image: -o-radial-gradient(transparent 35%, #2C2C2C 35%);
    background-image: -ms-radial-gradient(transparent 35%, #2C2C2C 35%);
    background-image: radial-gradient(transparent 35%, #2C2C2C 35%);
    border-top: .5em solid #2C2C2C;
    content: \'\';
    height: 1em;
    position: absolute;
    top: -1.5em;
    width: 1em;
}
 
.ghost:after {
    background-position: 75% 75%;
    border-left: .5em solid #2C2C2C;
    border-radius: 3em 0 0 0;
    left: 0;
}
 
.ghost:before {
    background-position: 0% 100%;
    border-right: .5em solid #2C2C2C;
    border-radius: 0 3em 0 0;
    right: 0;
}

Продолжаем и создаем чашку с жидкостью. Смотрим пример ниже:

Чашка прозрачная с жидкостью внутри на чистом css 3:

Просмотрим код реализации иконки на чистом css:

Код CSS

.mug {
    background-image: -webkit-linear-gradient(transparent 33%, #2C2C2C 33%);
    background-image: -moz-linear-gradient(transparent 33%, #2C2C2C 33%);
    background-image: -o-linear-gradient(transparent 33%, #2C2C2C 33%);
    background-image: -ms-linear-gradient(transparent 33%, #2C2C2C 33%);
    background-image: linear-gradient(transparent 33%, #2C2C2C 33%);
 
    border: .25em solid #2C2C2C;
    border-radius: 0 0 .25em .25em;
    height: 2.5em;
    margin-top:-0.25em;
    position: relative;
    width: 1.5em;
}
.mug:after {
    border: .25em solid #2C2C2C;
    border-right: none;
    border-radius: .75em 0 0 .75em;
    content: \'\';
    height: 1.5em;
    left: -1em;
    position: absolute;
    top: .25em;
    width: .75em;
}

Вставляем класс к тегу див и получаем следующее:

Код HTML

<!-- Простой пустой блок div с классом mug -->
<div class="mug"></div>

На этом данную публикацию завершаю.

Создание иконок с помощью CSS 3

Сегодня хочу поведать такую вещь как создание иконок с помощью css 3 стилей. Может, кто наблюдал, что на некоторых сайтах при отключенных картинках иконки остаются на сайте и никуда не исчезают. Да, на самом деле это не изображения, а нарисованная с помощью css картинка-иконка. С появлением CSS 3 теперь возможно и такое. Давайте просмотрим пример создания иконки домик для перехода на главную страницу. Не буду много говорить, давайте смотреть пример;

Главная
Я думаю, для примера нормально. Цвет, конечно, можно менять в css. Посмотрим css код для создания иконок:

Код CSS

.home a:before {
    left:1px;
    border-style:solid;
    border-color:transparent;
    border-width:8px 7px;
    border-bottom-color:#666;
    margin-top:-16px;
    background:transparent;
}
 
.home a:after {
    left:3px;
    width:2px;
    height:4px;
    border-style:solid;
    border-color:#666 #666 transparent;
    border-width:3px 4px 0;
    margin-top:0;
    background:transparent;
}
 
.home a:hover:before,
.home a:focus:before,
.home a:active:before {
    border-bottom-color:#ссс;
    background:transparent;
}
 
.home a:hover:after,
.home a:focus:after,
.home a:active:after {
    border-color:#ссс #ссс transparent;
}

И сама ссылка с классом выглядит так:

Код HTML

<ul>
   <li class="home">
       <a class="menyu" href="/index.php" title="Главная страница">Главная</a>
   </li>
</ul>

После этого обязательно необходимо прописать класс для тега li, если вы используите его, но можно применять к любому. Вот пример для вывода меню:

Код CSS

li {
 
    position:relative;
    z-index:1;
    overflow:hidden;
    list-style:none;
    padding:0;
    /*margin:-15 0 0.15em;*/
}
 
li a:link,
li a:visited {
    display:block;
    border:0;
    padding-left:5px;
    padding-right: 5px;
    color:#ccc;
}
 
li a:hover,
li a:focus,
li a:active {
    color:#ccc;
    background:transparent;
}
 
li:before,
li:after,
li a:before,
li a:after {
    content:"";
    position:absolute;
    top:50%;
    left:0;
}
 
li a:before,
li a:after {
    margin:-8px 0 0;
    background:#c55500;
}
 
li a:hover:before,
li a:focus:before,
li a:active:before {
    background:#730800;
}

Это, конечно, мой вариант, вы можете использовать все, что угодно, применять данный стиль к другим тегам html. Вот такой вот пример получился. Создали домик, давайте создадим иконку посложней. Например, иконку с фотоаппаратом. Смотрим пример иконки.

Фото
Для создания такой иконки неоходимо создать класс, например, одноименный photo, и с ним будем работать. Создаем класс в css документе, вставляем следующее.

Код CSS

/*  ФОТО  */
.photo a:before {
    left:2px;
    width:16px;
    height:12px;
    margin-top:-6px;
}
 
.photo a:after {
    left:6px;
    width:8px;
    height:2px;
    margin-top:-8px;
}
 
.photo:after {
    left:6px;
    width:8px;
    height:8px;
    margin-top:-4px;
    background:#fff;
    /* css3 */
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
}
 
.photo a:hover:after,
.photo a:focus:after,
.photo a:active:after {
    background:#000;
}

Как вы заметили, все это происходит, благодаря использованию селектора after, before. И так можно создавать любые картинки-иконки методом css стилей.

Усложним еще нашу задачу и сделаем иконку зеленого цвета с галочкой. Смотрим пример использования:

Сохранить или подтвердить на ваш вкус
Как достичь такого эффекта? Да легко! Создадим класс, например, success-alt и пропишем в нем следующий код:

Код CSS

.success-alt {
    color:#7F913C;
}
 
.success-alt:before {
    left:6px;
    width:5px;
    height:12px;
    border-width:0 5px 5px 0;
    border-style:solid;
    border-color:#7F913C;
    margin-top:-11px;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
}

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

Иконка восклицательный знак в желтом треугольнике на css 3
Как прописать клас для такой иконки на css? Сейчас и пропишем. Создаем класс с названием, например, warning, и прописываем для него стили:

Код CSS

.warning:before {
    content:"!";
    z-index:2;
    left:8px;
    margin-top:-8px;
    font-size:14px;
    font-weight:bold;
    color:#000;
}
 
.warning:after {
    z-index:1;
    border-width:0 11px 18px;
    border-style:solid;
    border-color:#F8D201 transparent;
    margin-top:-10px;
    background:transparent;
}

Пример использования css 3 для создания иконки email:

EMAIL
После просмотра в действии давайте просмотрим сам исходный код css стиля.

Код CSS

.email:before {
    z-index:10;
    left:6px;
    width:12px;
    height:12px;
    border-width:0 1px 1px 0;
    border-style:solid;
    border-color:#fff;
    margin-top:-13px;
    background:transparent;
    /* css3 */
    -webkit-transform:rotate(39deg) skew(-12deg);
    -moz-transform:rotate(39deg) skew(-12deg);
    -ms-transform:rotate(39deg) skew(-12deg);
    -o-transform:rotate(39deg) skew(-12deg);
    transform:rotate(39deg) skew(-12deg);
}
 
.email a:before {
    left:3px;
    width:6px;
    border-width:6px;
    border-style:solid;
    border-color:#ccc #ccc transparent;
    margin-top:-7px;
    background:transparent;
}
 
.email a:after {
    left:4px;
    border-width:0 8px 9px;
    border-style:solid;
    border-color:#ccc transparent; /* Вместо 5 */
    margin-top:-3px;
    background:transparent;
}
 
.email a:hover:before,
.email a:focus:before,
.email a:active:before {
    border-color:#666 #666 transparent;
    background:transparent;
}
 
.email a:hover:after,
.email a:focus:after,
.email a:active:after {
    border-bottom-color:#666;
}

Код конечно сложнее чем мы просматривали примеры в предыдущей публикации на тему создания иконок на css Но согласитесь результат того стоит, пользователь отключил показ картинок в браузере, а картинки и дизайн не изменился эффективно и интересно. Этим можно ввести даже в заблуждение. что случилось когда показ отключен, а иконки на сайте не отключились. Хочу показать еще примеры использования некоторых иконок на селекторах css before и after. Следующим создадим иконку в виде мп3 плеера. Двайте просмотрим пример для начала что из этого может получиться и как выглядит иконка:

МП3 плеер

На первый взгляд ничего сложного нет, простая иконка мп3 плеер на css 3 создаем для этого класс так и назовем его playerи далее пропишим для него стили смотрим код css ниже:

Код CSS

/* MP3 PLAYER */
 
.player:before {
    left:3px;
    width:9px;
    height:6px;
    border-width:2px 2px 11px;
    border-style:solid;
    border-color:#555;
    margin-top:-10px;
    /* css3 */
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
     
}
 
.player:after {
    left:6px;
    width:3px;
    height:3px;
    border:2px solid #fff;
    /* css3 */
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
}

Напомню кто забыл как мы подключаем данный класс для отображения иконки например для тега html span:

<span class="player"> МП3 плеер</span>

Будьте внимательней при прописании стилей для span он должен выглядеть примерно так для правильного отображения смотрим пример:

Код CSS

span {
 
    position:relative;
    z-index:1;
    overflow:hidden;
    list-style:none;
    padding:0;
    margin:-15 0 0.15em;
}
 
span a:link,
span a:visited {
    display:block;
    border:0;
    padding-left:5px;
    padding-right: 5px;
    color:#ccc;
}
/*Если иконка ссылка*/
span a:hover,
span a:focus,
span a:active {
    color:#ccc;
    background:transparent;
}
/*Если иконка ссылка*/
span:before,
span:after,
span a:before,
span a:after {
    content:"";
    position:absolute;
    top:50%;
    left:0;
}
 
span a:before,
span a:after {
    margin:-8px 0 0;
    background:#c55500;
}
 
span a:hover:before,
span a:focus:before,
span a:active:before {
    background:#730800;
}

Можно прописать для классов иконки и другой тег html, еще раз напоминаю - это только примеры использования вы можете использовать все, что угодно. Можно даже например DD как у меня можно посмотреть в исходном коде, для примера показать вам как это работает и не поламать весь дизайн страници для просмотра я просто использовал данный тег. Прописал для него стили классы и вот как вы видите все работает ормально. Теперь создадим звездочку наверное последняя иконка на сегодня и так просотрим пример для наглядности.

Звезда методом css 3

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

Код CSS 3

.save:before,
.save a:before {
    left:6px;
    border-width:10px 0 10px 8px;
    border-style:solid;
    border-color:transparent #ccc;
    margin-top:-9px;
    background:transparent;
    /* css3 */
    -webkit-transform:rotate(22.5deg);
    -moz-transform:rotate(22.5deg);
    -ms-transform:rotate(22.5deg);
    -o-transform:rotate(22.5deg);
    transform:rotate(22.5deg);
}
 
.save a:before {
    left:6px;
    /* css3 */
    -webkit-transform:rotate(157.5deg);
    -moz-transform:rotate(157.5deg);
    -ms-transform:rotate(157.5deg);
    -o-transform:rotate(157.5deg);
    transform:rotate(157.5deg);
}
 
.save a:after {
    border-width:8px 10px 0;
    border-style:solid;
    border-color:#ccc transparent;
    margin-top:-3px;
    background:transparent;
}
 
.save:hover:before,
.save:focus:before,
.save:active:before,
.save a:hover:before,
.save a:focus:before,
.save a:active:before {
    border-left-color:#666;
    background:transparent;
}
 
.save a:hover:after,
.save a:focus:after,
.save a:active:after {
    border-top-color:#666;
    background:transparent;
}

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

Диалог открытия файлов и юзабилити Windows

При всех удобствах Windows некоторые моменты меня очень сильно раздражают. Особенно поведение системы при вызове диалогов открытия файлов. Сперва немного предыстории. При работе с файлами через функцию GetOpenFileName или GetSaveFileName в структуре OPENFILENAME есть возможность указать путь, который должен открыться по умолчанию. Если это значение не задано, то система сама где-то запоминает папку, в которой последний раз был удачно открыт файл (то есть окно выбора файла было закрыто через кнопку "Ok"). Где именно хранится эта информация - я пока не выяснил, да и не особо надо. Второй вариант. Предположим, что некоторая программа самостоятельно запоминает путь к папке, в которой последний раз ею выполнялись какие-то действия с файлами. Это может быть, например, текстовый редактор, просмотрщик графики и т.п., не суть. Главное, что задумка очень хорошая и правильная. При следующем запуске или вызове диалога выбора файла в соответствующее поле OPENFILENAME будет подставлен сохраненный путь и пользователь продолжит работу с того места, где он в прошлый раз остановился. Что-то типа такого:

        ...
        invoke  GetModuleHandle,0
        mov     [ofn.hInstance],eax
        mov     [ofn.lStructSize], sizeof.OPENFILENAME
        mov     [ofn.hwndOwner],0
        mov     [ofn.nMaxFile],MAX_PATH
        mov     [ofn.lpstrFile],buff
        ; Открывать с последней сохраненной папки
        mov     [ofn.lpstrInitialDir],saved_dir
        mov     [ofn.Flags],OFN_EXPLORER+OFN_FILEMUSTEXIST
        invoke  GetOpenFileName,ofn
        ...

Неадекватное, на мой взгляд, поведение системы заключается в следующем. Вполне может возникнуть ситуация, что какая-то часть из сохраненного или запрошенного пути пропала. Например, я в просмотрщике рассортировал папку с фотографиями, в графическом редакторе подправил несколько файлов, а затем в файловом менеджере перенес всю папку с фотографиями в другое место на диске. В этом случае при попытке вернуться к просмотру в просмотрщике, повторно вызвать диалог открытия или сохранения файла в графическом редакторе, при любом раскладе в качестве дефолтного пути будет открыта какая-нибудь херня типа Библиотеки, Моих документов или вообще папки, куда установлена программа. Закономерности я тут тоже не уловил, видимо принятие решения остается за Windows и зависит от уровня осадков в Зимбабве. В итоге пользователю приходится снова топать весь путь из библиотеки до места работы.

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

D:\PICTURES\Путешествия\2011\Разобрать\Китай\NIKOND90\001

но при этом папки "\Китай" и, соответственно, вложенных в нее папок уже не существует, то должна открываться папка

D:\PICTURES\Путешествия\2011\Разобрать

и никак иначе! По-моему, это единственно правильное поведение системы. Почему разработчики Windows до сих пор открывают непонятно что вместо ПОСЛЕДНЕЙ ДОСТУПНОЙ папки из запрошенного пути - непонятно. Какая-то дефолтная папка может открываться только в одном единственном случае - когда ВЕСЬ запрошенный путь, включая букву диска, недоступен.

;------------------------------------------------------------
; Функция проверки доступности пути в файловой системе
; (C) ManHunter / PCL
; http://www.manhunter.ru
;------------------------------------------------------------
; Параметры:
; lpRaw - указатель на буфер размером MAX_PATH, в который
; записан проверяемый путь
; lpGood - указатель на буфер размером MAX_PATH, в который
; будет записан максимально доступный путь
;
; На выходе:
; EAX=0 - ни один из составляющих пути, включая носитель, не
; доступен
; EAX=1 - по крайней мере один из составляющих пути доступен,
; результат без финального слеша записан в буфер lpGood
;------------------------------------------------------------
proc    GetLastValidFolder lpRaw:DWORD, lpGood:DWORD
        locals
                result  dd ?
                old_dir rb MAX_PATH
                new_dir rb MAX_PATH
        endl
 
        pusha
 
        ; Сохранить текущую директорию
        lea     eax,[old_dir]
        invoke  GetCurrentDirectory,MAX_PATH,eax
 
        ; Скопировать поверяемый путь
        lea     esi,[new_dir]
        invoke  lstrcpy,esi,[lpRaw]
        mov     edi,esi
        invoke  lstrlen,esi
        or      eax,eax
        jz      .loc_bad
        dec     eax
        add     edi,eax
 
        ; Исправить слеши
.loc_fix_slash:
        cmp     byte [esi+eax],'/'
        jne     @f
        mov     byte [esi+eax],'\'
@@:
        dec     eax
        or      eax,eax
        jnz     .loc_fix_slash
 
.loc_chk:
        ; Попробовать установить текущую директорию
        invoke  SetCurrentDirectory,esi
        or      eax,eax
        jne     .loc_ok
.loc_scan:
        mov     byte [edi],0
        dec     edi
 
        ; Сканируем с конца до ближайшего слеша
        cmp     byte [edi],'\'
        je      .loc_chk
 
        ; Добрались до начала строки?
        cmp     edi,esi
        jne     .loc_scan
.loc_bad:
        ; Результат - ошибка
        mov     [result],0
        ; Обнулить строку
        mov     eax,[lpGood]
        mov     byte [eax],0
        jmp     .loc_ret
.loc_ok:
        ; Убрать финальный слеш
        cmp     byte [edi],'\'
        jne     @f
        mov     byte [edi],0
@@:
        ; Скопировать последний правильный путь
        invoke  lstrcpy,[lpGood],esi
        ; Результат - успешно
        mov     [result],1
.loc_ret:
        ; Вернуть на место текущую директорию
        lea     eax,[old_dir]
        invoke  SetCurrentDirectory,eax
 
        popa
        ; Записать результат в EAX
        mov     eax,[result]
        ret
endp

На входе передаются два указателя: lpRaw - указатель на исходную строку пути, lpGood - указатель на буфер-приемник, куда будет записан последний максимально доступный путь. Исходный путь может содержать не только папки, но и имя файла, в этом случае функция вернет только папки. Также функция исправляет слеши, приводя их к принятому в Windows виду "\". Результат выполнения возвращается в регистре EAX, если он равен 0, то не доступен ни один элемент проверяемого пути, включая диск. Если EAX=1, то доступный путь найден. Функция самодостаточная и не требует наличия каких-либо дополнительных переменных для своей работы.

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

В приложении пример программы с исходным текстом, в которой используется описанная выше функция для проверки доступности пути.

Ошибки реализации постраничной навигации на сайте

1: Не нужно изобретать велосипед

Уверена, что 99% пользователей Интернета привыкли видеть постраничную навигацию в горизонтальном расположении. Во-первых, это будет уместно, когда страниц много и можно обозначить переход на следующую/предыдущую страницу символами < и >, а переход к началу или концу « и ». Все логично и просто. В случае с данной вертикальной реализацией такая схема не пройдет и придется использовать новые символы, что опять скажется на восприятии их пользователями.

2: Всему свое место

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

3: "Серая мышь и в Африке серая"

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

4: В каждом слове должен быть смысл

Надпись "Показывать на странице по: 12 24 36 " некорректна. "По-русски" это должно звучать примерно так: "Число товаров на странице: 12 24 36". И вопрос "чего по?" не станет возникать. Числовые значения удобнее даже реализовать с помощью выпадающего списка, а не ссылочным перечислением.

5: Повторение - мать учения

Если для того чтобы перейти к элементу навигации необходимо прокрутить страницу вниз, то следует продублировать этот элемент и сверху - пользователь будет вам премного благодарен.

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

Основы юзабилити веб-дизайна. Ограничения.

Концепция об ограничениях в веб-дизайне может быть определена как практика ограничения действий пользователя в системе.

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

Есть две модели ограничений: физические и психологические. Физические ограничения уменьшают чувствительность контроля и предотвращают или замедляют нежелательные действия. Психологические ограничения будут способствовать разборчивости вашего дизайна и сделают его более понятным.

Давайте подробнее рассмотрим их особенности.

Физические ограничения

Первая модель, физические ограничения, относится к способности ограничить действия пользователя с помощью физического объекта, будь то фактический или виртуальный. Есть три типа физических ограничений: пути, оси и барьеры.

Пути ограничивают действия пользователя по линейной или криволинейной движения. Это делается чаще всего с помощью пазов или каналов. Пути, особенно полезны в контрольной группе, где диапазон управляющей переменной относительно невелик. Известным примером была бы шкала громкости в интерфейсе iTunes. Как вы видите, нет никакого способа, чтобы злоупотребить этим модулем.

Оси направляют действия пользователя во вращательное движение. Это имеет ряд преимуществ, в первую очередь позволит «контролю» быть экспансивным или бесконечной длины, а также даст ему способность существовать в ограниченном пространстве. Примером этого является инструмент «повернуть» (rotate) в диалоговом окне Illustrator CS6. Здесь вам предоставляется возможность повернуть объект на 360 градусов с помощью оси управления, которая руководит вашим движением.

Барьеры – поглощают или перенаправляют действие пользователя. Делая это, барьеры способны замедлить, отклонить или прекратить действия пользователей, которые не способствуют успешному результату. Хорошим примером создания барьеров является фраза в диалоговом окне: “Вы уверены, что хотите выполнить это действие?”, которую можно найти на многих интерфейсах, в частности, электронной коммерции.

Психологические ограничения

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

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

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

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

Как усовершенствовать страницу 404

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

Нет необходимости вдаваться в технические моменты

Понятие “Ошибка 404″ раньше было довольно стандартным, и сейчас нет никакого повода использовать какие-то заумные технические термины, которые могут отпугнуть посетителей. Название “Страница не найдена”, звучит более точно и менее вызывающе.

Не вините посетителя

Ваш посетитель, вероятней всего, перешел на сайт по ссылке с другого сайта, или набрал адрес в поисковике. Это не их вина, что вы выдаете сообщение об ошибке, так что будьте деликатны с ними! Напишите сообщение, которое будет звучать извинительно и полезно, а не текст, который заставит их почувствовать себя глупо.

Попросите посетителя проверить их правописание

Есть шанс, что посетитель видит эту ошибку, потому что ввел URL самостоятельно и сделал орфографическую ошибку. Попросите его проверить написание, но не будьте грубы.

Сделайте так, чтобы хедер возвращал ошибку 404

У каждой веб-страницы есть “код ответа сервера” (server response code). 200 означает, что с страницей все в порядке, а 404 означает, что страница не может быть найдена. Если вы создаете свою собственную 404 страницу, то тогда вам необходимо убедиться, что хедеры страницы возвращают правильный код ответа. Есть несколько различных способов достижения этой цели, проще всего использовать htaccess файл, для указание страницы 404.

Убедитесь, что страница 404 ОЧЕВИДНА

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

Помогите посетителю найти то, что он искал
Посетитель столкнулся с 404 ошибкой, вместо страницы которую искал. Так что вашей задачей будет попытка помочь им найти исходную страницу. Убедитесь, что ваша страница содержит меню, чтобы позволить пользователю найти страницу, которую они хотели. Вы даже можете предоставить ссылки на страницы, которые вы знаете, недавно переехали.

Включите ссылку на домашнюю страницу (Home page)

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

Отправление сообщение вам, должно быть безболезненным

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

Внешний вид вашего бренда должен быть сохранен

Мы, все видели примеры “прикольных” страниц 404. Но, не стоит делать дизайн страницы настолько отличающемся от других ваших страниц, что она даже не похожа на ваш веб-сайт вообще. Это собьет с толку посетителя, который может подумать, что он был переброшен на другой сайт.

Перевод на ваш язык

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

Исправьте битые ссылки

Если большое количество людей видит страницу 404 на вашем сайте (проверьте аналитику вашего сайта, чтобы найти сколько), то возможно, у вас много битых ссылок. Их, обязательно нужно исправить. Сайты по тестированию, такие как SiteBeam и Nibbler, могут проверить весь сайт на наличие неработающих ссылок, что позволит вам, в свою очередь, их быстро исправить, без необходимости ждать замечаний от кого-то.

Не перенаправляйте автоматически на главную страницу

На некоторых страницах 404, посетители сразу же перенаправляют на главную страницу сайта автоматически. Это плохо, потому что посетителю не будет ясно, что он зашел на неправильную страницы, и он может быть смущен тем, как он оказался на вашей home page.

Как научиться веб-дизайну или что нужно знать начинающему веб-дизайнеру?!

Какой способ лучше при изучении веб-дизайна? Как решить, что важно и нужно знать в дизайне, какие аспекты можно опустить вообще?

Допустим, вы захотели стать веб-дизайнером. Зачем изучать веб-дизайн в домашних условиях? Ну, может быть для того, чтобы сделать свой собственный сайт (просто так или для прибыли), или может быть, вам хотелось бы профессионально создавать веб-сайты для других людей. Проблема в том, что обучение займет больше, чем целая жизнь, чтобы узнать все, что нужно уметь в веб-дизайне!

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

1. Каким навыкам веб-дизайна вы должны научиться?

Вот наш список самых важных навыков веб-дизайна, который любой желающий выучить этот предмет, должен уметь и знать:

1. Маркетинг
2. Брендинг и позиционирование
3. Генерация трафика
4. Информационная архитектура
5. Графический дизайн
6. Производство
7. Доступность и удобство (юзабилити)
8. Копирайтинг
9. Маркетинг

Веб-дизайн – это маркетинг, который является процессом согласования рынков с предложениями. Чем более эффективно вы это сделаете, тем более эффективным будет ваш веб-дизайн. Разработка веб-страниц без маркетинга, это просто графический дизайн, и это нормально. Но, если вы хотите сделать веб-сайт, который будет действительно эффективным (вместо просто красивым), одного графического дизайна не достаточно.

Если никто не посещает ваш веб-сайт, или люди посещают, но не находят то, что они хотят, как в таком случае веб-сайт может быть действительно успешным? Реклама, электронный маркетинг и маркетинг в поисковых системах, все это переплетается с вашим веб-сайтом, и все они должны рассматриваться как часть комплексного маркетинга.

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

Брендинг и позиционирование

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

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

Хорошей новостью является то, что брендинг является довольно легкой задачей. Плохая новость это то, что людям не хватает действительного понимания, что такое “брендинг”. Они делают его слишком сложным, путают его с шикарными логотипами, или делают вид, что его там нет или он совсем не важен.

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

Генерация трафика

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

Каким образом веб-сайт будет построен, его контент и стандарты производства, – все эти аспекты будут воздействовать на его способность привлечь трафик. Если ваш сайт не показывается на первой странице результатов поиска, то он не получит долю трафика, которую мог бы (первая страница получает 99% кликов).

Вы не можете оставить эту задачу на потом или для консультанта SEO. Гораздо лучше создать сайта с нуля, чтобы быть направленным на нужный рынок, и убедиться, что сайт оптимизирован должным образом для поисковых систем. Дизайнер, который знает, как это правильно сделать, будет гораздо более успешным и востребованным.

Информационная архитектура

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

Графический дизайн

Графический дизайн охватывает макеты страниц, использовании изображений, цвет, дизайн, типография, иконография, простота навигации … Это то, о чем люди изначально думают, когда вы говорите “веб-дизайн”, и это очень важно.

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

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

Производство (production)

Производство веб-страниц представляет собой процесс превращения графического дизайна в живой, рабочий веб-сайт. Оно включает в себя HTML (для контента и структуры) и CSS (для визуального стиля) компоненты. Они очень, очень важны! Кроме того, понимание того, как веб-страницы построенны, поможет вам открывать новые возможности (что всегда полезно).

Доступность и юзабилити

Чем выше процент целевой аудитории, которая может использовать ваш веб-сайт, тем больше ваш веб-сайт будет использоваться.

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

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

Видите ли, когда мы говорим о «инвалидности», это означает не только люди с тяжелыми зрительными нарушениями. Она также включает в себя тех, у кого ослабленное зрение, проблема с двигательным аппартом (моторикой) или дальтонизм.

Копирайтинг

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

Язык должен быть понятен для всех. Навигация должна быть четкой и недвусмысленной.

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

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

Хороший веб-дизайнер должен быть отличным копирайтером и маркетологом …

Как и где можно всему этому научиться?
Номер один – это практика! Её вам ничто не заменит. Предположим, что вы собираетесь посвятить многие месяцы практике, какие источники дадут вам лучший дополнительный толчок?

1. Блоги и учебники
2. Местные курсы
3. Онлайн курсы
4. Семинары
5. Приватные группы


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

Экспериментируем с различными CSS3 Box-Shadow эффектами

В этом уроке мы создадим эффекты тени при помощи одного только CSS. Ниже показаны изображения, созданные в Photoshop, с различными эффектами. Раньше это был единственный способ их создания, но благодаря box-shadow, мы можем все это сделать только при помощи CSS.

CSS Box-Shadow
Мы будем использовать box-shadow функцию, которая позволяет легко создать несколько теней на коробке элементов, задавая значения для цвета, размера, размытия и смещения.

Свойство box-shadow принимает от 2-х до 4-х вариантов опций, необходимые опции – горизонтальное и вертикальное смещение и два дополнительные опции, расстояние распыления и цвет.

box-shadow:horizontal vertical spread color;

Примеры:

box-shadow:10px 10px;
box-shadow:10px 10px 5px #888;
box-shadow:inset 2px 2px 2px 2px black;
box-shadow:10px 10px #888, -10px -10px #f4f4f4, 0px 0px 5px 5px #cc6600;

Поддержка браузеров
Все основные новейшие браузеры поддерживают функцию box-shadow:

Internet Explorer 9.0 и выше
Firefox 3.5 и выше
Chrome 1 и выше
Safari 3 и выше
Opera 10.5 и выше

Со многими новыми CSS3 свойствами, вам нужно добавить префикс функций с специальными тегами браузера. Для Firefox вам нужно использовать -moz-, для Chrome/Safari -webkit. Свойство box-shadow ничем не отличается.

Для Firefox 3.5 нужен префикс –moz-boz-shadow, но для Firefox 4.0 и выше версии, вам не нужно использовать префикс вообще.

Для Chrome/Safari, вы все равно должны использовать -webkit-box-shadow.

Для Opera, вам достаточно просто использовать box-shadow.

CSS Box Shadow: Эффект №1
Это создаст стандартный эффект тени коробки, придавая ей приподнятый вид.

HTML

<div class="box effect1">
<h3>Эффект 1</h3>
</div>

CSS

.box 
h3 {
text-align:center;
position:relative;
top:80px;
}
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px
auto;
}

/*======== * Эффект 1 * ========*/
.effect1{
-webkit-box-shadow:0 10px 6px -6px #777; 
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow:0 10px 6px -6px #777;
}

CSS Box Shadow: Эффект №2
Этот эффект добавит тени к нижним углам коробки, создавая вид приподнятых уголков на коробках. Этот эффект использует :before и :after свойства, чтобы создать новые элементы, используемые для углов.

HTML

<div class="box effect2">
<h3>Эффект 2</h3>
</div>

CSS

.box h3{
text-align:center;
position:relative;
top:80px;
}
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}

/*============= * Эффект 2 * =============*/
.effect2 {
position:relative;
}
.effect2:before,.effect2:after {
z-index:-1;
position:absolute;
content:"";
bottom:15px;
left:10px;
width:50%;
top:80%;
max-width:300px;
background:#777;
-webkit-box-shadow:0 15px 10px #777;
-moz-box-shadow:0 15px 10px #777;
box-shadow:0 15px 10px #777;
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.effect2:after {
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-o-transform:rotate(3deg);
-ms-transform:rotate(3deg);
transform:rotate(3deg);
right:10px;
left:auto;
}

CSS Box Shadow: Эффект №3
Здесь будет использоваться половина предыдущего эффекта, с добавлением только одного поднятого угла в нижней левой части коробки.

HTML

<div class="box effect3">
<h3>Эффект 3</h3>
</div>

CSS

.box 
h3{
text-align:center;
position:relative;
top:80px;
}
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}

/*================= * Эффект 3 * =================*/
.effect3 {
position:relative;
}
.effect3:before {
z-index:-1;
position:absolute;
content:"";
bottom:15px;
left:10px;
width:50%;
top:80%;
max-width:300px;
background:#777;
-webkit-box-shadow:0 15px 10px #777;
-moz-box-shadow:0 15px 10px #777;
box-shadow:0 15px 10px #777;
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
transform:rotate(-3deg);
}

CSS Box Shadow: Эффект №4
Эффект №4 поднимет угол в нижней правой части коробки.

HTML

<div class="box effect4">
<h3>Эффект 4</h3>
</div>

CSS

.box 
h3{
text-align:center;
position:relative;
top:80px;
}
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}

/*================== * Эффект 4 * ==================*/
.effect4 {
position:relative;
}
.effect4:after {
z-index:-1;
position:absolute;
content:"";
bottom:15px;
right:10px;
left:auto;
width:50%;
top:80%;
max-width:300px;
background:#777;
-webkit-box-shadow:0 15px 10px #777;
-moz-box-shadow:0 15px 10px #777;
box-shadow:0 15px 10px #777;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-o-transform:rotate(3deg);
-ms-transform:rotate(3deg);
transform:rotate(3deg);
}

CSS Box Shadow: Эффект №5
Это распространяется на эффект №2 и увеличивает угол тени.

HTML

<div class="box effect5">
<h3>Эффект 5</h3>
</div>

CSS

.box 
h3{
text-align:center;
position:relative;
top:80px;
}
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px
auto;
}							

/*=============== * Эффект 5 * ===============*/
.effect5 {
position:relative;
}
.effect5:before,.effect5:after {
z-index:-1;
position:absolute;
content:"";
bottom:25px;
left:10px;
width:50%;
top:80%;
max-width:300px;
background:#777;
-webkit-box-shadow:0 35px 20px #777;
-moz-box-shadow:0 35px 20px #777;
box-shadow:0 35px 20px #777;
-webkit-transform:rotate(-8deg);
-moz-transform:rotate(-8deg);
-o-transform:rotate(-8deg);
-ms-transform:rotate(-8deg);
transform:rotate(-8deg);
}
.effect5:after {
-webkit-transform:rotate(8deg);
-moz-transform:rotate(8deg);
-o-transform:rotate(8deg);
-ms-transform:rotate(8deg);
transform:rotate(8deg);
right:10px;
left:auto;
}

CSS Box Shadow: Эффект №6
Этот эффект будет создавать изогнутую тень в нижней части коробки.

HTML

<div class="box effect6">
<h3>Эффект 6</h3>
</div>

CSS

.box 
h3 {
text-align:center;
position:relative;
top:80px;
}

.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}
								
/*=============== * Эффект 6 * ===============*/
.effect6 {
position:relative;      
-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect6:before,.effect6:after {
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:50%;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px/10px;
border-radius:100px/10px;
}

CSS Box Shadow: Эффект №7
Этот эффект использует предыдущий эффект и еще добавляет тень к верхней части коробки.

HTML

<div class="box effect7">
<h3>Эффект 7</h3>
</div>

CSS

.box h3 {
text-align:center;
position:relative;
top:80px;
}
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}

/*=============== * Эффект 7 * ===============*/
.effect7 {
position:relative;      
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.effect7:before,.effect7:after {
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:0;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px/10px;
border-radius:100px/10px;
}
.effect7:after {
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);    
-ms-transform:skew(8deg) rotate(3deg);    
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
}

CSS Box Shadow: Эффект №8
Наш последний эффект добавит закругленные тени по обе стороны коробки.

HTML

<div class="box effect8">
<h3>Эффект 8</h3>
</div>

CSS

.box h3{
text-align:center;
position:relative;
top:80px;
}
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}
								
/*============================* Эффект 8 *=========================*/
.effect8 {
position:relative;      
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect8:before,.effect8:after {
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:10px;
bottom:10px;
left:0;
right:0;
-moz-border-radius:100px 10px;
border-radius:100px 10px;
}
.effect8:after {
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);    
-ms-transform:skew(8deg) rotate(3deg);    
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
}

Создание интерактивного вращающегося меню при помощи CSS3

В этом уроке мы будем создавать анимированное вращающееся меню, которое включает в себя набор различных методов CSS3.
В этом меню используется очень много CSS3 но, на удивление, это меню очень хорошо работает во многих браузерах. Основная проблема связана с Оперой, которая сталкивается с несколькими проблемами при попытке запустить код (в связи с отсутствием поддержки преобразования).
Только чистый CSS
Для достижения желаемого эффекта, мы должны использовать несколько CSS трюков. Во-первых, нам нужно создать HTML. Мы поставим туда несколько флажков и радио кнопок, которые (позже) будем использовать в тандеме с CSS, чтобы проверить, если пользователь нажал на них. Затем у нас могут быть label`ы где угодно в коде, которые будет связываться с соответствующими радио кнопками, и использовать эти лейблы как блочные элементы для нормального дизайна. Потом, для того чтобы изменить CSS других элементов щелчком мыши, можно просто использовать .checkbox:checked.

Для этого конкретного меню и простоты, мы будем использовать простые символы ASCII, но вы можете использовать набор иконок или любые другие CSS-иконки. Если вы не можете их получить, тогда просто используйте изображения/картики вместо иконок.

HTML для меню:

<div id="menu">
<input type="checkbox" id="on-check" name="on-check" />
<label id="on-button" for="on-check">
<span>
<span class="ss-plus"><!-- Вставьте сюда символ "ON" если не пользуетесь иконками --></span></span>
<span>
<span class="ss-hyphen"><!-- Вставьте сюда символ "OFF" если не пользуетесь иконками --></span></span>
</label>
<input type="radio" id="info-home" name="radio-check" />
<input type="radio" id="info-compass" name="radio-check" checked />
<input type="radio" id="info-heart" name="radio-check" />
<input type="radio" id="info-rss" name="radio-check" />
<input type="radio" id="info-refresh" name="radio-check" />
<input type="radio" id="info-star" name="radio-check" />
<div id="menu-items">
<div class="middle">
<div class="top">
<span class="bg-piece"> </span>
<label class="ss-home" for="info-home"><!-- Put home icon here if not using symbol set --</label>
<span class="bg-piece"></span>
<label class="ss-compass" for="info-compass"><!-- Put compass icon here if not using symbol set --></label>
<span class="bg-piece"></span>
<label class="ss-heart" for="info-heart"><!-- Put heart icon here if not using symbol set --></label>
</div>
<div class="bottom">
<span class="bg-piece"> </span>
<label class="ss-rss" for="info-rss"><!-- Put rss icon here if not using symbol set --></label>
<span class="bg-piece"></span>
<label class="ss-refresh" for="info-refresh"><!-- Put refresh icon here if not using symbol set --></label>
<span class="bg-piece"></span>
<label class="ss-star" for="info-star"><!-- Put icon here if not using symbol set --></label>
</div>
</div>
</div>

<div class="info home-info">Домой</div>
<div class="info compass-info">Нужен маршрут?</div>
<div class="info heart-info">Любовь</div>
<div class="info rss-info">RSS</div>
<div class="info star-info">Галактика</div>
<div class="info refresh-info">Обновить</div>
<div class="faux-shadow"></div>
</div>

Теперь создайте CSS файл и слинкуйтесь с ним в хэдере (head) вашего HTML документа.

CSS
Чтобы сделать меню интерактивным, мы объединим две основные функции CSS: селекторы-родственники и :checked псевдо-класс. Мы также включим 3D преобразование, чтобы ON/OFF кнопка перевернулась, когда будет включена. Начальное стилирование только меняет внешний вид меню:

/* Для правильного позиционирования меню */
#menu {
position:relative;
width:230px;
margin: 0px auto;
top:100px;
left:37px;
}

/* Мы используем overflow: hidden; поэтому нам нужно создать фальшивую тень*/
.faux-shadow {
position:absolute;
content:  "";
width:150px;
height:150px;
top:0px;
left:0px;
box-shadow:0 0 50px rgba(0,0,0,0.3);
border-radius:300px;
-webkit-transition:all 0.4s linear;
-moz-transition:all 0.4s linear;
-ms-transition:all 0.4s linear;
-o-transition:all 0.4s linear;
transition:all 0.4s linear;
z-index:-9999;
}

/* Кнопка по центру, которую будет нажимать пользователь для активации меню*/
#on-button {
border-radius:100px;
width:150px;
height:150px;
color:#fff;
float:left;
box-sizing:border-box;
-moz-box-sizing:border-box;
cursor:pointer;
background-color:#313b3d;
pointer-events:none;
font-size:5em;
text-shadow:0 1px 1px rgba(0,0,0,0.3);
box-shadow:inset 0 -125px 100px -100px rgba(0,0,0,0.5),0 0 20px rgba(0,0,0,0.2);
}

/* On hover */
#on-button:hover {
box-shadow:inset 0 125px 100px -100px rgba(0,0,0,0.5),0 0 20px rgba(0,0,0,0.2);    
}

/* On click */
#on-button:active {
box-shadow:inset 0 125px 100px -100px rgba(0,0,0,0.5),0 0 20px rgba(0,0,0,0.2), inset 0 0 30px rgba(0,0,0,0.3);
}

/* Спаны внутри on кнопки будут вращаться */
#on-button > span {
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;  
-ms-backface-visibility:hidden;    
-o-backface-visibility:hidden;
-webkit-transition:-webkit-transform 0.2s linear;
-moz-transition:-moz-transform 0.2s linear;
-ms-transition:-ms-transform 0.2s linear;
-o-transition:-o-transform 0.2s linear;
transition: transform 0.2s linear;
display: block;
width:122px;
height:122px;
background:#313b3d;
border-radius:120px;
pointer-events:auto;
position:absolute;
z-index:3;
top:0;
left:0;
box-sizing:border-box;
-moz-box-sizing:border-box;
padding:34px;
margin:14px;
box-shadow:inset 0 -112px 100px -100px rgba(0,0,0,0.5);
}

/* Изменение тени на hover, для соответствия с тенью контейнера*/
#on-button:hover > span {
box-shadow:inset 0 112px 100px -100px rgba(0,0,0,0.5);
}

/* Переворачиваем последний span-элемент */
#on-button > span:last-of-type {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
transform:rotateY(180deg);
}

/* Добавление псевдо элемена с белым фоном, который будет создавать иллюзию, что у ON кнопки есть отверстие*/
#on-button:after {
position:absolute;
content:" ";
top:0;
left:0;
width:120px;
height:120px;
margin:15px;
border-radius:120px;
background:#fff;
z-index:2;
}

Далее нам нужно проверить, если флажок ON отмечен. Затем мы используем родственный селектор, чтобы показать DIV, который мы хотим стилировать и изменить соответствующим образом.

/* При нажатии на кнопку ON поворот всех спанов на 180% */
#on-check:checked + #on-button > span:first-of-type {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);    
-o-transform:rotateY(180deg);  
-ms-transform:rotateY(180deg);
transform:rotateY(180deg);
}

#on-check:checked + #on-button > span:last-of-type {
-webkit-transform:rotateY(0deg);  
-moz-transform:rotateY(0deg);  
-ms-transform:rotateY(0deg);
-o-transform:rotateY(0deg);
transform:rotateY(0deg);  
}

/* Изменим ширину и высоту тени faux shadow */
#on-check:checked ~ .faux-shadow {
width:300px;
height:300px;
top:-75px;
left:-75px;    
}

/* Не показываем элементы если чекбокс NOT CHECKED */
#menu #on-check:not(:checked) ~ .info {
opacity:0;
}

/* Показываем секции с задержкой в 0.4s */
#menu #on-check:checked ~ .info {
-webkit-transition:all 0.2s linear 0.4s;
-moz-transition:all 0.2s linear 0.4s;
-ms-transition:all 0.2s linear 0.4s;
-o-transition: all 0.2s linear 0.4s;
transition:all 0.2s linear 0.4s;
}

/* Показываем внутреннее меню */
#on-check:checked ~ #menu-items {
width:300px;
height:300px;
left:-75px;
top:-75px;
}

Следующий шаг, это изменить сам контейнер меню.

/* Оформление пунктов меню контейнера DIV */
#menu-items {
width:150px;
height:150px;
border-radius:250px;
background:#aaa;
position:absolute;
top:0;
left:0;
z-index:-99;
overflow:hidden;
-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
box-shadow:0 0 15px rgba(0,0,0,0.3);
-webkit-transition:all 0.4s linear;
-moz-transition:all 0.4s linear; 
-ms-transition:all 0.4s linear; 
-o-transition:all 0.4s linear;
transition:all 0.4s linear;
}

/* Мы разделили кусочки меню на два div: top и bottom. */
#menu-items .top, #menu-items .bottom {
width:100%;
float:left;
z-index:1;
height:50%;
}
								
#menu-items .bottom {
top:50%;
}

/* The middle div is largely to fix a bug where the content would exceed the border radius when overflow: hidden; was set */
#menu-items .middle {
height:100%;
white-space:
nowrap;
}

/* Стилирование фоновых кусков. Эти контейнеры ничего не делают, они только для дизайна */
#menu-items .middle .bg-piece {
width:33.3%;
height:100%;
text-align:center;
display:inline-block !important;
background:#eee;
font-size:2.5em;
position:absolute;
display:block;
}

/* Важно убедиться, что все части фона в правильной позиции, а это требует немного экспериментирования. Приведенный ниже код проверяет, чтобы все было расположено в правильном порядке */
#menu-items .middle > div  .bg-piece:nth-of-type(2) {
position:absolute;
width:0;
height:0;
}
#menu-items .middle .bottom .bg-piece:nth-of-type(2):after, #menu-items .middle .top .bg-piece:nth-of-type(2):after {  
content:" ";
position:absolute;
border-color:transparent transparent #eee transparent;
border-width:148px;
border-style:solid;
top:-142px;
left:0px;
z-index:999;
}
#menu-items .middle .top .bg-piece:nth-of-type(2):after {
border-color:#eee transparent transparent transparent;
top:-5px;
left:0;
}
#menu-items .middle .top .bg-piece:nth-of-type(1) { 
box-shadow:inset -125px 0 36px -35px rgba(0,0,0,0.1),inset -7px -161px 72px rgba(0,0,0,0.1);
}
#menu-items .middle .top .bg-piece:nth-of-type(3) { 
box-shadow:inset 125px 0 36px -35px rgba(0,0,0,0.1),inset -7px -161px 72px rgba(0,0,0,0.1);
}
#menu-items .middle > div .bg-piece:nth-of-type(1) {
width:50%;
box-shadow:inset -125px 0 36px -35px rgba(0,0,0,0.1);
}
#menu-items .middle > div .bg-piece:nth-of-type(3) {
width:50%;
right:0;
box-shadow:inset 125px 0 36px -35px rgba(0,0,0,0.1);
}

/* ------------------------------------------------------------ */

Теперь мы переходим к стилированию информационных боксов и labels, чтобы убедиться, что всё находится в правильном положении.

/* Labels - это те элементы, которые содержат иконки */
#menu-items label {
position:absolute;
z-index:9999999;
font-size:2em;
border-radius:5px;
cursor:pointer;
text-shadow:1px 1px 0 rgba(255,255,255,0.1);

/* Голубое свечение при наведении мышки */
#menu-items label:hover {
text-shadow:0 0 15px #a6d8f4;
}

/* Информационные боксы, они появляются, когда выбран пункт меню */
#menu .info {
opacity:0;
position:absolute;
left:55px;
top:-136px;
display:inline-block;
background-color:#d2d2d2;
padding:10px;
color:#343434;
z-index:9999999;
font:normal normal 1.5em Arial, sans-serif;
background:#eee;
border:1px solid #ddd;
font-weight:bold;
border-radius:8px;
box-shadow:inset 0px 40px 200px -30px rgba(255,255,255,1),0px 0px 20px rgba(0,0,0,0.1);
}

/* Маленькие стрелочки для коробок меню */
#menu .info:after {
position:absolute;
content:" ";
top:37px;
left:8px;
border-color:#f3f3f3 transparent transparent transparent;
border-width:10px;
border-style:solid;
}

/* Границы для стрелки */
#menu .info:before {
position:absolute;
content:" ";
top:38px;
left:8px;
border-color:#ddd transparent transparent transparent;
border-width:10px;
border-style:solid;    
}

/* Скрыть радио и флажки */
#menu input[type='checkbox'],input[type='radio'] { display: none; }

/* Правильное расположение иконок */
#menu-items .top .ss-home { top: 90px; left:34px; }

#menu-items .top .ss-heart {  top: 90px; left:241px; }
#menu-items .top .ss-compass { top: 21px; left:137px; }
#menu-items .bottom .ss-rss {  top: 181px; left:35px; }
#menu-items .bottom .ss-star {  top: 181px;left: 243px; }
#menu-items .bottom .ss-refresh { top: 249px;left: 139px; }

И, наконец, нам нужно вращать иконки в нужном направлении, и убедиться в том, что они повернуты в том заданом положении, при нажатие. Опять же, мы используем родственные селекторы и :checked псевдо-класс.

/* Код ниже вращает пункты меню в правильное положение, когда каждый из них нажат. */
#info-home:checked ~ #menu-items, #menu-items .top .ss-heart { 
-webkit-transform:rotateZ(66deg);
-moz-transform:rotateZ(66deg);
-ms-transform:rotateZ(66deg);
-o-transform:rotateZ(66deg);
transform:rotateZ(66deg);
}
#info-heart:checked ~ #menu-items, #menu-items .top .ss-home { 
-webkit-transform:rotateZ(-66deg);
-moz-transform:rotateZ(-66deg);
-ms-transform:rotateZ(-66deg);
-o-transform:rotateZ(-66deg);
transform:rotateZ(-66deg);
}
#info-rss:checked ~ #menu-items, #menu-items .bottom .ss-star { 
-webkit-transform:rotateZ(114deg);
-moz-transform:rotateZ(114deg);
-ms-transform:rotateZ(114deg);
-o-transform:rotateZ(114deg);  
transform:rotateZ(114deg);
}

#info-star:checked ~ #menu-items, #menu-items .bottom .ss-rss { 
-webkit-transform:rotateZ(-114deg);
-moz-transform:rotateZ(-114deg);
-ms-transform:rotateZ(-114deg);
-o-transform:rotateZ(-114deg);
transform:rotateZ(-114deg);
}

#info-refresh:checked ~ #menu-items, #menu-items .bottom .ss-refresh { 
-webkit-transform:rotateZ(180deg);
-moz-transform:rotateZ(180deg);
-ms-transform:rotateZ(180deg);
-o-transform:rotateZ(180deg);
transform:rotateZ(180deg);
}

/* --------------------------------------------------------------- */
/* Выделить выбранный пункт */
#info-home:checked ~ #menu-items .ss-home, #info-heart:checked ~ #menu-items .ss-heart, #info-rss:checked ~ #menu-items .ss-rss, #info-star:checked ~ #menu-items .ss-star, #info-refresh:checked ~ #menu-items .ss-refresh, #info-compass:checked ~ #menu-items .ss-compass { 
text-shadow:0 0 15px #3facf2;
color:#24434f;
}

/* Сделайте непрозрачность инфо коробок 1, когда они нажаты */
#info-home:checked ~ .home-info, #info-heart:checked ~ .heart-info, #info-rss:checked ~ .rss-info, #info-star:checked ~ .star-info, #info-refresh:checked ~ .refresh-info, #info-compass:checked ~ .compass-info {
opacity:1;
}

Вот и всё.

16 рамок на CSS3 для оформления содержания

В данном уроке мы сделаем 16 различных рамочек для оформления соодержания пользуясь только средствами CSS3. Подобные элементы добавляют интерфейсам веб проектов шарм и неповторимое очарование.

Стили для общей части документа.
Сделать рамки для содержания существенно проще, чем может казаться на первый взгляд. Нужно только хорошо знать основные правила CSS3, и вы легко сможете делать подобные элементы дизайна не используя никаких изображений. Ниже приводится список общих правил для демонстрационного документа:

@charset "utf-8";
 
@import url(reset.css); 

/******************************************/
/*** Стили для демонстрационной страницы **/
/******************************************/

body{
    background: url(background.png);
}
 
.wrapper{
    width: 960px;
    overflow: hidden;
    margin: auto;
    padding: 60px 0 100px;
}
.set_item{
    width: 400px;
    float: left;
}
.clear{
    clear:both;
}
h1 {
    text-align:center;
}
/*** Конец общей секции ***/

Box 1
Рамка с легкими тенями в противоположных углах и небольшой складкой в правом нижнем углу, также она имеет еле заметную внутреннюю тень для придания объема.

Рамка для оформления содержания №1

/* Устанавливаем дизайн для параграфов в рамках */
.box1 p, .box2 p, .box3 p, .box4 p, .box5 p, .box6 p, .box7 p, .box9 p, .box10 p, .box11 p, .box12 p, .box13 p, .box14 p, .box15 p, .box16 p{
margin: 30px;
color: #aaa;
outline: none;
}
/* В данном селекторе мы задаем ширину, высоту, обводку, позиционирование, фоновый цвет, цвет и размер теней */
.box1{
    width: 300px;
    margin: 40px;
    min-height: 200px;
    position:relative;
    display: inline-block;
    background:#fff;
    background: -webkit-gradient(linear, 0% 20%, 0% 1000%, from(#fff), to(#fff), color-stop(.1,#f3f3f3));
    background: -moz-linear-gradient(0% 0%, #fff, #f3f3f3 10%, #fff);
    border: 1px solid #ccc;
    -webkit-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
    -webkit-border-bottom-right-radius: 6px 50px;
    -moz-border-radius-bottomright: 6px 50px;
    border-bottom-right-radius:6px 50px;
}

/* Данный псевдо класс определяет дизайн того, что будет предшествовать классу box1.
   В нашем случае здесь определяются параметры тени, которая лежит под рамкой. */
.box1:before{
    content: '';
    width: 50px;
    height: 100px;
    position:absolute;
    bottom:0; right:0;
    -webkit-box-shadow: 20px 20px 10px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 20px 20px 15px rgba(0, 0, 0, 0.1);
    box-shadow: 20px 20px 15px rgba(0, 0, 0, 0.1);
    z-index:-1;
    -webkit-transform: translate(-35px,-40px)
               skew(0deg,30deg)
               rotate(-25deg);
    -moz-transform: translate(-35px,-40px)
            skew(0deg,32deg)
            rotate(-25deg);
    -o-transform: translate(-35px,-40px)
              skew(0deg,32deg)
              rotate(-25deg);
}

/* В данном псевдо классе определяется дизайн того, что следует за классом box1.
   в нашем случае хдесь определяются парметры тени, которая будет лежать поверх рамки */
.box1:after{
    content: '';
    width: 100px;
    height: 100px;
    top:0; left:0;
    position:absolute;
    display: inline-block;
    z-index:-1;
    -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.2);
    box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.2);
    -webkit-transform: rotate(2deg)
               translate(20px,25px)
               skew(20deg);
    -moz-transform: rotate(7deg)
            translate(20px,25px)
            skew(20deg);
    -o-transform: rotate(7deg)
              translate(20px,25px)
              skew(20deg);
    transform: rotate(7deg)
           translate(20px,25px)
           skew(20deg);
}

BOX 2
Данная рамка имеет большой загиб в нижнем правом углу с соответствующим тенями, легкая внутренняя тень заменена на небольшой поверхностный градиент.

Рамка для оформления содержания №2

/* В данном селекторе мы задаем ширину, высоту, обводку, позиционирование, фоновый цвет, цвет и размер теней */
.box2{
    margin: 50px;
    width: 300px;
    min-height: 150px;
    padding: 0 0 1px 0;
    position:relative;
    background: #f3f3f3;
    background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
    background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    -webkit-border-bottom-right-radius: 60px 60px;
    -moz-border-radius-bottomright: 60px 60px;
    border-bottom-right-radius: 60px 60px;
    -webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
    box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
}

.box2:before{
    content:'';
    width: 25px;
    height: 20px;
    position: absolute;
    bottom:0;
    right:0;
    -webkit-border-bottom-right-radius: 30px;
    -moz-border-radius-bottomright: 30px;
    border-bottom-right-radius: 30px;
    -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
    box-shadow:-2px -2px 5px rgba(0, 0, 0, 0.3);
    -webkit-transform:  rotate(-20deg)
                skew(-40deg,-3deg)
                translate(-13px,-13px);
    -moz-transform: rotate(-20deg)
                    skew(-40deg,-3deg)
                    translate(-13px,-13px);
    -o-transform:   rotate(-20deg)
                    skew(-40deg,-3deg)
                    translate(-13px,-13px);
                    transform:
                    rotate(-20deg)
                    skew(-40deg,-3deg)
                    translate(-13px,-13px);
}

/* Здесь определяется затенение загиба */
.box2:after{
    content: '';
    z-index: -1;
    width: 100px;
    height: 100px;
    position:absolute;
    bottom:0;
    right:0;
    background: rgba(0, 0, 0, 0.2);
    display: inline-block;
    -webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 20px 20px 18px rgba(0, 0, 0, 0.2);
    box-shadow: 20px 20px 8px rgba()0,0,0,0.2;
    -webkit-transform: rotate(0deg)
               translate(-45px,-20px)
               skew(20deg);
    -moz-transform: rotate(0deg)
            translate(-45px,-20px)
            skew(20deg);
    -o-transform: rotate(0deg)
              translate(-45px,-20px)
              skew(20deg);
    transform: rotate(0deg)
           translate(-45px,-20px)
           skew(20deg);
}

Box 3
Данная рамка имитирует немного помятый листок, что хорошо заметно вверху и внизу. И все эффекты созданы с помощью CSS3.

Рамка для оформления сожержания №3

/* В данном селекторе мы задаем ширину, высоту, обводку, позиционирование, фоновый цвет, цвет и размер теней  */
.box3{
    margin: 50px;
    width: 300px;
    padding: 5px 0 ;
    position:relative;
    background:#fff;
    background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
    border: 1px solid #ccc;
    -webkit-border-radius: 60px 5px;
    -moz-border-radius: 60px/5px;
    border-radius:60px/5px;
    -webkit-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
}

/* В данном псевдо классе генерируется правая верхняя тень */
.box3:before{
    content: '';
    width: 50px;
    height: 50px;
    top:0; right:0;
    position:absolute;
    display: inline-block;
    z-index:-1;
    -webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
    -webkit-transform: rotate(2deg)
               translate(-14px,20px)
               skew(-20deg);
    -moz-transform: rotate(2deg)
            translate(-14px,20px)
            skew(-20deg);
    -o-transform: rotate(2deg)
              translate(-14px,20px)
              skew(-20deg);
    transform: rotate(2deg)
           translate(-14px,20px)
           skew(-20deg);
}

/* В данном псевдо классе генерируется верхняя левая тень */
.box3:after{
    content: '';
    width: 100px;
    height: 100px;
    top:0; left:0;
    position:absolute;
    z-index:-1;
    display: inline-block;
    -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
    -webkit-transform: rotate(2deg)
               translate(20px,25px)
               skew(20deg);
    -moz-transform: rotate(2deg)
            translate(20px,25px)
            skew(20deg);
    -o-transform: rotate(2deg)
              translate(20px,25px)
              skew(20deg);
    transform: rotate(2deg)
           translate(20px,25px)
           skew(20deg);
}

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

Рамка для оформления содержания №4

/* В данном селекторе мы задаем ширину, высоту, обводку, позиционирование, фоновый цвет, цвет и размер теней */
.box4{
    margin: 50px;
    min-height: 100px;
    width: 300px;
    padding: 5px 0 ;
    position:relative;
    background: #fff;
    background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#fff), to(#fff), color-stop(.2,#f2f2f2));
    background: -moz-linear-gradient(0% 0% 360deg, #fff, #f2f2f2 20%, #fff );
    border: 1px solid #ccc;
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

/* В данном псевдо классе определяется верхняя правая тень*/
.box4:before{
    content: '';
    width: 50px;
    height: 50px;
    top:0; right:0;
    position:absolute;
    z-index: -1;
    -webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
    box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
    -webkit-transform: rotate(2deg)
                        translate(-14px,20px)
                        skew(-20deg);
    -moz-transform: rotate(2deg)
                        translate(-14px,20px)
                        skew(-20deg);
        -o-transform: rotate(2deg)
                        translate(-14px,20px)
                        skew(-20deg);
                transform: rotate(2deg)
                        translate(-14px,20px)
                        skew(-20deg);
}

/* В данном псевдо классе определяется верхняя левая тень */
.box4:after{
    content: '';
    width: 50px;
    height: 50px;
    top:0; left:0;
    position:absolute;
    z-index:-1;
    display: inline-block;
    -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
    box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
    -webkit-transform: rotate(2deg)
               translate(12px,25px)
                   skew(20deg);
    -moz-transform: rotate(2deg)
            translate(12px,25px)
            skew(20deg);
    -o-transform: rotate(2deg)
              translate(12px,25px)
              skew(20deg);
    transform: rotate(2deg)
           translate(12px,25px)
           skew(20deg);
}
/* Это нижняя правая тень */
.shr_box4{
    width: 100px;
    height: 100px;
    bottom:0; right:0;
    position:absolute;
    z-index: -1;
    -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
    -webkit-transform: rotate(0deg)
               translate(-20px,-15px)
               skew(20deg);
    -moz-transform: rotate(0deg)
            translate(-20px,-15px)
            skew(20deg);
    -o-transform: rotate(0deg)
              translate(-20px,-15px)
              skew(20deg);
    transform: rotate(0deg)
           translate(-20px,-15px)
           skew(20deg);
}

/* Это нижняя левая тень */
.shl_box4{
    content: '';
    width: 100px;
    height: 100px;
    bottom:0; left:0;
    position:absolute;
    z-index: -1;
    -webkit-box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.2);
    box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.2);
    -webkit-transform: rotate(0deg)
               translate(20px,-15px)
               skew(-20deg);
    -moz-transform: rotate(0deg)
            translate(20px,-15px)
            skew(-20deg);
    -o-transform: rotate(0deg)
            translate(20px,-15px)
              skew(-20deg);
    transform: rotate(0deg)
           translate(20px,-15px)
           skew(-20deg);
}

Box 5
Используется градиент от серого к белому цветам в сочетании с тенями и загибами, чтобы получить реалистическое изображение листа бумаги.

Рамка для оформления содержания №5

/* В данном селекторе мы задаем ширину, высоту, обводку, позиционирование, фоновый цвет, цвет и размер теней */
.box5{
    margin: 50px;
    width: 300px;
    padding: 0 0 1px 0;
    position:relative;
    background: #f3f3f3;
    background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
    background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    -webkit-border-bottom-right-radius: 60px 60px;
    -webkit-border-bottom-left-radius: 60px 60px;
    -moz-border-radius-bottomright: 60px 60px;
    -moz-border-radius-bottomleft: 60px 60px;
    border-bottom-left-radius:60px 60px;
    border-bottom-right-radius: 60px 60px;
    -webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
    box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
}

/* Это левый загиб */
.box5:before{
    content:'';
    width: 25px;
    height: 20px;
    background: white;
    position: absolute;
    bottom:0; right:0;
    background: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff), to( #eee), color-stop(.1,#fff));
    background: -moz-linear-gradient(0 50% 90deg, #fff, #fff 10%, #eee);
    -webkit-border-bottom-right-radius: 30px;
    -moz-border-radius-bottomright: 30px;
    border-bottom-right-radius: 30px;
    -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
    box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
    -webkit-transform: rotate(-20deg)
               skew(-40deg,-3deg)
               translate(-13px,-13px);
    -moz-transform: rotate(-20deg)
            skew(-40deg,-3deg)
            translate(-13px,-13px);
    -o-transform: rotate(-20deg)
              skew(-40deg,-3deg)
              translate(-13px,-13px);
    transform: rotate(-20deg)
           skew(-40deg,-3deg)
           translate(-13px,-13px);
}

/* В данном псевдо классе определяется тень для левого загиба */
.box5:after{
    content: '';
    z-index: -10;
    width: 100px;
    height: 100px;
    position:absolute;
    bottom:0;
    right:0;
    background: rgba(0, 0, 0, 0.2);
    display: inline-block;
    -webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 20px 20px 18px rgba(0, 0, 0, 0.2);
    box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
    -webkit-transform: rotate(0deg)
               translate(-45px,-20px)
               skew(20deg);
    -moz-transform: rotate(0deg)
            translate(-45px,-20px)
            skew(20deg);
    -o-transform: rotate(0deg)
              translate(-45px,-20px)
              skew(20deg);
    transform: rotate(0deg)
           translate(-45px,-20px)
           skew(20deg);
}

/* Здесь опредляется нижняя правая тень */

.fold_box5{
    z-index: -10;
    width: 50px;
    height: 50px;
    position:absolute;
    bottom:0; left:0;
    -webkit-box-shadow: -20px 20px 8px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: -20px 20px 18px rgba(0, 0, 0, 0.2);
    box-shadow: -20px 20px 8px rgba(0, 0, 0, 0.2);
    -webkit-transform: rotate(0deg)
               translate(40px,-20px)
               skew(-20deg);
    -moz-transform: rotate(0deg)
            translate(40px,-20px)
            skew(-20deg);
    -o-transform: rotate(0deg)
              translate(40px,-20px)
              skew(-20deg);
    transform: rotate(0deg)
           translate(40px,-20px)
           skew(-20deg);
}

/* В данном селекторе мы делаем загиб с левой стороны */
.fold2_box5{
    content:'';
    width: 25px;
    height: 20px;
    background: white;
    position: absolute;
    bottom:0; left:0;
    background: #fff;
    background: -webkit-gradient(linear, 0% 20%, 50% 80%, from(#fff), to( #eee), color-stop(.1,#fff));
    background: -moz-linear-gradient(0 50%, #fff, #fff 10%, #eee);
    -webkit-border-bottom-right-radius: 30px;
    -moz-border-radius-bottomright: 30px;
    border-bottom-right-radius: 30px;
    -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
    box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
    -webkit-transform: rotate(103deg)
               skew(-3deg,-40deg)
               translate(-13px,-15px);
    -moz-transform: rotate(103deg)
            skew(-3deg,-40deg)
            translate(-13px,-15px);
    -o-transform: rotate(103deg)
              skew(-3deg,-40deg)
              translate(-13px,-15px);
}

Box 6
Еще один эффект помятого листа.

Рамка для оформления содержимого №6

/* В данном селекторе мы задаем ширину, высоту, обводку, позиционирование, фоновый цвет, цвет и размер теней */
.box6{
    margin: 50px;
    width: 300px;
    min-height: 150px;
    padding: 0 0 1px 0;
    position:relative;
    background:#fff;
    background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
    background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3);
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    -webkit-border-top-left-radius: 60px 5px;
    -webkit-border-top-right-radius: 60px 5px;
    -webkit-border-bottom-right-radius: 60px 60px;
    -moz-border-radius-topleft: 60px 5px;
    -moz-border-radius-topright: 60px 5px;
    -moz-border-radius-bottomright: 60px 60px;
    border-top-left-radius: 60px 5px;
    border-top-right-radius: 60px 5px;
    border-bottom-right-radius: 60px 60px;
    -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
    -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
}
 
/* В данном псевдо классе мы создаем загиб для нижней стороны */
.box6:before{
    content:'';
    width: 25px;
    height: 20px;
    position: absolute;
    bottom:0;
    right:0;
    -webkit-border-bottom-right-radius: 30px;
    -moz-border-radius-bottomright: 30px;
    border-bottom-right-radius: 30px;
    -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
    -webkit-transform: rotate(-20deg)
               skew(-40deg,-3deg)
               translate(-13px,-13px);
    -moz-transform: rotate(-20deg)
            skew(-40deg,-3deg)
            translate(-13px,-13px);
    -o-transform:   rotate(-20deg)
            skew(-40deg,-3deg)
            translate(-13px,-13px);
    transform:  rotate(-20deg)
            skew(-40deg,-3deg)
            translate(-13px,-13px);
}

/* В этом псевдо классе генерируется тени для загиба */
.box6:after{
    content: '';
    z-index: -10;
    width: 100px;
    height: 100px;
    position:absolute;
    bottom:0;
    right:0;
    background: rgba(0, 0, 0, 0.2);
    display: inline-block;
    -webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
    box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
    -webkit-transform: rotate(0deg)
               translate(-45px,-20px)
               skew(20deg);
    -moz-transform: rotate(0deg)
            translate(-45px,-20px)
            skew(20deg);
    -o-transform: rotate(0deg)
              translate(-45px,-20px)
              skew(20deg);
    transform: rotate(0deg)
           translate(-45px,-20px)
           skew(20deg);
}

/* В данном классе мы устанавливаем тень для верхней правой секции */
.box6_corner_lf{
    width: 100px;
    height: 100px;
    top:0; left:0;
    position:absolute;
    z-index:-6;
    display: inline-block;
    -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
    box-shadow: -10px -10px 20px rgba(0, 0, 0, 0.2);
    -webkit-transform: rotate(2deg)
               translate(20px,25px)
               skew(20deg);
    -moz-transform: rotate(2deg)
            translate(20px,20px)
            skew(20deg);
    -o-transform: rotate(2deg)
              translate(20px,20px)
              skew(20deg);
    transform: rotate(2deg)
           translate(20px,20px)
           skew(20deg);
}

/* В этом псевдо классе определяем верхнюю левую область */
.box6_corner_rt{
    content: '';
    width: 50px;
    height: 50px;
    top:0; right:0;
    position:absolute;
    display: inline-block;
    z-index:-6;
    -webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 10px -10px 18px rgba(0, 0, 0, 0.2);
    box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
    -webkit-transform: rotate(2deg)
                   translate(-14px,20px)

               skew(-20deg);
    -moz-transform: rotate(2deg)
            translate(-14px,15px)
            skew(-20deg);
    -o-transform: rotate(2deg)
              translate(-14px,15px)
              skew(-20deg);
    transform: rotate(2deg)
           translate(-14px,15px)
               skew(-20deg);
}

Box 7
Теперь можно поработать и над более интересными моделями. Как насчет того, чтобы имитировать кусочки прозрачного скотча, которым прихватывают листочки к стене?

Рамка для оформления сожержания №7

/* В данном селекторе мы задаем ширину, высоту, обводку, позиционирование, фоновый цвет, цвет и размер теней */
.box7{
    margin: 50px;
    width: 320px;
    min-height: 150px;
    padding: 0 0 1px 0;
    position:relative;
    background: #fff;
    background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
    background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3);
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
}
 
/* Это верхняя левая ленточка */
.box7:before{
    content: '';
    position:absolute;
    width: 130px;
    height: 30px;
    border-left: 1px dashed rgba(0, 0, 0, 0.1);
    border-right: 1px dashed rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.1);
    background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0,0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
    background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
    -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
    -webkit-transform:translate(-50px,10px)
                        skew(10deg,10deg)
                        rotate(-50deg);
    -moz-transform:translate(-50px,10px)
                        skew(10deg,10deg)
                        rotate(-50deg);
        -o-transform:translate(-50px,10px)
                        skew(10deg,10deg)
                        rotate(-50deg);
        transform:translate(-50px,10px)
                        skew(10deg,10deg)
                        rotate(-50deg);
}
/* Это правая нижняя ленточка */
.box7:after{
    content: '';
    position:absolute;
    right:0;
    bottom:0;
    width: 130px;
    height: 30px;
    background: rgba(0, 0, 0, 0.1);
    background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0,0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
    background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
    border-left: 1px dashed rgba(0, 0, 0, 0.1);
    border-right: 1px dashed rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
    -webkit-transform: translate(50px,-20px)
                        skew(10deg,10deg)
                        rotate(-50deg);
    -moz-transform: translate(50px,-20px)
                        skew(10deg,10deg)
                        rotate(-50deg);
    -o-transform: translate(50px,-20px)
                        skew(10deg,10deg)
                        rotate(-50deg);
    transform: translate(50px,-20px)
                        skew(10deg,10deg)
                        rotate(-50deg)
}

Мозаичное меню

Представление контента в виде мозаики с отличным эффектом перехода между отдельными страницами.

HTML

<div id="screen"></div>
 
<div id="htmlBank">
    <div id="txt1">
        <div class="wrapper">
            . . .
        </div>
    </div>
    <div id="txt2">
        <div class="wrapper">
            . . .
        </div>
    </div>
    <div id="txt3">
        <div class="wrapper">
            . . .
        </div>
    </div>
    <div id="txt4">
        <div class="wrapper">
            . . .
        </div>
    </div>
    <div id="txt41">
        <div class="wrapper">
            . . .
        </div>
    </div>
    <div id="thumb1">
        <img src="images/thu_eve04.jpg">
    </div>
    <div id="thumb2">
        <img src="images/thu_eve05.jpg">
    </div>
    <div id="thumb3">
        <img src="images/thu_eve02.jpg">
    </div>
</div>

Элемент div screen будет использоваться кодом JavaScript для вывода на экран нашего меню. Контейнер htmlBank содержит элементы для наполнения страниц. Их положение задается в коде инициализации скрипта.

CSS

html {
    overflow: hidden;
}
body {
    position: absolute;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    background:#000;
}
#screen {
    position: absolute;
    width: 891px;
    height: 550px;
016
    left: 50%;
    top: 50%;
    margin-left:-445px;
    margin-top:-275px;
    background: #111;
    overflow: hidden;
}
#screen .grid {
    position: absolute;
    background: #333;
    font-size: 0px;
    overflow: hidden;
}
#screen .txt {
    position: absolute;
    font-size: 14px;
    color: #fff;
    font-family: arial;
    overflow: hidden;
}
#screen .menu {
    position: absolute;
    font-size: 12px;
    color: #fff;
    font-family: arial;
    overflow: hidden;
    cursor: pointer;
}
#screen .menubackgroundcolor {
    opacity: 0.7;
    filter: alpha(opacity=70);
}
#screen .wrapper {
    position:absolute;
    left: 2%;
    top: 2%;
    width: 96%;
    height: 96%;
    overflow: hidden;
}
#screen .wrapper img {
    float: left;
    margin-right: 6px;
    margin-bottom: 0px;
}
#screen h1 {
    position:relative;
    top: 20px;
    width: 100%;
    text-align: center;
    letter-spacing: 0px;
    font-size: 1.8em;
}
#screen .menucontent {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 128px;
    letter-spacing: 0px;
    font-weight: bold;
    top: -10px;
}
#screen .submenucontent {
    position: absolute;
    width: 100%;
    height: 100%;
}
 
#screen .submenutitle {
    position: absolute;
    font-size: 40px;
    font-weight: bold;
}
#screen .submenu {
    position: absolute;
    width: 100%;
    top: 55px;
}
 
#screen .submenuline {
    position: relative;
    height: 18px;
    font-size: 14px;
    margin-top: 1px;
}
 
#screen .lineover {
    background: #fff;
    color: #0064a0;
    font-weight: bold;
}
 
#loader {
    position:absolute;
    left: 50%;
    top: 50%;
    width: 50px;
    margin-left: -25px;
    margin-top: -14px;
    text-align: center;
    font-family: arial;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    background: #000;
    outline: #111 solid 3px;
    opacity: 0.6;
    filter: alpha(opacity=60);
    z-index: 1000;
}
#htmlBank {
    display: none;
    visibility: hidden;
}

Код скрипта

var dp = function ()
{
    // Локальные переменные
    var object = {
            cell: [],
            menu: [],
            text: []
        },
        scr, imagesPath, params, fullImage, loader,
        P, Pn, Pt, lastMenuOver, pc, backgroundImage,
        preload, mibar, nx, ny, nw, nh, sw, sh;
     
    /* ===== Функция добавления элемента HTML ==== */
    var appendHTML = function (p)
    {
        var i, object = document.createElement(p.tagName);   // Создаем элемент HTML
        for (i in p.attributes) object[i] = p.attributes[i]; // Копируем атрибуты
        for (i in p.style) object.style[i] = p.style[i];     // Копируем стили
        if (p.parentNode) p.parentNode.appendChild(object);  // Вставляем объект
        return object;
    };
    /* ===== Копируем объект JS ==== */
    var clone = function (obj)
    {
        if (typeof(obj) != "object" || obj == null) return obj;
        var newObj = obj.constructor();
        for (var i in obj) newObj[i] = clone(obj[i]);
        return newObj;
    }
    /* ==== Конструктор текста ==== */
    var Text = function ()
    {
        // Содержание
        this.div = appendHTML({
            parentNode: scr,
            tagName: "div",
            attributes:
            {
                className: "txt",
                onmouseover: function () { hideLastMenu(); }
            }
        });
        this.css = this.div.style;
    };

    Text.prototype =
    {
        /* ==== Начинаем выводить текст ==== */
        startTypewriter: function (t)
        {
            this.k = 0;
            this.html = t.id ? (
                document.getElementById(t.id) ?
                    document.getElementById(t.id).innerHTML : t.id + " undefined"
            ) : t.html + " ";
            this.html = this.html.replace(/\n/g, "");
            this.l    = this.html.length;
            this.css.visibility = "visible";
            this.css.left       = Math.round(t.x * sw) + "px";
            this.css.top        = Math.round(t.y * sh) + "px";
            this.css.width      = Math.round(t.w * sw) + "px";
            this.css.height     = Math.round(t.h * sh) + "px";
            this.div.innerHTML  = "";
            // Цикл вывода текста
            var self = this;
            this.interval = setInterval(
                function () { self.typeLoop(); }
            , 32);
        },
     
        /* ==== Пропускаем тег HTML ==== */
        skipTag: function()
        {
            if (this.html.charAt(this.k) === "<")
                this.k += this.html.slice(this.k).indexOf(">") + 1;
        },
         
        /* ==== Цикл вывода текста ==== */
        typeLoop: function ()
        {
            if (this.k <= this.l)
            {
                this.skipTag();
                var n = this.html.slice(this.k).indexOf(" ");
                this.k += (n >= 0) ? n : 1;
                this.skipTag();
                this.div.innerHTML = this.html.slice(0, this.k++);
            }
            else
            {
                clearInterval(this.interval);
                this.interval = false;
            }
        }
    };
     
    /* ==== Конструктор меню ==== */
    var Menu = function (n, p)
    {
        // Контейнер меню
        this.div = appendHTML({
            parentNode: scr,
            tagName: "div",
            attributes:
            {
                parent: this,
                className: "menu",
                onclick: function () { this.parent.click(); },
                onmouseover: function () { this.parent.over(); }
            },
            style: { visibility: "hidden" }
        });
        // Цвет фона
        var bgc = appendHTML({
            parentNode: this.div,
            tagName: "div",
            attributes: { className: "menubackgroundcolor" },
            style: { position: "absolute" }
        });
        this.bgc = bgc.style;
        // Контейнер меню
        this.menuDiv = appendHTML({
            parentNode: this.div,
            tagName: "div",
            attributes:
            {
                parent: this,
                className: "menucontent",
                innerHTML: p.html,
                onclick: function () { this.parent.click(); },
                onmouseover: function () { this.parent.over(); }
            }
        });
         
        this.css = this.div.style;
        this.pageTarget = p.target;
     
        // Конструктор подменю
        if (p.submenu)
        {
            this.submenuDiv = appendHTML({
                tagName: "div",
                parentNode: this.div,
                attributes: { className: "submenucontent" },
                style: { visibility: "hidden" }
            });
     
            // Заголовок
            if (p.submenu.title)
            {
                appendHTML({
                    parentNode: this.submenuDiv,
                    tagName: "div",
                    attributes:
                    {
                        className: "submenutitle",
                        innerHTML: p.submenu.title,
                        onclick: function () {
                            resetLoops();
                            Pt = P.text;
                            displayPage();
                            return false;
                        }
                    }
                });
            }
     
            // Контейнер подменю
            this.submenuContent = appendHTML({
                parentNode: this.submenuDiv,
                tagName: "div",
                attributes: { className: "submenu" }
            });
     
            // Линия подменю
            this.menuitem = [];
            var i = 0, o;
            while (o = p.submenu.lines[i++])
            {
                this.menuitem.push(
                    new Submenuitem(this, o)
                );
            }
        }
    };
     
    Menu.prototype =
    {
        /* ==== Обработка событие over для меню ==== */
        over: function ()
        {
            if (this.pageTarget != Pn && lastMenuOver != this)
            {
                hideLastMenu();
                lastMenuOver = this;
                this.menuDiv.style.visibility = "visible";
                /* ---- Вспышка ---- */
                this.c = clone(params.flash);
                var self = this, k = 0;
                var overflash = function ()
                {
                    if (k++ < 12)
                    {
                        self.fadeColor(0.2);
                        setTimeout(overflash, 32);
                    }
                    else self.fadeColor(0);
                };
                overflash();
            }
        },
     
        /* ==== Обработка события click для меню ==== */
        click: function ()
        {
            var t = this.pageTarget;
            if (t !== Pn && params.page[t])
            {
                // Новая страница
                resetLoops();
                Pn = t;
                P = params.page[t];
                Pt = P.text;
                displayPage();
            }
        },
     
        /* ==== Перемещение ==== */
        move: function (i)
        {
            // Цели
            this.xt = P.menuTarget[i].x;
            this.yt = P.menuTarget[i].y;
            this.ct = clone(P.menuBackgroundColor);
            // Инициализация размеров меню
            this.css.visibility = "visible";
            this.css.width      = this.bgc.width = Math.round(sw - 1) + "px";
            this.css.height     = this.bgc.height = Math.round(sh - 1) + "px";
            // Видимость контента
            this.menuDiv.style.visibility = (this.pageTarget === Pn) ? "visible" : "hidden";
            if (this.submenuDiv) this.displayMenuitem(false);
            // Цикл пермещения меню
            var self = this;
            this.interval = setInterval(
                function () { self.moving(); }
            , 32);
        },
         
        fadeColor: function (speed)
        {
            // Переходы
            if (speed)
            {
                this.c.r += (this.ct.r - this.c.r) * speed;
                this.c.g += (this.ct.g - this.c.g) * speed;
                this.c.b += (this.ct.b - this.c.b) * speed;
            }
            else this.c = clone(this.ct);
            // Цвет фона HTML
            this.bgc.backgroundColor = "RGB("
                + Math.round(this.c.r) + ","
                + Math.round(this.c.g) + ","
                + Math.round(this.c.b) + ")";
        },
        /* ==== Перемещение ==== */
        moving: function ()
        {
            // Расстояние до цели
            var speed = 0;
            var dx = this.xt - this.x;
            var dy = this.yt - this.y;
            if (Math.abs(dx) > 0.01 || Math.abs(dy) > 0.01)
            {
                // Изменяем положение
                this.x += dx * .2;
                this.y += dy * .2;
                speed = 0.1;
            }
            else
            {
                // Инициализация значений
                this.x = this.xt;
                this.y = this.yt;
                // Останавливаем анимацию
                clearInterval(this.interval);
                // Поменю
                if (this.submenuDiv && this.pageTarget === Pn)
                {
                    // Выводим подменю
                    this.menuDiv.style.visibility = "hidden";
                    this.displayMenuitem(true);
                }
            }
            // Обновляем HTML
            this.css.left = Math.round(this.x * sw) + "px";
            this.css.top  = Math.round(this.y * sh) + "px";
            this.fadeColor(speed);
        },
         
        /* ---- Выводим пункты меню ---- */
        displayMenuitem: function (visible)
        {
            var i = 0, o, menuitem = this.menuitem;
            while (o = menuitem[i++]) o.div.style.visibility = "hidden";
            this.submenuDiv.style.visibility = "hidden";
            if (visible)
            {
                i = 0;
                this.submenuEnabled = true;
                var self = this;
                var displayMenuitem = function ()
                {
                    var o = menuitem[i++];
                    if (o && self.submenuEnabled)
                    {
                        o.div.style.visibility = "visible";
                        // Дополнительные цвета
                        o.bar.style.background = "RGB(" +
                            Math.round((256 - P.menuBackgroundColor.r) * 0.25) + "," +
                            Math.round((256 - P.menuBackgroundColor.g) * 0.25) + "," +
                            Math.round((256 - P.menuBackgroundColor.b) * 0.25) + ")";
                        setTimeout(displayMenuitem, 64);
                    }
                };
                setTimeout(displayMenuitem, 256);
                this.submenuDiv.style.visibility = "visible";
            } else this.submenuEnabled = false;
        }
    };
     
    /* ==== Конструкто пункта подменю ==== */
    var Submenuitem = function (parent, p)
    {
        this.parent = parent;
        this.text = p.text;
        this.k = 100;
        this.fullImage = p.fullImage;
        this.div = appendHTML({
            tagName: "div",
            parentNode: parent.submenuContent,
            attributes:
            {
                className: "submenuline",
                parent: this,
                onclick:     function () { this.parent.click(); },
                onmouseover: function () { this.parent.over(); }
            }
        });
        this.bar = appendHTML({
            tagName: "div",
            parentNode: this.div,
            style:
            {
                position: "absolute",
                width: "100%",
                height: "100%",
                left: "100%"
            }
        });
        this.txt = appendHTML({
            tagName: "div",
            parentNode: this.div,
            attributes:
            {
                innerHTML: p.html
            },
            style:
            {
                position: "absolute",
                marginLeft: "10px"
            }
        });
    };
     
    /* ---- Функции пунктов меню ---- */
    Submenuitem.prototype =
    {
        /* ---- Выбор ---- */
        click: function ()
        {
            resetLoops();
            resetText();
            Pt = this.text;
            if (this.fullImage)
            {
                // Выводим полноразмерное изображение
                fullImage = this.fullImage;
                displayPage();
            }
            // Обновляем текст
            else nextText();
        },
     
        /* ---- Полоска слева ---- */
        over: function ()
        {
            mibar = this;
            var i = 0, o;
            while (o = this.parent.menuitem[i++]) if (o != this && !o.r) o.out();
            var self = this;
            this.r = false;
            var barLeft = function ()
            {
                if (self === mibar)
                {
                    self.bar.style.left = Math.round(self.k *= .25) + "%";
                    if (Math.round(self.k) > 0) setTimeout(barLeft, 32);
                }
            };
            barLeft();
        },
         
        /* ---- Полоска справа ---- */
        out: function ()
        {
            if (this.k < 100)
            {
                if (this.k < 1) this.k = 1;
                var self = this;
                this.r = true;
                var barRight = function ()
                {
                    self.bar.style.left = Math.round(self.k *= 2) + "%";
                    if (Math.round(self.k) < 100) setTimeout(barRight, 32);
                };
                barRight();
            }
        }
    };
         
    /* ==== Конструктор ячейки ==== */
    var Cell = function (n, x, y)
    {
        this.n  = n;
        this.x0 = x;
        this.y0 = y;
        // Следующее направление
        this.dir = [
            (x - 1 >= 0 ? n - ny : n),
            (x + 1 < nx - 1 ? n + ny : n),
            (y - 1 >= 0 ? n - 1 : n),
            (y + 1 < ny - 1 ? n + 1 : n)
        ];
         
        // Плавный вывод/убирание элемента div
        this.opc = appendHTML({
            parentNode: scr,
            tagName: "div",
            attributes:
            {
                onmouseover: function () { hideLastMenu(); }
            },
            style:
            {
                position: "absolute",
                filter: "alpha(opacity=100)",
                opacity: 1,
                background: "#000",
                left:   Math.round(x * sw) + "px",
                top:    Math.round(y * sh) + "px",
                width:  Math.round(sw - 1) + "px",
                height: Math.round(sh - 1) + "px"

            }
        });
     
        // Элемент div белой вспышки
        this.fla = appendHTML({
            parentNode: scr,
            tagName: "div",
            style:
            {
                position: "absolute",
                background: "#fff",
                visibility: "hidden",
                left:   Math.round(x * sw) + "px",
                top:    Math.round(y * sh) + "px",
                width:  Math.round(sw - 1) + "px",
                height: Math.round(sh - 1) + "px"
            }
        });
         
        // Сетка горизонтальная
        if (x == 0 && y > 0)
        {
            this.hor = appendHTML({
                parentNode: scr,
                tagName: "div",
                attributes: { className: "grid" },
                style:
                {
                    top: Math.round(y * sh - 1) + "px",
                    width: nw + "px",
                    height: "1px"
                }
            });
        }
        // Сетка вертикальная
        if (y == 0 && x > 0)
        {
            this.ver = appendHTML({
                parentNode: scr,
                tagName: "div",
                attributes: { className: "grid" },
                style:
                {
                    left: Math.round(x * sw - 1) + "px",
                    width: "1px",
                    height: nh + "px"
                }
            });
        }
    };
 
    Cell.prototype =
    {
        /* ==== Функция поддержки прозрачности в разных  браузерах ==== */
        opacity: function (alpha)
        {
            if (this.opc.filters && this.opc.filters.alpha)
            {
                // Переопределяем функцию для IE<9
                Cell.prototype.opacity = function (alpha)
                {
                    this.opc.filters.alpha.opacity = Math.round(alpha);
                };
                this.opacity(alpha);
            }
            else
            {
                // Переопределяем функцию для CSS3
                Cell.prototype.opacity = function (alpha)
                {
                    this.opc.style.opacity = alpha * 0.01;
                };
                this.opacity(alpha);
            }
        },
     
        /* ==== Выводим изображение ==== */
        displayCell: function ()
        {
            // mОтмечаем ячейку как выведенную
            this.displayed = true;
            // Вспышка
            this.fla.style.visibility = "visible";
            // Цикл затемнения
            var self = this;
            this.interval = setInterval(
                function () { self.displayCellLoop(); }
            , 32);
        },
     
        /* ==== Цикл вывода ячейки ==== */
        displayCellLoop: function ()
        {
            var o;
            if (this.alpha !== this.alphaTarget)
            {
                // Прозрачность
                this.alpha += this.step;
                this.opacity(this.alpha);
                // Ищем следующую ячейку
                if (this.alpha === this.nextCell)
                {
                    var i = 0,
                        s = false;
                    while (i++ < 8)
                    {
                        o = object.cell[
                            this.dir[Math.floor(Math.random() * 4)]
                        ];
                        // Ячейка доступна
                        if (!o.displayed)
                        {
                            o.displayCell();
                            s = true;
                            break;
                        }
                    }
                    if (!s)
                    {
                        // Находим новую стартовую точку
                        o = startingCell();
                        if (o !== false) o.displayCell(); // Следующая ячейка
                        else this.startNext = true; // Конец
                    }
                }
                // Останавливаем вспышку
                if (this.alpha === this.endFlash) this.fla.style.visibility = "hidden";
                if (this.startNext && this.alpha === this.nextStep)
                {
                    // Запускаем вывод текста
                    if (this.txt && (this.id || this.html)) object.text[pc].startTypewriter(this);
                    // Следующая фаза
                    if (P.text[pc] && !fullImage) nextText();
                }
            }
            else
            {
                // Останавливаем цикл анимации
                clearInterval(this.interval);
                this.interval = false;
                this.fla.style.visibility = "hidden";
            }
        }
    };
     
    /* ==== Возвращаем случайную доступную ячейку ==== */
    var startingCell = function ()
    {
        var o, i = 0, avail = [];
        while (o = object.cell[i++]) if (!o.displayed) avail.push(o);
        if (!avail.length) return false; // Нет доступных ячеек
        else
        {
            // Возвращаем случайную доступную ячейку
            return avail[
                Math.floor(Math.random() * avail.length)
            ];
        }
    };
 
    /* ==== Инициализируем ячейки ==== */
    var initCell = function (p, fx, txt)
    {
        var i = 0, o;
        while (o = object.cell[i++])
        {
            // Ячейка активна
            if (o.x0 >= p.x && o.x0 <= (p.x + p.w - 1) &&
                o.y0 >= p.y && o.y0 <= (p.y + p.h - 1))
            {
                // Копируем перменные
                o.displayed = false;
                o.startNext = false;
                o.id = false;
                o.txt = txt;
                for (var j in p)  o[j] = p[j];
                for (var k in fx) o[k] = fx[k];
            }
        }
    };
     
    /* ==== Сброс текста ==== */
    var resetText = function ()
    {
        // Сброс контейнера текста
        pc = 0;
        var i = 0, o;
        while (o = object.text[i++])
        {
            o.div.innerHTML = "";
            o.css.visibility = "hidden";
        }
        // Сброс прозрачности
        i = 0;
        while (o = object.cell[i++])
        {
            o.t = true;
            o.opacity(0);
        }
    };
     
    /* ==== Выводим следующий блок текста ==== */
    var nextText = function ()
    {
        var o = Pt[pc++];
        if (o)
        {
            initCell(o, params.fadeout, true);
            o = startingCell();
            o.displayed = true;
            o.displayCell();
        }
    };
     
    /* ==== Курсор мыши покинул меню ==== */
    var hideLastMenu = function ()
    {
        if (lastMenuOver)
        {
            lastMenuOver.menuDiv.style.visibility = "hidden";
            lastMenuOver = false;
        }
    };
     
    /* ==== Сброс setInterval ==== */
    var resetLoops = function ()
    {
        if (preload) {
            clearInterval(preload);
            preload = false;
        }
        var i, j, k, o;
        for (j in object)
        {
            k = object[j];
            i = 0;
            while (o = k[i++])
            {
                if (o.interval)
                {
                    // Останавливаем цикл
                    clearInterval(o.interval);
                    o.interval = false;
                    // Останавливаем вспышку
                    if (o.fla) o.fla.style.visibility = "hidden";
                }
            }
        }
    };
 
    /* ==== Последовательность вывода изображений ==== */
    var displayPage = function ()
    {
        var i, j, m, o;
        // сброс
        lastMenuOver = false;
        resetText();
        if (!fullImage)
        {
            // Перемещаем меню
            i = 0;
            while (o = object.menu[i]) o.move(i++);
            // Фоновые изображения
            var img = P.backgroundImage;
        }
        else
        {
            // Полноразмерное изображение
            var img = fullImage;
            // Скрываем меню
            i = 0;
            while (o = object.menu[i++]) o.css.left = "-1000px";
        }
        // Предварительная загрузка изображения
        var timeout    = params.timeout;
        var preloadImg = new Image();
        preloadImg.src = imagesPath + img;
        /* ---- Функция загрузки ---- */
        var preloading = function ()
        {
            if ((preloadImg.complete && preloadImg.width) || timeout === 0)
            {
                // Загрузка завершена - скрываем индикатор загрузки
                loader.innerHTML = "";
                loader.style.visibility = "hidden";
                // Скрываем изображение
                var i = 0, o;
                while (o = object.cell[i++])
                {
                    o.opacity(100);
                    if (fullImage)
                    {
                        // Закрываем полноразмерное изображение
                        o.opc.style.cursor = "pointer";
                        o.opc.onclick = function ()
                        {
                            resetLoops();
                            fullImage = false;
                            Pt = P.text;
                            displayPage();
                        }
                    }
                    else
                    {
                        o.opc.style.cursor = "default";
                        o.opc.onclick = null;
                    }
                 
                }
                // Выводим фоновое изображение
                var css = backgroundImage.style;
                if (timeout > 0)
                {
                    backgroundImage.src = imagesPath + img;
                    css.left = Math.round((nw - preloadImg.width) * 0.5) + "px";
                    css.top  = Math.round((nh - preloadImg.height) * 0.5) + "px";
                    css.visibility = "visible";
                }
                else css.visibility = "hidden";
                setTimeout(function() {
                    // Выводим изображение
                    initCell(
                        {
                            x: 0,
                            y: 0,
                            w: nx,
                            h: ny
                        },
                        params.fadein, false
                    );
                    // случайная точка старта
                    o = startingCell();
                    o.displayed = true;
                    o.displayCell();
                }, 64);
            }
            else
            {
                // Ждем
                timeout--;
                if (timeout < params.timeout - 3)
                {
                    // Выводим индикатор загрузки
                    loader.style.visibility = "visible";
                    loader.innerHTML = (params.timeout - timeout - 3);
                }
                preload = setTimeout(preloading, 64);
            }
        };
        preloading();
    };
     
    ////////////////////////////////////////////////////////////////////////////
     
    /* ==== Размеры экрана ==== */
    var resize = function ()
    {
        nw = scr.offsetWidth;
        nh = scr.offsetHeight;
        sw = Math.round(nw / nx);
        sh = Math.round(nh / ny);
    };
     
    /* ==== Инициализация скрипта ==== */
    var init = function (p)
    {
        var k, i, j, o;
        params = p;
        scr = document.getElementById(p.containerID);
        nx = p.gridX;
        ny = p.gridY;
        imagesPath = p.imagesPath;
        Pn = 0;
        P  = p.page[Pn];
        Pt = P.text;
        resize();
        // создаем фоновое изображение
        backgroundImage = appendHTML({
            parentNode: scr,
            tagName: "img",
            style:
            {
                position: "absolute",
                visibility: "hidden"
            }
        });
        // Индикатор загрузки
        loader = appendHTML({
            parentNode: scr,
            tagName: "div",
            attributes: { id: "loader" },
            style: { visibility: "hidden" }
        });
        // Создаем ячейки
        k = 0;
        for (i = 0; i < nx; i++)
        {
            for (j = 0; j < ny; j++)
            {
                object.cell.push(
                    new Cell(k++, i, j)
                );
            }
        }
        // Создаем объекты текста
        for (i = 0; i < 6; i++)
        {
            object.text.push(
                new Text()
            );
        }
        // Создаем объекты меню
        i = 0;
        while (o = p.menu[i])
        {
            object.menu.push(
                new Menu(i++, o)
            );
        }
        // Загружаем первую страницу
        setTimeout(
            function () { displayPage(); }
        , 250);
    };
    return {
        // Инициализируем скрипт
        init : init
    }
}();

Код инициализации скрипта

setTimeout(function ()
{
    dp.init(
    {
        containerID: "screen",  // Элемент, в который будет выводиться информация
        gridX: 6,               // Размерность сетки по оси X
        gridY: 4,               // Размерность сетки по оси Y
        imagesPath: "images/",  // Папка с изображениями
        timeout: 153,
        flash: { r: 255, g: 255, b: 255},   // Цвет вспышки
        fadein:                             // Параметры вывода ячейки 
        {
            alpha: 100,
            alphaTarget: 0,
            step: -5,
            endFlash: 80,
            nextCell: 90,
            nextStep: 0,
        },
        fadeout:                // Параметры скрытия ячейки
        {
            alpha: 0,
            alphaTarget: 60,
            step: 5,
            endFlash: 20,
            nextCell: 10,
            nextStep: 40,
        },
        menu: [                 // Настройки пунктов меню
            {  
                html: '1',      // Код будет выводиться на экран
                target: 0       // Целевая страница
            },
            {
                html: '2',
                target: 1,
                submenu: {              // Настройки подменю
                    title: 'Состав',    // Название
                    lines: [
                        {
                            html: 'Разведка',   // Название пункта
                            text: [{
                                html: '',               //Выводимый текст
                                x: 0, y: 2, w: 5, h: 1  // Параметры вывода текста
                            },
                            {
                                id: "thumb1",           // Выводимый элемент
                                x: 2, y: 0, w: 1, h: 4  // Параметры вывода элемента
                            }]
                        },
                        {
                            html: 'Планирование',
                            text: [{
                                html: ' ',
                                x: 4, y: 0, w: 1, h: 4
                            },
                            {
                                id: "thumb2",
                                x: 0, y: 2, w: 5, h: 1
                            }]
                        },
                        {
                            html: 'Управление',
                            text: [{
                                html: ' ',
                                x: 2, y: 0, w: 1, h: 4
                            },
                            {
                                html: ' ',
                                x: 4, y: 0, w: 1, h: 4
                            },
                            {
                                id: "thumb3",
                                x: 2, y: 1, w: 3, h: 2
                            }]
                        },
                        {
                            html: 'Командный центр',
                            fullImage: "eve06.jpg"      // Выводим изображение на весь экран
                        }
                    ]
                }
            },
            {
                html: '3',
                target: 2
            },
            {
                html: '4',
                target: 3
            }
        ],
        page: [             // Описание страниц
        { // Страница 1
            backgroundImage: "eve01.jpg",                       // Фоновое изображение
            menuBackgroundColor: { r: 0, g: 100, b: 160 },      // Цвет фона пунктов меню
            text: [                                             // Выводим текст
                {
                    html: ' ',
                    x: 0, y: 2, w: 2, h: 2
                },
                {
                    id: "txt1",                     // Указываем используемы элемент
                    x: 4, y: 1, w: 2, h: 2          // Параметры вывода
                },
                {
                    html: '<h1>Крейсер</h1>',
                    x: 4, y: 3, w: 1, h: 1
                }
            ],
            menuTarget: [       // Расположение пунктов меню на странице               
                { x: 0, y: 0 },
                { x: 1, y: 1 },
                { x: 0, y: 3 },
                { x: 5, y: 3 }
            ]
        },
        { // Страница 2
            backgroundImage: "eve02.jpg",
            menuBackgroundColor: { r: 102, g: 102, b: 51 },
            text: [{
                    html: ' ',
                    x: 5, y: 3, w: 1, h: 1
                },
                {
                    html: ' ',
                    x: 0, y: 3, w: 1, h: 1
                },
                {
                    id: "txt2",
                    x: 0, y: 0, w: 3, h: 2
                },
                {
                    html: '<h1>Интегратор</h1>',
                    x: 5, y: 0, w: 1, h: 1
                }
            ],
            menuTarget: [
                { x: 3, y: 0 },
                { x: 1, y: 3 },
                { x: 3, y: 3 },
                { x: 5, y: 2 }
            ]
        },
        { // Страница 3
            backgroundImage: "eve03.jpg",
            menuBackgroundColor: { r: 160, g: 100, b: 0 },
            text: [{
                    html: ' ',
                    x: 0, y: 0, w: 1, h: 1
                },
                {
                    html: ' ',
                    x: 5, y: 0, w: 1, h: 1
                },
                {
                    id: "txt3",
                    x: 2, y: 1, w: 3, h: 2
                },
                {
                    html: '<h1>Яхта</h1>',
                    x: 5, y: 2, w: 1, h: 1
                }
            ],
            menuTarget: [
                { x: 1, y: 0 },
                { x: 1, y: 2 },
                { x: 5, y: 3 },
                { x: 5, y: 1 }
            ]
        },
        { // Страница 4
            backgroundImage: "eve04.jpg",
            menuBackgroundColor: { r: 0, g: 150, b: 150 },
            text: [{
                    id: "txt41",
                    x: 0, y: 3, w: 2, h: 1
                },
                {
                    id: "txt4",
                    x: 4, y: 2, w: 2, h: 2
                },
                {
                    html: '<h1>Флот</h1>',
                    x: 3, y: 3, w: 1, h: 1
                }
            ],
            menuTarget: [
                { x: 2, y: 0 },
                { x: 1, y: 0 },
                { x: 2, y: 3 },
                { x: 5, y: 0 }
            ]
        }]
    });
}, 500);

Горизонтальное меню для сайта HTML5 CSS3

Сегодня мы создадим несколько красивых горизонтальных меню для своего сайта на html5 и с применением технологий css3 стилей. Горизонтальное меню это неотъемлемый атрибут каждого сайта. И часто перед нами стоит задача создать красивое горизонтальное меню. Я подготовил для вас несколько вариантов использования и цветовой гаммы для горизонтального меню на html5 и css3. Горизонтальное меню дает возможность разместить ссылки на самые главные разделы сайта - главная страница, портфолио, контакты и тому подобное.

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

Пример 1 горизонтального меню для сайта

Красивое горизонтальное меню в синих тонах, подойдет практически для каждого сайта, с интересным эффектом при наведении и нажатии. При создании данного горизонтального меню применяем технологии html5 и css3.

Пример работы просмотрели давайте посмотрим его реализацию в исходном коде

Код HTML

<nav>  
    <ul>       
        <li>
            <a href="javascript:void(0);"><span>Home</span></a>
        </li>
        <li>
            <a href="javascript:void(0);"><span>Portfolio</span></a>
        </li>
        <li>
            <a href="javascript:void(0);"><span>About</span></a>
        </li>
        <li>
            <a href="javascript:void(0);"><span>Blog</span></a>
        </li>
        <li>
            <a href="javascript:void(0);"><span>Contact</span></a>
        </li>
    </ul>
</nav>

Далее применяем для нео стили css3

CSS3 код

nav {
    width: 800px;
    margin: 50px auto;
    overflow: hidden;
}
nav ul {
    float: left;
    height: 55px;
    width: 800px;
    opacity: 0.95;
    border-radius: 5px;
    list-style-type: none;
    box-shadow: 0 250px 150px rgba(0,0,0,.2);
    margin: 0;
    padding: 0;
}
nav ul li {
    float: left;
    height: 55px;
}
nav ul li a {
    font: bold 21px/52px "Lato","Trebuchet MS", Arial, Helvetica, sans-serif;
    display: block;
    height: 55px;
    border-bottom: 5px solid #143157;
    background-color: #0f6fb2;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(15, 111, 178)), to(rgb(34, 65, 112)));
    background-image: -webkit-linear-gradient(top, rgb(15, 111, 178), rgb(34, 65, 112));
    background-image: -moz-linear-gradient(top, rgb(15, 111, 178), rgb(34, 65, 112));
    background-image: -o-linear-gradient(top, rgb(15, 111, 178), rgb(34, 65, 112));
    background-image: -ms-linear-gradient(top, rgb(15, 111, 178), rgb(34, 65, 112));
    background-image: linear-gradient(top, rgb(15, 111, 178), rgb(34, 65, 112));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#0f6fb2', EndColorStr='#224170');
    color: #fff;
    text-decoration: none;
    box-shadow: inset 0 1px 0 #0081bd,inset 0 2px 0 #0078b0,inset 0 3px 0 #0070a3, 0 0 10px rgba(0,0,0,0.2);
    box-sizing: border-box;
    transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
}
nav ul li a { width: 160px }
nav ul li:first-child a {
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
nav ul li:last-child a {
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
nav ul li a:hover {
    box-shadow: inset 0 1px 0 #0070a3,inset 0 0 30px 0 #142a4a;
    text-shadow: 0 1px 3px #143157;
    border-bottom: 5px solid #0e223d;
}
nav ul li a:active,
nav ul li a.active {
    border-bottom: 1px solid #0e223d;
    height: 55px;
    padding-top: 2px;
    box-shadow: inset 0 1px 0 #0070a3,inset 0 0 40px 0 #0d1b30;
}
nav ul li a span {
    border-left: 1px solid #143157;
    border-right: 1px solid #1563a3;
    height: 100%;
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}
nav ul li:first-child a span { border-left: none }
nav ul li:last-child a span { border-right: none }

Красивое css3 меню в красных тонах с очень красивым эффектом переварачивания, или прокрутки.

CSS3 горизонтальное меню в красных тонах

Пример реализации в html5 коде

YTML5 код

<nav id="rolling-nav">
    <ul>
        <li><a href="#" data-clone="Home">Home</a></li>
        <li><a href="#" data-clone="About">About</a></li>
        <li><a href="#" data-clone="Contact">Contact</a></li>
    </ul>
</nav>

CSS3 код

#rolling-nav {
  font:normal 12px 'Trebuchet MS',Trebuchet,Arial,Sans-Serif;
  color:white;
  text-transform:uppercase;
    /* outline:1px solid; */
    width:550px; /* Fixed width. Measure it manually */
    margin:0px auto;
}
 
#rolling-nav ul {
  height:50px;
  margin:0px 0px;
  padding:0px 0px;
  overflow:hidden;
}
 
#rolling-nav li {
  float:left;
  display:inline;
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
}
 
#rolling-nav a,
#rolling-nav a:before {
  display:block;
  margin:0px 0px;
  padding:0px 30px;
  line-height:50px;
  color:white;
  text-decoration:none;
  background-color:#900;
  background-image:-webkit-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-moz-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-ms-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-o-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  position:relative;
  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition:all 0.3s ease-in-out;
  -ms-transition:all 0.3s ease-in-out;
  -o-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
}
 
#rolling-nav a:before {
  content:attr(data-clone);
  position:absolute;
  top:100%;
    right:0px;
  left:0px;
  display:block;
  background-color:white;
  background-image:-webkit-linear-gradient(top, #ddd, white);
  background-image:-moz-linear-gradient(top, #ddd, white);
  background-image:-ms-linear-gradient(top, #ddd, white);
  background-image:-o-linear-gradient(top, #ddd, white);
  background-image:linear-gradient(top, #ddd, white);
  border-top:2px solid rgba(0,0,0,0.2);
  color:#333;
}
 
#rolling-nav a:hover {
  margin-top:-50px;
  margin-bottom:1px;
}

И давайте еще просмотрим один вариант использования горизонтального меню для сайта в серых тонах с красивы многоуровневым отображением

Пример 3 использования css3 меню для своего сайта

HTML5 код

<nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Tutorials</a>
                    <ul>
                        <li><a href="#">Photoshop</a>
                            <ul>
                                <li><a href="#">Kureski</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Illustrator</a></li>
                        <li><a href="#">Web Design</a>
                            <ul>
                                <li><a href="#">HTML</a></li>
                                <li><a href="#">CSS</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Articles</a>
                    <ul>
                        <li><a href="#">Web Design</a></li>
                        <li><a href="#">User Experience</a></li>
                    </ul>
                </li>
                <li><a href="#">Inspiration</a></li>
                <li><a href="#">Kureshki</a></li>
            </ul>
        </nav>

CSS3 код

nav {
  text-align: center;
  margin: 20px 0;
}
nav ul ul {
  display: none;
}
nav ul li:hover > ul {
  display: block;
}
nav ul {
  background: #efefef;
  background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
  background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
  background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
  box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
  padding: 0 20px;
  border-radius: 7px; 
  list-style: none;
  position: relative;
  display: inline-table;
}
nav ul:after {
    content: ""; clear: both; display: block;
  }
nav ul li {
  float: left;
}
nav ul li:hover {
    background: #4b545f;
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
  }
nav ul li:hover a {
      color: #fff;

    }

nav ul li a {
    display: block; padding: 15px 30px;
    color: #757575; text-decoration: none;
  }
nav ul ul {
  background: #5f6975; border-radius: 0px; padding: 0;
  position: absolute; top: 100%;
}
nav ul ul li {
    float: none;
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative;
  }
nav ul ul li a {
      padding: 15px 30px;
      color: #fff;
    }
nav ul ul li a:hover {
        background: #4b545f;
      }
nav ul ul ul {
  position: absolute; left: 100%; top:0;
}

Сегодня мы рассмотрели реализацию 3 красивых горизонтальных меню для сайта в разных цветах и с применением html5 и css3 технологий.

А на этом сегодняшняя публикация подходит к завершению. Жду вас в следующих поучительных материалах.