Украшение Blogger на Хэллоуин
Скоро будет праздник Хэллоуин, в России не все его принимают, так как он зарубежный, но любителей шумно повеселиться в этот день становится всё больше.
Хэллоуин отмечается 31 октября.
Праздник тесно связан с католическим Днем всех святых - 1 ноября.
Называют Хэллоуин в разных местах по-разному:
Латинская Америка — День мертвых.
Ирландия — Самайн (закат лета).
Ранее праздник отмечался на Британских островах кельтами, в честь сбора урожая. Праздновали его в основном ирландцы и шотландцы. Считалось, что именно в канун праздника всех святых открывались двери в мир мертвых. И к живым приходили души усопших. Чтобы не попасть в плен темных сил, нужно было жечь костры для защиты от бед и оставлять привидениям угощения.
Во второй половине 19 века многие ирландцы и шотландцы переехали в США. Уже там, этот праздник стал всемирно известным, но приобрёл несколько иной смысл — посвящен он не памяти усопших, а нечистой силе.
Теперь дети переодеваются в костюмы разной нечисти, ходят по домам и выпрашивают конфеты.
Затем праздник и его традиции стали популярными по всему миру.
Главный атрибут Хэллоуина — тыква. Сезон сбора этого овоща как раз приходится на октябрь. Из тыквы вырезают светильник (фонарь Джека). По ирландской легенде, фермеру Джеку удалось обмануть дьявола, выманив у него обещание не забирать его душу в ад после смерти. Но за грехи Джека не пустили в рай. В ад он так же попасть не мог и дьявол напоследок бросил ему тлеющие угли из адского костра. Фермер вырезал из репы фонарь и сложил в неё угольки. Так и стал бродить Джек по земле, ожидая страшного суда.
Светильник Джека — символ неприкаянной души, которая бродит в темноте.
Если вы украшаете блог в праздники, то ниже предлагаю несколько примеров того, как изменить сайт на Хэллоуин.
Подойдут украшения и для сайтов с тематикой страшилок и ужастиков.
Фонарь Джека 1
<div class="container">
<svg viewBox="0 0 300 300">
<g id="pumpkin">
<g id="body">
<path fill="#fc9400" d="M236.821 172.269c0-38.39-31.168-69.558-69.559-69.558h-34.524c-38.391 0-69.559 31.168-69.559 69.558 0 38.391 31.168 69.559 69.559 69.559h34.524c38.391 0 69.559-31.168 69.559-69.559z" />
<path fill="#fc9400" d="M254.26 173.127c0-37.686-30.596-68.283-68.283-68.283h-71.954c-37.687 0-68.283 30.597-68.283 68.283s30.596 68.283 68.283 68.283h71.954c37.687 0 68.283-30.597 68.283-68.283z" />
<path fill="url(#_Linear1)" d="M267.027 174.587c0-36.712-29.806-66.518-66.519-66.518H99.492c-36.713 0-66.519 29.806-66.519 66.518 0 36.713 29.806 66.518 66.519 66.518h101.016c36.713 0 66.519-29.805 66.519-66.518z" />
<path fill="url(#_Linear2)" d="M254.26 177.572c0-38.494-31.252-69.747-69.746-69.747h-69.028c-38.494 0-69.746 31.253-69.746 69.747s31.252 69.746 69.746 69.746h69.028c38.494 0 69.746-31.252 69.746-69.746z" />
<path fill="url(#_Linear3)" d="M236.821 180.274c0-39.359-31.956-71.314-71.315-71.314h-31.012c-39.359 0-71.315 31.955-71.315 71.314 0 39.36 31.956 71.315 71.315 71.315h31.012c39.359 0 71.315-31.955 71.315-71.315z" />
<path fill="url(#_Linear4)" d="M208.862 170.234c0-32.487-26.375-58.862-58.862-58.862s-58.862 26.375-58.862 58.862v24.129c0 32.487 26.375 58.862 58.862 58.862s58.862-26.375 58.862-58.862v-24.129z" />
</g>
<g id="eyes">
<g id="eye__right">
<path id="eye__right--outer" fill="#ffc000" d="M111.356 133.244l18.358 36.717H92.998l18.358-36.717z" />
<path id="eye__right--inner" fill="#fff100" d="M113.542 137.616l16.172 32.345H97.37l16.172-32.345z" />
</g>
<g id="eye__left">
<path id="eye__left--outer" fill="#ffc000" d="M188.644 133.244l-18.358 36.717h36.716l-18.358-36.717z" />
<path id="eye__left--inner" fill="#fff100" d="M186.458 137.616l-16.172 32.345h32.344l-16.172-32.345z" />
</g>
</g>
<g id="mouth">
<path id="mouth__outer" fill="#ffc000" d="M220.685 177.727a30.836 30.836 0 011.449 9.313c0 25.573-32.061 46.334-71.55 46.334-39.49 0-71.55-20.761-71.55-46.334 0-3.188.499-6.302 1.449-9.313 6.662 14.045 35.536 24.627 70.101 24.627s63.438-10.582 70.101-24.627zm-70.101-37.02z" />
<path id="mouth__inner" fill="#ffd600" d="M220.685 176.105a28.3 28.3 0 011.449 8.906c0 24.452-32.061 44.304-71.55 44.304-39.49 0-71.55-19.852-71.55-44.304a28.3 28.3 0 011.449-8.906c6.662 13.43 35.536 23.548 70.101 23.548s63.438-10.118 70.101-23.548zm-70.101-35.398z" />
<g id="tooth__right">
<path fill="#ffc000" d="M127.322 198.093l-14.136-3.524-3.02 12.113 14.135 3.525 3.021-12.114z" />
<path fill="#d18624" d="M125.918 195.066l-14.207-3.227-3.341 14.711 14.207 3.227 3.341-14.711z" />
</g>
<g id="tooth__left">
<path fill="#ffc000" d="M177.168 197.483l14.136-3.524 3.02 12.113-14.136 3.525-3.02-12.114z" />
<path fill="#d18623" d="M178.572 194.456l14.207-3.226 3.341 14.71-14.207 3.227-3.341-14.711z" />
</g>
</g>
<g id="stem">
<path fill="#0c4200" d="M121.668 105.802c1.587-.735 16.741-7.943 19.404-16.404 2.81-8.931-5.309-13.615-8.682-13.615-3.372 0 .563-5.309.563-5.309s18.486-2.061 29.915 11.741c10.881 13.14 14.177 23.167 14.468 24.1.159.135.241.273.241.413 0 1.751-12.803 3.173-28.573 3.173s-28.573-1.422-28.573-3.173c0-.322.432-.633 1.237-.926z" />
<path fill="#083000" d="M133.108 103.304c5.38-3.117 9.053-4.968 11.106-13.094 2.167-8.577-3.954-15.271-11.331-16.721-2.27-.446-.302-1.932-.302-1.932s19.628-1.5 28.441 11.756c8.391 12.619 12.149 18.59 12.373 19.486.123.13 2.257 3.677 2.257 3.812 0 1.682-13.16 3.29-25.321 3.29-12.161 0-28.511-1.006-28.511-2.687 0-.309 10.667-3.629 11.288-3.91z" />
<path fill="#0c4200" d="M135.191 105.139c5.436-3.155 11.569-6.284 13.032-14.138 1.545-8.289-6.132-16.175-11.477-17.183-7.854-1.482-3.911-1.691-3.911-1.691s18.827-.736 25.107 12.076c5.978 12.197 11.372 15.971 11.532 16.836 3.525 4.198 6.609 5.676 6.609 5.806 0 1.625-17.094 3.056-25.76 3.056-8.665 0-28.821-1.042-28.821-2.667 0-.299 7.92.157 13.689-2.095z" />
</g>
</g>
<defs>
<linearGradient id="_Linear1" x1="0" x2="1" y1="0" y2="0" gradientTransform="matrix(-.63958 142.841 -81.1912 -.36354 148.856 108.595)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ff9600" />
<stop offset="1" stop-color="#ac6200" />
</linearGradient>
<linearGradient id="_Linear2" x1="0" x2="1" y1="0" y2="0" gradientTransform="rotate(-89.978 197.822 49.054) scale(138.08301)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ae6300" />
<stop offset="1" stop-color="#ffa52f" />
</linearGradient>
<linearGradient id="_Linear3" x1="0" x2="1" y1="0" y2="0" gradientTransform="rotate(89.828 19.965 130.37) scale(142.35364)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ffaf45" />
<stop offset="1" stop-color="#ac6300" />
</linearGradient>
<linearGradient id="_Linear4" x1="0" x2="1" y1="0" y2="0" gradientTransform="rotate(88.749 17.402 132.699) scale(140.19043)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ffb553" />
<stop offset="1" stop-color="#ae6300" />
</linearGradient>
</defs>
</svg>
</div>
<style>
.container {
width: 100%;
max-width: 300px;
}
</style>
Поменять можно размер тыквы - выделила в коде красным.
Автор Ryan Trimble
Фонарь Джека 2
Фонарик мигающий.
<div class="p-container">
<div class="back"></div>
<div class="back-copy"></div>
<div class="back-2"></div><div class="back-3"></div>
<div class="squish-top"></div>
<div class="squish-bottom"></div>
<div class="eye-left candle">
<div class="inner"></div>
</div>
<div class="eye-right candle">
<div class="inner"></div>
</div>
<div class="nose candle">
</div>
<div class="mouth candle">
<div class="cover"></div>
</div>
<div class="tooth">
</div>
<div class="tooth-2">
</div>
<div class="tooth-3">
</div>
<div class="pumpkin-top"></div>
</div>
<style>
.p-container{
position: relative;
margin: auto;
display: block;
width: 600px;
height: 400px;
}
.back{
position: absolute;
width: 48%;
height: 50%;
top: 24%;
left: 26%;
background-color: orange;
border-radius: 50%;
z-index: 1;
border: 1px solid gray;
}
.back-2{
position: absolute;
width: 35%;
height: 50%;
top: 24%;
left: 32.5%;
background-color: darkorange;
border-radius: 50%;
z-index: 2;
border-left: 1px solid rgba(0,0,0,0.5);
border-right: 1px solid rgba(0,0,0,0.5);
}
.back-3{
position: absolute;
width: 17%;
height: 50%;
top: 24%;
left: 41.5%;
background-color: orange;
border-radius: 50%;
z-index: 3;
border-left: 1px solid rgba(0,0,0,0.5);
border-right: 1px solid rgba(0,0,0,0.5);
}
.squish-top{
position: absolute;
width: 50%;
height: 10%;
background-color: white;
top: 16%;
left: 25%;
z-index: 4;
}
.squish-bottom{
position: absolute;
width: 50%;
height: 10%;
background-color: white;
top: 72%;
left: 25%;
z-index: 4;
}
.eye-left{
position: absolute;
left: 38%;
top: 38%;
z-index: 5;
border-width: 0 22px 34px 22px;
border-color: transparent transparent #845300 transparent;
border-style: solid;
}
.eye-right{
position: absolute;
right: 38%;
top: 38%;
z-index: 5;
border-width: 0 22px 34px 22px;
border-color: transparent transparent #845300 transparent;
border-style: solid;
}
.nose{
position: absolute;
right: 47%;
top: 46%;
z-index: 5;
border-width: 0 20px 30px 20px;
border-color: transparent transparent #845300 transparent;
border-style: solid;
z-index: 10;
}
.mouth{
position: absolute;
width:50px;
height:0px;
left: 39%;
bottom: 32.5%;
border:solid 40px #000;
border-color:transparent transparent #845300 transparent;
border-radius: 0 0 50px 50px;
z-index: 6;
}
.tooth{
position: absolute;
left: 42%;
top: 57%;
border-width: 20px 15px 0 15px;
border-color: orange transparent transparent transparent;
border-style: solid;
z-index: 7;
}
.tooth-2{
position: absolute;
right: 42%;
top: 57%;
border-width: 20px 15px 0 15px;
border-color: orange transparent transparent transparent;
border-style: solid;
z-index: 7;
}
.tooth-3{
position: absolute;
left: 47%;
top: 62.5%;
border-width: 0 15px 20px 15px;
border-color: transparent transparent orange transparent;
border-style: solid;
z-index: 7;
}
.candle{
animation-name: candle;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
}
.pumpkin-top{
position: absolute;
width: 5%;
height: 8%;
left: 47.5%;
top: 18%;
background-color: #194d14;
z-index: 8;
border-radius: 5px 20px 0px 0px;
}
@keyframes candle{
0%{border-color: transparent transparent #845300 transparent;
}
50%{
border-color: transparent transparent #A76A01 transparent;
}
100%{border-color: transparent transparent #845300 transparent;}
}
</style>
Автор MirkoФонарь Джека 3
Фонарь меняет лицо, то доброе, то злое.
<div class="stalk"></div>
<div class="pumpkin">
<div class="stripesOutter">
<div class="stripesInner">
<div class="leftEye">
<div class="eyeBall"></div>
</div>
<div class="leftEyeAngry"></div>
<div class="blushLeft"></div>
<div class="rightEye">
<div class="eyeBall"></div>
</div>
<div class="rightEyeAngry"></div>
<div class="blushRight"></div>
<div class="mouth"></div>
</div>
</div>
</div>
<div class="shadow"></div>
<style>
.stalk {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 20px solid transparent;
border-top: 40px solid #5faa4f;
border-radius: 5px;
margin: 0 auto;
transform: translateY(70px);
}
.pumpkin {
padding-top: 0;
width: 400px;
height: 300px;
background: #ff6f2a;
margin: 0 auto;
margin-top: 60px;
border-radius: 160px;
position: relative;
z-index: 1;
}
.stripesOutter {
height: 300px;
width: 300px;
border-left: solid 4px #e7936b;
border-right: solid 4px #e7936b;
border-radius: 50%;
margin: 0 auto;
}
.stripesInner {
height: 300px;
width: 160px;
border-left: solid 4px #e7936b;
border-right: solid 4px #e7936b;
border-radius: 50%;
margin: 0 auto;
}
.leftEye {
width: 20px;
height: 20px;
border-radius: 50%;
background: #242439;
top: 130px;
animation: blink 10s infinite;
position: relative;
}
.rightEye {
width: 20px;
height: 20px;
border-radius: 50%;
background: #242439;
animation: blink 10s infinite;
left: 140px;
top: 110px;
position: relative;
}
.eyeBall {
width: 6px;
height: 6px;
border-radius: 50%;
background: #ffffff;
transform: translateY(5px) translateX(8px);
position: relative;
}
.blushLeft {
width: 18px;
height: 18px;
border-radius: 50%;
background: red;
top: 165px;
left: 110px;
position: absolute;
animation: blushGone 10s infinite;
}
.blushRight {
width: 18px;
height: 18px;
border-radius: 50%;
background: red;
top: 165px;
left: 273px;
position: absolute;
animation: blushGone 10s infinite;
}
.rightEyeAngry {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 0px solid transparent;
border-bottom: 50px solid #242439;
position: absolute;
top: 110px;
left: 236px;
animation: angryEyes 10s infinite;
}
.leftEyeAngry {
width: 0;
height: 0;
border-left: 0px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #242439;
position: absolute;
top: 110px;
left: 114px;
animation: angryEyes 10s infinite;
}
.mouth {
width: 50px;
height: 15px;
background: #242439;
border-radius: 20% 20% 90% 90%;
transform: translateX(55px) translateY(140px);
}
.mouth:after {
content: "";
width: 0;
height: 0;
position:absolute;
top:8px;
left:0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 20px solid #242439;
animation: teethShow 10s infinite;
}
.mouth:before {
content: "";
width: 0;
height: 0;
position:absolute;
top: 8px;
right: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 20px solid #242439;
animation: teethShow 10s infinite;
}
.shadow {
width: 340px;
height: 60px;
background: #242439;
margin: 0 auto;
border-radius: 80%;
transform: translateY(-40px);
}
@keyframes blink {
0%,49% { transform: scaleY(1)}
50% {transform: scaleY(0)}
51% {transform: scaleY(1)}
78% {transform: scaleY(1)}
80% {transform: scaleY(0)}
100% {transform: scaleY(0)}
}
@keyframes angryEyes {
0% {visibility:hidden}
79% {visibility:hidden}
80% {
visibility:visible;
transform: scale(.6);
}
82% {transform: scale(1)}
98% {transform: scale(1)}
100% {transform: scale(.4)}
}
@keyframes teethShow {
0% {visibility: hidden}
79% {visibility: hidden}
80% {visibility: visible}
100% {visibility: visible}
}
@keyframes blushGone {
0% {visibility: visible}
79% {visibility: visible}
80% {visibility: hidden}
100% {visibility: hidden}
}
@keyframes attack {
0% {transform: scale(1)}
74% {transform: scale(1)}
78% {transform: scale(.8)}
82% {transform: scale(1)}
100% {transform: scale(1)}
}
</style>
Автор Michał KaranterПродолжение в следующей статье.
Спасибо! С наступающим праздником!
ОтветитьУдалитьОн ещё не скоро, но спасибо.
Удалить