На протяжении многих лет я использовал BEM-подобный подход для написания CSS. Но я решил пойти другим путём — использовать семантические классы. В итоге получилось гораздо меньше CSS, а писать его стало проще и предсказуемее. Сегодня я хочу быстро рассказать, как…
Привет! Ссылка на макет в фигме: https://www.figma.com/community/file/1029253733524328378 Есть интересный макет в Figma для верстки? Скидывай, разберем! GitHub: https://github.com/Aleksandr175/landing-remind-me-app/tree/4-mobile-styles
Привет! Ссылка на макет в фигме: https://www.figma.com/community/file/1029253733524328378 Есть интересный макет в Figma для верстки? Скидывай, разберем! GitHub: https://github.com/Aleksandr175/landing-remind-me-app/tree/3-slider
Привет! Ссылка на макет в фигме: https://www.figma.com/community/file/1029253733524328378 Есть интересный макет в Figma для верстки? Скидывай, разберем! GitHub: https://github.com/Aleksandr175/landing-remind-me-app/tree/2-main-screen-advantages
Привет! Стартую новую рубрику: livecoding макетов из фигмы. Здесь я буду показывать, как я верстаю, как я принимаю решения о том, как сделать тот или иной элемент на странице и в целом показываю, как я работаю с версткой, с чего…
Всем привет! Всех поздравляю с новым 2021 годом! Желаю, чтобы он был намного лучше, чем 2020 🙂 А в сегодняшнем видео мы сделаем простенькую анимацию снежинок. Создадим новогоднее настроение! Спасибо за просмотр! Github: https://github.com/Aleksandr175/showrain
Всем привет! Сегодня узнаем, как можно с помощью CSS скрыть полосу прокрутки. body { overflow: hidden; /* Скрываем scrollbars */ } Чтобы скрыть только вертикальную или только горизонтальную полосу прокрутки, можно использовать: body { overflow-y: hidden; /* Скрываем вертикальный scrollbar…
Всем привет! Добавил новое видео. Посмотрим, как создаются анимации на CSS3 на примере простой иконки. Под видео продублирую код. Наш HTML для иконки и анимации выглядит следующим образом: <body> <div class="icon-container"> <div class="icon"></div> <div class="circle-left"></div> <div class="circle-right"></div> </div> </body>…
Добрый день! В сегодняшнем видео мы посмотрим на псевдокласс focus-visible. Разберем, как он работает и в каких случаях пригодится. Приятного просмотра!
Всем привет! В процессе верстки часто возникает необходимость правильно задать скругление углов, тени, градиент. Руками это делать долго и неудобно. Но некоторые умельцы облегчили нам жизнь и сделали онлайн-генераторы, которые сформируют необходимый нам CSS код без лишних проблем. В этой…
CSS с каждый днем становится все мощнее, появляется множество новых особенностей, с помощью которых создавать пользовательские интерфейсы намного легче. И это замечательно! Одной из таких фичей в CSS являются фильтры. Давайте попробуем с помощью фильтров поработать с SVG изображениями. …
Добрый день, уважаемые читатели! Мне часто пишут отзывы типа: «Больше! Еще больше статей по адаптивной верстке!». Так вот, сегодня будет именно такая статья. И сегодня мы разберем, как сделать несложное адаптивное меню. Перед тем, как приступить, рекомендую прочитать статью по…
В больших проектах при разрастании CSS файлов получается не очень радостная ситуация. Из-за большого количества правил возникает трудность с тем, чтобы определить, какие стили должны быть применены к конкретному элементу. Какие-то стили наследуется, что-то определено через целую цепочку всевозможных селекторов,…
Если ваш код чистый, понятный и последовательный, то вам не о чем беспокоиться. Но есть один очень противоречивый метод написания кода – camel case. И если вы его используете – эта статья для вас. Синтаксис CSS использует дефисы…
Добрый день, уважаемые читатели! Сегодня я хочу рассказать вам об одной интересной особенности поведения em значений для font-size в IE9+. Недавно я правил баг на одном из сайтов, связанный с тем, что размер шрифта у псевдоэлемента :before был в IE9+…
Добрый день, уважаемые читатели! Понимание, как происходит collapsing (схлопывание) margin-ов в CSS, может сделать жизнь web-разработчику намного легче. Давайте посмотрим, как работает схлопывание margin-ов в CSS. Горизонтальный и вертикальный Margin Collapsing Горизонтальные margin-ы никогда не схлопываются. А вот с вертикальными…
Доброго времени суток, уважаемые читатели! Взглянув на результат работы в статьях: Начинаем осваивать адаптивную верстку и Адаптивная верстка: media queries, я решил, что стоит немного украсить переходы между разрешениями шаблона. Сейчас мы наблюдаем очень резкое перестроение фотографий при изменении окна браузера: страница….
Добрый день, уважаемые читатели! Сегодня я бы хотел продолжить обсуждение адаптивной верстки. В прошлой статье мы обсудили, как сделать простенький адаптивный дизайн. После создания мы выявили 1 большой минус: На небольших экранах изображения будут слишком мелкими. Как решить проблему?…
Здравствуйте, уважаемые читатели! Наконец-то я решил начать освоение адаптивной верстки. Сегодняшняя статья будет небольшим введением в новое направление развития web-дизайна. Итак, что такое адаптивная верстка? Википедия говорит: «Адаптивный веб-дизайн (англ. Responsive web design) — дизайн веб-страниц, обеспечивающий отличное отображение…
Псевдо-элемент ::selection появился в HTML5. ::selection определяет стиль подсветки выбранного текста. Для того, чтобы данный псевдо-элемент был кроссбраузерным, необходимо определить его следующим образом: ::-moz-selection { color: white; background: hotpink; } ::selection { color: white; background: hotpink; } Все браузеры, кроме…
