efekt - Kurs HTML i CSS
Formularze HTML / Pole wyboru <input "checkbox">...wprowadza na ekran etykietę z tekstowym opisem pola, która jest z nim skojarzona logicznie. Dzięki temu kliknięciu etykiety powoduje zwykle taki sam efekt jak kliknięcie samego pola, tzn. jego zaznaczenie lub odznaczenie, a dodatkowo wskazanie etykiety myszką może spowodować "podświetlenie" pola. Tekst etykiety może się znajdować przed lub za elementem formularza, do którego się odnosi. Zwykle zupełnie wystarczający jest pierwszy z podanych sposobów przypisywania etykiety. Wyobraźmy sobie...
Wykazy CSS / Automatyczna numeracja wykazu {counter-reset, counter-increment}...jeden - dla następnego punktu lub podpunktu: ol li:before { content: counters(nazwa_licznika, ".") ". "; counter-increment: nazwa_licznika } Oto efekt: Punkt pierwszy (1.) Podpunkt pierwszy (1.1.) Podpunkt drugiego rzędu (1.1.1.) Podpunkt drugiego rzędu (1.1.2.) Podpunkt drugi (1.2.) Podpunkt drugiego rzędu (1.2.1.) Podpunkt drugiego rzędu (1.2.2.) Punkt drugi (2.) Podpunkt pierwszy (2.1.) Podpunkt drugiego rzędu (2.1.1.) Podpunkt drugiego rzędu (2.1.2.) Podpunkt...
Galeria zdjęć HTML / Skrypt galerii zdjęć...końca pierwszej galerii, użytkownik musiał zamknąć okno powiększenia, a następnie jeśli będzie chciał, może wybrać kolejną galerię. Aby uzyskać taki efekt, wystarczy do odnośników z każdej kolejnej galerii przypisać inną wartość atrybutu data-gallery="...". Na przykład: <a data-gallery="galeria1" href="galeria1/zdjecie1.jpg"><img src="galeria1/miniatura1.jpg" border="0"></a> <a data-gallery="galeria1" href="galeria1/zdjecie2.jpg"><img src="galeria1/miniatura2.jpg" border="0"></a> <a...
- Przeglądarka zdjęć
...Podstawy stylów CSS (m.in. arkusze stylów) Odsyłacze do podstrony Przykład przeglądarki zdjęć Skrypt przeglądarki zdjęć Aby uzyskać powyższy efekt, należy zapisać przedstawiony poniżej kod w dowolnym pliku z rozszerzeniem *.js - np. przegladarka_zdjec.js: /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!) */ function PrzegladarkaZdjec(id, zdjecia) { this.czas = 5; // czas przejścia w...
- Menu rozwijane, otwierane, wysuwane / Menu wysuwane
...menu są rozwijane począwszy od pierwszej do ostatniej, a zwijane od ostatniej do pierwszej. Można odwrócić te kolejności, dzięki czemu uzyskamy efekt wysuwania: <script> new Menu('menu0', '', false, true); </script> Przykład HTML Dla zielonych BODY i META Tekst Odsyłacze Tabele Multimedia Ramki Formularze CSS Kaskadowe Arkusze Stylów Definicje Wstawianie stylów Skrypty Aktywne przyciski Aktualizacja Nowe okno
- Tekst HTML / Wykaz <ul, ol, li>
(lista wyliczeniowa) Spis treści <ul, ol, li> Wypunktowanie - lista nieuporządkowana <ul, li> Wykaz numerowany - lista uporządkowana <ol, li> Wykaz numerowany - różne typy Wykaz numerowany z podaniem początkowego numeru Zmiana numerowania w trakcie Wykaz z wypunktowaniem innym kolorem Wykaz w akapicie Potrzebujesz pomocy? Przy tworzeniu wykazów HTML możesz również skorzystać ze specjalnego generatora zamieszczonego tutaj. Dzięki niemu w kilka minut skonfigurujesz dowolny, nawet...
- Szablon strony na DIV-ach / Płynny szablon
...menu, przylegając do lewej krawędzi okna. Zatem margines przygotowuje miejsce na kolumnę menu, która została ustawiona dokładnie nad nim. Możliwy efekt bez lewego marginesu: Nagłówek szablonu Menu nawigacyjne Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść...
- Tabele HTML / Komórki nagłówkowe tabeli <th>
...inne zwykłe komórki <td>...</td>. Dzięki temu możemy stworzyć pionowy nagłówek, znajdujący się np. na lewym brzegu tabeli. Chociaż identyczny efekt wizualny można uzyskać odpowiednio zmieniając wygląd zwykłych komórek tabeli (<td align="center"><b>...</b></td>), to absolutnie taka metoda nie jest zalecana. Komórki nagłówkowe <th>...</th> oprócz efektu wizualnego niosą ze sobą ważne znaczenie semantyczne. Potrzebujesz pomocy? Przy tworzeniu tabel HTML możesz również skorzystać ze...
- Tekst CSS / Dekoracja tekstu {text-decoration}
...możliwością może być łączenie powyższych wartości w jednej deklaracji, np.: selektor { text-decoration: underline line-through overline } A oto efekt: Tekst podkreślony, przekreślony i nadkreślony Pytania i odpowiedzi {text-decoration} Co oznacza "text-decoration"? Właściwość CSS text-decoration służy do określania dekoracji tekstu, takich jak podkreślenie, przekreślenie, nadkreślenie. Może być stosowana do elementów tekstu, aby zmienić ich wygląd. Jak podkreślić słowo w CSS...
- Oprawa graficzna / Zamiennik obrazkowy
...pseudoelement :before, dzięki któremu można dynamicznie wstawić przed wybranym elementem tekst lub obrazek. Idąc dalej tym tropem, można uzyskać efekt analogiczny jak w poprzednim przykładzie, ale bez statycznego wstawiania do kodu źródłowego HTML żadnych dodatkowych znaczników. Przedstawiony poniżej przykład stanowi ulepszoną wersję metody Jefferies Image Replacement, dzięki czemu obrazek może zawierać obszary przezroczyste. <div>Zamiennik obrazkowy</div> div { width: 200px; height...