Сложная верстка

[Gasherezzz]

Добрый день! У меня есть пара не простых заданий. Ломаю голову, думаю как их сделать, если кто нибудь знает прошу помочь, буду очень очень признателен.

 

http://joxi.ru/dKMEU_3JTJB8WSyJq2k - вот первое

http://joxi.ru/sqMEUxjKTJATR6BW7dk - вот второе

[klierik]

1. http://jsfiddle.net/klierik/m6CQ3/

[Gasherezzz]

klierik, огромное спасибо! Второе задание минус)) Осталось первое.

[Great Rash]

Вы не указали самого главного: под какие браузеры нужна совместимость?

[Gasherezzz]

Совместимость ie8 и больше, остальные все самые главные браузеры (moz, opera, chrom, safari) последних версий

[klierik]

имхо, кнопку нереально сделать под ИЕ8. но если кто-то сделает под современные (Gecko, Webkit), я с удовольсвтием поставлю "+"

 

ps: свой пример я не проверял нигде, кроме Chrome.

[Gasherezzz]

Ну я тоже думаю, что в ie8 ничего не выйдет. Что только не пробовал уже О_о

[Great Rash]

Кнопку можно сделать через связку VML + SVG. Будет работать везде.

[Игорь Ермаков]

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

Edited February 19, 2014 by Игорь Ермаков

[xzarxzes]

Добрый день! У меня есть пара не простых заданий. Ломаю голову, думаю как их сделать, если кто нибудь знает прошу помочь, буду очень очень признателен.

 

http://joxi.ru/dKMEU_3JTJB8WSyJq2k - вот первое

http://joxi.ru/sqMEUxjKTJATR6BW7dk - вот второе

Вот что то похожее, только если растягивать то там будут косяки с фоном, и фон не придумал как закруглить. http://jsfiddle.net/xzarxzes/yp3TB/1/. Там у псевдо - элемента background: transparent еще лишнее, забыл убрать. 

Edited February 19, 2014 by xzarxzes

[Gasherezzz]

Я фон закруглил. С отростком все сложнее. Не знаю как там бэкграунд продолжить, тем более там все от шрифта меняется

[xzarxzes]

Я фон закруглил. С отростком все сложнее. Не знаю как там бэкграунд продолжить, тем более там все от шрифта меняется

А как фон закруглил ?

[Gasherezzz]

http://jsfiddle.net/Gasherez/G2n6S/

 

А как дальше фиг знает. Может быть вообще не так нужно делать

[Игорь Ермаков]

Ну, кстати, кривизна получается здесь только по краям. 

[xzarxzes]

Добрый день! У меня есть пара не простых заданий. Ломаю голову, думаю как их сделать, если кто нибудь знает прошу помочь, буду очень очень признателен.

 

http://joxi.ru/dKMEU_3JTJB8WSyJq2k - вот первое

http://joxi.ru/sqMEUxjKTJATR6BW7dk - вот второе

Вот мое решение второго задания, если интересно http://jsfiddle.net/xzarxzes/Lpb27/

[mrnobody]

Вот мое решение второго задания, если интересно http://jsfiddle.net/xzarxzes/Lpb27/

 

Цвет текста в сером блоке — черный, а в черном блоке — белый, а у вас везде белый.

[xzarxzes]

 

Вот мое решение второго задания, если интересно http://jsfiddle.net/xzarxzes/Lpb27/

 

Цвет текста в сером блоке — черный, а в черном блоке — белый, а у вас везде белый.

 

Верно, не обратил внимание что там разные цвета.

[xzarxzes]

http://jsfiddle.net/Gasherez/G2n6S/

 

А как дальше фиг знает. Может быть вообще не так нужно делать

отросток прицепил, дальше не знаю как, если добавить текст все ломается. http://jsfiddle.net/xzarxzes/K5RPS/

[Gasherezzz]

Походу Great Rash прав. Нужно через SVG делать. Только фиг знает как это. Ни разу не сталкивался с этим((

[Gasherezzz]

Ау, куда все пропали? Больше нет никаких идей???

[klierik]

а ты вариант с SVG уже испробовал?

[Great Rash]

Статья для размышлений.

[Gasherezzz]

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

Еще бы эта статья на русском была))))

Кстати они же там вставляют svg файл бэкграундом. Тут то нужно самому все сделать. Если эту "кнопку" нарисовать хотя бы в том же иллюстраторе, то вообще никаких проблем не должно быть, потому что векторная графика тянется и сжимается до любых размеров без всяких потерь.

[Great Rash]

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

 

UPD: Вот как-то так.

[Gasherezzz]

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

 

UPD: Вот как-то так.

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

[Gasherezzz]

Короче, вот что у меня в итоге получилось, не могу допереть как поставить бордер и закруглить углы. Может кто нибудь знает как делать дальше??? http://jsfiddle.net/Gasherez/XjNBs/

Edited February 24, 2014 by Gasherezzz