3. Wgrywanie tła bloga

Witajcie graficy! Tak jak obiecałem - notka o wgrywaniu tła bloga. Znam cztery sposoby, które zapewnię już gdzieś widzieliście. No cóż, prawie każdy blog graficzny takie coś oferuję i ja też skąd się tęgo uczyłem.

Sposób 1

Wchodzimy w Szablon > Dostosuj > Zaawansowane > Dodaj arkusz CSS. Zrobione? Myślę, że tak. Naszym selektorem będzie body. Odpowiada on za tło wszystkiego co mieści się w oknie przeglądarki, reasumując za cały blog. Deklaracją za to będzie background-image: url(LINK DO OBRAZKA). Tak ona wygląda, ponieważ tłumacząc to z angielskiego wyjdzie nam obrazek tła, no i link bezpośredni do niego. Całość wygląda tak:

body {background-image: url();}

Sposób 2

W tym wypadku zmieniamy wyłącznie selektor na .content-inner. Nie obejmuję on paska nawigacyjnego, którego w sumie nie lubię. Reszta pozostaje taka sama. Łatwe, prawda?

.content-inner {background-image: url();}   

 Sposób 3

Tym razem zagłębiamy się w HTML. Wyszukujemy frazę body {. Proponuję użyć "ctrl f". Wtedy w okienko wpisujemy "poszukiwaną frazę", a to co znajdziemy powinno wyglądać tak:

     <![CDATA[

          body {

            min-width: $(content.width);

          }

Tutaj również dodajemy poznaną przez nas deklaracje. Wygląda to tak:

      <![CDATA[

          body {

            min-width: $(content.width);

            background-image: url();

          }

Sposób 4

Wchodzimy w Szablon > Dostosuj >Tło. Wgrywamy jakikolwiek obrazek mieszczący się w limicie. Zapisujemy. Teraz odwiedzamy HTML. W okienko poszukiwania (zrobię o tym oddzielny post, ale było w sposobie 3) wpisujemy nazwę obrazka, u mnie 6.png. To sygnaturka z tego posta XD Odnaleziony tam link podmieniamy na dowolne tło. Proste?

 ~*~

A teraz to rozszerzmy, żeby miało ręce i nogi. Musimy dodać tłu kilka dodatkowych deklaracji. Nie działa to w sposobie czwartym, ponieważ tam zmian dokonujemy w Projektancie, w sekcji Tło.

Kolor:

Żeby dodać kolor pod obrazek wystarczy dopisać:

background-color: #b3b3b3;

 Dzięki temu, stworzymy ładne przejście między grafiką a resztą bloga.

Ruchome & Nieruchome:

Tak, a jak by tu zrobić by tło się nam ruszało? Wystarczy dopisać pod spodem to:

background-attachment: fixed;

A jak zrobić by wyglądało jak zwykły nagłówek? Zmieniamy fixed na scroll.

background-attachment: scroll;

 Rozmiar:

Jak na razie, wiem jak zrobić, by tło przybierało rozmiar monitora, wygląda to tak:

background-size: cover;

Pozycja:

Tło oczywiście możemy pozycjonować. Do góry, do lewej. Jak kto sobie wymarzy. Przykład:

background-position: top center;

A teraz jakie may pozycje:

top - do góry

left - do lewej

bottom - do dołu

right - do prawej

center top - do środka

Możliwości jest wiele, dlatego kombinujcie, bawcie się, łączcie.  

Powtarzanie:

Tło morzę się powtarzać. Najpierw przykład:

background-repeat: no-repeat;

Dostępne opcje:

no-repeat - bez powtarzania.

repeat-y - powtarzanie w pionie.

repeat-x - powtarzanie w poziomie

Przykład z mojego szablonu:

 body {
font: $(body.font);
color: $(body.text.color);
background-color: #b3b3b3;
background-image: url('http://img57.imageshack.us/img577/4474/j2ap.png');
background-attachment: fixed;
background-size: cover;
background-position: top center;
background-repeat: no-repeat;}

†††

To chyba wszystko XD Jeśli coś nie jasne, to proszę śmiało pytać. Hm... A teraz wam zdradzę, że ruszy tutaj nowy projekt zwany: "Gadżet pod lupą". Może niektórzy z was wiedzą, że każdy gadżet można dostosować, ponieważ ma on własne selektory. Na przykład lista blogów ma chyba sześć. A i może ktoś ma ochotę popracować w szabloniarni? Mamy otwarty nabór. Zapraszamy. Zna ktoś może program do filmowania pulpitu? Niedługo się przyda XD Mam sporo zamówień, więć nowy post może we wrześniu? Albo zrobię to o Liście blogów pod koniec siepnia, może być? 

Pozdrawiam ^^ 

2. Ekwipunek szabloniarza

Zapraszam na post przedstawiający rzeczy potrzebne do tworzenia. Nie wliczałem w to programów, na które zostanie poświęcona oddzielna notka.

Większość nagłówków składa się z stocków i tekstur, na które nakłada się napisy, akcje i koloryzacje. A teraz po kolei sobie wszystko wyjaśnimy:

Stock Photos - Używa się do tego dwóch definicji.
A) Wszystkie obrazki znajdujące się w szablonie.
B) Arty pełniące funkcje zapychaczy miejsca. 

A teraz przykład jakich obrazków unikać:

Łatwiej pokazać na ludziach ^^ Jeśli spróbujemy ją wyciąć/wygumkować w dziwnych okolicznościach zniknie nam głowa artystki, a to wygląda niechlujnie.

A teraz jakie wybierać:

Po wycięciu postać będzie cała i to nada pracy estetyczności. Rozumiecie? Jak nie to może spróbuje to lepiej opisać.

Tekstury - Specjalnie przygotowywane "nakładki". Używa się je by pokryć obrazki lub jako tło. To od nich zależy wygląd pracy. Ukrywa się dzięki nim połączenia obrazków.

Można je pobrać na różnych blogach graficznych lub szabloniarniach. Osobiście polecam odwiedzić "Kredyty" Krytycznej Bieli.

Napisów nie omawiam, o tym będzie również oddzielny post. 

Akcje i koloryzacje - są to różne efekty kolorystyczne, które można uzyskać za pomocą takich suwaczków. Gotowe można pobierać od różnych grafików.  Bez nich szablon wygląda na niedokończony/robiony na biegu. 

Oto przykład mojej roboty. Do pobrania w Krytycznej Bieli.


Post krótki, ale ważny. Żeby robić szablony musicie się wpierw co nieco nauczyć teorii. Bez niej ani rusz. Kolejny post z serii o CSS. W razie problemów piszcie. a jak podoba się wam nowy główny? Mi w miarę. Mam parę uwag, ale już nie wprowadzam zmian. We wrześniu pewnie i tak go zmienię. Oczywiście z chęcią odpowiem wam na wszystkie pytanie. Wole sam wam coś ujawnić, niż byście mi grzebali w kodzie XD Doszła nam kolejna podstrona, ale nie martwcie się, przy następnym szablonie dorobię menu graficzne. Ja lecę pisać rozdział opowiadania.
~Pa  

1. Komenda CSS

 

Witajcie kochani, czas zacząć przygodę z CSS. Oczywiście zaczynamy od poznania podstaw.

Wstęp by Wikipedia

Kaskadowe arkusze stylów (ang. Cascading Style Sheets ; w skrócie CSS) to język służący do opisu formy prezentacji (wyświetlania) stron WWW. CSS został opracowany przez organizację W3C w 1996 r. jako potomek języka DSSSL przeznaczony do używania w połączeniu z SGML-em. Pierwszy szkic CSS zaproponował w 1994 r. Håkon Wium Lie.
Arkusz stylów CSS to lista dyrektyw (tzw. reguł) ustalających w jaki sposób ma zostać wyświetlana przez przeglądarkę internetową zawartość wybranego elementu (lub elementów) (X)HTML lub XML. Można w ten sposób opisać wszystkie pojęcia odpowiedzialne za prezentację elementów dokumentów internetowych, takie jak rodzina czcionek, kolor tekstu, marginesy, odstęp międzywierszowy lub nawet pozycja danego elementu względem innych elementów bądź okna przeglądarki. Wykorzystanie arkuszy stylów daje znacznie większe możliwości pozycjonowania elementów na stronie, niż oferuje sam (X)HTML.

  

Wstęp by Raion

Jako, że zapewne większość was nie zrozumiała czym jest CSS, ja to omówię po swojemu, bez zbędnych szczegółów. Style służą do definiowania tego, co zostało stworzone wcześniej za pomocą HTML. Tak, kochani. Nie wpłyniemy na coś co nie istnieje, na przykład: Nie pojedziemy samochodem, którego nie mamy albo nie pofarbujemy włosów na łysej głowie. Komendy nakazują po prostu pewne rzeczy przeglądarce. Wystarczy znać odpowiedni selektor i dobrać deklaracje. Czym one są dowiecie się za chwile. Proszę jednak pamiętać, że kodu nigdy nie może być za mało, ale i za dużo też nie. W tym wypadku przeglądarka zacznie wariować, nie wiedząc na co wpłynąć.

Do dzieła. Poznajmy podstawową komendę:

selektor {cecha: wartość;}

To po kolei, wyjaśnienie nazw jest pod spodem. A teraz gdzie jest ukryta deklaracja? Jest ona zawsze w nawiasie klamrowym i składa się z dwóch elementów: cechy i wartości. 

Selektor - element, na którego chcemy wpłynąć. Każdy ma swoją nazwę, Na przykład środkowa kolumna - .column-center-inner.  

Cecha -  Odpowiada ona za to, na co chcemy wpłynąć w danym elemencie/selektorze. Jeśli chcemy zmienić obramowanie, to jest to - border. Ogólnie cecha ma kilka nazw, ale zostańmy przy dwóch - cecha lub właściwość.

Wartość - Ostatni element podstawowej komendy. Jest on dopełnieniem cechy. Idąc tropem poprzedniej części, dokończmy ramkę, wartość wygląda na przykład tak - 1px solid white.

Poznaliśmy podstawę budowy stylu, a jak to wygląda w praktyce? Żeby ramka nam wyszła komenda wygląda tak:

.column-center-inner {border: 1px solid white;}

Zaznaczmy tu, że zarówno HTML jak i CSS pisane są jedynie za pomocą języka angielskiego. Jak ta komendę przeczyta nasza przeglądarka? Oczywiście zrobi to po kolei. "Zrozumie", że wpływa na środkową kolumnę, potem, że musi przygotować ramkę, a na końcu czyta jej wytyczne. W naszym wypadku ma ona grubość jednego piksela,  składa się z linii ciągłej i jest biała. 

Czy trzeba kilka razy to samo powtarzać? Jasne, że nie. Komenda może składać się z kilku selektorów i deklaracji. Wygląda to następująco:

selektor, selektor, selektor {właściwość: wartość; właściwość: wartość; właściwość: wartość; właściwość: wartość;}  

W tym wypadku jest kilka zasad. Przed nawiasem klamrowym nie może wystąpić przecinek. Jeśli chodzi o deklaracje, to każda musi być oddzielona średnikiem. 

A co się stanie gdy komenda nie działa? Oczywiście, mówimy o przypadku, w którym jest dobrze zapisana. Dodajemy wówczas !important. W wielu sytuacjach pomaga, lecz nie ma 100% pewności. Komenda wygląda wtedy następująco:

 selektor {właściwość: wartość !important;}

Pamiętajcie, że !important zawsze występuje przed średnikiem zamykającym daną deklarację. A i nie zawsze komenda w każdej przeglądarce działa. Dlatego najlepiej mieć wgląd do kilku najpopularniejszych.

~*~

To już wszystko jeśli chodzi o podstawy. A teraz pytanie. Co chcecie potem? Jedziemy dalej z CSS czy zaczynamy grafikę?

Pozdrawiam, Raion

0. Witajcie!

Ohayo! 

Z tej strony Raion Sakana z szabloniarni Krytyczna Biel. Możecie do mnie mówić po prostu Raion. Pewnie ciekawi was co to jest? I słuszie. Znajdujecie się teraz w Art on Monster, miejscu poświęconym instrukcją do portalu blogspot.com. Umiem już co nieco, więc tu się z wami tym podzielę. 

Instrukcje  podzielone są jak na razie na cztery działy: Kod, Grafika, Szablon i Szmery-Bajery XD. A teraz ciut je omówię. W Kodzie poznamy Style CSS i odrobinę kodu HTML. W Grafice zaprezentuję wam mój sposób tworzenia nagłówków. Możliwe, że jeszcze ikon, sygnatur itp. Będą to pliki .xcf i może .pdf. Głównym elementem jednak będą video tutoriale poprzedzone wstępem do programu graficznego. Seria Szablon będzie raczej przedstawieniem. Ujawnie wam cały kod danego szablonu, plik do obróbki i film instruktażowy. A co będzie w Szmerach-Bajerach? Oczywiście, wszystko to co przykuję waszą uwagę. Lub po prostu jakiś problem, który trzeba dokładnie omówić. 

W sierpniu zgłoszę AoM do różnorakich katalogów, więc jeśli jakieś znacie napiszcie w komentarzach. A co by tu jeszcze? A, no tak. Szablon główny będzie się tutaj dość często zmieniał, żeby było tu czysto i świeżo XD   

Pozdrawiam ^^

Pierwsza instrukcja: Poznajemy komendę CSS.