O szablonach, ich projektowaniu i moich z tym zmaganiach...
Blog > Komentarze do wpisu

Określamy tło, część 1

Tło jest jednym z podstawowych cech decydujących o wyglądzie szablonu bloga. Może to być tylko kolor albo także obraz. W połączeniu z różnicami wielkości można uzyskać bardzo różne efekty przypisując elementom odpowiednie tło. Dodatkowo tło w postaci obrazu może zastąpić wiele różnych sztuczek.

Na początek najprostsze rozwiązania i cechy związane z tłem:

  • background - zapis skrótowy w kolejności: color, image, repeat, attachment, position

background

W rozwinięciu dokładniejsze wyjaśnienia każdej z cech. Pobieżnie omówiłam też wartości jakie te właściwości mogą przybierać. Wszystko to zobrazowane jest przykładami z szablonów udostępnionych przeze mnie. Na koniec każdej cech niewielka tabelka podsumowująca wyjaśnienia i umożliwiająca szybkie odnalezienie wartości dla danej cechy (czyli odpowiedz na pytanie co mamy wpisać przy pozycji obrazku aby wyświetlał się on tylko od połowy, tylko jeden raz i w prawym górnym roku).

CSS: moduł tła i ramek poziom 2.1

Kolor tła background-color

Kolor tła to jedna z najbardziej podstawowych cech. Niemal każdy element może posiadać tło a wybór kolorów chociaż skończony to sięga niewyobrażalnych liczb. I internecie dostępne są różne generatory kolorów, które mogą pomóc w doborze palety. Nic nie zastąpi jednak własnego gustu więc jeżeli masz problem z doborem kolorów ubrania to w wyborze tych szablonowych tez lepiej zdaj się na kogoś innego. Gdy nie ma jednak kogoś takiego odpowiedni program może stać się substytutem. Pamiętaj tylko, że prosty jest lepszy niż skomplikowany.

koloryKolor tła nie jest niezbędny. Przeglądarka na początek sama z siebie doda białe tło a w przypadku reszty zostawi transparentne. Jeżeli jednak dodajemy tło, także obrazowe to warto aby to w postaci koloru było najbardziej zbliżone do tego na obrazie. Warto w tym celu skorzystać z jakiegoś generatora bo pomoże on wskazać najbardziej uśredniony i harmonijny kolor z obrazu.

Kolory podajemy wpisując ich wartość.

Może to być zapis słowny, istnieje grupa kolorów które można zapisać ich angielską nazwą: black, white, red, purple, green, yellow, blue. Tych kolorów jest znacznie więcej. Takie rozwiązanie jest o tyle wygodne, że osobie znającej angielski pozwala na szybkie rozpoznanie wpisanego koloru.

body {
 background-color: Crimson;
}

Innym rodzajem zapisu będzie model rgb, gdzie podaje się wartości addytywnych barw podstawowych czyli czerwonego (r), zielonego (g) i niebieskiego (b). Są dwa sposoby takiego zapisu: dziesiętny i szesnastkowy (heksadecymalny).

Podając wartości kolorów czerwonego, zielonego i niebieskiego w systemie dziesiętnym wpisujemy ich wielkość w zakresie od 0 do 255 gdzie 0 to najciemniejszy odcień czyli czerń a 255 najjaśniejszy czyli biel. Powyższe słowne kolory w tym zapisie będą wyglądały tak: (0,0,0) (255,255,255) (255,0,0) (128,0,128) (0,128,0) (255,255,0) (0,0,255).

body {
 background-color: rgb(220,20,60);
}

W systemie heksadecymalnym (hex) korzystamy z szesnastu cyfr. W związku z tym, że tych cyfr faktycznie tyle nie ma po 9 następuje sześć pierwszych liter alfabety: A, B, C, D, E, F. Czyli powyższe kolory zapisane w tym systemie wyglądać będą tak: #000000; #FFFFFF; #FF0000; #800080; #008000; #FFFF00; #0000FF.

body {
 background-color: #cd143c;
}

Ten ostatnio sposób, heksa decymalny w skrócie hex jest chyba aktualnie najpopularniejszym sposobem dlatego najprościej z niego korzystać.

Specyfikacja CSS3 dodaje nowy model zapisu kolorów: hsl czyli barwa (hue) nasycenie (saturation) i jasność (lightness) co jest wprost genialnym rozwiązaniem bo bardzo ułatwia rozpoznawanie numerów kolorów. 

nazwa właściwości background-color
znaczenie kolor tła
wartość kolor | transparent | inherit
wartość domyślna transparent
można stosować do wszystkich elementów
dziedziczenie nie

Obrazek w tle background-image

przykładCoraz więcej możemy przy pomocy samego CSS ale niewiele rzeczy jest w stanie zastąpić zdjęcie. I chociaż rzadko zdjęcie będziemy dawać w tle to jednak bardziej ozdobne szablony wymagają użycia ilustracji.

Ilustrację dodajemy w szablonie poprzez wpisanie wywołania adresu url. Możemy to zrobić w postaci pełnej, zaczynając od protokołu http:// albo w postaci skróconej jeżeli ilustracja z znajduje się w tym samym miejscu co strona która będzie ją wyświetlać.

Czyli jeżeli w tle używamy ilustracji znajdującej się gdzieś indziej niż w zasobach naszego bolga, przyjmijmy dla przykładu, że na fotoforum to musimy podać jej pełny adres:

h1 {
 background-image: url(http://fotoforum.gazeta.pl/photo/9/pj/pa/cnn7/l7nnEtMUWIAfI34rdB.jpg);
}

Jeżeli natomiast ilustracja znajduje się w zasobach naszego bloga to wystarczy w szablonie podać jej skrócony adres, czyli to co znajduje się po słowach adresu bloga a wskazuje na podstrony:
http://szablonykatemac.blox.pl/resource/szablony_wariant_1.jpg

h1 {
 background-color: #ebe2d1;
 background-image: url(/resource/szablony_wariant_1.jpg);
}

nazwa właściwości background-image
znaczenie ilustracja w tle
wartość adres url | none
wartość domyślna none
można stosować do wszystkich elementów
dziedziczenie nie

Sposób powtarzania tła background-repeat

przykładGdy w tle umieścimy ilustrację pozostaje nam zdecydować jak ona ma wypełniać to tło. Jeżeli jest większa niż przestrzeń elementu to niewiele rzeczy zostało nam do omówienia ale elementy mogą mieć różną wielkość a ilustracje w tle powinny być możliwie jak najmniejsze. W domyśle przeglądarka będzie powtarzać obrazkowe tło we wszystkich dostępnych kierunkach.

Jeżeli w tle umieszczamy regularny wzorek jak to ma przykładowo miejsce w szablonie 19 Light czy też 05 klasycznym to będzie nam odpowiadało, że wzorek powtarzany będzie zarówno w pionie jak i poziomie. W takiej sytuacji nie jest konieczne określanie powtarzania.

zobacz przykład w szablonie 19 »

body {
 background-color: #2f251c;
 background-image: url(/resource/19_bg_2f251c.jpg);
 background-repeat: repeat;
}

Ilustrację możemy powtarzać tylko w jednym wybranym kierunku: albo poziomo, albo pionowo. Wszystkie moje szablony typu A powtarzają wzorek w body poziomo (repeat-x).

zobacz przykład w szablonie 35 »

body {
 background-color:#303030;
 background-image: url(/resource/35_bg_paski.jpg);
 background-repeat:repeat-x;
}

Szablon 61 Fall natomiast w body ma wzorek z deskami powtarzany w wielu kierunkach ale już w głównym pudełku zawierającym całość bloga pojawia się udające papier poziome paski które powtarzane są tylko w pionie (repeat-y).

zobacz przykład w szablonie 61 »

#BlogSzerokaSzpalta {
 background-color:#FFF3DB;
 background-image:url(/resource/61_notka.gif);
 background-repeat:repeat-y;
}

W przypadku ilustracji umieszczanych w tytule, jak to ma miejsce w większości moich szablonów typu nagłówkowego, nie jest potrzebne żadne powtarzanie bo ilustracja ma się wyświetlać tylko raz (no-repeat).

zobacz przykład w szablonie top 08 »

#BlogTytulBox {
 background-image:url(/resource/Drawing_Hands.jpg);
 background-repeat:no-repeat;
}

nazwa właściwości background-repeat
znaczenie powtarzanie obrazu tła
wartość repeat | repeat-x | repeat-y | no-repeat | inherit
wartość domyślna repeat
można stosować do wszystkich elementów
dziedziczenie nie

Zakotwiczenie tła background-attachment

przykładNajrzadziej używana właściwość z dzisiaj opisywanych. Zakotwiczenie tła przydaje się gdy chcemy aby fragment ilustracji pozostał wyświetlany w jednym miejscu gdy reszta będzie swobodnie się przewijać razem ze stroną. Samo zakotwiczenie jest bardzo ciekawą właściwością lecz w przypadku tła rzadko przeze mnie używaną. Ma dwie wartości: zaczepione w miejscu (fixed) i ruchome (scroll).

zobacz przykład w szablonie The Kid »

#BlogBodyBox {
 background-image: url(/resource/film03_bottom.gif);
 background-repeat: no-repeat;
 background-attachment: fixed;
}

nazwa właściwości background-attachment
znaczenie przewijanie tła
wartość scroll | fixed
wartość domyślna scroll
można stosować do wszystkich elementów
dziedziczenie nie

Położenie tła background-position

Ta cecha jest nawet bardziej przydatna ilustracji niż powtarzanie. Przede wszystkim zacznijmy od tego, że położenie podajemy w poziomie i pionie, w tej dokładnie kolejności. Punktem wyjścia jest lewy górny róg elementu, czyli o ile nie zmienimy tego to ilustracja w domyśle będzie miała pozycję top left. Zmieniając możemy ją centrować, wyrównywać do prawej czy dołu.

przykładW przypadku szablonów drobnych ze zdjęciami poza tym, że ilustracja powtarzana jest we wszystkich kierunkach, jest też przyczepiona do górnej krawędzi (położenie w pionie) i wycentrowana w poziomie. W takich przypadkach bardzo polecam centrowanie w poziomie bo łatwiej wtedy określić jaki fragment wzoru trafi nam się na krawędzi bloga (co jest niezwykle istotne gdy ilustracje wystają na to tło).

zobacz przykład w szablonie 05 muzycznym »

body {
 background: #F5F5F5;
 background: url(/resource/m_05_bg.gif);
 background: top center;
}

Dużą zaletą pozycjonowania ilustracji jest możliwość określenia jej pozycji wartością numerową. Mogą to być procenty co pozwala umieścić ilustrację w zależności od wielkości okna przeglądarki. Takich wartości, przyznam się, nie używałam. Przy pozycjonowaniu elementów, owszem zdarza używać mi się procentów przy umiejscowieniu ilustracji już nie.

przykładW związku z tym, że ilustracje mają konkretny wymiar w pikselach to właśnie taka wartość wydaje się najprzydatniejsza. W szablonach Clean (typ A) powtarzany w poziomie wzorek odsuwam nieco od górnej krawędzi aby zmieściły się tam kategorie. Mogłabym to zrobić w zasadzie firetami (em), czyli wysokością czcionki ale w związku z tym, że ta przestrzeń i tak nie jest elastyczna wybrałam bardziej definitywne piksele i ilustrację odsuwam o 50px.

zobacz przykład w szablonie 36 Clean »

body {
 background-color:#303030;
 background-image:url(/resource/36_bg_paski.jpg);
 background-repeat:repeat-x;
 background-position:center 50px;
}

Na koniec powtórzę, wartość pozycji podajemy w kolejności najpierw w poziomie a potem w pionie. Czyli center 50px oznacza wyśrodkowane w poziomie (od lewej i prawej krawędzi) i odsunięte od górnej krawędzi o 50px.

Ciekawostki w celu rozwiania wątpliwości:

  • Jeżeli podajemy tylko jedną wartość to druga w domyśle ustalana jest jako center.
  • Jeżeli nie podajemy, żadnej wartości to obie w domyśle są 0
  • Jeżeli wpiszemy pozycję 10px 30px oznacza to odsunięcie od lewej krawędzi elementu o 10px i od górnej o 30px
  • Aby numerycznie określić położenie od prawej albo dolnej krawędzi musimy najpierw zdefiniować, że zmieniamy punkt odniesienia. Czyli wpisujemy right 10px bottom 30px co oznacza osunięcie od prawej krawędzi o 10px a od dolnej o 30px. Dla porządku tak samo możemy zapisywać lewą i górną ale jeżeli tego nie zrobimy to przeglądarka sama się domyśli wg. klucza. 
  • Można podawać wartość także w liczbach ujemnych. Oznacza to wtedy, że część ilustracji będzie schowana poza krawędzią elementu (a więc niewidoczna). Zapis right -50px oznacza, że ilustracja przyklejona jest do prawej krawędzi elementu a jej 50 górnych pikseli jest niewidoczne bo ilustracja zaczyna się o 50px powyżej elementu.
nazwa właściwości background-position
znaczenie położenie tła
wartość wartość numerowa | left | right | center | top | bottom
wartość domyślna 0% 0%
można stosować do wszystkich elementów
dziedziczenie nie

Zapis zbiorowy background

Na koniec zostaje już tylko zapis zbiorowy. O ile określanie osobno koloru tła, osobno jego ilustracji jest jeszcze w miarę sensowne to gdy trzeba wymieniać poszczególne definicje wyświetlania tej ilustracji zaczynam się irytować i niemal od początku mojego tworzenia szablonów, w przypadku tła, używałam zapisu zbiorowego.

background: color, image, repeat, attachment, position;

Przy czym attachment zazwyczaj nie wpisuję bo najczęściej i tak wybieram wersję którą przeglądaki maja ustawioną jako automatyczną.

html {
 background: #dcd2c5 url(/resource/kate3_ht.jpg) repeat-x center top;
}


body {
 background: url(/resource/kate3_bg.jpg) no-repeat center 250px;
}


blockquote {
 background: url(/resource/kate3_bq.gif) no-repeat left 5px;
}


hr {
 background: url(/resource/kate3_ipt.gif) no-repeat center bottom;
}


#BlogGlownyBox {
 background: #dcd2c5 url(/resource/kate3_gb.jpg) repeat-y left top;
}



O tym czym jest CSS piszę niemal od pierwszej notki. Tematyka tych wpisów jest różna i stale się zmienia jako że nieustannie poprawiam stare notki. Polecam wpisy z kategorii klika słów o css, zawierają one zarówno ogólne wyjaśnienia terminów, listy łatwych do zastosowania stylów, wyliczanki najczęściej używanych cech czy nawet gotowe fragmenty kodu zmieniające znacznie wygląd bloksowego szablonu. Czyli jest zarówno teoria jak i praktyka. Szukając konkretnych elementów można skorzystać wyszukiwarki albo zobaczyć co ja polecam. W zakładkach umieszczam linki do innych stron ale ostatnio (połowa 2011) zaczęłam porządkować wpisy i można tam też znaleźć odnośniki do moich notek. Polecam.

Wszystkie lekcje dotyczące cech CSS można znaleźć pod tagiem właściwości CSS. Jeżeli interesują cię tylko właściwości tła to zapraszam do tagu cechy tła. Lekcje są szczegółowe i zawierają wiele różnych przykładów.

  1. Co jest czym w CSS czyli budowa stylu
  2. Określamy tło, część 1
  3. Ramka jako dodatek do tła, część 2
  4. Zaokrąglone narożniki, czyli o tle część 3
  5. Cień dla elementu, czyli o tle po raz kolejny (część 4)

Specyfikacja CSS stale się zmienia, daje to możliwość ulepszania rozwiązań i dodawania coraz to nowych cech. To przeglądarki decydują jak dana cecha będzie wyglądała na naszym ekranie ale istnieje specyfikacja, która ustala ogólne zasady. W większości przypadków powszechnie obowiązującą jest CSS 2.1 ale prace nad wersją CSS3 trwają od dawna i przebiegają w odniesieniu do poszczególnych modułów. Wiele z rozwiązań zapisanych już w CSS3 działa w nowych wersjach przeglądarek. Polecam więc zapoznanie się z modułem ramek i tła i eksperymentowanie.

sobota, 22 września 2007, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Ramka jako dodatek do tła, część 2 z szablony katemac
Dzisiaj druga część wyjaśnień związanych z modułem specyfikacji CSS dotyczących tła i ramek . Kiedyś pisałam o tle 65279 Określamy tło, część 1 65279 , bardzo pobieżnie co prawda ale ostatnio znacznie rozszerzyłam informacje w tamtej notce więc ... »
Wysłany 2011/11/20 20:22:40
Komentarze
2010/12/12 01:28:12
hej;
mam pytanie: otóż chciałabym by mój każdy wpis miał indywidualnie nadane przeze mnie tło, wiem jak to się robi z background'em ale nie wiem gdzie odnaleźć je (czyli te wpisy) w css albo wpisać każdy pojedynczy wpis, którego kolor chcę zmienić. Chodzi mi o to, że nie wiem gdzie mam wpisać dane tła, jak umiejscowić albo znaleźć kolejno wpisy a potem elegancko pozmieniać im backgroundy;/jak już znajdę albo nazwę w css wpisy to wówczas już sama pozmieniam ich tła.
Dzięki z góry, pozdrawiam;]
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...