Подскажите как сверстать?

Question

[enchikiben]

Добрый день, подскажите пожалуйста можно ли такое сверстать css? если да то в какую сторону смотреть?

Answer 1

[d4rkr00t]

Да можно смотреть в сторону градиентов и transform

Comments

[enchikiben]

Но радиальные градиенты нельзя же по горизонтали разделить

[d4rkr00t]

можно сделать 4-мя линейными

[d4rkr00t]

как-то так примерно codepen.io/d4rkr00t/pen/dwsIe в chrome работает, с префиксами не стал заморачиваться

[enchikiben]

а закруглить тогда как?

[d4rkr00t]

codepen.io/d4rkr00t/pen/dwsIe примерно, можно поиграться с размерами и точками градиента

Answer 2

[Максим]

Как-то так, только используя градиенты codepen.io/kickboxer/pen/quoFw

Answer 3

[Softlink]

В такие моменты приходят в голову гениальные слова: «вы не должны делать глупости только потому, что CSS позволяет вам это».
По делу. Вместо того, чтобы лепить несколько дивов, сделайте все картинкой в одном диве. Вырезать слой с крестом и градиентом в отдельный фон с полупрозрачностью и растягивать его через background-size, если в этом есть необходимость: jsfiddle.net/Softlink/rX4ea/

Comments

[denver]

Это ж наверняка тестовое задание :)

Answer 4

[egorinsk]

Я бы сделал джипегом. Почему?

JPG легкий и хорошо сжимает файлы с плавными переходами цветов
JPG поддерживается в IE6, 7, 8, на смартфонах и айфонах
JPG не тормозит при прокрутке и перерисовке страницы. Из-за нездорового увлечения CSS3 и SVG и тяжелой верстки сайт может медленно рендериться, скроллинг станет дерганным, а анимация не потянет 60 fps. Таких сайтов сейчас становится все больше и больше.

Comments

[Softlink]

Можно и жипегом и чем угодно. В пнг этот див можно будет навешивать на любой фон(если оно, конечно, необходимо).

Answer 5

[Stdit]

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg whdth="600" height="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <defs>
        <radialGradient id="g1" cx="55%" cy="45%" r="50%" fx="50%" fy="50%">
            <stop offset="0%" style="stop-color:hsl(190,50%,50%);stop-opacity:1" />
            <stop offset="100%" style="stop-color:hsl(190,50%,20%);stop-opacity:1" />
        </radialGradient>
        <linearGradient id="g2" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" style="stop-color:hsl(190,50%,20%);stop-opacity:1" />
            <stop offset="50%" style="stop-color:hsl(190,50%,30%);stop-opacity:1" />
            <stop offset="50%" style="stop-color:hsl(190,50%,100%);stop-opacity:1" />
            <stop offset="100%" style="stop-color:hsl(190,50%,20%);stop-opacity:1" />
        </linearGradient>
        <linearGradient id="g3" x1="0%" y1="100%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:hsl(190,50%,20%);stop-opacity:1" />
            <stop offset="50%" style="stop-color:hsl(190,50%,30%);stop-opacity:1" />
            <stop offset="50%" style="stop-color:hsl(190,50%,100%);stop-opacity:1" />
            <stop offset="100%" style="stop-color:hsl(190,50%,20%);stop-opacity:1" />
        </linearGradient>
        <rect id="layer1" width="600" height="500" fill="url(#g1)"/>
        <rect id="layer2" width="600" height="500" fill="url(#g2)"/>
        <rect id="layer3" width="600" height="500" fill="url(#g3)"/>
        <filter id="f1" x="0" y="0">
            <feImage result="op1" xlink:href="#layer1"/>
            <feImage result="op2" xlink:href="#layer2"/>
            <feImage result="op3" xlink:href="#layer3"/>
            <feBlend mode="multiply" in="op1" in2="op2" result="op12"/>
            <feBlend mode="multiply" in="op12" in2="op3"/>
        </filter>
    </defs>
    <rect width="500" height="500" filter="url(#f1)"/>
    <text font-size="28" x="20" y="100" width="500" style="stroke:none;fill:white">
       Может, не надо рисовать картинки на CSS?
    </text>
    <text font-size="40" x="20" y="400" width="500" style="stroke:none;fill:white">
        Для этого ведь создан SVG.
    </text>
</svg>

Comments

[Stdit]

Впрочем, не лучше. Блендинг с градиентами, оказалось, пока ещё довольно глючная вещь, особенно в ФФ (как ни странно), и особенно если их надо динамически растягивать.