Записи с тегом: css


05
08.2010

Прокачиваем таблицы с помощью CSS3

tables
Сегодня, мы познакомимся с некоторыми возможностями CSS3, а также изменим до неузнаваемости скучные и надоедливые таблицы. Всего, для таблиц будет создано 3 стиля: table1, table2 и table3. Посмотреть, как выглядят таблицы в готовом виде можно здесь, а скачать тут.
Читать далее →


19
07.2009

Создание вертикального меню для сайта

css-menu
В прошлом посте я уже показывал, как с помощью изменения фона можно создавать красивые кнопки. Изменение фона отлично подходит для простых кнопок, для более сложных лучше измененить фоновое изображение. Особенно, если кнопки будут расположены в меню.

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


28
04.2009

Верстаем дизайн для блога. Часть 2

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

Первое чем мы займемся – это разметим шапку под основные элементы:

1) Логотип сайта

2) Поиск

3) Горизонтальное меню.

Для этого в файл index.html в теге:

Читать далее →


11
04.2009

Верстаем дизайн для блога. Часть 1

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

В чем верстать выбор лично ваш, я предпочитаю NetBeans.

Для начала создадим 2 файла «index.html» и «style.css», а также папку «images» в ней мы будем хранить картинки для шаблона.

В файл «index.html» добавим следующий код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Дизайн блога</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="title" content="" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>

</body>
</html>

Читать далее →