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

Добрый день, подскажите пожалуйста можно ли такое сверстать css? если да то в какую сторону смотреть?
image
  • Вопрос задан
  • 4502 просмотра
Пригласить эксперта
Ответы на вопрос 5
d4rkr00t
@d4rkr00t
Да можно смотреть в сторону градиентов и transform
Ответ написан
@Softlink
В такие моменты приходят в голову гениальные слова: «вы не должны делать глупости только потому, что CSS позволяет вам это».
По делу. Вместо того, чтобы лепить несколько дивов, сделайте все картинкой в одном диве. Вырезать слой с крестом и градиентом в отдельный фон с полупрозрачностью и растягивать его через background-size, если в этом есть необходимость: jsfiddle.net/Softlink/rX4ea/
Ответ написан
@egorinsk
Я бы сделал джипегом. Почему?

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

<?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>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы