От автора: это руководство предназначено для людей, которые слышали о css-grid и хотят узнать, что она может, или, возможно, не уверены, как ввести ее в свой рабочий процесс. Также статья будет вам интересна, если вы оттачиваете навыки верстки, не прибегая к фреймворкам, таким как Bootstrap. Базовые знания о css — это хорошо, но вы должны […]
От автора: Firefox 71 — увлекательный релиз для тех, кто интересуется CSS Layout. Хотя я очень рада, что в Firefox стала доступна подсетка, есть еще одно свойство, за которым я следила. В Firefox 71 реализовано column-span из многостолбцовой компоновки. В этом посте я объясню, что это такое, и немного о продвижении спецификации Multiple-column Layout. Многостолбцовый […]
От автора: в данном уроке вы найдете реализацию интересного варианта меню, которое изначально скрыто, а при клике по кнопке, открывающей меню, оно появляется с красивым анимационным эффектом и показывается на весь экран. Данное меню идеально подойдет …
От автора: в мире веб-разработки всегда наблюдался разрыв при переходоме от дизайна к разработке. Амбициозные дизайнеры хотят, чтобы конечный результат их усилий выглядел уникальным и красивым (и соответствовал их первоначальному видению), тогда как многие разработчики находят большую ценность в результате, который является последовательным, надежным и стабильным (и легко кодируемым). Эта динамика может привести к напряженности […]
От автора: в предлагаемом уроке будет показан интересный эффект, который может подойти для шапки сайта или какой-то из его секций. Суть эффекта заключается в размещении нескольких изображений в секции и показе только части каждого из изображений. Другая часть при этом скрывается при помощи свойства clip-path. При наведении мыши на часть изображения – будет показана полная […]
От автора: псевдо-элементы используются уже в течение длительного времени. Тем не менее, есть некоторые случаи использования, которые, как мне кажется, не полностью известны разработчикам. Я написал эту статью, чтобы пролить свет на них, и чтобы их можно было использовать больше. Эффект «наведение родитель-потомок» Поскольку псевдо-элемент принадлежит своему родительскому элементу, для этого есть несколько необычных вариантов […]
От автора: используя изображения, мы можем создать атмосферу, вызвать счастье, улыбку, грусть или любую другую эмоцию. С помощью изображений мы можем многое показать, а также многое рассказать; именно поэтому изображения так широко используются на сайтах и в приложениях. Дизайнеры заботятся о том, как пользователи будут воспринимать сайт и какие эмоции он будет вызывать. Графические дизайнеры […]
Хотя мы свыклись с «вечнозеленой», безверсионной природой CSS, иногда хочется каких-то ориентиров. Всё-таки, как ни крути, CSS сегодня, когда во всех основных движках доступны гриды с CSS-переменными — совсем не то же самое, что CSS в каком-нибудь 2012-м, когда даже…
ДАЛЕЕ
От автора: когда мы переходим в 2020 год, у Front-end разработчиков появилась еще одна отличная возможность в наборе функций веб-приложений, с которым нам приходится сталкиваться. Адаптивность для мобильных устройств, планшетов и настольных ПК Поддержка различными браузерами (устаревшими и другими) Проблемы доступности Прогрессивные веб-приложения SEO Оптимизация производительности т. д. и т. п. Теперь у нас […]
От автора: постоянное обновление в соответствии с последними тенденциями является обязательным условием для успеха сайта, и поэтому важно определять, что помогает или мешает развитию вашего сайта. Создание идеального веб-сайта полностью зависит от навыков проектирования, потому что веб-сайт — это искусство, сочетающее в себе технические аспекты. Поэтому уникальные макеты, сложные анимации и другие микро-взаимодействия, могут изменить […]
От автора: каждый хочет использовать CSS Grid. Речь идет о новом методе верстки, который существенно изменит способ разработки контента в Вебе. С помощью CSS Grid у вас есть возможность размещать контент на веб-сайте в беспрецедентной форме и динамически сортировать его по областям просмотра. Этот метод появился, поскольку многие авторы веб-сайтов имели слишком ограниченные возможности работы […]
От автора: если вам нравится читать примечания к релизам, то вы, возможно, заметили в примечаниях Firefox 70 строку, относящуюся к реализации синтаксиса с двумя значениями для свойства CSS display. Или, может быть, вы встретили упоминание о нем во вчерашнем обзоре Firefox 70. Сегодня я объясню, что это значит, и почему понимание этого синтаксиса важно, несмотря […]
От автора: сегодня я собираюсь познакомить вас с некоторыми инструментами CSS, о которых вы, возможно, не знали раньше. Эти инструменты представляют собой единицы измерения, например, пиксели или em, но вполне возможно, что о некоторых вы никогда не слышали! Давайте начнем. Работая с методами CSS, которые мы хорошо знаем, можно застрять, когда появляются новые проблемы. Поскольку […]
От автора: в этом супер-коротком руководстве мы рассмотрим процесс создания всплывающего окна обратной связи. Мы не будем использовать JavaScript, на самом деле мы создадим форму, воспользовавшись «техникой хака чек-боксов CSS». Звучит интересно? Вот что мы будем создавать: 1. Начинаем с разметки страницы Мы начнем с чек-бокса вместе с его меткой и формой. В форме мы […]
От автора: я постоянный эксперт Cloud Four по кругам. Я не планировал им быть. Некоторое время назад мы работали над проектом, в котором было много кругов: круглые контейнеры, круглые миниатюры, круглые кнопки. И сначала я стал парнем, с которым можно поговорить, если у вас возникли проблемы с кругами и CSS. Но я открою вам секрет: […]
От автора: привязка прокрутки является популярной функцией уже много лет. Она часто используется для создания каруселей и галерей изображений. Когда она реализовано плохо, это дает разочаровывающий опыт пользователя. Термин «хайджекинг прокрутки» часто используется для описания веб-сайтов, которые управляют работой прокрутки с помощью полосы прокрутки по умолчанию. Однако, если все сделано правильно, это может обеспечить хороший […]
От автора: недавно моему сыну было поручено в течение недели присматривать за своим плюшевым мишкой на уроках дошкольного образования, и он должен был придумывать для него приключения и добавить свои воспоминания в альбом. Мне очень понравилось создавать этот макет альбома, и это заставило меня задуматься о том, как бы я создал что-то подобное с помощью […]
От автора: я наслаждаюсь очень скучными CSS-вещами — честно говоря, возможно, гораздо больше, чем должен бы. Одна вещь, на которую я, вероятно, потратил слишком много времени, это сброс CSS. В современную эпоху веб-разработки нам на самом деле не нужен сложный сброс или даже сброс вообще, потому что проблемы совместимости CSS с браузером возникают гораздо реже, […]
От автора: пользовательские свойства CSS, также известные как переменные CSS, позволяют вам определять собственные свойства и использовать их значения в CSS. Несмотря на то, что они невероятно полезны, у них есть недостатки, из-за которых с ними сложно работать: они могут принимать любое значение, поэтому могут быть случайно переопределены чем-то неожиданным, они всегда наследуют свои значения […]
Поводом для этой заметки стал недавний твит нашего давнего знакомого Зака Лезермана, лучшего в мире знатока веб-шрифтов: Сегодня у меня возникла потребность в условных операциях с кастомными свойствами CSS. flex-basis: (—my-variable ? 0 : 4px) Я не смог сделать это…
ДАЛЕЕ
От автора: любой, кто хоть немного занимался созданием веб-сайтов, знает, что div — это важный строительный блок для управления макетами. HTML5 представил новые семантические элементы, и хотя они являются фантастическим дополнением к языку, они немного похожи на гарнир в супе div. С grid нам больше не нужно полагаться на div, чтобы создать структуру страницы или […]
От автора: хотя плоские, минимальные интерфейсы были в моде в течение большей части десятилетия, чисто прямоугольные кнопки не так распространены, как вы думаете. Такие дизайнеры, как я, часто «закругляют» углы, которые могут сделать интерактивный элемент менее привлекательным для клика. Иногда мы округляем их чуть-чуть, смягчая очертание, но не теряя прямоугольника. Но в других случаях мы […]
От автора: я помню, как впервые изучал CSS, и как я был рад узнать о display float и inline, которые позволяют размещать элементы, как нам нужно. Интересно, как бы я отреагировал, если бы в то время была доступна система двумерного макета? На самом деле, даже сейчас я взволнован этим, потому что это меняет все: как […]
Первое мое общение с HTML и CSS было 10 лет назад, еще в школе, когда у меня только появился интернет, и я понял что тоже хочу делать странички, которые сможет увидеть весь мир. С тех пор у меня есть как минимум 5 полных лет опыта разработки сайтов по-взрослому. Сейчас я могу без лишней скромности сказать, что сверстал я уже пару сотен сайтов, большинство из которых, как ни странно, совершенно не совпадают с моими текущими требованиями к верстке.
Мы собрали 34 популярных технологий и инструментов frontend-разработчика для начинающих.
В этом списке мы собрали для вас лучшие ресурсы с примерами CSS3 техник, а также демо-сайты различных разработчиков, раскрывающие се богатство CSS.
На днях я подготовила README для одного проекта, который, надеюсь, будет интересен и поучителен для других разработчиков. Так вот, когда я его писала, я поняла, что несколько лет назад испугалась бы до смерти, если бы наткнулась на нечто подобное, со всякими упоминаниями о Node и его пакетном менеджере, системах Homebrew и Git, всевозможных тестах, тестовых и финальных сборках.
100 полезных приемов, лучших практик и бесплатных советов по HTML, CSS и JavaScript для начинающих и продолжающих frontend-разработчиков.
От автора: закрепление элементов, когда пользователь прокручивает страницу до определенной точки, является распространенной моделью в современном веб-дизайне. Вы видите, что она применяется для верхней панели навигации, боковой панели, ссылок общего доступа или, возможно, рекламных блоков; сохраняя элемент видимым в окне просмотра при прокрутке. Исторически для этого нам нужен был JavaScript. Тем не менее, липкое поведение […]
Канал автора: Online Tutorials
Свежие комментарии