Категории: CSS

CSS верстка. Раскрашиваем колонки на странице.

Владимир | | CSS, HTML.

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

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

Решить задачу «в лоб», т.е. воспользоваться свойством background-color каждой из колонок, не получится. Так как колонки неодинаковой высоты, которая может изменяться, и заранее неизвестна. А фон, естественно, должен распространяться на всю высоту колонки, от заголовка до хвостовика.
Читать дальше

Web разработка. Добавляем всплывающие подсказки на страницу.

Владимир | | CSS, HTML, JavaScript.

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

Сегодня я расскажу о JavaScript библиотеке, которая позволяет легко решить эту задачу. Называется она Prototip и состоит всего из одного файла prototip.js. Только учтите, что Prototip, по сути, является надстройкой над другой библиотекой – prototype (о которой я уже неоднократно рассказывал), поэтому без нее он работать не будет.

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

Переходим к созданию подсказок
Качаем библиотеку с официального сайта. В архиве вы найдете две папки:
js/ — в ней находятся два файла prototip.js и prototype.js, т.е. все необходимое для работы;
css/ — здесь размещены: файл с таблицей стилей и несколько картинок, которые используются для создания стандартных подсказок.

После этого подключаем файлы библиотек к странице:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/prototip.js"></script>

Если вы хотите использовать обычные подсказки, то подключите файл с таблицей стилей из папки css. Но, в большинстве случаев, лучше использовать свои собственные стили (так больше шансов, что подсказка впишется в дизайн сайта 🙂 ).

Теперь делаем простенькую страничку:

<p>
При наведении курсора мыши на <em><span id="needtip">этот текст</span></em>
будет появляться обычная текстовая подсказка.
</p>
<p>
А при наведении на <em><span id="cloudtip">этот текст</span></em> появится
графическая подсказка.
</p>

Как видите, она состоит из двух абзацев, в каждом из которых есть фраза, выделенная тегами <span id="…"></span>. Вместо тега <span> можно использовать любой другой, главное указать id элемента.

Для фразы в первом абзаце (id="needtip") сделаем простую текстовую подсказку. Для этого создаем файл simpletip.js, подключаем его к странице:

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

И добавляем в него обработчик события window.onload (таким образом, наш код будет автоматически выполняться при загрузке страницы).
Читать дальше

Web разработка. Делаем стильные html формы.

Владимир | | CSS, HTML.

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

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

Web разработка с использованием Prototype и Scriptaculous. Подсветка элементов web страницы.

Владимир | | CSS, HTML, JavaScript.

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

Изменяем стили элементов web страницы с помощью JavaScript

Владимир | | CSS, HTML, JavaScript.

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

Перемещаем элементы html страницы с помощью JavaScript

Владимир | | CSS, HTML, JavaScript.

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

Web разработка. Границы в CSS3.

Владимир | | CSS.

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

Многоколоночная верстка

Владимир | | CSS, HTML.

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

Создание web страниц. Верстка в две колонки с разделителем.

Владимир | | CSS, HTML.

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

Верстка сайта. Как сделать блок со скругленными углами и тенью.

Владимир | | CSS, HTML.

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