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

[Gasherezzz]

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

 

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

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

[veremey]

 

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

 

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

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

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

 

Сейчас не видно код решения задачи ((  Возможно ли увидеть решение этой задачи?  ОоОчень интерестно!!!

[Zverushka]

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

 

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

Угу, а теперь открой в ослике его =).........

Как-то я как не связывалась с свг - выходило очень не кроссбразерно даже для последних версий.

Для кнопки есть способ все это Г реализовать, но слишком муторно - может проще взять готовую картинку и ее background-size? достаточно удобно...

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

Потом используем второй слой для стрелки. Делаем ей 2 границы черным, 2 не делаем, поворачиваем - стыкуем. И последний штрих. Внутри этого слоя помещаем еще один слой с градиентом радиальным, таким же, какой был у самой кнопки и его поворачиваем обратно. Для того, чтобы изгибы совпали - можно исползовать слои одинаковых размеров и уже обрезать лишнее.

Если ничего непонятно - то примерно вот так http://jsfiddle.net/Zverushka/8dmWh/3/ но это для абсолютных величин, только нужно стыковать, смотреть как по процентам пойдет. Плюс с анротейтом какая-то не очень хорошая вещь - блок почему-то уезжает неизвестно куда и отпозиционировать его становится тяжело. Возможно для динамической растяжки и не выйдет грамотно состыковать слои...

Это первый способ.

Второй способ. Рисуем квадрат, в нем градиент. Обрезаем через клип-паз (не кроссбразерно), и еще один такой же слой черного - также обрезаем с небольшим зазором - это и будет черная граница.

Edited March 29, 2014 by Zverushka

[veremey]

 

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

 

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

Угу, а теперь открой в ослике его =).........

Как-то я как не связывалась с свг - выходило очень не кроссбразерно даже для последних версий.

Для кнопки есть способ все это Г реализовать, но слишком муторно - может проще взять готовую картинку и ее background-size? достаточно удобно...

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

Потом используем второй слой для стрелки. Делаем ей 2 границы черным, 2 не делаем, поворачиваем - стыкуем. И последний штрих. Внутри этого слоя помещаем еще один слой с градиентом радиальным, таким же, какой был у самой кнопки и его поворачиваем обратно. Для того, чтобы изгибы совпали - можно исползовать слои одинаковых размеров и уже обрезать лишнее.

Если ничего непонятно - то примерно вот так http://jsfiddle.net/Zverushka/8dmWh/3/ но это для абсолютных величин, только нужно стыковать, смотреть как по процентам пойдет. Плюс с анротейтом какая-то не очень хорошая вещь - блок почему-то уезжает неизвестно куда и отпозиционировать его становится тяжело. Возможно для динамической растяжки и не выйдет грамотно состыковать слои...

Это первый способ.

Второй способ. Рисуем квадрат, в нем градиент. Обрезаем через клип-паз (не кроссбразерно), и еще один такой же слой черного - также обрезаем с небольшим зазором - это и будет черная граница.

 

Спасибо   БОЛЬШОЕ.

Я затупил, не уточнил.... возможно ли увидеть решение второй http://joxi.ru/sqMEUxjKTJATR6BW7dk задачи?    

Edited April 3, 2014 by veremey

[Struggle]

http://jsfiddle.net/Gn5p3/ (большая имга) и потом подгоняем размер если надо http://htmlbook.ru/css/background-size

http://jsfiddle.net/3F5p7/1/ - пилим градиентом

 

И есть еще вариант с псевдоэлементами (если вместо цвета нужна будет какая-та картинка), техника http://htmlforum.ru/index.php?showtopic=48464#entry324346

 

 

больше хз как

Если именно цвет - то градиент сгодиться 

вот он http://www.colorzilla.com/gradient-editor/

 

И есть еще супер техника, видел у крутых верстальщиков - двигают фон как-то внутри дива, тем самым можно освободить 50% + добавить 2 фоновую картинку и все будет ок (не путать со спрайтами), тянут не все версии, пол года назад тестил - работало только в хроме и последнем ff

Edited April 5, 2014 by Struggle

[veremey]

http://jsfiddle.net/Gn5p3/ (большая имга) и потом подгоняем размер если надо http://htmlbook.ru/css/background-size

http://jsfiddle.net/3F5p7/1/ - пилим градиентом

 

И есть еще вариант с псевдоэлементами (если вместо цвета нужна будет какая-та картинка), техника http://htmlforum.ru/index.php?showtopic=48464#entry324346

 

 

больше хз как

Если именно цвет - то градиент сгодиться 

вот он http://www.colorzilla.com/gradient-editor/

 

И есть еще супер техника, видел у крутых верстальщиков - двигают фон как-то внутри дива, тем самым можно освободить 50% + добавить 2 фоновую картинку и все будет ок (не путать со спрайтами), тянут не все версии, пол года назад тестил - работало только в хроме и последнем ff

Struggle Спасибо тебе.  Но...

Я помню там задача была решена только с помощью CSS ))

[Struggle]

 

http://jsfiddle.net/Gn5p3/ (большая имга) и потом подгоняем размер если надо http://htmlbook.ru/css/background-size

http://jsfiddle.net/3F5p7/1/ - пилим градиентом

 

И есть еще вариант с псевдоэлементами (если вместо цвета нужна будет какая-та картинка), техника http://htmlforum.ru/index.php?showtopic=48464#entry324346

 

 

больше хз как

Если именно цвет - то градиент сгодиться 

вот он http://www.colorzilla.com/gradient-editor/

 

И есть еще супер техника, видел у крутых верстальщиков - двигают фон как-то внутри дива, тем самым можно освободить 50% + добавить 2 фоновую картинку и все будет ок (не путать со спрайтами), тянут не все версии, пол года назад тестил - работало только в хроме и последнем ff

Struggle Спасибо тебе.  Но...

Я помню там задача была решена только с помощью CSS ))

 

ну вот градиент)

[veremey]

 

 

http://jsfiddle.net/Gn5p3/ (большая имга) и потом подгоняем размер если надо http://htmlbook.ru/css/background-size

http://jsfiddle.net/3F5p7/1/ - пилим градиентом

 

И есть еще вариант с псевдоэлементами (если вместо цвета нужна будет какая-та картинка), техника http://htmlforum.ru/index.php?showtopic=48464#entry324346

 

 

больше хз как

Если именно цвет - то градиент сгодиться 

вот он http://www.colorzilla.com/gradient-editor/

 

И есть еще супер техника, видел у крутых верстальщиков - двигают фон как-то внутри дива, тем самым можно освободить 50% + добавить 2 фоновую картинку и все будет ок (не путать со спрайтами), тянут не все версии, пол года назад тестил - работало только в хроме и последнем ff

Struggle Спасибо тебе.  Но...

Я помню там задача была решена только с помощью CSS ))

 

ну вот градиент)

 

Мне интересен ответ на  вот эту задачу  http://joxi.ru/sqMEUxjKTJATR6BW7dk   ))  Поможете?

Edited April 11, 2014 by veremey

[Galaxy]

так klierik в первом ответе выложил готовый вариант - http://jsfiddle.net/klierik/m6CQ3/ ,  чем он не подходит?

[veremey]

так klierik в первом ответе выложил готовый вариант - http://jsfiddle.net/klierik/m6CQ3/ ,  чем он не подходит?П

 У меня раньше не открывало его работу, сейчас открывает. Хмм, странно.  Большое Вам спасибо за ответ!!!!