efekt - Kurs HTML i CSS
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...
Tabele HTML / Ćwiczenia...filmów. Umieść je w wierszach bezpośrednio jeden pod drugim. Następnie połącz pionowo wszystkie komórki zawierające ten sam gatunek. Przykładowy efekt może wyglądać następująco: Gatunek Tytuł filmu Rok produkcji Ocena (w skali od 1 do 10) Dramat, Komedia Forrest Gump 1994 9 Akcja, Science-Fiction Matrix 1999 8 Matrix Reaktywacja 2003 7 Matrix Rewolucje 2003 7
CSS dla zielonych / Czcionka CSS {font-size, font-family}...istnieje w każdym systemie operacyjnym - tzw. rodzinę ogólną. Pozwala ona określić krój czcionki, który wyglądem będzie przynajmniej przypominał efekt, który chcemy uzyskać - np.: sans-serif (podobna do: Arial, Helvetica, Verdana, Tahoma, 'Trebuchet MS'), serif (podobna do: 'Times New Roman', Georgia), monospace (podobna do: 'Courier New'). Na przykład: body { font-size: medium; font-family: Arial, Helvetica, sans-serif; } W systemie Windows standardowo dostępne powinny być czcionki...
- Czcionki CSS / Wariant pozycji czcionki {font-variant-position}
...czy górny zmieścił się w tekście i nie zachodził na sąsiadujące wiersze, wysokość linii musi zostać nieco powiększona. Powoduje to nieestetyczny efekt, kiedy sąsiednie linijki tekstu są od siebie bardziej odsunięte, ponieważ w jednej z nich pojawił się nawet tylko jeden indeks dolny lub górny. Wadę tę eliminuje użycie właściwości font-variant-position, dzięki której mimo wprowadzenia indeksu w tekście, wysokość linii się nie zmienia. W większości przypadków zaleca się jednak stosowanie...
- Dziedziczenie stylów CSS / Wymuszenie dziedziczenia {...: inherit}
...jego kolor tekstu oraz tła przyjmą wartość "inherit". Zatem zostaną odziedziczone z akapitu (tekst będzie zielony). Dla zainteresowanych Powyższy efekt został uzyskany przy pomocy selektora typu i selektora potomka umieszczonych w arkuszu stylów: p { color: green; } p b { color: white; background-color: blue; } p i b { color: inherit; background-color: inherit; }
- CSS dla zielonych / Tapeta CSS {background-color, background-image, color}
...znajdowały się na tej samej wysokości co po prawej stronie. Analogicznie należy postąpić dla górnej i dolnej krawędzi. Przykładowo, aby stworzyć efekt zeszytu w kratkę, wystarczy przygotować kwadratową grafikę z przecinającymi się liniami w formie krzyżyka. Kafelek nie zawsze jednak musi być kwadratowy. Dla uzyskania efektu zeszytu w linie wystarczy przygotować grafikę o wysokości odzwierciedlającej rozstaw linii, ale szerokości tylko jednego piksela. Proponuję poeksperymentować w dowolnym...
- Tekst CSS / Orientacja tekstu {text-orientation}
...upright". Dzięki temu kolejne znaki tekstu zostaną ułożone w pionie jeden pod drugim i nie będą obrócone. Może to przynieść lepsze efekty zwłaszcza w przypadku krótkich tekstów, np. jeden lub dwa wyrazy raczej bez żadnych znaków interpunkcyjnych. Teoretycznie taki sam efekt moglibyśmy uzyskać, jeśli po każdym znaku tekstu po prostu wstawilibyśmy znacznik końca linii. Jednak takie rozwiązanie nie byłoby dobrym pomysłem, ponieważ tak ułożone znaki logicznie nie łączyłyby się w...
- Dziedziczenie stylów CSS / Przywrócenie wartości pierwotnej {...: revert}
...zostaną odziedziczone z akapitu (tekst będzie zielony), natomiast sama treść zostanie standardowo wytłuszczona. Dla zainteresowanych Powyższy efekt został uzyskany przy pomocy selektora typu i selektora potomka umieszczonych w arkuszu stylów: p { color: green; } p b { color: white; background-color: blue; font-weight: normal; } p i b { color: revert; background-color: revert; font-weight: revert; }
- Drukowanie CSS / Okładka wydruku @page :first
...wizualnie od pozostałych stron. Na przykład może ona zawierać grafikę rozpościerającą się na całej powierzchni kartki bez żadnych marginesów. Taki efekt pozwala uzyskać pseudoklasa :first, dzięki której możemy ustawić marginesy na okładce inne niż na pozostałych stronach wydruku - np. wyzerować je. Trzeba jednak zdawać sobie sprawę, że większość typowych drukarek nie pozwala zadrukować całej powierzchni papieru, więc jakieś minimalne marginesy zawsze pozostaną - jak duże zależy od...
- Drukowanie CSS / Druk dwustronny @page :left :right
...spięty wydruk, kartka leżąca po lewej stronie powinna mieć prawy margines szerszy, a kartka po prawej stronie - lewy margines szerszy. Taki efekt można uzyskać stosując pseudoklasy :left i :right, które pozwalają ustawić różne marginesy wydruku dla stron lewych i prawych. W językach o kierunku tekstu od lewej do prawej (np. język polski lub angielski) pierwszą stroną dokumentu (okładką) jest strona prawa. Natomiast jeśli dokument zawiera w większości tekst w języku pisanym od prawej...