Уроки CSS

Уроки CSS предназначены  на тех, кто знает HTML. Здесь Вы найдете уроки о том как сделать Ваши сайты адаптивными, стильными, красивыми и добавить эффекты анимации и переходов на Ваши страницы.

Bootstrap 4 — Управление границами и скруглениями углов элементов

Здравствуйте!  В этом уроке  мы  рассмотрим,  как в Bootstrap4 можно  управлять границами и скруглениями углов элементов. Таким образом вам не надо  создавать стили  для   границ элемента,  поскольку в Bootstrap4 для этого  есть  уже встроенные классы.

Bootstrap4 границйы и скругления
Читать далее

Bootstrap 4 — Управление отступами

Здравствуйте! В этом уроке  разберем,  какие  есть  классы  в Bootstrap4 для  управления внешними (margin) и внутренними (padding)  отступами элемента. Если  в предыдущей версии Бутстрапа  приходилось  создавать  кастомные классы  для  отступов, то  теперь  это  уже  встроено в фреймворк.

Классы Bootstrap4 для margin и padding

Читать далее

Bootstrap 4 — Классы для работы с flexbox

Здравствуйте! В этом  уроке  рассмотрим,  какие  классы есть  в  фреймворке Bootstrap4 для работы с flex. Ведь основное назначение flex классов Bootstrap — это удобное и быстрое создание flex-контейнеров, а также адаптивное (на всех контрольных точках) управление раскладкой flex-элементов внутри них.

Flexbox – это CSS технология, которая предназначена для создания гибких макетов сайтов и веб-приложений. Она является неотъемлемой частью Bootstrap 4 и положена в работу не только сетки, но и его компонентов. Более подробно ознакомиться с CSS Flexbox можно в этой статье.

Классы Bootstrap4 для флексбокса

Читать далее

Bootstrap 4 — Управление отображением элементов

Здравствуйте!  В этом  уроке  рассмотрим классы-помощники Bootstrap4 для управления отображением элементов. Такие классы  могут  помочь вам спрятать или показать элемент  на  определенном  расширении.

Bootstrap4 классы для отображения элемента

Читать далее

Bootstrap 4 — Navbar как создать меню на сайте

Здравствуйте!  В  этой  статье  я  расскажу, как использовать  компонент NavBar Bootstrap4  для создания меню. Дело в том, что  в бутстрап4  он  немного  отличается от 3-го бутстрапа.

Вот  эти нюансы мы  и  рассмотрим  в этом материале.

Bootstrap4 Navbar создание меню

Читать далее

Bootstrap 4 — Spinners (Спиннеры)

Здравствуйте! В этой  статье  рассмотрим  компонент Bootstrap 4  —  спинер, который  прелназначен  для  создания  анимации  при  загрузке  страницы. Это покажет  пользователю,  что   страница  загружается,  а  не  зависла.

Bootstrap4 - Spinners

Описание компонента Spinners

Bootstrap Spinners – это компонент фреймворка Bootstrap 4, предназначенный для создания на веб-проектах загрузочной анимации, которая в основном используется для индикации на сайте не очень длительных по времени процессов (в среднем выполняющихся в пределах от 1 до 4 секунд). Например, для представления процесса загрузки всей страницы или некоторой её части.

Для индикации на сайте более продолжительных процессов лучше использовать полосы загрузки.

Спиннеры в Bootstrap построены только с использованием HTML и CSS (без JavaScript). Однако при их реальном применении на веб-проектах без JavaScript всё равно не обойтись. Его нужно будет использовать, например, когда нужно будет переключить видимость спиннера.

Кстати в Bootstrap 4 очень много вспомогательных (утилитных) классов, с помощью которых можно не только очень просто управлять видимостью спиннеров, а также выполнять ряд других действий над ними, например, выравнивать и изменять их размеры.

Поддержка вспомогательных технологий в компоненте Spinners обеспечивается с помощью атрибута role=»status» и элемента <span class=»sr-only»>Загрузка…</span>.

Читать далее

Bootstrap 4 Card — контент в виде карточки

Здравствуйте!  В  этой статье,   я  хочу  рассказать о  компоненте Bootstrap 4 Card. Рассмотрим, как он создаётся, настраивается, а также как с помощью него создать элемент интерфейса Bootstrap 3 Panels.

Bootstrap4 Cards

Читать далее

Сетка Bootstrap 4

Здравствуйте! В этой статье разберём сетку Bootstrap 4. Сетка – это основная часть этого фреймворка, которая позволяет очень быстро и достаточно просто верстать адаптивные сайты.

Сетку Bootstrap 4 можно использовать отдельно (без других компонентов). Данный вариант применения фреймворка тоже используется веб-разработчиками, т.к. не всегда готовые Bootstrap элементы, такие как кнопки, навигационные панели, таблицы и прочие компоненты можно использовать в рамках одного проекта. В основном это касается проектов с уникальным дизайном. В этом случае нужные элементы проще написать с нуля самостоятельно, вместо того чтобы переписывать готовые компоненты Bootstrap.

Сетка Bootstrap 4

Читать далее

Создание тем CSS

Здравствуйте! Я уже писал о создании  переменных в CSS. А  сегодня  хочу как  раз привести пример  использование этих самых  переменных. И как мне кажется самым  простым способом использования переменных в CSS может стать  создание тем.

создание тем в css с помощью переменных

Итак давайте рассмотрим на конкретном примере. Пусть дана такая страница.

Читать далее

Переменные в CSS

Здравствуйте! Я уже писал о препроцессорах Less и Sass. Так вот у них есть возможность использовать переменные в которых можно сохранять значения CSS свойств.  Но теперь эта возможность  появилась и в чистом CSS без всяких там препроцессоров. Вот о ней  я и хочу  рассказать в этой статье.

переменные в css

Хочу заметить, что хотя часто и используется термин «переменные» (css variables), но официально они называются custom properties (кастомные  свойства).

Читать далее

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: