obrazek - Kurs HTML i CSS
Formularze HTML / Wysłanie formularza <input "submit, image">...do obrazka" alt="informacja alternatywna"> </form> gdzie jako "ścieżka dostępu do obrazka" należy podać lokalizację na dysku, gdzie znajduje się obrazek, który ma zostać wyświetlony jako przycisk wysłania formularza. Natomiast zamiast "informacja alternatywna" można podać treść informacji, która powinna pojawić się w przypadku, gdy obrazek nie zostanie wyświetlony, a także po wskazaniu go myszką (atrybut ten nie jest konieczny). Polecenie wprowadza na ekran przycisk w postaci obrazka, po...
Selektory pseudoelementów CSS / Przed... :before...że nie został on umieszczony w treści akapitu. Można nawet połączyć generowanie tekstu i grafiki w jednej deklaracji: p:before { content: url(obrazek.gif) " POCZĄTEK "; color: red } To jest akapit, rozpoczynający się obrazkiem i tekstem "POCZĄTEK", pomimo że nie zostały one umieszczone w treści akapitu. Wartość atrybutu przed... :before {content: attr} Oprócz powyższych, CSS 2 umożliwia automatycznie wygenerowanie przed właściwą zawartością elementu wartości wybranego atrybutu, który...
- Selektory pseudoelementów CSS / Po... :after
...został on umieszczony w treści akapitu. Można nawet połączyć generowanie tekstu i grafiki w jednej deklaracji: p:after { content: " KONIEC " url(obrazek.gif); color: red } To jest akapit, kończący się tekstem "KONIEC" i obrazkiem, pomimo że nie zostały one umieszczone w treści akapitu. Wartość atrybutu po... :after {content: attr} Oprócz powyższych, CSS 2 umożliwia automatycznie wygenerowanie po właściej zawartości elementu wartości wybranego atrybutu, który został przypisany z poziomu...
- Tło CSS / Pozycja tła obrazkowego {background-position}
...być znacznik wyświetlany w bloku albo zastępowany [zobacz: Wstawianie stylów]. Natomiast jako "pozycja" należy wpisać: Jedną wartość: center - obrazek na środku (w centrum) left - obrazek po lewej right - po prawej top - na górze bottom - na dole jednostka długości - odległość od lewej krawędzi Dwie wartości (oddzielone spacją): left top - lewy-górny róg left bottom - lewy-dolny róg right top - prawy-górny róg right bottom - prawy-dolny róg dwie jednostki długości, z których...
- 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...
- 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...
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...
- Obramowanie CSS / Powtarzanie obramowania obrazkowego {border-image-repeat}
...być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "powtarzanie" należy wpisać: stretch - obrazek zostanie rozciągnięty, tak aby wypełnił całą powierzchnię (domyślnie) repeat - obrazek zostanie powielony na całej powierzchni round - powielenie z dopasowaniem rozmiarów (jeżeli długość krawędzi obramowania nie jest wielokrotnością wymiaru obrazka, zostanie on rozciągnięty w taki sposób, aby nie był przycięty) space - powielenie z...
- HTML5 / Wstępne ładowanie <link "preload" as>
...w momencie, kiedy ich znacznik pojawi się w kodzie źródłowym HTML strony. Oznacza to, że jeśli na samym dole strony znajduje się np. jakiś duży obrazek, może on nie zdążyć się załadować do momentu, kiedy użytkownik przewinie do niego okno przeglądarki. Język HTML5 wprowadził specjalny mechanizm, dzięki któremu można przyspieszyć wczytywanie zewnętrznych elementów potrzebnych do wyświetlenia strony poprzez załadowane ich z wyprzedzeniem, zanim przeglądarka faktycznie będzie ich...