714: Zrób to sam: Podstawy kodowania
Dzień dobry, przed państwem Hún-dreki - feniksowate smoczydło, które posłuży mi jako ofiara (to znaczy modelka, modelka) do przedstawienia podstaw tak zwanego "kodowania", czyli po prostu pomoże Czytelnikom poznać tajniki zaawansowanej edycji ramki :) |
| Proszę bardzo, oto nasza modelka. |
Tutaj zaś bardzo wyjściowa ramka Smoczycy (ponieważ jej imię to właśnie oznacza w przekładzie, a polska wersja językowa nie ma ohydnych, nieprzyjaznych kreseczek nad "u", tak pozwolę ją sobie mienić):
Ten obezwładniający efekt osiągnąć można, kasując zawartość wszystkich okien w "Zaawansowanej edycji" i klikając "ok" - uzupełnią się kodem domyślnym, od którego najwygodniej mi zacząć :)
W porządku, skoro przedstawienie Smoczycy mam za sobą, wyjaśnię może, dla kogo jest ten skromny tutorial. Z pewnością nie dla użytkowników zaawansowanych, bo Ameryki w żadnym razie nie odkrywa - ma jedynie na celu przedstawić prosto i czytelnie podstawowe informacje na temat kodowania. Świetnie, "określenie grupy docelowej" też już odhaczone.
Ponadto, do otwierania ramki używam przeglądarki Google Chrome - nie wszystkie efekty działają tak samo w pozostałych.
Zanim zaczniemy kodowanie, bez wątpienia przyda nam się:
- ramka;
- kursor;
- buttony.
Oczywiście, dwa ostatnie elementy nie są obowiązkowe. Wszystkie te rzeczy można zdobyć w dziale zamówień, w czasie Pokuciowych Metamorfoz lub zrobić samemu z pomocą poradników. Tutaj nie będziemy poświęcać im wiele uwagi, pominę też kodowanie dla kursora i buttona - być może napiszę o nich innym razem.
Teraz troszkę wiedzy. Okien, w które wpisujemy nasze kody, jest pięć. Nazywają się: BODY{}, th,td,p{}, a:link,a:active,a:visited{}, a:hover{}, .form{}. Ciekawych, czemu tak, a nie inaczej odsyłam do Wujka Google'a.
Dość już gadania po próżnicy, weźmy się do roboty! Najlepiej zacząć od wgrania tła. Musimy je oczywiście zhostować, aby uzyskać do niego link w formie podobnej jak tutaj: http://i39.tinypic.com/11v3903.png.
Ważne! Link musi kończyć się rozszerzeniem formatu graficznego - w przeciwnym razie jest niepoprawny, bo nie prowadzi bezpośrednio do grafiki. Łatwo to sprawdzić, wpisując go w okno przeglądarki.
Kiedy mamy już link, musimy wpisać w okno BODY{} następującą formułkę:
background-image:url('TUTAJ LINK');
Pamiętajmy o średniku, inaczej będzie problem!
Ponadto, aby prawidłowo wgrać ramkę, powinniśmy usunąć background-color:#cyferki;
Warto także przy zmienianiu ramki przypomnieć sobie o poczciwej formułce background-attachment:fixed; - chroni nas ona przed dublowaniem się tła w ramce, sprawiając, że to nie ono się przesuwa, ale napisy i smok (magic!).
Tak wygląda efekt u Smoczycy:
Jak widać, to już dość spory krok na dobrej drodze.
Teraz zmienimy kolory czcionki. Najlepiej wybrane kolory pobrać za pomocą GIMPa z tła ramki lub z wariantu, ale leniwi mogą też skorzystać z palety barw HTML i dobrać kolory "na oko"... co niniejszym uczynię :)
Potrzebujemy czterech kolorów: dla zwykłego tekstu, linków, linków po najechaniu i formularzy. Myślę, że skuszę się na #cc0033, #cc6600, #ffffcc, przy czym tego ostatniego użyję także dla formularzy. Nie będą może doskonale dobrane, ale wystarczą na potrzeby przykładu.
W porządku, to teraz tak. Pierwszego koloru używamy dla zwykłego tekstu. Zmieniamy domyślny color:#6F82C7; na color:#cc0033; w oknie th,td,p{}. Analogicznie postępujemy dla następnych - za kolor linków odpowiada identyczna formułka w oknie a:link,a:active,a:visited{}, za kolor linków aktywnych (po najechaniu) - a:hover{}, za kolor czcionki w przyciskach i formularzach - .form{}. Warto też zmienić kolor w oknie BODY{} - odpowiada on tylko za kolor nawiasów w menu, ale w końcu szczegóły są ważne.
W tych samych miejscach polecenie font-size odpowiada za rozmiar czcionki, zaś font-family za jej krój. Wystarczy zmienić w pierwszym wypadku cyfry, a w drugim nazwę czcionki, przy czym polecam wybierać te popularne, bo może na Waszym komputerze Super Duper Mega Funny Font With Bunnies wygląda dobrze, ale nie każdy musi mieć ją zainstalowaną, więc nie będzie miał szans się nią cieszyć.
Ja wybiorę Palatino (dość ładną jak na zwykłe czcionki) wielkości 13px (ponieważ lubię wyraźne, czytelne litery w ramkach). Rzecz jasna, czcionki są od siebie niezależne - każda może być inna.
Oto efekt:
Kurczę! Całość nie wygląda nawet w połowie tak dobrze, jak powinna! Menu rozjechało się z paskiem, liter w wielu miejscach nie widać, czcionka nie jest specjalnie ciekawa. Jak to zmienić? Pomocne może być kilka bardzo prostych tricków zastosowanych przy wpisywaniu kodów w te same okna, co powyżej...
Możemy na przykład zmienić litery na drukowane albo je pogrubić (albo zrobić wszystko naraz, w sumie czemu nie). Służą temu następujące polecenia:
font-variant: small-caps; - dla liter drukowanych;
font-weight: bold; - dla pogrubionych.
Bardzo dużo ramka zyskuje dzięki cieniom. Czarne dodajemy, wpisując w okna:
text-shadow:
0px 0px 5px #000000,
0px 0px 5px #000000,
1px 1px 1px #000000,
1px 1px 1px #000000,
0px 0px 10px #000000;
Rozmieszczenie cieni (podane w pixelach) może wyglądać zupełnie inaczej - to gotowy szablon, z którego ja korzystam. Tajemnicze zera z # oznaczają, jak można się domyślić, kolor czarny, zaś poprzedzające je pixele to właśnie umiejscowienie cieni w stosunku do liter.
Jeżeli zaś menu rozjeżdża się z paskiem, pomocna z pewnością okaże się formułka tego typu:
padding: 2px 2px;
gdzie oczywiście liczby możemy zmienić zależnie od potrzeb. Pierwsza odpowiada za położenie względem osi Y (wyżej-niżej), druga względem osi X (lewo-prawo).
Wpisujemy to w dwa pierwsze okna - BODY{} i th,td,p{}.
Po wszystkich tych długich i ciężkich cierpieniach, efekt jest już godny smoka oraz pracy poświęconej modyfikacjom:
Ostatnią rzeczą, którą zajmiemy się w tym tutorialu (który bynajmniej nie wyczerpał tematu możliwych do uzyskania efektów w ramce), będą formularze. Na tym etapie wyglądają one tak:
Niezbyt pięknie, prawda?
Za formularze odpowiada ostatnie okno, .form{}, o czym nawet miła hodowla nam przypomina :) Oznacza to, że od tej pory będziemy zainteresowani już tylko i wyłączni tym polem.
Na początek pozbędę się paskudnego, niebieskawego tła, wpisując w okno zamiast background-color:#282E45; coś innego, czyli background-color:transparent; :)
Następnie zaokrąglę rogi, wpisując z kolei:
border-top-right-radius: 10px;
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 10px;
Jak łatwo się domyśleć, liczby są odpowiedzialne za kąt zaokrąglenia i możemy się z nimi bawić, ile się nam żywnie podoba - ale nie polecam przesadzać, bo formularz zmieni nam się w kółko :)
Aby uniknąć "zjadania" tekstu przez okrągłe krawędzie, raz jeszcze zastosuję tutaj naszego starego znajomego - formułkę padding:, ale tym razem odpowiednio zwiększę wartości.
Szczegóły są ważne, stąd wypada zadbać także o krawędzie. Za ich kolor odpowiada polecenie, które domyślnie wygląda tak: border-color:#000000;
Najlepiej zmienić kolor na jeden z tych, które ustawialiśmy dla czcionki. To pozwoli nam uniknąć zbędnej w kodach pstrokacizny.
Aby dodatkowo podkreślić formularz, możemy wpisać także
box-shadow:
0px 0px 5px #000000,
0px 0px 5px #000000,
1px 1px 1px #000000,
1px 1px 1px #000000,
0px 0px 10px #000000;
Co doda nam do niego sympatyczny cień.
Teraz formularz w ramce Smoczycy wygląda już znacznie ciekawiej:
Po namyśle stwierdzam jednak, że na uwagę zasługuje czcionka. Usunę pogrubienie i zmienię kolor cienia na biały (#ffffff) oraz zmniejszę go trochę. Zamiast
text-shadow:
0px 0px 5px #000000,
0px 0px 5px #000000,
1px 1px 1px #000000,
1px 1px 1px #000000,
0px 0px 10px #000000;
mam więc teraz w tym oknie
text-shadow:
0px 0px 5px #ffffff,
0px 0px 5px #ffffff,
0px 0px 10px #ffffff;
Efekt? Litery "świecą" i ostatecznie mój formularz wygląda tak:
W ten oto sposób Smoczyca z brzydkiego kaczątka stała się bestią w ramce z całkiem miłym dla oka kodowaniem. Mam nadzieję, że po zapoznaniu się z tym tutorialem, podobny los spotka i Wasze bestie :)
Ramka Smoczycy pochodzi z Kermisiowa.
Zobacz także:
0 komentarze:
Twój komentarz będzie widoczny po akceptacji administratorki gazetki.