Знать много и не выставлять себя знающим есть нравственная красота. Знать мало и выставлять себя знающим есть болезнь. Только понимая эту болезнь, мы можем избавиться от нее.
Лао Цзы.

Для того, чтобы изменить оформление, нужно открыть таблицу стилей, обычно это style.css и найти там blockquote. Добавить или вставить вместо тех, которые есть примерно такие строчки:

1
2
3
4
5
6

	font-size:14px;
	color:#444ddf;
	background-color:#ffc;
	border-style:dashed;
	border-width:2px;
	border-color:red;

Первые 2 строчки это размер и цвет текста. Третья — это фон. Четвертая-рамка (dashed-пунктирная линия). Дальше-размер этой рамки и ее цвет.

Сложностей по внедрению меню на страницу возникнуть не должно. Можете внимательно посмотреть на код данной конструкции скачав все исходные файлы прямо сейчас по прямой ссылке. Удачных экспериментов.

Посмотреть демо 

Посмотреть демо

Наиболее корректно отображаются в браузерах Mozilla Fire Fox и Google Chrome. В Opera и Interner Explorer смотрится не совсем так, как должно. Эффект наведения практически не заметен, хотя на нажатие реагируют. В общем Вы можете убедиться в этом сами, посмотреть демо, а также скачать исходники и реализовать данную конструкцию кода на своем сайте.

Посмотреть демо

Внимание!

Данная конструкция кода не работает в браузере Internet Explorer. Во всех остальных популярных браузерах отображается корректно.

Посмотреть демо

Давайте начнем с создания кнопки. Открываем фотошоп. Нам надо нарисовать одну кнопку в трех вариантах. Нажимаем Ctrl=N (Файл — Создать). Выставляем ширину — 100рх и высоту — 100рх, фон прозрачный. Размер в качестве примера берем на глаз. И рисовать тоже будем на глаз, хотя, для точности можно воспользоваться линейкой (Ctrl-R). Чтобы было лучше видно, что мы делаем, можно немного увеличить созданный документ нажав пару раз сочетание клавиш Ctrl++. Теперь выбираем инструмент Прямоугольник с закругленными краями (U) и в верхней части документа рисуем фигуру, оставляя небольшой отступ по краям. Применяем к этой фигуре стили слоя, которые Вам нравятся, добавляем тени и прочее. Затем копируем эту фигуру (Ctrl+J) и перемещаем в середину документа. Можно сразу скопировать фигуру еще один раз и переместить ее вниз. Расположить все 3 фигуры равномерно по документу. Смысл в том, что надо сделать так, чтобы каждая фигура отличалась друг от друга. Можно также написать какой-нибудь текст на кнопке. У меня получилось вот так:

Затем в файл stile.css нужно написать ледующий код: (Для практики можно создать отдельные файлы в редакторе и экспериментировать)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

ul {
        list-style: none;
        margin-left: 0;
        padding: 0;
        }
 
#menu {
        width:100px;
		}
 
#menu li a {
          height: 25px;
        }
 
#menu li a:link, #menu li a:visited {
        display: block;
        background: url(4.png);
        padding: 10px 0 0 100px;
        }
 
#menu li a:hover, #menu li #current {
        background: url(4.png) 0 -34px;
        padding: 10px 0 0 10px;
        }
 
#menu li a:active {
        background: url(4.png) 0 -99px;
        }

Ну и на странице, где нам необходимо вставить кнопку вставляем следующую конструкцию кода:

1

<div id="menu"></div>

Вы также можете посмотреть демонстрационные варианты кнопок и скачать их исходники.

Посмотреть демо

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

Посмотреть демо

Здравствуйте, уважаемые читатели моего блога. Сегодня вместе с вами будем делать картинку, которая будет реагировать на наведение курсора мышки с использованием каскадных таблиц стилей (CSS). Для начала нужно подготовить картинку. Я буду использовать логотип блога. Вы тоже можете потренироваться на нем. Но, прежде, чем начать, его нужно немного изменить. Стандартный размер логотипа — 265×75px.

Как изменить?

Можно этого не делать, а просто взять готовую картинку. Но на всякий случай покажу, как я это делал. Открываем в фотошопе логотип. Создаем новый документ с размерами: 265×150px. Перетаскиваем логотип в новый документ и копируем его (Ctrl+J). Копию перемещаем вниз. На копии инструментом «прямоугольная область (M)» выделяем только надпись на логотипе. Вырезаем ее (Ctrl+X). И сразу вставляем обратно (Ctrl+V). Снимаем выделение (Ctrl+D). Применяем к этой надписи стили, которые вам нравятся и сохраняем документ. У меня получилось вот так: 

Применяем стили.

В файле style.css прописываем специальные значения, одно из которых — hover, за счет него как раз и происходит смещение картинки на указанную величину при наведении курсора.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

ul {
        list-style: none;
        margin: 0;
        padding: 0;
        }
 
#logo {
        width: 256px;
        margin: 200px;
        }
 
#logo li a {
        height: 77px;
          voice-family: "\"}\"";
          voice-family: inherit;
          height: 67px;
        text-decoration: none;
        }
 
#logo li a:link, #logo li a:visited {
        color: #FFF;
        display: block;
        background:  url(logo.png);
        padding: 8px 0 0 150px;
        }
 
#logo li a:hover, #logo li #current {
        color: #FFF;
        background:  url(logo.png) 0 -75px;
        padding: 8px 0 1 31px;
        }

Можно скачать исходники и изучить более подробнее.

Посмотреть демо

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

Красивое оформление ссылок.

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

<div class="cpojer-links">ссылка</div>

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

Всплывающие подсказки при наведении курсора.

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

На странице пишем:

<a class="tooltip">Текст<span>Ваша подсказка</span></a>

И также можете скачать файл CSS.