CSS Box shadow Generator - еще один классный, интуитивно понятный сервис генерации теней для ваших блоков. При помощи ползунков можно выставить позицию, масштаб, прозрачность, положение вашей тени и сразу же она отображается на экране.

Как подключить собственные шрифты к своему проекту.

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

#CSS

Анимированный прелоадер для сайта на чистом CSS.

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

#HTML_CSS

AOS — это современная библиотека, которая способна менять позиции элементов при скролле. Богатый функционал, есть возможность создавать свои анимации.

Инструкция по установке и настройке AOS
Рассмотрим на примере подключения через CDN

Шаг 1.
Подключить перед закрывающим тегом </head> CSS файл
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

Перед закрывающим тегом </body> подключить JS файл
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

Шаг 2.
Выполнить инициализацию библиотеки. Перед закрывающим тегом </body> добавить
<script>
AOS.init();
</script>

Шаг 3.
Добавляем анимацию для нашего блока. Просто добавьте к блоку data-атрибут c названием анимации
<div data-aos="fade-up-right"></div>

#JS #HTML_CSS

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

Игра в имитацию (2014)

1941 год. Английскому математику Алану Тьюрингу поручено расшифровать секретный код Третьего рейха – "Энигма". Тьюринг действует по поручению Британской разведки в центре, специализирующемся на взломе шифров и кодов. Для выполнения сверхсекретного задания здесь собрана целая команда талантливых ученых, которым предстоит создать первый в мире компьютер.

КиноПоиск: 7.6
IMDB: 8.0

Анимированный скролл на чистом CSS

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

#HTML_CSS

Stacks - это бесплатный и простой в использовании диспетчер задач, который помогает организовать ваши задачи элегантным и интуитивно понятным способом. При использовании парадигмы канбан для управления вашими проектами, Stacks предлагает гибкий и наглядный способ организации задач. Сочетая мощные функции, такие как теги, группировка задач, быстрый поиск и вложения с красивым пользовательским интерфейсом, Stacks стремится сделать управление задачами простым и увлекательным. Скачать планировщик для своей платформы можно с официального сайта.

#Инструменты

Лучшее на канале за последнюю неделю.

1) IKONS - иконки для дизайнеров и разработчиков.
2) AOS — это современная библиотека, которая может менять позиции элементов при скролле.
3) Magic CSS3 Animations - библиотека крутых кросс-браузерных анимаций.
4) Vue.js с нуля
5) Анимированный прелоадер для сайта на чистом CSS.

Всем успешной разработки!

#Лучшее

Particles.js - библиотека для создания красивых плавающих частиц на веб-странице. Плавающие частицы данной библиотеки отлично реагируют на поведение курсора для создания интерактивности.

#JS

YoPalette - отличный сервис для подбора оптимальной цветовой гаммы при разработке шаблона или макета сайта. Просто делаете клик по цвету и он будет сразу скопирован в буфер обмена. YoPalette поможет оптимально подобрать цветовое решение с оттенками для Вашего веб-проекта.

#Инструменты

Corso - шаблон для целевой страницы.

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

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

#Шаблоны

Анимированная страница 404 ошибки на чистом CSS.

Одной из самых распространенных проблем, с которыми сталкиваются посетители различных сайтов является ошибка 404 Not Found. Если говорить простым языком, то он означает, что страницы с таким адресом не существует. В этом уроке мы рассмотрим как стилизовать страницу с 404 ошибкой.

#HTML_CSS

Бесплатный анимированный набор иконок от команды дизайнеров Mercury, чтобы добавить немного плавного движения в ваш свежий дизайн пользовательского интерфейса. Прилагаемый архив содержит 24 иконки в нескольких форматах и разрешениях:
- CSS SVG для Web
- PNG-спрайты для iOS и Android (версии 24 и 48 пикселей)
- Lottie JSON для React Native
- Статические иконки в PNG + SVG.

#Иконки

Курс Python 3 для начинающих от ADV-IT.

Язык программирования Python 3 — это мощный инструмент для создания программ самого разнообразного назначения, доступный даже для новичков. С его помощью можно решать задачи различных типов. Этот курс вас с основами языка, работой с запросами и данными, погружением во фреймворк Django, установкой и запуском игр.

#Курсы

Что выведет данный код? Выберите правильный ответ ниже.

Resizing — бесплатный онлайн сервис, который помогает конвертировать, оптимизировать, обрезать и изменять размеры изображений в сети одним щелчком мыши. Есть расширение для Chrome.

#Инструменты

Что такое Fallback и почему это необходимо?

С английского слово fallback можно перевести как резервный. То есть иначе говоря, вы пытаетесь оставить резервный вариант для отображения того или иного элемента в случае проблем с отображением стилей, работой jаvascript или jquery.

Банальный пример того, как все сейчас рисуют скругленные края у элементов:

#roundbox {
-webkit-border-radius: 5px; /* Safari */
-moz-border-radius: 5px; /* Firefox */
-o-border-radius: 5px; /* Opera */
border-radius: 5px;
}

В случае, если браузер пользователя не поддерживает CSS3, он увидит просто прямоугольник, обладающий всей необходимой функциональность. То есть отобразится базовый вид элемента - это и есть fallback (резервная) страховка.

#Статьи

Evolution CMS - это бесплатная платформа с открытым исходным кодом для разработки сайтов и сервисов, перераборанная, всемирно известная MODX Evolution с использованием компонентов PHP-фреймворка Laravel, но с обязательным условием сохранения полной обратной совместимости.

Laravel выбран потому, что имеется обширная документация, активная поддержка, множество готовых пакетов, которые можно будет использовать и на Evolution 2.0. На данный момент более 70 000 сайтов сделано на Evolution CMS. 
Так как прародитель этой CMS был запущен в далеком 2005 году, сегодня у Evolution CMS имеется развитое сообщество разработчиков по всему миру.

#CMS

Иконки из сериала "Игры престолов"

Сегодня мы публикуем дизайнерский набор из 4 иллюстраций персонажей Game of Thrones в форматах файлов PNG и SVG. Вы можете использовать эту графику в своих личных или коммерческих проектах: веб-сайты, приложения, баннеры или печать.

Список иллюстраций:
- Дейенерис Таргариен
- Джон Сноу
- Тирион Ланнистер
- Джоффри Баратеон

#Иконки

Zepto - это минималистичная библиотека jаvascript для современных браузеров и в значительной степени jQuery-совместимым API. Если вы используете jQuery, вы уже знаете, как использовать Zepto.

Цель состоит в том, чтобы иметь модульную библиотеку ~ 5-10k, которая быстро загружается и выполняется, с привычным и универсальным API , чтобы вы могли сосредоточиться на выполнении работы.

Скачать Zepto.js
Не сжатый файл - 57.3k без сжатия, много комментариев 
Сжатый файл - 9,6 Кб в сжатом виде 

Как подключить Zepto.js
Подключается Zepto так же, как и jQuery
Закинуть файл в проект в папку js и перед закрывающим тегом </body> подключить:
<script src="js/zepto.min.js"></script>

#JS