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

Cudzesy: osobliwy szablon monotypiczny

Szablony z cudzym topem robiłam z okazji pierwszych urodzin, zbliżają się piąte a ja zdecydowałam się na ich odświeżenie i uaktualnienie. This It How It Feels zawsze był taki kolorowy i oryginalny. Nie był bardzo popularny ale jako jedyny w swoim rodzaju ma zagwarantowane stałe miejsce na mojej liście szablonów. Odświeżanie i uaktualnianie skończyło się dość osobliwie dla tego szablonu. Na pierwszy rzut oka wszystko wygląda zwyczajnie i całkiem podobnie do poprzedniej wersji.


top 06 - This Is How It Feels

Szablon top 06 - This Is How It Feels,
na starym kodzie, dla blogów na blox.pl. -540px-


Dopiero gdy zaczniesz przyglądać się szczegółom, rzeczom które pisząc bloga uznajesz za oczywiste przekonasz się jak bardzo osobliwy jest to szablon. Jedną z jego cech charakterystycznych był monotypiczny font czyli czcionka udająca krój starej maszyny do pisania (poprzednio było to Courier New). Mimo iż zrezygnowałam z kroju udającego czcionkę starej maszyny w dalszym ciągu pozostawiłam font o stałej szerokości znaku. Jest to teraz stos: Andale Mono, Lucida Console, DejaVu Sans Mono, monospace. Kroje o całkiem współczesnym wyglądzie ale dla równowagi przypisałam im bardzo osobliwe, staroświeckie cechy.

Adres szablonu: http://top06katemac.blox.pl

fragmenty szablon top 06 - This Is How It Feels

Uwagi o szablonie top 06 - This Is How It Feels
szerokość szablonu 820px
szerokość części na notkę 540px
szerokość pobocznej szpalty 220px
kolor tła białe (#fff) w body ciemna grafika
kolor tekstu ciemny (#333)
kolor linków magentowy (#ff0059)
pozostałe kolory zielony (#7acb6f), kremowy (#ffdd99)
krój użyty w notce Andale Mono, Lucida Console, DejaVu Sans Mono (w zależności od systemu)
wielkość tekstu notki 14px
interlinia w notce wartość względna 1.2em
maksymalna wielość elementów graficznych w notce 540px
css-owe ramki przy grafikach tylko cień udający ramkę
 box-shadow:0 0 0 3px #7acb6f;
 margin:0.7em 0 0.5em 0;
wypunktowanie/numerowanie wygląd automatyczny, zmienione odstępy:
cała lista: margin:0.7em 0 0.5em; padding:0 0 0 2em;
pojedynczy punkt: padding:0.5em 0 0.5em;
wzmocnienie/emfaza

wzmocnienie: osobliwe wytłuszczenie wielokrotnie powtórzonym cieniem
 font-weight:normal;
 text-shadow:0 0 0 #ff0059,0 0 0 #333,0 0 0 #333;

emfaza: rozstrzelenie tekstu zamiast kursywy
 font-style:normal;
 text-shadow:1px 0 0 #7acb6f;
 letter-spacing:0.575em;

blok cytatu (blockquote) przesunięcie, zielony cień pod tekstem
nagłówki w notce (h1, h2, h3, h4, h5, h6) automatyczne
h3 - większy górny odstęp, duże litery
h4 - górny i lewy odstęp
wyróżnienie akapitów zmodyfikowany odstęp:
 margin:0;
 padding:0.7em 0 0.5em 0;
baza bloksowa stary kod: 0Etheme Spokojnystary kod: 0Etheme Spokojny
skrypty użytkowników, wklejki avatary w komentarzach, zwijane zakładki, zwinięte archiwum, Ostatnie komentarze, delicious,

dodatkowe klasy i identyfikatory

#menuTop - górne menu (długość 570px)
#uStopka - udawana stopka
.boks i .tyt - dodatkowe kontenery w bocznej szpalcie

Szablon jest całkiem prosty i przejrzysty. Nie kombinowałam w nim żadnych nietypowych czy skomplikowanych rozwiązań w dziedzinie układu czy wyglądu tła: kolorowy top, jasne linki w dwóch kolorach, wyszukiwarka u góry, etc.

Łatwo wymienić w tym szablonie top. Można to zrobić poprzez zmianę adresu w arkuszu albo po prostu poprzez nadpisanie pliku w zasobach. Plik z topem jest jeden, nazywa się: t06_top.jpg a jego wymiary to: 800×200px. Wystarczy przygotować taki plik graficzny, nazwać go tak samo i zaznaczając uprzednio opcję nadpisz pliki dodać do zasobów bloga.

Plik przypisany jest jako tło elementowi #BlogTytulBox, jeżeli ktoś nie boi się kodu css to może pogrzebać sobie i w arkuszu (dla zielonych pierwsza podpowiedź: Jak trafić do arkusza? i Jak znaleźć te selektory?

W szablonie opisane też jest bardziej uniwersalne górne menu a także dodatkowe klasy, które używam do uporządkowania elementów wpisywanych w polu na dodatki.

Najciekawszą rzeczą w tym szablonie są jednak osobliwości. Wiele automatycznych ustawień zmieniłam, w powyższej tabelce możesz sobaczyć co dokładnie. Tutaj omówię tylko trzy rzeczy.

Moją ulubioną osobliwością jest wygląd tytułu notki po najechaniu na niego kursorem. Linki mają przyjazny magentowy kolor, po najechaniu na nie robią się zielone ale link tytułu notki zachowuje się osobliwie. Zamiast zmieniać kolor dostaje pod spodem jakby drugi napis. To nic innego jak przesunięty o połowę znaku zielony cień. Nie jest on rozmyty więc nie wygląda jak typowy cień, do tego ma śliczny pastelowo zielony kolor. Połączenie magentowego linku i zielonego, mocno przesuniętego cienia daje bardzo fajny nowoczesny wygląd. Jakby ktoś chciał go powtórzyć w swoich tytułach o kod powinien wyglądać tak:

.BlogWpisItemTytul a {
 color:#ff0059;
 text-shadow:1px 0 0 #7acb6f;
}
.BlogWpisItemTytul a:hover {
 text-shadow:0.5ex 0 0 #7acb6f;
}

Dwie pozostałe osobliwości to wzmocnienie i emfaza popularnie nazywane pogrubieniem i kursywą. Wzmocnienie wcale nie musi być pogrubieniem. Zauważ, że wszystko zależy od nośnika. Czytając wzmocnienie zaznaczysz bardziej dobitnym tonem, pisząc ręcznie prawdopodobnie podkreślisz wzmacniany tekst, na ekranie przyjęło się, że wzmocnienie pisane jest pogrubionym fontem. A jak być zrobił wzmocnienie pisząc na starej maszynie do pisania? Wydaje mi się, że efekt wytłuszczenia uzyskiwało się poprzez kilkukrotne wpicie tego samego znaku w tym samym miejscu i to właśnie mniej więcej zrobiłam.

Wzmacnianym słowom dodałam cień idealnie pokrywający się z tekstem ale w innym kolorze.

strong {
 font-weight:normal;
 text-shadow:0 0 0 #ff0059,0 0 0 #333,0 0 0 #333;
}

Emfaza natomiast często utożsamiana jest z kursywą bądź pochyleniem pisma. Czy pisząc ręcznie umiałbyś skutecznie pochylić pismo? Zazwyczaj dużo wygodniej jest użyć znaków cytatu bo emfazy najczęściej używa się do zaznaczenia tytułów i słów użytych w nietypowym znaczeniu. Nawet mówiąc zdarza się że kreślimy w powietrzu znaki cytatu chcąc podkreślić inne znaczenie wypowiadanych słów. A jak zaznaczyć emfazę pisząc na maszynie do pisania? oczywiście mogą to być cudzysłowy ale przypomniało mi się stare wydanie pewnej książki gdzie jeden z bohaterów wytykał drugiemu, że za często używa kursywy. Czytając ją jako dziecko miałam problem ze zrozumieniem o co chodzi bo tekst wcale nie był napisany kursywą, był rozstrzelony.

em {
 font-style:normal;
 text-shadow:1px 0 0 #7acb6f;
 letter-spacing:0.575em;
}

Oczywiście wszystkie te zabawy z cieniem pod tekstem nie zawsze będą widoczne. text-shadow należy do specyfikacji CSS3 więc w starych wersjach przeglądarek nie zadziała. Nie byłoby się czym przejmować bo większość przeglądarek wprowadziło cień pod tekstem pięć czy dziesięć aktualizacji temu (Chrome2, Firefox3.5, Opera9.5, Safari1.1) problemem jest Internet Explorer. Pełne aktualizacje przeprowadza rzadziej a wszystko co było przed IE9 jest mocno kłopotliwe.

Monotypiczny font

Najczęściej używanym krojem o stałej szerokości znaku jest Courier New i on właśnie był poprzednio w szablonie. Zależało mi jednak na nowocześniejszym wyglądzie. Wybrałam więc stos Andale Mono, Lucida Console, DejaVu Sans Mono. Nie są to fonty wyglądające tak samo ale ich wygląd podoba mi się i pasuje do szablonu.

Jeżeli chcesz sprawdzić, którą wersję wyświetla twoja przeglądarka to zerknij na poniższe linijki. Jeżeli masz zainstalowany dany font to zobaczysz napis nim zrobiony, jeżeli nie to tekst będzie napisany fontem Courier New.

top 06 - This Is How It Feels - Andale Mono (Mac 96%)

top 06 - This Is How It Feels - Lucida Console (Windows 95%)

top 06 - This Is How It Feels - DejaVu Sans Mono (Linux 97%)

W nawiasie wpisałam prawdopodobieństwo, że dany font jest zainstalowany. Oczywiście to nie jest gwarancja. Dodatkowo te fonty mogą pojawić się u Ciebie nie tylko z systemem ale także z jakimiś programami. Z tego co pamiętam to DejaVu instalowany jest z programami OpenOffice więc będzie też powszechny poza Linuxem.

Pobierz Andale Mono. Pobierz Lucinda Console. Pobierz DejaVu Sans Mono.


wtorek, 12 czerwca 2012, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
Gość: Speed Test, 77.243.191.*
2018/07/25 12:46:39
Sat24, Sat 24
Pogoda, Prognoza pogody
National Forecast
Weather Forecast
Wetter, Wettervorhersage, Wetterbericht
Meteo, Previsioni Meteo Italia
Météo France
United Kingdom Weather
Clima de Espana
Väder
Australia Weather
Canada Weather
Vr
Vejr
Clima


Clima
Wetter
Weer
New Zealand Weather
Ireland Weather

Test prędkości internetu
Speedtest, Speed Test
DSL Geschwindigkeit testen
Test di velocit Internet
Test de velocidad
Test de vitesse Internet
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...