RSS
środa, 12 maja 2010
Ozdobienie linków

 

Widział ktoś stronę internetową bez żadnego odnośnika? jest to praktycznie niemożliwe, a na niektórych stronach wyglądają one wręcz tragicznie. Bez zastosowania stylów uzyskamy taki efekt:
[img]http://img69.imageshack.us/img69/1581/ozdabianieodnosnikow1.png[/img]
Jak widać jest on... delikatnie mówiąc brzydki. W tym tutorialu pokażę jak uzyskać o wiele lepsze efekty bez zbędnej pracy.
Na początku musimy wiedzieć czy chcemy zmienić wygląd wszystkich odnośników, czy tylko niektórych (np. w menu).
[b]1[/b]. Jeśli chcemy zmienić wygląd wszystkich odnośników to omijamy ten punkt. Na początku nadajemy klasę naszym linkom:
[php]Tekst[/php]
jak widzimy ja nazwałem tą klasę "menu-ozdobne". Może być to dowolna nazwa, byle by tylko już nie była zastosowana w jakimś linku. Dodajemy taką samą klasę wszystkim linkom które chcemy ozdobić.
[b]2[/b]. Teraz pozostała tylko edycja naszego pliku CSS, więc dodajemy do niego
a.) Wszystkie odnośniki
[code]a:link, a:visited {
color: #161616;
text-decoration: none;
}
a:hover, a:active {
color: #363636;
text-decoration: underline;
}[/code]
b.) Tylko niektóre
[code]a.menu-ozdobne a:link, a.menu-ozdobne a:visited {
color: #161616;
text-decoration: none;
}
a.menu-ozdobne a:hover, a.menu-ozdobne a:active {
color: #363636;
text-decoration: underline;
}[/code]
Jak widać w stylach zastosowaliśmy popularny (i zarazem ładny) efekt: zmiana koloru oraz podkreślenie po najechaniu na odnośnik.
Można eksperymentować z efektami (uzyskując jeszcze lepszy efekt).
CSS:
link niekliknięty - [b]a:link[/b]
link kliknięty - [b]a:visited[/b]
link niekliknięty (po najechaniu) - [b]a:hover[/b]
link aktywny - [b]a:active[/b]
Dekoracje tekstu (text-decoration):
bez żadnego efektu - [b]none[/b]
podkreślony jedną linią (na dole) - [b]underline[/b]
podkreślony jedną linią (na górze) - [b]overline[/b]
przekreślony - [b]line-through[/b]
pulsujący (mrugający) - [b]blink[/b]
Myślę że ten tutorial trochę pomógł w zakresie wyglądu waszych stron internetowych ;)

Widział ktoś stronę internetową bez żadnego odnośnika? jest to praktycznie niemożliwe, a na niektórych stronach wyglądają one wręcz tragicznie. Bez zastosowania stylów uzyskamy taki efekt:

Jak widać jest on... delikatnie mówiąc brzydki. W tym tutorialu pokażę jak uzyskać o wiele lepsze efekty bez zbędnej pracy.

Na początku musimy wiedzieć czy chcemy zmienić wygląd wszystkich odnośników, czy tylko niektórych (np. w menu).

1. Jeśli chcemy zmienić wygląd wszystkich odnośników to omijamy ten punkt. Na początku nadajemy klasę naszym linkom:

Tekst

Jak widzimy ja nazwałem tą klasę "menu-ozdobne". Może być to dowolna nazwa, byle by tylko już nie była zastosowana w jakimś linku. Dodajemy taką samą klasę wszystkim linkom które chcemy ozdobić.

 

2. Teraz pozostała tylko edycja naszego pliku CSS, więc dodajemy do niego

a) Wszystkie odnośniki

a:link, a:visited {

color: #161616;

text-decoration: none;

}

a:hover, a:active {

color: #363636;

text-decoration: underline;

}

b) Tylko niektóre

a.menu-ozdobne a:link, a.menu-ozdobne a:visited {

color: #161616;

text-decoration: none;

}

a.menu-ozdobne a:hover, a.menu-ozdobne a:active {

color: #363636;

text-decoration: underline;

}

Jak widać w stylach zastosowaliśmy popularny (i zarazem ładny) efekt: zmiana koloru oraz podkreślenie po najechaniu na odnośnik.

Można eksperymentować z efektami (uzyskując jeszcze lepszy efekt).

CSS:

link niekliknięty - a:link

link kliknięty - a:visited

link niekliknięty (po najechaniu) - a:hover

link aktywny - a:active

 

Dekoracje tekstu (text-decoration):

bez żadnego efektu - none

podkreślony jedną linią (na dole) - underline

podkreślony jedną linią (na górze) - overline

przekreślony - line-through

pulsujący (mrugający) - blink

 

Myślę że ten tutorial trochę pomógł w zakresie wyglądu waszych stron internetowych ;)

 

Tagi: css hover linki odnośniki xhtml
16:07, smiechwsieci
Link Dodaj komentarz »
piątek, 30 kwietnia 2010
Elementy blokowe w jednej linii

Często poruszanym tematem na forach internetowych jest ustawianie kilku elementów blokowych (na przykład DIV) w jednej linii. Dla wielu jest to jeden z trudniejszych etapów tworzenia strony, ale w rzeczywistości nie jest to w ogóle trudne.


Załóżmy, że mamy na stronie 3 bloki, które są stworzone za pomocą znacznika DIV:

<div class="a">
Treść</a>
</div>
<div class="b">
Treść</a>
</div>
<div class="c">
Treść</a>
</div>
Jak możesz zauważyć, napisy Treść są ustawione jeden pod drugim. Aby to zmienić i ustawić je w jednej linii należy skorzystać z pływania w CSS (float). Zanim jednak to zrobimy należy opakować wszystkie 3 divy jednym, główny, któremu przepiszemy klasę o nazwie glowny.

Teraz już tylko CSS:

.glowny {
float: left;
}

.a {
float: left;
}

.b {
float: left;
}

.c {
float: left;
}

Użyliśmy cechy float z wartością left, dzięki czemu elementy będą w jednej linii. Takie coś stosowane jest często przy tworzeniu menu w css.
Tagi: css div elementy blokowe float HTML menu menu w css
12:27, smiechwsieci
Link Komentarze (1) »