Как делать такую тень?

[psywalker]

Да, тоже считаю, что пример с абсолютом красивый и правильный, если бы не ИЕ.

Чего то я упустил из обсуждения, почему у ИЕ проблемы с абсолютами? Из-за обязательного релатива на родителе?

Как тогда лучше делать круглы у блоков тоже на флоатах?

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

А проблемы могут быть с обрезанием внутренних контейнеров, далее самое главное - это баг с z-index;, у которого нет решения, а это огромная потеря, потому что например если будет попап внутри блока с релативом, а за ним будут идти другие блоки (как у нас кстати), то проблемы будут 100%. Потому что попап будет залезать под нижние контейнеры и это не лечится, потому что проставлять верхним блокам z-index; выше - это глупо, так как ты никогда не знаешь, сколько точно будет блоков на странице.

В общем резюмирая вышесказанное, скажу, что пока жив ИЕ6-7, про красивые решения можно позабыть в пользу качественной работы во всех браузерах.

[SelenIT]

На конкурирующем ресурсе) весьма кстати вышел вольный перевод статьи по теме, с няшным примером

[psywalker]

На конкурирующем ресурсе) весьма кстати вышел вольный перевод статьи по теме, с няшным примером

Ну вот, как я и предлагал, подход с помощью #box:before, #box:after Правда код немного понавороченнее и по моднее, и рассчитан уже на ИЕ9+

[rus]

Обоснуй, чем отличается <div> от <i> в контексте оформления? И если можно, ссылку на раздел спеки об этом.

я не такой асс как ты, но думаю что семантишностью точно отличится, и валидатор об этом подскажет!

то есть i предназначен для оформления текста, а div для блоков в которых и будет этот самый текст.

UPD: ой, че-то не посмотрел как я опоздал с ответом то ))) ссори.

[psywalker]

Обоснуй, чем отличается <div> от <i> в контексте оформления? И если можно, ссылку на раздел спеки об этом.

я не такой асс как ты, но думаю что семантишностью точно отличится, и валидатор об этом подскажет!

то есть i предназначен для оформления текста, а div для блоков в которых и будет этот самый текст.

UPD: ой, че-то не посмотрел как я опоздал с ответом то ))) ссори.

А что такое вообще div? для чего он? И почему например тот же span не подходит?

И отдельный вопрос: Как ты думаешь, почему в БЭМ используют именно <b>, а не <div> или <span>?

[rus]

Обоснуй, чем отличается <div> от <i> в контексте оформления? И если можно, ссылку на раздел спеки об этом.

я не такой асс как ты, но думаю что семантишностью точно отличится, и валидатор об этом подскажет!

то есть i предназначен для оформления текста, а div для блоков в которых и будет этот самый текст.

UPD: ой, че-то не посмотрел как я опоздал с ответом то ))) ссори.

А что такое вообще div? для чего он? И почему например тот же span не подходит?

тем же самым что и i, использовать надо по назначению.

UPD: ты решил блеснуть умом по поводу знания фрэймворка БЭМ, или думаешь что все должны знать почему в нем так используют приведенные тобой тэги? )))

[psywalker]

rus,

тем же самым что и i, использовать надо по назначению.

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

UPD: ты решил блеснуть умом по поводу знания фрэймворка БЭМ, или думаешь что все должны знать почему в нем так используют приведенные тобой тэги? )))

Блин, при чём тут блеснуть? Зачем ты такое говоришь? Я и сам совершенно не знаю этот фреймворк, просто недавно довелось заинтересоваться и почитать про эту методику и даже сверстать кое-что. И вообще, спрашивая, не думал, что ты не знаешь, честно.

В общем суть в том, что Яндексы использует <b> или <i>, потому что они занимают меньше байтиков (вес меньше) и менее избыточны, чем например те же <div>. И им пофиг на "надуманную" семантику. Это ни на что не влияет, а даёт только плюсы. И по сути в HTML < 5 вообще нет никакой семантики, и разные теги, мы - верстальщики, используем так, как можем и как модно.

Да, я не говорю, что параграфы можно юзать для уголков, это по моему один из немногих тегов, который точно может за себя постоять.

[rus]

rus,

тем же самым что и i, использовать надо по назначению.

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

UPD: ты решил блеснуть умом по поводу знания фрэймворка БЭМ, или думаешь что все должны знать почему в нем так используют приведенные тобой тэги? )))

Блин, при чём тут блеснуть? Зачем ты такое говоришь? Я и сам совершенно не знаю этот фреймворк, просто недавно довелось заинтересоваться и почитать про эту методику и даже сверстать кое-что. И вообще, спрашивая, не думал, что ты не знаешь, честно.

В общем суть в том, что Яндексы использует <b> или <i>, потому что они занимают меньше байтиков (вес меньше) и менее избыточны, чем например те же <div>. И им пофиг на "надуманную" семантику. Это ни на что не влияет, а даёт только плюсы. И по сути в HTML < 5 вообще нет никакой семантики, и разные теги, мы - верстальщики, используем так, как можем и как модно.

Да, я не говорю, что параграфы можно юзать для уголков, это по моему один из немногих тегов, который точно может за себя постоять.

ну тогда прими мои извинения если обидел таким высказыванием.

просто выглядело так что ты меня хотел грузануть тем что я не знаю и за счет этого как-то возвыситься чтоль.

за инфу спасибо, познавательно.

[psywalker]

ну тогда прими мои извинения если обидел таким высказыванием.

просто выглядело так что ты меня хотел грузануть тем что я не знаю и за счет этого как-то возвыситься чтоль.

за инфу спасибо, познавательно.

И ты меня извини, если дал повод так думать.

[sigma77]

rus,

тем же самым что и i, использовать надо по назначению.

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

Но ведь у тех же i и b назначение есть. И оно отнюдь не для всяких тенюшечек, уголков и прочего.

[psywalker]

rus,

тем же самым что и i, использовать надо по назначению.

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

Но ведь у тех же i и b назначение есть. И оно отнюдь не для всяких тенюшечек, уголков и прочего.

Да это всё понятно, но по сути никто их не учитывает, не поисковики, ни роботы и всем пофиг. И Яндексы это поняли и успешно этим пользуются.

Тут Оксан всё зависит от нас, если ты считаешь себя "Великим Семантом", то да, можешь так делать, но плюсов по факту ты за это не получишь.

[sigma77]

Да это всё понятно, но по сути никто их не учитывает, не поисковики, ни роботы и всем пофиг. И Яндексы это поняли и успешно этим пользуются.

Тут Оксан всё зависит от нас, если ты считаешь себя "Великим Семантом", то да, можешь так делать, но плюсов по факту ты за это не получишь.

Не, я не "Великий Семант", но люблю, чтобы всё было по полочкам и структура ясно читалась. А это для меня не маленький плюс

К тому же, если не учитывается сегодня - не факт, что не будет учитываться завтра. А с дивом и спаном всё достаточно ясно и прозрачно.

[SelenIT]

Если я ничего не путаю, еще год-два назад поисковики <b> вполне себе учитывали, абсолютно наравне со <strong>-ом. Поэтому злоупотреблять им, имхо, всё-таки рискованно — может "размылиться" вес каждого выделения там, где оно по делу. Вот если украшаторы навешиваются скриптом — тут, имхо, можно что угодно для экономии байт использовать, поисковики не обидятся...

[psywalker]

Если я ничего не путаю, еще год-два назад поисковики <b> вполне себе учитывали, абсолютно наравне со <strong>-ом. Поэтому злоупотреблять им, имхо, всё-таки рискованно — может "размылиться" вес каждого выделения там, где оно по делу. Вот если украшаторы навешиваются скриптом — тут, имхо, можно что угодно для экономии байт использовать, поисковики не обидятся...

Дружище, а почему же тогда Янды этого не боятся и везде, где только можно, суют <i> и <b>? Да и ещё советуют юзать именно их.

[sigma77]

Дружище, а почему же тогда Янды этого не боятся и везде, где только можно, суют <i> и <b>? Да и ещё советуют юзать именно их.

Может потому что яндекс и есть поисковик и сам себя всегда найдет...

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

[SelenIT]

Дружище, а почему же тогда Янды этого не боятся и везде, где только можно, суют <i> и <b>? Да и ещё советуют юзать именно их.

Не знаю, честно . Может, это и пустая страшилка оптимизаторская. Насчет <b>, по-моему, разговор больше про Гугла шел, но, возможно, уже и там эта инфа устарела. Надо заново разбираться...

[klierik]

<b> - используется для выделения жирным строки

<strong> - используется для выделения жирным строки, но при этом же несёт в себе логику дающую понять поисковой системе что на данной строке делается акцент внимания.

пруфлинка под рукой нету, но источник или Яндкекс.Субботники или Хабр

Что же по поводу использования <b> и <i> в разметке то исходя из выше изложенного, поисковая система будет воспринимать теги на равне с тегом <span>.

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

Но так же надо учитывать, что подобного рода подходы целесообразны в больших проектах, нежели в элементарных "хомяках".

update:

Пруфлинк. Прокрутить приблизительно на 20-ю минуту.

[SelenIT]

Ну а мой пруфлинк вот . В принципе, как оценивает само исследование, влияние как <b>, так и <strong>, попадает в группу "незначительных факторов" (20-40%), <strong> поближе к порогу значимости, но... опять же, незначительно .

[Dinow]

Ребят, а если учесть что у этого блока еще и уголки круглые и чтобы это все работало во всех браузерах, такая разметка будет правильной?

<article> и <div> использовала исходя из соображений, что в первый оборачивается сама новость, а <div> используется как дополнительный блок для визуального оформления

<div class="event-block">
    <span class="cn lt"></span><span class="cn rt"></span>
    <span class="cn lb"></span><span class="cn rb"></span>

    <article class="event">
        <img src="Imgs/img1.jpg" alt="" />
        <time>05.12.11</time>
        <a href="#">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.</a>
    </article>

    <span class="l-shadow"></span>
    <span class="r-shadow"></span>    
</div>

[Shift-Web]

Ну иво нахрен Канвасом делается, а бокс шадоу нет Точнее это получается близко но всё равно не то