Как изменить полосу прокрутки с помощью SASS/SCSS

14.06.2018

Полоса прокрутки (скроллбар) – это один из тех компонентов пользовательского интерфейса, который встречается почти на каждой веб странице в сети, но несмотря на это, у нас (разработчиков) слишком мало контроля над этим элементом UI. Некоорые браузеры позволяют изменить внешний вид полосы прокрутки, но большинство браузеров, включая Firefox, не дают такой возможности. Тем не менее, Chrome и Internet Explorer (да) позволяют добавлять пользовательские стили для скроллбаров, но синтаксис ужасно сложен и,…

читать

CSS Grid: Пятиминутное руководство

29.11.2017

Сетка – фундаментальный элемент дизайна любого веб-сайта, а CSS Grid – самый мощный и простой в использовании инструмент для ее создания. Модуль CSS Grid получил поддержку множества современных браузеров (Safari, Chrome, Firefox) в этом году, так что всем фронтенд разработчикам так или иначе придется освоить эту технологию в брижайшем будущем. В этой статье мы быстро пробежимся по основам CSS Grid и не будем зацикливаться на всех тех моментах, о которых…

читать

Начало работы с HTML canvas

12.11.2017

HTML <canvas> элемент – это мощное решение для создания пиксельной графики в Web c использованием JavaScript. Canvas позволит вам создавать замечательные визуальные эффекты – нужно только немного попрактиковаться. В этом туториале мы создадим canvas объект, добавим к нему простые визуальные эффекты и анимируем их. 01. Создаём страницу По своей сути Canvas – это HTML элемент, который располагается на странице и растягивается таким образом, чтобы полностью покрывать необходимую область, на которой вы…

читать

10 очень полезных генераторов кода для Веб Дизайнеров

01.10.2017

Генераторы кода могут стать лучшим другом веб дизайнера по двум причинам. Во-первых, они помогают в изучении новых техник или совершенствовании тех, с которыми вы уже знакомы. Во-вторых, они позволяют быстро выполнять повторяющиеся задачи. Вот 10 лучших генераторов кода для разных языков: Flexy Boxes Работать с CSS Flexbox иногда может быть… сложно. Поэтому существует несколько генераторов кода для работы с этой техникой. Flexy Boxes предлагает простой в использовании способ создания сложных макетов. Вы…

читать

Знакомство с Preact — Небольшой и быстрой React альтернативой

27.08.2017

Preact – это JavaScript библиотека, которая позиционирует себя как быстрая (3кб) альтернатива React с такой же ES6 API. Как постоянный пользователь React, я всегда хотел опробовать Preact и посмотреть, что он может предложить, а также увидеть разницу между этими двумя библиотеками. В этой статье мы познакомимся с Preact, его основными концепциями и разберемся в отличиях между Preact и React. Читайте также: JavaScript библиотеки 2017 Знакомство с Preact Как я и сказал выше,…

читать

CSS3 Анимация: 10 Впечатляющих примеров

24.08.2017

Одни из лучших примеров CSS3 анимации.  Свойства CSS3 открыли огромное количество новых дверей для веб-разработчиков и дизайнеров, позволяя создавать анимацию и интерактивность прямо в CSS разметке, обходя стороной Flash, Silverlight или After Effects. Ниже мы собрали лучшие примеры CSS3 анимации, включая отдельные эффекты и сайты.

читать

SASS для Начинающих: Миксины, Наследование, Операторы

18.08.2017

Предыдущий урок: SASS для Начинающих: Вложенные стили, Фрагменты, Импорт 01. SASS Миксины — Создание многоразовых CSS правил SASS миксины позволяют создавать многоразовые CSS правила, чтобы избежать повторений в коде. Это одна из самых мощных функций SASS. В CSS3 нам приходится писать слишком много префиксов, чтобы проект выглядел отлично во всех браузерах. SASS миксины позволяют создавать группы CSS деклараций, которые можно использовать многократно по всему сайту. 

читать

SASS для Начинающих: Вложенные стили, Фрагменты, Импорт

01.08.2017

Предыдущий урок: SASS для Начинающих: SASS Переменные 01. Вложенные стили SASS Вложенные стили SASS — это еще одна отличная функция, которая позволяет писать CSS правила и вкладывать их друг в друга. Вложение позволяет писать CSS в той же структуре, что и HTML, создавая визуальную иерархию в селекторах. Например, вот обычный CSS код: nav a{ text-decoration:none; } А с помощью SASS можно создавать нечто подобное: nav{ a{ text-decoration:none; } } Давайте добавим…

читать

SASS для Начинающих: SASS Переменные

28.07.2017

Предыдущий урок: Препроцессор SASS для Начинающих: Скачивание и Установка SASS переменные очень полезны в больших проектах. Вы можете задать значение и использовать его множество раз, и при изменении переменной, значение будет автоматически меняться в местах, где она была использована. Если вы уже знакомы с каким-нибудь языком программирования, то наверняка уже знаете, что такое перменная и принцип её работы. Предположим, что вы работаете над веб-сайтом, и ваш клиент говорит вам, что хочет,…

читать

SASS для Начинающих: Скачивание и Установка

27.07.2017

Следующий урок: Препроцессор SASS для Начинающих: SASS Переменные Эта серия туториалов по SASS предназначена для начинающих и опытных разработчиков. Это первая часть обучающих статей, в которой вы узнаете: 1. Что такое SASS? 2. Для чего он нужен? 3. Как его использовать? Что такое SASS? SASS (Syntactically Awesome Style Sheets) — один из самых популярных CSS препроцессоров. Он представляет собой набор функций для CSS, которые позволяют кодить быстрее и эффективнее. SASS поддерживает интеграцию…

читать

Лучшие CSS Препроцессоры 2017

26.07.2017

5 Лучших CSS препроцессоров 2017 года, которые ускорят ваш рабочий процесс. CSS препроцессоры разработаны специально для того, чтобы сделать работу CSS программистов более увлекательной. Они позволяют писать легко редактируемыый и надежный код с возможностью многократного использования.

читать

12 Обязательных инструментов для Тестирования Кода

16.06.2017

Новые фреймворки и инструменты для тестирования кода и юзабилити появляются каждый день. Ниже представлен список инструментов для тестирования программного кода, которые подходят под разные нужды. Рассмотрите каждый из них, чтобы убедиться в том, смогут ли они удовлетворить ваши технические потребности. 01. Jasmine Jasmine – это фреймворк для разработки, с помощью которого можно осуществить тестирование JavaScript кода. Он не зависит от других JavaScript фреймворков и не нуждается в DOM. Тем не…

читать

10 полезных туториалов по адаптивному веб-дизайну

26.03.2017

Адаптивный веб-дизайн – это дизайн, который отображается одинаково хорошо как на мобильных устройствах, так и на экранах комьютеров и планшетов. В настоящее время использовать адаптивный дизайн стало максимально легко благодаря изобилию вспомогательных программ и инструментов. Мы собрали подборку лучших ресурсов, которые помогут вам сделать так, чтобы ваш сайт отлично выглядел на любых устройствах.

читать

Новые инструменты веб дизайнера (февраль, 2017)

18.03.2017

Инструменты веб дизайнера, которые развеют ваши догадки о программировании, улучшат визуализацию данных и многое другое.  В этом месяце вышли два отличных инструмента для быстрого создания анимаций, несколько ресурсов для обучения, а также появились новые пути, по которым можно найти новые знакомства и возможности. 

читать

77 CSS форм

07.02.2017

Ищете CSS шаблоны форм? Набирающее популярность фронтенд-сообщество FREEFRONTEND опубликовало подборку из 77 красивых HTML и CSS форм разного назначения, которые находятся в свободном доступе.

читать