Статья для веб-дизайнеров и юзабилистов, перед которыми стоит цель сделать удобное юзабилити форума с древовидной структурой и сложными обсуждениями, угадать и отыскать структуру своих форумов высокого уровня сложности, выполнить форум в доступной технике CSS. Приведён пример такого форума.
Для удобства работы со сложными обсуждениями в теме предлагается несколько реализованных на CSS техник обработки.
1) изображение ветвящихся узлов;
2) режим скрытия всей метаинформации, кроме имени (и бледного аватара с текстом сообщений);
3) режим скрытия всего, кроме бледных аватаров и текста (дзен-режим);
4) режим показа корневой ветви обсуждения с метаинформацией (оценки, ссылки);
5) показ одной ветви с полной метаинформацией (дата, автор, кнопка ответа).
Переключение между ними происходит только с помощью движения мыши. В зависимости от выбранного положения мыши, видим нужный нам вариант отображения.
Мне показалось что стайлинг такого легкого объекта как Checkbox оказалась одной из самых сложных задач (если не пользоватся JS).
Примеры:
Internet Explorer 8 (буду делать так, как я хочу)
Firefox 4 Beta 10 (думаю что задний фон это табу для Mozilla)
Google Chrome 9 (близко но куда делся Checkbox?)
Opera 11 (так как и должно быть (жаль, что Opera единственный браузер который смог сделать это))
В свое время, когда я понял, что надо постичь высшие знания по html и CSS я пошел читать данные спецификации в желании узнать неизведанное.
Потраченное время оказалось полезным. Я узнал многое новое и понял, почему эта штука так называется и придумал интересную реализацию закругленных углов. От верстальщика требуется всего лишь копи паст и указания 4-х картинок и цвета фона, все остальное уже готово.
Многие даже не догадываются о том что например в html теге можно использовать несколько стилей, так же некоторые не догадываются о том, как по-настоящему удобно использовать каскадирование в СSS, ведь согласитесь в некоторых местах оно наоборот мешает, например когда у браузера есть стандартные настройки отображения по умолчанию, которые постоянно приходится сбрасывать, либо когда внутри одного блока с настроенными шрифтами есть другой, на который эти шрифты применяются, когда мы их не просим. Перейдем к изложению.
Возможность переворачивать элементы по вертикали/горизонтали можно сделать таким образом в WebKit:
.flip-horizontal { -webkit-transform: matrix(-1, 0, 0, 1, 0, 0) }
.flip-vertical { -webkit-transform: matrix(1, 0, 0, -1, 0, 0) }
Пример того как это выглядит:
Данный пост навеян моим же предыдущим
топиком, в котором монолитный текст делился на две колонки при помощи JS. В комментах прозвучала фраза типа «С JS и дурак сделает, вот бы на чистом CSS».
Алгоритм не изменен, суть остается та же. Практической пользы от топика — 0, вряд ли такой метод будет применяться в реальных проектах. Just for fun, как говорится.
Смотрим что получилось
Под катом код…
Развивая идею
вёрстки независимыми блоками мы постепенно придём к
вёрстке независимыми модулями, а пока остановимся подробней на сабже…
Но сперва небольшое терминологическое отступление.
Вёрстка страницы — процесс расположения элементов на странице в соответствии с дизайном.
Вёрстка бывает:
- Табличная. Страница представляет из себя одну большую таблицу с мелкими ячейками. Каждый элемент занимает несколько смежных ячеек образующих прямоугольную, не пересекающуюся с остальными, область.
- Блочная. Страница делится на крупные блоки, те на более мелкие, и так далее до нужной степени детализации.
- Слоёная. Элементы позиционируются абсолютно, независимо от расположения остальных элементов.
Разметка текста — обогащение текста специальными машиночитаемыми условными обозначениями.
НЛО прилетело и опубликовало эту надпись здесь.
Проблема png в ie6 и background-repeat известна, но не всегда всё так уж очень плохо. Например, имеется полупрозрачный png размером 1х100, и нужно растянуть его по горизонтали (сделать полосочку). Кто-то скажет, что это невозможно, но не спешите, напишем фильтр для ИЕ6 как-то так:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='css/img/menu-gradient-main.png', sizingMethod='scale');
Запускаем и удивляемся… Работает! Вся фишка в значении «scale» свойства sizingMethod, оно делает как раз то что нам нужно, т.е растягивает png по ширине контейнера.
Точно также можно растянуть png и по высоте. В итоге мы, конечно, получаем не полноценный background-repeat, но хоть что-то…
