Ten test próbuje tak ostylować element <a /> żeby wyglądał jak guzik zrobiony w programie graficznym. Guzik ma mieć zaokraglone rogi, gradientowe wypełnienie i rzucać cień. Wszystko dzięki stylom umieszczonym na jednym elemencie bez użycia grafiki.
Zobacz źródło żeby poznać kod CSS.
Spodziewany wynik:
Ramka i kolor tekstu. Te rzeczy powinna obsługiwać każda przeglądarka obecnie.
Wyświatlanie jako element blokowy. Te rzeczy powinna obsługiwać każda przeglądarka obecnie.
Jednolite tło i zmiana czcionki. Te rzeczy powinna obsługiwać każda przeglądarka obecnie.
Dodanie paddingów, ustawienie szerokości i usunięcie podkreślenie dla linku. Te rzeczy powinna obsługiwać każda przeglądarka obecnie.
Rounded corners (border-radius) (http://developer.mozilla.org/en/CSS/-moz-border-radius).
Text shadow (text-shadow) (http://developer.mozilla.org/en/CSS/text-shadow).
Cień dla tekstu mozna uzyskać dla wszystkich nowszych przegladarek poza IE. Chociaż IE obsługuje w pewien sposób cienie to dalej dowiesz się dlaczego to nie zadziała w naszym przykładzie.
W tym przypadku cień może być słabo widoczny ponieważ jest biały. Chodziło o efekt "świecenia".
Ponieważ chcę na tekście uzyskać efekt świecenia to dla IE zamiast cienia mógłbym użyć filtru glow. Niestety tekst musiałbym najpierw opakować w span, któremu dodałbym filtr, a to jest oszustwo i dlatego go nie zastosuję.
(http://developer.mozilla.org/en/CSS/-moz-linear-gradient).
Webkit (Safari/Chrome) (http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradients.html).
IE osługuje gradientowe tło przy pomocy filtrów ale na potrzeby testu potrzebuję gradientu o kilku krokach - IE obsługuje tylko gradienty między dwoma kolorami.
Box shadow (box-shadow) (https://developer.mozilla.org/En/CSS/-moz-box-shadow).
IE obsługuje cienie za pomoca filtrów. Jednak cień jest dodawany do widocznej czści elementu.
Oznacza to, ze jeśli w elemencie bedzie tylko tekst to tylko tekst będzie miał cień.
Jeśli dodamy ramkę to cień będzie miała tylko ramka. Jeśli dodamy tło to cień będzie pod całym elementem ale zniknie spod tekstu.
Dlatego nie mogliśmy dodać cienia do tekstu w guziku. Teoretycznie jest to mozliwe jeśli byśmy zagnieździli wewnątrz elementu a na przykład element span.
Wtedy dla alementu a dajemy cień jak dla guzika a dla elementu span cień jak dla tekstu - ale nie o to chodziło w tym teście.
IE od wersji 9 obsługuje box-shadow. Ale nie moze ona działać z filtrem shadow dlatego filtr trzeba dla tej wersji wyłaczyć.