Jeszcze zanim powstał atrybut placeholder efekt „znikania” tekstu, jeśli kliknę (albo na zdarzenie focus) w element input lub textarea, realizowało się z użyciem JavaScript-u. Choć można też to zrealizować małym trickiem przesuwając zawartość label-a CSS-em, to jednak placeholder jest tutaj lepszym rozwiązaniem, zwłaszcza od strony semantycznej.
Atrybut placeholder służy do określania tekstu, który pojawi się zanim wprowadzimy treść. Jeśli treść już istnieje, to tekst z atrybutu placeholder nie pojawi się. Przykład:
Ostylowanie placeholder-a dla elementów input i textarea można zrealizować[......]
Jak stworzyć gradient za pomocą CSS? Teraz już właściwie zdecydowana większość nowoczesnych przeglądarek radzi sobie z renderowaniem gradientów za pomocą CSS-a. Ba! Nawet IE od wersji 5.5 używając własnych filtrów radzi sobie nie najgorzej. Niemniej jednak przygotowanie cross-browserowej reguły gradient nie jest wcale takie proste. Trzeba co najmniej uwzględnić zapisy dla:
IE5.5 – IE9
IE10
Firefox 3.x i 4
Opera
przeglądarki oparte o WebKit-a (Chrome, Safari, itd.)
pozostałe przeglądarki rozumiejące proponowaną przez W3C regułę
Oczywiście, gradienty można również generować używając S[......]
Istnieje wiele technik na pokazanie mapy Polski, np. flash lub html + css. Każda z nich ma swoje wady i zalety. Warto jednak zwrócić uwagę na format grafiki wektorowej SVG (ang. Scalable Vector Graphics). Pliki, o tej zawartości, z reguły mają rozszerzenie .svg lub .svgz (dokument SVG skompresowany w formacie gzip). Trzeba pamiętać też o tym, aby z serwera był wysyłany z mime-type image/svg+xml.
Przygotowanie zawartości wektorowej nie jest łatwe, jeśli mielibyśmy robić to ręcznie. Z pomocą jednak przychodzi nam narzędzie o nazwie Inkscape – bezpłatny program do grafiki wektorowej. Nie wspiera[......]
Niekiedy chcemy w naszych projektach urozmaicić wygląd naszego domyślnego atrybutu title i stworzyć eleganckie tzw. tooltip-y. W internecie jest już sporo różnych rozwiązań na ten temat. Na pewno nie zaszkodzi podać i własne rozwiązanie, pozwalające na ulepszenie atrybutu title. Takie „bezobsługowe” tooltip-y.
Podstawowe cechy to:
Jeśli masz wyłączony JavaScript, to dostępny jest domyślny atrybut title.
Rozdzielenie kodu JavaScript i CSS.
Możliwość dowolnej kombinacji stylów dla naszego tooltip-a.
Bezobsługowe działanie, czyli poza samym title="test", nic nie trzeba robić.
Czasem chcemy, aby dany element pojawiał się lub znikał po klinięciu w inny element, np. opcje w ten sposób można pokazywać. Jednym ze sposobów może być stworzenie linka Opcje i podpięcie do niego opcji pokaż / ukryj.
Zastosowanie tutaj linka ma drobną zaletę: kliknięcie od razu kieruje nas do podanego w linku zasobu. Niemniej jednak można kod podany przez nas przerobić tak, aby działał dla każdego elementu. Kolejną sprawą jest to, że wystarczy nadać elementowi a klasę toggle i potem za pomocą JavaScript-u odpowiednio je odnaleźć i podpiąć funkcję. Zatem zaczynamy po kolei.
Internet Explorer 6 nie obsługuje właściwości border-color:transparent. Niemniej jednak jest pewien trick, dzięki któremu można to osiągnąć wykorzystując filtry Microsoft-owe. Całość sprowadza się do wykorzystania filtru Chroma, który wyświetla konkretny kolor zawartości obiektu jako przezroczysty. Przykład:
Filtry zadziałają tylko na elementach, które mają włączony hasLayout. Właściwość hasLayout nie da się ustawić inaczej, niż przez nadanie innych właściwości CSS. Mogą to być position: absolu[......]
Stworzenie mapy, w zasadzie jakiejkolwiek, zawsze stawiało pytanie: jak to zrobić? A może lepiej: w czym to zrobić?
Generalnie możliwości jest wiele, ale my skupimy się na stworzeniu mapy używając do tego tylko HTML i CSS. Tak, jak było to w przypadku mapy świata, tak w tym przypadku przygotowanie takiej mapy to 2 kroki:
Przygotowanie odpowiednio pociętej grafiki, czyli wszystkie województwa i cała mapa Polski w jednym obrazku.
Przygotowanie arkusza stylów z odpowiednimi przesunięciami bloków ....
Cały trick polega na tym, aby odpowiednio przesuwać tło w momencie zdarzenia hover/focus.[......]
Kompresja i optymalizacja arkusza stylów CSS nie jest prosta. Trzeba wiedzieć co można skrócić i jak to zapisać, aby działało dokładnie tak samo, jak to pierwotnie zapisaliśmy. Ręczna praca nad tym jest dość czasochłonna, ale z pomocą może przyjść narzędzie o nazwie Clean CSS optimizer and formatter. Niemniej jednak radzimy, przed optymalizacją, zrobić kopię bieżącego arkusza stylów CSS.
