Те из верстальщиков кто часто клепает формы регистрации или обратной связи обязательно столкнутся с задачей по выводу множественного выбора результатов - multiselect. К сожалению, не все элементы тега <select>
все ещё можно из коробки стилизовать по желанию дизайнера. В этом маленьком уроке я хотел бы поделиться своим опытом решения данной проблемы на базе знания CSS и немного ванильного JS.
Увлеченный сайтодел
Три способа создания клякс с помощью CSS и SVG
Кляксы (Blob) - это гладкие, аморфные, желеобразные формы, обычно причудливые и забавные. Их можно использовать в качестве элементов иллюстраций и фоновых эффектов в сети.
Итак, как же они устроены? Разумеется, можно открыть какой-то графический редактор и сделайте их, верно? Конечно, это круто. Но мы пишем здесь о CSS финтах, и было бы гораздо интереснее посмотреть на возможности, которые нам дают CSS и SVG - двух наших любимых ингредиентов!
У нас есть несколько способов сделать кляксы. Давай проверим их.
Обходим проверку сертификата SSL
В этом кратком обзоре я хотел бы поделиться своим опытом, как отключить проверку SSL для тестовых сайтов, иначе говоря, как сделать HTTPS сайты доступными для тестирования на локальных машинах.
41 термин в дизайне, полезный для UX-исследователя
Работа с UX-дизайнерами и знакомство с их словарным запасом — это почти изучение нового языка. Давайте посмотрим на 41 часто используемый дизайнерский термин. Для лучшего взаимопонимания в команде.
Пришло время ленивой загрузки закадровых <iframe>
Нативная отложенная загрузка для изображений была добавлена в Chrome 76 через атрибут loading, а затем пришла и в Firefox. Мы рады сообщить, что встроенная отложенная загрузка для iframe теперь стандартизирована и также поддерживается в браузерах на основе Chrome и Chromium.
<iframe src="https://example.com"
loading="lazy"
width="600"
height="400"></iframe>
Встроенная lazy-loading загрузка iframe откладывает загрузку закадровых элементов iframe до тех пор, пока пользователь не прокрутит их рядом. Это сохраняет данные, ускоряет загрузку других частей страницы и уменьшает использование памяти.
Почему не надо удалять все элементы массива, переназначая его на [ ]?
Очень часто бывают моменты, когда мы хотим удалить все элементы массива, как вариант, у нас есть список задач, и мы хотим удалить все задачи одновременно.
Рассмотрим такой список элементов:
let items = ["tea", "coffee", "milk"];
Чтобы удалить все элементы из массива, мы устанавливаем его значение в пустой массив
items = [];
Это работает отлично, и вы обнаружите, что данный пример используют постоянно. Но с этим есть проблема ...
10 лучших расширений Chrome для дизайнеров
Как дизайнеры, мы почти всегда ищем новые советы, хитрости и инструменты, которые помогут ускорить и улучшить наш рабочий процесс. После нескольких месяцев тестирования расширений Chrome я составил список из 10 лучших расширений и плагинов для дизайнеров.
Якорная ссылка на протеине с анимацией
В статье речь пойдет о том, как подключать в web страницу объемные элементы анимации, и не поломать все и сразу.
Если вы очень переживаете за показатели Google Page Speed в разработке сайтов, и у вас подгорает за каждый лишний килобайт не стоит продолжать читать данную статью.
Тех же, кого не пугают большие размеры, и любит риск прошу под кат ;)
Исчерпывающий путеводитель по тегу iframe
Элемент iframe (сокращение от встроенного фрейма), вероятно, является одним из старейших тегов HTML и был представлен ещё в далеком 1997 году в HTML 4.01 Microsoft Internet Explorer.
Хотя все современные браузеры поддерживают данный тег, многие разработчики пишут бесконечные статьи, не советуя им пользоваться. Я считаю, что плохая репутация, которая сформировалась, около данного тега не должна мешать вам использовать его. У данного тега есть много хороших примеров применения. Кроме того, iframe не так сложно защитить, поэтому вам не придется беспокоиться о заражении компьютера вашего пользователя.
Чтобы помочь вам сформировать собственное мнение и отточить свои навыки разработчика, мы расскажем обо всем, что вам нужно знать об этом противоречивом теге.
Мы рассмотрим большинство функций, которые предоставляет элемент iframe, и поговорим о том, как их использовать, а также о том, как iframe может быть полезен для преодоления некоторых сложных ситуаций. Наконец, мы поговорим о том, как вы можете защитить свой iframe, чтобы избежать потенциальных уязвимостей.
Клади плитку эффективно ( Про CSS, SVG, pattern и другое)
Статья про ремонт квартиры, про эффективное использование графических ресурсов для современных устройств. От смарт часов до телевизоров на стену.
Сказ о том, как вставлять фоновые повторяющиеся изображения страниц, что бы всем было хорошо.
Ну, что готовы поиграть ..? Тогда погнали
А есть ли случайные числа в CSS?
CSS позволяет создавать динамические макеты и интерфейсы в Интернете, но как язык разметки он является статическим — после установки значения его нельзя изменить. Идея случайности не обсуждается. Генерация случайных чисел во время выполнения — это территория JavaScript, а не CSS.
Или нет? Если мы учтем небольшое взаимодействие с пользователем, мы на самом деле можем генерировать некоторую степень случайности в CSS. Давайте взглянем!
Figma — простое решение для дизайнера, сложное решение для верстальщика
Если вы работаете в области web-разработки, то рано или поздно, вам суждено будет познакомиться с Figma. Смиритесь с этим фактом и начинайте изучать. Я же попробую описать данный продукт, с точки зрения повседневного пользователя.
Машинное обучение контент менеджера
Статья посвящается верстальщикам которым доводилось видеть вот такую иконку на сайтах, после того как он был отдан контент менеджерам на заполнение.
Разумеется, вы можете подойти к коллеге, и сказать, что он/она по невнимательности забыл поставить картинку, но ведь это же не наш метод.
Камень в огород дизайнера
*Статья предназначена для начинающих дизайнеров интернет-магазинов, а также frontend разработчикам способных как-то повлиять на оных. Если Вы не относитесь к этим категориям, можете не тратить свое время. Я предупредил.
“ Все ошибки которые допустил frontend разработчик ему вернутся при сборке сайта, все недоработки которые поленился прорисовать дизайнер будет додумывать верстальщик ”
Размещение иконок на странице сайта. Делать проще, поддерживать легче
Все должно быть изложено так просто, как только возможно, но не проще.А. Эйнштейн
Добрый день уважаемые разработчики. Довольно часто
HTML
<div class="bl_button__wrapp">
<div class="bl_button">
<i class="fa fa-bars" aria-hidden="true"></i>
<span class="bl_button__text">menu</span>
</div>
</div>
Информация
- В рейтинге
- Не участвует
- Откуда
- Киев, Киевская обл., Украина
- Дата рождения
- Зарегистрирован
- Активность