08 szablon Glossy, czerwony

O szablonie możesz poczytać sobie w notce: Glossy, osobliwie elastyczny trzyszpaltowiec. Jeżeli masz jakieś wątpliwości to tam możesz zadać swoje pytania. Tam znajdziesz też dodatkowe wyjaśnienia. Tutaj natomiast zostaw komentarz informujący mnie o pobraniu szablonu.

Warunki pobierania:

• Pobieranie oraz użytkowanie szablonów jest bezpłatne.
• Użytkownik zobowiązany jest do poinformowania o pobraniu szablonu komentarzem pod tym wpisem podając adres swojego bloga.
• Nie zezwalam na usuwanie z kodu CSS informacji o autorze. Mile widziany jest link do strony szablonykatemac.blox.pl.
• Szablon jest na licencji Creative Commons - uznanie autorstwa czyli możesz:
  
  1. kopiować i używać
  2. tworzyć i rozpowszechniać utwory zależne
  Na następujących warunkach:
  
  1. Uznanie autorstwa. Szablon należy oznaczyć w sposób przeze mnie określony.

Jeżeli podoba Ci się mój szablon i zgadzasz się powyższe warunki kliknij w znaczek „Ładny blox? Skopiuj mój CSS” i skopiuj na swój blog.

Miłego korzystania
szablonykatemac.blox.pl

Ten szablon zawsze był czerwony. I miał ten sam klimat narzucony przez gradientowy top. Ten glossy look to jedna z cech stylu nazywanego Web 2.0 całkiem popularnego w 2008 kiedy ten szablon powstawał po raz pierwszy. Zrobiłam ich kilka, w różnych kolorach. Głównie korzystałam z nagłówków udostępnionych m.in. na stronie www.bittbox.com. Najbardziej podobał mi się zawsze ten beżowy ale nigdy nie dotarłam do momentu w którym zrobiłabym z nim szablon. Co do pozostałych to choć zawsze mi się podobały to jednak gdy dotarłam do etapu wstawiania ich do szablonu zawsze coś pozmieniałam. 

Aby zrobić takie nagłówki z gradientem, rozjaśnieniem wewnętrznym, efektem glossy i ornamentami potrzebujesz programu graficznego. Te tutaj udostępnione są w kilku typach, między innymi w postaci wektorów które stosunkowo łatwo zmieniać bez żadnego uszczerbku na jakości ilustracji. W tym celu polecam darmowy program InkScape (z produktów Adobe do edycji grafik wektorowych używa się Ilustratora).

W 2012 roku zdecydowałam się zmienić szablony Glossy. Moda na Web 2.0 minęła, szablony przestały być popularne i przede wszystkim przestały mi się podobać więc zupełnie nie miałam ochoty grzebać w nich i wprowadzać poprawki i uaktualnienia. Dlatego też czerwony będzie jedynym szablonem, który pozostał z serii Glossy.

Aby uatrakcyjnić sobie ponowne prace nad nim zdecydowałam się wykorzystać kilka oryginalnych cech pochodzących z CSS3. Przede wszystkim nagłówek zrobiony jest przy użyciu cieni (box-shadow). Myślałam o zastosowaniu gradientów CSS ale zdaje się, że cień jest lepiej zaimplementowany w przeglądarkach a jego możliwości wystarczały mi. Drugą istotną i specjalną cechą jaką tu zastosowałam jest zmienna szerokość bloga w zależności od szerokości okna w którym blog się wyświetla. Początkowo miałam szerokość zostawić dość luźną, określając jedynie jej maksimum i minimum ale w ostateczności zdecydowałam się na określenie szerokości dla medium ekran o wielkości minimalnej i maksymalnej. Wybrałam cztery ekrany:

• @media screen and (max-width:320px) - wąska szpalta w ogóle się nie wyświetla
• @media screen and (min-width:768px)
• @media screen and (min-width:1024px)
• @media screen and (min-width:1280px)

Napisałam też dwie dość chaotyczne notki o tym jak zmieniam ten szablon. Nie tyle po to aby komukolwiek cokolwiek wyjaśniać ale jeżeli ktoś jest zainteresowany rozwiązaniami z tego szablonu to w notkach tych znajdzie kilka sugestii:

• O szablonie 08szablonkatemac.blox.pl rozwojowo, część 1
• O szablonie 08szablonkatemac.blox.pl rozwojowo, część 2

Poprzednio szablony z serii Glossy wyglądały tak:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.

Link do strony głównej z moimi szablonami szablonykatemac połączony z linkiem do innej strony z szablonami - szablon_team i jeszcze może odnośnik do strony stylekatemac.blox.pl. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit.

abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnop

Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.

Na koniec link do przykładowej strony statycznej zobacz»

Pangram - Mężny bądź, chroń pułk twój i sześć flag.

Jak będzie wyglądał wpis podzielony na wstęp i treść

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.

Z pojedyńczym wcięciem tekstu...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.

a także czasami przydatnym podwójnym wcięciem tekstu czyli blockquote w blockquote...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra.

To jest blockquote w blockquote.

Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.