Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.57/7: Рейтинг темы: голосов - 7, средняя оценка - 4.57
2 / 2 / 0
Регистрация: 06.06.2013
Сообщений: 73

Как правильно сверстать такой фон?

12.10.2013, 12:47. Показов 1381. Ответов 1
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Верстаю макет (учебный). Как правильно добавить градиентный фон в области которую выделил на первой миниатюре? Посмотрел в фотошопе, эта область, часть большого слоя с градиентом (см. вторую миниатюру) основная часть которого, на макете, закрыта содержимым сайта.
И как лучше поступить, вырезать только видимую полоску фона или же грузить весь этот огромный фон?
Знаю что можно делать фоны используя специальные CSS генераторы. Есть ли такой в фотошопе?
Миниатюры
Как правильно сверстать такой фон?   Как правильно сверстать такой фон?  
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
12.10.2013, 12:47
Ответы с готовыми решениями:

Как правильно сверстать фон?
Здравствуйте! Решил заверстать один шаблон но наткнулся на проблему с фоном. Структура очень простая но, не знаю как правильно...

Как правильно сверстать такой градиент?
Залил две картинки, где наглядно видно, что к фону шапки сайта применен градиент, в виде как бы подсвеченного участка (на второй картинке...

Как сверстать такой блок?
Привет! Это снова я со своими незаурядными вопросами) Подскажите, пожалуйста, как лучше заверстать такой блок? Использую бутстрап(если...

1
Почетный модератор
12274 / 5340 / 268
Регистрация: 05.04.2011
Сообщений: 14,086
Записей в блоге: 2
12.10.2013, 13:10
Грузить весь градиент нет смысла. Будет большая тяжелая картинка. Лучше вырезать отдельные кусочки для нужных мест.

Css генератор в фотошопе есть, но мне его работа очень не понравилась. Можно подогнать для каждой области свой градиент.

http://www.colorzilla.com/gradient-editor/
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
12.10.2013, 13:10
Помогаю со студенческими работами здесь

Как сверстать такой бордер?
Здравствуйте! Подскажите пожалуйста как быть с бордером в данной ситуации? В частности, мешают вот эти белые треугольники. Они берутся...

Как сверстать такой блок
как сверстать такой блок если фон везде однородный одинаковый, то понятно просто поднять текст и задать паддинг одинаковым фоном. а...

Как сверстать такой макет?
Здравствуйте, подскажите, как лучше сверстать такой макет. Главные проблемы: 1. плавный переход в фон на краях 2. анимированый фон...

Как сверстать такой макет (bootstrap)?
вот так на десктопной версии как такой макет сверстать? (может где есть уроки по этой адаптации), просто я новичек и пытаюсь...

Подскажите, как сверстать такой слайдер
Доброго времени суток. Подскажите, как сверстать такой слайдер ?


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Новые блоги и статьи
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки
Neotwalker 08.03.2026
Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages
DevAlt 07.03.2026
Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F#
DevAlt 06.03.2026
В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .
Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование
8Observer8 05.03.2026
Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D
8Observer8 04.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий
8Observer8 02.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .
Реалии
Hrethgir 01.03.2026
Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .
Ритм жизни
kumehtar 27.02.2026
Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru