Пасхальная открытка css
Почти перед всеми большими праздниками я выкладываю коды для украшения сайта. Можно обходиться и без всяких поздравлялок, но думаю, читателю будет приятно, если он зайдёт не на безликий, однотипный блог/сайт, а на тот, где автор о нём помнит, не забыл поздравить с праздником, сказал тёплые слова.
И сегодня продолжу тему поздравления читателей с Пасхой.
Поздравление
Установить код поздравления можно на отдельной странице, а потом удалить её или закрыть от читателей до следующего года. Либо установить в сообщении перед праздником.
Выглядит изображение так:
Код:
<div class="easter">
<div class="egg style1"></div>
<div class="egg style2"></div>
<div class="egg style3"></div>
<div class="egg style4"></div>
<p1>Поздравляю Вас со светлым праздником Пасхи!</p1>
</div>
<style>
@import url(https://fonts.googleapis.com/css?family=Chewy);
p1{
font-family: 'Chewy', cursive;
font-size: 3vw;
color: rgb(235,100,0);
text-align: center;
text-shadow: 0 0 10px rgba(255,255,0,.7);
}
.easter {
display: inline-block;
margin: 4vmax 0 0;
}
.egg {
position: relative;
display: inline-block;
width:10em;
height:13em;
margin:30px auto;
background:#f7f7f7;
border-radius:50% / 55% 55% 45% 45%;
box-shadow: 1.3em 1.3em 2.5em -1em rgba(0, 0, 0, .1),
.2em .8em 1.3em -.1em rgba(0, 0, 0, .7),
-1em -2.5em 5em rgba(0, 0, 0, .3) inset,
-.4em -.3em 2.5em rgba(0, 0, 0, .4) inset;
}
.style1, .style2 {
background-image: radial-gradient(circle at center -50%,
hsla(346,100%,40%,1) 0%,
hsla(346,100%,40%,1) 10%,
hsla( 61,100%,40%,1) 11%,
hsla( 61,100%,40%,1) 20%,
hsla(106,100%,40%,1) 21%,
hsla(106,100%,40%,1) 30%,
hsla(173,100%,40%,1) 31%,
hsla(173,100%,40%,1) 40%,
hsla(225,100%,40%,1) 41%,
hsla(225,100%,40%,1) 50%,
hsla(293,100%,40%,1) 51%,
hsla(293,100%,40%,1) 60%,
hsla(359,100%,40%,1) 61%,
hsla(359,100%,40%,1) 70%,
hsla( 61,100%,40%,1) 71%,
hsla( 61,100%,40%,1) 80%,
hsla(106,100%,40%,1) 81%,
hsla(106,100%,40%,1) 90%,
hsla(173,100%,40%,1) 91%,
hsla(173,100%,40%,1) 100%
);
}
.style2 {
background-size:2.5em 2.5em;
}
.style3 {
background-color:#d22;
background-image: linear-gradient(135deg, #eceddc 25%, transparent 25%), linear-gradient(225deg, #eceddc 25%, transparent 25%), linear-gradient(315deg, #eceddc 25%, transparent 25%), linear-gradient(45deg, #eceddc 25%, transparent 25%);
background-size:40px 40px;
}
</style>
Что можно изменить в коде:Текст в коде выделила его красным.
Шрифт текста — выделила оранжевым
Цвет текста — отметила зелёным
Тень текста — выделила синим цветом
Размер текста — выделен розовым
Цвет яиц так же можно поменять. Разноцветные записаны в цветовой палитре hsla. Подбирать цвета можно в конвертере на сайте Сolorscheme (https://colorscheme.ru/color-converter.html)
Оформление текста можно сделать другое, поменяв текстовый код на свой. Например, текст с тенями, градиентный, с ховер-эффектом и так далее.
Код увидела на сайте https://codepen.io.
Комментарии со спамом удаляются.