CSS + tekst - Blogger

31.01.2017


W dzisiejszym wpisie, chce Wam pokazać jak możemy bawić się tekstem za pomocą CSSa. Dla niektórych pewnie to nie będzie żadna nowość, a inni może dowiedzą się z tego wpisu czegoś nowego, tak czy siak, potraktujcie ten wpis jako ściągawkę :)

Ustalenie koloru tekstu

selektor {
color: #990000;
}

Dekoracja tekstu 


selektor { text-decoration: underline; } - podkreślenie
selektor { text-decoration: overline; } - nad kreślenie
selektor { text-decoration: line-through; } - przekreślenie
selektor { text-decoration: none; } - brak efektu

Cień + jego kolor


selektor { text-shadow: 1px 1px 1px #a64d79; }

Odstęp między literami 


selektor {letter-spacing: 3px;}

Odstęp między wierszami


selektor { line-height: 1.6; }

Odstęp między wyrazami


selektor { word-spacing: 20px;}

Transformacja tekstu 


selektor { text-transform: lowercase; } - wszystkie litery w tekście będą małe
selektor { text-transform: uppercase; } - wszystkie litery w teście są wielkie
selektor { text-transform: capitalize; } - pierwsze litery, każdego wyrazu są wielkie
selektor { text-transform: none; } - bez efektu transformacji 
Czytaj dalej »

Archiwum w menu/stronach - Blogger

24.01.2017


Już jakiś czas temu, parę osób prosiło o to, aby zrobić instrukcję umieszczenia archiwum w rozwijanym menu. Tak naprawdę nie będzie to dla Was nowość, bo ta instrukcja powstanie na bazie już istniejących instrukcji na blogu.

1. Przechodzimy sobie do instrukcji dotyczącej, rozwijanego menu i wykonujemy wszystkie punkty po kolei

Przejdź do - Jak zrobić rozwijane menu

2. Edytujemy część kodu odpowiadającą za kategorie rozwijane (ja wybrałam drugie kategorie):

Przed


<li><a href='#'>KATEGORIE2</a>
<ul>
<li><a href='LINK'>PODKATEGORIA</a></li>
<li><a href='LINK'>PODKATEGORIA</a></li>
<li><a href='LINK'>PODKATEGORIA</a></li>
</ul>
</li>

Po


<li><a href='#'>Archiwum</a>
<ul>
<li><a href='LINK DO ARCHIWUM'>ROK</a></li>
<li><a href='LINK DO ARCHIWUM'>ROK</a></li>
<li><a href='LINK DO ARCHIWUM'>ROK</a></li>
</ul>
</li>

3. Z instrukcji, jak wykonać archiwum z podziałem rocznym, wykonujemy punkt "LINK DO ARCHIWUM"

Przejdź do - Archiwum z podziałem rocznym

4. Po edycji, nasza część kodu z menu będzie wyglądać mniej więcej tak:

<li><a href='#'>Archiwum</a>
<ul>
<li><a href='http://blonparia.blogspot.com/search?updated-min=2017-01-01T00:00:00%2B01:00&updated-max=2018-01-01T00:00:00%2B01:00&max-results=4'>2015</a></li>
<li><a href='http://blonparia.blogspot.com/search?updated-min=2016-01-01T00:00:00%2B01:00&updated-max=2017-01-01T00:00:00%2B01:00&max-results=50'>2016</a></li>
<li><a href='http://blonparia.blogspot.com/search?updated-min=2017-01-01T00:00:00%2B01:00&updated-max=2018-01-01T00:00:00%2B01:00&max-results=4'>2017</a></li>
</ul>
</li>

Aby dodać kolejny rok, wystarczy po ostatnim </a> dodać <li><a href='LINK DO ARCHIWUM'>ROK</a></li>

To wszystko, nie ma żadnych nowości, ale mam nadzieję, że osobom, które na to czekały taki wpis, co jak i gdzie troszkę pomógł ;)
Czytaj dalej »

Kiedy wstyd się przyznać

20.01.2017


Nie będzie to oparte tylko na moich własnych doświadczeniach. Będzie to historia moich znajomych, a nawet wykładowców. Nie będę jednak mówiła, które fragmenty są które, po prostu postaram się to wplatać w tekst tak, aby wszystko tworzyło ładną całość. Chociaż troszkę, na tyle ile jestem w stanie stworzyć ładną całość pisząc dłuższy tekst niż punkt po punkcie co trzeba wykonać.

Przedstawię Ci sytuację, w której ciężko nie raz jest się do czegoś przyznać. Chociaż tak naprawdę bardzo byś chciał, bo w końcu to TWOJE, ale nie możesz, no po prostu nie i już, bo wstydu sobie narobisz.

To są te sytuacje, w których ktoś pisze do Ciebie wiadomość z prośbą o zrobienie jakiejś grafiki. Nie będę mówiła tu o konkretach, zacznijmy po prostu od ogółu. Wszystko jest dobrze, wszystko jest ustalone, projektujesz, kombinujesz, przedstawiasz najlepszą wizje według Ciebie. Wysyłasz wstępne projekty, a tu nagle klient wyskakuje Ci z czymś takim:

A może dodajmy tam tęcze, a nad literką M i A, dajmy jednorożca rzygającego cukierkami, wtedy będzie efekt WOW i przykuje bardziej uwagę

Ty w tym momencie siedzisz i myśli "za co?". Próbujesz przetłumaczyć, że jednorożce i tęcza to nie jest jednak dobry pomysł, że może warto zrezygnować i inaczej popracować nad efektem "WOW". Nie, nie, nie ma tak dobrze, jednorożce i tęcza zostają i nawet nie myśl, że może być inaczej.

Ok, robisz to, bo w końcu "klient nasz pan". Wklejasz tę tęczę, tego rzygającego jednorożca, jednocześnie robisz to tak, aby nadal (na tyle ile to możliwe) zachować spójną całość.

Jednak to jeszcze nie to, klient znowu Ci pisze, aby wykonać poprawki:

Bo wie pani, ja myślałem, aby tego jednorożca i tę tęczę dać tak bardziej NA PRZÓD, aby był dobrze widoczny, bo tak, to jest tak jak było, nadal bez efektu WOW

No to siadasz i robisz efekt "WOW" według klienta, bo pamiętaj "klient nasz pan". W między czasie zastanawiasz się, po co Ci były te wszystkie lata nauki, skoro musisz robić coś z rodem wyciągnięte z Painta. Oddajesz projekt, klient zachwycony - Ty - niekoniecznie i modlisz się tylko o to, aby nigdzie nie podpisał, że projekt został wykonany przez Ciebie, a na zakończenie, Twój kochany klient rzuca Ci szydercze "będzie miała pani czym uzupełnić portfolio".

Nie, pani nie będzie miała czym uzupełnić, bo projekt wygląda tak:

Później zaczynasz "dojrzewać", robisz selekcje i w momencie kiedy klient, chce na Tobie wymusić zrobienie efektu "WOW" za pomocą motylków, piesków z merdającymi ogonkami etc. Ty grzecznie odpowiadasz, że niestety, nie podejmiesz się tego, bo (tutaj wpisz powód). Wtedy wielce urażony klient mówi Ci:

To pani strata, nie będzie pani miała co dać do portfolio 

A ty siedzisz przed komputerem i sobie myślisz  "całe szczęście, że nie będę miała tego do portfolio". Pozbyłaś się jednego wstydu i nie będziesz musiała się modlić o to, aby klient nie podpisywał tego dzieła, Twoim imieniem i nazwiskiem.

Nie myśl sobie jednak, że to tylko wina klientów, nie zawsze jest Ci wstyd za swoje prace przez nich, większość klientów jest naprawdę spoko, wiedzą dokładnie czego chcą, ich pomysł możesz przelać idealnie na...piksele. Jednak, zdarzyć się może, że to Ty, jako projektant zakochany w jednorożcach, proponujesz takie efekty "WOW", że po miesiącu zastanawiasz się "czego ja to dałam do portfolio", "czemu ja komuś zaproponowałam ten projekt", "czemu ktoś tego używa", a uwierz mi na słowo, że znam osoby, które projektują bez głowy.

Ważne, żeby się uczyć na własnych błędach, nauka na błędach jest cenniejsza niż złoto, ale pamiętaj, aby nie krzywdzić przy tym innych. Jeśli nie czujesz się pewny w projektowaniu na własną rękę, wyobraźnia jeszcze u Ciebie kuleje, a widzisz, że klient przedstawił Ci sensowne wytyczne - zrób to tak, jak masz napisane.

Jeśli Ty drogi potencjalny kliencie, mniej więcej wiesz czego chcesz, ale nie wiesz jak to ma się prezentować, zgłaszasz się o pomoc - to daj sobie pomóc. Nie upieraj się przy tych jednorożcach, nikt nie chce dla Ciebie i Twojego interesu źle, serio.
Czytaj dalej »

Wyświetlanie gadżetu, tylko na stronie głównej - Blogger

17.01.2017


Po publikacji szablonu do pobrania Ms. mint brown - który został udostępniony już dość dawno - dostałam i dostaje sporo maili z zapytaniem "jak ukryć kolumnę boczną we wpisie" lub "jak ukryć gadżet, aby nie pokazywał się na podstronie z wpisem". Postanowiłam, że zrobię wpis o tym, jak to wykonać i rozwiać Wasze wątpliwości. Od razu mówię, że (dla niektórych) niestety, będziemy bawić się w HTMLu.

1. Przechodzimy do szablon - edytuj kod HTML
2. Wyszukujemy <b:skin>...</b:skin> lub </b:skin> - Zwinięty lub rozwinięty CSS. Tak to będzie wyglądać w jednym i drugim przypadku:



3. POD <b:skin>...</b:skin> lub </b:skin> wklejamy kod:

<b:if cond='data:blog.url == &quot;#&quot;'>
<style>
Selektor {
display: none !important;
}
</style>
</b:if>









4. Analiza kodu:

<b:if cond='data:blog.url == &quot;#&quot;'>
<style>
Selektor{
display: none !important;
}
</style>
</b:if>

# - zamieniamy na link, postu/podstrony, w której chcemy ukryć nasz gadżet
Selektor - wpisujemy selektor gadżetu do ukrycia

! Nie musimy tworzyć nowego kodu, jeśli chcemy ukryć więcej niż jeden gadżet. Wystarczy, że po przecinku napiszemy kolejne selektory. Przykład:

<b:if cond='data:blog.url == &quot;#&quot;'>
<style>
Selektor, Selektor2 {
display: none !important;
}
</style>
</b:if>


Czytaj dalej »

Jak zrobić napis z obrazu na obrazie - GIMP

11.01.2017



Dawno nie było instrukcji w GIMPie, więc postanowiłam Wam ją dzisiaj podrzucić, a pokażę Wam jak zrobić napis z obrazu na obrazie, tak to sobie nazwałam, a Wy zaraz dowiecie się o co chodzi ;)

1. Odpalamy GIMPa
2. Otwieramy wybrane zdjęcie za pomocą plik - otwórz 
3. Tworzymy nową warstwę, z białym wypełnieniem


4. Zmniejszamy krycie białej warstwy - nie ma tutaj konkretnej wartości jakiej musimy się trzymać


5. Dodajemy napis





























6. Klikamy na warstwę z napisem prawym przyciskiem myszki i wybieramy "kanał alfa na zaznaczanie" 


























7. Jak możemy zobaczyć na ostatnim zdjęciu w punkcie 6, pojawiło nam się zaznaczenie na napisie. Teraz musimy kliknąć na warstwę z białym wypełnieniem i wybrać na klawiaturze przycisk "delete".

8. Teraz przechodzimy na warstwę z napisem i usuwamy ją.


9. Efekt


Czytaj dalej »