Tutorial # 3 - CSS (selektory)

Gdy tworzyłem obecny szablon, najwięcej problemów przysporzył mi CSS. Dokładniej angielskie nazwy selektorów i cechy. Tworzę tu spis selektorów, zarówno tych podstawowych, jak i tych bardziej wyszukanych, których dotąd użyłem i które zapewne będę używał w przyszłości, a nazwy nie będę pamiętam :P Zapewne przydadzą się nie tylko mi. Dziś część I. W tym poście zajmę się selektorami, w przyszłym cechami i różnymi podstawowymi trickami. Starałem się spisać także te, które nie były jeszcze wymienione na żadnym blogu. Pomogą wam (i mi) przy tworzeniu własnego wyglądu bloga i kodu HTML.

1. body - cały blog
   
2. .header lub .header-inner - nagłówek z szerokością bloga - PATRZ
3. .header-outer lub .header-fauxborder-left - też nagłówek, ale na całej szerokości - PATRZ
4. .main-inner - obszar postów, kolumn i pagera(ad. 19) - PATRZ
5. .main-outer - obszar postów kolumn i pagera(ad. 19), ale na całej szerokości - PATRZ
6. .post-outer - post oprócz daty - PATRZ
7. .date-outer - post z datą - PATRZ
8. .hentry - coś podobnego do "post-outer" - PATRZ
9. .post-body - tylko obszar pisania posta - PATRZ
10. h2 - tytuły wszystkich gadżetów + data posta
11. h2.date-outer lub .date-outer - tylko data posta
12. h3 lub h3.post-title lub .post-title lub .entry-title - tylko tytuł posta
13. .comment-link -  napis "... komentarzy" pod postem - PATRZ
14. h4 lub .comments h4 - napis "... komentarzy" po kliknięciu w komentarze - PATRZ
15. .post-footer - stopka posta - PATRZ
16. .post-author lub .vcard - autor postu wyświetlany w notce
17. .post-timestamp - okno godziny dodania postu (wraz z literą "o" przed godziną)
18. .published - okno godziny dodania postu (bez litery "o" przed godziną)
19. .blog-pager - obszar z napisami: "starsze posty", "nowe posty"
20. .feed-links lub .blog-feeds - obszar z napisem "Subskrybuj: Posty (Atom)"
21. .footer-inner - stopka bloga z szerokością bloga - PATRZ
22. .footer-outer - stopka bloga, ale na całej szerokości
23. .column-center-inner - środkowa kolumna - PATRZ
24. .column-left-inner - lewa kolumna (nie to samo co 27)
25. .column-right-inner - prawa kolumna
26. .sidebar lub .sidebar.section - wszystkie gadżety we wszystkich kolumnach
27. #sidebar-left-1 - wszystkie gadżety w lewej kolumnie (nie to samo co 24) - PATRZ
28. #sidebar-right-1 - wszystkie gadżety w prawej kolumnie
29. a:link - nieodwiedzony link
30. a:hover - link po najechaniu myszką
31. a:selected - odwiedzony link
32. selektory i cechy do kart dodała już Yassmine -> TU
33. nazwę selektora danego gadżetu można poznać najeżdżając na IKONĘ EDYCJI danego gadżetu i po znaku "#" wpisać to, co widnieje po "widgetId=". PRZYKŁAD

 

  W związku z moim wyjazdem na narty (środa-niedziela), nie mam pojęcia jak często będzie pojawiać się tu cokolwiek. Będę miał laptopa i pendrive, na którym mam wszystko, ale wiecie... to nie to samo. Może będzie pojawiać się tu coś codziennie, może rzadziej, a może w ogóle nic. Nie wiem, zobaczymy... Życzcie powodzenia ;) No i wreeeeeszcie odpocznę.

  Right in - Skrillex

Tutorial # 2

* wykonanie: moje

* korzystasz z tutoriala? credit!

* nie dawać tutoriala jako swojego

REHAB LAYOUT

 

MATERIAŁY DO TUTORIALA:

•  akcja 1 - paranoidstock.da

•  zdjęcie 1 - zemotion.da

•  zdjęcie 2 - zemotion.da

•  zdjęcie 3 - zemotion.da

•  wzorek 1 - mój - zrobiony na potrzeby instrukcji

•  tekstura 1 - scatterflee.da

•  tekstura 2 - scatterflee.da

•  tekstura 3 - scatterflee.da

•  tekstura 4 - inconditionally

•  tekstura 5 - moja - z poprzedniej notki > przejdź

•  tekstura 6 - moja - zrobiona na potrzeby instrukcji

INSTRUKCJA WYKONANIA: 

1. Otwieramy w AP nowy dokument o wymiarach 800x590px.
 

2. Wklejamy teksturę 1, na nią teksturę 2, ustawiamy ją na mnożenie [multiply], krycie 30%.
 

3. Nanosimy teksturę 3, ustawiając ją na mnożenie [multiply], krycie 30%.
 

4. Teraz nanosimy teksturę 4, ustawiamy na ekran [screen], krycie 70%. Mamy takie tło:

 

5. Otwieramy zdjęcie 1, zdjęcie 2, zdjęcie 3. Wgrywamy i używamy na tych zdjęciach akcję 1. Pamiętajcie o złączeniu warstw po użyciu koloryzacji na każdym zdjęciu.

6. Na nasze tło nanosimy zakcjowane zdjęcie 1 w miejsce jak przedstawia obrazek niżej. Gumką z przybornika wymazujemy tło tak, aby została sama postać. Ostatecznie ustawiamy na ściemnianie liniowe [linear burn], krycie 70%.

7. To samo robimy ze zdjęciem 2 (ściemnianie liniowe [linear burn], krycie 50%) i zdjęciem 3 (ściemnianie liniowe [linear burn], krycie 50%). Miejsca, w których należy umieścić zdjęcia pokazuję obrazek niżej.

 

8. Wklejamy teksturę 5 w miejsce, które pokazuję obrazek poniżej (prawy dolny róg). Ustawiamy na łagodne światło [soft light?], krycie 60%. Miejsce warstwy z teksturą 5 zmieniamy tak, aby znalazła się między teksturami tworzącymi tło a zdjęciami (czwarta od góry) - PATRZ TU.

9. Nanosimy wzorek 1 (uwaga na przezroczyste tło, polecam zapisać, otworzyć i nanieść). Ustawiamy na łagodne światło [soft light?], krycie 30%. Zmieniamy kolejność warstw tak, aby była piąta od góry (pomiędzy teksturą 4 a teksturą 5) - PATRZ TU.

10. Jako mój dodatek nanosimy teksturę 6 (uwaga na przezroczyste tło, polecam zapisać, otworzyć i nanieść) w lewy górny róg (patrz obrazek poniżej). Ustawiamy na łagodne światło [soft light?], krycie 80%. U mnie akurat tak się złożyło, że napis jakby wychodzi z ust modelki na zdjęciu, dlatego wpadłem na ten pomysł, nie u każdego to wyjdzie, do tego potrzeba odpowiedniego zdjęcia. Mamy coś takiego:

11. Czas na mini koloryzację. Tworzymy nową warstwę (warstwa > nowa > warstwa > OK). Wybieramy z przybornika "zaznaczenie prostokątne", zaznaczamy cały obraz (Ctrl+A) i klikamy wypełnij. Jako zawartość wybieramy "kolor...". Gdy otworzy się paleta wybieramy ten  "#da8b7d" (wpisujemy bez znaku "#") - PATRZ TU. Ustawiamy na ściemnianie [color burn?], krycie: 15%.

12. Powtarzamy punkt nr 10 z tymże tym razem dajemy kolor "#b6c1c3". Ustawiamy na ściemnianie [color burn?], krycie: 40%.

13. Warstwa > Scal widocznie

14. Obraz > Dopasowania > Jaskrawość

     Jaskrawość: 39

     Nasycenie: 42
 

PORADY I WSKAZÓWKI: 

•  zdjęcia wykorzystane do instrukcji są oczywiście tylko na próbę, ty nie musisz ich używać (chyba rzecz jasna ;p), eksperymentuj z innymi. Polecam, aby zdjęcia miały ograniczoną kolorystykę, "akcja 1" nie na wszystkich zdjęciach po nałożeniu na tło będzie wyglądać ładnie. Warto zaopatrzyć się w zdjęcie w stylu mojego "zdjęcia 1", wtedy tekstura (punkt nr 10) daje fajny efekt.
•  "tekstura 5" jest tylko moją propozycją, można wybrać inną z notki, do której link podałem wyżej. Z tej notki polecam pobrać wersję z przezroczystym tłem i stamtąd wybrać ;D
•  jak najbardziej zalecam dalszą edycję powstałego nagłówka. Można dodać jakieś ciekawe stocki, które ładnie "odnajdą się" w tle. Polecam paczkę "forest" z inconditionally - drzewa zawsze dobre :D Dodatkowo można pobawić się w dalszą koloryzację.

ten tydzień spędzam na całkowitej libacji

Rehab - Rihanna

Tutorial # 1

* wykonanie: moje

* korzystasz z tutoriala? credit!

* nie dawać tutoriala jako swojego

D A R K   C L A R N E S S   S I G N A T U R E

1. Otwieramy w AP nowy dokument o wymiarach 500x200px.

2. Wklejamy teksturę 1 (©), na nią teksturę 2 (©), którą ustawiamy na jaśniej [lighten].

3. Nanosimy stock 1 (©), umieszczamy po lewej stronie, ustawiamy na ciemniej [darken], krycie 100% i wymazujemy krawędzie, aby ładnie wtopić w tło.

4. Wklejamy stock 2 (©), umieszczamy po prawej stronie, ustawiamy na ciemniej [darken], krycie 70% i wymazujemy krawędzie, aby ładnie wtopić w tło.

5. Otwieramy jako nowy dokument zdjęcie 1 (©), wgrywamy (nie wiesz jak? pisz na gg - znajdź je) i używamy akcję 1 (©).

6. Zakcjowane zdjęcie pomniejszamy do odpowiadających nam rozmiarom (moje zdjęcie zmniejszyłem do 300 px wysokość), umieszczamy je w miarę na środku sygnatury i wymazujemy gumką tak, aby została sama pani. Mamy coś takiego:

 

7. Nanosimy teksturę 3 (©), ustawiamy na jaśniej [lighten], krycie 50%.

8. Wklejamy teksturę 4 (©), zmieniamy kolejność warstw tak, aby znalazła się ona pomiędzy teksturą 1 a teksturą 2 (aby była przedostatnia) - PATRZ TU.

9. Wspomnianą teksturę 4 ustawiamy na jaśniej [lighten], krycie 40%. Uzyskaliśmy:

10. Jako dodatek możemy dodać jeszcze teksturę 5 (moją). Ustawiamy ją w dowolnym miejscu. Jako że nie jestem fanem napisów na sygnaturach, to musimy ładnie ją nałożyć - ustawiamy na nakładka [overlay], krycie 35%.

11. Na koniec, jeśli widzimy jakiekolwiek niedoskonałości w naszej sygnaturze, możemy zredukować (np. najjaśniejsze/najciemniejsze) miejsca psujące efekt. Ja tak zrobiłem. Efekt na początku tutoriala.

chujowa pogoda -.-

Faded - Tyga ft. Lil'Wayne