FANDOM


I oto obiecana druga część Od technicznej strony! Jak pisałam już w poprzedniej części, tutaj skupię się na tym, jak dodać gradient lub obrazek na tło profilu. Jeśli nie zajmie mi to za dużo miejsca, opiszę także, jak ładnie dostosować tło.

GradientEdytuj

Jeśli ktoś nie wie, co to gradient, odsyłam do króciutkiego artykułu na Wikipedii na ten temat. A tutaj macie przykład gradientu podłożonego pod tekst (gdy omówię podstawowe elementy, jakie możecie modyfikować w arkuszach CSS, rozpiszę się o stosowaniu kodów bezpośrednio na stronie, choć w poradniku CSS, jak na razie zawieszonym, już o tym wspominałam).

Tytuł~

Tutaj zrobimy coś podobnego, tylko będzie to tłem dla całej strony. Właściwość, jaką będziemy się posługiwać w całej dzisiejszej części, także do dodawania tła obrazkowego, wygląda tak:

BODY.page-Użytkownik_Twoja_Nazwa {
background-image: /* Tutaj pojawi się wartość */
}

Pierwszym przykładem jest gradient liniowy. Do niego będziemy używać następującego kodu:

BODY.page-Użytkownik_Twoja_Nazwa {
background-image: linear-gradient(kierunek, kolor1, kolor2) /* Można użyć więcej niż 2 kolorów, jednak użycie mniej niż 2 nie ma sensu */
}

Przykładowo, jeśli chcemy uzyskać gradient skierowany w prawo, w kolorach czerwonym i niebieskim, musimy użyć tego kodu:

BODY.page-Użytkownik_Twoja_Nazwa {
background-image: linear-gradient(to right, red, blue)
}

Jeśli np. kolor czerwony ma się zakończyć wcześniej, możemy określić miejsce, od którego ma się rozpocząć damy kolor. Na przykład, użyjemy takiego kodu:

BODY.page-Użytkownik_Twoja_Nazwa {
background-image: linear-gradient(to right, red 0%, blue 50%)
}

Rezultat będzie taki, że od połowy strony (50%) będzie sam kolor niebieski, po lewej stronie (0%) będzie czerwony i tylko pomiędzy miejscami rozpoczęcia obu kolorów będą się mieszać.

Kierunek można także określać za pomocą stopni. Na przykład, po użyciu takiego kodu:

BODY.page-Użytkownik_Twoja_Nazwa {
background-image: linear-gradient(45deg, red, blue)
}

Wyjdzie nam coś w tym rodzaju:

Żeby nie było pusto, to w kwestii gradientów liniowych pokażę jeszcze przykładowy kod na gradient z trzema kolorami, od dołu do góry.

BODY.page-Użytkownik_Twoja_Nazwa {
background-image: linear-gradient(to top, red 0%, blue 40%, blue 60%, yellow 100%)
}

Jak widać, jest tu tyle możliwości, że można je mnożyć w nieskończoność. A jako że w HTML jest ponad 16 milionów kolorów, to można z nimi kombinować praktycznie w nieskończoność. Dlatego właśnie teraz do tego mnóstwa możliwości dodam potęgę gradientu promienistego (sama używam go rzadko, ale nie wątpię w to, że znajdzie się jakiś jego miłośnik).

Ogólny kod na niego wygląda tak:

BODY.page-Użytkownik_Twoja_Nazwa {
background-image: radial-gradient(kierunek<tak jakby>, kolor1, kolor2) /*Tak jak wcześniej, można dać więcej kolorów */
}

Nie wiem, jak określić tek "kierunek", bo to tak nie do końca kierunek, a bardziej położenie środka i parę innych ustawień dotyczących tego promienia.

Wszelkie ustawienia, jakie wygrzebałam z Internetu, przedstawię w takiej ładnej tabelce:

Opis Kod Efekt
Brak dodatkowych ustawień
BODY.page-Użytkownik_Twoja_Nazwa {
background-image:radial-gradient(red, blue)
}
closest-side
BODY.page-Użytkownik_Twoja_Nazwa {
background-image:radial-gradient(closest-side, red, blue)
}
circle at <wartość> (na przykładzie 90%)
BODY.page-Użytkownik_Twoja_Nazwa {
background-image:radial-gradient(circle at 90%, red, blue)
}
ellipse at top
BODY.page-Użytkownik_Twoja_Nazwa {
background-image:radial-gradient(ellipse at top, red, blue)
}
ellipse at bottom
BODY.page-Użytkownik_Twoja_Nazwa {
background-image:radial-gradient(ellipse at bottom, red, blue)
}

Oczywiście tu także zapraszam do eksperymentów.

I proszę! Znowu się rozpisałam na tyle, że nie zmieściłam całego tematu. Ale nie martwcie się, następnym razem już na pewno będzie o tłach obrazkowych. Tymczasem do zobaczenia! Mam nadzieję, że gradienty przypadną Wam do gustu ^^