MaxGraph - сайты как страсть

В нашем мире, насыщенном технологиями, с каждым днем появляются новые устройства, которые помогают нам вести более здоровый образ жизни и достигать спортивных целей. От мониторов активности до умных трекеров сна, современные гаджеты предлагают широкий спектр функций для поддержания здоровья и повышения эффективности тренировок. В этой статье рассмотрим топ-5 полезных гаджетов для здоровья и спорта. Умные часы и фитнес-трекеры Пожалуй, самым популярным и доступным для всех гаджетом является фитнес-трекер...

Виртуальная (VR) и дополненная (AR) реальность — технологии, которые постепенно проникли в нашу жизнь, открыв новые способы взаимодействия с окружающим миром. В этой статье мы рассмотрим, как виртуальная и дополненная реальности трансформируют учебный процесс, совершают революцию в медицине, расширяют горизонты в развлекательной индустрии и меняют традиционные рамки во многих других областях жизни. Для начала давайте разберемся подробнее, что из себя представляют данные технологии. Виртуальная реальность...

Привет! Решил запилить пост, в котором соберу все полезные ресурсы, к которым я так или иначе имею отношение. Итак, очевидно, YouTube-канал "Сайты как страсть" - https://www.youtube.com/c/maxgraph (около 17500 подписчиков) Канал здесь, в Яндекс.Дзен - https://www.zen.yandex.ru/maxgraph (данный канал дублирует контент с YouTube) (около 400 подписчиков) Телеграм-канал для удобства оповещения о новостях - https://t.me/maxgraph (около 1100 подписчиков) Телеграм-чат верстальщиков - https://t.me/maxgraph_chat (около 1000 участников) Мой блог, различные полезные фишки для верстки - https://blog...

Привет! в данной серии видео я расскажу все, что знаю о фрилансе в свободной форме. Будут и методы поиска клиентов, и расчет своей работы, и еще много всего. Поехали!

Привет! В свое время я немало попарился с этой темой, когда нужно было сделать svg-карту. Конечно, я покажу в статье чуть более простой вариант использования, но тем не менее вполне себе рабочий. Поехали! SVG Map — довольно часто используемая фича для сайтов. Необязательно это карта страны\города. Есть еще сайты с использованием svg-дома, где можно выбирать этажи, и т.д. В моем случае это карта России. Посмотреть реальный пример можно тут: Русский металл. Суть была такая — нужно было сделать целую структуру карт, т...

Привет! В четвертом выпуске CSS Magic расскажу, как сделать красивый блюр эффект для карточки. Поехали! И так, сегодня мы будем делать блюр-эффект. Вот такого типа: Сделать такое можно вполне несложно с помощью filter: blur(). Но, конечно, не все так просто :) Начнем с разметки: HTML <div class="block block--blur">   <div class="block__man" id="superman">     <figure>       <img class="lazy lazy-hidden" src="//blog.maxgraph.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder...

Для чего нужна эта пресловутая «полоска cookie»? Очень просто. Она требуется законодательством, и человек, заходя впервые на сайт, должен знать, что тут используются какие-либо его данные, и они хранятся в cookie...

Привет! Сегодня рассмотрим, как правильно размещать svg-иконки на странице Inline-методом. Рассмотрим, как быть, когда валидатор ругается на одинаковые id. Поехали! Итак, как вставить svg в html. Ну, на самом деле все довольно просто. Если Вы хотите вставить — берете и вставляете. <div class="item">   <div class="item__icon">     <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 611.989 611.988">       <g>         <g id="Wi-Fi">           <g>             <path d="M305...

Привет! Сегодня покажу, как сделать интересный эффект наведения для меню (ну или для любого другого текста). Получилось весьма интересно, данный эффект у меня и на блоге, и на сайте. Смотрим! Этот красивый hover-эффект я сам где-то нашел и он мне весьма понравился. Теперь же хочу научить ему Вас. В целом, все несложно и работает через псевдоэлемент и overflow. Разметка <div class="main__menu">   <div class="container">     <nav>       <ul>         <li><a href="#"><span data-text="HTML/CSS"></span>HTML</a></li>  ...

Приветствую! Сегодня хочется рассмотреть самые сложные темы, с которыми сталкиваются начинающие верстальщики, и не сразу понимают, как с ними быть. Тут для примера могу взять хотя бы своих студентов со Skillbox. Поехали! Вообще верстку можно подразделять на уйму разных тем, но я затрону в статье самые основные (самые непростые темы). Порядок будет не по важности, а просто любой. Классы или id? Одна из самых частых проблем — использование классов или id. Часто начинающие верстальщики видят что-то про id и начинают его использовать где не надо...

Привет! Решил начать вести еще и Яндекс.Дзен. И начну его вести с самой популярной статьи в своем блоге - о создании адаптивной таблицы на css. В наше время таблицы, слава богу, используются довольно редко. Но там, где в макете реально таблица - конечно нужно использовать ее. И сегодня я покажу, как именно сделать ее адаптивной на телефонах\маленьких планшетах. Хотя там вы сможете уже для себя подстроить как хотите данный метод. Итак, для начала создаем разметку. Она вполне себе тривиальная (не переживайте если не очень хорошо ее видно - в конце статьи будет ссылка на codepen)...