Tooltip jest często wykorzystywanym elementem na stronach internetowych, który pomaga użytkownikom zorientować się gdzie, co i jak. Niestety standardowe "chmurki", wbudowane w przeglądarki, bardziej straszą niż się podobają, dlatego zajmiemy się wykonaniem swojej własnej wersji tego rozwiązania. W czasach, kiedy nowe technologie coraz bardziej zadomawiają się w przeglądarkach możemy pokusić się o nie wykorzystywanie silnika jQuery, opierając swoje działania tylko i wyłącznie na CSS3 i HTML5. Niestety wiąże się to z brakiem wsparcia przez starsze przeglądarki, dlatego w ostatnim akapicie przedstawię Wam wersję alternatywną dla naszego tooltip'a.
Czytaj więcej: Tworzymy tootltip wykorzystując tylko i wyłącznie CSS3 i HTML5
W dzisiejszym, krótkim poradniku pokażę Wam jak w bardzo prosty sposób, tylko za pomogą arkusza CSS, stworzyć schludny, ciekawy efekt obramowania wokół grafiki umieszczonej na naszych stronach internetowych. Dobrze przygotowana grafika skutecznie przyciąga wzrok. W tym celu wykorzystamy niektóre możliwości kaskadowych arkuszy stylów, takie jak cienie (box-shadow), a także zaokrąglone brzegi obrazków (border-radius). O każdej z tych możliwości pisałem już wcześniej na łamach portalu. Teraz wykorzystamy tę wiedzę w praktyce. Zapraszam do lektury.
Każda przeglądarka ma fabrycznie ustawiony zestaw arkuszy stylów CSS. Opisuję one w domyślny sposób wszystkie elementy specyfikacji HTML. Sęk tkwi w tym, że ustawienia każdego typu przeglądarki nieznacznie się od siebie różnią, co powoduje, w niektórych przypadkach, przesunięcia, rozciągnięcia i inne temu podobne nieprawidłowości. Zauważyć można, że mało doświadczeni projektanci stron internetowych pozwalają powiedzieć ostatnie słowo twórcom przeglądarek, zamiast samemu sprawować pełną kontrolę nad wyświetlaniem swoich witryn. W dzisiejszym poradniku dowiemy się jak zaradzić w/w problemowi, wykorzystując tzw. resety CSS, czyli arkusze (bądź polecenia) zerujące domyślne ustawienia przeglądarek.
Dotychczas, aby korzystać z funkcji takich jak "kopiuj-wklej", czy odtwarzacz wideo, musieliśmy używać specjalnych wtyczek i rozszerzeń do przeglądarek (Adobe Flash, MS Silverlight). Teraz za to wszystko odpowiada HTML5, wraz ze swoim rodzimym bratem - CSS3. Chociaż pełne wsparcie dla HTML5 zapowiedziane jest dopiero na rok 2022, to już teraz, twórcy przeglądarek, wdrażają najświeższe rozwiązania do swoich produktów. Warto korzystać z tych przyszłościowych technologii, a niewątpliwie sporym udogodnieniem w tym przedsięwzięciu będą, specjalnie przygotowane, Framework'i.
Jako, że nasz poprzedni artykuł na temat rozwijanego menu, z wykorzystaniem CSS ma już ponad rok, postanowiliśmy go nieco zaktualizować, dostosowując go do dzisiejszych standardów, a mianowicie HTML5 i CSS3. W czasach obecnych, prawidłowo wykonana nawigacja, znacząco poprawia komfort pracy i użytkowania strony www. Kiedy internauta bez problemów odnajdzie interesujące go informacje, są większe szanse, że do nas wróci. Tym razem postaramy się o bardziej eleganckie menu, które posiadać będzie stylistycznie dopasowane, zaokrąglone rogi (przy rozwijaniu), oraz delikatne przejścia, dla koloru odnośników i tła, po najechaniu na każdą z pozycji. Na końcu artykułu znajdziecie DEMO oraz przykład do pobrania.
Tworząc strukturę nowej witryny, bardzo częstym problemem, szczególnie dla początkujących webmasterów, jest "rozciągnięcie" elementu blokowego <div> na całą wysokość strony (a właściwie ekranu), nawet wtedy, kiedy content (treść) nie wypełnia całego okna. Sam kiedyś potrzebowałem takiego rozwiązania, a przeszukiwanie tysiąca postów na forach nie było wcale takim przyjemnym zadaniem. Zdaję sobie sprawę, że rozwiązań tego problemu może być całkiem sporo, dlatego liczę, że jeśli ktoś z Was zna inny sposób, poinformuję nas o tym w komentarzu na końcu poradnika.
W jednym z poprzednich poradników, zająłem się cieniem tekstu. Tym razem rozszerzymy to pojęcie, tworząc cień (lub poświatę) dla każdego, dowolnego elementu na naszej witrynie. Standardowo używać będziemy własności box-shadow, natomiast dla przeglądarek Webkit (Chrome, Safari) i Mozilla będziemy musili dodać kolejno przyrostki -webkit- oraz -moz-.
Czytaj więcej: Tworzenie cieni elementów za pomocą własności CSS3
Przezroczystość jest jedną z pierwszych nowości, które zostały szybko wprowadzone w większości przeglądarek. Własność ta umożliwia zmianę widoczności elementu, tak aby był on całkowicie niewidoczny (lub widoczny), albo częściowo przezroczysty. Niestety stało się tak jak zawsze, ponieważ własność ta nie jest interpretowana przez wszystkie przeglądarki jednakowo. Wyłamał się Internet Explorer, który zamiast standardowej składni, używa własności filter, podczas gdy reszta przeglądarek - Webkit (Chrome, Safari), Mozilla - obsługują standard zatwierdzony przez W3C, a mianowicie opacity. Na szczęście dla nas, IE ignoruje użycie standardowego kodu, przez co możemy deklarować przezroczystość, korzystając z obu metod.
Czytaj więcej: Przezroczystość elementów z wykorzystaniem własności CSS3
W drugiej części poradnika, w którym opisuję nowości, wchodzące w skład CSS3, omówię cienie tekstu. Jest to bardziej efektowny, niż efektywny, dodatek, pozwalający wyrazić głębię i unowocześnić wygląd typografii na naszej witrynie. Większość z obecnie nowych przeglądarek obsługuje już, zatwierdzoną przez konsorcjum W3C, składnię w postaci text-shadow: parametry; Jeżeli natomiast przeglądarka nie obsługuje owego ulepszenia, cień po prostu nie zostanie wyświetlony.
Strona 1 z 2
