efekt - Kurs HTML i CSS
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ść...
- Szablon strony na DIV-ach / Responsywny szablon
...urządzenie wskazujące np. w postaci myszki komputerowej, a inaczej na małych urządzeniach mobilnych z ekranami dotykowymi. A taki właśnie efekt pozwalają uzyskać Kaskadowe Arkusze Stylów (CSS). Można to zrobić w trzech prostych krokach opisanych poniżej. Skalowanie Aby stworzyć stronę responsywną, najpierw musimy wstawić w nagłówku dokumentu, tzn. w dowolnym miejscu pomiędzy znacznikami <head> i </head>, następuje polecenie: <meta name="viewport" content="width=device-width...
- 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...
- Dobre praktyki / CSS Zorientowane Obiektowo
...obiektowo, znanego z niemal każdego nowoczesnego języka programowania. Stosowanie kontekstu selektorów można porównać do polimorfizmu, tzn. efekt działania tej samej deklaracji (klasy) zależy od typu elementu, do którego się odwołujemy. Na przykład: <div class="Information Warning">...</div> może działać inaczej niż <span class="Information Warning">...</span> chociaż nazwa przypisanej klasy CSS jest w obu przypadkach identyczna: .Information { background-color: white; }...
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ęć
...Szczebel', 'Widok ze szczytu Szczebla w Beskidzie Wyspowym') )); 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 new Menu('menu3', '', false, true);
Multimedia HTML / Obrazek HTML <img>...w programie graficznym ustawić ten kolor jako przezroczysty (transparent). Uwaga: format JPG (oraz BMP) nie obsługuje przezroczystości! Podobny efekt można co prawda uzyskać, rysując "niewidoczne" części kolorem tła strony WWW. Jednak jeśli zmienimy kolor tła na stronie, będzie trzeba zmienić również wszystkie takie obrazki. Natomiast jeżeli ustalimy przezroczystość na obrazku, zawsze będzie ona niewidoczna. Animowany banner Animowany banner można stworzyć przy użyciu takich programów...
- Widżety HTML / Ramki HTML
...następnie osadzić go na każdej podstronie. To samo dotyczy innych stałych elementów witryny: nagłówka (wraz z logotypem) i stopki serwisu. Podobny efekt do ramek pozwalają uzyskać dynamiczne skrypty działające po stronie serwera - np. PHP lub SSI [zobacz: Szablon strony bez ramek]. Dzięki nim menu nawigacyjne tak samo możemy umieścić w pojedynczym pliku, a skrypt sam automatycznie powieli go na wszystkich podstronach naszego serwisu. Uzyskujemy wtedy wszystkie zalety tradycyjnych stron, a...
- HTML5 / Autouzupełnianie <datalist>
...Z taką sytuacją możemy mieć do czynienia, gdy w wybranym polu należy wpisać w zasadzie jedną z podanych wartości, a nie dowolny tekst. Taki efekt powinniśmy uzyskać, wstawiając dodatkowy znacznik SELECT - nowsze przeglądarki po prostu go pominą, stosując mechanizm autouzupełniania, a starsze wyświetlą standardową listę rozwijalną: <input name="nazwa" list="identyfikator"> <datalist id="identyfikator"> <select name="nazwa"> <option value="wartość1" label="skrót1"> <option...