Первомайский баннер для сайта на 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='https://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>
Поделиться в соцсеть
Оставить комментарий