Анимированное сердце CSS3
Как сделать анимацию сердца на CSS3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Top