Web Design
Making web beautiful and comfortable
25 topics in this forum
-
- 0 replies
- 1.2k views
Здравствуйте! Подскажите, пожалуйста, как делаются такие интересные фоны с разноцветными полукругами и целым бежевым кругом (внизу страницы)? https://frescocooks.com/ Код посмотреть не могу, так как он, видимо, сделан с помощью Tailwind CSS.
Last reply by volshebnyi, -
- 1 reply
- 1.7k views
Сколько не пытался все это сделать, ничего не получалось Добавление кнопки меню на сайт с dark mode, изменение бекграунда, высоты, размеров текста для удобного чтения. Находил много кодов для этого, но никак не мог разобраться что и куда вставить, так как большинство кодов html,js,css были добавлены веб-конструктором Пытался разобраться, обучаясь на разных сайтах, но так и не смог понять что к чему. Возможно, у кого-то есть статья на эту тему или кто-то сможет обьяснить что и куда Зарание спасибо.
Last reply by klierik, -
- 1 reply
- 1.3k views
Всем привет! Подскажите пожалуйста, макет в виде фото в формате jpg , нужно его сверстать, но как его загрузить в фигму чтобы показывались все параметры стили (padding, font-size и т д), в фигму я загрузить смогла, но как открыть все стили чтоб начать верстать не получается, подскажите пожалуйста кто знает? Или же это просто не возможно так сделать?
Last reply by klierik, -
- 1 reply
- 1.4k views
Здравствуйте, читаю статью "How to Get Dark Mode Design Right" (как правильно оформить темный режим) https://www.webdesignerdepot.com/2020/10/how-to-get-dark-mode-design-right/. Дошла до абзаца, пример на картинке и тут у меня появились вопросы. Не понятные места я подчеркнула. Перевод примерно такой: У меня два вопросы. 1. Светлые тона в диапазоне 200-50, это сколько я знаю только либо RGB (255.255.255) или другой вариант вот так #FFFFFF. Как настраивать этот диапазон в цветовой палитре фотошоп? 2. Цитата "Google Material Design рекомендует использовать контраст между фоном и текстом около 15: 8: 1.". Что это где настроить контраст?
Last reply by Igor Schnaider, -
- 0 replies
- 2k views
Помогите если кто знает. Задача такая - на сторонней cms нужно найти кусок кода из описания и добавить его в поле meta-description. Описание товаров забивается макросом %contents% но этот макрос добавляет все описание, характеристики, цену и т.д нужный кусок кода с описанием выгдлядит так: <div id="item-description" class="item-passage"> <div class="item-description" itemprop="description"> <p class="b-user-content" data-extend="FlexibleTable" itemprop="description"> FM-трансмиттер предназначен для воспроизведения музыкальных файлов с карт памяти microSD и USB накопителей и трансляции звука на приёмник в автомобиле. Питается устройство от г…
Last reply by uniface, -
Как убрать горизонтальный скролл на сайте при просмотре с iphone X в браузере Google Chrome?
by guram07- 3 replies
- 2.1k views
Всем доброго времени суток. При просмотре сайта через десктопные браузеры все элементы и экран показываются ровно соответствуя медиа запросам. Точно так же - все отображается ровно если в Chrome выбрать отображение сайта как с iPhone X c перевернутым экраном. Но если зайти на сайт с iPhone X с браузера Google Chrome, и перевернуть экран, то во первых - появляется горизонтальный скролл, во вторых - при переворачивании экрана обратно слетает полностью мобильный вид сайта. Что касается просмотра сайта через браузер Safari на iPhone X, все отображается ровно. Прилагаю видео - экран запись с iPhone X. Ссылка на видео - https://disk.yandex.ru/i/BI2go6yL2gtxQQ.…
Last reply by guram07, -
- 0 replies
- 2.2k views
Здравствуйте, сейчас изучаю фигма и столкнулось с такой проблемой у меня несколько компонентов два из них были созданы дубликаты. Первый – это кнопки с надписями которые можно менять, вторая это иконка её тоже можно менять, иконки были прикреплен к одной кнопке компоненту, т.е. задумка такая все кнопки обычные, кроме одной, когда её выбираешь, то там так же можно поменять, три иконки, корзина, перо и шестеренку. Вот в чем проблема, когда я хочу сделать изменения с кнопками, то почему, то там присутствуют дополнительные иконки и кнопки можно поменять на иконки пример на картинки. Два дубликата компонентов отмечены стрелками, а справа во вкладке Design можно заметить к…
Last reply by Katerina23, -
- 0 replies
- 3.4k views
Нашел в MS Store отличный векторный редактор с функцией правки кода. Уже научился рисовать неплохие композиции и анимировать их с помощью CSS 3\4. Что понравилось: великолепный интерфейс который прост и понятен. Возможность дефайнить разные стили. Редактор код, который позволяет оптимизировать графику вручную после рисования. Поддерживает PNG. Стоит всего 10$, что гораздо лучше чем платить по 10$ каждый месяц за Photoshop и Illustrator. В отличие от говённого Illustarator реально умеет работать с embeded шрифтами и трансформировать их в path. Шрифтов множество. Есть поддержка функции вставки только использованных символов шрифта, что также офигенно о…
Last reply by Full-R, -
- 0 replies
- 1.6k views
я хочу чтобы весь текст который имеется не был растянут на весь экран а хочу чтобы было свободное пространство. Посмотрите на рисунок все поймете. ссылка https://drive.google.com/file/d/1fofT5_QkHVPyFO9Jyh2h6_CxysbevhqH/view?usp=sharing
Last reply by lion2020, -
Здравствуйте. Подскажите пожалуйста, как решить такой вопрос, у меня на сайте есть небольшой калькулятор, который делает вычисления общей суммы после выбора опций нескольких опций. Я хотел бы добавить (для удобства) вот такой "бегунок" datalist состоящий из 10-и позиций: <datalist id="rangeList"> <option value="4" label="4"> <option value="5" label="5"> <option value="6" label="6"> <option value="7" label="7"> <option value="8" label="8"> <option value="9" label="9"> <option value="10" label="10"> <option value="11" label="11"> <option value="12" label="12"> <option value="13" label="1…
Last reply by klierik, -
Добрый день, подскажите пожалуйста как в figma изображение без текста экспортировать?
Last reply by klierik, -
- 3 replies
- 2.7k views
Подскажите, где можно скачать адаптивный макет лэндинга для тренировки ?
Last reply by David_Engels, -
.thumb.jpg.4bf4b7bc126fff5f2d0719383035e2ff.jpg)
- 5 replies
- 4.9k views
Здравствуйте друзья. На днях столкнулся с проблемой в фотошопе. Выдает следующую ошибку, при экспорте картинки из слоя. Подскажите где я могу скачать ровную бесплатную версию фотошопа. Иметь платный вариант программы нет.
Last reply by klierik, -
- 2 replies
- 2.3k views
Друзья скачал Psd, но фотошоп не видит font awesome иконки. Подскажите пожалуйста, как это исправить? Сам font awesome я конечно установил (otf файлы, пробовал и ttf). На скриншоте 4 как должно отображаться в фотошопе. Если вопросы по фотошопу здесь не к месту, извините меня пожалуйста.
Last reply by Sinay, -
- 1 reply
- 1.9k views
avocode загружает макет только до 45% в чем проблема - с другими макетами нету проблем а с этим и десктоп вариант и мобайл вариант загружается только до 45%
Last reply by klierik, -
- 0 replies
- 1.9k views
Пытаюсь сверстать мобильную версию сайта на поддомене (тут именно отдельная версия сайта, не адаптивный дизайн). Сверстал я значит отдельную упрощенную страничку, поставил ширину body 100%, и че то вообще не красиво вышло, поменял ширину body на 480px, и вот это уже больше похоже на правду. Но! При открытии на смартфоне сайт выглядит как на компьютере (скрин1), пробовал на разных смартфонах с разными разрешениями, везде одинаково. Может кто знает, подскажите как сделать чтобы на смартфоне при открытии сайта показывался именно этот блок (скрин2).
Last reply by VlGo, -
- 0 replies
- 2.4k views
Здравствуйте, Всем! Что-то не ищется.. Хочу найти шаблон для Landing page с минимальными наворотами. Скачивал всякие Free шаблоны, весят они под 2MB со всякой трепухой внутри, которая может подтягивать из вне что-то ещё и по цепочке. Туда может быть встроено всё что угодно: майнинг, редирект, сбор статистики и т. д. Проверять все эти минифицированные тонны кода нет желания.. Я люблю когда ясный чистый код, без всякой хиромантии.. Такой шаблон и редактировать проще.. Быстрее работает, меньше глюков.. Ну что может быть нужно для Лендинга из библиотек реально? Разве что jQuery и пара плагинов к нему для ненавязчивой анимании (хотя, опять-таки луче уже если анимаци…
Last reply by tamirov, -
Хай, друзья! Меня зовут Ильдияр! Сам я верстальщик! Мне нужен веб дизайнер который будет рисовать макеты для сайта. Ты начинающий веб-дизайнер, и хочешь уже зарабатывать свои первые деньги?! Я тебе с этим помогу, а ты взаимен) Друг если заинтересовала тебя это напиши мне в ЛС! Подробно с тобой обсудим!
Last reply by Ильдияр, -
- 2 replies
- 3.6k views
Здравствуйте уважаемые форумчане, подскажите пожалуйста, не получается сделать блок адаптивным(я в этом не очень разбираюсь =)) ). Уже голова кипит, все попереисправлял, переделал, удалял и добавлял, что просто запутался, очень прошу вас распутать и подсказать как правильно, чтобы я точно знал :). Спасибо заранее. В чем собственно проблема: А в том, что этот блок не уменьшается пропорционально ширине экрана. На 1 скриншоте он вообще выпадает из общего контента. А на 2 скриншоте появляется горизонтальная прокрутка. Пересмотрел много роликов и статей, но чет так сильно запутался во всем этом :((. CSS code блока и т.д: @media (max-width: 320px…
Last reply by garik-garik, -
- 1 reply
- 2.4k views
Ребята кто практикует верстку или дизайн адаптивный рисует. Верстаю сайт и мне не дали PSD адаптивной верстки. Подскажите, как бы вы сверстали слайдер и блоки в нем для телефонов? Смотреть на компьютере. http://taxiautopa.temp.swtest.ru/
Last reply by VasyOK{!}, -
- 5 replies
- 3.9k views
Скажем, есть вот такой блок в фотошопе: Я хочу посчитать CSS значения font-size, line-height и вертикальные margin'ы между заголовком и картикой, заголовком и параграфом, а также между параграфом и нижней картинкой. Leading в фотошопе - это, кажется, равняется значению line-height в CSS, судя из ручных тестов, но я точно не уверен, а в интернетах разная инфа в разных источниках. А как правильно посчитать margin'ы между текстом и другими блоками, учитывая Leading? На картинке выше указаны параметры для FOOTBALL SHOES. Как мне используя эти значений высчитать line-height для заголовка и margin'ы между элементами?
Last reply by AlexZaw, -
- 0 replies
- 2.3k views
Есть сайт на бутстрапе. Нужно реализовать такой интерфейс с модальными окнами чтобы окон могло быть сколько угодно чтобы при закрытии текущего окна можно было вернуться к предыдущему и обновить его содержимое через ajax. Хватит ли на такое стандартного бутстрапа или надорасширение искать? Можно ли сделать jquery ui окна адаптивными?
Last reply by magnuz, -
Добрый день! Не знаю, может не в этот топ вопрос... заранее извиняюсь... Столкнулся с ситуацией: есть макет. Макет, как мне сказали, создан в версии еще 11года. И при попытке узнать характеристики шрифта в последней версии cc photoshop отсутствуют описания типа, размера шрифта. Есть только межстрочный интервал. Хотел узнать: может ли быть проблема в том, что макет создан в одной версии, а используется в другой? Или это банально - неумение пользоваться данным инструментом?
Last reply by Super_Saimon, -
- 4 replies
- 3.4k views
Привет, вопрос почему градиент указанный в фотошопе отличается от того, который задается CSS.. Настройки профиля фотошоп - sRGB.. Сохраняю тоже с галочкой конверт в sRGB, пробовал и без нее.. Подробнее все настройки - https://ibb.co/bZg5a7, https://ibb.co/g1RtTS, https://ibb.co/dMwGhn.. Blend-mode слоя в фотошопе - normal Начальный и конечный цвета совпадают, написаны в одном формате.. В браузерах цвет получается тусклее, менее насыщенным чтоли чем в фотошоп.. На картинке первый желтый градиент создан через background: linear-gradient, а второй вставлен через .png..
Last reply by Odinokiy_volk, -
- 5 replies
- 2.4k views
Всем привет! Помогите установить Photoshop СС 2014 на linux mint x64. Я уже за***лся, не получается!
Last reply by Schamil74,
-
Обсуждения
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо. -
<input type="number"> -
By Katerina23 · Posted
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть. -
Решение нашел. Заменил на Всем привет. Список выходит из дива. При этом, другие элементы в диве отображаются корректно. Не могу найти причину. Нужно чтобы список был под кнопкой ПЛЕЙ... -
Здравствуйте! Мы команда программистов с многолетним опытом разработки. Работая с нашей командой, Вы получаете порядок условий и развитие с обеих сторон: разработка проекта и продолжение сотрудничества на долгосрочной основе, так же специалисты всегда готовы предложить различные идеи и дополнения. Разрабатываем проекты любой сложности: скрипты для автоматизации рутины, боты, сайты, админ панели, ico, ldo, разработка криптовалюты, смарт контракты, приложения, игры. Ответственность, качество, соблюдение дедлайнов - это про нас! Наш контакт: https://t.me/MadFury (https://t.me/madfury) (TG) TG: https://t.me/2e7.io Сайт: https://code-r.io/
-