Поиск
Подписаться
Разное

Валидный XHTML 1.0 Transitional

Валидный RSS

CSS таблицы для разного времени суток Категория: Веб-дизайн
Название: CSS таблицы для разного времени суток
Дата добавления: 12-04-2012
Раз просмотрено: 607
Комментарии: 2
Рейтинг: * * * * * * * * * * (5 голосов)

CSS таблицы для разного времени суток

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

Для начала подготовим две таблицы CSS для нашего сайта. Одна из них будет отвечать за его внешний вид (назовем ее day.css), а другая будет отвечать за его вид в ночное время (она у нас будет называться night.css). Вот исходники наших примеров:

Day.css:

body {
	margin: 15px;
	background: #ccc;
}

#wrapper {
	width: 700px;
	margin: auto;
	padding: 15px;
	border: 1px solid #666;
	background: #fff;
}

p {
	font-size: 13px;
	font-family: Verdana, Geneva, sans-serif;
	text-align: justify;
	color: #333;
}
h1 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 26px;
	margin: 0 0 15px 0;
	color: #666;
}
h2 {
	font-size: 22px;
	margin: 0 0 10px 0;
	color: #999;
}
a {
	color: #900;
}

Night.css:

body {
	margin: 15px;
	background: #666;
}

#wrapper {
	width: 700px;
	margin: auto;
	padding: 15px;
	border: 1px solid #666;
	background: #000;
}

p {
	font-size: 13px;
	font-family: Verdana, Geneva, sans-serif;
	text-align: justify;
	color: #ccc;
}
h1 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 26px;
	margin: 0 0 15px 0;
	color: #999;
}
h2 {
	font-size: 22px;
	margin: 0 0 10px 0;
	color: #666;
}
a {
	color: #FC6;
}

Теперь в том месте страницы, где вы обычно подключаете CSS таблицы для вашего сайта, пропишите этот PHP код:

<?php include('css_switcher.php') ?>

Этим мы подключим специальный файл css_swither.php, который будет отвечать за смену наших CSS таблиц в зависимости от времени суток. В принципе, мы можем обойтись и без него и писать необходимый код туда, где мы его подключаем. Однако, если вы будете использовать этот метод на нескольких страницах вашего сайта, то оптимальней и удобней будет использовать вариант с подключаемым файлом. Теперь перейдем к коду файла css_swither.php, который и будет за все отвечать:

<?php
// Получаем текуший час в 24-часовом формате:
$time = date("H");

// Если день, подключаем файл day.css
if($time > 5 && $time < 19) {
	echo '<link rel="stylesheet" type="text/css" href="day.css" />';
}

// Если ночь, подключаем файл night.css
else {
	echo '<link rel="stylesheet" type="text/css" href="night.css" />';
}
?>

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

Это интересно: «Выпадающее меню на CSS».

Понравился материал? Расскажи о нем всем:
Оцените эту статью:
Прокомментируйте:
Ваше имя:
Гость  •  2012-08-16 14:36:37
Бомба! Просто и сердито
Анна  •  2013-07-19 10:59:33
Супер!