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

Ramka jako dodatek do tła, część 2

Dzisiaj druga część wyjaśnień związanych z modułem specyfikacji CSS dotyczących tła i ramek. Kiedyś pisałam o tle (Określamy tło, część 1), bardzo pobieżnie co prawda ale ostatnio znacznie rozszerzyłam informacje w tamtej notce więc polecam zacząć od niej. Opisane są tam podstawowe cechy związane z tłem czyli kolor i obraz. Dzisiaj zaś zajmiemy się obramowaniem.

border

W rozwinięciu dokładniejsze wyjaśnienia każdej z cech. Skrótowo 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 co zrobić np aby ilustracja był obramowania fioletową przerywana linią).

CSS: moduł tła i ramek poziom 2.1

Kolor ramki border-color

przykład kolorNajbardziej oczywista cecha, mówiąc o ramce w pierwszej kolejności zapewne podamy jej kolor. Podobnie jak w przypadku tła sposobów określenia koloru jest kilka.

Słowny. Wpisujemy słowne określenie koloru, podane po angielsku. Lista nazwanych kolorów jest ograniczona ale mimo wszystko dość rozbudowana.

img {
 border-color:tan;
}

RGB dziesiętny. Wpisujemy stopień natężenia poszczególnych barw podstawowych: czerwonego (red), zielonego (green), niebieskiego (blue). Używając systemu dziesiętnego korzystamy z liczb od 0, które oznacza najciemniejszy odcień do 255 określającego najjaśniejszy. Numery wpisujemy w nawiasie poprzedzonym literami rgb.

img {
 border-color:rgb(210,180,140);
}

HEX (rgb hexadecymalny). tak jak poprzednio wpisujemy natężenie poszczególnych kanałów koloru przy czym wpisujemy liczbę dwucyfrową zapisaną w systemie szesnastkowym gdzie po cyfrze 9 następują litery alfabetu. Czyli pełen zestaw cyfr w systemie szesnastkowym wygląda tak: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f. Tak jak poprzednio 0 to najciemniejszy odcień a f najjaśniejszy. Liczby wpisujemy poprzedzone kratką (#).

img {
 border-color:#D2B48C;
}

Jeżeli nie wpiszemy nazwy koloru zostanie wstawiony aktualny kolor elementu pierwszego planu (czyli de facto w uprszczeniu tekstu).

Możemy określić kolor wszystkich ramek na raz korzystając z border-color albo wybrać inny odcień dla każdej z nich w celu uzyskania bardziej zaawansowanego efektu.

input {
 border-top-color: silver;
 border-right-color: grey;
 border-bottom-color: grey;
 border-left-color: silver;
}

nazwa właściwości border-color
border-top-color, border-right-color,
border-bottom-color, border-left-color
znaczenie kolor ramki
wartość numer bądź nazwa koloru
wartość domyślna aktualny kolor
można stosować do wszystkich elementów
dziedziczenie nie

Grubość ramki border-width

Grubość ramki możemy określić na kilka sposobów. Słownie korzystając z trzech wartości: thin, medium, thick. Możemy też użyć wartości numerycznej pamiętając by na koniec dodać jednostkę, w której grubość ma być określona. Najwygodniejsze jednostki to: piksele (px), wysokość litery (em), szerokość litery (ex). 

a {
border-bottom-width: 1px;
}

nazwa właściwości border-width
border-top-width, border-right-width,
border-bottom-width, border-left-width
znaczenie grubość ramki
wartość liczba
wartość domyślna średnia (medium)
można stosować do wszystkich elementów
dziedziczenie nie

Rodzaj ramki border-style

Najczęściej używam najprostszej ramki czyli najzwyklejszej linii. Ramki głównie umieszczam przy ilustracjach zależy mi więc na tym aby nie było one bardzo krzykliwe i aby nie dominowały nad żadną ilustracją w nich umieszczoną. Czasami jednak zdarzają się przypadki gdy oryginalniejsze rozwiązanie jest mile widziane. Zamiast słownie określać co dany kod zrobi otoczę go po prostu cztero-pikselową ramką o danym stylu w kolorze karmazynowym.

wykropkowana

img {
 border-color: crimson;
 border-style: dotted;
 border-width: 4px;
}


linia przerywana

img {
 border-color: crimson;
 border-style: dashed;
 border-width: 4px;
}


linia jednolita

img {
 border-color: crimson;
 border-style: solid;
 border-width: 4px;
}


linia podwójna

img {
 border-color: crimson;
 border-style: double;
 border-width: 4px;
}


ramka wyglądająca na zagłębioną

img {
 border-color: crimson;
 border-style: groove;
 border-width: 4px;
}


ramka wyglądająca na wypukłą

img {
 border-color: crimson;
 border-style: ridge;
 border-width: 4px;
}


ramka i element wyglądające na zagłębione

img {
 border-color: crimson;
 border-style: inset;
 border-width: 4px;
}


ramka i element wyglądające na wypukłe

img {
 border-color: crimson;
 border-style: outset;
 border-width: 4px;
}


Są jeszcze wartości none i hidden. W zasadzie znaczą dokładnie to samo czyli brak ramki. Zazwyczaj używa się po prostu none ale jest pewien określony przypadek kiedy różnica jest widoczna i ma znaczenie. Ten przypadek to tabele i połączone ramki komórek. Pozwolę sobie na razie tego nie wyjaśniać dokładniej bo to temat z innego nieco gatunku. Gdy nie chcesz ramki wpisz po prostu none.

Pora na radę estetyczną made by kate_mac. Z tych ośmiu rozwiązań używam tylko czterech pierwszych: wykropkowanie, linia przerywana, ciągła i podwójna to aż nadto ozdobne rozwiązania.

groove i ridge

Nie przypominam sobie abym widziała obramowanie elementu wykorzystujące taką ramkę, które wyglądałoby elegancko, stylowo albo nowocześnie. Mówiąc szczerze nawet aktualnie byłoby mile widzianym wrażeniem. Takie wklęsłe i wypukłe ramki kojarzą mi się z krzykliwa tandetą, przestarzałymi rozwiązaniami itd. Jeżeli jednak ktoś widział stylowe groove lub ridge to proszę o linka. Widzę zastosowanie dla takich stylów ale w przypadku bardziej zaawansowanych rozwiązań a i wtedy prawdopodobnie można by je zastąpić jednolitą liną. Wklęsłe i wypukłe ramki będą wyglądać ładnie gdy nie będą zbyt duże i będą bardzo podobne do koloru tła. Możne wtedy uzyskać efekt wyrycia ramki dookoła obrazu ale trzeba być bardzo subtelnym w tworzeniu takiego obramowania.

inset i outset

Sam pomysł jest fajny i chętnie stosowałam go w odniesieniu do formularzy wyszukiwarki gdzie pole na tekst było wklęsłe a klawisz szukaj wypukły. Nie zawsze podoba mi się jednak dobór kolorów bo oczywiście będą one odpowiednio jaśniejsze i ciemniejsze od tego który wpiszemy. Często wolałabym aby różnica była mniejsza a przez to efekt ładniejszy i bardziej naturalny. Dlatego chociaż idea efektu bardzo mi odpowiada to jednak wolę sama dobrać odcienie a nie zdawać się na przeglądarkę, która zazwyczaj wybiera bardziej jaskrawe kontrasty.

dotted, dashed, solid, double

ampla i styleJednolita ramka to mój zdecydowany faworyt ale używałam także innych. Te cztery w większości wypadków wystarczą aby uzyskać bardzo różne efekty. Przykładowo linii przerywanych używam aktualnie na stylowym blogu w bardzo drobnej i subtelnej wersji, efekt jest ładniutki i całkiem ozdobny. Chcąc zaś uzyskać bardziej krzykliwy i oryginalny styl, w szablonach ampla użyłam grubej kolorowej przerywanej linii.

nazwa właściwości border-style
border-top-style, border-right-style,
border-bottom-style, border-left-style
znaczenie rodzaj ramki
wartość none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
wartość domyślna brak
można stosować do wszystkich elementów
dziedziczenie nie

Zapis skrócony

Zacznijmy nieco na odwrót. Każda z powyższych cech odnosi się do wszystkich czterech ramek chyba że określono to inaczej, np. w postaci border-botton-style. Pomaga to w wyróżnieniu tylko jednej cechy, tylko jednej ramki. Można jednak grupowo zapisać różne style dla poszczególnych krawędzi. W przypadku czterech stron kolejność zawsze jest ta sama, zgodna z ruchem wskazówek zegara i zaczynająca się od godziny dwunastej. Warto sobie tą kolejność zapamiętać bo przydaje się w wielu miejscach:
top, right, bottom, left.

code {
 border-color: #dc143c #ff6347 #6b8e23;
 border-width: 1px 1ex 1em medium;
 border-style: dotted double dashed solid;
}

Efekt widać gołym okiem. Górna ramka jest jednopikselową wykropkowaną linią w kolorze karmazynowym. Prawa ramka ma kolor pomidorowy i jest grubości litery x lecz w związku z tym, że jest podwójna wygląda nieco delikatniej. Dolna ramka jest zrobiona przerywaną linią o wysokości litery M i w kolorze zgaszonej oliwki. Lewa ramka to jednolita, średniej grubości linia, jej kolor będzie dokładnie taki sam jak prawej czyli pomidorowy. Uroczo, nieprawdaż?

Zapisać możemy to też w taki sposób w jaki opisałam to słownie czyli nie wg cech a wg krawędzi. Ten sam wygląd inny zapis skrócony.

code {
border-top: 1px dotted #dc143c;
border-right: 1ex double #ff6347;
border-bottom: 1em dashed #6b8e23;
border-left: medium solid #ff6347;
}

Taka różnorodność wyglądu jest mocno kłopotliwa ale takie zbiorcze zapisy przydają się gdy chce się coś zmienić bąć urozmaicić tylko w jednym szczególe. Ten pojedynczy szczegół można precyzyjnie wskazać.

Zapis skrócony border

Najprostszy sposób zapisu opisu ramki to wpisanie cechy border i jednolite opisanie grubości rodzaju i koloru. Opis ramki wokół ilustracji na tym blogu wygląda tak:

img {
 border: 1px solid #DCD3C9;
}


Teraz możemy dowolnie zmieniać poprawiać wygląd ramki zmieniając jeden szczegół. Liczy się kolejność zapisu w arkuszu więc zmianę wpisać musimy poniżej. Stronę w książce czytamy od góry do dołu i to samo robi przeglądarka z arkuszem. Czyta zapis dotyczący całej ramki i taki ustawia, następnie czyta zapis np tylko lewej krawędzi i tylko ją zmienia.

Inne przykłady ramek:

zobacz przykład w szablonie 14 żółtym »

img {
 border:#000 2px solid;
}

zobacz przykład w szablonie 14 żółtym »

img {
 border: 2px #333 dashed;
}

zobacz przykład w szablonie hm 01 zielonym »

img {
border:5px solid #626B40;
}

zobacz przykład w szablonie 14 żółtym »

img {
border:1px dotted #A5ABAB;
}

zobacz przykład w szablonie top 06 »

img {
border:3px solid #9933FF;
}

zobacz przykład w szablonie top 02 »

img {
border:3px double #D6CDBC;
}

zobacz przykład w szablonie 03 The Kid »

img {
border:5px solid #000;
}


Na dzisiaj to tyle. Następnym razem mam zamiar kontynuować temat tła i ramek ale może pora już przejść do tego co wykracza poza poziom 2.1 i będzie standardem w ramach specyfikacji CSS3. Niektóre elementy są bardzo dobrze reprezentowane w ramach aktualnych wersji popularnych przeglądarek.

Polecane wpisy z bloga na podobne tematy:

niedziela, 20 listopada 2011, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Zaokrąglone narożniki czyli o tle część 3 z szablony katemac
Specyfikacja CSS zawiera różne wytyczne odnośnie tego jakie cechy i w jaki sposób możemy opisywać w arkuszach stylów. Aktualnie obowiązującą jest CSS2.1 i elementy w niej opisane są w pełni do zastosowania w projektowaniu własnego szablonu. Prace nad ... »
Wysłany 2012/01/09 11:27:30
Komentarze
madamfanaberia
2011/11/20 21:05:46
Świetny wykład, bardzo dziękuję za link odnośnie nazw kolorów - fajna sprawa.
pozdrawiam
cokryjeblox.blox.pl/html
-
kate_mac
2011/11/27 09:08:10
@madamfanaberia
Proszę bardzo, zaglądaj częściej, korzystaj...
Bardzo ładny ten Twój nowy bloks. Czasem zaglądam na Szabloneria Emi czy Szablony by Noa i nie mogę doczekać się Twoich nowych szablonów. Są coraz porządniejsze, coraz mniej rzeczy Ci umyka. Wszystko jest równiutkie i dopracowane... pięknie.
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...