UGgallery

Забавный эксперимент по верстке без DIV-ов, с использованием UL- и DL-списков.

Простой тултип или всплывающая подсказка (от cssing)

Без Javascript. Только HTML и CSS.

“Вот такой до боли простой приемчик, нередко довольно эффектно выглядящий. Конечно ему не тягаться с тултипами гоняющимися за курсором мыши. Но и им по простоте с ним не тягаться. “

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

• Variable fixed width layout — статья, пример
• Width-based layout — скрипт для работы с такими шаблонами
• UX Mag — пример
• Dynamic Resolution Dependent Layout — статья, пример (про это я уже писал)
• Resolution dependent layout

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

CSS Drop Column Layout — боковые колонки перемещаются по странице, в зависимости от ширины окна. Еще одна реализация старой, в общем-то, идеи. HTML, CSS — ничего больше.

PS: На CSS Blast лучше перевели название, назвали это “опадающими” блоками. Так гораздо лучше.

Для памяти, цитатка из статьи “Writing cross-browser CSS“.

“Мой опыт борьбы с IE подсказывает, что часто, поведение элемента можно исправить задав ему значение height:1px (решайте сами как сделать, чтобы только IE увидел это правило). Если это не поможет, попробуйте display:inline, особенно если элемент “плавающий” (floated)”.

Онлайновый редактор FormArchitect позволяет генерировать валидные кросс-браузерные HTML-формы без использования таблиц. Возможны сложные формы в несколько колонок, с валидацией ввода на Javascript. Полная поддержка стандартов и отсутствие ошибок в коде. Все для экономии сил и времени разработчика. На любом рабочем месте и абсолютно бесплатно.

Чтобы добавить иконку к ссылке в WordPress-е потребуется вставить всего несколько строк в CSS-файл шаблона. Ну, и саму иконку подготовить. Сразу предупрежу, что данное решение подходит только для современных браузеров, вроде Firefox и Opera. Пользователей IE 5-6, это никак не затронет, они получат обычную текстовую ссылку без картинки. Хаков не используется, так как IE, на данный момент, просто не понимает таких CSS-селекторов.

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

Далее »

Западные коллеги наперебой хвалят FACE (Faruk’s Animated CSS Enhancements) или “Расширения Фарука для CSS-анимации”. Это набор хитрых скриптов, манипулирующих стилями для создания различных анимационных эффектов, в основном для ролловер-эффектов.

И все бы хорошо (и не стал бы я об этом писать), вот только этот самый “фейс” стабильно роняет мою Оперу 8.5. Так что, смотреть на эти фокусы можно чем угодно, но только не Оперой.

• Главная страница сайта (чтобы увидеть анимацию, сделать рефреш) – Опера не падает;
• Галерея сайтов, превьюшки с ролловером – Опера падает;
• Страница проекта FACE с еще одним примером ролловер-эффекта – Опера падает.

Ронять Оперу, в наше время — это просто вредительство какое-то.

Идея из разряда “и почему мне самому не пришло это в голову”. Трючок под названием Worn text основан на одном из самых известных способов image replacment. В данном варианте, поверх текста накладывается картинка, частично прозрачная, сквозь которую виден нижележащий текст. Получаем текст с узором. Главный недостаток — экстра разметка — в обрабатываемый элемент нужно вставить пустой span.

Энди Кларк представил новый интересный вариант трехколоночного “резинового” дизайна, с фиксированной центральной колонкой. То есть, при прокрутке страницы, центральная колонка остается на месте, а шапка и боковые колонки прокручиваются.

Далее »