obrazek - Kurs HTML i CSS
Wykazy CSS / Wyróżnik obrazkowy wykazu {list-style-image}...Natomiast jako "ścieżka dostępu" należy wpisać względną ścieżkę do obrazka, który ma się pojawić jako wyróżnik wykazu (marker). Wpisanie none usunie obrazek. Ścieżkę dostępu należy konstruować względem arkusza CSS, a nie względem dokumentu HTML! Polecenie pozwala zastosować dowolny obrazek jako wyróżnik wykazu (czyli marker). Dzięki temu nie musimy korzystać już tylko z podstawowych typów wykazu, ale możemy stworzyć swoje własne. Sprawi to, że nasza strona będzie wyglądała bardziej...
- Kursory CSS / Kursor obrazkowy {cursor: url}
...obrazka jako kursora za pomocą url('ścieżka/do/obrazka.png'). Na przykład: element { cursor: url('myszka.png'), auto } ustawi niestandardowy obrazek jako kursor, który zmieni się na domyślny (auto) w przypadku braku dostępności. Jak zrobić "customowy" kursor? Aby stworzyć niestandardowy kursor, można użyć właściwości cursor w CSS i wskazać ścieżkę do własnego obrazka kursora za pomocą url('ścieżka/do/obrazka.png'). Na przykład: element { cursor: url('kursor.png'), auto } ustawi...
Aktywne przyciski / Pamięć podręczna...można zauważyć pewien nieprzyjemny efekt: po pierwszym wskazaniu bądź kliknięciu aktywnego przycisku, trzeba nieco zaczekać, aż załaduje się obrazek, który ma zostać wyświetlony. Dzieje się tak dlatego, ponieważ dopóki nie zostanie wywołana akcja, przeglądarka nie wie jaki obrazek, dajmy na to po podświetleniu, ma zostać wyświetlony. Jednak po pierwszym użyciu przycisku, dodatkowa grafika zostanie wczytana i zapisana w pamięci podręcznej przeglądarki, czyli na dysku lokalnym...
- Pozycjonowanie CSS / Nakładanie {z-index}
...{z-index} Oto przykład normalnego pozycjonowania (bez użycia z-index). Po wpisaniu: <img style="width: 100px; height: 75px; position: relative" src="obrazek.jpg" alt="..."><br> <img style="position: relative; left: 84px; bottom: 91px" src="punkt.gif" alt="..."> Otrzymamy: A to przykład z użyciem z-index. Po wpisaniu: <img style="width: 100px; height: 75px; position: relative; z-index: 2" src="obrazek.jpg" alt="..."><br> <img style="position: relative; left: 84px; bottom: 91px; z-index: 1...
Podcast HTML / #9 HTML5...być zapisane zgodnie ze standardem WebVTT (*.vtt). Atrybut kind może określać rodzaj ścieżki (np. subtitles, captions, descriptions). Responsywny obrazek (<picture>, <source>): pozwala podać wiele alternatywnych plików graficznych, które przeglądarka wybierze w zależności od wielkości ekranu (media="...") lub obsługiwanego formatu (type="..."). Na końcu zawsze musi znajdować się tag <img> jako alternatywa dla starszych przeglądarek. Optymalizacja wydajności i bezpieczeństwo Nowe atrybuty...
- Odsyłacze HTML / Komunikatory internetowe <a "gg, skype, xmpp, icq">
...ICQ <a "icq"> <a href="icq:numer">opis</a> Status użytkownika <img src="https://web.icq.com/whitepages/online?icq=numer&img=obrazek" alt="ICQ"> gdzie jako obrazek należy podać liczbę od 1 do 25.
- Tabele CSS / Rozplanowanie tabeli {table-layout}
...rozmiar, do którego można ścieśnić komórkę tak, aby jej zawartość mieściła się jeszcze w jej obrębie. Jeżeli w komórce znajduje się tylko obrazek lub inny element o ustalonych rozmiarach, to określa on minimalną możliwą szerokość takiej komórki. Natomiast w przypadku tekstu będzie to zwykle szerokość najdłuższego wyrazu (biorąc pod uwagę, że tekst może się zawijać do następnych linii). Maksymalna możliwa szerokość to największy rozmiar, do którego można rozszerzyć komórkę tak, aby...
- Tło CSS / Powtarzanie tła obrazkowego {background-repeat}
...w kierunku poziomym repeat-y - powtarzanie tła tylko w kierunku pionowym no-repeat - brak powtarzania tła (zostanie wyświetlone jako pojedynczy obrazek) space - przestrzeń pomiędzy obrazkami w tle zostanie dobrana w taki sposób, aby żadna grafika nie była przycięta (CSS 3) round - wymiary obrazka w tle zostaną dopasowane w taki sposób, aby żadna grafika nie była przycięta (CSS 3) Polecenie pozwala zdefiniować sposób powtarzania się obrazka w tle obrazkowym. Normalnie kopie obrazka są...
- Kaskadowe Arkusze Stylów / Dlaczego warto używać CSS?
...Nowy model obramowania tabeli Przykład komórka1 komórka2 komórka3 komórka4 komórka5 komórka6 Pozycjonowanie Przykład To nie jest obrazek! To nie jest obrazek! Zmiana kształtu kursora. Przykład Wskaż ten tekst myszką Kursor wczytany z pliku: Wskaż ten tekst myszką Zmiana wyglądu odsyłacza, po wskazaniu go myszką Przykład Wskaż ten tekst myszką Dodatkowe możliwości określenia wyglądu dokumentów podczas ich drukowania. I wiele innych. Dodatkowo w ciągłym...
- Tło CSS / Zaczepienie tła obrazkowego {background-attachment}
...nawet jeśli będziemy przewijali zawartość strony. Wtedy w wewnętrznym arkuszu stylów strony należy użyć polecenia: body { background-image: url(obrazek.jpg); background-attachment: fixed } Polecenie to ma sens, tylko jeśli określimy równocześnie tło obrazkowe. Różnica pomiędzy wartościami "fixed" a "local" jest taka, że w przypadku drugiej z ich tło pozostaje nieruchome tylko jeśli do przewijania używamy suwaków elementu. Natomiast w przypadku kiedy przewijamy całą stronę albo kiedy sam...