Zabawka CSS
Żeby wytłumaczyć o co tu chodzi przesuń myszką nad napisy poniżej.
Na czym polega zabawa?
W prostokącie widocznym, jest dużo DIV-ów jeden w drugim, które stają się widoczne dopiero gdy nad nimi pojawi się kursor HOVER. Dzięki temu mamy wrażenie ruchu w miarę przesuwania myszki.
Pokazane 2 sposoby, myślę, że możesz wymyślić następne modyfikacje.
Kolejne DIV-y w DIV-ach są zdystansowane przy pomocy PADDING, a przy najechaniu myszką wyświetla się ich BORDER,
jednocześnie dla wyświetlających swój BORDER zmniejsza się wartość PADDING o grubość BORDER.
Zagmatwane? Zobacz kod CSS na dole. Zwróć uwagę że wystarczy podać tylko raz opis stylu dla wewnętrznych DIV-ów
inne dalej zagnieżdżone go odziedziczą (kaskadowość styli).
Czy to może być potrzebne?
Może tak, na przykład jako zaskakujące wyróżnienie linku. Trochę czegoś innego,
o ile jest trochę ożywi stronę. Ma to też tą zaletę, że będąc czystym CSS działa
bez potrzeby ładowania jakiś plików flasha, czy bitmap i działa od razu, szybko.
#t1, #t2 { border:3px solid #000; width:400px; height:auto; margin:10px; padding:1px; text-align:center;}
.t1, .t2 {padding:6px; }
.t1 :hover {padding: 4px; border:2px solid black;}
.t2 :hover {padding: 3px; border-top:3px solid #000; border-right:3px solid #777; border-bottom:3px solid #bbb ; border-left:3px solid #555 ; font-size:0.95em;}