Jeszcze z 10 czy 15 lat temu gdybyśmy rozpoczęli rozmowę o szkodliwości pracy z monitorami to raczej potraktowane by było w kategorii wady wzroku danej osoby czy też kompletnej przesady, wręcz szukaniu dziury w całym. Niestety z biegiem lat możemy zauważyć pewne trendy: – upowszechnienie się opcji “Dark Mode” zwanego trybem nocnym który nie męczy […]
Zgodnie z tradycją musimy utworzyć najprostszy program wyświetlający Hello World i w przypadku React będzie to naprawdę minimalistyczny projekt, bez paczek z npm czy kompilacji kodu: <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> </head> <body> <script src="test.js"></script> <div id="root"/> <script type="text/babel"> // komponent App zwracający JSX function App() { return
Właściwość align-items w modelu Flexbox CSS3 służy do wyrównywania elementów flex (flex items) wewnątrz ich kontenera (flex container) wzdłuż osi poprzecznej (cross axis). Jest to niezwykle przydatne narzędzie do kontrolowania sposobu, w jaki elementy są rozmieszczone w pionie w kontenerze flex.
Właściwości flex-grow, flex-shrink, i flex-basis stanowią fundament elastycznego układu elementów w Flexbox CSS3. Pozwalają one na precyzyjną kontrolę rozmiarów elementów flex w kontenerze, zarówno w przypadku dostępnej dodatkowej przestrzeni, jak i konieczności zmniejszenia elementów, aby zmieściły się w kontenerze.
Właściwość align-content w Flexbox CSS3 umożliwia kontrolę nad zachowaniem wielu linii wewnątrz flex kontenera wzdłuż osi poprzecznej (cross axis). Jest to szczególnie użyteczne w kontenerach flex, które mają flex-wrap ustawiony na wrap lub wrap-reverse i zawierają wystarczająco dużo elementów, by zapełnić więcej niż jedną linię.
Właściwość flex-wrap w Flexbox CSS3 pozwala na kontrolę zachowania elementów flex (flex items) w kontenerze flex (flex container), gdy nie ma wystarczającej przestrzeni, aby umieścić je w jednym rzędzie. Dzięki flex-wrap możemy określić, czy elementy mają się zawijać na nową linię czy też pozostać w jednym rzędzie.
Właściwość justify-content w Flexbox CSS3 pozwala na kontrolowanie wyrównania elementów flex wewnątrz ich kontenera wzdłuż głównej osi (main axis). Jest to kluczowe narzędzie do precyzyjnego pozycjonowania zawartości wewnątrz flex kontenerów, umożliwiające tworzenie responsywnych i elastycznych układów strony.
Flexbox to idealne narzędzie do tworzenia responsywnych układów stron internetowych, w tym popularnego układu 3-kolumnowego. Taki układ może składać się z głównej zawartości umieszczonej centralnie i dwóch kolumn (sidebarów) po bokach, które mogą zawierać menu, informacje dodatkowe, linki itp.
Flexbox, czyli Flexible Box Layout, to jeden z najpotężniejszych i najbardziej elastycznych modeli układów dostępnych w CSS3. Zaprojektowany, aby ułatwić projektowanie responsywnych układów stron internetowych, Flexbox pozwala na efektywne zarządzanie przestrzenią pomiędzy elementami w kontenerze, zarówno w pionie, jak i w poziomie.
Właściwość float w CSS3 jest używana do umieszczenia elementu po lewej lub prawej stronie kontenera, pozwalając innym treściom na “opływanie” go z pozostałych stron. Tradycyjnie float był często wykorzystywany do układania obrazków w tekście lub do tworzenia prostych layoutów stron. Jednak w nowoczesnym web designie, float coraz częściej ustępuje miejsca Flexboxowi i CSS Gridowi, które
Właściwość display w CSS3 jest jedną z najważniejszych właściwości używanych do kontrolowania układu strony internetowej. Określa, w jaki sposób element jest wyświetlany na stronie, wpływając zarówno na sam element, jak i na sposób, w jaki są rozmieszczone inne elementy wokół niego.
Outline w CSS3 jest właściwością służącą do dodawania linii dookoła elementu, podobnej do obramowania (border). Kluczową różnicą jest to, że outline nie wpływa na układ elementów (nie zajmuje przestrzeni), a jego głównym zastosowaniem jest podkreślenie elementu dla celów nawigacyjnych lub wizualnych.
Padding, czyli wewnętrzny odstęp, to kluczowy element box modelu w CSS3, który pozwala na kontrolowanie przestrzeni między zawartością elementu a jego obramowaniem. Odpowiednie użycie paddingu jest niezbędne do osiągnięcia pożądanych efektów wizualnych i funkcjonalnych w projektowaniu stron internetowych.
Obramowanie (border) w CSS3 to kluczowy element służący do dodawania ramki wokół elementów HTML. Obramowanie może być stosowane do dekoracji, podkreślenia istotnych informacji na stronie lub po prostu do oddzielenia jednych elementów od innych. CSS3 oferuje szeroki zakres możliwości stylizacji obramowań, w tym zmianę ich grubości, stylu, koloru, a nawet dodawanie zaokrągleń rogów.
Marginesy (margins) są jednym z podstawowych narzędzi w CSS3, służących do kontrolowania przestrzeni wokół elementów. Marginesy pozwalają na oddzielenie elementów od siebie, wpływając na sposób, w jaki są one rozmieszczone na stronie, ale nie wpływają bezpośrednio na rozmiar samego elementu.