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>

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

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

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

Если фон монотонный, можно сделать оверлей сверху картинкой (png), прозрачной внутри и с цветом фона по краям.

За это отвечает css свойство overflow, высота должна быть ограничена.

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

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

Очевидно же: не использовать float не по назначению (всплытие и обтекание текстом): jsfiddle.net/yRcg7/1/

Насколько мне известно, селектор 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» в каждой строке, к тому же это не приведёт к искажениям после динамического удаления или добавления строк в секцию.