• Домашка №2: тень

    Веб-технологи всего мира ненавидят дизайнеров, которые рисуют вот такие блоки:

    screenshot

    С одной стороны — выглядит красиво и привлекательно, а с другой стороны кроссбраузерная верстка блока со скругленными уголками, да еще и с полупрозрачной тенью — далеко не тривиальная задача. Каждый технолог решает такие задачи по-своему, причем зачастую реализация напрямую зависит от внешнего вида декораций: для легкой и небольшой тени — один код, для массивной — другой, для скругленных уголков — третий и так далее.

    Предлагаю читателям придумать универсальный способ верстки таких блоков, на который можно будет спокойно ссылаться и дизайнерам, и технологам (и который попадет во все учебники по HTML/CSS :)). В Техногрете уже есть что-то подобное, но лично меня этот способ не устраивает по многим параметрам: это и большое количество декоративных HTML-элементов (9 штук), и запредельное количество хаков для IE, и неспособность работать в IE с включенным доктайпом. Однако оттуда можно почерпнуть некоторые интересные мысли.

    Итак, хороший способ должен:

    • работать во всех современных браузерах, включая IE6;
    • не использовать JavaScript, только HTML и CSS;
    • одинаково хорошо работать как для блоков с заданной шириной (пиксели, проценты, em’ы), так и с шириной auto;
    • содержать как можно меньше декоративных HTML-элементов (количество элементов в дереве напрямую влияет на производительность сайта);
    • использовать как можно меньше отдельных изображений (в идеале должен получиться один спрайт).

    А настоящие джедаи должны выполнить следующие условия:

    • Способ должен одинаково хорошо работать как для блочных элементов, так и для инлайновых: структура HTML остается одинаковой, правки вносим только в CSS.
    • Не использовать expressions в IE. В крайнем случае — одноразовый expression.
    • Использовать как можно меньше хаков.

    Вот вам заготовки:

    decor1decor2

    На основе этих заготовок нужно сделать решение, выложить его куда-нибудь к себе на хостинг и оставить ссылку в комментариях. Если некуда выложить — присылайте архив мне по почте. Обсуждение результатов будет примерно через неделю.

  • 85 комментариев

    1. 7 октября 2009

      Недостаточно чёткое условие. Известен ли цвет фона блока? Известен ли цвет фона подложки? Должен ли он одинаково круто рисовать уголки с разными радиусами (1пх, 5пх, 100пх)? Должен ли он подразумевать быструю смену цвета и размера тени, например?

    2. 7 октября 2009

      предлагаю сделать картинкой :)

    3. Сергей Чикуенок
      7 октября 2009

      Недостаточно чёткое условие. Известен ли цвет фона блока? Известен ли цвет фона подложки?

      Посмотрите на заготовки в фотошопе и на скриншот вверху

      Должен ли он одинаково круто рисовать уголки с разными радиусами (1пх, 5пх, 100пх)?

      В условии четко сказано: «Предлагаю читателям придумать универсальный способ верстки таких блоков…»

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

      А это вы уже сами для себя решите :)

    4. 7 октября 2009

      Известен ли цвет фона блока? Известен ли цвет фона подложки?
      Кстати, хорошие вопросы. Если кто наверстает вариант когда и то и другое задаётся в CSS — станет моим героем ;)

    5. Ante
      7 октября 2009

      Сергей, отличное задание, спасибо.

      Обнаружил, что в IE 5.5+ вполне работает фильтр blur: http://stanut.by/_/dz02/ie-blur/ Вы не тестировали, насколько в принципе имеет смысл пытаться использовать его на больших проектах?

    6. Сергей Чикуенок
      7 октября 2009

      С фильтрами я стараюсь связываться как можно меньше: они добавляют много проблем (вроде отключенного сглаживания текста или невозможность кликнуть на ссылку), жрут много памяти и снижают время инициализации страницы. На одном проекте около сотни блоков с AlphaImageLoader инициализировались секунд 30 в IE6, причем все это время страницу нельзя было даже проскроллить.

    7. 7 октября 2009

      Ой, как ты вовремя. Как раз есть какая-то похожая задумка. Видел, что Горбуновские ребята сделали с конституцией? Как тебе?

    8. kizu
      7 октября 2009

      Хорошее задание, однако, вряд ли можно получить хороший универсальный пример с «джедайскими» условиями.

      Во-первых, не думаю, что можно написать действительно универсальный вариант «красиво». Скорее всего подобный код будет слишком сложен в применении и адаптации под имеющийся дизайн (хотя, если и это включать в понятие универсальности…), например: в идеале для изображений должны использоваться спрайты, плюс блок должен тянуться в бесконечность как по ширине, так и по высоте — при этом всём мы не сможем реализовать в шестом IE всё это без весомого количества дополнительных элементов.

      Во-вторых, в том же шестом IE вроде как нет нормального (без недостатков, которые бы уничтожали необходимую универсальность) способа растянуть блок с полупрозрачными пнг на всю высоту родителя с неизвестной высотой без применения неодноразовых экспрешнов. Мне не известны случаи подобного применения Силы :)

      В-третьих, я не уверен, что подобный универсальный блок необходим. Всегда можно найти тот или иной компромисс, который бы сильно упрощал дело. Мне кажется, более практичным было бы описание нескольких почти универсальных способов, где особенности одних компенсировали бы недостатки других.

      Но, так или иначе, я попробую подойти к снаряду и набросать что-нибудь, так что на неделе обязательно кину сюда ссылку со своей попыткой :)

    9. Сергей Чикуенок
      7 октября 2009

      Ох уж эти программисты… :) Скажем так, для решения этой задачи мне потребовалось 5 декоративных HTML-элементов и один спрайт. Замечательно работает в том числе и в IE6 в блоке с неопределенной высотой.

      А универсальное решение нужно для того же, для чего был создан jQuery и им подобные: чтобы не тратить время на изобретение и починку очередного велосипеда, а взять готовое, проверенное решение.

    10. kizu
      7 октября 2009

      А у тебя именно с этим спрайтом может быть ширина и высота блока в стопятьсот тысяч пикселей? :D

    11. Сергей Чикуенок
      7 октября 2009

      Если сделаю таким — будет. Другой вопрос: надо ли это в 100% случаев?

    12. 7 октября 2009

      Вообще интересно :)

      С одной стороны — выглядит красиво и привлекательно, а с другой стороны кроссбраузерная верстка блока со скругленными уголками, да еще и с полупрозрачной тенью — далеко не тривиальная задача.

      Вот так у меня получилось где-то за час, один здоровый спрайт 1500х1500. ИЕ7, ИЕ8, ФФ, хром — всё замечательно. Все отступы в CSS обоснованы и вычисляются исходя из исходной картинки.

      Как инлайн-элемент работает в не-ИЕ, судя по моему опыту вполне реально его сделать работающим. С экспрешшнами тем более.

      А дальше лень пока, хотя представляю мысленно как сделать, делал до этого. Есть идеи как нарезать спрайт так, чтобы левая и правая сторона тайлились/растягивались. Произвольная ширина вроде не нужна, можно поставить условие «до 3000 пикселей».

      Пусть это и неправильно, обычно в таких случаях я для IE6 делаю PNG без тени — в данном случае оно кстати тоже сработает. Вот чесслово, IE6 в большинстве случаев стоит у людей, которые не оценят эту тенюшку, зато ОТЛИЧНО почувствуют тормоза от фильтров, хаков и экспрешенов. :) Есть еще такая вещь как юзабилити, время отклика страницы важно.

      Хотя можно написать длинный, но одноразовый, экспрешн, который добавит нужные элементы в DOM для этих блоков — тогда проблема решается. Если считаем, что высота и ширина блока больше не изменится — тут expression будет еще проще.

      Послать в таком виде, если до конца недели времени/желания не будет его доделать до уровня, чтобы в ИЕ6 была полупрозрачная тень? :)

    13. Сергей Чикуенок
      7 октября 2009

      Видел, что Горбуновские ребята сделали с конституцией? Как тебе?

      Ничего так, довольно приятно и удобно. Только вот анимация слишком грубая и топорная.

    14. 7 октября 2009

      Порезало код…

      <div class="shadowed">
      <u></u>
      <div class="body">С одной стороны — выглядит красиво и привлекательно, а с другой стороны кроссбраузерная верстка блока со скругленными уголками, да еще и с полупрозрачной тенью — далеко не тривиальная задача.</div>
      <b><i></i></b>
      </div>

    15. kizu
      7 октября 2009

      Ну вот уже и неуниверсальность! %) Наверное, я совсем перфекционист, если рассматриваю подобный вариант.

      Вообще, буду ждать результатов и твоего варианта :)

      А, и можно ещё один вопрос по твоему варианту? ;)
      Есть ли у твоего блока overflow:hidden? Я пока в голове вижу один вариант как обойтись без лишних блоков в IE чтобы сделать спрайт + прозрачный пнг, но тут нужен как раз overflow:hidden.

    16. Сергей Чикуенок
      7 октября 2009

      Ну вот уже и неуниверсальность! %) Наверное, я совсем перфекционист, если рассматриваю подобный вариант.

      Нет, вы просто ищете волшебную палочку, которая должна все делать. Не может быть 100% универсальных методов, которые качественно решат все похожие задачи, особенно в нашем кроссбраузерном мире. Всегда нужно идти на некоторые компромиссы. Другой вопрос — какие это компромиссы и как часто они возникают. Мой способ решает где-то 99% моих задач, для оставшегося 1% использую другие решения.

      Есть ли у твоего блока overflow:hidden?

      Да, есть.

    17. kizu
      7 октября 2009

      Ну, я-то как раз и не ищу волшебную палочку, а о том и говорю, что для того 1%, который наш универсальный способ не решит, надо придумать другой универсальный способ, у которого будет иной недостаток.

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

    18. 7 октября 2009

      На realore.com если ткнуть снизу в поддержку то выплывет что то подобное

    19. Ante
      7 октября 2009

      Простой вариант, почти повторяет техногретский: http://stanut.by/_/dz02/quad/

      [+] 1 картинка, 5 дополнительных блоков (без инлайна 4), работает в qm.
      [-] Размеры ограничены размерами спрайта, инлайн не работает в ff2, 1 условный экспрешшн.

      Появилась идея как сделать без ограничения по высоте одной картинкой и с 6 доп. блоками, 5 пока кажется запредельным кунфу. :)

    20. 7 октября 2009

      Мой вариант:
      http://stepan-reznikov.appspot.com/static/homework2-decor/index.html

      нет expressions, один спрайт

    21. 8 октября 2009

      Градиент или узор внутрь блока — иначе неинтересно.

    22. Сергей Чикуенок
      8 октября 2009

      То есть у тебя уже есть универсальное решение этой задачи? :)

    23. 8 октября 2009

      http://www.smileycat.com/miaow/archives/000044.php
      http://css-discuss.incutio.com/?page=RoundedCorners
      фор инспирейшон
      для каждой задачи свои уголки, иногда можно только цсс, иногда цсс с картинками а можно и просто дж-сом
      зы: реализация 1имдж, 5елемнтов с верхнем списке есть, давно

    24. Сергей Чикуенок
      8 октября 2009

      А можно ссылку на способ с одной картинкой и пятью элементами?

    25. GreLI
      8 октября 2009

      Сергей, а у вас есть решение для неопределённой ширины? У меня есть, придуманное год назад. Работает в IE6 и остальных браузерах, для этого случая тоже пять элементов.

      Есть модификации для полностью полупрозрачного фона и выступов (например стрелочки) в разных углах. С одной картинкой, конечно. Но надо куда-то выложить, из-за этого всё никак не опубликую в интернете. Можно вам отослать как в прошлый раз?

    26. Сергей Чикуенок
      8 октября 2009

      Да, присылайте

    27. 8 октября 2009

      5 блоков и спрайт. Но только если vml, если alphaimageloader, то 4 картинки конечно же. Пришлю позже

    28. daer
      8 октября 2009

      выложить пример некуда, так что он был скинут на почту
      http://chikuyonok.ru/u/hw2/daer/templates/round.html

    29. GreLI
      8 октября 2009

      Выслал на почту моё решение. Произвольная ширина и высота, ограниченные только размерами картинки, в том числе размеры, зависящие от содержимого. Сделано исключительно при помощи CSS. Устойчиво к динамическим изменениям размеров, шрифтов и т. п.

      Поддерживаются IE5.5+ и практически все другие распространённые браузеры. В IE 6 и ниже используется AlphaImageLoader.

      Сделано шестью элементами. Один можно сократить, но я оставил для удобства. Есть вариант с полностью полупрозрачным фоном. Возможны разные вариации — полный простор для творчества. В стилях для этого предусмотрено дополнительные объявления.

      http://chikuyonok.ru/u/hw2/greli/homework2.html

    30. kizu
      8 октября 2009

      Понравился вариант Ante лаконичностью :)
      Сам делал что-то подобное, но в итоге остановился на ином варианте — без экспрешнов, но с несколькими ограничениями.

      Вот: http://test.kizu.ru/crnrz/var-1001.html

      Вообще, можно этот вариант ещё допиливать, но направление должно быть ясно. Но что-то дальше этот вариант разрабатывать лень, я лучше посижу над вариантом, конечным по ширине и бесконечным по высоте.

      Ну и ещё у меня есть вариант с экспрешном на растягивание высоты, но при этом без overflow:hidden, т.е. за его пределы можно что-нибудь вытаскивать. Я его тоже попробую до приемлимого состояния доделать и кину сюда.

    31. GreLI
      9 октября 2009

      В моём примере кстати вообще нет overflow. Для обрезания в IE6 используется то, что за пределами элемента с hasLayout отображаются только блоки с position:relative. Такое вот полезное применение бага.

    32. GreLI
      9 октября 2009

      …отображаются только блоки с position:relative.

      Ну или абсолютно позиционированные. Декоративные же либо позиционируются абсолютно с клипингом, либо проставлен position:static.

    33. kizu
      9 октября 2009

      Для обрезания в IE6 используется то, что за пределами элемента с hasLayout отображаются только блоки с position:relative. Такое вот полезное применение бага.

      О, а прикольно, кстати, спасибо.

    34. set
      9 октября 2009

      GreLI, круть! :) мне понравилось ;)

    35. Костя
      10 октября 2009

      GreLI, ваш вариант подвесил мой IE6, с первого раза :)

    36. GreLI
      10 октября 2009

      AlphaImageLoader подвешивает IE пока не загрузятся картинки. В этом его недостаток.

      Интересно было бы посмотреть на реализацию с VML. И решена ли там проблема запроса картинок при каждой загрузке. Причём BackgroundImageCache не помогает в этом случае.

    37. Костя
      10 октября 2009

      Мой ослик так и не отвис, помогла комбинация ctrl alt del.
      А это достаточно серьезный недостаток.

      Возможно, такой большой спрайт не панацея :)

    38. GreLI
      10 октября 2009

      Не панацея, но пусть уж ждёт загрузки одной картинки, а не четырёх.

    39. frozenbear
      10 октября 2009

      мой вариант:

      http://epoint-group.ru/css-work/round-corners/

      вроде справился со всеми требованиями, в том числе «джедайскими» ) блочные+инлайн элементы на основе одной и той же разметки, 5 span, один спрайт, чистый CSS, кроссбраузерно, минимум хаков (точнее, полтора ))

    40. frozenbear
      10 октября 2009

      из недостатков:

      1. Работает только с IEPNGFIX: supersleight ломает разметку, DDbelatedPNG добавляет тонкие белые линии в углах тени.
      2. Спрайт имеет специальный хитрый вид ;-)
      3. Если требуется жестко задать высоту, то ее нужно указать внутреннему блоку, а не внешнему. Теоретически можно исправить.
      4. Реальная высота и щирина блока будут меньше указанных, так как в них входит тень. То же самое касается позионирования: блок будет смещен на размер верхней и левой тени. Можно исправить.
      5. Максимальный размер блока приблизительно равен размеру спрайта, деленному на два.
      6. Минимальная высота строчного элемента определяется радиусом закругления + небольшой промежуток под сам текст.
      7. Нужно быть аккуратным с элементами внутри блока, имеющими margin: они могут исказить разметку.

    41. 10 октября 2009

      Хмм изображение весит многовато конечно :/

    42. set
      10 октября 2009

      frozenbear, немного странный вид в опере 10 под макосью 10.6 — http://dl.getdropbox.com/u/1034481/2009-10-10%20%D0%B2%2021.37.07.png , под виндой, простите, не проверял…

    43. Anton Poleshchuk
      10 октября 2009

      http://chikuyonok.ru/u/hw2/ap/

      без использования фильтров — если условия допускают отсутсвие тени в IE6 (png8, что положительно скажется на производительности в IE6) или с использованием одного фильтра для полупрозрачного png в случае недопускающего отсутсвия тени

      из джедайских условий:
      только 1 хак для ИЕ
      без expressions

      кол-во элементов можно уменьшить на 1 если использовать expression в ИЕ для высоты декораторских элементов (тут нужно учитывать сложность всей верстки и использовать меньшее из зол)

    44. frozenbear
      10 октября 2009

      set, случайно не инлайн элемент внутри блочного с «джедайскими» условиями плывет?

    45. frozenbear
      10 октября 2009

      set, виноват, ступил, сразу не посмотрел. Да, я знаю об этом баге и даже на страничке с решением он упомянут. Происходит, если внутри блочного «круглого» элемента лежит такой же инлайн. Как исправить пока не знаю.

    46. frozenbear
      10 октября 2009

      Orange, вся «фишка» именно в изображении.. Для того, чтобы минимизировать число html-элементов нужно исключить эффект наложения теней от разных частей спрайта друг на друга. Поэтому картинка представляет собой этакую «вертушку» (знаете, лет 15 назад такие делали — из квадрата бумаги складывая лепестки к центру). Половина ее границ отбрасывает тень, половина — нет. И именно поэтому PNG ровно в два раза больше, чем реально необходимо :-( Впрочем, сейчас его размеры 2000×2000, т.е. можно верстать блоки 1000×1000. Если у вас гарантированно будут меньшие блоки, то спрайт можно и «почикать» =)

    47. 11 октября 2009

      Да я понял, поэтому сразу и посмотрел размер изображения, 23 кб многовато конечно, даже 10 — 15 кб по уму много. Декоративный элемент не должен столько весить. Хотя и других вариантов как сверстать с 5 элементами навскидку и не скажешь.

    48. 11 октября 2009

      Вы не пробовали постить на хабре?

    49. Сергей Чикуенок
      11 октября 2009

      Как тут стало интересно :)

      Вы не пробовали постить на хабре?

      Хабр — не совсем тот ресурс для подобных заданий.

      Anton Poleshchuk: ну вот еще чуть-чуть подумать — и можно избавиться от одного элемента, причем не используя expressions. И получится результат точь-в-точь как мой :)

    50. Сергей Чикуенок
      11 октября 2009

      Решение от Vii:
      http://chikuyonok.ru/u/hw2/vii/

    51. Anton Poleshchuk
      11 октября 2009

      http://chikuyonok.ru/u/hw2/ap/
      дополнил вариантом «-1 лишний элемент» и действительно получается красивое решение :)

    52. Ante
      11 октября 2009

      Кажется, всё ещё ни одного варианта с бесконечной высотой.

      Картинка 2000х4000 жрёт около 30 мегабайт памяти.

    53. Сергей Чикуенок
      11 октября 2009

      Бесконечные размеры не всегда нужны. Лично в большинстве моих задач размер блока редко превышает 1000×1000 пикселей. А в остальном согласен: минус больших спрайтов в том, что они жрут много памяти.

    54. GreLI
      11 октября 2009

      Anton Poleshchuk, при таком спрайте непонятно зачем такие высокие элементы снизу. Вполне можно сделать их высотой 42 пикселя: .rc .crn.bt { height: 42px }. sizingMethod=»crop» у AlphaImageLoader корректно обрежет картинку и в IE6. Аналогично на правом элементе можно поставить ширину. Тогда .wrapper можно уменьшить и перенести фон на него.

    55. Anton Poleshchuk
      11 октября 2009

      исходил из соображений «минимальное кол-во стилей» для решения поставленной задачи
      в таком варианте переключение «производительность в ИЕ6/строгое соответствие дизайну» с минимальными телодвижениями:
      убрать фоновую картинку,
      добавить фильтр

      а для изменения теней/уголков потребуется:
      изменение спрайта (включая оптимизацию его размера)
      изменение отступов и позиционирования

    56. kizu
      11 октября 2009

      Итал, как и обещал, — мой вариант с бесконечной высотой и экспрешном:

      http://test.kizu.ru/crnrz/var-2002.html

      Из плюсов:
      1. Без overflow:hidden, т.е. можно выносить элементы друг из друга всяко.
      2. Т.к. высота бесконечная — и сам спрайт меньше, и нагрузка на IE, если необходимо применять фильтр.
      3. Для инлайн-блока используется внешний враппер — за счёт чего оно работает и в опере 9.27 и во второй лисе.

      Недостатки:
      1. Экспрешн :) Но т.к. он кешируемый — он в итоге даёт меньшее торможение, чем спрайт 1000х1000 с фильтром (по крайней мере, у меня такие наблюдения).
      2. Лишние элементы — их количество принесено в жертву универсальности.
      3. Чуть больше стилей — вариант, который сделал Антон Полещук в этом плане очень крутой :)

    57. Revers
      12 октября 2009

      http://rg-jam.ru/revers/block_shadow.html

      нормальной работы в опере для inline, пока что не добился.

    58. set
      12 октября 2009

      Anton Poleshchuk, ваш поправленный вариант недоступен…

    59. Anton Poleshchuk
      12 октября 2009

      похоже dropbox имеет ограничение на кол-во просмотров
      решение отправил почтой
      временная рабочая ссылка: https://dl.getdropbox.com/u/2118881/rc/rc.html

    60. Сергей Чикуенок
      12 октября 2009

      Обновил ссылки на решение Антона Полещука:
      http://chikuyonok.ru/u/hw2/ap/

    61. 12 октября 2009

      GreLI: спрайт оптимизируется без потери качества до 93 кб — http://350d.ru/shape.png

    62. 12 октября 2009

      до 9.3 кб конечно! :)

    63. GreLI
      12 октября 2009

      Не понял, причём тут я, но попробуйте открыть в IE6 :-).

    64. 12 октября 2009

      да, информация дл frozenbear, совсем тут в коментах запутаться можно.

    65. frozenbear
      12 октября 2009

      Небольшое изменение: http://epoint-group.ru/css-work/round-corners-v2/

      Спрайт теперь не настолько сложен и максимальный размер блока ограничен его размером (а не в два раза меньше, как в прошлый раз)

    66. frozenbear
      12 октября 2009

      Владимир, спасибо ) теперь буду искать, как его оптимизировать ;-)

    67. Ante
      12 октября 2009

      frozenbear, удачное «вычитание» из спрайта наложений, спасибо!

    68. Сергей Чикуенок
      13 октября 2009

      Решение от Владислава Трушина:
      http://chikuyonok.ru/u/hw2/sloter/

      Я преследовал цель обойтись без:
      1) повторяющихся значений
      2) отделить графику от содержания (классы «cont» и «bounds»)

      У меня получилось 3 expression’а (два для подсчёта высоты и ширины, и один для vml’а.

    69. Олег Коровин
      13 октября 2009

      Решение без хаков, экспрешшенов, и прочих прибамбасов.
      Единственное, что влом стало добиваться нормального инлайна в ИЕ 6 (в 7 вроде работает).

      Ну и ограничения размеров вызванные исходной картинкой.
      В остальном все ок.
      Код получился на удивление простым.

      Изменить параметры рамки очень легко.

      Может быть, конечно, не заметил какого подвоха.
      ))))

    70. Олег Коровин
      13 октября 2009

      Ну и ссылка конечно же:
      http://olegkorovin.spb.ru/magicframe/

      ))))

    71. GreLI
      13 октября 2009

      В IE6 чтобы добиться инлайна, или блок не распирался, надо чтобы ничего не распирало внутри. А распирают блочные hasLayout элементы без указания ширины не в процентных значениях. То есть с hasLayout надо использовать только position:absolute, таблицу, float или display:inline-block для изначально инлайновых (вроде <b> или <span>) элементов или хак типа display:inline;zoom:1. float:right и width:100% тоже распирают, будь здоров. Видимо, дело в последнем.

      А в IE7 и в остальных легко сделать позиционированием, так как эти браузеры понимают задание положения с двух сторон. Вся соль именно в IE6.

    72. 13 октября 2009

      Зачем изобретать велосипед, jQuerry все уже реализовано.
      Ну а в плане творчества, да, конечно интересно

    73. GreLI
      13 октября 2009

      Какой тонкотролящий спамер.

    74. 19 октября 2009

      Сергей, какой итог? :)

    75. Сергей Чикуенок
      19 октября 2009

      Сегодня всё будет

    76. GreLI
      19 октября 2009

      Уж «завтра», а ещё ничего нет :-(.

    77. Сергей Чикуенок
      19 октября 2009

      Уже написал, делаю вычитку и форматирование :)

    78. GreLI
      20 октября 2009

      Представляю, я пример сколько подготавливал, а тут считай целая статья.

    79. 3 ноября 2009

      @Сергей, когда же результаты будут? :)

    80. Сергей Чикуенок
      3 ноября 2009

      Уже давно опубликованы

    81. 24 апреля 2010

      Здравствуйте, может подскажете как внутри блока с закругленными углами сделать тень . Блок вот такой
      #galerbar { width: 180px;
      background:#dedede;
      font-family: Arial, sans-serif, Helvetica, Verdana; font-size: 14px; padding: 0px;
      margin-top: 10px; -moz-border-radius: 10px;
      -webkit-border-radius: 10px; border-color: #333333;
      border-style: double;
      border-width: thin; }

    82. 16 мая 2010

      ну пожалуйста ответте
      #galerbar { width: 180px;
      background:#dedede;
      font-family: Arial, sans-serif, Helvetica, Verdana; font-size: 14px; padding: 0px;
      margin-top: 10px; -moz-border-radius: 10px;
      -webkit-border-radius: 10px; border-color: #333333;
      border-style: double;
      border-width: thin; }

    83. Сергей Чикуенок
      17 мая 2010

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

    84. 17 мая 2010

      в примере тень снаружи, а мне нодо внутри блока

    85. Сергей Чикуенок
      17 мая 2010

      Без разницы, прочитайте о моём способе декорирования и посмотрите примеры: http://chikuyonok.ru/2009/10/decor/