Scurtă descriere


Site-ul artweber oferă resurse pentru PhotoShop cum ar fi psd-uri ( Bannere , Logo , Avatare , și coperte pentru Facebook , YouTube ) Iar pentru a-ți realiza propriile creații oferim resurse PhotoShop ( Font-uri , Gradient-uri , Wallpapere , Stil-uri și multe altele ) și pentru site-uri oferim diferite Script-uri , Index-uri.

441
Resurse
1259
Utilizatori
61
Comentarii
Zile online

Forumul ArtWeber Cerere Lucrare Inregistreaza-te Resurse Premium Cum să Downloadez
Meniu
5 Resurse întâmplătoare
    885

    PSD - Logo..

    520

    Brushes -..

    167

    ICONS - GADGETS..

    475

    Font - Blow Brush..

    2516

    PSD - Banner +..

Tutoriale
    494

    Două tonuri Photoshop Tutorial

    261

    Zăpadă cu ajutorul CSS3 animație

    243

    2 variante de buton Back to top

    766

    Cum faci redirect HTTP la HTTPS

    115

    Modificați culoarea barei de adrese din browserul Google Chrome Mobil

Iti place ceea ce facem
Da
Nu
Nu-ma intereseaza
Parteneri
Rețele sociale

Cine este conectat

Total online: 1
Utilizatori: 0
Oaspeţii: 1

Premium
Fii și tu mai deosebit

0

Zăpadă cu ajutorul CSS3 animație

Zăpadă cu ajutorul CSS3 animație



Zăpadă cu ajutorul CSS3 animație

Sunt multe scripturi de zăpadă, dar acesta are un plus forte mare
În primul rând acesta nu este un script, el nu folosește javascript sau JQuery,
Este făcut doar în CSS3, sunt 3 imagini în care 2 sunt blurate că să facă zăpada mai realistică

Instalare

În primul rând avem nevoie să găsim un spațiu unde să se vadă zăpada, este foarte bine să fie doar în header, banner.
De exemplu zăpada va fi în

<div class="artweber">
    aici
</div>


deci asta

<div class="artweber_snow">
<div id="snow"></div>
</div> 


trebuie de băgat ast felii

<div class="artweber">
    <div class="artweber_snow">
    <div id="snow"></div>
    </div> 
</div>


Acuma avem nevoie de css, îl adăugați intru-n css instalat pe site-ul tău

/* zapada */
.artweber_snow { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0;}
#snow {width: 100%; height: 100%; background-image: url("https://artimg.biz/i/0b59c1c3629d30622774a942454425ea.png"), url("https://artimg.biz/i/af341a1c0de0b512dd71a15e2aebca0a.png"), url("https://artimg.biz/i/19c3c02ca0c3b73a8ea225dae7bff749.png"); -webkit-animation: snow 20s linear infinite;-moz-animation: snow 20s linear infinite;-ms-animation: snow 20s linear infinite;animation: snow 20s linear infinite;}
@keyframes snow {0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}}
@-moz-keyframes snow {0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}}
@-webkit-keyframes snow {0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}}
@-ms-keyframes snow {0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}}
/* zapada */

Petru ca zăpada să fie în acel div care lai ales "la noi este artweber", în blocul ".artweber' din css-ul tău trebuie să scriți "position: relative", exemplu

.artweber {
    text-align: center;
    font-size: 15px;
    padding: 20px 0;
    background-image: url(https://artimg.biz/i/54185982f454f3170619907bdaf42752.png);
    font-weight: 500;
    margin-top: 10px;
    position: relative;
}


Dacă pe div-ul dat este un buton ceva care membrii trebuie să meargă pe el atunci adăugați asta

-webkit-pointer-events: none; 
pointer-events: none;


În

.artweber_snow
dle
livedemo

Link direct:
BB-code link:
HTML link:

Stimate vizitator, esti pe site ca utilizator neînregistrat.
Vă recomandăm să vă Înregistrați.
informație
Ai vrea sa lasi un comentariu? Conectați-vă la contul dvs. pentru a lăsa comentarii. Nu ai cont? Aveți posibilitatea să creați un cont gratuit acum.