Фон позади кнопки должен быть, как фон блока

@gone · Регистрация: 22.07.2013

Author24 — интернет-сервис помощи студентам

Фон позади кнопки должен быть, как фон блока
Это сложно объяснить словами, скину скрины макета

Надеюсь вы мне поможете и доступно объясните как такое можно реализовать

@Divinesites · 22.07.2013, 18:46

Вообще по-хорошему, дизайнер должен быть сделать фон вместе с этой выемкой (одной картинкой). А затем верстальщик (я так понимаю, это вы) должен вставить эту картинку в html, и затем подогнать кнопку в нужное место.

@gone · 22.07.2013, 21:07 **[ТС]**

Сообщение от Enero

Вообще по-хорошему, дизайнер должен быть сделать фон вместе с этой выемкой (одной картинкой). А затем верстальщик (я так понимаю, это вы) должен вставить эту картинку в html, и затем подогнать кнопку в нужное место.

Не все так просто. Фон меняется и меняется ширина кнопки.

Добавлено через 7 минут
Т.е фон кнопки должен повторять фон основного блока(в данном случае холодильника и дерева). К тому же текст внутри кнопки меняется с "Создать слово" на "Заказать"

@ychelovek · 22.07.2013, 23:19

В общем, тогда ваш футер должен находиться в диве где тсавится фон.
Ну к примеру

HTML5

1	<div id="1" style="background....это див где фон"><div id="2">это вот футер где ваша кнопка</div></div>

При таком раскладе у кнопки находящейся во 2м диве будет иметь фон 1го.

@gone · 22.07.2013, 23:42 **[ТС]**

Это понятно, но оно не решает проблему

@likeaboss · 24.07.2013, 15:51

CSS

.wrapper{
                   width: 300px;
                    height: 60px;
                    background-color: #f4a460;
                    border-radius: 30px;
                    position: relative;
                }
                .button{
                    width: 200px;
                    height: 40px;
                    background-color: #ff0000;
                    border-radius: 20px;
                   position: absolute;
                    top: 50%;
                    left: 50%;
                    margin-top: -20px;
                    margin-left: -100px;

HTML5

<div class="wrapper">
    <div class="button">
    </div>
</div>

так не подходит?

@gone · 01.08.2013, 02:21 **[ТС]**

Сообщение от likeaboss

так не подходит?

не подходит :\

@Taatshi · 03.08.2013, 20:01

png с прозрачностью - ни о чем не говорит?

@gone · 04.08.2013, 04:04 **[ТС]**

Сообщение от Taatshi

png с прозрачностью - ни о чем не говорит?

по подробнее можно ? для ясности скажу- кнопка меняет свою ширину

@Sunman · 04.08.2013, 10:26

gone,
Это изврат если честно. И выхода тут 2, делать набор полосок под разную ширину кнопок и накладывать их, либо не страдать такой фигней и отказаться от нижней части фона. Это можно нарисовать, но сверстать - голову и руки сломаешь и выйдет это один фиг через Ж.
Taatshi, тут вроде не поможет. Если прозрачный то футер будет просвечивать, а если вырез делать на футе, то у нас же еще и ширина меняется и тут набор разноколиберных картинок нужен будет, в общем психоз..

@Taatshi · 04.08.2013, 10:59

Кнопку придется делить на три части: левая, середина с изменяющейся шириной, правая. И этим трем частям задавать отдельный бэк.

@Sunman · 04.08.2013, 11:05

Taatshi, а что нам дадут 3 части? у нас же вырез на футере должен тоже меняться, а кнопка я думаю и так резиновая. Да и как задать бэк так, чтобы он совпадал с подложкой? Тут один вариант, если уж делать, и я его описал выше.

@Taatshi · 04.08.2013, 11:13

Sunman, какой вырез? О чем это? Не нужно там никакого выреза. бэк идет сплошной. Поверх прозрачная пнг из трех частей раз уж она тянется. Вырез к кнопке пририсовывается.

@Sunman · 04.08.2013, 11:25

Taatshi, эм.. нижняя стрелка, по-моему показывает на вырез в футере под кнопку + фон верхнего блока? нет? Я вижу вырез, и мне кажется это проще, чем делить кнопку

Однако, я бы вообще отказался от такого или нашел другое решение. Я своего диза, что макет мне рисовал, замучал в процессе, он мне каждый отрисованный блок на проверку отсылал, дабы я одобрил минимализм работы

Dmitry · 04.08.2013, 11:46

а саму кнопку дивом сделать не пойдет? и диву назначить "онклик"...

@Taatshi · 04.08.2013, 12:22

Сообщение от Sunman

он мне каждый отрисованный блок на проверку отсылал, дабы я одобрил минимализм работы

это непрофессионально. Верстальщик должен сверстать то, что нарисовано.

Сообщение от Dmitry

а саму кнопку дивом сделать не пойдет? и диву назначить "онклик"...

Так я про это и говорю.

@Sunman · 04.08.2013, 13:27

Сообщение от Taatshi

это непрофессионально. Верстальщик должен сверстать то, что нарисовано.

Профессионально это максимально возможно облегчить сайт по весу загружаемой информации и максимально уменьшить всякого рода извращенства. По крайней мере так я верстал свой сайт, а те, кто заказывает, да ради бога, любой каприз))

Сообщение от Taatshi

Так я про это и говорю.

Я кажется въехал о чем ты.. Ну да, я ошибся в сложности подбора бэка и это будет лучший вариант

@Taatshi · 04.08.2013, 13:47

Не по теме:

Сообщение от Sunman

Профессионально это максимально возможно облегчить сайт по весу загружаемой информации и максимально уменьшить всякого рода извращенства.

Да, ранее было актуально. При нынешних скоростях уже не настолько. Я недавно плакалась, что у меня страница больше полутора метров весит, так мне сказали, что я еще неплохо уложилась. Я придумала как ужать до метра и сижу сверхсчастливая. Но там тааааакой дизайн %-) :)

@gone · 04.08.2013, 15:55 **[ТС]**

На одном из международных форумов мне дали довольно хороший совет, но он работает только для фиксированной ширины кнопки, прорезинить пока не получается. Может кому будет полезно.
В общем делается маска с прозрачным фоном на месте кнопки. Слева и справа маски два белых дива.

@Sunman · 04.08.2013, 15:58

Не по теме:

Сообщение от Taatshi

Да, ранее было актуально. При нынешних скоростях уже не настолько. Я недавно плакалась, что у меня страница больше полутора метров весит, так мне сказали, что я еще неплохо уложилась. Я придумала как ужать до метра и сижу сверхсчастливая. Но там тааааакой дизайн

Для мобилок и сейчас еще актуально:) Ну мне диз хотел бэкграундом на весь контент влепить плюху в пнг, которая под 10 метров весила XD ну общим весом у меня страничка наверно и выходит на 1.5 -2мб. шапка+футер+7 превьюшек с картинкой в каждой. Благо ослик подятнулся, хоть градиент стал хавать, а то год назад он даже цвета левые выдавал при градиенте.

Добавлено через 3 минуты
gone, я так и предлагал, но вариант Taatshi, по-моему будет лучше.

А прорезинить у тебя так выйдет, только если использовать разные блоки. т.е. у тебя будет 2 экземпляра "маски" и 2 экземпляра кнопки.

@Sunman 56 / 56 / 14 Регистрация: 02.03.2010 Сообщений: 407
	04.08.2013, 11:25	14
	Taatshi, эм.. нижняя стрелка, по-моему показывает на вырез в футере под кнопку + фон верхнего блока? нет? Я вижу вырез, и мне кажется это проще, чем делить кнопку Однако, я бы вообще отказался от такого или нашел другое решение. Я своего диза, что макет мне рисовал, замучал в процессе, он мне каждый отрисованный блок на проверку отсылал, дабы я одобрил минимализм работы 0

@Taatshi Почетный модератор 12271 / 5336 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	04.08.2013, 12:22	16
	Сообщение от Sunman он мне каждый отрисованный блок на проверку отсылал, дабы я одобрил минимализм работы это непрофессионально. Верстальщик должен сверстать то, что нарисовано. Сообщение от Dmitry а саму кнопку дивом сделать не пойдет? и диву назначить "онклик"... Так я про это и говорю. 0

@Sunman 56 / 56 / 14 Регистрация: 02.03.2010 Сообщений: 407
	04.08.2013, 13:27	17
	Сообщение от Taatshi это непрофессионально. Верстальщик должен сверстать то, что нарисовано. Профессионально это максимально возможно облегчить сайт по весу загружаемой информации и максимально уменьшить всякого рода извращенства. По крайней мере так я верстал свой сайт, а те, кто заказывает, да ради бога, любой каприз)) Сообщение от Taatshi Так я про это и говорю. Я кажется въехал о чем ты.. Ну да, я ошибся в сложности подбора бэка и это будет лучший вариант 0

@gone 3 / 3 / 2 Регистрация: 22.07.2013 Сообщений: 15
		1
	Фон позади кнопки должен быть, как фон блока 22.07.2013, 16:05. Показов 6115. Ответов 19 Метки нет (Все метки) Фон позади кнопки должен быть, как фон блока Это сложно объяснить словами, скину скрины макета Надеюсь вы мне поможете и доступно объясните как такое можно реализовать 0

@Divinesites 107 / 102 / 9 Регистрация: 29.06.2013 Сообщений: 369
	22.07.2013, 18:46	2
	Вообще по-хорошему, дизайнер должен быть сделать фон вместе с этой выемкой (одной картинкой). А затем верстальщик (я так понимаю, это вы) должен вставить эту картинку в html, и затем подогнать кнопку в нужное место. 0

@gone 3 / 3 / 2 Регистрация: 22.07.2013 Сообщений: 15
	22.07.2013, 21:07 [ТС]	3
	Сообщение от Enero Вообще по-хорошему, дизайнер должен быть сделать фон вместе с этой выемкой (одной картинкой). А затем верстальщик (я так понимаю, это вы) должен вставить эту картинку в html, и затем подогнать кнопку в нужное место. Не все так просто. Фон меняется и меняется ширина кнопки. Добавлено через 7 минут Т.е фон кнопки должен повторять фон основного блока(в данном случае холодильника и дерева). К тому же текст внутри кнопки меняется с "Создать слово" на "Заказать" 0

@gone 3 / 3 / 2 Регистрация: 22.07.2013 Сообщений: 15
	22.07.2013, 23:42 [ТС]	5
	Это понятно, но оно не решает проблему 0

@gone 3 / 3 / 2 Регистрация: 22.07.2013 Сообщений: 15
	01.08.2013, 02:21 [ТС]	7
	Сообщение от likeaboss так не подходит? не подходит :\ 0

@Taatshi Почетный модератор 12271 / 5336 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	03.08.2013, 20:01	8
	png с прозрачностью - ни о чем не говорит? 0

@gone 3 / 3 / 2 Регистрация: 22.07.2013 Сообщений: 15
	04.08.2013, 04:04 [ТС]	9
	Сообщение от Taatshi png с прозрачностью - ни о чем не говорит? по подробнее можно ? для ясности скажу- кнопка меняет свою ширину 0

@Sunman 56 / 56 / 14 Регистрация: 02.03.2010 Сообщений: 407
	04.08.2013, 10:26	10
	gone, Это изврат если честно. И выхода тут 2, делать набор полосок под разную ширину кнопок и накладывать их, либо не страдать такой фигней и отказаться от нижней части фона. Это можно нарисовать, но сверстать - голову и руки сломаешь и выйдет это один фиг через Ж. Taatshi, тут вроде не поможет. Если прозрачный то футер будет просвечивать, а если вырез делать на футе, то у нас же еще и ширина меняется и тут набор разноколиберных картинок нужен будет, в общем психоз.. 0

@Taatshi Почетный модератор 12271 / 5336 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	04.08.2013, 10:59	11
	Кнопку придется делить на три части: левая, середина с изменяющейся шириной, правая. И этим трем частям задавать отдельный бэк. 0

@Sunman 56 / 56 / 14 Регистрация: 02.03.2010 Сообщений: 407
	04.08.2013, 11:05	12
	Taatshi, а что нам дадут 3 части? у нас же вырез на футере должен тоже меняться, а кнопка я думаю и так резиновая. Да и как задать бэк так, чтобы он совпадал с подложкой? Тут один вариант, если уж делать, и я его описал выше. 0

	04.08.2013, 15:58

@Taatshi Почетный модератор 12271 / 5336 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	04.08.2013, 11:13	13
	Sunman, какой вырез? О чем это? Не нужно там никакого выреза. бэк идет сплошной. Поверх прозрачная пнг из трех частей раз уж она тянется. Вырез к кнопке пририсовывается. 0

Dmitry 13340 / 7475 / 817 Регистрация: 09.09.2009 Сообщений: 29,250
	04.08.2013, 11:46	15
	а саму кнопку дивом сделать не пойдет? и диву назначить "онклик"... 0

@Taatshi
	04.08.2013, 13:47 #18
	Не по теме: Сообщение от Sunman Профессионально это максимально возможно облегчить сайт по весу загружаемой информации и максимально уменьшить всякого рода извращенства. Да, ранее было актуально. При нынешних скоростях уже не настолько. Я недавно плакалась, что у меня страница больше полутора метров весит, так мне сказали, что я еще неплохо уложилась. Я придумала как ужать до метра и сижу сверхсчастливая. Но там тааааакой дизайн %-) :) 0

@gone 3 / 3 / 2 Регистрация: 22.07.2013 Сообщений: 15
	04.08.2013, 15:55 [ТС]	19
	На одном из международных форумов мне дали довольно хороший совет, но он работает только для фиксированной ширины кнопки, прорезинить пока не получается. Может кому будет полезно. В общем делается маска с прозрачным фоном на месте кнопки. Слева и справа маски два белых дива. Миниатюры 0

@Sunman 56 / 56 / 14 Регистрация: 02.03.2010 Сообщений: 407
	04.08.2013, 15:58	20
	Не по теме: Сообщение от Taatshi Да, ранее было актуально. При нынешних скоростях уже не настолько. Я недавно плакалась, что у меня страница больше полутора метров весит, так мне сказали, что я еще неплохо уложилась. Я придумала как ужать до метра и сижу сверхсчастливая. Но там тааааакой дизайн Для мобилок и сейчас еще актуально:) Ну мне диз хотел бэкграундом на весь контент влепить плюху в пнг, которая под 10 метров весила XD ну общим весом у меня страничка наверно и выходит на 1.5 -2мб. шапка+футер+7 превьюшек с картинкой в каждой. Благо ослик подятнулся, хоть градиент стал хавать, а то год назад он даже цвета левые выдавал при градиенте. Добавлено через 3 минуты gone, я так и предлагал, но вариант Taatshi, по-моему будет лучше. А прорезинить у тебя так выйдет, только если использовать разные блоки. т.е. у тебя будет 2 экземпляра "маски" и 2 экземпляра кнопки. 0