9. SpeedART: W świecie magii CM Rowinadale

Dzisiejszy dzień jest dla mnie szczęśliwy. A nie zapowiadał się. Musiałem wstać o 04:40 i cały dzień  w szkole... Jednak miło, że w jego ostatniej części stało się coś miłego. Jak wiecie AoM jest instrukcjami współpracującymi z Krytyczną Bielą, ale od dziś także tam.... taadaam... z Zaczarowanymi Szablonami. Cieszę się z tego bardzo, ponieważ wiem, ze będę mógł pomóc większej liczbie osób.

Na dziś przygotowałem speedART, czyli film z przyśpieszeniem. Pokazuję on jak wykonać nagłówek do szablonu w Fotoszopie xD W grudniu powinna pojawić się jeszcze pełna wersja tego filmu, ale kto wie. Nagłówek wygląda tak, a na szablonie prezentuję się tak.

Hm, w razie jakiś niejasności czy coś proszę śmiało pisać. Ja na prawdę nie gryzę, kochani. :D Niestety szybko się żegnam, ponieważ muszę się pouczyć niemieckiego :(.

Pozdrawiam, Raion

8. Wysuwane elementy

Temat można by rzec, że na topie. Lubimy sobie coś poukrywać, poprzemieszczać :D Mam nadzieję, że wszystko jasno przedstawiłem w poście! Jeśli nie, to proszę śmiało pytać. Ja nie gryzę :D
Ogólnie ten efekt to nie wysuwanie, a zmiana położenia elementu przed i po najechaniu. Dochodzi do tego również jego wysokość na stronie. To może wpierw o pozycjach. Jeśli chcemy, żeby nasze coś jeździło za nami po stronie to dajemy "fixed", a jeśli ma być tylko gdzieś ukryte to pozycję relatywną bądź absolutną. Łatwe? Niekoniecznie? Ale to nie jest trudne. Wystarczy poznać podstawę tej zmiany. Dajmy na to, że chcemy, żeby ramka z tekstem wyjeżdżała nam z dołu po prawej. Musimy znać selektor, w tym wypadku ID widżetu, a będzie to #Text1. Wiemy, że okienko ma jeździć, czyli fixed. No to zbudujmy CSS najpierw dla elementu, który będzie "ukryty".

 #Text1 {
position: fixed;
bottom: -500px;
right: 40px;
transition:all 1s;
 -moz-transition:all 1s;
 -webkit-transition:all 1s;
 -o-transition:all 1s;}

Teraz wam objaśnię co to jest po kolei:
Positon: fixed; - odpowiada, za unieruchomienie elementu na stronie względem okna przeglądarki.
Bottom: -500px; - jest to po prostu wysokość elementu na stronie. Jeśli jest ujemna, to logicznę, że wypchnie nam element poza okno przeglądarki.
Right: 40px; - Tu chodzi o położenie elementu względem boków monitora.
Z-index: 100; - służy do tego, aby daną rzecz wyciągnąć na wierzch strony.
Transition:all 1s; - i fragment kodu niżej odpowiadają za czas w jakim dany element ma poprócić na swoje miejsce.

Teraz zajmijmy się elementem po najechaniu na niego myszką.

#Text1:hover {
bottom: 0px;
right: 40px;
z-index: 100;
transition:all 1s;
 -moz-transition:all 1s;
 -webkit-transition:all 1s;
 -o-transition:all 1s;}

Tutaj dodajemy ":hover", czyli nadajemy klasę po najechaniu. A zmienienie wartości w bottom powoduję jego zmianę. Cały myk polega na ustawieniu czasu, w której zały proces będzie zachodził. I proszę mamy ciekawy, ale bardzo prosty efekt, który może przyozdobić naszą stronę.
Jeśli chcemy za to żeby element wyjeżdżał spod na przykład kolumny, ale nie jeździłza nami po stronie zmieniamy wyłącznie fixed na relative lub absolute. W ten sposób możemy "ukryć" tak na prawdę wszystko, przez pojedyncze elementy po całe kolumny. 

Pozdrawiam, Raion