Гигантский логотип, 100% высоты экрана, выезжающий из-под предпоследнего блока… Смотришь и думаешь «где-то я это уже видел» 🤔
Да, это про футеры. Интересно, какие тренды придут на замену?)
Собрала несколько интересных идей, думаю какие-то детали можно взять себе на заметку, и не только с футеров:
1. theboncollectif.com — просто кайф, тут еще и на заголовки стоит обратить внимание
2. marcellocesiniarchitetto.com — продублировать первый экран? а почему бы и нет?)
3. workshophospitality.com — а тут дублируем меню) да просто очень стильный проект
4. fitsole.shop — анимация появления понравилась
5. lyon-beton.com — весь классный, ну и подвал тоже ничего
6. givingli.com — нестандартно, и появление лого создает объем
7. kozowood.com — выбор цветов, музыка, анимация. Местами есть впечатление, что некоторые блоки добавили уже со временем. Тем не менее, многое можно взять для себя
8. andermatt-realestate.ch — люблю такое)) вот вроде тоже эффект скрытого футера, но за счет предпоследнего блока выглядит не так, как у всех
Да, это про футеры. Интересно, какие тренды придут на замену?)
Собрала несколько интересных идей, думаю какие-то детали можно взять себе на заметку, и не только с футеров:
1. theboncollectif.com — просто кайф, тут еще и на заголовки стоит обратить внимание
2. marcellocesiniarchitetto.com — продублировать первый экран? а почему бы и нет?)
3. workshophospitality.com — а тут дублируем меню) да просто очень стильный проект
4. fitsole.shop — анимация появления понравилась
5. lyon-beton.com — весь классный, ну и подвал тоже ничего
6. givingli.com — нестандартно, и появление лого создает объем
7. kozowood.com — выбор цветов, музыка, анимация. Местами есть впечатление, что некоторые блоки добавили уже со временем. Тем не менее, многое можно взять для себя
8. andermatt-realestate.ch — люблю такое)) вот вроде тоже эффект скрытого футера, но за счет предпоследнего блока выглядит не так, как у всех
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥14👍4❤3
Рекомендую пройти всем 😌
Разберетесь с window и версткой в %, повысите уровень в дизайне и сетках, узнаете такие фишки, которые нигде не найдете больше. А еще на выходе получите крутой проект в портфолио и заряд мотивации 🔥
Свой сайт в примерах видеть очень приятно ❤️
Разберетесь с window и версткой в %, повысите уровень в дизайне и сетках, узнаете такие фишки, которые нигде не найдете больше. А еще на выходе получите крутой проект в портфолио и заряд мотивации 🔥
Свой сайт в примерах видеть очень приятно ❤️
❤6🔥3
Forwarded from Komandin®
This media is not supported in your browser
VIEW IN TELEGRAM
Привет! Сегодня у нас особенная подробка для вдохновения, а именно работы с интенсивов по резиновой верстке в Zero Block. А всё потому, что уже 6—7 июля будет 5й поток интенсива!
Подробнее об интенсиве и записаться — https://tilda.school/window-container
Всего за два дня вам полностью покорится верстка по window-container, благодаря которому вы сможете делать действительно адаптивные сайты обладающие особой эстетикой. Верстка по window избавит вас от необходимости создавать дополнительные брейкпоинты, которые работают только в идеальных условиях, а также избавит от проблем, присущих автоскейлу.
В этом интенсиве собрано всё, что я знаю о виндоу-контейнере, лайфхаки и подводные камни и весь мой опыт, которым я поделюсь с вами. Погрузимся не только в верстку, но и в дизайн, разберем сетки и композицию для верстки по виндоу. На выходе вы получите не только знания, но и кейс, который отлично дополнит ваше портфолио.
⋅ 2 дня — 6 и 7 июля
⋅ 2 больших концентрированных эфира
⋅ Полное погружение в тему
⋅ Море полезной информации и практика
⋅ Домашнее задание с разборами
Подробнее и записаться
А вот и лишь малая часть работ с прошедших интенсивов:
⋅ window-container.tilda.ws
⋅ window-container-2.tilda.ws
⋅ window-container-4.tilda.ws
⋅ airpods-max.tilda.ws
⋅ arch-burooo.tilda.ws
⋅ h800.tilda.ws
⋅ volvoxc40recharge.tilda.ws
⋅ wox.annihaus.ru
⋅ moon.loginova.me
#интенсив #windowcontainer
Подробнее об интенсиве и записаться — https://tilda.school/window-container
Всего за два дня вам полностью покорится верстка по window-container, благодаря которому вы сможете делать действительно адаптивные сайты обладающие особой эстетикой. Верстка по window избавит вас от необходимости создавать дополнительные брейкпоинты, которые работают только в идеальных условиях, а также избавит от проблем, присущих автоскейлу.
В этом интенсиве собрано всё, что я знаю о виндоу-контейнере, лайфхаки и подводные камни и весь мой опыт, которым я поделюсь с вами. Погрузимся не только в верстку, но и в дизайн, разберем сетки и композицию для верстки по виндоу. На выходе вы получите не только знания, но и кейс, который отлично дополнит ваше портфолио.
⋅ 2 дня — 6 и 7 июля
⋅ 2 больших концентрированных эфира
⋅ Полное погружение в тему
⋅ Море полезной информации и практика
⋅ Домашнее задание с разборами
Подробнее и записаться
А вот и лишь малая часть работ с прошедших интенсивов:
⋅ window-container.tilda.ws
⋅ window-container-2.tilda.ws
⋅ window-container-4.tilda.ws
⋅ airpods-max.tilda.ws
⋅ arch-burooo.tilda.ws
⋅ h800.tilda.ws
⋅ volvoxc40recharge.tilda.ws
⋅ wox.annihaus.ru
⋅ moon.loginova.me
#интенсив #windowcontainer
🔥7❤1👍1
Оказался самым сложным проектом, буквально выстраданный каждый блок) А казалось бы, такой небольшой.
Еще не хотелось много рассказывать. На мой взгляд, работы это сделают лучше)
Но в то же время, чтобы чем-то цеплял.
Теперь можно некоторое время спать спокойно, пока не захочется все снести и переделать 😂
alenaspirina.ru
...
Следующая задача — оформить кейсы 🙈 Которую тоже как обычно откладываешь «на потом»)
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤23🔥13👍4😱1
Media is too big
VIEW IN TELEGRAM
Google Font Previewer for Chrome
Расширение, с помощью которого можно «примерить» разные Google-шрифты на любой сайт.
Ну вдруг после верстки тебе или заказчику резко захотелось все поменять, а так посмотришь и поймешь – я все сделал правильно.или нет 😅
Полезно и чужие сайты так анализировать периодически.
Ссылка на скачивание
Расширение, с помощью которого можно «примерить» разные Google-шрифты на любой сайт.
Ну вдруг после верстки тебе или заказчику резко захотелось все поменять, а так посмотришь и поймешь – я все сделал правильно.
Полезно и чужие сайты так анализировать периодически.
Ссылка на скачивание
❤13🔥4
Media is too big
VIEW IN TELEGRAM
Хотела сделать просто пост с подборкой шрифтов на канал, но что-то пошло не так 😆
В процессе родилась идея заверстать страницу только с теми шрифтами, которые 100% будут актуальны и могут пригодиться в рабочей жизни. Поэтому хочу отбирать максимально тщательно, и только те, которые нравятся. Будет круто, если это окажется полезным и вам)
Что из этого получилось, можно посмотреть по ссылке:
alenaspirina.ru/fonts
PS. Добавила пока несколько, уж очень сильно хотелось поделиться) Планирую наполнять ее регулярно, насколько хватит времени.
В процессе родилась идея заверстать страницу только с теми шрифтами, которые 100% будут актуальны и могут пригодиться в рабочей жизни. Поэтому хочу отбирать максимально тщательно, и только те, которые нравятся. Будет круто, если это окажется полезным и вам)
Что из этого получилось, можно посмотреть по ссылке:
alenaspirina.ru/fonts
PS. Добавила пока несколько, уж очень сильно хотелось поделиться) Планирую наполнять ее регулярно, насколько хватит времени.
🔥24❤6
Получила свой заветный сертификат с курса «Стилизация стандартных блоков на Тильде с помощью CSS» от Максима Щукина @dsgnmax
Хочу написать небольшой отзыв, и посоветовать каждому, кто хочет разобраться наконец с CSS и научиться менять стандартные блоки под свои нужды.
• Макс очень понятно и доходчиво объясняет сложные вещи простым языком
• Формат коротких уроков не дает закопаться в информации и только подогревает интерес двигаться дальше
• К каждому уроку есть домашка и шпаргалка по коду – можешь сразу отработать на практике
• Блок про применение ChatGPT для генерации кодов – это вообще космос какой-то, открывает столько новых возможностей 🤯
• Про псевдоклассы и анимацию еще точно буду пересматривать несколько раз, хорошо, что доступ остается навсегда
Это был последний поток, но я уверена, скоро будет что-то не менее полезное. А пока, можно присоединиться к Закрытому клубу.😎
Хочу написать небольшой отзыв, и посоветовать каждому, кто хочет разобраться наконец с CSS и научиться менять стандартные блоки под свои нужды.
• Макс очень понятно и доходчиво объясняет сложные вещи простым языком
• Формат коротких уроков не дает закопаться в информации и только подогревает интерес двигаться дальше
• К каждому уроку есть домашка и шпаргалка по коду – можешь сразу отработать на практике
• Блок про применение ChatGPT для генерации кодов – это вообще космос какой-то, открывает столько новых возможностей 🤯
• Про псевдоклассы и анимацию еще точно буду пересматривать несколько раз, хорошо, что доступ остается навсегда
Это был последний поток, но я уверена, скоро будет что-то не менее полезное. А пока, можно присоединиться к Закрытому клубу.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥18❤3
Наложение блоков при скролле — довольно частый прием (я использую модификацию Аннекса ANX824)
И периодически вижу одну и ту же проблему: ставят кнопки или важный текст внизу блока, и при скролле туда не то что попасть не успеваешь, а даже прочитать не можешь. (А если еще «любимый» плавный скролл подключили, который при малейшем движении тебя на середину страницы отбрасывает, то вообще супер👍 )
Как решить этот вопрос? Есть несколько способов:
1. Не добавлять важные и особенно кликабельные элементы в нижнюю часть блока (пример 1)
2. Оставить отступы в блоках сверху и снизу, в случае, если не планируем занимать 100% высоты экрана (пример 2)
А если уже очень хочется поставить кнопку внизу, то дайте пользователям еще пару сотен пикселей проскроллить на месте, тем самым он успеет нажать куда ему нужно:
3. Добавить между блоками, которые накладываются, еще пустых zero-блоков без фона. И важно, в настройках модификации отключите у них pointer-events. Наглядно показала в видео 3 (примеры здесь и здесь)
И периодически вижу одну и ту же проблему: ставят кнопки или важный текст внизу блока, и при скролле туда не то что попасть не успеваешь, а даже прочитать не можешь. (А если еще «любимый» плавный скролл подключили, который при малейшем движении тебя на середину страницы отбрасывает, то вообще супер
Как решить этот вопрос? Есть несколько способов:
1. Не добавлять важные и особенно кликабельные элементы в нижнюю часть блока (пример 1)
2. Оставить отступы в блоках сверху и снизу, в случае, если не планируем занимать 100% высоты экрана (пример 2)
А если уже очень хочется поставить кнопку внизу, то дайте пользователям еще пару сотен пикселей проскроллить на месте, тем самым он успеет нажать куда ему нужно:
3. Добавить между блоками, которые накладываются, еще пустых zero-блоков без фона. И важно, в настройках модификации отключите у них pointer-events. Наглядно показала в видео 3 (примеры здесь и здесь)
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥15❤8