[CSS] Kolor, ramki, cienie.

Kolory

Bez kolorów nie da się zrobić na dobrą sprawą nic w CSS'ie. Służą do tła (atrybut: background), czcionek (color)... Generalnie są potrzebne. 

Teraz będzie krótko i na temat.

Znam trzy sposoby wpisywania kolorów.

1. Nazwa angielska – sposób ograniczony i nie dający zbyt wiele możliwości definiowania. Wygodny dla ustawania czerni, bieli, szarości. (np. color: red)
2. Z krzyżykiem – wiele możliwości kolorystycznych, nie pozwala na ustawienie przezroczystości. (np. color:#FFF)
3. RGB – tu mamy pełną paletę kolorów oraz możliwość wprowadzenia dodatkowo przezroczystości. (np. color:rgba(100, 100, 1000, 0.8), więcej na ten temat w dalszej części)

Obramowanie i cienie elementów to coś, co może się przydać przy kosmetyce bloga. W tej części wyjaśnię, w jaki sposób edytować ramki, nadawać im kolor oraz styl. Zaczniemy od podstaw.

Obramowanie

Naszym atrybutem odpowiadającym za edytowanie ramki jest „border”.  Gdy chcemy edytować kolor ramki, musimy dopisać po myślniku „color”, gdy zaś chcemy zmienić styl: „style”... Ale to uciążliwe i wymaga dużej ilości wpisywania linijek kodu. Można zrobić to szybciej. Używam skrótki, pomagającej od razu edytować całość obramowania. Tuż za atrybutem wpisuję parametry, oddzielone od siebie spacją.

#LinkList1 {border: 1px (grubość obramowania) dotted (styl ramki) #FFF (kolor)}. 

Znane mi style ramek to:

dotted - kropki

groove - rowek

ridge - grzbiet

outset - tzw. przycisk

inset - tzw. ramka

dashed - kreski

double - podwójna
solid - pojedyncza

Kolor można zapisać w języku angielskim, kodem lub jako rgb, przy czym używając rgb możemy zastosować dodatkowy parametr: przezroczystość. Jest ona bardzo łatwa do ustawienia. W miejsce #FFF z przykładu wpisujemy: rgba(150, 150, 150, 0.5), gdzie pierwsze trzy cyfry definiują kolor, a ostatnia przezroczystość. Obiekt nieprzezroczysty to 1.0; całkiem niewidoczny: 0.0. Im bliżej 1.0 tym mniej przezroczysty obiekt. Ustawianie przezroczystości nie jest konieczne.

Jeśli chcemy obramować element tylko z lewej strony, nasz atrybut będzie wyglądał tak: 

 .selektor {border-left: 2px solid red}

i analogicznie do tego: -top, -bottom, -right odpowiadają za pozostałe granice.

Jeśli już mówić o obramowaniu, warto wspomnieć o zaokrągleniu rogów. Posłuży nam do tego atrybut: border i wszelkie jego końcówki. A nawet powiem więcej: tu trzeba popisać.

By zaokrąglić rogi elementów, musimy zastosować atrybut: border-radius. Wartości, jakie mu przypisujemy, wyrażamy w pikselach; im wyższa liczba, tym bardziej zaokrąglone (Można również wartość wyrazić w procentach, jednak odradzam: czasami wychodzi z tego bałagan. Procenty dobrze stosować dla elementów całkiem okrągłych.). Zatem dla zaokrąglonej na wszystkich rogach ramki, kod prezentuje się tak:

.selektor {border-radius: 20px}

Jeśli chcemy zaokrąglić tylko lewy górny róg, nasz kod będzie wyglądał tak:

.selektor {border-top-left-radius: 20px}

Konieczne jest określenie który rożek edytujemy ;). Analogicznie do przykładu określamy pozostałe trzy rogi.

Cienie

Cienie elementów i tekstu na blogu mogą spełniać rolę zarówno cienia jak i podświetlenia, w zależności ustalenia koloru. 

Ustawianie cienia dla elementu (np. całości listy stron) wykonuje się przy pomocy atrybutu „box-shadow”. Po dwukropku musimy wprowadzić cztery dane oddzielone spacją i wyrażone w px oraz wybrany przez nas kolor (rgb lub zapis #FFF). Ustawienie czerwonego cienia/podświetlenia dla gadżetu listy stron będzie zatem wyglądać w ten sposób:

#PageList1 {box-shadow: 0px 0px 10px 0px red}

Trzecia wartość „pikselowa” odpowiada nam za „zasięg” cienia. Można się nią pobawić, im jest wyższa tym cień bardziej rozmyty i mniej widoczny.

Ustawianie cienia dla tekstu wygląda bardzo podobnie, z tą różnicą, że parametry mamy w px mamy trzy, nie cztery, a nasz atrybut brzmi „text-shadow”.

#PageList1 a{text-shadow: 0px 0px 5px blue}

Dodatek znaleziony w sieci: neonowy tekst (należy wkleić w wąsach):

color: #fff; text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;