Smocza ramka

Z Nightwood
Skocz do: nawigacji, wyszukiwania

Smocza ramka - okienko, w którym znajdują się następujące informacje o chowańcu:

  • podstawowe - wariant wyglądu, imię, poziom, identyfikator oraz dane właściciela,
  • stan - punkty pojedynku, status zdrowia, zmęczenia, głodu, samotności i zadowolenia,
  • relacje z innymi smokami - rodzice oraz dzieci,
  • walka - podsumowanie stoczonych pojedynków,
  • opis,
  • karmienie,
  • komentarze,
  • ocena leśnej społeczności.

Odnośniki do ramek znajdują się w zakładce Przeglądaj, w profilach graczy oraz na listach smoków do pojedynków oraz najwaleczniejszych bestii. W dziale Szczegóły znajduje się ponadto kod pozwalający na umieszczenie odnośnika do chowańca na własnej stronie internetowej lub blogu.

Domyślny rozmiar okna, w którym wyświetlają się informacje o smoku wynosi 370×470 pikseli. Po wybraniu zakładki Komentarze jego szerokość odrobinę się zwiększa, dlatego poleca się, aby tła w ramce miały wymiary około 550×550 pikseli.

Spis treści

Edycja ramki

W zakładce Przeglądaj oraz dziale szczegółów danego smoka istnieje możliwość edycji jego ramki w oparciu o dwa tryby:

  • prosty - zawierający wbudowany edytor kodów oraz automatyczny podgląd efektów,
  • zaawansowany - w którym należy samodzielnie wprowadzać odpowiednie formuły, posługując się językiem CSS.

Oba tryby działają niezależnie od siebie - zapisanie ramki w jednym z nich nie powoduje usunięcia ustawień z drugiego. W okienku widoczne będą jednak wyłącznie efekty w ostatnio wybranym trybie pracy.

Tryb prostej edycji

Prosta edycja ramki.

Opcja prostej edycji ramki umożliwia:

  1. zmianę koloru, typu oraz rozmiaru tekstu w całej ramce,
  2. zmianę koloru imienia smoka,
  3. ustawienie koloru lub obrazka w tle,
  4. zmianę koloru linków nieaktywnych i aktywnych,
  5. wprowadzenie efektów specjalnych: cienia tekstu oraz odwrócenia smoka.

Tryb edycji zaawansowanej

Edycja ramki w trybie zaawansowanym polega na wprowadzaniu kodów CSS w odpowiednie pola formularza ustawień:

Baza kodów CSS

Edycja tła

Kod Przykład Opis
background-attachment background-attachment: scroll;
background-attachment: fixed;
Definiuje "zaczepienie" tła:
scroll - tło przesuwa się wraz z tekstem (domyślnie),
fixed - tło jest nieruchome względem okna przeglądarki.
background-color background-color: #000000;
background-color: black;
Zmienia kolor tła na wybrany.
PORADA Obszerny wykaz kodów kolorów można znaleźć w palecie barw. Dozwolone jest także stosowanie nazw z listy.
background-image background-image: url('http://nightwood.net/images/bg.png'); Dodaje w tle obrazek znajdujący się pod podanym linkiem.
PORADY Wprowadzony link musi prowadzić bezpośrednio do obrazka (być zakończony rozszerzeniem pliku, np. ".png", ".jpg", ."gif"), nie zaś do strony z grafikami. Odnośnik można łatwo uzyskać, klikając prawym przyciskiem myszy i wybierając opcję "Kopiuj adres obrazka".
Jeżeli posiadasz obrazek do tła na swoim komputerze, umieść go w sieci dzięki darmowym stronom hostingowym, np. http://imgur.com, http://tinypic.com, http://fotosik.pl, http://vlep.pl, a następnie skopiuj bezpośredni adres URL i wklej w kodzie ramki.
background-position background-position: top left;
background-position: bottom right;
background-position: 50px 125px;
background-position: 20% 30%;
Pozwala na pozycjonowanie obrazka w wybrany sposób. W tym celu używa się słów: left, right, center, top, bottom lub wartości podanych w pikselach czy procentach.
background-repeat background-repeat: repeat;
background-repeat: repeat-x
background-repeat: repeat-y
background-repeat: no-repeat;
Określa, w jaki sposób tło jest powtarzane:
repeat - w obu kierunkach (domyślnie),
repeat-x - tylko w kierunku poziomym,
repeat-y - tylko w kierunku pionowym,
no-repeat - nie jest powtarzane.
background-size background-size: auto;
background-size: contain;
background-size: cover;
background-size: 550px;
Określa rozmiar wyświetlanego tła:
auto - domyślnie,
contain - skalowanie, tak aby cały obrazek mieścił się w oknie,
cover - skalowanie, tak aby obrazek pokrywał całe okno,
wyświetla grafikę przeskalowaną do podanego rozmiaru.

Edycja tekstu

Kod Przykład Opis
color color: #2F4F4F;
color: darkslategray;
Zmienia kolor tekstów w menu ramki na wybrany.
PORADA Obszerny wykaz kodów kolorów można znaleźć w palecie barw. Dozwolone jest także stosowanie nazw z listy.
font-family font-family: Verdana;
font-family: Miama, Papirus, Sefir;
Zmienia krój czcionki. Aby wybrana czcionka została wyświetlona, musi być zainstalowana na komputerze.
PORADA Możesz wybrać zestaw kilku czcionek, by w ramce pojawiła się ta, która - licząc od lewej strony - pierwsza zainstalowana jest na komputerze (przydatne w wypadku pobierania nowych czcionek z internetu).
font-size font-size: 10px; Zmienia wielkość czcionki (w pikselach).
font-style font-style: normal;
font-style: italic;
Określa styl czcionki:
normal - domyślny,
italic - pochylony (kursywa).
font-variant font-variant: normal;
font-variant: small-caps;
Określa wariant czcionki:
normal - domyślny,
small-caps - kapitaliki (mniejsze wielkie litery zamiast małych).
font-weight font-weight: normal;
font-weight: bold;
Określa "wagę" czcionki:
normal - domyślna,
bold - pogrubiona.
letter-spacing letter-spacing: 2px; Definiuje odstępy między literami o podanej szerokości.
line-height line-height: 3px; Definiuje odstępy między kolejnymi wierszami o podanej szerokości.
text-align text-align: left;
text-align: center;
text-align: right;
text-align: justify;
Wprowadza wyrównanie tekstu:
left - do lewej,
center - do środka,
right - do prawej,
justify - do obu marginesów jednocześnie.
text-decoration text-decoration: none;
text-decoration: underline;
text-decoration: line-through;
text-decoration: overline;
Dodaje dekorację tekstu:
none - brak (domyślnie),
underline - podkreślenie,
line-through - przekreślenie,
overline - linia nad tekstem.
text-indent text-indent: 15px; Wprowadza wcięcie o podanej szerokości na początku akapitu.
text-shadow text-shadow: 2px 4px 6px #888888;

text-shadow: -2px -2px 4px red, 2px 2px 4px blue, 0px 0px 10px green;

Dodaje cień za tekstem, definiowany kolejnymi atrybutami:
przesunięcie cienia w poziomie (dodatnie wartości - w prawo, ujemne - w lewo),
przesunięcie cienia w pionie (dodatnie wartości - w górę, ujemne - w dół),
szerokość rozmycia cienia,
kolor cienia.
PORADA Wprowadzając kilka definicji cienia, można uzyskać bardzo ciekawe efekty. W tym celu atrybuty dotyczące kolejnych cieni oddzielaj przecinkami (tak jak w przykładzie obok).
text-transform text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
Transformuje tekst w wybrany sposób:
none - bez zmian,
capitalize - zmiana pierwszych liter wszystkich wyrazów na wielkie,
uppercase - zmiana wszystkich liter na wielkie,
lowercase - zmiana wszystkich liter na małe.
word-spacing word-spacing: 4px; Definiuje odstępy między kolejnymi wyrazami o podanej szerokości.

Edycja linków

Kod Przykład Opis
transition transition: linear 800ms;
transition: linear 3s;
Dodaje efekt płynnego przejścia (czas w milisekundach lub sekundach).

Edycja formularzy i buttonów

Kod Przykład Opis
background-color background-color: #808080;
background-color: grey;
background-color: transparent;
Zmienia kolor tła na wybrany (wartość "transparent" ustawia przezroczyste tło).
PORADA Obszerny wykaz kodów kolorów można znaleźć w palecie barw. Dozwolone jest także stosowanie nazw z listy.
background-image background-image: url('http://nightwood.net/images/bg.png'); Dodaje w tle obrazek znajdujący się pod podanym linkiem.
PORADY Wprowadzony link musi prowadzić bezpośrednio do obrazka (być zakończony rozszerzeniem pliku, np. ".png", ".jpg", ."gif"), nie zaś do strony z grafikami. Odnośnik można łatwo uzyskać, klikając prawym przyciskiem myszy i wybierając opcję "Kopiuj adres obrazka".
Jeżeli posiadasz obrazek do tła na swoim komputerze, umieść go w sieci dzięki darmowym stronom hostingowym, np. http://imgur.com, http://tinypic.com, http://fotosik.pl, http://vlep.pl, a następnie skopiuj bezpośredni adres URL i wklej w kodzie ramki.
Ciekawy efekt daje ustawiona w tle częściowo przezroczysta grafika w połączeniu z kodem background-color: transparent; - odpowiednio dopasowana może rozjaśniać lub przyciemniać właściwe tło ramki.
border-color border-color: #808000;
border-color: olive;
Zmienia kolor obramowania na wybrany.
border-radius border-radius: 5px; Dodaje zaokrąglenie obramowania o wybranym rozmiarze.
border-style border-style: solid;
border-style: double;
border-style: dashed;
border-style: dotted;
border-style: inset;
border-style: groove;
border-style: outset;
border-style: ridge;
Określa styl obramowania:
solid - linia ciągła,
double - linia podwójna,
dashed - linia kreskowa,
dotted - linia kropkowa,
inset - linia wklęsła,
groove - linia wklęsła przestrzenna,
outset - linia wypukła,
ridge - linia wypukła przestrzenna.
border-width border-width: 1px; Zmienia grubość obramowania (w pikselach).
box-shadow box-shadow: 2px -4px 6px #888888;
box-shadow: inset 0px 0px 10px #222222;
Dodaje cień pól formularzy, zgodny z podanymi atrybutami:
przesunięcie cienia w poziomie (dodatnie wartości - w prawo, ujemne - w lewo),
przesunięcie cienia w pionie (dodatnie wartości - w górę, ujemne - w dół),
szerokość rozmycia cienia,
kolor cienia.

Komenda "inset" określa cień wewnątrz elementów.

height height: 50px; Określa stałą wysokość pól formularzy (w pikselach).
margin margin: 10px; Definiuje szerokość marginesów zewnętrznych.
padding padding: 5px; Definiuje szerokość marginesów wewnętrznych.
width width: 300px; Określa stałą szerokość pól formularzy (w pikselach).

Inne efekty

Niektóre chętnie stosowane w ramkach efekty wymagają wpisania w ustawieniach kombinacji kilku kodów, często poddanych subtelnym modyfikacjom.

Kursor w ramce

Za pomocą prostego kodu istnieje możliwość dodania do ramki oryginalnego kursora. Aby wyświetlał się w całym okienku, należy go wkleić w dwóch wskazanych poniżej polach ustawień.

Pole ustawień Kod
BODY, a:hover cursor: url('bezpośredni link'), default;

Dodatek graficzny do linków

Odsyłaczom w ramce mogą towarzyszyć tła (jednokolorowe lub obrazkowe) - w tym celu należy zastosować wymienione już wcześniej komendy background-color lub background-image.

Aby dodać małą grafikę obok linków (nie w ich tle), zastosować trzeba zmodyfikowany kod:

Pole ustawień Kod
a:link, a:active, a:visited
a:hover
background-image: url('bezpośredni link'); no-repeat left;
  • Zamiast left można wpisać right - obrazek pojawi się wówczas po prawej stronie linków.
  • Można inny obrazek ustawić dla linków aktywnych, inny dla linków nieaktywnych. Podobnie obrazek może być wyświetlany domyślnie z jednej, a po najechaniu na odsyłacz kursorem myszy - z drugiej strony (efektowi płynnego przejścia sprzyja kod transition).

Grafika pod linkiem (tzw. button)

Względnie dużą popularnością cieszą się ozdobne grafiki umieszczane pod linkami, których ustawienie wymaga odpowiedniego przygotowania kilku kodów:

Pole ustawień Kod Opis
a:link, a:active, a:visited
a:hover
background-image: url('bezpośredni link'); no-repeat center; display: block; Dodaje wyśrodkowany button pod odnośnikami.
text-align: center; Wyśrodkowuje menu.
position: relative; Przesuwa menu relatywnie do jego oryginalnej pozycji.
padding: 10px 10px; Definiuje marginesy wewnętrzne linków - namiary na menu:
pierwsza wartość przesuwa je w pionie,
druga - w poziomie (odległość nawiasów od linków).
width: 320px; Określa odległość między nawiasami (nie nawiasem a linkiem) w menu ramki.
height: 20px; Określa wysokość linków wraz z grafiką-buttonem w tle, umożliwiając wyświetlanie jej w całości.
  • Wszystkie wartości powyższych kodów powinny być dopasowywane do posiadanej grafiki. W przeciwnym razie zbyt duże lub małe wielkości mogą spowodować niepoprawne jej wyświetlanie.
  • Można zastosować inny obrazek dla linków aktywnych i dla linków nieaktywnych (warto zastosować wówczas formułę transition dla płynnych przejść).

Transformacje

Istnieje grupa kodów pozwalająca na transformacje elementów ramki (pola formularzy, tekst, odnośniki, itd.), polegające na ich przesunięciach i różnorakich rotacjach.

Kod Przykład Opis
rotate transform: rotate(30deg); Obraca element o określoną wartość (w stopniach - od 0 do 360).
scale transform: scale(1.5, 5); Skaluje element (gdzie 1 to skala normalna):
pierwsza wartość - w poziomie,
druga - w pionie.
skew transform: skew(20deg, 40deg); Przekrzywia element o określoną wartość (w stopniach - od 0 do 360):
pierwsza wartość - w poziomie,
druga - w pionie.
translate transform: translate(-25px, 10px); Przesuwa element o podaną wartość (w pikselach):
pierwsza wartość - dodatnia w prawo, ujemna w lewo,
druga - dodatnia w dół, ujemna w górę.
Osobiste
Przestrzenie nazw

Warianty
Działania
Nawigacja
Narzędzia