🎅 Projekt (4) Karty Animowanej na stronę internetową lub bloga 'Kula Śnieżna'

Zapraszam do przeglądania kodu html i css3

Kochani jeśli podoba ci się to co robię i zawieszam na blogu. Proszę ciebie o wsparcie , abym mógł tworzyć dalej projekty i zawieszać na blogu.

Można wpłacać na PayPal lub zakupić świeczki na moim blogu ŚWIECZKI PARTLITE

I jak, może być ? Pamiętajcie, że na stronie blogspot w miejscu tworzenia posta, trzeba być w widoku html. Znajduje się po lewej stronie na górze. Najpierw używamy znacznika <style> tutaj wpisujemy kod css i trzeba go zamknąc </style> i następnie wpisujemy kod html.

And how can it be :)? There is a free code on the website for making a Christmas banner. Remember that on the blogspot page where the post was created, you need to be in html view. It is located on the top left. First, we use the <style> tag, here we enter the css code and we have to close it </style> and then we enter the html code.

Und wie kann es sein :)? Auf der Website gibt es einen kostenlosen Code zum Erstellen eines Weihnachtsbanners. Denken Sie daran, dass Sie sich auf der Blogspot-Seite, auf der der Beitrag erstellt wurde, in der HTML-Ansicht befinden müssen. Es befindet sich oben links. Zuerst verwenden wir das <style>-Tag, hier geben wir den CSS-Code ein und müssen ihn schließen </style> und dann geben wir den HTML-Code ein.

KOD HTML

KOD CSS3

.banner
{
    
    margin:0;
    padding: 5px;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background: #fb0f0f;
    font-family: 'Times New Roman', serif;
}
h2{
    margin: 0;
    padding: 8px;
    font-weight: 800;
    text-align: center;
    text-shadow: 3px 3px 6px black;
    color: #fff;
    font-size: 40px;
    width: 50%;
}
h3{
    margin: 0;
    padding: 0;
    font-weight: 400;
  	text-shadow: 3px 3px 6px black;
    color: #008000;
    font-size: 38px;
  	text-align: center;
    width: 50%;
}
.box
{
position: relative;
width: 500px;
height: 500px;
background: #0d0238;
border: 2px solid #e69c9c;
border-radius: 50%;
overflow: hidden;
box-shadow: inset 0 0 50px rgba(255, 255, 255,1), 0 20px 50px rgba(0, 0, 0,.5);
}
.box img
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
max-width: 400px;
z-index: 1;
}
.box:before
{
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 80px;
background: #fff;
}
.box:after
{
content: '';
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: 350px;
height: 250px;
background: #fff;
z-index: 2;
border-radius: 50%;
background: linear-gradient(0deg,transparent, rgba(255,255,255,.1));
}
.snow
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjlFEVQO0A6yl-8oFeAComTklEoIh1gr1ni-BPg9cFn6K83EJup_70GgpAkPWTDVLGpMMEb_TxrPGw5z5mGMU2Y7SD-y3eNIMAiA_usqH2p0F-5goyGX9hGV8ulpEo8FBA5lmehgbJ65g/s16000/snow.jpg);
    z-index: 2;
    mix-blend-mode: screen;

}
.snow:nth-child(1)
{
    animation: animate 10s linear infinite ;
}
.snow:nth-child(2)
{
    animation: animate2 15s linear infinite ;
}
.snow:nth-child(3)
{
    animation: animate3 20s linear infinite ;
}
.snow:nth-child(4)
{
    animation: animate2 14s linear infinite ;
}
.snow:nth-child(5)
{
    animation: animate 16s linear infinite ;
}
@keyframes animate
{
    0%
    {
        background-position-x: 50px;
        background-position-y: 0px;
    }
    100%
    {
        background-position-x: 50px;
        background-position-y: 600px;
    }
}
@keyframes animate2
{
    0%
    {
        background-position-x: 100px;
        background-position-y: 0px;
    }
    100%
    {
        background-position-x: 100px;
        background-position-y: 600px;
    }
}
@keyframes animate3
{
    0%
    {
        
        background-position-x: -100px;
        background-position-y: 0px;
    }
    100%
    {
        
        background-position-x: -100px;
        background-position-y: 600px;
    }
}

Dla was mały projekcik / zapraszam do subscrycji na Youtube :)

ATOM CRAFT MAXIMO

Szukaj na tym blogu

🎅 Projekt (4) Karty Animowanej na stronę internetową lub bloga 'Kula Śnieżna' - Snow Ball

Życzę wszystkim fajnej zimy

2021 / 2022

Wojciech Karalus

Zapraszam na moją stronę z blogiem https://atom-craft-maximo.blogspot.com/

Komentarze

🎅 Projekt (4) Karty Animowanej na stronę internetową lub bloga 'Kula Śnieżna' - Snow Ball

Życzę wszystkim fajnej zimy 2021 / 2022 Wojciech Karalus

Zapraszam na moją stronę z blogiem https://atom-craft-maximo.blogspot.com/

Komentarze

Życzę wszystkim fajnej zimy

2021 / 2022

Wojciech Karalus