Charts.css

chartscss.org — CSS-фреймворк с открытым исходным кодом для визуализации данных помогает разработчикам интерфейсов превращать данные в красивые диаграммы и графики при помощи простых классов CSS.

#сервис #css

Halfmoon

gethalfmoon.com — интерфейсный фреймворк со встроенным тёмным режимом и полной настраиваемостью с использованием переменных CSS; отлично подходит для панелей мониторинга и инструментов.

#сервис #css

​​Разработка веб-приложений.
Полуэктова Н.Р.
2022

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

Среди них: принципы организации сети Интернет; базовый язык разметки web-страниц HTML, технологии описания стилей этих страниц СSS; технологии браузерного программирования на основе языка jаvascript, современные средства адаптивной верстки сайтов; основные принципы, технологии и инструментальные средства серверной обработки запросов и хранения информации web-приложений.

💾 Скачать

#rus #html #css #javascript

Стилизация плейсхолдера и скролла, CSS-спрайты

В данном видео рассматривается CSS с основ: простые и составные селектора, псевдоклассы и псевдоэлементы, позиционирование, блочная модель и т.д. А так же свойства добавленные в третьей версии спецификации: границы и скругления, тени, градиенты, фильтры, трансформации, анимации, плавные переходы и т.д. По окончанию курса вы получите отличную теоретическую базу для создания полноценных статичных веб-страниц.

📺 Смотреть

#видео #css

📺 Уроки Materialize CSS

1. Введение и установка фреймворка [YouTube]
2. Адаптивное меню [YouTube]
3. Система сетки. Сравнение с Bootstrap [YouTube]
4. Делаем слайдер [YouTube]
5. Делаем Parallax [YouTube]
6. Форма регистрации [YouTube]
7. Делаем модальные окна [YouTube]
8. Вывод постов для блога [YouTube]
9. Анимации фреймворка [YouTube]
10. Верстаем footer [YouTube]

#курс #css #rus

Основы CSS3. Полный курс

В данном видеокурсе мы с вами рассмотрим CSS, или каскадных таблиц стилей. Начнём с основ: простые и составные селектора, псевдоклассы и псевдоэлементы, позиционирование, блочная модель и т.д. А так же разберём свойства добавленные в третьей версии спецификации: границы и скругления, тени, градиенты, фильтры, трансформации, анимации, плавные переходы и т.д. По окончанию курса вы получите отличную теоретическую базу для создания полноценных статичных веб-страниц.

📺 Смотреть

#видео #css

📺 CSS Grid

В данном видео-курсе рассматриваются все особенности CSS Grid. Её использование для вёрстки, а так же сравнивается с существующими способами построения лэйаута.

1. Введение в курс (Introduction) [YouTube]
2. Применение сетки к контейнеру [YouTube]
3. Создание 3х колоночного макета [YouTube]
4. Управление размерами и позицией grid-элемента [YouTube]
5. Именование grid-линий, создание сетки, позиционирование элементов [YouTube]
6. Выравнивания grid-элементов [YouTube]
7. Выравнивания grid-контейнера [YouTube]
8. Управлять порядком элементов grid-контейнера [YouTube]
9. Вложенность grid-элементов (Grid Nesting) [YouTube]
10. Гибкость grid-элеменов при изменении размеров экрана (Auto-fill & Auto-fit) [YouTube]

Продолжение в плейлисте на YouTube.

#курс #css #rus

Эффект фрагментации изображений при помощи CSS Paint API

Эффект фрагментации можно сделать используя CSS-маску и пользовательские свойства. Он получится красивый, но у него будет один недостаток: слишком много CSS-кода (сгенерированного при помощи Sass).

В данной статье рассматривается такой же эффект, но при помощи Paint API. Это разительно уменьшит количество CSS-кода и полностью устранит потребность в Sass.

📖 Читать

#статья #HTML #CSS #JavaScript

​​Bootstrap и CSS-препроцессор Sass. Самое необходимое.
Н.А. Прохоренок
2022

Рассмотрено стилевое оформление стандартных элементов и большое количество готовых компонентов Bootstrap: адаптивная панель навигации, карточки, панели с вкладками, карусель, всплывающие подсказки и уведомления, модальные диалоговые окна и др.

Описана сборка SCSS-файлов библиотеки Bootstrap под свой проект с использованием CSS-препроцессора Sass, а также создание собственного проекта без участия Bootstrap. Большое количество практических примеров помогает начать работу самостоятельно.

💾 Скачать

#ru #css

CSS Flexbox. Полный курс

В данном видеокурсе мы с вами рассмотрим технологию Flexbox. Flexible Box Layout Module (Flexbox) - представляет собой способ компоновки элементов, в основе лежит идея оси. Другими словами все элементы можно располагать вдоль основной и поперечной осей, или вертикально и горизонтально. Технология позволяет буквально в пару свойств создать гибкий лэйаут, или гибкие UI элементы.

📺 Смотреть

#видео #css

Electron

github.com/electron/electron — фреймворк для написания кроссплатформенных десктопных приложений с использованием JavaScript, HTML и CSS.

#репозиторий #HTML #CSS #JavaScript

CSS за 100 секунд

Cascading Style Sheets или CSS — это язык, на котором веб-сайты HTML выглядят красиво. Узнайте, как такие концепции, как каскад, специфичность, наследование и блочная модель, влияют на внешний вид веб-страницы.

📺 Смотреть

#видео #css