Оживляем сайт с помощью CSS

Май 26, 2011   Александр Маврин   4 комментария

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

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

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

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

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

СКАЧАТЬ

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

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

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

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

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

СКАЧАТЬ

Не стесняйтесь делиться записью в социальных сетях. Спасибо


4 комментария
  1. Спасибо за интересный урок! Применил некоторые приемы у себя на сайте.

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

    • Александр Маврин:

      По нажатию осуществляется переход по ссылке. Не совсем понятно что именно вы хотите…

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *