Ответы пользователя по тегу CSS
  • Подскажите как сверстать?

    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>
    
    Ответ написан
    1 комментарий
  • border-collapse: separate или как побороть двойную линию между ячейками?

    Stdit
    @Stdit
    jsfiddle.net/6AHnH/1/
    В хроме и фф работает, в ие проверить пока не могу, но точно не будет работать в ие6.
    Ответ написан
    1 комментарий
  • Возможно ли сверстать только css'ом?

    Stdit
    @Stdit
    Конечно же картинкой. CSS-ом вообще лучше не делать сложные элементы, потому что картинки практичнее. Они более совместимые, быстрее рендерятся, понятнее верстаются и переверстываются, и к тому же во многих случаях картинки в подходящем формате (например png8 с альфой) занимают меньше места, чем горы стилей с префиксами браузеров.
    Ответ написан
    Комментировать
  • Меня штормит от параллакс-эффекта. Я ненормальный?

    Stdit
    @Stdit
    Я вообще не люблю пользоваться «дизайнерскими» сайтами с наворотами, от которых голова идёт кругом, и обожаю классику в 2-3 колонки без параллаксов и залипающих шапок, на белом фоне. Может это инертность и привычка, а может лень разбираться в потрясающих анимированных меню навороченных интерфейсов, которые обычно ещё раздражают тем, что грузятся по несколько секунд и тормозят на машинах слабее той, что была у создателя и кушают заряд аккумулятора. Хотя да, выглядеть это может красиво и «современно», и вполне допустимо для для промо-сайтов, на которые после получения эстетического удовлетворения никто не должен возвращаться.
    Ответ написан
    Комментировать
  • Как сделать div с границей, «обволакивающей» объекты внутри него?

    Stdit
    @Stdit
    В CSS это вряд ли получится, если только вручную приделывать границы к блокам на яваскрипте. Но нечто похожее можно сделать на SVG. Сначала нарисовать все блоки и сгруппировать. Потом взять альфа-канал группы, и расширить его фильтром feMorphology (dilate). Потом для получившегося «пятна» применить определение границ матрицей feConvolveMatrix. Потом нарисовать эту границу поверх исходника, при желании украсить. Как-то так. Если не понятно, вот набросок: jsfiddle.net/sSMT4/
    Ответ написан
    1 комментарий
  • Можно ли сделать радиальное изменение полупрозрачности?

    Stdit
    @Stdit
    Если фон монотонный, можно сделать оверлей сверху картинкой (png), прозрачной внутри и с цветом фона по краям.
    Ответ написан
    4 комментария
  • Прокрутка div вместо страницы?

    Stdit
    @Stdit
    За это отвечает css свойство overflow, высота должна быть ограничена.
    Ответ написан
  • Почему обрезается div?

    Stdit
    @Stdit
    Блок bb заявляет, что любой блок должен быть от него на расстоянии не менее 50 прикселей. Родительского блока это не касается. Для отступов от границ родительского блока, у родителя должны быть поля (padding) jsfiddle.net/JyHCd/ или родительский блок должен ограничивать взаимодействие вложенных блоков за своими границами (overflow jsfiddle.net/JyHCd/1/ ). Ещё в некоторых специфических случаях допустим такой вариант: jsfiddle.net/JyHCd/2/
    Ответ написан
    3 комментария
  • Как правильно писать тег A?

    Stdit
    @Stdit
    Это неоднозначно, объясню подробнее:
    Когда-то для порядка взял себе за правило: все изображения делятся на изображения дизайна и изображения контента. К первой категории относятся всевозможные уголки, рамки, бекграунды ссылок и кнопок и т.д. Ко второй категории относятся аватарки, скриншоты, фотки и прочий загруженный и/или модифицируемый контент. Так вот, первые должны быть заданы через CSS, а вторые — через IMG (как следствие, их можно сохранить кликом, задать им alt и т.д.). Ссылка может относиться к обоим категориям. Если это просто ссылка (например, share on twitter с птичкой), то вариант №2. Если же это ссылка (к примеру) на просмотр полного размера фотки, или на профиль пользователя, тогда только вариант №1. Вариант №3 полностью отпадает, потому что хаки и магия — это зло.
    Ответ написан
    5 комментариев
  • Две колонки: резиновая и фиксированная. Float и Clear в первой?

    Stdit
    @Stdit
    Очевидно же: не использовать float не по назначению (всплытие и обтекание текстом): jsfiddle.net/yRcg7/1/
    Ответ написан
    2 комментария
  • CSS: помогите написать selector черезстрочной подсветки без учета определенного класса

    Stdit
    @Stdit
    Насколько мне известно, селектор nth-child выбирает только по номеру потомка. Селектор nth-of-type тоже не годится, потому что нечем заменить tr. Если эта задача связана с формированием секций в таблице, то выходом может быть использование для каждой своего tbody:
    <tbody>
        <tr><td>a</td></tr>
        <tr><td>a</td></tr>
        <tr><td>a</td></tr>
    </tbody>
    <tbody>
        <tr><td>a</td></tr>
        <tr><td>a</td></tr>
        <tr><td>a</td></tr>
        <tr><td>a</td></tr>
    </tbody>
    Конечно, такую таблицу немного сложнее генерировать, но всё же я думаю лучше, чем писать class=«odd», class=«even» в каждой строке, к тому же это не приведёт к искажениям после динамического удаления или добавления строк в секцию.
    Ответ написан