Оказался самым сложным проектом, буквально выстраданный каждый блок) А казалось бы, такой небольшой.
Еще не хотелось много рассказывать. На мой взгляд, работы это сделают лучше)
Но в то же время, чтобы чем-то цеплял.
Теперь можно некоторое время спать спокойно, пока не захочется все снести и переделать 😂
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
«Найди себе дело по душе…» ну дальше вы знаете.
Если ты готов в свои выходные просидеть и прорисовать только потому, что пришло вдохновение, наверно это и правда твое. Смотрела интенсив от Tilda School и так понравилось задание, что дальше все как в тумане)) Ок, будет еще один повод поделиться с вами😌
Тема – кроссовки Adidas Samba. Структура +- была в тз. На все про все 2 дня.
Опять что-то рождалось прям по ходу верстки, опять идеи из разряда «и как это сделать!?». В общем, иногда очень приятно отвлечься от рабочих задач, чтобы не зарываться в рутине.
Ссылка на проект: samba-store.ru
Кстати, конструктор слайдеров от Annexx — это просто чудо, и как без него жили❤️
Если ты готов в свои выходные просидеть и прорисовать только потому, что пришло вдохновение, наверно это и правда твое. Смотрела интенсив от Tilda School и так понравилось задание, что дальше все как в тумане)) Ок, будет еще один повод поделиться с вами
Тема – кроссовки Adidas Samba. Структура +- была в тз. На все про все 2 дня.
Опять что-то рождалось прям по ходу верстки, опять идеи из разряда «и как это сделать!?». В общем, иногда очень приятно отвлечься от рабочих задач, чтобы не зарываться в рутине.
Ссылка на проект: samba-store.ru
Кстати, конструктор слайдеров от Annexx — это просто чудо, и как без него жили
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥28❤4
Пришла идея показывать внутрянку проектов. Хотя бы точечно. Я бы с удовольствием посмотрела у других за непринятыми концепциями, ходом мысли, как и что сделано, заглянуть внутрь Тильды как заверстано и тд. Если это интересно — дайте знать, пожалуйста 🙏
Сегодня хочу показать референсы, которые были использованы в последнем проекте про Samba. Конкретно здесь все родилось просто с какого-то размытого скрина какого-то сайта с Pinterest. Повторила композицию и зашло.
Помимо тех скринов, что во вложении, еще было два сайта, с которых взяла идеи. Этот и этот.
Вот все говорят про «правильную» работу с референсами. А мне всегда было интересно, есть ли она, эта «правильная» работа? Кто-то мудборд составляет из всего, от обложек книги до фото заката. Кому-то достаточно пары скринов сайтов. И где та грань между «вдохновился» и «сп*здил»? (Это вообще отдельная тема дискуссии, можно только вспомнить последний случай с Axe)
Я стала замечать, как от проекта к проекту меняется мой подход к поиску и выбору референсов. Чаще всего, в поиске концепции я просто сижу день-два и рассматриваю подборки, Pinterest, Инстаграм, Dribble, Behance. Нахожу крутые варианты и они благополучно улетают в заветный файлик в Фигме «на потом». А то, что остается, это 5-10 скринов и ссылок. Если начинаешь накидывать больше, точно зароешься и потеряешься.
Это что касается именно концепции. Поймал направление, попробуй применить сразу же. Не подошло. Ищешь дальше.
При отрисовке остальных блоков, уже ищешь не дизайн, а идеи и композицию. Это следующий этап и совсем другая работа с референсами. Вот тут как раз очень пригождается собственная библиотека в Фигме и все отложенные «на потом» скрины. Собирай как можно больше, это очень сократит время в дальнейшем.
Сегодня хочу показать референсы, которые были использованы в последнем проекте про Samba. Конкретно здесь все родилось просто с какого-то размытого скрина какого-то сайта с Pinterest. Повторила композицию и зашло.
Помимо тех скринов, что во вложении, еще было два сайта, с которых взяла идеи. Этот и этот.
Вот все говорят про «правильную» работу с референсами. А мне всегда было интересно, есть ли она, эта «правильная» работа? Кто-то мудборд составляет из всего, от обложек книги до фото заката. Кому-то достаточно пары скринов сайтов. И где та грань между «вдохновился» и «сп*здил»? (Это вообще отдельная тема дискуссии, можно только вспомнить последний случай с Axe)
Я стала замечать, как от проекта к проекту меняется мой подход к поиску и выбору референсов. Чаще всего, в поиске концепции я просто сижу день-два и рассматриваю подборки, Pinterest, Инстаграм, Dribble, Behance. Нахожу крутые варианты и они благополучно улетают в заветный файлик в Фигме «на потом». А то, что остается, это 5-10 скринов и ссылок. Если начинаешь накидывать больше, точно зароешься и потеряешься.
Это что касается именно концепции. Поймал направление, попробуй применить сразу же. Не подошло. Ищешь дальше.
При отрисовке остальных блоков, уже ищешь не дизайн, а идеи и композицию. Это следующий этап и совсем другая работа с референсами. Вот тут как раз очень пригождается собственная библиотека в Фигме и все отложенные «на потом» скрины. Собирай как можно больше, это очень сократит время в дальнейшем.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤22🔥13💯1