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ć Web Developer? Czy początkujący twórca front-endu […]
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 to być jednak zmorą dla projektantów […]
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 osi i w zależności od szerokości […]
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! column, float, clear, vertical-align nie zadziałają […]
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 w css, można stworzyć zaawansowany układ, […]
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, możemy ułożyć w dowolnym kierunku zarówno […]
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 ściąga to spore ułatwienie – wartości […]
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 oraz dwa divy wewnątrz niego: left […]
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ć ze zdjęciem Mieroszowa widocznym poniżej? Aby […]
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. Wracają do niej później jeśli nie […]