szablony katemac

Różnych szerokości w szablonie blogowym jest bardzo dużo. Do najważniejszych moim zdaniem należą: szerokość tła części tytułowej, szerokość całego bloga i szerokość dostępnego miejsca w treści notki (np na ilustracje). Każda z nich jest oczywiście inna ale także każda z nich uwzględniać musi nieco inne cechy. Na koniec notki postaram się przybliżyć bardziej szczegółowo te trzy konkretne przypadki ale zacząć muszę od bardziej ogólnych informacji.

Na szerokość składają się wszystkie wartości cech związanych z szerokością i ustawieniami bocznych fragmentów szablonu. Generalnie cała szerokość to CAŁA szerokość a nie tylko wartość width.

CAŁA SZEROKOŚĆ = margin + border + padding + width

Mam nadzieję, że ta ilustracja pomoże zrozumieć zależności. Jak widać na obrazku width to tylko i aż szerokość przeznaczona na zawartość. Zawartością może być nie tylko zwykły tekst ale także ilustracje czy inne elementy i te elementy też mogą mieć opisane marginesy, dopełnienia i ramki.

Po co to wszystko? Ano po to aby ładnie wyglądało. Aby tekst nie dotykał ramki, aby elementy miały łady odstęp, etc. Pamiętaj jednak, że elementów na blogu jest dużo i nie ma potrzeby utrudniać sobie życia aż nadto. Dlatego też opisuj te cechy tylko wtedy gdy to konieczne.

#BlogGlownyBox

Wpisz width przy szerokości całego bloga, pozwoli ci to wygodniej układać elementy jeżeli zechcesz je pozycjonować absolutnie.

Margin jest niekonieczny, szczególnie jeżeli chodzi o wartości w poziomie. Zostawiając go jako auto pozwalasz aby cały blog wyświetlał się na środku okna przeglądarki. Określając jakąś wartość sprawiasz, że staje się odpowiednio przyklejony do bocznej krawędzi okna przeglądarki.

Wpisując padding musisz natomiast pamiętać, że dopełnienie przy tym elemencie dotyczyć będzie nie tylko treści bloga ale i jego części tytułowej. Jeżeli chcesz aby ilustracja umieszczona jako tło tytułu wyświetlała się dokładnie od krawędzi do krawędzi po powinnaś unikać w tym miejscu dopełnienia.

Border jest już elementem bardziej dekoracyjnym więc czy jest czy go nie ma to kwesta estetyki.

całkowita szerokość bloga

Wszystkie powyższe cechy wpisane przy selektorze #BlogGlownyBox stanowią o całkowitej szerokości bloga. Generalnie ma to średnie znaczenie jeżeli blog jest mniejszy niż okno przeglądarki. Gorzej jest w drugą stronę.

To, że okno twojej przeglądarki wyświetla się na ekranie rozdzielczości 1366px nie znaczy, że wszyscy tak mają. A nawet jeżeli mają zazwyczaj to nie znaczy, że zawsze. Ja przykładowo bardzo lubię małe mobilne komputery: netbooki i tablety. Uważam, że to tanie i całkiem praktyczne rozwiązanie dla kogoś kto nie jest permanentnie przyklejony do komputera ale chce mieć go tylko dla siebie. Takie maleństwa często korzystają z rozdzielczości 1024px.

Szerokość ekranu (tzw. rozdzielczość) musi zostać pomniejszona o ewentualny suwak z boku. Jego szerokość zależna jest od przeglądarki czy systemu trudno więc określić z absolutną pewnością ile miejsca zajmie. Bezpiecznie będzie zarezerwować na suwak 20-30 pikseli.

Dlatego chociaż szerokość szablonu zależna jest od projektu to staram się nie robić szablonów szerszych niż 995px - chyba że korzystam z media queries (m.in. szablon zależny od szerokości okna przeglądarki). Nie jest to jednak imperatyw czy jakaś wiedza tajemna, którą przekazano mi w wąskim kręgu zainteresowanych. Ot moja logika.

#BlogTytulBox

Określanie szerokości nie jest tu niezbędne jeżeli jest ona określona w #BlogGlownyBox albo innym elemencie nadrzędnym dla tytułu. W zależności od szablonu bazowego może to być właśnie #BlogGlownyBox albo #BlogSzerokaSzpalta. Aby to określić musisz zerknąć do źródła strony (Ctrl+U) albo sprawdzić z jakiego szablonu podstawowego korzysta twój projekt.

Brzmi to może trochę skomplikowanie ale wcale takie nie jest. Część tytułowa bloga umieszczona jest albo nad całością treści bloga albo tylko nad jedną ze szpalt. W moich szablonach najczęściej korzystam z szablonów podstawowych bloksa które mają tytuł bloga nad całością.

szerokość elementu tytułowego

Jeżeli nie chce Ci się liczyć to spróbuj na oko. Albo zrób sobie zrzut ekranowy (PrtSc) i przytnij go do wielkości jaka się spodziewasz, że tytuł ma. Jeżeli wcześniej zmienisz kolor tła tytułu na czerwony to już w ogóle będziesz mieć pewność, że to są faktyczne wymiary.

Szerokość łatwo jest policzyć. To prosta arytmetyka tylko trzeba sprawdzić odpowiednie selektory. Wysokość tytułu natomiast jest trudniejsza do określenia. Jeżeli jest wpisana (height) to fajnie, dodasz do tego tylko dopełnienie górne i dolne jeżeli są wpisane i po sprawie. Jeżeli element nie ma wpisane height to masz problem, który w zasadzie można rozwiązać tylko na oko bo zależny jest od wielkości kroju tytułu a ten może być różny w zależności od wyświetlanego fontu.

Aby policzyć szerokość zobacz co wpisane jest przy width elementu nadrzędnego dla boksu tytułowego (jak wspomniałam wcześniej najczęściej będzie to #BlogGlownyBox ale zdarzyć się też mogą projekty z innym szablonem podstawowym i wtedy elementem nadrzędnym może być jedna ze szpalt). Zacznij teraz odejmować od tej wielkości wszystkie wielkości, które napotykasz po drodze do elementu tytułowego.

• Jeżeli tytuł bloga umieszczony jest nad całością treści to sprawa ułatwiona bo w grę wchodzi tylko margines części tytułowej. 
• Jeżeli tytuł bloga umieszczony jest w którejś ze szpalt liczenia może być nieco więcej ale jeżeli opisana jest szerokość szpalty w której umieszczony jest tytuł to tutaj zaczynasz (szeroka to oczywiście #BlogSzerokaSzpalta a wąska to #BlogWazkaSzpalta) i jak wyżej odejmujesz tylko margines części tytułowej.

Jeżeli w #BlogTytulBox wpisany jest width to wystarczy, że dodasz to tego padding tego elementu i już wiesz ile miejsca zajmować mógł będzie obrazek w tle.

#BlogBodyBox

Ten element nieco trudniej określić bo zależny jest od szablonu. Ja najczęściej używam jako bazy szablonu Spokojnego albo Białego. One oba mają część tytułową bloga umieszczoną nad wszystkimi elementami treści zarówno głównej jak i pobocznej. Nie wszystkie jednak szablony tak mają. Część tych na starym kodzie tytuł bloga ma umieszczony w szerokiej szpalcie a więc i w elemencie #BlogBodyBox. O ile nie zaznaczę inaczej moje opisy dotyczą szablonów bazowych, które część tytułową mają umieszczoną poza elementem #BlogBodyBox (czyli nad całością treści).

Proponuję nie wpisywać width przy tym elemencie. Jeżeli jest już przy #BlogGlownyBox to o ile nie ma konkretnego powodu to lepiej nie utrudniać sobie życia i zostawić element #BlogBodyBox w spokoju.

W zależności od projektu graficznego użycie padding albo margin będzie bardzo przydatne.

#BlogSzerokaSzpalta

Jeżeli szablon jest bardzo prosty graficznie to wystarczy opisać tutaj width. O ile następne, zawierające się w szerokiej, elementy nie będą miały opisanych żadnych cech związanych z szerokością to width wpisane tutaj będzie jednocześnie szerokością dostępną dla treści wpisów (czyli także maksymalną szerokością ilustracji w notce).

Bardzo często opisuję przy tym selektorze margin. Szpalty nie powinny się stykać zarówno z sobą jak i z krawędziami bloga (jeżeli krawędzie są widoczne). Odstęp dodaje oddechu, uspokaja całość i sprawia, że ze strony przyjemniej się korzysta.

To czy do zapewnienia odpowiedniego odstępu pomiędzy elementami użyję marginesu (margin) czy dopełnienia (padding) zależne będzie od projektu, od tego w jaki sposób zamierzam operować tłem.

Określenie szerokości i odstępów jest istotne w przypadku tego elementu. Teoretycznie określenie szerokości całego bloga zapewnia, że bez względu na szerokość ekranu blog będzie zachowywał określoną stałą szerokość. Wpisanie width przy szerokiej szpalcie zapewnia natomiast właściwe proporcje pomiędzy wąską a szeroką szpaltą. Bez tego ich szerokość ustala przeglądarka w zależności od zawartości.

szerokość miejsca na treść w notce

To chyba najtrudniejszy element do wyjaśnienia. Nie dlatego, że jest w tm coś skomplikowanego ale dlatego, że wyjaśnienia nie da się zamknąć w jednym zdaniu.

Trzeba znaleźć najbliższy element nadrzędny który ma jasno zdefiniowaną szerokość i od tego momentu odejmować wszystkie piksele, które trafiają się po drodze. Tyle jeżeli chodzi o jednozdaniowe wyjaśnienie.

Bardzo często będzie tak, że szerokość szerokiej szpalty (width) będzie jednocześnie szerokością dostępnego miejsca na treść w notce a więc i na ilustracje czy filmiki. Jeżeli jakieś wartości trzeba będzie odjąć to najczęściej będą to dopełnienia i ramki przypisane bezpośrednio ilustracji. W arkuszu szablonu wszystkie te rzeczy mogą być opisane w różnych miejscach więc trzeba się nieco porozglądać.

Aby wiedzieć czego szukać przedstawiam ilustrację prezentującą zagłębienie treści notki (w sumie to nie mam pojęcia jak to nazwać, mam nadzieję, że słowo zagłębienie wam tutaj pasuje i jest zrozumiałe). Bez względu na szablon bazowy (na starym kodzie) treść notki wgląda z grubsza tak samo.

Wygląda jakby tego było bardzo dużo ale tak nie jest. Zazwyczaj szeroka szpalta ma określona cechę width. Czasami cały boks wpisu może mieć jakiś margines czy dopełnienie ale wcale nie musi. Jeżeli ilustracje we wpisie mają widoczną ramkę to zapewne jest ona w jakiś sposób opisana w szablonie więc jeżeli jest to dopełnienie czy ramka to liczymy te piksele. Jeżeli jest to natomiast cień to nie musimy się nim przejmować - ona nam miejsca nie zabiera.

I to by było na tyle ogólnych informacji o określaniu szerokości bloga i jego poszczególnych części. O wspomnianych cechach CSS napiszę jeszcze przy innej okazji, o selektorach przy których warto opisywać szerokość piszę stronę statyczną, jak będzie gotowa to się nią podzielę. Tymczasem polecam inne powiązane z tematem szerokości wpisy i strony z tego bloga:

• Jak zmienić szablon podstawowy bloksa?
• Zmiana szerokości głównej szpalty (i całego bloga) na przykładzie szablonu 19 Light beżowego
• arkusz CSS: wpis na głównej
• arkusz CSS: wpis na stronie z pojedynczą notką 
• arkusz CSS: wpis na stronie statycznej

Kolejna nowość i ciekawostka z zasobów specyfikacji CSS3, moduł tła i ramek. Tym razem będzie to cień. Nie planowałam tak dokładnie i po kolei opisywać tego modułu ale akurat tak się złożyło więc nie ma co się sprzeciwiać skoro wychodzi naturalnie.

• box-shadow - cień elementu
• przesunięcie (w poziomie i pionie)
• rozmycie
• rozszerzenie
• cień wewnętrzny
• cień wielokrotny

Domyślnie mówiąc cień chodzi nam o cień zewnętrzny i tak też ta cecha jest interpretowana można jednak dodawać także cień wewnętrzny, który odpowiednio spreparowany może dawać wrażenie, że element jest zagłębiony. Bardzo rozmyty cień wewnętrzny da natomiast wrażenie gradientu na krańcach elementu. Cień to tylko możliwość i w zależności od twojej wyobraźni możesz go wykorzystać do wielu różnych celów. Dzisiejsza notka powie ci, które wartości odpowiedzialne są za jakie zmiany tej cechy.

W dalszej części notki opisuję także prefiksy czyli przeglądarkowy myk, który pozwala wykorzystać cechę nawet jeżeli przeglądarka jest stara. Na koniec dodaję kilka przykładów z życia wziętych, nic radykalnego bo zazwyczaj nie chcę opierać całego wyglądu na cesze, która jest stosunkowo nowa a przez to nie do końca dostępna dla wszystkich oglądających szablon.

CSS jest jeden i jest go cała masa. Te tajemnicze numerki to nic innego jak kolejne wersje. Ludzie co chwile wpadają na nowe pomysły, moda i gusta ulegają zmianie, technologie są stale rozwijane więc rosną możliwości... to wszystko sprawia, że z góry określona lista możliwości choćby nawet bardzo względna i elastyczna po pewnym czasie przestaje być wystarczająca. Stąd tez się biorą reformy, rewolucje i kolejne wersje.

Dokument który zawiera opis reguł i zasad kaskadowych arkuszy stylów (CSS), nazywa się specyfikacją. Jest to rodzaj listy z wypisanymi możliwościami jakie dają arkusze. Nikt nie mówi w nich jak zrobić ładny szablon a jedynie określa się tam co znaczą poszczególne określenia i jak powinny być one wyświetlane przez przeglądarki. Specyfikacje są opracowywane głównie przez organizację World Wide Web Consortium (W3C) i przechodzą przez wiele etapów, aby ostatecznie uzyskać status rekomendacji W3C.

Obecnie rekomendowaną jest CSS 2.1 (od 7 czerwca 2011) jednakże niektóre moduły CSS3 również są już rekomendowane. Rozpoczęto też już pierwsze prace nad CSS4.

Specyfikacja CSS zawiera różne wytyczne odnośnie tego jakie cechy i w jaki sposób możemy opisywać w arkuszach stylów. Dzisiaj zajmę się zaokrąglonymi narożnikami czyli czymś co nie istniało w starszych specyfikacjach CSS a co od dawna przeglądarki potrafią zastosować.

• border-radius - zaokrąglenie narożników
• border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius - zaokrąglenia wybranych narożników
• zaokrąglenia eliptyczne - jeden narożnik dwa sposoby zaokrąglenia
• zaokrąglenia eliptyczne, zapis skrócony
• zaokrąglenia dodawane cechą z prefiksem

Zaokrąglone narożniki, mimo iż związane z ramkami, wyświetlają się niezależnie od nich. Można więc zaokrąglać narożniki elementów nie posiadających ramek. Dlatego też border-radius nie jest związany z cechą border i nie dodaje się go do skróconego opisu ramek. Jest natomiast ściśle związany z tłem i w tym sensie ramki jako część tła są cechą towarzyszącą border-radius. Ujmując to jeszcze prościej aby można było zaokrąglać narożniki elementu musi on posiadać tło albo ramki (mogą być obie rzeczy może być tylko jedna ale ta jedna MUSI być koniecznie).

Border-radius mimo iż jest cechą specyfikacji CSS3 modułu tła i ramek, który to moduł nie jest jeszcze oficjalną rekomendacją i ma aktualnie (listopad 2011) status rekomendacji kandydującej (następny etap to rekomendacja proponowana a wyżej jest już tylko oficjalna rekomendacja W3C) to jednak prace nad zaokrąglaniem narożników trwają od tak dawna, że najnowsze wersje przeglądarek przestały już nawet używać prefiksów. Do tematu prefiksów jeszcze wrócę zacząć wypadałoby jednak od najprostszych wyjaśnień.

To pytanie jest bardzo częste w mailach. Gdybym miała sporządzić listę TOP pytań to zapewne zajęło by ono miejsce pierwsze (no, ewentualnie drugie). To poniżej jest nieco enigmatyczne i może w nim chodzić o wiele różnych rozwiązań ale wychodząc z założenia, że odpowiedzi najprostsze są najbardziej oczekiwane zinterpretowałam je jako prośbę o pomoc w zastąpieniu tytułu tekstowego graficznym.

Używam jednego z twoich szablonów. Chciałbym zapytać czy możesz pomóc zmienić nazwę bloga na logo?
Pozdrawiam.

Taka zmiana jest bardzo prosta. Owszem wymaga znajomości CSS ale nie są to jakieś skomplikowane, magiczne tajemnice. Najtrudniejsze w takiej zmianie będzie mnogość rozwiązań. Ile blogów tyle różnych wielkości tytułu i to nie CSS stanowi problem ale właśnie możliwe rozmiary i odstępy. Spróbuję jednak na początek tak bardzo prosto i ogólnie.

1. Logo, tytuł w postaci graficznej etc. ładujemy do zasobów bloga: wchodzimy do edycji bloga, klikamy zakładkę PLIKI i tam dodajemy nasz nowy plik.

2. Przechodzimy do edycji arkusza CSS (WYGLĄD -> EDYCJA CSS) i odnajdujemy fragment poświęcony części tytułowej. Będą to selektory:

• #BlogTytulBox
• #BlogTytulText
• #BlogTytulText h1
• #BlogTytulText a
• #BlogTytulText a:hover
• #BlogTytulOpis

Mogą być w szablonie opisane wszystkie albo tylko ich część, mogą mieć nieco inną formę (szczególnie jeżeli chodzi o kombinatory) ale w zasadzie powyższe w ponad dziewięćdziesięciu procentach przypadków będą więcej niż wystarczające.

Będą one miały własne opisy związane z wyglądem szablonu i trudno mi zgadywać jakie. Trzeba połączyć oba opisy tytułu. Te już istniejące w szablonie i te zaproponowane tutaj do przeprowadzenia zmiany.

Aby zastąpić tytuł tekstowy tytułem obrazowym proponuję podjąć takie działania w arkuszu:

#BlogTytulText {
 background: url(/resource/nazwa_pliku.jpg) left top no-repeat;
/* w nawiasie wpisuje się adres pliku z ilustracją */
}
#BlogTytulText a {
display:block; /* zmienia link w element blokowy, konieczne */
width:100%;    /* szerokość linku */
height:100px;  /* wysokość linku */
text-indent:-9999px; /* gigantyczne ujemne wcięcie tekstu sprawia, że słowa skrywają się poza krawędzią ekranu */
}

Jeżeli masz problem z połączeniem kodu, który już istnieje w Twoim szablonie z tym tutaj zaproponowanym to najprościej będzie jeżeli ten powyższy wkleisz w arkuszu poniżej tego, który już tam jest.

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-color - kolor ramki
• border-width - grubość ramki
• border-style - rodzaj ramki
• border-top, border-bottom, border-right, border-left - zapis skrócony
• border - zapis skrócony

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ą).

Opisałam już jak stworzyć sobie górne menu gdy korzysta się z jednego z szablonów sportowych (temat szablonu łatwo można zmienić, dla większości szablonów sportowych przygotowałam też niesportowe nagłówki). Menu zaczęłam dodawać do innych moich szablonów ale to potrwa. Nie każdy też korzysta z szablonu zrobionego przeze mnie. Dlatego dzisiaj opiszę jak najszybciej i najprościej umieścić takie menu nad tytułem własnego bloga bez względu na to z jakiego szablonu się korzysta.

Instrukcja w wersji skrótowej:

1. Stworzony uprzednio kod menu dodajemy w polu na kod html (USTAWIENIA -> BOCZNA SZPALTA)

2. Przechodzimy do arkusza stylów (WYGLĄD -> EDYCJA CSS) i przy selektorze #BlogGlowyBox dopisujemy position:relative;

3. Na końcu arkusza dodajemy opis wyglądu i umiejscowienia naszego menu:

#menuTop {
position:absolute;
top:5px; /* odległość od górnej krawędzi */
left:20px; /* odległość od lewej krawędzi */
width:600px; /* szerokość elementu, ma być mniej pikseli niż szerokość bloga */
height:25px;
list-style-type:none; /* likwiduje wypunktowanie */
padding:0; /* likwiduje automatyczne dopełnienie wypunktowania */
margin:0; /* likwiduje przeglądarkowy margines wypunktowania */
}

#menuTop li {
display:inline; /* układa elementy listy obok siebie */
padding: 0 3px; /* odsuwa elementy od siebie w poziomie */
border-left: 1px solid grey; /* dodaje po lewej szare kreseczki rozdzielające elementy menu */
}

W powyższej instrukcji jest wszystko co konieczne i niezbędne. Jeżeli jednak potrzebujesz dokładniejszych instrukcji, zależy Ci na nieco innym wyglądzie albo coś w twojej zmianie poszło nie tak jak się spodziewałeś to zapraszam do przeczytania rozszerzonej wersji wyjaśnień. A na koniec fragmenty css z szablonów sportowych opisujące wygląd tamtejszych górnych menu, jednym słowem gotowce.

Dość dawno (bo już ponad rok temu) Eskey wytłumaczył jak osiągnąć jednolity wygląd wpisów na stronie głównej bloga i na tej z pojedynczą notką. Trochę wody już od tego czasu upłynęło, kilka nowości się pojawiło niemniej wpis jest nadal aktualny. W ramach dopełnienia o wspomniane wyżej nowości dzisiaj rozszerzę opis Eskey’a przede wszystkim o nowo-dodaną stronę statyczną.

Nowość – strony statyczne

Jedną z sierpniowych nowości na blox.pl są długo oczekiwane strony statyczne. Zaletą takich stron jest to, że nie pojawiają się w chronologii bloga (i tu kolejna zmiana bo wg. Blox.pl, który postanowił wziąć pod uwagę opinię językoznawców powinnam napisać blogu), nie mają żadnych dat, można łatwo edytować nie tylko treść takich notek ale także ich adres. Na ile przydatna to rzecz każdy sam jest w stanie ocenić. Taka strona może mieć tyle różnych możliwości zastosowania ile użytkownik będzie miał pomysłów. Świetnie się nada przykładowo jako strona z informacjami o autorze czy o blogu. Dotychczasowe rozwiązanie w postaci najpierw linka do profilu na Ludzie Gazeta a następnie do bloksowego profilu uwzględniającego jedynie pisane i komentowane blogi niewiele mówiło o autorze.

Link do takiej strony statycznej nie pojawia się automatycznie na blogu w związku z tym samemu należy poinformować o takiej stronie i jej charakterze.

Wygląd wpisów

Osoby zabierające się za zmianę wyglądu swego szablonu często bywają zdziwione faktem iż nie wszystko wygląda tak jak tego oczekiwały i pewne elementy nie chcą się zmienić mimo iż właściwe cechy zostały zmienione w CSS. W odpowiedzi właśnie na te niejasności powstał zapewne wpis Eskey’a. Radzi on aby analogiczne selektory grupować i opisywać razem oddzielając od siebie poszczególne selektory przecinkiem. Dzięki takiemu prostemu rozwiązaniu łatwo jest zachować spójny wygląd wpisów w różnych miejscach a także w przyszłości gdy zaistnieje potrzeba dokonania zmian wystarczy wpisać cechę raz bez konieczności szukania selektorów po całym CSS.

Ujednolicony wygląd

Moja tabelka porównawcza nie wygląda tak przejrzyście jak ta Eskey’a. Niestety pisanie instrukcji nie jest moją mocną stroną. Mam jednak nadzieję, że mimo wszystko uda się znaleźć w tej tabeli poszukiwane informacje.

Dzięki umieszczonej tam instrukcji dowiedziałam się jak wyświetlać dwa razy znak cudzysłowu w ramach blockquote. Cała sztuczka opiera się na dwóch grafikach z których jedną umieszczamy przy selektorze blockquote a drugą przypisujemy pierwszej literze tekstu z zwiększonym wcięciem.

Składniki

1. dwie grafiki z wybranym znakiem (, )
2. selektor odpowiedzialny za wygląd zwiększenia wcięcia w tekście (blockquote)
3. pseudo-element opisujący pierwszą literę (:first-letter)

Sposób przyrządzenia

Zakładam, że selektor blockquote znajduje się już w waszym CSS. Jeżeli nie to go dodajcie i opiszcie w sposób najbardziej wam odpowiadający. O blockquote już pisałam więc powtarzać się nie będę. Potrzebne nam dzisiaj właściwości to:

background: url(/resource/bq_zamykajacy.gif) no-repeat right bottom;
padding-left: 18px;
text-indent: -20px;

Jeżeli znajdują się w waszym CSS to będzie trzeba proporcjonalnie zmienić wartości. Tło background: url(/resource/bq_zamykajacy.gif) określa cudzysłów zamykający. Opisujemy go jako no-repeat right bottom czyli bez powtarzania umieszczone w prawym dolnym rogu.

UWAGA: IE6 na którym m.in. sprawdzam swoje projekty zrobił mi tradycyjną niespodziankę i nie wyświetla prawidłowo cudzysłowu otwierającego. Zlikwidowanie text-indent poprawia sytuację. Jednak wtedy pozbywamy się wcięcia, które przy następnym kroku wykorzystamy do wyrównania całości. Jeżeli ktoś ma pomysł jak tego uniknąć to proszę o komentarz lub maila.

Pseudo-element :first-letter wspomniałam dawno temu przy okazji opisywania kilku właściwości tekstu i dzisiaj świetnie się sprawdzi. Ponownie wykorzystamy właściwości:

background: url(/resource/bq_otwierajacy.gif) no-repeat left top;
padding-left: 18px;

Tym razem grafikę umieścimy tradycyjnie czyli w lewym górnym rogu (left top). Lewy odstęp jest nam potrzebny aby grafika nie została zasłonięta przez pierwszą literę.

Niespodzianki

Teoretycznie powinnam już osiągnąć spodziewany efekt. Niestety tak się nie stało. Pseudo-element nie zadziałał. Po przeczytaniu komentarzy znalazło się rozwiązanie. Należy opisać pierwszą literę akapitu blockquote (blockquote p) a nie blockquote. I w takim wypadku aby grafika nie powtarzała się przy każdym akapicie należy zastosować zapis anulujący grafikę przy kolejnych akapitach (blockquote p ~ p).

Przykładowy fragment CSS

blockquote {
margin: 15px 30px 15px 45px;
background: url(/resource/bq_zamykajacy.gif) no-repeat right bottom;
padding-left: 18px;}
blockquote p:first-letter {
background: url(/resource/bq_otwierajacy.gif) no-repeat left top;
padding-left: 18px;
padding-top: 5px;}
blockquote p ~ p:first-letter {
background: none;
padding: 0px;}

Efekt można obejrzeć sobie na blogu towarzyszącym Zobacz»

Podejrzewam, że efekt można osiągnąć w inny sposób. Macie jakieś pomysły?

Zakładki to jedna z najbardziej interesujących mnie rzeczy na blogu. Nie mam pojęcia dlaczego tak się dzieje ale skoro tak jest to dzisiaj ponownie wpis o wyglądzie zakładek. Nie będę dzisiaj czarować bo nie potrafię ale chciałabym zwrócić uwagę na pewien niezbyt często wykorzystywany selektor, mianowicie:

.PoziomDrzewa { }

Jak pisze na css.blox.pl

.PoziomDrzewa – to położenie całej zawartości folderów z zakładkami w stosunku do nazw tych folderów

W skrócie:

• box z zakładkami (BlogZakladkiBox)składa się z napisu zakładki (ZakladkiTytul) i i łącznie folderów zakładek (ZakladkiItems);
• foldery składają się z tytułów folderów (TytulFolderaZakladek) i z ich zawartości czyli właśnie tego co zawiera się w PoziomDrzewa;
• następnie mamy już tylko etykiety zakładek (ZakladkaEtykieta) czyli w uproszczeniu nasze właściwe zakładki – linki

Z całą pewnością jest kilka ciekawych efektów jakie można uzyskać za pomocą selektora .PoziomDrzewa; ja chciałabym opisać jeden z nich: każdy folder zakładek w osobnej ramce. Uzyskamy dzięki temu nieco inny efekt niż w przypadku szablonów Connections czy Radioblox

Każdy folder zakładek w osobnej ramce

Efekt można osiągnąć także inaczej ale mnie zależy na tym aby ramkom dodać graficzne ozdoby. Efekt można obejrzeć sobie tutaj »zobacz. O wyglądzie zakładek decyduje tam kilka elementów.

• po pierwsze grafiki
  górna (top):
  i dolna (bottom):

• po drugie tło
  background: #e2e2e2;

• po trzecie ramki
  border:#a7a7a7 2px solid;

• po czwarte odstęp pomiędzy zawartością poszczególnych folderów
  margin: 10px;

Sposób przyrządzenia

Do zrobienia osobnych "pudełek" na zakładki wykorzystany dwa selektory: .TytulFolderaZakladek i .PoziomDrzewa

1. .TytulFolderaZakladek to jak sama nazwa mówi selektor opisujący wygląd nazwy jaką nadaliśmy folderowi z zakładkami; w tym miejscu powinniśmy określić cechy wpływające zarówno na wygląd samego napisu jak i na wygląd tego co go w boxie otacza
   

   wpisujemy	oznacza
   padding:15px 5px 0px 5px;	padding czyli wewnętrzny odstęp; w tym przypadku będzie to odstęp pomiędzy zawartością (czyli nazwą folderu) a ramkami; kolejność określania cechy powinna być taka: górny, prawy, dolny, lewy
   background: #e2e2e2 url(/resource/ws_top.gif) no-repeat top center;	tło; najpierw określamy kolor, w tym przypadku będzie to szary (#e2e2e2); następnie podaję adres grafiki górnej umieszczonej dzięki paddingowi nieco powyżej tekstu; "no-repeat" oznacza, że grafika nie powinna się powtarzać a "top center" że w boxie umieczsona jest u góry, na środku
   border-top:#a7a7a7 2px solid; border-right:#a7a7a7 2px solid; border-left:#a7a7a7 2px solid;	border czyli ramka ramkę określam jedynie dla trzech krawędzi: górnej i bocznych; górna ramka sprawiłaby, że tytuł foldera oddzielony byłby linią od zawartości czyli linków
   font-size: 12px; color: #333333; font-weight:bold; text-align:center;	przykładowe właściwości określające wygląd tekstu; kolejno: wielkość czcionki, kolor, grubość, wyrównanie tekstu;

2. .PoziomDrzewa to jak już ustaliliśmy wygląd zawartości foldera, czyli same linki; w selektorze tym określamy podobne cechy jak w .TytulFolderaZakladek; wyjątek stanowić będą niektóre właściwości tekstu ponieważ zależne będą one od wyglądu linkw (a)
   

   padding: 10px 5px 20px 5px;	tym razem większy robimy padding dolny ponieważ będzie znajdować się tam grafika
   background:#e2e2e2 url(/resource/ws_bottom.gif) no-repeat bottom center;	podobnie jak górna grafika dolne też nie powinna się powtarzać; jej płożenie koniecznie trzeba określić jako bottom w przeciwnym wypadku wyświetlać będzie się zaraz pod nazwą folderu
   border-right:#a7a7a7 2px solid; border-left:#a7a7a7 2px solid; border-bottom:#a7a7a7 2px solid;	tym razem pozostawiamy nieokreśloną ramkę górną
   margin-bottom: 10px;	margin czli odstęp zewnętrzny; odstęp pomiędzy elementem który opisujemy a elementem sąsiadującym;

Prościej tego wyjaśnić nie potrafię ale mam nadzieję, że i tak opis jest zrozumiały. Na koniec fragment opisywanego tu CSS »Zobacz