Kilka porad CSS

Bok!
Przepraszam, że mnie tak długo nie było - problemy techniczne. W najbliższym czasie czeka mnie format dysku. I matura, hehe ^^'*
Niektórzy w ramach odstresowania się idą do kina. Ja bawię się z kodami CSS. Na dzisiaj przygotowałam wam 2 instrukcje, które (mam nadzieję) przydadzą się przy tworzeniu własnego szablonu.

*Post był pisany kilka dni przed maturą i miał ustawioną automatyczną publikację.

Nie jestem autorką kodu CSS, więc nie wymagam, abyście przy korzystaniu z proponowanych "wskazówek" mówili, że ja je stworzyłam czy coś. CSS to narzędzie darmowe, dla każdego i nie widzę sensu opatrywania sekwencji kodów czyimś nickiem. Ktoś na drugim końcu świata na pewno już kiedyś wpadł na ten sam pomysł. 

 Krótki słowniczek:
Element - obrazek, akapit z tekstem, menu, widget określony za pomocą kodu HTML.
Atrybut - cecha elementu określona za pomocą kodu CSS.
Np. elementem jest obrazek, a jego atrybutem wielkość oraz grubość i kolor ramki.
W kodzie:
Pola oznaczone kursywą to te,  które możecie zmieniać wedle własnego uznania. Pola pogrubione oznaczają rzeczy ważne lub nietypowe, które zostaną omówione.
Liczę na to, że znacie angielski w takim stopniu, aby przetłumaczyć sobie nazwy atrybutów :)

1. Ułatwienie przy tworzeniu niestandardowych szablonów

Na początku chciałabym polecić wam narzędzie, którego używam niezwykle często. Znajduje się ono w Google Chrome (Firefoxowej wersji nie sprawdzałam) i jest niezwykle użyteczne przy tworzeniu niestandardowych szablonów. Aby sprecyzować: zawsze korzystam z opcji Edytuj kod HTML w pulpicie Bloggera.
A narzędzie, o którym mówiłam, to Zbadaj element.

Za jego pomocą mogę odczytać np. kolor ramek obrazków. To #d67132. Jak to zrobiłam?

Element, którego kod widzicie, podświetla się. Możecie najeżdżać myszką na różne elementy, a one będą wam się po kolei podkreślały. Po kliknięciu na nie w prawej kolumnie zobaczycie przypisane temu elementowi atrybuty w kodzie CSS (tak, jak było z kolorem ramki).

Zazwyczaj, pracując na kodzie HTML, używam tego narzędzia, aby zobaczyć nazwy obiektów, których parametry mogę zmienić. W ten sposób tworzyłam wszystkie swoje templatki. Spokojnie, nie mam zamiaru kopiować w ten sposób szablonu z Kruczych :D

Mam dla Was za to Zadanie domowe.
Pamiętacie mój szablon z Jackiem Sparrowem? Chcę, abyście za pomocą narzędzia Zbadaj element znaleźli kolor ramki otaczającej obrazek z naszym kochanym piratem oraz adres tego obrazka. Zrobię szablon lub inny dodatek graficzny dla pierwszych 3 osób, które napiszą w komentarzu te 2 rzeczy.
Podpowiedź: te atrybuty przyporządkowane są do 2 różnych elementów :)
Powodzenia!

2. Belka-fixed z menu i logo

Czyli efekt jak tu.

Całość opiszę wam po kolei w punktach. Jeśli coś jest niezrozumiałe, pytajcie w komentarzach, odnosząc się do konkretnych punktów.

1. Przygotowanie miejsca pracy

Czyli to, co robi się zawsze, niezależnie od czynności.

Wchodzimy w Edytuj kod HTML.

Nie bójcie się, ten przycisk nie gryzie. Praca w całym arkuszu będzie konieczna, bo dodamy nowe elementy w HTML.

Klikamy na pole z kodem i na klawiaturze klikamy Ctrl+F. W polu, które się pojawia, piszemy </body> i zatwierdzamy Enter.

Podświetlony został wyszukany znacznik. Nad nim, w polu zaznaczonym czerwoną strzałką, wpisujemy ten kod:

<!-- Dodatkowy kod HTML -->

 Następnie podjeżdżamy na samą górę szablonu i poprzez kliknięcie rozwijamy ten znacznik:

Widzimy cały arkusz CSS naszego bloga. Zjeżdżamy na dół, do znacznika </b:skin> (można go też wyszukać).

Nad nim, w miejscu wskazanym strzałką, wklejamy ten kod:

/*Dodatkowy kod CSS ------------------------------------*/

 O co chodzi? Właśnie dodaliśmy tzw. komentarze. Są widoczne jedynie w kodzie i nie wpływają na jego wygląd. Będziemy teraz pracować tylko pod tymi komentarzami, co nie wprowadzi bałaganu w kodzie. Ponadto wyszukując ich treść będziemy mogli łatwo przeskakiwać między elementami w HTML a ich atrybutami w CSS.

2. Tworzenie belki na górze

Musimy stworzyć nowy element. Uczynimy to za pomocą znacznika <div>. W polu na kod HTML wklejamy:

<div class='div-fixed'>
</div>

Nadajemy naszemu divowi klasę, czyli pewną nazwę, do której się odwołamy w kodzie CSS. Jest to div-fixed. Fixed z powodu pewnego atrybutu, który mu nadamy.
Teraz przenosimy się do kodu CSS i pod naszym komentarzem wklejamy:

.div-fixed {
position: fixed;
top: 0px;
width: 100%;
height: 150px;
background-color: #fff;
border-bottom: 1px solid #000;
opacity: 0.9;
}

position: fixed oznacza, że nasz div będzie 'przyklejony' do krawędzi przeglądarki. Podczas przesuwania strony zostanie w tym samym miejscu. Upewniamy się co do tego, używając top: 0px.
width: 100% - rozciągamy nas div na całą szerokość przeglądarki.
Za pomocą następnych znaczników określamy jego wysokość, kolor tła i ramkę (dolną).
opacity określa przezroczystość diva. Jest jednym z dodatkowych elementów, którymi możemy go ozdobić. Przyjmuje wartość od 0 do 1, przy czym 1 oznacza brak przezroczystości i jest to wartość domyślna.
Klikamy Zapisz szablon.
Blog powinien po odświeżeniu strony wyglądać tak:

Oczywiście, divowi możecie nadawać także inne atrybuty: zaokrąglić rogi, dodać obrazek tła...

3. Dodawanie logo

W ten sposób możecie dodać na pasek dowolny obrazek, pole tekstowe czy inny element. Ja skorzystam z mojego logo "Vak-me up!".
Dla upewnienia się: cały HTML wklejacie pod poprzednimi kodami, pod komentarzem dotyczącym HTML. To samo z CSS.

Tworzymy nowego diva, tym razem jednak nie zostawiając pustego środka, ale wkładając do środka obrazek za pomocą takiego kodu.

<div class='img-fixed'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyLlXDte8ZUqhqaYoaIbXclaxdeB8KPcGcd1Kumz_P8CHPlMKe6b7wthrrdgOoJK0EI8TkghP8fFpnGSg-jdpkuh8N7HJUXhlEo28QEwsCyk2iom5ViC8OS8gOQfqfYempbDtZjzpkGHrg/s1600/logo.png'/>
</div>

 Klasa obrazka to img-fixed. Do niej odniesiemy się teraz w części z kodem CSS, nadając temu elementowi atrybuty za pomocą następującego kodu:

.img-fixed {
position: fixed;
top: 30px;
left: 50px;
}

Wiemy już, co oznacza position: fixed. Za pomocą reszty atrybutów określamy położenie obrazka względem górnej i lewej krawędzi przeglądarki. top: 30px to wartość minimalna, której nie radzę zmniejszać, chyba że chcecie, aby pasek Bloggera przykrywał wasz element ;)
Napotykamy jednak problem: co, jeśli element jest większy niż stworzony przez nas pasek? Należy go zmniejszyć! Zrobimy to za pomocą kodu:

.img-fixed img{
height: 100px;
}

Wiemy już, że .img-fixed odnosi się do całości elementu, do znacznika div. A aby odnieść się do znacznika, który znajduje się wewnątrz div (w tym wypadku <img>), należy napisać go po nazwie klasy, opuszczając nawiasy. Wtedy działamy bezpośrednio na konkretny element w całym divie (co wykorzystamy potem przy tworzeniu menu).
height: 100px - zalecam, aby wysokość obrazka była mniejsza niż wysokość paska, na który nanosimy obrazek.
Całość powinna wyglądać tak:

3. Tworzenie menu

Przechodzimy do najtrudniejszej części. Postaram się omówić ją etapami. Najpierw stwórzmy, w osobnym divie, menu w HTML.

<div class='menu-fixed'>
<ul>
  <li><a href='#'> Taki 1</a></li>
  <li><a href='##'> Taki 2</a></li>
  <li><a href='###'> Taki 3</a></li>
  <li><a href='####'> Taki 4</a></li>
  <li><a href='#####'> Taki 5</a></li>  
</ul>
    </div> 

Nadaliśmy naszemu menu klasę menu-fixed. Następnie w divie stworzyliśmy listę, w której umieściliśmy hiperłącza.. Znaki '#' i napisy 'Taki...' można zastąpić dowolnymi adresami URL i nazwami (np. nazwami kart). Zacznijmy więc nadawać naszemu menu pewne cechy. Zajmijmy się najpierw samym divem i określmy jego położenie:

.menu-fixed {
position: fixed;
top: 75px;
right: 200px;
}

Efekt powinien być następujący:

 Niezbyt imponujący, prawda? Zaraz to zmienimy. Najpierw przekształćmy menu pionowe w poziome. Zrobimy to za pomocą następującego kodu:

.menu-fixed ul, .menu-fixed ul li {
display: block;
list-style: none;
margin: 0;
padding: 0;
}

.menu-fixed ul li {
float: left;
}

Tak jak w przypadku obrazka odnosimy się tu do 'znacznika w znaczniku'. Ale tym razem idziemy jeszcze dalej, aż do <li>, czyli określenia konkretnego punktu w menu.
Za pomocą list-style: none usuwamy kółeczka. Ustawiamy zerowe wartości atrybutów padding i margin, aby uniknąć wszelkich błędów. A float: left zmienia nasze menu na poziome.
Po tych zmianach menu powinno wyglądać tak:

Dalej nie za ciekawie. Nadajmy mu więc trochę koloru! W znacznikach chodźmy jeszcze dalej, bo aż do samego linku (<a>):

.menu-fixed ul li a {
text-align: center;
text-decoration: none;
background-color: #9999ff;
color: #000;
padding: 15px;
border-radius: 50%;width: 62px;
height: 19px;
padding-top: 24px;
padding-bottom: 19px;
margin: 10px;
}

Zacznijmy od początku. Za pomocą pierwszych dwóch atrybutów określiłam tekst: ma być wycentrowany i prosty.
background-color określa kolor kółka, a color tekstu w kółku.
padding mówi nam, ile 'miejsca wokół siebie' potrzebuje tekst w kółku.
Teraz tworzymy rzeczywiste kółka, za pomocą border-radius: 50%. Taka wartość zaokrągli brzegi elementów w menu. Nie chcę tłumaczyć, jak mają się do siebie atrybuty width, height, padding-top i padding-bottom, bo świetnie zrobiła to M w Tajemniczym Ogrodzie. Polecam przeczytać tutaj.
Atrybut margin określa odległość między poszczególnymi kółeczkami.
Menu powinno wyglądać tak:

Uf, najtrudniejsza część za nami. Teraz zostało jedynie określenie wyglądu kółeczka po najechaniu myszką i kliknięciu.
Pomoże nam w tym kod:

.menu-fixed ul li a:visited {
background-color: #3333ff;
color: #fff;
}

.menu-fixed ul li a:hover {
background-color: #6633cc;
color: #fff;
}

a:visited określa właściwości odwiedzonego odnośnika, a a:hover po najechaniu na niego myszką. Za pomocą atrybutów background-color i color zmieniliśmy kolor kółeczek. Et voila!

Koniec :)

Dziękuję za poświęconą uwagę i cierpliwość przy czytaniu :) Mam nadzieję, że tutorial się jakoś przyda. Pracuję obecnie nad menu wysuwanym z boku ekranu i gdy tylko nadam mu jakiś kształt, zaraz pośpieszę z instrukcją ^^ Z góry przepraszam za wszelkie nieścisłości. Jeśli macie pytania, zostawcie je w komentarzach, a postaram się odpowiedzieć jak najlepiej.

Pozdrawiam,

Vak

PS: Pamiętajcie o zadaniu domowym! :D