góry - Kurs HTML i CSS
Znaki specjalne HTML / Buźki i emotikony (emoji)...Tarzanie się po podłodze ze śmiechu 🤣 😂 Twarz ze łzami szczęścia 😂 🙂 Lekko uśmiechnięta twarz 🙂 🙃 Twarz "do góry nogami" 🙃 😉 Mrugająca twarz 😉 😊 Uśmiechnięta twarz ze śmiejącymi się oczami 😊 😇 Uśmiechnięta twarz z aureolą 😇 Twarze wyrażające uczucia 🥰 Uśmiechnięta twarz ze śmiejącymi się oczami i trzema sercami 🥰 😍 Uśmiechnięta twarz z oczami w kształcie serc 😍 🤩 Szeroko...
- Znaki specjalne HTML / Ludzie i części ciała - emotikony (emoji)
...w lewo 🤛 🤜 Pięść skierowana w prawo 🤜 Dłonie 👏 Brawa 👏 🙌 Świętująca osoba unosząca obie dłonie do góry 🙌 👐 Otwarte dłonie 👐 🤲 Dłonie razem w górze 🤲 🤝 Uścisk dłoni 🤝 🙏 Osoba ze złożonymi dłońmi 🙏 Dłonie z rekwizytami ✍ Pisząca dłoń ✍ 💅 Lakier do paznokci 💅 🤳 Selfie 🤳 Części ciała 💪 Napięty biceps 💪 🦾 Ramię mechaniczne 🦾...
Wykazy CSS / Automatyczna numeracja wykazu {counter-reset, counter-increment}...3,... Podpunkty drugiego rzędu - litery: a, b, c,... Co jednak zrobić, jeżeli nie odpowiada nam taki sposób numeracji punktów albo nie możemy z góry określić ile będziemy mieli poziomów zagnieżdżenia? CSS daje na to prostą receptę - automatyczną numerację, czyli możliwość dowolnego określania sposobu numerowania elementów, np.: Punkty główne: 1., 2., 3.,... Podpunkty: 1.1., 1.2., 1.3.,... 2.1., 2.2., 2.3.,... 3.1., 3.2., 3.3.,... Podpunkty drugiego rzędu: 1.1.1., 1.1.2., 1.1.3...
- Szablon strony na DIV-ach / Semantyczny szablon strony
...elastycznie dopasowując ich wygląd do lokalnego szablonu. Analogicznie jak we wspomnianym wcześniej rozdziale pt. Menu w CSS, także i tutaj z góry ustalimy kod HTML, który następnie będzie wykorzystywany we wszystkich przykładach w tym rozdziale. Zmieniając wygląd kolejnych przygotowywanych szablonów, będziemy projektować jedynie kolejne arkusze CSS dla wciąż niezmiennego kodu HTML. Jest to praktyczny przykład implementacji koncepcji rozdzielenia struktury i prezentacji dokumentów...
- Tekst CSS / Tryb pisania {writing-mode}
...Firefox, ale co ciekawe nawet wtedy po kliknięciu w ułożony pionowo element <select> rozwija się on w tradycyjnym kierunku - tzn. do dołu lub do góry 🙁 Jeśli chcesz, aby znaki tekstu były ułożone pionowo jeden pod drugim, a nie obrócone na bok, zobacz rozdział: Orientacja tekstu. Przykład {writing-mode} Tekst ułożony w pionie z kolejnymi linijkami obok siebie od prawej do lewej strony ("writing-mode: vertical-rl"): To jest pierwsza linijka, to jest druga linijka, a to jest kolejna...
- Układ elastyczny CSS / Flexbox
...position (pozycja) nie nadawała się zbytnio do ustalania głównego układu elementów na stronie, ponieważ wymagała, aby rozmiary bloków były z góry znane. W praktyce z taką sytuacją rzadko mamy do czynienia, gdyż nie jesteśmy w stanie od razu dokładnie przewidzieć, ile tekstu będą zawierać artykuły, opublikowane w serwisie. Rozwiązaniem miało być płynne ustalanie pozycji przy pomocy właściwości float [zobacz: Szablon strony na DIV-ach]. I rzeczywiście w większości typowych zastosowań...
- Tekst CSS / Orientacja tekstu {text-orientation}
...odnajdywana po wpisaniu ułożonych w taki sposób w pionie słów kluczowych. W przypadku języków azjatyckich, w których tekst tradycyjnie pisze się z góry na dół, można użyć czcionki, która ma wbudowaną pionową orientację tekstu. Wtedy zarówno w przypadku użycia wartości mixed jak i upright znaki będą ułożone jeden pod drugim i nie zostaną obrócone. Aby wymusić obrócenie, bez względu jakiej czcionki używamy i w jakim języku jest napisany tekst, należy posłużyć się wartością sideways. Zwracam...
- Tło CSS / Gradient liniowy {background: linear-gradient repeating-linear-gradient}
...Kierunek określa sposób rozłożenia barw. Można go podać na dwa sposoby: słowa kluczowe to top - przejście kolorów nastąpi pionowo z dołu do góry (odpowiednik 0deg) to right top - ukośnie z lewego-dolnego do prawego-górnego narożnika to right - poziomo z lewej do prawej strony (odpowiednik 90deg) to right bottom - ukośnie z lewego-górnego do prawego-dolnego narożnika to bottom - pionowo z górny do dołu (odpowiednik 180deg - domyślnie) to left bottom - ukośnie z prawego-górnego do...
- Rozmiary CSS / Przepełnienie tekstu {text-overflow}
...elementu. Oczywiście nie będzie to wyglądało zbyt estetycznie, a czasem może nawet zupełnie popsuć układ całej strony. Ponieważ często nie wiadomo z góry, jak długi może być tekst na stronie - bo powstanie on dopiero później - dlatego aby zabezpieczyć się na taką okoliczność, zwykle ukrywa się nadmiarową zawartość przy pomocy stylu "overflow: hidden" albo "overflow: auto". Kłopot w tym, że wtedy użytkownik może się w ogóle nie zorientować, że tekst został przycięty - zwłaszcza jeśli litery...
- Pozycjonowanie CSS / Wyświetlanie {display}
...dowolny znacznik [zobacz: Wstawianie stylów]. Natomiast jako "sposób" należy podać: block - element będzie wyświetlony w bloku (odstęp z góry i z dołu) inline - element będzie wyświetlony w linii (sąsiadująco z innymi) list-item - element wykazu: <li>...</li> none - element nie będzie wyświetlany inline-block - element zachowuje się podobnie jak element zastępowany (Firefox 3, Opera 7, Chrome, Konqueror) run-in - jeśli po elemencie następuje brat będący blokiem, element...