Kategoria: CSS3

CSS GENERATOR jest intuicyjny, darmowy i dostępny online CSS Generator to proste w użyciu i darmowe narzędzie, za pomocą którego dobierzesz odpowiednie wartości dla wybranych właściwości CSS. Cechuje go: wygodne dostosowanie parametrów za pomocą suwaków, możliwość podglądu na żywo, błyskawiczne kopiowanie gotowego kodu CSS. Jak dużo narzędzi powinien znać...

Css się nie odświeża – cache Przeglądarki mają swoją pamięć podręczną. Zamiast za każdym razem pobierać całą stronę z Internetu, zapamiętują konkretnie pliki statyczne jak np. arkusze stylów, obrazki czy czcionki i odtwarzają je przy kolejnym wejściu na daną stronę. Mechanizm ten pozwala przeglądać strony szybciej i efektywniej. Może...

CSS GRID LAYOUT Wprowadzenie i podstawowe pojęcia dotyczące GRIDa znajdują się w artykule: CSS Grid Layout – wprowadzenie. W CSS Grid tworzymy siatkę, która znajduje się w grid-container – wewnątrz niego znajdują się grid-items. Każdy z tych elementów ma swoje unikalne właściwości, dzięki którym możemy swobodnie przestawiać elementy względem poszczególnych...

CSS GRID LAYOUT GRID i podstawowe pojęcia z nim związane opisałam dokładnie w poprzednim artykule: CSS Grid Layout – wprowadzenie. Tutaj zajmę się już konkretnymi przykładami użycia. GRID – właściwości grid-container Aby w ogóle rozpocząć pracę, dodajemy display: grid do grid-container. Od tej pory możemy zacząć używać pozostałych właściwości. UWAGA!...

CSS GRID Layout – wprowadzenie Grid to sposób tworzenia (budowania, składania) stron internetowych – drugie obok Flexboxa potężne narzędzie, ułatwiające pracę. CSS Grid Layout to układ dwuwymiarowy, tak jak tabele obsługuje kolumny i wiersze. W dużym kontenerze (Grid container) umieszcza się elementy potomne (Grid items) – po dodaniu odpowiednich cech...

FLEXBOX – wprowadzenie Dosłownie możemy tłumaczyć go jako elastyczny model skrzynkowy, którego używamy do projektowania interfejsu aplikacji i stron internetowych. W tym modelu używamy pojemnika – rodzica, w którym umieszczamy dzieci (np. section, w której jest jeden lub więcej div). Rodzic jest elastycznym pojemnikiem a dzieci w nim umieszczone,...

FLEXBOX – ŚCIĄGA Flexbox jest bardzo pomocny dla projektantów stron internetowych, jednak na początku nie łatwo jest zapamiętać wszystkie jego cechy i możliwości. Aby ułatwić Wam pracę, przygotowałam plik: flexbox ściąga. Można do niej zerkać podczas prac nad stroną. Zachęcam do korzystania, zanim flex właściwości dobrze się wam utrwalą 🙂 Flexbox...

JAK NADAĆ ELEMENTOM JEDNAKOWĄ WYSOKOŚĆ? Flexbox to sposób składu stron, z którego skorzystamy, aby rozwiązać problem wysokości kolumn. Nie będziemy korzystać z tabeli – zostawimy ją do przedstawiania danych tabelarycznych. Tworzymy dowolny pojemnik, który będzie zawierał w sobie nasze kolumny. W moim przykładzie będzie to div o klasie container...

Edycja zdjęć za pomocą filtrów Możliwość edycji zdjęć bezpośrednio na stronie internetowej to ogromny krok naprzód. CSS3 daje nam taką możliwość – nie ma potrzeby dokonywania obróbki graficznej wielu zdjęć i wysyłania ich na serwer. Można to zrobić hurtowo – jedną komendą. JAK UŻYWAĆ FILTRÓW GRAFICZNYCH? Co możemy zrobić...

CZYM JEST RESPONSYWNOŚĆ? RWD (responsive web design) to taki sposób projektowania stron internetowych, który umożliwia dopasowywanie się strony do rozdzielczości ekranu. Tworzenie strony w takiej technice sprawia, że strona wyświetla się dobrze zarówno na smartphonie i tablecie jak i na laptopie. Wielu użytkowników pierwszy raz widzi stronę na smartphonie....