Практическое извращение над тильдой 🤔
Очень важный пункт нормального развития верстальщика (и front’a) не только постоянное изучение новых фреймворков {что уже бесит, дайте старые нормально выучить уже}, но и развитие насмотренности. О последнем пункте почти никто не говорит и в итоге мы получаем совершенно бездарных верстальщиков, неспособных угнаться за развитием дизайн-мира.
Подчеркну, что для меня важно верстать не по принципу "Как-нибудь работает и ладно", а делать действительно качественную современную верстку.
Один из способов — взять уже существующий сайт, который вас МЕГА зацепил и попытаться повторить (без постоянных подглядулек в инструменты разработчика). Такой сайт как раз попался на прошлом стриме и я решила уже привычно пойти извратить тильду.
На странице есть два блока: IM01 и IM13 и стили весом 7кб. В процессе я немного поправила позиции элементов на свой вкус потому что люблю системность (даже в том, что кажется совершенно несистемным). А также оставила кнопку, нажав на которую можно посмотреть все написанные стили😑 .
Соглашусь, что просто написать подобное было бы проще. Но в процессе работы мне нравится сталкиваться со сложностями и решать их. Тильда буквально напоминает мне галёрку, на которой я проработала много лет, превращая старый проект в нормальный.
🔗 Посмотреть результат можно тут
Помните, если вам надоели ограничения тильды — всегда можно их уничтожить самостоятельно или с моей помощью😉
#переверстка
Очень важный пункт нормального развития верстальщика (и front’a) не только постоянное изучение новых фреймворков {что уже бесит, дайте старые нормально выучить уже}, но и развитие насмотренности. О последнем пункте почти никто не говорит и в итоге мы получаем совершенно бездарных верстальщиков, неспособных угнаться за развитием дизайн-мира.
Подчеркну, что для меня важно верстать не по принципу "Как-нибудь работает и ладно", а делать действительно качественную современную верстку.
Один из способов — взять уже существующий сайт, который вас МЕГА зацепил и попытаться повторить (без постоянных подглядулек в инструменты разработчика). Такой сайт как раз попался на прошлом стриме и я решила уже привычно пойти извратить тильду.
На странице есть два блока: IM01 и IM13 и стили весом 7кб. В процессе я немного поправила позиции элементов на свой вкус потому что люблю системность (даже в том, что кажется совершенно несистемным). А также оставила кнопку, нажав на которую можно посмотреть все написанные стили
Соглашусь, что просто написать подобное было бы проще. Но в процессе работы мне нравится сталкиваться со сложностями и решать их. Тильда буквально напоминает мне галёрку, на которой я проработала много лет, превращая старый проект в нормальный.
🔗 Посмотреть результат можно тут
Помните, если вам надоели ограничения тильды — всегда можно их уничтожить самостоятельно или с моей помощью
#переверстка
Please open Telegram to view this post
VIEW IN TELEGRAM
Ко мне пришли много новеньких и хочется сделать пост с навигацией, а также кратким обзором на тему того, о чем я вообще вещаю 😎
Моему блогу чуть больше года и это не типичный блог дизайнера, который просто делится своим опытом и полезными советами для новичков {потому что я знаю, что мне самой еще стоит поучиться у моей аудитории и больше ощущаю себя разработчиком}. Тут я пишу о своих переживаниях, развитии в профессии, делюсь ссылками на полезные сервисы и запустила крутую рубрику с мини-решениями для тильды и не только.
Здесь можно пробежаться по тегам: #работа #халявное #стрим #катяучится #ссылки #уверстка #переверстка #личное
Подробнее обо мне можно прочитать в этом посте (или тык по закрепам), а тут прочитать о том, с какой проблемой ко мне можно обратиться. Но если кратко, то я очень стеснительный человек, который любит своих пятерых котов, вязать носки и шапки, уют и спокойствие и пытается разобраться как жить эту странную жизнь. Идентифицирую себя как разработчик, который разбирается в дизайне.
На данный момент я работаю над платными крутыми решениями для тильды (не типикал решения как у всех), переписываю полностью программу оптимизации сайтов на тильде, делаю закрытый канал по развитию блога и консультации по нестандартной вёрстке на тильде. А еще я, иногда, веду стримы, на которых делаю реальные проекты и очень хочу развить это направление чуть дальше. Будем знакомы, если не знакомы😃
Моему блогу чуть больше года и это не типичный блог дизайнера, который просто делится своим опытом и полезными советами для новичков {потому что я знаю, что мне самой еще стоит поучиться у моей аудитории и больше ощущаю себя разработчиком}. Тут я пишу о своих переживаниях, развитии в профессии, делюсь ссылками на полезные сервисы и запустила крутую рубрику с мини-решениями для тильды и не только.
Здесь можно пробежаться по тегам: #работа #халявное #стрим #катяучится #ссылки #уверстка #переверстка #личное
Подробнее обо мне можно прочитать в этом посте (или тык по закрепам), а тут прочитать о том, с какой проблемой ко мне можно обратиться. Но если кратко, то я очень стеснительный человек, который любит своих пятерых котов, вязать носки и шапки, уют и спокойствие и пытается разобраться как жить эту странную жизнь. Идентифицирую себя как разработчик, который разбирается в дизайне.
На данный момент я работаю над платными крутыми решениями для тильды (не типикал решения как у всех), переписываю полностью программу оптимизации сайтов на тильде, делаю закрытый канал по развитию блога и консультации по нестандартной вёрстке на тильде. А еще я, иногда, веду стримы, на которых делаю реальные проекты и очень хочу развить это направление чуть дальше. Будем знакомы, если не знакомы
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
В прошлую субботу на стриме {почти 3 часа, которые я просто не заметила} я переделывала блок TE225 в что-то совсем необычное.
Закончить страницу до конца на стриме не вышло из-за неожиданных сюрпризов библиотеки Swiper.js (если кратко, то моя задумка в рамках данной библиотеки не реализуема). Но я решила доделать слайдер и в процессе сделались три разных эффекта с одним блоком, которые вы можете посмотреть на этой странице 🔗.
Было скучно просто доделывать начатое, поэтому я заодно протестировала эффект искажения для изображений {с большой вероятностью не будет работать на macbook}. На странице есть аккордеон с #10 выпуска уверстки и моя модификация смены темы, которая скоро вернется после переделки.
Будет важно отметить, что данная страница может лагать на слабых устройствах потому что я подключила разом все самое лучшее. На живых проектах такое лучше не вытворять.
скажите же что крутая :D ну кто еще будет такую херь с тильдой творить.
#стрим #переверстка
Закончить страницу до конца на стриме не вышло из-за неожиданных сюрпризов библиотеки Swiper.js (если кратко, то моя задумка в рамках данной библиотеки не реализуема). Но я решила доделать слайдер и в процессе сделались три разных эффекта с одним блоком, которые вы можете посмотреть на этой странице 🔗.
Было скучно просто доделывать начатое, поэтому я заодно протестировала эффект искажения для изображений {с большой вероятностью не будет работать на macbook}. На странице есть аккордеон с #10 выпуска уверстки и моя модификация смены темы, которая скоро вернется после переделки.
Будет важно отметить, что данная страница может лагать на слабых устройствах потому что я подключила разом все самое лучшее. На живых проектах такое лучше не вытворять.
#стрим #переверстка
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Во-первых, спасибо всем кто забежал. Во-вторых, спасибо за донат (это очень пугающе и приятно
Мне сложно и непривычно одновременно говорить и что-то проектировать, поэтому нечто логичное я сделала уже после стрима. Подумала о том, что реально можно сделать с тильдой, отказалась от пары идей и нарисовала сразу все адаптивы {потому что в данном макете это позволит быстрее всё верстать}.
Прототип с перемоткой можно посмотреть тут.
Сделала и понимаю, что это будет очень потная задача (написать в сто крат проще
На стрим вынесу только отдельные моменты, сделав часть трудной работы за кадром.
#переверстка
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
"До/После" в этот раз получилось не таким ярким, как это было со слайдером. Но это хороший пример, как можно не скучно вывести новости на страницу или же оформить каталог {покажу вам на следующей неделе очень стильную переделку блока, сделанную на заказ} .
Признаюсь, что переделывать не переделываемое мне нравится больше. Но банка идей была добита выгоранием, нужно восстановиться как-то 😖
#переверстка
Признаюсь, что переделывать не переделываемое мне нравится больше. Но банка идей была добита выгоранием, нужно восстановиться как-то 😖
#переверстка
Please open Telegram to view this post
VIEW IN TELEGRAM
За последнее время в канале появилось много новых постов и соответственно тегов. Я решила навести порядок в канале и организовать удобную навигацию.
#личное (жизнь, переживания,
#скотики (немного о жизни наших пятерых усатых
#работа (о проектах, кейсы, отзывы, переделки)
#уверстка (небольшие быстрые решения)
#переверстка (переделка стандартных блоков на тильде)
#халявное (решения для тильды)
#ссылки (полезные ссылки, подборки постов, агрегаторы и так далее)
#стрим (записи стримов, которые не находятся в открытом доступе)
#косметикос (посты про косметику от косметического задрота
#дайджест (обзоры нового в CSS, обнов тильды) {я обязательно продолжу этот тег как смогу}
#референсы (подборки интересных сайтов) {тоже продолжим, как сможем}
#бренныйфриланс (как продвигается мой фриланс честно и без мотивационных речей)
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
После/До переделки и группировки элементов 😏
Забыла добавить, что карточка новости тоже была переделана: перенесен тег и дата.
Живой пример можно посмотреть тут (ребята уже что-то переделали без меня, но потоки на месте).
#переверстка
Забыла добавить, что карточка новости тоже была переделана: перенесен тег и дата.
Живой пример можно посмотреть тут (ребята уже что-то переделали без меня, но потоки на месте).
#переверстка
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Давно не было #переверстка на тильде {да и тильды после полыхания моего терпения если бы}.
Задача: сделать аккордеон, в который поместить стандартный блок SV501 (текст в раскрывающихся карточках), добавить подзаголовок, который будет скрываться при открытии аккордеона, сверстать содержимое первого пункта, стилизовать всё и подружить с autoscale.
Всё как я люблю.
Было два варианта: работать с блоком SV501, поместив один аккордеон в другой или использовать мой аккордеон для нулевого блока. В первом варианте придется исправить баг: тильда перестает понимать почему один аккордеон оказался в другом, а также написать больше стилей. Поэтому я использовала свое решение, но доработала его.
Слайдер сделан в нулевом блоке, часть контента внутри написана. Скриншот того как выглядит страница будет в комментариях.
Напоминаю, если у вас есть идеи и вы не знаете можно ли их реализовать на тильде. Или если вы хотите полностью преобразить каталог товаров или любой стандартный блок — пишите в личные сообщения.
#переверстка
Задача: сделать аккордеон, в который поместить стандартный блок SV501 (текст в раскрывающихся карточках), добавить подзаголовок, который будет скрываться при открытии аккордеона, сверстать содержимое первого пункта, стилизовать всё и подружить с autoscale.
Всё как я люблю.
Было два варианта: работать с блоком SV501, поместив один аккордеон в другой или использовать мой аккордеон для нулевого блока. В первом варианте придется исправить баг: тильда перестает понимать почему один аккордеон оказался в другом, а также написать больше стилей. Поэтому я использовала свое решение, но доработала его.
Слайдер сделан в нулевом блоке, часть контента внутри написана. Скриншот того как выглядит страница будет в комментариях.
Напоминаю, если у вас есть идеи и вы не знаете можно ли их реализовать на тильде. Или если вы хотите полностью преобразить каталог товаров или любой стандартный блок — пишите в личные сообщения.
#переверстка