CSS для чайников - зачем нужен, как работает + подборка генераторов
Решил набросать небольшую вводную статейку для тех, кому сейчас актуально изучение CSS. Разберу базовый смысл этой технологии и поделюсь парой ссылок
CSS расшифровывается как Cascading Style Sheets. Каскадные Листы Стиля - очень понятно, спасибо.
Если человеческим языком, то CSS — язык стиля, то есть инструмент задания стилей элементам страницы - цвета, шрифты и т.п. С помощью CSS красится текст, фон, картинки. HTML - это про "где" и "что", а CSS - это про "как выглядит"
Продолжаем ряд: JavaScript - это про "что делает", а React, Angular, NodeJS - это про "найди себе уже друзей и девушку".
Так, общий смысл постарался донести. Теперь к функциональным особенностям.
https://msiter.ru/references/css-reference
https://puzzleweb.ru/css/all_properties.php
Здесь вы найдете весь список свойств, настраиваемых в CSS. Делать статью из перечисления их всех смысла нет, да и если есть желание разобраться подробнее, легче вписаться в мой бесплатный курс по HTML/CSS - - https://clck.ru/34NCEF
Если вкратце, то с помощью всех вышеперечисленных свойств вы можете создать стиль и использовать его в своей странице. Так это и работает CSS
Например, я хочу сделать текст шрифтом Gilroy 15 размера синего цвета. Я вбиваю эти настройки в CSS, а потом подключаю их к моему тексту на странице. Вуа-ля - работает
А теперь о более интересном - как себе упростить работу с CSS. Один из вариантов - использовать генераторы CSS-эффектов.
Это онлайн сервисы, которые помогают вам сгенерить код на CSS под ваш запрос. Сейчас поделюсь с вами небольшим списком того, что я нашел на просторах интернета или похожих статьях про СSS.
Здесь можно нагенерить код для простейших фонов. В реальной работе вам такое не понадобится, но если для проектика на "потыкать" лень делать фон, можно поюзать
Сайт для генерации кода для вашей сетки.
Здесь можно удобно делать градиент, если самостоятельно вам пока тяжело это делать
Название говорит за себя - это инструмент для создания кнопок для ленивых. Для особо ленивых там еще и много пресетов
Это инструмент для настройки теней, причем с достойным функционалом.
Здесь удобно настраивать текст, можно менять размер, спейсинг, шрифт и т.п. Не очень нужная фича, но можно пользоваться, если лень делать самостоятельно;
Здесь вообще много полезного для CSS, советую просто зайти и потыкать. Анимации, тени, цвета и т.п. Тени и цвета в списке уже были, а вот анимаций не было, поэтому я его сюда и вставил.
Это инструмент для применения фильтров к фотографиям. Заливаете туда фотку, редактируете как в фотошопе, а сайт вам выдает код для такого же редактирования в CSS