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

7. Video tutorial: Magia Andrzejkowych Kluczy

Dziś krótko. Mam dla was kolejną video instrukcję na wykonanie nagłówka. Trwa ona ponad pół godziny. Sama grafika robiona bez pomysłu :D Jeśli coś będzie nie jasne - pytajcie! Po to tu jestem. Nagłówek nie ma w sobie zbyt dużo filtrów, jest prosty. Szablon z nim wygląda tak. Mam nadzieję, że komuś ten filmik pomoże. Miłego oglądania!

†††

Nadal trwają tutaj prace nad sporządzeniem "kursów" jakie będą tu publikowane. Wiem, schodzi mi się z tym wszystkim, ale to już prawie grudzień i niedługo koniec semestru...

Pozdrawiam, Raion

6. Linkowanie prac na DeviantART.

Temat dla osób dłużej korzystających z tego serwisu banalny, ale dla nowych? Jasne, że nie. Sam na początku miałem ogromne problemy z ogarnięciem tego wszystkiego. Na początek obejrzycie film, a potem troszkę opowiem o możliwościach tego serwisu.

Sam proces wstawiania pokazuję film. Co warto jeszcze powiedź. Jedną z największych zalet jest to, że w jednym miejscu możemy zalinkować za równo plik z szablonem, jak i podgląd pracy. Każdy szablon możemy opisać krótkim komentarzem. Czy też nawet nadawać tytuły. Gorzej jest jeśli chodzi o wybór kategorii, ponieważ nie zawsze wybierają się nam te, które chcemy. Jest wiele sporów o to, że strona niszczy podglądy. To prawda, ale każda to robi. Nawet ImageSchack. Nic już na to nie poradzimy moi drodzy. Hm, warto też dodać, że mamy podgląd na ilość pobierań czy odwiedzin. Nie widzimy, kto pobrał, ale już ile razy - tak. Możemy też obserwować innych użytkowników. Robimy to za pomocą tak zwanego: "+Watch" na profilu danej osoby. Fajną zabawą też jest dawanie "Favourites" To takle coś jak facebook'owe "Lubie to!"

†††

To chyba na tyle. Post krótki i przyjemny. Troszkę się nam tu pozmieniało, ale wszystkie prace są w toku. Dołożone zostaną etykiety i rozbudowane podstrony. A tak w ogóle jak podoba wam się podstrona "instrukcję"?  Tam też jeszcze kilka rzeczy się zmieni, ale wygląd będzie podobny. Jak zrobić takie menu wyjaśnie, w którymś z najbliższych postów, więc w kodzie nie ma co grzebać. 

Pozdrawiam, Raion 

5. Video tutorial: Woda też może być potworem.

Tak, jak obiecałem Notka do 10 października. Wiem we wrześniu było tu strasznie, ale to przez przygotowania do urodzin Krytycznej Bieli, no a teraz pełnie jeszcze funkcję głównego administratora KB, więc czasu brak. Lecz postarałem się i przygotowałem tutorial na nagłówek. To nie az tyle roboty, a efekt myślę, że fajny. Do stworzenia tego nakłoniła mnie rozmowa z nie jaką "Gall", wiecie niby nic, a wyszło coś wielkiego XD

 

|klik|

To, tak. Tekstury pochodzą z Terrible Crash, czyli stworzyła je niezastąpiona Yassmine, a obrazki znalazłem w Google Grafika. Koloryzacje są moje, to podrasowany numerek #20. Oczywiście dorzuciłem tam kilka ulepszeń.

Jeśli macie jakies pytania odnośnie filmu, śmiało można pytać. Nie ma tam lektora, więc coś może być niejasne, nie?

Gotowy szablon będzie można pobrać na Krytycznej Bieli w moim najnowszym poście. I tu rodzi się pytanie. Chcecie tutorial na CSS? Wiecie film i podanie gotowego kodu. Czekam na raczej szybkie odpowiedzi, ponieważ jutro zabieram się za pracę nad kodem. 

A i niedługo szablon zostanie zmieniony i dojdzie tu do sporych zmian :D

Ogłoszenie 1

Mały zastój, ale niedługo powinien się skończyć. Pracuję aktualnie nad urodzinami Krytycznej Bieli, więc to tam kieruję całą swoją uwagę. Nie martwcie się, zamierzam nagrać instrukcję obrazującą powstanie jednego z szablonów, który będziecie mogli podziwiać na urodzinach szabloniarni. Na pewno jego publikacje poprzedzę jakimś krótkim tutorialem pokazującym tworzenie sygnatury. No, oczywiście ważny jest też program na najbliższe miesiące, musimy wpierw przerobić teorię by potem przejść do praktyki. No, ale robić post o tym co będzie? Jasne, że tak. Zamierzam jeszcze bardziej rozszerzyć profil tego miejsca o naukę podstaw informatyki, a także przedmiotów zawodowych potrzebnych do zdania kwalifikacji E12, E13, E14.
Strasznie wyglądają te cyferki, nie? To nic innego jak egzaminy zawodowe zdawane podczas czteroletniej nauki w technikum o profilu informatycznym. Co wy na to? Nie wiem jeszcze czy skupić się na części internetowej czy rozwinąć to o pełny zakres materiału. Nie będzie to na tyle profesjonalne żeby mogło być źródłem jakiejś wiedzy, ale ciekawą zabawą. Co myślicie? Oczywiście nie braknie tu miejsca na grafikę czy szabloniarstwo, ale lepiej chyba wiedzieć na czym się pracuję, prawda? Bo nawet w szabloniarstwie uczymy się od dupy strony XD Zaczynamy od CSS, a potem najwytrwalsi przechodzą na HTML i JS. A powinno być odwrotnie. Wpierw HTML, potem JavaScript i na końcu arkusze. Dlatego, że to taki łańcuch przyczynowo-skutkowy.

Czekam na jakiekolwiek opinie. Może rady czy wskazówki.

~Pa

PS: Post powinien ukazać się do 10 października. 

4. Lista Blogów "...pod lupą"

Ohayo! Dziś post dla bardziej zaawansowanych. Ale najpierw... Dziękuje za pozwolenie publikacji Tyler z GT, która tworzyła "anatomię". Wielkie dzięki.
Dzisiaj przedstawię wam selektory wewnętrzne Listy blogów. Jest ich tam aż 11. Skubańce były dobrze ukryte, ale je wytropiłem XD Zapraszam:

.title - tytuł gadżetu, w tym wypadku: "Moja lista Blogów"

.blog-list-container - cały gadżet bez tytułu. 

.blog-icon - ikona bloga, to takie białe "B", na pomarańczowym tle.

.blog-content - każdy blog oddzielnie bez ikony.

.blog-title - tytuł bloga np: "Szablon to odzwierciedlenie duszy.".

#BlogList1 .item-content - każdy blog od dzielnie, bez ikony i tytułu bloga.

#BlogList1 .item-thumbnail - miniatura grafiki w szablonie. 

#BlogList1 .item-title - tytuł posta bloga.

#BlogList1 .show-option -  selektor odpowiadający za "Pokaż wszystko".

#BlogList1 .item-snippet - treść posta.

#BlogList1 .item-time - data publikacji.

To tyle. Myślę, że ten post jest dość łatwy. Dzięki Shayen-san mamy w poście sygnaturkę! Cudo zrobiła nie? Kolejna część poświęcona będzie grafice, ponieważ posiadam już program do nagrywania pulpitu... Ale to i tak ma być sama teoria :D