Поздравления с 8 марта на css
И сегодня статья о том, как сделать на CSS некоторые атрибуты праздника - открытки, подарочные коробки, надписи и т.д. Какие-то из них можно добавить в статью или поставить как гаджет в боковую панель.
Цветы на CSS можно найти по ссылке - https://inshabashka.blogspot.com/2020/03/oformlenie-bloga-na-8-marta.html
Подарочная коробка-иконка
Код:
<div class="circle">
<i class="gift">
<i class="ribbons"></i>
</i>
</div>
<style>
.circle {
width:128px;
height:128px;
background:#ec142e;
border-radius:50%;
left:0;right:0;
position:relative;
top:50%;
bottom:0;
margin:0 auto;
margin-top:0px;
}
i.gift {
background: #fcbe64;
background: -moz-linear-gradient(left, #fcbe64 0%, #fcbe64 42%, #f9b14a 42%, #f9b14a 60%, #fcbe64 60%, #fcbe64 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fcbe64), color-stop(42%,#fcbe64), color-stop(42%,#f9b14a), color-stop(60%,#f9b14a), color-stop(60%,#fcbe64), color-stop(100%,#fcbe64));
background: -webkit-linear-gradient(left, #fcbe64 0%,#fcbe64 42%,#f9b14a 42%,#f9b14a 60%,#fcbe64 60%,#fcbe64 100%);
background: -o-linear-gradient(left, #fcbe64 0%,#fcbe64 42%,#f9b14a 42%,#f9b14a 60%,#fcbe64 60%,#fcbe64 100%);
background: -ms-linear-gradient(left, #fcbe64 0%,#fcbe64 42%,#f9b14a 42%,#f9b14a 60%,#fcbe64 60%,#fcbe64 100%);
background: linear-gradient(to right, #fcbe64 0%,#fcbe64 42%,#f9b14a 42%,#f9b14a 60%,#fcbe64 60%,#fcbe64 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcbe64', endColorstr='#fcbe64',GradientType=1 );
width:70px;
height:45px;
display:inline-block;
border-radius:0px 0px 5px 5px;
margin:0 auto;right:0;left:0;
position:absolute;
top:55px;
z-index:20;
}
i.gift:before {
width:78px;
height:11px;
content:"";
background: #fbb54f;
background: -moz-linear-gradient(left, #fbb54f 0%, #fbb54f 30%, #f9b14a 30%, #f9b14a 70%, #fbb54f 70%, #fbb54f 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fbb54f), color-stop(30%,#fbb54f), color-stop(30%,#f9b14a), color-stop(70%,#f9b14a), color-stop(70%,#fbb54f), color-stop(100%,#fbb54f));
background: -webkit-linear-gradient(left, #fbb54f 0%,#fbb54f 30%,#f9b14a 30%,#f9b14a 70%,#fbb54f 70%,#fbb54f 100%);
background: -o-linear-gradient(left, #fbb54f 0%,#fbb54f 30%,#f9b14a 30%,#f9b14a 70%,#fbb54f 70%,#fbb54f 100%);
background: -ms-linear-gradient(left, #fbb54f 0%,#fbb54f 30%,#f9b14a 30%,#f9b14a 70%,#fbb54f 70%,#fbb54f 100%);
background: linear-gradient(to right, #fbb54f 0%,#fbb54f 30%,#f9b14a 30%,#f9b14a 70%,#fbb54f 70%,#fbb54f 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbb54f', endColorstr='#fbb54f',GradientType=1 );
display:inline-block;
position:relative;
left:-4px;
top:-13px;
z-index:20;
}
i.gift:after {
width:12px;
height:5px;
content:"";
background:#fba152;
display:inline-block;
left:30px;
position:absolute;
top:0px;z-index:30;
}
i.ribbons:after {
width:8px;
height:15px;
background:transparent;
border:5px solid white;
display:inline-block;
position:absolute;
top:-23px;
right:18px;
z-index:999;
content:"";
border-radius:50px;
transform:rotate(40deg);
-ms-transform:rotate(40deg);
-webkit-transform:rotate(40deg);
z-index:5;
}
i.ribbons:before {
width: 20px;
height: 8px;
background: transparent;
border: 5px solid white;
display: inline-block;
position: absolute;
top: -23px;
left: 10px;
z-index: 999;
content: "";
border-radius: 10px;
transform: rotate(-130deg);
-ms-transform: rotate(-130deg);
-webkit-transform: rotate(-130deg);
z-index: 5;
}</style>
Автор кода - Ali Khalilifar
Открытка бабочка и цветочки
<h3>С 8 Марта!</h3>
<div id="container">
<div id="butterfly">
<div id="leftwing"></div>
<div id="rightwing"></div>
</div>
</div>
<style>
{
}
#container {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF12amDA6MfeL8p-nSvEqtK3lYY-4fFYiSUUMtPCYGCct9MMje6BfyZ6kcqoy5lYiA1l-r4O7FlQ5oN_RAZXkgNUDRSnIc7jUQQ3CATfqRVAU55O5LbFuGbcLPfpuwnGtuUZCoZb-PTAWI/s0/flower1189.jpg);
background-repeat: no-repeat;
-webkit-perspective: 600px;
-webkit-perspective-origin: 50% 0%;
perspective: 600px;
perspective-origin: 50% 0%;
width: 660px;
height: 100%;
margin: 50px auto 0;
}
#butterfly {
position: relative;
width: 350px;
height: 312px;
-webkit-transform: rotate3d(0, 1, 0, 0deg) scale3d(0.5, 0.5, 0.5);
-ms-transform: rotate3d(0, 1, 0, 0deg) scale3d(0.5, 0.5, 0.5);
transform: rotate3d(0, 1, 0, 0deg) scale3d(0.5, 0.5, 0.5);
-webkit-transform-origin: 100% 0%;
-ms-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-animation: butterfly 5s linear infinite;
animation: butterfly 5s linear infinite;
}
#leftwing {
position: absolute;
left: 0px;
top: 0px;
width: 210px;
height: 312px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie91gROsLebLCTtqAHOY01tbZLSGdGYF-J_JwlxJW6YUNiFOBJkowmw3KWkrYpEEGpZonlBN7uR7V-N0lkirpbSmWgazkE8OLWzzRrSQnt1QoX9zc00Ui3FuJQbC_ACypez4UIBUqwblbO/s0/Butterfly_Purple_Transparent_PNG_Clip_Art1.png);
background-repeat: no-repeat;
-webkit-transform: rotateX(90deg) rotate3d(0, 1, 0, 0deg);
-ms-transform: rotateX(90deg) rotate3d(0, 1, 0, 0deg);
transform: rotateX(90deg) rotate3d(0, 1, 0, 0deg);
-webkit-transform-origin: inherit;
-ms-transform-origin: inherit;
transform-origin: inherit;
-webkit-animation: leftwing 0.2s linear infinite;
animation: leftwing 0.2s linear infinite;
}
#rightwing {
position: absolute;
left: 175px;
top: 0px;
width: 210px;
height: 312px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie91gROsLebLCTtqAHOY01tbZLSGdGYF-J_JwlxJW6YUNiFOBJkowmw3KWkrYpEEGpZonlBN7uR7V-N0lkirpbSmWgazkE8OLWzzRrSQnt1QoX9zc00Ui3FuJQbC_ACypez4UIBUqwblbO/s0/Butterfly_Purple_Transparent_PNG_Clip_Art1.png);
background-repeat: no-repeat;
-webkit-transform: rotateX(90deg) translate3d(-178px, 0, 0) rotate3d(0, 1, 0, 180deg);
-ms-transform: rotateX(90deg) translate3d(-178px, 0, 0) rotate3d(0, 1, 0, 180deg);
transform: rotateX(90deg) translate3d(-178px, 0, 0) rotate3d(0, 1, 0, 180deg);
-webkit-transform-origin: inherit;
-ms-transform-origin: inherit;
transform-origin: inherit;
-webkit-animation: rightwing 0.2s linear infinite;
animation: rightwing 0.2s linear infinite;
}
@-webkit-keyframes butterfly {
from {
-webkit-transform: rotate3d(0, 1, 0, 0deg) scale3d(0.5, 0.5, 0.5) translate3d(-150px, 300px, 0);
}
25% {
-webkit-transform: rotate3d(0, 1, 0, -90deg) scale3d(0.5, 0.5, 0.5) translate3d(-150px, 300px, 0);
}
50% {
-webkit-transform: rotate3d(0, 1, 0, -180deg) scale3d(0.5, 0.5, 0.5) translate3d(-150px, 300px, 0);
}
75% {
-webkit-transform: rotate3d(0, 1, 0, -270deg) scale3d(0.5, 0.5, 0.5) translate3d(-150px, 300px, 0);
}
to {
-webkit-transform: rotate3d(0, 1, 0, -360deg) scale3d(0.5, 0.5, 0.5) translate3d(-150px, 300px, 0);
}
}
@keyframes butterfly {
from {
transform: rotate3d(0, 1, 0, 0deg) scale3d(0.5, 0.5, 0.5) translate3d(-150px, 300px, 0);
}
25% {
transform: rotate3d(0, 1, 0, -90deg) scale3d(0.5, 0.5, 0.5) translate3d(-150px, 300px, 0);
}
50% {
transform: rotate3d(0, 1, 0, -180deg) scale3d(0.5, 0.5, 0.5) translate3d(-150px, 300px, 0);
}
75% {
transform: rotate3d(0, 1, 0, -270deg) scale3d(0.5, 0.5, 0.5) translate3d(-150px, 300px, 0);
}
to {
transform: rotate3d(0, 1, 0, -360deg) scale3d(0.5, 0.5, 0.5) translate3d(-150px, 300px, 0);
}
}
@-webkit-keyframes rightwing {
from {
-webkit-transform: rotateX(90deg) translate3d(-178px, 0, 0) rotate3d(0, 1, 0, 180deg);
}
50% {
-webkit-transform: rotateX(90deg) translate3d(-178px, 0, 0) rotate3d(0, 1, 0, 100deg);
}
to {
-webkit-transform: rotateX(90deg) translate3d(-178px, 0, 0) rotate3d(0, 1, 0, 180deg);
}
}
@keyframes rightwing {
from {
transform: rotateX(90deg) translate3d(-178px, 0, 0) rotate3d(0, 1, 0, 180deg);
}
50% {
transform: rotateX(90deg) translate3d(-178px, 0, 0) rotate3d(0, 1, 0, 100deg);
}
to {
transform: rotateX(90deg) translate3d(-178px, 0, 0) rotate3d(0, 1, 0, 180deg);
}
}
@-webkit-keyframes leftwing {
from {
-webkit-transform: rotateX(90deg) rotate3d(0, 1, 0, 0deg);
}
50% {
-webkit-transform: rotateX(90deg) rotate3d(0, 1, 0, 80deg);
}
to {
-webkit-transform: rotateX(90deg) rotate3d(0, 1, 0, 0deg);
}
}
@keyframes leftwing {
from {
transform: rotateX(90deg) rotate3d(0, 1, 0, 0deg);
}
50% {
transform: rotateX(90deg) rotate3d(0, 1, 0, 80deg);
}
to {
transform: rotateX(90deg) rotate3d(0, 1, 0, 00deg);
}
}</style>
Красным в коде выделила вашу надпись-поздравление.
Оранжевым - картинка полянки (размер картинки примерно - ширина 660 на 255 px)
Зелёным:
- первое крыло бабочки
- второе крыло бабочки (размеры примерно: ширина 200 высота 312 px)
Если нужно поменять размер ищем его в коде рядом со ссылками на крыло и меняем.
Крылья делаем так: берём картинку бабочки на прозрачном фоне и разрезаем её пополам. Нам нужна только одна левая часть. Адрес этой половинки вставляем в коде в двух местах.
Код подсмотрен на https://codepen.io. Автор - Елена Назарова.
Открытка с поздравлением и крутящимся цветком
Ту открытку, которую вы видели в начале поста, нашла на сайте https://atuin.ru/, где очень много интересного материала.
Все цвета, размеры и текст у открытки можно поменять.
Красным выделила в коде текст, который можно изменить.
Код:
<div class="flower-container">
<div class="flower">
<div class="message"></div>
</div>
<div class="message-text">Ваше поздравление...
<b>С 8 Марта, милые дамы!</b>
</div>
</div>
<style>
.flower-container {
display: flex;
align-items: center;
height: 400px;
position: relative;
font-family: Verdana, sans-serif;
overflow: hidden;
}
.flower {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 160px;
}
.flower::before {
content: "8";
font-size: 70px;
color: #cc002c;
width: 100px;
font-weight: bold;
height: 100px;
background-color: #ff8fa7;
border-radius: 100%;
position: absolute;
line-height: 95px;
text-align: center;
z-index: 1;
}
.flower::after {
content: "";
background-image: url("data:image/svg+xml,%0A%3Csvg id='Layer_1' enable-background='new 0 0 464 464' height='512' viewBox='0 0 464 464' width='512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m454.062 256-5.29 5.28c-17.68 17.68-39.11 29.33-61.74 34.93 12.03 19.96 18.96 43.35 18.96 68.36v7.48c0 18.74-15.2 33.94-33.94 33.94h-7.48c-25.01 0-48.4-6.93-68.36-18.96-5.6 22.63-17.25 44.06-34.93 61.74l-5.28 5.29c-13.26 13.25-34.74 13.25-48 0l-5.28-5.29c-17.68-17.68-29.33-39.11-34.93-61.74-19.96 12.03-43.35 18.96-68.36 18.96h-7.48c-18.74 0-33.94-15.2-33.94-33.94v-7.48c0-25.01 6.93-48.4 18.96-68.36-22.63-5.6-44.06-17.25-61.74-34.93l-5.29-5.28c-13.25-13.26-13.25-34.74 0-48l5.29-5.28c17.68-17.68 39.11-29.33 61.74-34.93-12.03-19.96-18.96-43.35-18.96-68.36v-7.48c0-18.74 15.2-33.94 33.94-33.94h7.48c25.01 0 48.4 6.93 68.36 18.96 5.6-22.63 17.25-44.06 34.93-61.74l5.28-5.29c13.26-13.25 34.74-13.25 48 0l5.28 5.29c17.68 17.68 29.33 39.11 34.93 61.74 19.96-12.03 43.35-18.96 68.36-18.96h7.48c18.74 0 33.94 15.2 33.94 33.94v7.48c0 25.01-6.93 48.4-18.96 68.36 22.63 5.6 44.06 17.25 61.74 34.93l5.29 5.28c13.25 13.26 13.25 34.74 0 48z' fill='%23ff99af'/%3E%3Cpath d='m167.792 76.97c-.88 3.57-1.62 7.17-2.19 10.79-23.155-8.101-41.172-7.42-51.32-7.42-18.74 0-33.94 15.2-33.94 33.94 0 10.087-.701 28.108 7.42 51.32-3.62.57-7.22 1.31-10.79 2.19-12.03-19.96-18.96-43.35-18.96-68.36v-7.48c0-18.74 15.2-33.94 33.94-33.94h7.48c25.01 0 48.4 6.93 68.36 18.96z' fill='%23ffa4b8'/%3E%3Cpath d='m454.062 256-5.29 5.28c-49.555 49.555-128.508 51.655-180.56 6.46-.15.16-.31.32-.47.47 45.197 52.053 43.094 131.006-6.46 180.56l-5.28 5.29c-13.26 13.25-34.74 13.25-48 0l-5.28-5.29c-49.555-49.555-51.655-128.508-6.46-180.56-.16-.15-.32-.31-.47-.47-52.053 45.197-131.006 43.094-180.56-6.46l-5.29-5.28c-13.25-13.26-13.25-34.74 0-48l5.29-5.28c49.555-49.555 128.508-51.655 180.56-6.46.15-.16.31-.32.47-.47-45.2-52.057-43.09-131.01 6.46-180.56l5.28-5.29c13.26-13.25 34.74-13.25 48 0l5.28 5.29c49.555 49.555 51.655 128.508 6.46 180.56.16.15.32.31.47.47 52.053-45.197 131.006-43.094 180.56 6.46l5.29 5.28c13.25 13.26 13.25 34.74 0 48z' fill='%23ffa4b8'/%3E%3Cg fill='%23ff99af'%3E%3Cpath d='m331.702 248h-48.79c-8.836 0-16-7.164-16-16s7.164-16 16-16h48.79c8.836 0 16 7.164 16 16s-7.163 16-16 16z'/%3E%3Cpath d='m181.092 248h-48.79c-8.836 0-16-7.164-16-16s7.164-16 16-16h48.79c8.836 0 16 7.164 16 16s-7.164 16-16 16z'/%3E%3Cpath d='m232.002 347.7c-8.836 0-16-7.163-16-16v-48.79c0-8.837 7.164-16 16-16s16 7.163 16 16v48.79c0 8.836-7.163 16-16 16z'/%3E%3Cpath d='m232.002 197.09c-8.836 0-16-7.163-16-16v-48.79c0-8.837 7.164-16 16-16s16 7.163 16 16v48.79c0 8.837-7.163 16-16 16z'/%3E%3C/g%3E%3Cpath d='m267.742 268.21c-32.099 31.68-86.62 8.779-86.62-36.21 0-44.957 54.483-67.928 86.62-36.21 20.089 18.833 20.113 53.564 0 72.42z' fill='%23ffe773'/%3E%3Cpath d='m252.824 185.564c10.09 4.486 7.974 19.502-2.965 21.019-24.126 3.345-40.329 22.358-43.28 43.257-1.558 11.035-16.645 12.935-21.105 2.722-19.069-43.67 25.521-85.597 67.35-66.998z' fill='%23ffec8f'/%3E%3Cpath d='m253.048 27.801c-8.621 3.885-14.179 10.334-18.526 14.689-26.72 26.733-42.011 61.023-45.279 96.455-1.137 12.326-18.68 13.444-21.6 1.415-10.549-43.454 1.149-91.2 35.08-125.131l5.28-5.29c13.26-13.25 34.74-13.25 48 0 5.79 5.803 3.758 14.837-2.955 17.862z' fill='%23ffb1bf'/%3E%3Cpath d='m122.743 164.598c11.736 1.218 11.82 18.142.107 19.571-29.37 3.584-57.807 16.647-80.338 39.19-5.802 5.78-14.189 12.662-15.605 26.694-.842 8.342-10.833 12.074-16.764 6.147-13.787-13.78-13.192-35.199-.201-48.2l5.29-5.28c29.386-29.386 69.149-42.102 107.511-38.122z' fill='%23ffb1bf'/%3E%3C/svg%3E"); background-position: center;
background-repeat: no-repeat;
background-size: 400px;
width: 400px;
height: 400px;
position: absolute;
animation-name: full-rotate;
animation-duration: 60s;
animation-fill-mode: both;
animation-iteration-count: infinite;
}
.message {
display: flex;
justify-content: center;
font-size: 70px;
width: 80px;
height: 80px;
position: relative;
animation-name: rotate;
animation-duration: 3s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-direction: alternate;
z-index: 9;
text-transform: uppercase;
font-weight: bold;
}
.message::before {
content: "Поздравляем с";
color: white;
white-space: nowrap;
font-size: 18px;
position: absolute;
top: -50px;
display: block;
}
.message::after {
content: "марта";
color: white;
font-size: 30px;
position: absolute;
bottom: -60px;
}
.message-text {
background: #ffc5d0;
border-radius: 20px;
padding: 30px 210px 30px 40px;
color: #ff375b;
font-size: 18px;
line-height: 1.4;
margin: 20px 200px 20px 0;
}
.message-text b {
display: block;
margin-top: 10px;
text-align: right;
}
@keyframes rotate {
0% {
transform: rotate(10deg);
}
100% {
transform: rotate(-10deg);
}
}
@keyframes full-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@media (max-width: 767px) {
.flower-container {
height: auto;
display: block;
}
.flower {
margin-top: 180px;
position: static;
}
.message-text {
padding: 150px 20px 10px 20px;
color: #ff375b;
font-size: 18px;
line-height: 1.5;
margin: 20px 10px;
font-size: 15px;
text-align: center;
}
.message-text b {
text-align: center;
}
}
</style>
На сегодня всё, продолжение темы в следующей статье.
Благодарю за поздравление и подарок! И я поздравляю с Праздником Весны Здоровья, радости, творческой активности и УДАЧИ!
ОтветитьУдалитьСпасибо!
УдалитьРекомендую присмотреться к данному проекту https://losena.net/?r=pavel_efimov
ОтветитьУдалитьНовая фишка, которой нет не на одном подобном проекте.