017† Fade; 2 szablony, instrukcja

 Phlitre - Fade

Nie poszłam do szkoły i o to tego efekty. Przygotowałam jedną darmówkę oraz zamówienie. Cóż chciałabym jeszcze coś zrobić, ale tym razem już nie przyjmuję zamówień, wcześniej była szansa, ale jak widać tylko jedna osoba skorzystała i otrzymała w ekspresowym tempie swój szablon. Nie przyjmuję zamówień ponieważ chcę zrealizować taki jeden pomysł, a nie wiem, czy w ogóle mi wyjdzie, więc nie wiem ile czasu to potrwa nim się poddam xd :)

Darmówka

podgląd                †                pobierz
† r o s a r i e s !

Zamówienie dla Niezrównoważonej

podgląd                †                pobierz
† r o s a r i e s !

Mam nadzieję, że szablon mimo swojej graficznej prostoty przypadnie ci do gustu. Kompletnie nie miałam pomysłu jak to zrobić żeby wyszedł taki mroczny, fajny klimat. To znaczy miałam pomysł, ale mi nie wyszedł. Niestety nie mam już takich zasobów pędzli, tekstur i innych dodatków niż wcześniej, bo w niewiadomy sposób poznikały, dlatego nie miałam tego co najbardziej pasowało do mojej koncepcji, a szukać tego to potrwałoby z dzień lub więcej. :/

† Co zrobić by przy linkach, archiwum pojawiły się kółeczka, kwadraty lub wybrany przez nas obrazek? 

Wchodzimy do projektanta i wybieramy sobie dany gadżet(linki, strony, archiwum, lista blogów itd). Ja zaprezentuję wam jak to działa na linkach i archiwum. Najpierw wyjaśnię jak utworzyć listę z obrazkiem. Otóż w kodzie CSS należy wpisać te cechy: list-style-image odpowiada za obrazek przy linkach oraz list-style-position, który odpowiada za pozycję obrazka(czy ma być za miejscem przeznaczonym na gadżet[wychodzi za ramkę gadżetu; outside], czy ma być w przeznaczonym miejscu wybranego gadżetu; inside). Należy pamiętać by wysokość obrazka nie przekraczała wysokości danego linku, bo wtedy będzie to brzydko wyglądać. 

Przykładowy kod CSS użyty w szablonie "Trap" z poprzedniej notki. 

#LinkList1 li {line-height: 1; text-align: left; padding: 1px 1px 1px 1px; list-style-image: url('http://s6.ifotos.pl/img/xdpng_nxwrwqh.png'); list-style-position: outside; text-transform:uppercase;}
#LinkList1 a:link {display: block; background: white; }

Podałam więcej niż potrzeba CSS do uzyskania efektu obrazka obok linku, ale myślę, że są jeszcze tacy, którzy nie wiedzieli w jaki sposób zmienić odległość między linkami na mniejszą niż jest w bloggerze. (:

Możecie wkleić sobie cały kod i kombinować ze swoim obrazkiem do woli. (:

† kółeczka, kwadraty

Tutaj sytuacja wygląda podobnie, ale zmienia się nam odrobinę jedna z podanych wcześniej cech, zamiast list-style-image piszemy list-style-type. Mamy do wyboru aż 17 wartości + podstawowe właśnie kółka i kwadraty. A są nimi:  armenian,  cjk-ideographic,  decimal, decimal-leading-zero, georgian, hebrew, hiragana, hiragana-iroha, katakana, katakana-iroha, lower-alpha, lower-greek, lower-latin, lower-roman, upper-alpha,  upper-latin, upper-roman + circle(niezamalowane kółka), square(zamalowane kwadraty), disc(zamalowane kółka),

#LinkList1 li {line-height: 1; text-align: left; padding: 1px 1px 1px 1px; list-style-type: hiragana; list-style-position: outside; text-transform:uppercase;}

Uwaga: IE9 i Opera 11 nie obsługuje: cjk-ideographic, hebrew, hiragana, hiragana-iroha, katakana i katakana-iroha.
Uwaga: IE8 i wcześniejsze wersje obsługują tylko wartości właściwości: decimal-leading-zero, lower-greek, lower-latin, upper-latin, armenian, georgian jeśli w dokumencie HTML strony jest to określone.

Przykładowe listy:

• pierwszy element square
• drugi element square
• trzeci element square

• pierwszy element katakana
• drugi element katakana
• trzeci element katakana

• pierwszy element lower-greek
• drugi element lower-greek
• trzeci element lower-greek