O szablonach, ich projektowaniu i moich z tym zmaganiach...
niedziela, 24 lutego 2008

Troszkę czasu to zajęło ale wreszcie udało się nam ustalić z właścicielem bloga Fotki z Lublina, że jego szablon jest skończony. Dzisiaj więc niczego nie polecam bo szablon jest zrobiony na wyłączność ale jedynie chwalę się.

fotki_z_lublina

Szablon ten jest rodzajem kompromisu pomiędzy mną a właścicielem bloga. Można powiedzieć, że byłam jedynie wykonawcą pomysłów efad4d. Efekt wspólnej pracy jest jednak bardzo satysfakcjonujący. Zmierzenie się z konkretnymi oczekiwaniami „zleceniodawcy” to ciekawe doświadczenie i cieszę się, że udało mi się stworzyć coś co odpowiada zarówno mnie jak i właścicielowi bloga.

Fotki z lublina jest fotoblogiem a więc podstawowym celem było nie przesadzić. Grafikę w nagłówku wykonał sam właściciel. W związku z jej wcześniejszym do szablonu istnieniem kolorystyka bloga była już w zasadzie określona.

000000A06567
BE9090
E9DBDB
F7F1F1
#000000#A26565
#BD9292
#E9DBDB#F6F1F1

Zdecydowałam się więc jedynie na proste i nieco surowe wykończenie elementów bloga które harmonizowałyby z czarno-białymi zdjęciami. Do otrzymanej palety kolorów dodałam jeszcze kilka odcieni szarości aby całość nie wyróżniała się zbytnio a jednocześnie była spójna i estetyczna.

1 2 3 4
5 6 7 8

 

Zapraszam do obejrzenia Fotek z Lublina

środa, 20 lutego 2008

Strasznie ociągałam się ze zrobieniem tych szablonów. Projekty na papierze miałam już zrobione w połowie stycznia ale takich projektów mam całkiem sporo więc różnie to z nimi bywa. Tym razem pomysły zamieniłam w CSS więc i wy możecie zobaczyć co się dzieje w mojej głowie.

koci niebieski koci brązowy

 

uwagi albo-i-nie-techniczne:

  • szablony wyszły według mnie świetnie ale oczywiście z chęcią dowiem się co wam w nich nie odpowiada a co uważacie za fajne rozwiązanie
  • pierwszy koci szablon – niebieski” robiłam w tym samym czasie co „niebieski chmurkowy” są więc w gruncie rzeczy bardzo do siebie podobne: szaro-niebieskie, delikatne, z kursywnymi nagłówkami, spokojne; szablon ma nawigację po lewej bo rzadko takie szablony robię a temu kotu świetnie jest właśnie po lewej stronie
  • drugi koci szablon – beżowy” wyszedł mi dość zaskakująco; nie spodziewałam się, że uzyskam taki efekt; blog ma 900px ogólnej szerokości; nie wiem z jakiego powodu szablon mimo dyskretnej obecności pewnego kota kojarzy mi się z kulinariami, czekoladą; jest trochę przesadny ale pasuje mu to
  • następne koty będą nowoczesne i bardziej agresywne kolorystycznie...
  • miłego korzystania
czwartek, 14 lutego 2008

Jeżeli ktoś liczył na to, że z okazji Walentynek zrobię mały seruszkowy prezent to się przeliczył. Owszem mam pomysły na szablony z serduchami ale chyba trzeba będzie poczekać na nie do czerwca (jeżeli nie wiesz dlaczego do czerwca to jest mi przykro). Nie mam nic przeciwko globalizacji i komercyjnym świętom. To może być świetna zabawa. Komercyjne święta są po to aby na nich zarabiać i prawdopodobnie lepiej bym zrobiła robiąc te walentyknowe szablony – ‘zarobiłabym’ więcej wejść i wszyscy byliby szczęśliwi. Ale nie wyszło. Na pocieszenie mam więc moje cztery ulubione szablony z sercami.

Jest ciemny i brak w nim walentynkowych różowości ale kto powiedział, że walentynki to jedynie słodkie misie z serduszkami na brzuszkach?.. zaletą tego szablonu jest elegancka wąska szpalta, czerwony hover, który dodaje całości energii; jest w tym wszystkim pewien dramatyzm ale elegancja całości sprawia, że trudno nazwać go pretensjonalnym

 

Jeżeli ktoś widział i lubi szablony Epeeyi to wie czego może się spodziewać. Szablon ten niezaprzeczalnie jest w ‘stylu epeeyi’: delikatny, prosty, ze świetnym zdjęciem i oszczędną kolorystyką; idealny dla nowoczesnej ale nie pozbawionej romantyzmu dziewczyny, doskonały na walentynki z czerwonym, gorącym sercem

 

Nie są to całkiem typowe kolory dla walentynek ale właśnie to podoba mi się najbardziej – złocistość tego szablonu; trudno uzyskać złoty kolor na ekranie a tu mamy odbijające światło złociste serduszka i do tego fajny jakby brokatowy wygląd tła; wbrew pozorom żłty ni jest najlepszym kolorem dla złotego i na szczęście anonima go nie użyła – kolorem czcionek jest bordowy który lepiej podkreśli fakt, że złoty to nietypowy kolor

 

Miałam pewne wątpliwości czy polecać ten szablon jako mój ulubiony – jeżeli jest coś za czym nie przepadam to ruchome elementy szablonu, są niepotrzebne i utrudniają jedynie korzystanie bo za bardzo przykuwają uwagę. Cóż jednak... za wyjątkiem tych okropnych latających serduszek szablon jest fajny. Jest różowy z dodatkiem szarego (bardzo lubię takie połączenie), nie jest krzykliwy i jedyne co bym zmieniła w nim to to, że jest przyklejony do lewej krawędzi ekranu – lepiej wyglądałby wycentrowany

 

Z okazji dnia świętego Walntego (wiki mówi , że to na pamiątkę tego Walentego z Rzymu...), albo jak kto woli z okazji rocznicy bitwy pod Stoczkiem życzę wam radośnie spędzonych chwil z bliskimi waszym sercom i to bez względu na datę w kalendarzu.

A specjalnie dla Eskeya życzenia z innej okazji - dzisiaj mija sześćdziesiąta rocznica pierwszego meczu polskiej reprezentacji piłki siatkowej kobiet z Czechosłowacją (nie mogłam się powstrzymać ;) to wiki mnie na manowce sprowadza)

MIŁEGO DNIA

Oba niebieskie szablony, które tu się znajdowały, w styczniu 2012 roku przeszły gruntowną zmianę. W zasadzie poza kolorem nic z nich nie zostało. Zdecydowałam się jednak pozostawić w tej notce jeden z nich bo jest on kolejną wersją szablonu, który debiutował w 2011 roku. Przedstawiam niebieską wersję szablonu z beleczką.


24 szablon z beleczką, niebieski

24 szablon z beleczką, niebieski
na starym kodzie, dla blogów na blox.pl. -500px- 


Szablon jest jasny i prosty. Jego głównym ozdobnikiem jest intensywna beleczka, która jest elementem dodatkowym - jest to górne poziome menu. W tym szablonie bardzo łatwo można dodać własną ilustrację tytułową.

środa, 06 lutego 2008
Dzisiejszą dobrą radę do wypróbowania podsunął mi eskey a pochodzi ona ze strony www.webdesignerwall.com

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 (bq_otwierajacy, zamykajacy)
  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.

Lewy odstęp (padding-left) i wcięcie tekstu (text-indent) potrzebne nam będą do cudzysłowu otwierającego. Odstęp odsuwa nam cały tekst od krawędzi a minusowe wcięcie gwarantuje, że gdy edytujemy pierwszą literę całość nadal będzie wyglądała tak samo.

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:
O blogu i RSSsubskrybcja
Polecane wpisy z blogu
Pomocne
Przeglądarki
Katalogi szablonów
Polecane strony
Szablony z dedykacją
o CSS (notki z tego bloga i podobnych bloksowych)
o arkuszach stylów ogólnie (CSS) dla poczatkujących,
głównie zewnętrzne podręczniki
o CSS (przydatne podpowiedzi) dla średniozaawansowanych
- specyficzne rozwiązania
- jak reagują przeglądarki
Historia polecanych
Kolory
Pismo
Polecane artykuły
ilustrowany przewodnik po bloksie dla początkujących,
dla zielonych jak szczypiorek na wiosnę,
dla zaczynających bloksowanie
Tagi
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...