Год назад мы с другом делали интернет‑магазин для его девушки. Она модель, и у неё была совместная линейка одежды с одним брендом. Нужны были каталог, лукбук, страница о ней и промо‑баннеры под каждую новую коллекцию. Каталог сделали на WooCommerce, а главную, лукбук и баннеры я сверстал в Elementor. Чтобы было быстрее, вставил вёрстку в HTML‑виджеты, подогнал стили, и всё выглядело ровно так, как задумывали. Передал доступы и забыл.
Рубрика «flexbox»
Моя история с Elementor: 9 вещей, которые я понял после одного сломанного сайта
2026-10-02 в 9:41, admin, рубрики: css, elementor, flexbox, wordpress, верстка, конструктор сайтовСтарый и новый CSS. История веб-дизайна
2020-02-25 в 2:19, admin, рубрики: Acid2, css, DHTML, flexbox, html, html5, imagemap, Internet Explorer 3, jquery, Netscape Navigator, SGML, w3c, WHATWG, xhtml, XML, веб-дизайн, веб-стандарты, Разработка веб-сайтовЯ увлеклась веб-дизайном и разработкой в конце 90-х. Чёрт побери, как это было давно. И как это было ужасно. Я имею в виду, что сделать сайт и опубликовать его представляло хитрое дело, а заказчиков можно было пересчитать по пальцам.
Мне казалось, что большинство разработчиков помнят те дни или хотя бы следующее десятилетие, но нет. Недавно мне попался на глаза твит, автор которого удивлялся технике простановки закруглённых углов до появления border-radius (сделать отдельную картинку для каждого закруглённого угла и точно её позиционировать). Я до сих пор помню, как мы затаив дыхание ждали, когда border-radius станет стандартом и с него уберут префикс в браузерах.
С другой стороны, многие лишь слегка попробовали веб-дизайн в старые времена и полагают, что с тех пор ничего не изменилось.
Эта статья для всех. История CSS и веб-дизайна, как я её помню.
Читать полностью »
Нетривиальная расстановка элементов на flexbox без media-запросов
2019-10-26 в 6:54, admin, рубрики: css, css3, flexbox, htmlКазалось бы, какой пост может быть о CSS Flexbox в 2019 году? Верстальщики уже несколько лет активно используют данную технологию, и все тайны должны быть разгаданы.
Однако, недавно у меня возникло стойкое ощущение, что нужно поделиться одним нетривиальным и, на мой взгляд, полезным приёмом, связанным с flexbox. Написать пост побудил тот факт, что ни один знакомый (из учеников, верстальщиков и просто людей, близких к web), не смог решить задачку, связанную с flexbox, хотя на это нужно всего 4-6 строк.
Читать полностью »
Полное руководство по CSS flexbox. Это полное руководство объясняет все о flexbox, сосредотачиваясь на всех возможных свойствах для родительского элемента (контейнер flex) и дочерних элементов (элементы flex). Оно также включает в себя историю, демонстрации, шаблоны и таблицу поддержки браузеров.
Читать полностью »
Переполнение и потеря данных в CSS
2019-09-08 в 20:06, admin, рубрики: .net, css, flexbox, overflow, Разработка веб-сайтов
В этой статье Рейчел Эндрю рассматривает ситуации, в которых вы можете столкнуться с переполнением при верстке сайтов, и объясняет, как развивался CSS, чтобы создавать более эффективные методы разметки в ситуациях, когда объёмы контента заранее неизвестны
Читать полностью »
Полагаю многим известна технология css верстки, как flexbox. По данной технологии написано не мало пособий и руководств. Она проста, значительно облегчает разработку сетки web-проекта и поддерживается многими современными браузерами. Это делает её популярной технологией среди web-разработчиков.
Изучая новые для меня концепции, я стараюсь максимально сжато, но между тем информативно выразить изучаемое в графическом виде, отношении одних сущностей к другим, их взаимосвязь и поведение. И flexbox не стала для меня исключением. За несколько вечеров я собрал для себя обзорную «шпаргалку» по технологии, которая долгое время висела у меня на стене перед глазами, пока я не запомнил все основные моменты по технологии.
Читать полностью »
Что происходит при создании контейнера Flexbox?
2018-10-06 в 15:31, admin, рубрики: css, flexbox, веб-дизайнЭто перевод статьи Rachel Andrew, являющейся одним из разработчиков спецификаций CSS.
В короткой серии статей я собираюсь потратить некоторое время на детальную распаковку Flexbox — точно так же, как я делала в прошлом с grid. Мы рассмотрим, для чего был разработан Flexbox, что он действительно делает хорошо, а когда мы не можем выбрать его в качестве способа компоновки.
В этой статье мы подробно рассмотрим, что на самом деле происходит при добавлении display: flex в вашу таблицу стилей.
Верстаем flex-календарик
2018-04-17 в 12:12, admin, рубрики: css, css3, flexbox, vue.js, vuejs, верстка сайтовИдет 2018 год, модные пацаны давно уже верстают на grid, а я все на третьем бутстрапе сижу с col-md кочерячусь, мельком поглядывая на четвертый.
Решил я, что это не дело, и стоит немного знания освежить, но у grid вроде как поддержка пока хромает, а вот flex технологию уже даже утюги поддерживают.
Вот и решил его освоить. И процессом усвоения с вами поделится. В общем, будем верстать календарик на весь год.
Всё простое опять стало сложным
2018-03-07 в 12:34, admin, рубрики: css, css grid, flexbox, html, адаптивный веб-дизайн, вдумчивость, веб-дизайн, кролик, неторопливость, Разработка веб-сайтов, сложность, спагетти-код, фреймворки, черепахаЭто выступление состоялась 12 октября 2017 года на конференции Mirror Conf в Браге (Португалия) и ещё раз 9 февраля 2018 года на Awwwards Conference в Берлине.
Этим летом после лекции на веб-конференции у меня состоялась увлекательная беседа с молодой студенткой, которая изучает цифровой дизайн. Было интересно сравнить наши карьерные пути. У меня пятнадцать лет опыта дизайна для веб-клиентов, у неё — один год, но каким-то образом мы оказались в одинаковой ситуации: мы наслаждались работой, но были совершенно дезориентированы и обескуражены быстро растущей сложностью всего вокруг. Что за ерунда произошла? (Конечно, это риторический вопрос).
Для нас обоих стало облегчением взаимно признаться в разочаровании и замешательстве. И мне стало интересно — эта какая-то смешная ситуация или тут серьёзная тема. Ни у кого из нас не было ответа, но спустя немного времени мне стало понятно, что мы оба должны сделать. Я бы хотел сегодня продолжить этот разговор и попытаться сформулировать свою точку зрения по поводу этой неразберихи и во что она нам обходится.
Читать полностью »
Кому нужны флексы
2017-10-06 в 15:00, admin, рубрики: css, css3, flexbox, html, html5, Блог компании HTML Academy, веб-верстка, верстка, для начинающих, для новичков, Разработка веб-сайтов, флексбокс, флексы
Кому нужны флексы, если на них не делают сайты?
Делают, 12% сайтов уже используют флексы. А нужны они всем нам, чтобы было удобнее верстать.