Рубрика: HTML&CSS

7.12.2019 Нет комментариев 3 599

Привет! Представь, что тебе осталось жить.. всего неделю.. не день! Чем займёшься в оставшиеся дни? Попробуй представить. Пусть это реанимированное сердечко станет напоминанием о главной ценности. О жизни 🙂 Создавать наше сердце мы будем с помощью псевдоэлементов ::after и ::before. ::after — добавляет контент после указанного элемента с помощью читать дальше…

6.10.2019 Нет комментариев 832

Как сделать ссылку для скачивания файла

Привет! Довольно многие, по статистике Яндекса, задаются вопросом о том, как сделать ссылку для скачивания файла. Почему возникает подобный вопрос? Дело в том, что браузеры, и в частности Яндекс-браузер, самостоятельно открывают многие типы файлов, например pdf, при обращении к ним посредством ссылки на странице сайта. читать дальше…

1.09.2019 Нет комментариев 1 209

Less — Урок 15. Встроенные функции

Привет! Среди встроенных функций Less, чаще всего используются функции управления цветом, их и рассмотрим в последнем уроке Less. Данные функции обычно принимают параметры в тех же единицах, что и изменяемые ими значения, а проценты обрабатываются как абсолютные значения, которые привязаны к своим допустимым диапазонам. Color читать дальше…

24.08.2019 Нет комментариев 1 465

Less — Урок 14. Импорты

Привет! Это конспект урока по импортам в Less. Импорт нужен для доступа одного файла, например index.less, к данным / переменным другого файла, допустим, из new.less. Опционально расширение указывается для less файлов, т.е. если не указываем расширение, компилятор воспринимает импортируемый файл как less файл. Импорт less читать дальше…

17.08.2019 Нет комментариев 1 203

Less — Урок 13. Циклы

Привет! В Less нет синтаксиса для циклов, но их можно сымитировать с помощью рекурсии.Рекурсия – это когда вызывается функция или миксин из самой себя. В Less для рекурсии можно использовать миксины. Создаем класс test, в котором используем миксин loop с передаваемым значением (5): .test { читать дальше…

10.08.2019 1 комментарий 1 231

Less — Урок 12. Экранирование

Привет! В этом уроке немного про экранирование (Escaping), которое позволяет использовать любую произвольную строку в качестве значения свойства или переменной. Необходимо обернуть в двойные кавычки и поставить знак тильды ~ перед выражением, чтобы ~ «anything» или ~ ‘anything’ использовалось как есть, без изменений, кроме интерполяции. читать дальше…

27.07.2019 Нет комментариев 1 835

Less — Урок 11. Наследование

Привет! В этом уроке говорим о наследовании в Less, а именно о том, каким образом дочерние селекторы могут использовать свойства родительских. Для наследования существует функция extend(), через которую мы обращаемся и получаем свойства необходимого селектора. По официальной документации, extend() является псевдо-классом. Extend() В index.less напишем читать дальше…

20.07.2019 Нет комментариев 985

Less — Урок 10. Операторы

Привет! В этом уроке рассмотрим, как именно Less поддерживает арифметические операции сложения (+), вычитания (-), умножения (*) и деления (/). Оказывается, их можно применять к числам, цветам или переменным, при этом учитываются единицы измерения и числа конвертируются перед выполнением операции. Примеры простых вычислений: .addition { читать дальше…

9.07.2019 Нет комментариев 1 046

Урок 9. Вложенность миксинов

Привет! В прошлом уроке вложенность миксинов затрагивалась. Продолжим и начнем с наглядного примера, где вначале используем стили CSS, а потом уже Less. Пример вложенности в CSS Создаём файл index.html, в нём div с классом .block и дочерними элементами div.block-in и h1: <!DOCTYPE html> <html lang=»en»> читать дальше…

14.06.2019 Нет комментариев 849

Урок 8. Миксины. Часть 3

Привет! В этом уроке рассмотрим ещё один пример миксина как функции и манипуляцию с переменными. Внутри миксина определяем переменную: .mixin() { @width: 30px; // переменная @width } .block { .mixin; // вызываем миксин width: @width; // берем значение переменной } Вызываем миксин в классе .block читать дальше…

Рубрика: HTML&CSS

Рубрики