Блоки комментариев на css без изображений

[kolyuchii]

Лично мне лень в этом разбираться без on-line примера.

[yanajy]

Тут пример: www.yanajy.com/files/comments.rar

[MiXei4]

Всё же расписано :) Всего 2 файла с полным контентом приведено.
Можешь посмотреть тут

[dohlik]

Изменение размеров шрифта приводит к нестыковочкам

[MiXei4]

Это не ко мне. Я всего лишь выложил то, что было у yanajy

[Mithgol]

Как хорошо, Господи! как хорошо, что после появления и внедрения border-image времена таких костылей навсегда, невозвратно отойдут в прошлое!..

[yanajy]

За живое задели :-) Вы бы ещё про border-radius вспомнили :-)

[yanajy]

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

[dohlik]

зато с кучей лишних дивов…

[yanajy]

Тут, собственно не было задачи сделать самый лучший способ. Задача была заставить работать мозг. Для этого и выбрано ограничение «обойтись без картинок». При этом ограничении нужно было попробовать сделать более-менее нормальный и применимый способ, выложить его на обсуждение и в процессе этого обсуждения найти ещё и другие способы. Что и было сделано.

Понятное дело, что картинками делать проще. Но если всегда делать только то, что просто — мозг работать перестанет. Развитие имеет место только тогда, когда есть трудности.

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

Ух… что-то меня понесло :-)

[aubt]

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

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

[yanajy]

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

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

Так поступали многие успешные и талантливые люди. Это называется стратегия Уолта Диснея.

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

[aubt]

Вы сейчас верно говорите, но не стоило писать в статье:

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

Ваш способ (интеллектуальная разминка) — не является практическим решением задачи. Использовать его в проектах ну никак нельзя.

[yanajy]

Правильно, конечно. С одной стороны.

А с другой — всё равно большая часть верстальщиков о семантике и разделении оформления и содержания не задумывается. Потому что заказчику всё равно, будет сайт на дивах или на таблицах. Заказчику важно, чтобы всё работало.

Да и вообще… Что тут говорить, если даже на www.w3.org/ буллеты у заголовков сделаны тегом img, а разделители у навигации — символами "|"…

[aubt]

Потому что заказчику всё равно, будет сайт на дивах или на таблицах. Заказчику важно, чтобы всё работало.

Да, это, конечно так.

Но я может, конечно, покажусь смешным или наивным… :)

Я считаю работать надо все-таки не только за деньги. Я вот люблю свою работу и предпочитаю получать не только (и даже не столько) финансовое удовлетворение от результата, сколько моральное и, если хотите, эстетическое.

Ну должны же быть у людей какие-то идела, тяга к прекрасному. :)

[aubt]

идеалы*

[yanajy]

конечно :-) есть и такой момент

[yanajy]

Вот, замечательный пример: habrahabr.ru/blogs/css/64016/

Да, тут тоже данные используются в качестве оформления. Но как изящен метод сам по себе…

[aubt]

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

[yanajy]

В любом методе свои недостатки, никуда от этого не денешься. А если недостатков нет, то этот метод единственный используемый.

[ignar]

Кликнул на продолжение — думал там еще анекдот найдется :(

[yanajy]

— А вот что вам в цирке понравилось больше всего?
— Мне больше всего понравилась молоденькая эквилибристка!
— Простите, Ржевский, но молоденькая эквилибристка вчера не выступала!
— Вот потому и не выступала, капитан!

:-)

[reflexing]

Он её съел что ли?

[lightcyber]

Недостаток, лично, вижу один — нету место для аватарки.

[yanajy]

Можно сам комментарий немного подвинуть вправо — будет место для аватарки :-)

[nobr]

Блоки у вас одного размера. Нужно показать, как они тянутся.

Ещё один недостаток: что, если нужно изменить угол треугольника, или добавить ему фон, как у комментария?

Чуть позже выложу свой вариант.

[yanajy]

Блоки тянутся как по высоте, так и по ширине.

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

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

[yanajy]

что, если нужно изменить угол треугольника, или добавить ему фон, как у комментария?

Исходя из изначальной задачи «сделать без изображений»:

Угол, думаю, можно менять либо использованием разных спецсимволов, либо подбором font-family.

А вот с фоном действительно беда. Единственный вариант, приходящий мне в голову — сделать ещё один блок с таким же спецсимволом-уголком значительно большего font-size-а и цвета фона, и позиционировать его вправо с z-index-ом меньше уголка-рамки.

Наверное, непонятно на словах. Сейчас сделаю пример.

[nobr]

Вполне понятно.

Попробуйте сделать треугольник бордерами — я так делал однажды.

[yanajy]

Тогда не буду делать, раз понятно :-)

Да, бордерами тоже можно, хорошая идея.

[yanajy]

www.yanajy.com/files/comments2.rar
вариант с бордерами.

[yanajy]

Правда, пока не вижу способа сделать бордерами уголок и с фоном и с обводкой. Думаю…

[rodriges]

А нельзяли из Вебдингса скажем взять символ треугольника или что-то вроде того, наложить и поменять ему цвет?

[yanajy]

Можно, конечно. Но это уже не метод с бордерами, а метод с символами.

[nobr]

Сделать два бордера и наложить один на другой. Тогда можно будет менять угол в зависимости от дизайна.

[yanajy]

уже

[bakagaidjin]

Debian, Opera 9.5, FF3.5 — края буквы < не совпадают с краями бордера :(
По крайней мере, в демо из комментов.

[Napolsky]

эм… В каком месте они «стильные»?

[yanajy]

Дело вкуса, конечно. Мне лично всегда нравились вещи попроще.

[yanajy]

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

Может, поможете с решением?

[yanajy]

да, с фильтром, конечно, не проблема.

[remal]

https://developer.mozilla.org/en/CSS/-moz-box-shadow
Там же есть ссылка на CSS3 спеку.

[rushter]

На первый взгляд выглядит красиво(на картинке), но потом когда увидел на примере, показалось, что выглядит очень дешево.