Mariusz Tarnaski "MariuszT"

Gdy klikniemy na jakiś odnośnik to wokół niego pojawia się ramka z kropek. Wygląda to tak:

I nie ma w tym nic złego, ba, jest to wręcz przydatne, więcej, konieczne! Niestety czasami efekt ten zupełnie psuje nam wygląd strony Można go jednak w prosty sposób wyłączyć w CSS. Służy do tego styl outline. Wygląda to tak:

Taka definicja wyłączy "kropki" dla wszystkich linków. Ale uważajcie z tym bo to może wprowadzać użytkowników w błąd a nawet wręcz uniemożliwić korzystanie ze strony np. gdy z jakiegoś powodu osoba odwiedzająca musi posługiwać się wyłącznie klawiaturą, bez myszki. Lepiej wyłączać outline tylko dla wybranych, nielicznych elementów.

PNG to bardzo przydatny format plików graficznych. Powstał jako następca GIF gdy zaczął się cyrk z patentami dotyczącymi kompresji LZW. Główne zalety PNG to kompresja bezstratna, małe rozmiary plików i obsługiwana stopniowa przezroczystość (tzw. kanał alfa).

O PNG pisałem niedawno w kontekście problemów przeglądarki Internet Explorer z tym formatem, wpis Internet Explorer i przezroczyste PNG.

Funkcję przezroczystości posiada również format GIF ale PNG ma tutaj znaczną przewagę. W GIF można jedynie wyznaczyć jeden kolor, który ma być przezroczysty i podczas wyświetlania pliku np. na stronie internetowej odpowiednie piksele po prostu znikają, w ten sposób osiągamy efekt przezroczystości. Natomiast w PNG mamy kanał alfa. Dzięki temu możemy sprawić, że jakiś piksel jest przezroczysty tylko w pewnym procencie (np. półprzezroczysty), nie znika on całkowicie. W ten sposób możemy zrobić np. przejście z w pełni zamalowanego piksela do całkowitej przezroczystości gdzie kolejne piksele stopniowo będą miały coraz większą przezroczystość. Właśnie dlatego w przypadku PNG mówimy o obsłudze stopniowej przezroczystości.

Żeby nie być gołosłownym, chciałbym pokazać możliwości jakie daje nam PNG. Wczoraj przypadkiem trafiłem na ten blog i zainteresował mnie efekt zastosowany do plików graficznych. Zobacz przykład, zwróć szczególną uwagę na narożniki. Prostym sposobem można uzyskać efekt zdjęć wsadzonych do albumu. Jedyny minus to konieczność specjalnego przygotowania zdjęcia za każdym razem gdy chcemy je zamieścić na swojej stronie (efekt jest naniesiony bezpośrednio w pliku graficznym). A może da się łatwiej?

Pewnie, że się da Wystarczy kilka linijek kodu HTML, CSS i jeden pliczek PNG. Czytaj dalej »

Dzisiaj chciałbym podać rozwiązanie problemu z którym borykają się wszyscy przygotowujący swoje strony www. Niestety różne przeglądarki różnie interpretują kod HTML/CSS a prym we wkurzaniu webmasterów wiedzie Internet Explorer. Pół biedy z IE 7, która jako tako radzi sobie ze standardami. Ale nadal większą popularnością cieszy się IE 6 (24.3% rynku według ranking.pl w porównaniu do 23.6% dla IE 7).

Stajemy więc przed problemem sprawdzania swojej nowo przygotowywanej strony jednocześnie pod IE 6 i IE 7. I oczywiście Microsoft nam tego nie ułatwia. Podpowiem Wam cztery różne sposoby: Czytaj dalej »

Masz problem bo we wszystkich przeglądarkach Twój tag <legend> wygląda tak samo a Internet Explorer (wersja 7 na pewno, innych nie sprawdzałem) uparcie dodaje do niego lewy margines? Jest rozwiązanie

Pierwsze co przychodzi na myśl to komentarze warunkowe.

To powinno nas zadowolić ale jest jeszcze inny sposób, mała sztuczka.

To tyle Wolę nie używać komentarzy warunkowych i innych trików w CSS ale tym razem chyba nie ma wyjścia jeżeli chcemy aby nasza strona wyglądała w IE dokładnie tak jak sobie wymarzyliśmy

Wbrew pozorom, tytuł tego newsa jest prawidłowy Te kilka znaczków doprowadziło mnie do stanu wrzenia

Już od dłuższego czasu szata graficzna tego bloga knociła się w niektórych przeglądarkach :/ Sprawdzałem kod HTML, sprawdzałem CSS ale nigdzie nie mogłem się dopatrzeć błędu :/ A ponieważ na Firefox 2 wszystko działało prawidłowo to po bezowocnych poszukiwaniach rozwiązania sprawę w końcu olałem No dobra, odłożyłem na bliżej nieokreśloną przyszłość

Teraz jednak przeszedłem na Firefox 3 i błąd zaczął mnie ponownie kłuć w oczy :/ Trochę wstyd żeby ktoś kto tworzy strony Internetowe miał taki błąd na własnym blogu i na dodatek nie umiał sobie z nim poradzić Tak więc dzisiaj przystąpiłem do ofensywy. Czytaj dalej »

Jeszcze jakiś czas temu do uzyskania efektu rollover webmasterzy używali Java Script. Jest na to jednak prostszy i lepszy sposób. Wszystko działa dzięki kilku linijkom w CSS. Efekt można zobaczyć po lewej stronie. Najedź myszką na buźkę.

Jakie są zalety tego rozwiązania, jak to działa i jak coś takiego zrobić?

Zalety to między innymi prostota, brak Java Script i szybkość działania. Czemu to działa szybciej niż JS? Ponieważ ta metoda jest oparta na jednym pliku graficznym!

Czytaj dalej »

Kolejna mała ciekawostka Na stronie www.csstypeset.com można znaleźć mały edytorek w którym z łatwością przygotujemy wygląd tekstu i dostaniemy kod CSS odpowiedzialny za jego sformatowanie. Wszystko oparte na Java Script. Może przyda się osobom, które uczą się CSS bo można łatwo podejrzeć która komenda jest za co odpowiedzialna.

Po pięciu minutach..
Właśnie się okazało, że tego typu narzędzi jest dużo więcej Ja znalazłem jeszcze trzy:

• typetester.maratz.com
• www.csstype.com
• www.fonttester.com

Przez przypadek trafiłem na ciekawe narzędzie. Na tej stronie jest formularz w którym należy wpisać adres jakiejś strony Internetowej. Skrypt odczyta wszystkie kolory jakie zostały użyte na podanej witrynie i zaprezentuje je w wygodnej formie.
Czytaj dalej »

Z różnego rodzaju frameworków programiści korzystają często. Jednak o ile łatwo mi sobie wyobrazić framework np. w PHP to bardzo się zdziwiłem na wieść, że ktoś się pokusił o napisanie frameworka w.. CSS

Tak naprawdę to tych frameworków jest co najmniej kilka ale chyba najbardziej rozbudowany i innowacyjny jest Blueprint. Nie mam za wiele do napisania o tym rozwiązaniu bo go nie testowałem i pewnie nigdy to nie nastąpi. Potraktuję to po prostu jako ciekawostkę. Ale może ktoś z Was przyjrzy się temu rozwiązaniu z bliska.

Na stronie domowej są trzy przykłady użycia oraz krótki tutorial. Wygląda to wszystko przyzwoicie. Sercem Blueprint jest grid czyli siatka. Framework dzieli stronę na 24 umowne kolumny. Tworząc warstwy div określasz ile tych kolumn mają one zajmować. Rozwiązanie podobno całkiem wygodne.

Osobiście podchodzę do tego typu rozwiązań z dużą ostrożnością. Owszem, może to być pomocne, wiele osób ma problem z ustawieniem blokowych elementów div w kolumny. Ale z drugiej strony pożądany efekt najczęściej można osiągnąć poprzez kilka linijek własnego kodu więc taki framework to tylko niepotrzebnie zwiększony transfer i dodatkowe żądania plików od serwera. I jak to bywa z frameworkami, trzeba poświęcić trochę czasu na to aby poznać zasady jego działania co stwarza problem dla nas i dla osób, które tworzą oprogramowanie razem z nami lub będą je edytować po nas.

Nie jestem pewien czy warto...