002. Ketten

Witam.

 One Ok Rock Liar

Dzisiaj pokażę wam dwie fajne funkcje na karty i napiszę oczywiście kody! 

O miniaturkach kart nie zapomniałam XD też się pojawią. 

Zacznę od szablonu, o którym nie wspomniałam

Namęczyłam się nad tym szablonem. ColorPicker mi nie działał i musiałam włączyć parę razy laptop od nowa albo wypadała mi śruba z laptopa i musiałam wkręcić...

Mam nadzieję, że podoba się wam jego wykonanie jak i kolory prze ze mnie do niego dobrane. 

Osobiście jestem z niego bardzo zadowolona. 

Od razu powiem wam, że praca nad szablonem głównym trwa. Więc bądźcie cierpliwi i na niego zaczekajcie. Tak samo nad założeniem galerii, ale Atena jest bardzo surowa, jeśli chodzi o szablony i trzeba się postarać ^^. Mam nadzieję, że niedługo uporamy się z tym problemem. 

Karty Pionowe

Selektorem do tych kart jest:

#PageList1 a:link - Tutaj ustala się wygląd kart nie odwiedzonych. 

#PageList1 a:visited - Tu z kolei ustala się wygląd karty odwiedzonej.

#PageList1 a:hover - Wygląd karty, funkcje jak np. rotacja czy inne bajery po najechaniu.

Kod: 

ul, ul li {

display: block;

list-style: none;

margin: 0;

padding: 0;

}

#PageList1 a:link { 

text-align: center;

background: #000000;

color: #C96A6C

text-align: center;

display: block; 

padding: 4px;

font-family: Century Gothic, sans-serif;

font-size: 12px; 

letter-spacing: 4px;

text-decoration: none;

margin: -2px 10px; 

} 

#PageList1 a:visited {

text-align: center; 

background: #C96A6C;

color: #ffffff;

display: block; 

font-family: Century Gothic, sans-serif;

font-size: 12px; 

border-left: dotted #000000 2px; 

border-right: dotted #000000 2px;

letter-spacing: 4px;

padding: 4px;

text-decoration: none;

margin: -2px 10px; 

}

#PageList1 a:hover {

background: #904B4D; 

color: #ffffff; 

border-bottom: dashed #000000 2px;

border-top: dashed #000000 2px;

padding: 4px;

transition: all 1s;

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;}

Teraz wytłumaczę co jest do czego.

color: to color czcionki

background: color tła

border (top,bottom,left,right): ramka jeśli zna się kod można dodawać także obrazki podam wam go:

border-image-source: url(punkt.gif); border-image-slice: 10; border-image-repeat: space; border-width: 10px. 

PAMIĘTAJCIE, ŻE W NAWIASIE WSTAWIA SIĘ LINK

font-family: określamy tutaj czcionkę np. courier

text-align: wyśrodkowanie do; środka, w prawo, lewo wyjustowanie

(center, right, left, justify).

Kod: 

ul, ul li {

display: block;

list-style: none;

margin: 0;

padding: 0;

}

#PageList1 a:link { 

text-align: center;

background: #000000;

color: #C96A6C

text-align: center;

display: block; 

padding: 4px;

font-family: Century Gothic, sans-serif;

font-size: 12px; 

letter-spacing: 4px;

text-decoration: none;

margin: -2px 10px; 

} 

#PageList1 a:visited {

text-align: center; 

background: #C96A6C;

color: #ffffff;

display: block; 

font-family: Century Gothic, sans-serif;

font-size: 12px; 

border-left: dotted #000000 2px; 

border-right: dotted #000000 2px;

letter-spacing: 4px;

padding: 4px;

text-decoration: none;

margin: -2px 10px; 

}

#PageList1 a:hover {

background: #904B4D; 

color: #ffffff; 

border-bottom: dashed #000000 2px;

padding: 4px;

transform: rotateY(180deg);

-webkit-transform: rotateY(180deg);

transition: all 1s;

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;}

Napiszcie jakie chcielibyście zobaczyć karty. Nie wiedziałam jakie zrobić i wam pokazać, więc zrobiłam dwa przykłady. Następnym razem dodam dwa przykłady kart poziomych. Jeśli chcecie, żeby coś szczególnego się pojawiło to po prostu piszcie w komentarzach. 

A tu dodaję 4 teksturki... Kto wie czy komuś się spodobają, ale dwa ostatnie to są po prostu obrazki czyjegoś autorstwa. Tak mi się spodobały, iż chcę je wykorzystać w jakiejś pracy XD. 

Przepraszam za miniaturkę, ale nie miałam czasu zrobić prawidłowej wielkości.

To na tyle na dziś.