katalog grafików
katalog granger
katalogowo
konstruktywna krytyka blogów
Mara-senpai

Co będzie?

  • Aktualizacja instrukcji 0/15
  • Simple Dark szablon
  • Simple Magic szablon

Witajcie na odnowionej stronie Rinne Lasair!

Nowa strona już jest, ale nadal czeka na kilka poprawek.

zobacz post

Nowy szablon Simple Magic już wkrótce!

Już niedługo pojawi się nowy szablon Simple Magic, który będzie zawierał możliwość dodania video na stronie startowej oraz będzie go można dowolnie edytować przez projektanta.

Zajrzyj do sklepu!

Rinne Lasair posiada teraz własny, oficjalny sklep. Znajdziecie tam również darmówki do pobrania!

przjedź do sklepu
Prosta instrukcja na latające kule, które można wykorzystać gdzie chcecie, w tle, w nagłówku. Jedynie html + css.

Krok 1. 
Wchodzimy w układ i dodajemy gadżet HTML/JS.

 <div id='kule'>
<div class='kula-1'/><div class='kula-2'/>
</div>

Krok 2.
Wchodzimy w css i dodajemy:

#kule {  width: 100%; bottom:0px; left:0px; }

.kula-1 { z-index: -2; width: 20px; height: 20px; position: absolute; left: 0; background: #c60322; border-radius: 90px; box-shadow: 0px 0px 10px #c60322;
animation-name: a; animation-duration: 15s; animation-iteration-count:infinite;
-webkit-animation-name: a; -webkit-animation-duration:10s; -webkit-animation-iteration-count:infinite; }

@keyframes a {0% { bottom: 0px; }100% { bottom: 120%; left: 10%; width: 10px; height: 10px;}}

.kula-2 { z-index: -2; width: 10px; height: 10px; position: absolute; left: 50%; background: #c60322; border-radius: 90px; box-shadow: 0px 0px 10px #c60322;
animation-name: b; animation-duration: 13s; animation-iteration-count: infinite;
-webkit-animation-name: b;-webkit-animation-duration: 13s; -webkit-animation-iteration-count: infinite; }
 
@keyframes b {0% { bottom: 0px; } 100% { bottom: 120%; left: 40%; width: 5px; height: 5px;}}

Krok 3.
Omówienie kodu.
 
By kule się poruszały, używamy do tego animacji.
@keyframes nazwaanimacji {
0% { kod css } /* początek animacji */
100% { kod css } /* koniec animacji */
}

selektor {
animation-name: nazwa animacji;
animation-duration: czas animacji;
animation-iteration-count: pętla animacji;
}

2 komentarze:

Facebook

Kontakt

W sprawie współpracy lub pytań/pomocy rinne.lasair@gmail.com
W sprawach dotyczących zamówień lub sklepu/produktów noskowicz.klaudia@gmail.com
W każdej sprawie można również pisać na facebooka
Numer konta bankowego do przelewów: 96 1020 5558 0000 8802 3176 1645

Dodatkowe informacje

Cennik, Usługi, FAQ oraz formularz kontaktowy znajdują się na stronie głównej.
Portfolio jest na chwilę obecną niedostępne.