От автора: интернет в настоящий момент все еще не достаточно быстр, и существует всего несколько простых способов по ускорению веб-сайтов. Одним из таких способов является встраивание критического CSS кода в тег head на всех страницах вашего сайта. Но как же это сделать, если на вашем сайте сотни страниц или даже хуже, сотни различных шаблонов? Вы не можете делать это вручную. Dean Hume показал достаточно простой способ по решению этой проблемы. Если вы уже опытный разработчик, все, что описано в статье может показаться вам очевидным и понятным, но это определенно хороший пример для ваших клиентов и начинающих разработчиков.

Читать далее →

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

Читать далее →

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

Читать далее →

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

Читать далее →

От автора: в настоящее время в интернете все больше набирает популярность фиксированное или «прилипающее» меню. Меню в таком случае прилипает к определенной позиции и остается видимым даже при прокрутке страницы, тем самым обеспечивая постоянный доступ к нему.

Читать далее →

От автора: итак, вот ваша задача, возьметесь ли вы за нее: создать таблицу элементов. Каждый элемент должен занимать треть ширины экрана, а четвертый должен начинаться с новой строки, как при обтекании. Но определенный, особый элемент должен всегда отображаться в конце первой строки таблицы.

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

Читать далее →

От автора: макет отзывчивой сетки товаров с дружественной к сенсорным экранам галереей на основе Flickity и функцией фильтрации на основе Isotope.

Читать далее →

От автора: простой слайдер контента с эффектом зума в предопределенных областях для каждого слайда.

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

Читать далее →

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

Читать далее →

От автора: несмотря на то, что страницы порой весят до 2Мб, производительность остается горячей темой для обсуждения. Если у вас отличное веб-приложение, и оно нравится пользователям, то высокая конверсия вам обеспечена.

Читать далее →