Nieinwazyjne inicjały nagłówków

Project: Terminated

Blog nie jest już dalej prowadzony ani aktualizowany. Mimo tego, wpisy i komentarze są dalej dostępne. Możesz przeczytać pożegnalny wpis albo przejść do archiwum.

Zastanawiało mnie jak zrobić ładne zdobienia pierwszych liter nagłówków bez dokładania dodatkowego spana z klasą. Wystarczyłby mi id albo klasa nagłówka - aby użyć odpowiedniej litery. Udało mi się osiągnąć wynik na trzy sposoby - z czego tylko jeden jest warty czegoś więcej niż kiwnięcia głową.

Sposób 1 - styl retro maszyny do pisania

Pomyślałem sobie, że jeśli każdy znak miałby tą samą szerokość dałoby się użyć jednostek ex aby odsunąć tekst o jeden znak w lewo. Przy foncie monospace oraz odpowiednim kolorze tekstu osiągniemy odpowiedni efekt. Uładnić nagłówek można przez zwiększenie odstępów między znakami. Nieudolne, ale czasem działa.

#afirmation {
font-family: Monaco, Consolas, "Courier New", monospace;
font-weight: normal;
line-height: 68px;
text-indent: -1.25ex;
letter-spacing: 0.5ex;
padding-left: 63px;
background: url(a.gif) 0 50% no-repeat;
}

Sposób 2 - popękanie `first-letter`

Pseudoelement first-letter odnosi się do pierwszej litery, to chyba jest jasne. Nie da się go jednak zniknąć przez visibility albo display - to tylko pseudoelement.

Można jednak zmodyfikować wielkość tekstu - ustawiłem 1px, hehe. Potem wystarczy tylko zmienić kolor tekstu tej literki (choć i bez tego jest estetycznie) i przesunąć resztę tekstu lekko w lewo. Efekt zadowala, działa „wszędzie”, tadam.

#oblivion {
line-height: 69px;
background: url(o.gif) 0 50% no-repeat;
padding-left: 69px;
text-indent: -5px;
}
#oblivion:first-letter {
font-size: 1px;
color: #FFF;
}

Sposób 3 - generowana treść, misio i lisek stoją w kącie

Zamysł jest taki, że przed nagłówkiem wstawiamy obrazek i nakładamy go na pierwszą literę tekstu. Zadziała to dobrze w Operze, Explorer nie umie generowanej treści w ogóle, a Firefox nie potrafi jej dobrze pozycjonować. Tak czy inaczej w norweskiej przeglądarce wygląda dobrze.

Macie jakieś inne pomysły? :-)

Tagi wpisu: css, decoration, typography

Informacje i hiperłącza

Piotr Petrus 'Riddle'

Blog o projektowaniu zgodnych ze standardami stron internetowych.

Praktyczne przykłady, sztuczki CSS, sposoby obchodzenia błędów przeglądarek, lekki i nieinwazyjny JavaScript, użyteczny design, dostępność i skrypty użytkownika.

RSS

Informacje o wpisie

Napisał riddle 20 lipca 2006 o 23:13

Kategorie: Design, Przeglądarki, Webdesign na luzie

Wpisy archiwalne

Archiwum miesięczne

Dzięki!

Komentarze

GiM 1 20 lipca 2006, 23:36

ta, mamy:
\usepackage{lettrine}
...
\lettrine{Z}{ażółć} gęślą jaźń, zawsze działa
Riddle 2 20 lipca 2006, 23:37

Po jakiemu piszesz? :-) TEX?
GiM 3 20 lipca 2006, 23:37

jedyny słuszny ;-)
Meaglin 4 22 lipca 2006, 10:44

Kurde, z rozpędu zapomniałem, że nie używam już norweskiej/najlepszej przeglądarki. :/
A ogólnie to nawet fajne toto, choć ja bym to załatwił JS, samo by rozpoznawało jaki obrazek wstawić. Z drugiej strony, to jak można za pomocą CSS to po co wrzucać na siłę JS…
dziq 5 26 lipca 2006, 12:45

@Riddle - norweska przeglądarka ? o_O

@GiM - no, nowy bajerek do zapamiętania ;)
Riddle 6 26 lipca 2006, 12:47

dziq: Opera, no Opera. To się nazywa parafraza. ;)
GiM 7 26 lipca 2006, 14:28

zawsze rozumiałem parafrazę w takim znaczeni jak jest opisana na pwnie:

„szersze rozwinięcie jakiegoś tekstu z ewentualnymi modyfikacjami (przeinaczeniami); w zn. specjalnym (lit.): swobodna przeróbka utworu literackiego, rozwijająca i modyfikująca treść pierwowzoru”

więc dalej, parafraza, a nie metafora ? ;->
Riddle 8 26 lipca 2006, 14:30

Parafraza - szersze rozwinięcie jakiegoś tekstu z ewentualnymi modyfikacjami. Mickiewicz = autor Pana Tadeusza, Opera = norweska przeglądarka.

Skończcie ten głupi offtopik, wiem że nie piszę od prawie tygodnia (nie mam czasu), ale ten post nie jest szałtboksem.
delphiak 9 26 lipca 2006, 21:46

jak dla mnie to chyba druga opcja jest w miare dobra, bo wtedy poprzez zaznaczenie tekstu zaznaczymy tez pierwsza litere i bedzie ja mozna skopiowac, a nie wiem jak sprawa ma sie w tej norweskiej przegladarce ;) przy znikajacym obrazku...
sdf 10 30 września 2006, 19:13

Meaglin: LOL!
anonim 11 05 października 2007, 19:48

ten blog lub strona są do d***
lisek 12 24 maja 2009, 14:29

to jak nie wiesz czy to blog czy strona…

czasem też robię takie ozdobniki, ale u mnie wygląda to raczej tak że tytuł jest normalny, a pierwsza litera akapitu jest po tjunungu. Tak to mniej-więcej wygląda: p.first-letter { font-size:48px; font-style:italic; [...] display:block; float:left; }