Персональный сайт Александра Тауениса » Первомайский баннер для сайта на CSS3

Первомайский баннер для сайта на CSS3

Ещё с советских времён идёт традиция ходить на первомайские демонстрации о защите прав трудящихся и поддержке КПСС. Просто погалдеть, никакой политики. Сейчас ходить уже не модно, зато можно вывесить такой плакат на…личном сайте.
Для начала создадим плакат. Плакат должен быть красным и хотя бы отдалённо напоминать развевающийся плакат.
#dzpm{
background-color: #D30000;
color: #FFFFCC;
font-size: large;
font-weight: bolder;
text-align: center;
padding: 5px;
}

В код страницы нужно внести следующее: <div id="dzpm">Мир, труд, май!</div>.
Пока что это просто тупой баннер. Добавим фона а-ля мятая ткань на солнце.
background: -moz-linear-gradient(left, rgba(211,0,0,1) 0%, rgba(209,87,0,0.8) 25%, rgba(221,45,0,0.71) 37%, rgba(235,0,0,1) 50%, rgba(222,44,0,0.71) 62%, rgba(209,87,0,0.8) 75%, rgba(204,0,0,1) 100%);
Уже более-менее похоже. Но чего-то не хватает… Никакой плакат, будучи поднятым, не может быть геометрически правильным, ровным прямоугольником. Добавим эффект смятости от ветра:
-moz-transform: matrix(1, -0.01, -0.25, 1, 0, 0);

Отлично! Не хватает лишь ручек поддержки, но их на чистом CSS кросс-браузерно нарисовать весьма проблематично, поэтому обойдёмся без них.

Теперь надо добавить другие префиксные параметры (кроме -moz), чтобы плакат нормально отображался в IE9/10, Opera и WebKit’овых браузерах. Полная версия будет в конце статьи.

Всё бы ничего, но один статический текст — это скучно. Это же не какой-то там одиночный пикет, а демонстрация. Добавим выбиралку случайного лозунга:

<?
function pc_randomint($max = 1) { //генератор случайных чисел от 0 до $max
$m = 1000000;
return ((mt_rand(1,$m * $max)-1)/$m);
}

$lozungi = array("Мир, труд, май!","С 1 мая!","Против ядерной стратегии США!",">=3 ребёнка в семье - норма!","За Россию!");
$lozung = $lozungi[round(pc_randomint(5),0)];
?>
<div id="dzpm"><?echo($lozung)?></div>

Теперь будет выводится случайная фраза. Их можно менять, ибо это простейший массив (при этом не стоит забывать про коррекцию числа лозунгов «round(pc_randomint(х)», иначе не все лозунги будут выводиться или будет ошибка нулевой ссылки).


Живой (динамический) пример.

Код:

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>ДаЗдраПерМа!</title>
 <style>
 #dzpm{ /*Первомайский плакат*/
 width: 25%;
 background-color: #D30000;
 color: #FFFFCC;

 font-size: large;
 font-weight: bolder;
 text-align: center;
 padding: 5px;

 -moz-transform: matrix(1, -0.01, -0.25, 1, 0, 0);
 -webkit-transform: matrix(1, -0.01, -0.25, 1, 0, 0);
 -o-transform: matrix(1, -0.01, -0.25, 1, 0, 0);
 -ms-transform: matrix(1, -0.01, -0.25, 1, 0, 0);

 background: -moz-linear-gradient(left, rgba(211,0,0,1) 0%, rgba(209,87,0,0.8) 25%, rgba(221,45,0,0.71) 37%, rgba(235,0,0,1) 50%, rgba(222,44,0,0.71) 62%, rgba(209,87,0,0.8) 75%, rgba(204,0,0,1) 100%);
 background: -webkit-linear-gradient(left, rgba(211,0,0,1) 0%, rgba(209,87,0,0.8) 25%, rgba(221,45,0,0.71) 37%, rgba(235,0,0,1) 50%, rgba(222,44,0,0.71) 62%, rgba(209,87,0,0.8) 75%, rgba(204,0,0,1) 100%);
 background: -ms-linear-gradient(left, rgba(211,0,0,1) 0%, rgba(209,87,0,0.8) 25%, rgba(221,45,0,0.71) 37%, rgba(235,0,0,1) 50%, rgba(222,44,0,0.71) 62%, rgba(209,87,0,0.8) 75%, rgba(204,0,0,1) 100%);
 }
 </style>
 <? function pc_randomint($max = 1) {
 $m = 1000000;
 return ((mt_rand(1,$m * $max)-1)/$m);
 }
 $lozungi = array("Мир, труд, май!","С 1 мая!","Против ядерной стратегии США!",">=3 ребёнка в семье - норма!","Ура!","<img src='http://kazus.ru/forums/attachment.php?s=4a2682ac7ce709254f34814c08c15cb1&attachmentid=35683&stc=1&thumb=1&d=1339268795'>");
 $lozung = $lozungi[round(pc_randomint(5),0)];
 ?>
</head>
<body>
 <div id="dzpm"><?echo($lozung)?></div>
</body>
</html>


Поделиться в соцсеть


Оставить комментарий

:D :) ;) :( :o :shock: :? Больше смайлов »

Защита от спама * Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.