Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Рубрика «css» - 46
Дайджест свежих материалов из мира фронтенда за последнюю неделю №340 (19 — 25 ноября 2018)
2018-11-25 в 21:59, admin, рубрики: angular, css, ES6, html, html5, javascript, JS, React, vue, браузеры, дайджест, подкасты, Разработка веб-сайтов, ссылки, фронтендПолагаю многим известна технология css верстки, как flexbox. По данной технологии написано не мало пособий и руководств. Она проста, значительно облегчает разработку сетки web-проекта и поддерживается многими современными браузерами. Это делает её популярной технологией среди web-разработчиков.
Изучая новые для меня концепции, я стараюсь максимально сжато, но между тем информативно выразить изучаемое в графическом виде, отношении одних сущностей к другим, их взаимосвязь и поведение. И flexbox не стала для меня исключением. За несколько вечеров я собрал для себя обзорную «шпаргалку» по технологии, которая долгое время висела у меня на стене перед глазами, пока я не запомнил все основные моменты по технологии.
Читать полностью »
Готовим идеальный CSS
2018-11-23 в 7:00, admin, рубрики: css, javascript, React, ReactJS, vue, vuejs, webpack, webpack 4, Блог компании Constanta, Клиентская оптимизация, минификацияПривет!
Не так давно я понял, что работа с CSS во всех моих приложениях — это боль для разработчика и пользователя.
Под катом лежат мои проблемы, куча странного кода и подводные камни на пути к правильной работе со стилями.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №339 (12 — 18 ноября 2018)
2018-11-18 в 21:56, admin, рубрики: angular, css, ES6, html, html5, javascript, JS, React, vue, браузеры, дайджест, подкасты, Разработка веб-сайтов, ссылки, фронтендПредлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Меню для меню, гриды или Бутстрап, целесообразность удобства
2018-11-14 в 9:46, admin, рубрики: a11y, Bootstrap, css, html, pepelsbey, w3c, WHATWG, YouTube, веб-дизайн, доступность, Разработка веб-сайтов, СемантикаПривет! Давно я сюда ничего не писал, со времён моего золотого поста про переход Opera на WebKit прошло уже пять лет. Но тут появился повод: завёл себе блог на Ютубе. Чтобы понять, зачем и что это такое — смотрите пилот. Если коротко: чтобы разбирать сайты и отвечать на вопросы. А сейчас перед вами 9-й выпуск с ответами на вопросы. Под катом подробности, ссылки, почта для связи и спойлер с остальными видео. Если меня здесь не съедят живьём — буду продолжать постить сюда раз в неделю новые.
Рассылай и властвуй: инструменты для создания и тестирования рассылки
2018-11-14 в 5:44, admin, рубрики: css, email on acid, Foundation, html, litmus, markup, mjml, outlook, Блог компании 2ГИС, Верстка писем, интерфейсы
Верстать электронные письма — это боль. Верстать и тестировать адаптивные письма с интерактивом (например, с формами и слайдерами) — боль в квадрате. Однако, не всё не так плохо, если выбрать правильные инструменты. В статье расскажу об email-фреймворках — MJML и Foundation for Emails — и моих любимых ресурсах для тестирования рассылки — Litmus и Email On Acid.
Читать полностью »
Дайджест свежих материалов из мира фронтенда за последнюю неделю №338 (5 — 11 ноября 2018)
2018-11-11 в 22:31, admin, рубрики: angular, css, ES6, html, html5, javascript, JS, React, vue, Блог компании Zfort Group, браузеры, дайджест, подкасты, Разработка веб-сайтов, ссылки, фронтендПредлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Создание адаптивных изображений
2018-11-09 в 9:03, admin, рубрики: css, svg, XML, Блог компании Поиск VPS, веб-дизайн, графический дизайнВ Интернете найдется немало статей, посвященных адаптивным логотипам. Наиболее популярным примером является сайт Responsive Logos, который показывает различные варианты известных логотипов для разных размеров экрана. Когда я впервые увидел это, я подумал, что это не более, чем просто ловкий трюк. В конце концов, это просто div для спрайта большого изображения в качестве фона. Так было до того момента, пока я не услышал доклад на Smashing Conference от MikeRiethmuller под названием «За пределами медиазапросов». Кроме того, я настоятельно рекомендую прочитать его же статью «Большой потенциал SVG».
Я узнал две вещи, которые меня потрясли:
- При использовании SVG вы можете отказаться от атрибута
viewBoxи установить новую систему координат на вложенных элементах SVG путем применения новогоviewBox. (Да, я знаю. Это звучит странно. Ниже я объясню все более подробно). - Когда вы используете медиазапросы внутри SVG-файлов, а затем вставляете изображение через тег img или в качестве фонового изображения CSS, медиазапросы привязаны к ширине изображения. Практически такое же поведение, как и при использовании контейнерных запросов.
Советы по CSS, которые вы вряд ли найдете в самоучителях
2018-11-08 в 9:20, admin, рубрики: css, html, Блог компании Поиск VPS, веб-дизайн, Разработка веб-сайтовСуществуют определенные правила CSS, которые можно найти в любом учебнике. Но есть также правила CSS, которые вы не найдете в пособиях, но столкнетесь с ними, как только начнете писать код. Я уверен, вы уже разобрались в том, как выровнять элемент по вертикали или создать сложный макет. Мы не будем об этом говорить.
Наконец, есть правила CSS, которые вы вряд ли видели в руководствах, и о которых можно просто не знать. На протяжении некоторого времени я собирал эти советы и сейчас решил написать статью в надежде, что они будут полезны.
Ниже изложено то, чему руководства по CSS меня не научили.
Читать полностью »
Как я создал меняющую настроения анимацию с помощью масок CSS
2018-11-05 в 18:07, admin, рубрики: css, html, masking, Блог компании Поиск VPS, веб-дизайн, Разработка веб-сайтовПомните мультфильмы, которые мы смотрели в детстве? В то время они были олицетворением анимации. Сейчас анимация – это не только мультфильмы, мы встречаем ее почти каждый день, проверяя телефон или используя любое устройство, имеющее экран.
Сегодня анимация используется не только для привлечения внимания, но и для улучшения взаимодействия с пользователем, облегчения навигации. В любом хорошем дизайне анимацию добавляют таким образом, чтобы она сочеталась с общей концепцией, создавая тем самым удобный пользовательский интерфейс.
В этой статье мы создадим простую анимацию лица с разными выражениями, а в процессе узнаем немного о CSS.
Читать полностью »