Kolory, czyli szybki sposób na skórki

 

Jak najszybciej pozwolić użytkownikowi na wybór skórki? Zapisać wszystkie charakterystyczne właściwości (kolory, tła) i odrębnym pliku CSS dla każdego wariantu kolorystycznego. Nie zapewni to zmiany układu elementów na stronie, ale pozwoli jedynie na zmianę jej charakteru. Potem wystarczy wczytać odpowiedni plik w zależności od skórki.

Zewnętrzny plik zawierający definicję kolorów i tła ma także duże praktyczne znaczenie. Wystarczy, że grafikowi wpadnie do głowy pobawić się suwakiem hue/saturation w Photoshopie, żeby zmienić kolorystykę projektu i mamy problem. Mając jednak jeden plik z kilkoma wpisami, modyfikacja 3-5 kolorów nie jest taka straszna i czasochłonna.

Dla przykładu wczesne wersje szablony tego bloga wykonane przeze mnie.

 
 

Podstawy typografii

 

Ostatnio chciałem poszerzyć swoją wiedzę na temat składu tekstu i trafiłem na interesujący skrót najważniejszych zagadnień o typografii.

Wnioski?

Po pierwsze webdesigner jest ograniczony technologią. Jesteśmy zmuszeni korzystać z czcionek popularnych, tak by ujednolicić wygląd naszej strony. Nie możemy zmusić czytelnika do ściągnięcia naszej ukochanej i bliskiej sercu czcionki. Podobnie zestaw właściwości CSS dotyczących tekstu jest stosunkowo ubogi. Kerning? Dzielenie wyrazów? To wszystko dopiero raczkuje.

Po drugie jesteśmy ograniczeni czasem. Internet to najszybsze dostępne medium. Pisze się szybko i dużo, często byle jak. Nie ma tutaj czasu na ręczną eliminację (eksterminację?) wdów czy bękartów.

Po trzecie to fascynująca, lecz… wydaje mi się, że umierająca sztuka. Właśnie ze względu na masy publikacji, które się ukazują.

Warto jednak mieć świadomość z czego się rezygnuje.

 
 

Zaokrąglone rogi – jak to zrobić?

 

Web 2.0 przyniosło portale społecznościowe, a tłumy dostały narzędzia by wyrazić siebie w Internecie. Z mojego punktu widzenia web 2.0 przyniosło te cholerne zaokrąglone rogi ;-) Oto jeden ze sposobów jak się z nimi uporać.

Tworzymy w Photoshopie piękną ramkę, korzystając z wektorowego prostokąta i opcji mieszania (obrys, ewentualnie cień). Gotowy obraz musimy pociąć, tak żeby otrzymać osiem maleńkich obrazów – 4 rogi ramki i 4 przekroje boków.

Ramka z zaokrąglonymi rogami wykonana w Photoshopie

Gdy mamy gotowy zbiór, pozostaje nam skorzystać z kodu:

HTML


<div id="frame">
		<div class="top-left">
			<div class="top-right">
				<div class="bottom-left">
					<div class="bottom-right">
						<div class="top">&nbsp;</div>
						<div class="left">
							<div class="right">
								<div class="inner" style="font-size: 130%;">
								Zawartosc jaka tylko zechcesz.<br /><br />Automatycznie dopasowuje się do zawartości.
								</div>
							</div>
						</div>
						<div class="bottom">&nbsp;</div>
					</div>
				</div>
			</div>
		</div>
	</div>

CSS:


/* lewy gorny rog */
div#frame div.top-left{
	background: url(images/img/top_left.png) top left no-repeat;
}

/* prawy gorny rog */
div#frame div.top-right{
	background: url(images/img/top_right.png) top right no-repeat;
}

/* lewy dolny rog */
div#frame div.bottom-left{
	background: url(images/img/bottom_left.png) bottom left no-repeat;
}

/* prawy dolny rog */
div#frame div.bottom-right{
	background: url(images/img/bottom_right.png) bottom right no-repeat;
}

div#frame div.top{
	height: 7px; /* wysokosc gornej krawedzi */
	margin-right: 14px; /* szerokosc prawej krawedzi */
	margin-left: 8px; /* szerokosc lewej krawedzi */
	background: url(images/img/top.png) top left repeat-x;
}

div#frame div.left{
	padding-left: 8px; /* szerokosc lewej krawedzi */
	background: url(images/img/left.png) top left repeat-y;
}

div#frame div.right{
	padding-right: 14px; /* szerokosc prawej krawedzi */
	background: url(images/img/right.png) top right repeat-y;
}

div#frame div.inner{
	background: #F4FF98;
	padding: 1em;
}

div#frame div.bottom{
	height: 15px; /* wysokosc dolnej krawedzi */
	margin-right: 14px; /* szerokosc prawej krawedzi */
	margin-left: 8px; /* szerokosc lewej krawedzi */
	background: url(images/img/bottom.png) bottom left repeat-x;
}

Oto i wynik:

Zawartosc jaka tylko zechcesz.

Dostosowuje swoją wysokość do zawartości.

Szerokość ograniczona elementem #frame

 
 

Efektowna przezroczystość

 

Ciekawy efekt można uzyskać umieszczając na stronie dużą, dobrej jakości fotografię z pasem przezroczystości w okolicach 50%. Mając pod obrazem jednolite tło, obraz PNG wymiesza się z nim, dając stonowany, ale jednocześnie interesujący podkład dla podpisu.

Jako, że jeden obraz wystarcza za tysiąc słów… Sam zobacz!

Dzięki temu na obrazie możemy wykorzystać zwykły tekst. SEO zachowane, a design króluje.

Parę wskazówek – warto uzupełnić obraz o ramkę (css się kłania) w kolorze głównego tekstu. Można poeksperymentować z kontrastowymi napisami na obrazie (bliskimi czerni i bieli). Pasek półprzezroczysty najlepiej prezentuje się w odległości definiowanej przez złoty podział. Korzystaj z wiedzy starszych, a starożytnych już szczególnie ;]

 
 
« poprzednie wpisynastępne wpisy »