css- все статьи тега


5 увлекательных игр для изучения основных концепций CSS

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

8 полезных на практике приёмов для веб-разработчиков

Как веб-разработчику, мне всегда приятно узнавать фишки, которые упрощают жизнь, особенно если их можно сразу же использовать на практике. Однако список таких приёмов бесконечен, а многие из них не подходят для частого применения. Поэтому я собрал полезные советы по HTML, CSS и JavaScript, которые могут пригодиться каждому веб-разработчику. Возмож...

12 UI Grid-систем и библиотек для React актуальных в 2019 году

Приветствую вас, Java-разработчики! Размышляете над тем, какой фреймворк освоить, чтобы стать полноценным специалистом? Спешу вас обрадовать  —  это как раз тема данной статьи. Как-то я уже делился с вами свои видением плана по овладению всеми необходимыми профессиональными навыками Java-разработчика.А теперь настало время рассказать о важнейших ф...

Рандомизатор на чистом CSS

Каждый раз когда мы нажимаем на одну из игральных карт, нам будет выпадать новая: иногда король червей, иногда пиковый туз, иногда бубновая девятка  —  в общем, любая карта из стандартной колоды. При этом у CSS нет ни «random» функций, ни её Math.random() эквивалента, ни способов генерации случайных чисел или цветов. Так что же тут происходит? Эл...

Полный гайд по SCSS/SASS

Поздравляем, вы создали свое первое full-stack веб-приложение и теперь хотите выложить его в Интернет, чтобы показать своим друзьям, семье и будущим работодателям. С помощью этого руководства вы узнаете, как: Разместить свой бэкенд на Heroku.Перенести локальную базу данных Postgres на Heroku.Разместить интерфейс на Netlify.Добавить ключи API в при...

Супергеройский макет: комбинируем CSS-сетки и CSS-фигуры

В этой статье мы создадим макет страницы комикса с панелями уникальной формы. Просмотреть готовую демо-версию можно на CodePen. Вдохновением для макета послужит страница комикса Generations: Phoenix & Jean Grey от Marvel Comics. Макет, который вырывается за рамки, выглядит круто. Но что еще круче  —  его можно создать с помощью CSS-сеток. Мы н...

Создание эффектов при прокрутке

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

8 полезных приемов в CSS: Эффект параллакса, прилипающий футер и многое другое

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

Почему никто не рассказал мне это о CSS

Стоит помнить  —  если вы имеете дело с неудачно разработанным API, предпочтительнее использовать mock-объекты. Пример кода. Что такое mock- и fake-объекты Определения можно найти во множестве статей в сети. Я просто упомяну их здесь для полноты картины. Mock  —  это объекты, обладающие тем же интерфейсом, что и реальные типы, но которые могут быт...

Основные различия между Flexbox и CSS Grid

Стоит помнить  —  если вы имеете дело с неудачно разработанным API, предпочтительнее использовать mock-объекты. Пример кода. Что такое mock- и fake-объекты Определения можно найти во множестве статей в сети. Я просто упомяну их здесь для полноты картины. Mock  —  это объекты, обладающие тем же интерфейсом, что и реальные типы, но которые могут быт...

Как написать хороший HTML & CSS код с помощью Webflow

Дизайнеры со всего мира часто и сами затрудняются ответить, что важнее  —  UI- или UX-дизайн. Мало кто воспринимает эти интерфейсы по отдельности и мало кто видит их как одно целое. Давайте попробуем разобраться! В дизайнерской индустрии существуют как UX-дизайнеры, так и UI-дизайнеры, и каждый из них выполняет свои обязанности. Вместо того чтобы ...

Решение проблемы с CSS :hover

В этом руководстве мы создадим собственный поисковый API электронной коммерции с поддержкой как eBay, так и Etsy без использования каких-либо внешних API. С помощью AutoScraper и Flask мы можем достичь этой цели менее чем за 20 строк Python кода для каждого сайта. Требования Установите необходимые библиотеки через pip: pip install -U autoscraper f...

Как увеличить производительность CSS-in-JS в 175 раз

Мне нравится удобство CSS-in-JS, особенно возможность совместного расположения стилей, но в некоторых деталях я не уверен: В том, что обязательно нужно использовать хешированные классы вместо классов пространств имён. А представьте, как может раздражать их присутствие в сторонних компонентах!В том, что применение логики в CSS всегда лучше или боле...

Медиа-запросы CSS: точки останова, типы устройств, стандартные разрешения и многое другое

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

Псевдоклассы CSS, на которые стоит обратить внимание

Согласно определению из «CSS: The Definitive Guide» Эрика Майера (Eric Meyer) и Эстеля Вейля (Estelle Weyl): С помощью (псевдо) селекторов можно назначать стили так называемым фантомным классам, которые определяются состоянием определенных элементов, шаблонами разметки в документе или даже состоянием самого документа. В этой статье мы оз...

Точки останова CSS в Material UI

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

Как с помощью чистого CSS создать красивую анимацию загрузки для приложения

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

Что такое Tailwind CSS и как внедрить его на сайт или в React-приложение?

CSS может стать вашим лучшим другом или злейшим врагом. Несмотря на то, что он невероятно гибкий, а результаты его применения порой кажутся магией, без должного внимания он может выйти из-под контроля, как и любой другой код. Как же Taiwind CSS помогает в управлении стилями? Что такое Tailwind? Tailwind CSS — это “utility-first” (“полезность прежд...

Чего я не знал о CSS, а стоило бы

Делать сайты я учился по-старомодному: открывал исходный код и пытался повторить то, что видел. А по тому, чего не видел (PHP/MySQL), прочёл какую-то случайно попавшуюся книгу. Так всё и шло. Это было в 1999 году, когда можно было писать что-то вроде <font size=”4" color=”#000000">, а DHTML приобретал популярность. Когда пришла пора CSS, мой...

Ускорьте создание пиксельной графики в 10 раз ✨💫

Эта статья будет кратка и проста, чтобы вы могли сразу взять на вооружение эту технику и начать рисовать изумительную пиксельную графику. До знакомства с данной методикой я создавал такую графику при помощи box-shadow и это было мучительно  —  простое перекопирование значений с последующим их изменением снова и снова. На случай если вам не знаком...