817: Zrób to sam: Kodowanie - najpopularniejsze tricki

Witam ciepło w kolejnej odsłonie poradnika dotyczącego kodowania w smoczych ramkach. Skoro omówiony został już temat podstaw tej tajemniczej sztuki i zaprezentowano garść tricków upiększających okno formularza, czas na najpopularniejsze efekty spotykane w NWD. Pamiętajcie, większość z nich jest trudna tylko z pozoru.

Mistyczne obrazki

Przeglądając SB zauważyliście, że niektórzy mają przy menu, a nawet w rozwijanej po kliknięciu na nie liście tajemnicze, mistyczne ikonki? Częstokroć będące zarazem tytułami smoka? Cóż to za niesprawiedliwość, że Wasz wspaniały gad, nosząc identyczny tytuł, pozbawiony został podobnej ozdoby! Spokojnie, nic skomplikowanego. Możecie mieć identyczne, nawet nie tracąc majątku w warsztatach.
Trzecie okno: background: url(LINK_DO_OBRAZKA) no-repeat left; padding-left: 12px; 
Czwarte okno: background: url(LINK_DO_OBRAZKA) no-repeat right; padding-right: 12px;

smok z mistycznymi obrazkami 

Dodatkowe wskazówki:
~ nie wybieraj jako mistycznego obrazka grafiki większej niż 10 na 10 px, bo będzie bolało;
~ aby twoje mistyczne obrazki przesuwały się płynnie wpisz w okno trzecie oraz czwarte:
-moz-transition: all 0.5s ease-in-out;       
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;

Wyśrodkowane menu

Równie popularny trik, bardzo mocno związany z inną modą, czyli buttonami. Oczywiście, nie da się wkleić buttonu do menu wyrównanego do prawej. To znaczy da, ale istnieje niebezpieczeństwo, że osoby z wysoko rozwiniętym zmysłem estetyki na widok ramki umrą lub ich psychika zostanie trwale okaleczona.
Okna trzecie i czwarte:
text-align: center;       
width: 336px; 
position: relative;
display: block;

smok z wyśrodkowanym menu

Dodatkowe wskazówki:
~ należy pamiętać, że w przypadku menu wyśrodkowanego, znajduje się ono nieco niżej - zwłaszcza, jeśli kodowanie robimy dla już gotowej ramki;
~ w zakładce "Komentarze" bardzo mocno rzucają się w oczy rozstrzelone napisy "skasuj", są one jednak widoczne tylko dla właściciela smoka.

Buttony

Jak zostało wyżej wspomniane, zanim zabierzemy się za zabawę z buttonami, dobrze jest menu wyśrodkować. Dlatego - jeżeli czytasz ten artykuł wybiórczo - użyj tego zabawnego kółeczka na myszce, które tak bardzo lubisz macać i podjedź w górę. A jeśli nie masz myszki lub kółeczka, lub nie lubisz go macać (podobno i tacy ludzie żyją gdzieś na tym świecie), użyj innej, mniej zabawnej metody, aby przeczytać punkt zwany Wyśrodkowane menu.
Trzecie okno: padding: 20px 0px; background: transparent url(LINK_DO_BUTTONA)no-repeat center;

Czwarte okno: background: transparent url(LINK_DO_BUTTONA)no-repeat center;

smok z ładnie wkomponowanymi buttonami

Dodatkowe wskazówki:

~ buttony bardzo źle wyglądają przy zwyczajnych, cienkich paskach;

~ nie ma w zasadzie gotowego przepisu na wartość wpisaną dla polecenia padding; u mnie jest to 20, ale wiele zależy od rozmiarów buttonu - zbyt mała wartość w tym miejscu nam go przytnie.

Rozsuwanie się liter

Osobiście nie polecam tego efektu dla teł z buttonem, zwłaszcza początkującym, bo łatwo przesadzić i sprawić, że litery wystrzeli nam w kosmos (czyli poza button, co nie wygląda najlepiej). Wiadomo jednak, że jeśli zachować umiar, takie połączenie może wypaść całkiem ciekawie.
Trzecie okno: -moz-transition: all 0.7s ease-in-out; -webkit-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out;
Czwarte okno: -moz-transition: all 0.7s ease-in-out; -webkit-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; letter-spacing: 5px;

smok z "rozjechanym" menu

Dodatkowe wskazówki:
~ aby do efektu rozjeżdżania liter dołączyć efekt zmiany koloru, wystarczy wpisać dwa różne w trzecim i czwartym oknie;
~ większa liczba po poleceniu letter-spacing to większa przerwa po najechaniu;
~ płynne rozjeżdżanie się liter nie działa w niektórych przeglądarkach, m. in. Mozilla Firefox.

Kursor

Rzecz prosta, ale dodająca uroku. Wszystkie okna:
cursor: url(LINK_DO_KURSORA), auto;



Na zakończenie - nic tak nie poszerza horyzontów jak wsadzenie łapska w ogień albo widelca do kontaktu! To znaczy, testujcie wszystkie efekty, na jakie natraficie, mieszajcie je ze sobą do woli i nie przejmujcie się, jeśli w międzyczasie urodzą się z tego niezbyt urokliwe potworki. Praktyka czyni mistrza.

Pamiętajcie o uważnym kopiowaniu kodów - jedna niepotrzebna spacja lub zapomniany średnik może narobić bardzo dużo zamieszania. Wszystkie zaprezentowane powyżej tricki zostały przetestowane w przeglądarce Google Chrome, niektóre polecenia mogą mieć odmienny skutek (lub w ogóle nie działać) dla pozostałych klientów.

Hasta la vista!

Cerro