Kolorystyka

Decyzje dotyczące kolorystyki zdają się być - jak zresztą wiele innych przy projektowaniu szablonów - dziedziną sztuki, kompetencji artystycznych twórcy. I jak we wszystkich innych sferach, także i w tej istnieje bogata wiedza, z której warto korzystać.

Zgodnie z załozeniem poradnika i artykułu ograniczymy się tylko do kilku kwestii.

Po pierwsze, kolor ma swoje znaczenie, swoją symbolikę, swoją wymowę. Toteż deczyje w sprawie doboru palety kolorów trzeba poprzedzić rozważeniem takich kwestii, jak skojarzenia z popularnymi kolorami a treści serwisu, zróżnicowany odbiór koloru w różnych kręgach kulturowych czy w zależności od płci odbiorców.

Po drugie, przed ustaleniem kolorystyki serwisu warto przygotować kilka palet do testów. Dzięki zastosowaniu CSS łatwo je przeprowadzić - można stworzyć kilka alternatywnych arkuszy stylów.

Po trzecie, decydując się na style dla konkretnych elementów, rozważyć trzeba z jednej strony ich funkcje w serwisie, a z drugiej kwestie dostępności, czytelności, pamiętając o odpowiednim kontraście, o odbiorcach z problemami w postrzeganiu barw (daltonizm - czy mówią Ci coś pojęcia protanomalii i protanopii?).

W naszym projekcie zastosujemy paletę z różnych odcieni i natężenia granatu oraz dwóch odcieni koloru bordo, aby w sposób kontrastowy sygnalizować odnośniki i tytuły.

W arkuszu stylów można pogrupować rodzaje elementów ze względu na ich rolę w serwisie. Tu wyodrębiono tła elementów, kolorystykę nagłówków, zwykłego tekstu, separatorów i łączy. Zwróć uwagę na oznaczenie w komentarzach numerów kolorów. Wspomagają zamianę palety barw.

Oznaczenie koloru poziomej linii rozdzielającej sprawia kłopot. Jak wiadać w przykładzie, w czterech popularnych przeglądarkach zastosowane są aż trzy style.

/* ================== KOLORYSTYKA ======================= */
/* -------------------- Tła elementów układu -------------*/ 
body {
  color                : #344A66; /* kolor podstawowy */
  background           : #FEFEFE url(../images/leftcolbg.jpg) repeat-y left top;  /* kolor9;*/
  }
#header{
  background           : #D5E2F4 url(../images/pasek.jpg) no-repeat 0 0em; 
  overflow             : hidden; /* odsłania  lub przysłania obrazek tła */
  }
#content_main, #content_main_no_misc { 
  background           : #FFF; /* tło kolumny  centralnej */
  }
#nav_bar, #misc_bar {
  background           : #F4F8FE; url(../images/module_bg.png) repeat-x;
             /* tło bocznych kolumn; można zastosować także obrazek tła*/ 
  }
.moduletable th, div.moduletable h3 {
  background           : #99BBDD url(../images/mod_head_bg.png) repeat-x; /*kolor6 */
  color                : #fff;
  }
table.moduletable, .related_links table td, .short_links table td {
  background           : #fff url(../images/module_bg.png) repeat-x; /*kolor6 */  
}  
#footer, pre,code,.moscode {
  background-color     : #F9FCFF;         /* kolor9 - tło stopki */
  }
/* -------------------- Czcionki --------------*/ 
h1 {
  color                : #6188B7; /* kolor4 */
   }
h2,h3,h4, h5, h6, .contentheading, .contentpagetitle, componentheading_poll, legend {
  color                : #D50100;        /* kolor5 */
}  
.moduletable th, div.moduletable h3, .module div div div h3, .contenttoc th, .mosimage_caption   {
  background-color     : #99bbdd;       /* kolor6 */
  color                : #FFF;          /* kolor11 */
  }
small,strong,b,.modifydate,.createdate {
  color                : #77A1CC;       /*   */
  }        
.sectiontableheader,.sectiontableheader_poll {
  background-color     : #E9F0FC;       /* kolor8 */
  }      
.sectiontableentry1,.sectiontableentry1_poll{
  background-color     : #FEFEFE;       /* kolor10 */
}
.sectiontableentry2,.sectiontableentry2_poll{
  background-color     : #F9FCFF;       /* kolor7 */
}
#mod_search_searchword, .inputbox, .inputbox_search {
  background-color     : #fff;          /* kolor11 */
}
#mod_search_searchword:focus,.mod_search:focus, .inputbox:focus,.inputbox_search:focus {
  background-color     : #F9FCFF;       /*kolor8*/
  color                : #3377BB;       /* kolor3 */  
}
.highlight {
   background-color    : #FF0; /* chyba nie trzeba określać */
}
hr{                                       /* kolor5 */
  background-color     : #77A1CC;      /* Netscape 6/7, Mozilla */ 
  color                : #77A1CC;      /* IE */
  border               : #77A1CC;      /* Opera */
  margin               : .5em 0;
   } 
hr.separator {                            /* kolor4 */
   background-color    : #6188B7;      /* Netscape 6/7, Mozilla */ 
   color               : #6188B7;      /* IE */
   border              : #6188B7;      /* Opera */
   width               : 50%;
   margin              : .5em 0;   
}
/* --------------- Łącza --------------------- */
a:link, a:visited,.button, .category, a.contentpagetitle:link, a.contentpagetitle:visited {  
   color               : #3377BB;      /* kolor3 */
  }  
a:hover {
  color                : #D50100;      /* kolor5 */
  }
a.mainlevel {
  background           : #224C88 url(../images/li_mnu_link.png) no-repeat; 
  padding-left         : 1.5em;  /* dodać jeśli obrazek jako punktor */    
  color:#fff; 
 } 
a.sublevel {
  color                : #D50100; 
 }  
ul#mainlevel-nav li a {  
  color                : #fff;         /* kolor11 */
  background           : transparent;  /* jeśli tło */
  background-color     : #224C88;      /* kolor5 lub 2 */
  }
#pathway{
   background-color    :#99BBDD;
}

Uwagi, źródła

Jeżeli masz sugestie odnośnie treści lub chcesz zgłosić poprawki do tego rozdziału, skomentuj go albo umieść wiadomość na forum: Dokumentacja - Propozycje, zmiany, poprawki

Dziękujemy!

Stefan Wajda, Zespół Dokumentacji PCJ