.. / CSS-ссылки. Инструменты, баги, фичи, лэйоуты и всякое украшательство

  1. css

Подборка ссылок на разные приемы CSS-верстки, инструментарий и прочая. Все что собрано за последние 5-6 лет. Почищено примерно полгода назад (в марте 2008 года).

Инструменты и справочники

evolt.org - Browser Archive

CssTools

CSS Tools - Soxiam Wiki
Clean CSS - A Resource for Web Designers - Optmize and Format your CSS
Optimize and format your CSS using a variety of different compression settings. Fixes sloppy code and generates clean and concise CSS.
CSS Drive Gallery- CSS Compressor
CSS compressor, compress CSS
Blueprint Grid CSS Generator
CSS Sprite Generator
CSS Tab Designer
Генератор layout 1–3 колонки
YAML Builder | A tool for visual layout development of YAML based CSS layouts
A tool for visual layout development of YAML based CSS layouts
CssCreator Автомат создания СSS
Generate CSS column
YAML Builder | A tool for visual layout development of YAML based CSS layouts
A tool for visual layout development of YAML based CSS layouts

Скорость загрузки, заголовки

Измерение скорости загрузки
Free web page analysis service tests page size, composition, and download speed. Recommends speed improvements based on best practices for usability, HCI, and website optimization for maximum website performance.
Скорость загрузки
WEBoptimizator :: Проверка скорости загрузки сайтов
Online CSS Optimiser/Optimizer : flumpCakes

Справочники

Мнемоники в HTML — Википедия
Таблица символов unicode (юникод, уникод)
Спецификация CSS
W3C - Русские переводы
Подборка документации
Parabox Blog » W3C-specifications in CHM
XHTML-сущности. Интерактивная таблица

Кроссброузерность. Глюки и Хаки

Сборники глюков

Памятка по CSS - Вёрстка - Webmascon
Перечень багов float ie6
CSS Float в теории и на практике - Design For Masters
20 CSS-решений распространенных багов и проблем при верстке сайта | Блог для вебмастеров
Ресурс noupe.com опубликовал интересную подборку CSS трюков, в которой рассказывается более чем о 20 способах решения различных проблем и багов при верстке сайта с помошью CSS.

Сборники хаков

Сборник хаков (ie6 и ff2)
» Использование условных комментариев вместо хака "* html", пишем всю таблицу стилей в одном файле - XHTML.RU <!-- по-русски -->
» Использование условных комментариев вместо хака "* html", пишем всю таблицу стилей в одном файле. XHTML, CSS, JavaScript, DOM… Советы, секреты, хитрости и тонкости, а также технологии создания правильных XHTML-документов с точки зрения веб-стандартов. Все по-русски!
Таблица совместимости
Web browser comparison tables for CSS standards and maturing drafts.
Тест совместимости CSS
CSS Hacks and IE7
A discussion of the theory of CSS floating.
добавление в body класса=броузеру через JS
сборник хаков
CSS-хаки
ie sucks, css hacks, css хаки
Персональные CSS-хаки для Opera, FireFox, Internet Explorer » Свобода слова вебмастерского
Я не сторонник условных комментариев в CSS (можно ругать меня за это), взамен предпочитаю
CSS tests and experiments

ie

IE/win Expanding Box
Сборник глюков ie
This page links to various Explorer specific bug pages.
Internet Explorer vs. the Standards, a primer on standards violations in Explorer
This page links to demos showing the worst Explorer spec violations.
Собрание глюков MSIE
A bizarre text bug in Internet Explorer
Изучаем наличие layout / Web-разработка / Блоги / Хабрахабр
CSS-хаки и фильтры [css-framework]
Изучаем наличие layout / Web-разработка / Блоги / Хабрахабр
Изучаем наличие layout / Web-разработка / Блоги / Хабрахабр

ie6

Мерцание background в MSIE6

fss | minimize flickering css background images in ie6
Ajaxian » No More IE6 Background Flicker
Help! Onmouseover - IE перезагружает картинки - Страница 2 - Форум о поисковых системах

PNG

IE PNG Fix - TwinHelix
TwinHelix Designs: Freelance DHTML, JavaScript, CSS, CGI and more
Павел Корнилов / Тонкий CSS для Internet Explorer

min-width max-width

max-width в Internet Explorer
» max-width в Internet Explorer - XHTML.RU
cssing :: Архив :: min-width для IE
Блог про CSS и все что с этим связано. Новые приемы и технологии и т д.
max-width в Internet Explorer

прыгающие блоки

Борьба с «прыгающими» блоками в IE
ru_webdev: Div высотой 1px
Peek-a-boo IE6 Bug Прыжки по a:hover
A demo explaining fixes for disappearing text in IE6.

Перекрытие Select

Выползание listbox в ie6
Select ie6 решение через js

fixed

Position:Fixed in IE6

ie7

border-bottom inline элементов
IE7 хак + float + height
Блог про CSS и все что с этим связано. Новые приемы и технологии и т д.

Opera

ru_webdev: Хаки
CSS хак для Opera « TheRabbit.ru
Подключение стиля только для Opera - RMCreative

FireFox

overflow-x
text-overflow в Firefox и все, все, все / Web-разработка / Блоги / Хабрахабр

Safari

SafariTest -

Таблицы

cellspacing в css
ExBB Full Mods 1.0 Beta Форум на PHP
Глюки таблицв IE
Пустые ячейки таблиц
О счастье, людях, заработке в Интернете, да и просто о жизни
Резиновые ячейки таблицы с overflow:hidden - статья на webew.ru

Формы

ru_webdev: кнопки в ИЕ
"резиновый" input 100%
боксовая смодель. Приведение к ie5

float clearing

Clearing a float container without source markup
This demo shows a bug in IE when multiple floats are in a 'widthless' container.
CSS float-clearing
Agile application development with Ajax
Окантовка ссылки рамкой dotted
Огранка Веб-строительство

Layouts

Frameworks + наборы лэйоутов

CSS Frameworks + CSS Reset: Design From Scratch | CSS | Smashing Magazine
You don't have to write the same CSS-code or (X)HTML-Markup over and again. Whatever project you're starting work with, at some point you define classes
Подборка CSS-frameworks
Simplify your CSS designs with these easy Pure CSS Layouts
Обнуление броузерных настроек
!!сводная таблица трех колонок
Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!
Переходим на em | PokrovBlog
Переходим на em
cssing :: Архив :: Изменяемые размеры шрифтов
Блог про CSS и все что с этим связано. Новые приемы и технологии и т д.
Павел Корнилов / Тонкий CSS для Internet Explorer
Reset Обнуление
Обзор Reset CSS в фреймворке Yahoo! YUI - статья на webew.ru
YUI: CSS Grid Builder
960 Grid System
The 960 Grid System is an effort to streamline web development workflow.

Выравнивание по высоте; высота 100%

ru_coding- вертикальное выравнивание формы
cssing :: Архив :: Колонки “одинаковой” высоты с разделителем
Блог про CSS и все что с этим связано. Новые приемы и технологии и т д.
ВЕРТИКАЛЬНОЕ ВЫРАВНИВАНИЕ В DIV
» Вертикальное центрирование блока средствами CSS - XHTML.RU <!-- по-русски -->
» Вертикальное центрирование блока средствами CSS. XHTML, CSS, JavaScript, DOM… Советы, секреты, хитрости и тонкости, а также технологии создания правильных XHTML-документов с точки зрения веб-стандартов. Все по-русски!
Вертикальное выравнивание текста
Vertical centering using CSS
» Исследование высоты BODY - XHTML.RU <!-- по-русски -->
» Исследование высоты BODY. XHTML, CSS, JavaScript, DOM… Советы, секреты, хитрости и тонкости, а также технологии создания правильных XHTML-документов с точки зрения веб-стандартов. Все по-русски!
вертикальное выравнивания в CSS
Блог про CSS и все что с этим связано. Новые приемы и технологии и т д.
cssing :: Архив :: Еще один способ вертикального выравнивания в CSS
Блог про CSS и все что с этим связано. Новые приемы и технологии и т д.
Выравнивание по нижней границе
вертикальное выравнивания в CSS
Блог про CSS и все что с этим связано. Новые приемы и технологии и т д.
Dynamic Drive CSS Layouts- CSS Frames
Адаптивный layout (em)

Подвал; высота 100%

Колонтитутл в подвале
Укрощение подвала. Как закрепить нижний колонтитул веб?страницы. HTML и CSS. Ростислав Чебыкин
heigth: 100% и полноэкранный режим браузеров - Форум о поисковых системах
» Как прижать footer к низу окна браузера с помощью CSS? - XHTML.RU <!-- по-русски -->
» Как прижать footer к низу окна браузера с помощью CSS?. XHTML, CSS, JavaScript, DOM… Советы, секреты, хитрости и тонкости, а также технологии создания правильных XHTML-документов с точки зрения веб-стандартов. Все по-русски!
Разметка, основанная на абсолютном позиционировании - Design For Masters

Адаптивные блоки

N колонок
Перестраивающиеся колонки
Muffin Research Labs - the personal site of Stuart Colville. Covering PHP, Javascript, XHTML, CSS, Web standards, Web development and Linux administration
произвольное количество колонок
Пример адаптивных блоков

Учебники

Маниакальный Веблог » Пример верстки CSS
Маниакальный Веблог » Резиновая раскладка
Little Boxes
Маниакальный Веблог » Раскладка в CSS: float
«Резиновая вёрстка»: используем отрицательные поля - Вёрстка - Webmascon
CSS Float в теории и на практике - Design For Masters
70 идей экспертов для улучшения CSS кода

CSS-сайты (Zen & Сo)

CSS Drive Gallery- Business
CSS Vault » The Web's CSS Site
css Zen Garden- The Beauty in CSS Design
Gallery for November 2004 - unmatched -style-
W3 Compliant Sites- Sites designed to comply with W3C Web Standards
В поисках Святого Грааля - Design For Masters
Трехколоночная разметка. Разметка с тремя колонками.

Финтифлюшки

Наборы финтифлюшек

53 CSS-Techniques You Couldn’t Live Without | CSS | Smashing Magazine
CSS is important. And it being used more and often. Cascading Style Sheets offer many advantages you don't have in table-layouts - first of all a strict separation between layout, or design the page, information,
Создание круглых кнопок для сайтов
подборка статей по созданию круглых кнопок для сайтов

Rounded corner

CSS Rounded Corners 'Roundup' - Smiley Cat Web Design
скругленные углы без картинок
Nifty Corners
Круглые уголки, интересные варианты
Блог про CSS и все что с этим связано. Новые приемы и технологии и т д.
Делаем закругленные уголки с помощью псевдоэлементов :before и :after / Каскадные Таблицы Стилей
Скруглённые углы на чистом CSS для Opera 9.5, FF 1.5, IE 5, Konqueror и Safari3 | Евгений Степанищев | 18.07.2008, Nº 1786

tooltips всплывающие подсказки

Ввсплывающие подсказки
Блог про CSS и все что с этим связано. Новые приемы и технологии и т д.
JavaScript · Всплывающая подсказка (tooltip) с использованием DOM
Описание реализации всплывающей подсказки (tooltip) с использованием DOM позволяет наглядно продемонстрировать, как DOM+JavaScript работают на практике.
всплывающие подсказки DOM
Еще одна версия всплывающих окошек взамен надоевшим стандартным поп-апам. Скрипт корректно работает во всех современных браузерах, легко конфигурируется, очень легко встраивается в существующие проекты, всплывающее окно заданного...
Pure CSS Tooltip

Scrollbar

Scroll Div Content with Graphical Scrollbars Using DHTML
Scroll layer content vertically and/or horizontally, onmouseover or onclick. Graphical scrollbar available. Multiple scrolling content areas supported. You can load new content into the scroll areas. Scrolling layers can be placed in a table. Glide-scroll to specific locations onclick.
fleXcroll: Cross Browser Custom ScrollBar script by Hesido
A cross-browser javascript that enables you to style your scroll-bars with CSS

Прозрачность

CSS прозрачность (css opacity, javascript opacity) / Статьи / Tigir.com о web-технологиях
Tigir.com - сайт о вэб-разработке.

Тени

The Shape of Days: My contribution to the CSS shadow kerfuffle
bution to the CSS shadow kerfuffle
Рисование теней и рамок элементов оформления
Событие resize font
Use JavaScript to detect visitor initial font size setting and find out whenever your visitor increases or decreases the font size.
текст на 90 градусов

Сетки

harisov: Макетная сетка
Яндекс.Интернет, как верстали макет / JavaScript / Блоги / Хабрахабр
thesymbol — приведите свой текст в порядок
Прибамбас для вёрстки макетов / JavaScript / Блоги / Хабрахабр
Замена картинок в H1
Блог про CSS и все что с этим связано. Новые приемы и технологии и т д.
Вертикальный текст
Надо текст вертикально вывести. Веб-строительство

Формы

Tableless forms using CSS
CSS gallery, code samples, tutorials, and more.
Кнопки одним span'ом
Произвольный input type="file"
Оформление элемента select
стилизация input
StyleIgnite is a site containing CSS snippets and styles. It is aimed at web developers and web designers. It contains an open repository of many CSS web styles and the source code to use them. Everyone is free to contribute, rate, comment and add new styles.
Стилизация чекбоксов
Nice Forms
NiceJForms is a jQuery plugin to beautify the forms.
Эмуляция чекбоксов и радиобаттонов
CSS-Based Forms: Modern Solutions | Smashing Magazine
A List Apart: Articles: Prettier Accessible Forms
Практический HTML: учимся любить формы / Web-разработка / Блоги / Хабрахабр
Uni-Form
ru_webdev: кнопки в ИЕ
"резиновый" input 100%
"резиновый" input 100%
Красивые и простые «Wii» кнопки ≈ Чернев.ру
Я так и не понял как эти кнопки связаны с игровой приставкой Wii, видимо я просто не
Супер-юзабильные формы ≈ Чернев.ру
Как-то на хабре разгорелся спор, как заставить пользователя вводить дату в правильном

Меню

Разннобразные меню. В том числе контекстные
Listamatic: one list, many options - Using CSS and a simple list to create radically different list options
CSS в стиле Zarplatы
DHTML menu, cross browser JavaScript menus and toolbar [dynarch.com]
The Coolest DHTML / JavaScript Drop Down Menu and Toolbar on the planet, friendly to search engines, featuring high quality CSS themes, cross-browser and cross-platform support, keyboard navigation, vertical menus, context menus, and much more!
CSSplay | CSS only menus
CSS - Cutting edge Cascading Style Sheets. Experiments in CSS

Деревья

xTree (WebFX)
XLoadTree (WebFX)
JavaScript Horizontal Tree - The Code Project - JavaScript
Horizontal treeview for JavaScript.
Чисто CSS
Dynamic explorer tree menu with DOMscripting
Simple Tree
Tree Sample2
javascript treeview
Treeview JavaScript tree menu
Treeview: the tree menu, treeview javascript and DTHML applet that lets you enhance your site with what looks and feels like the Windows Explorer tree. Download the tree menu applet for free and configure it with the online visual builder.
Библиотека меню
stu nicholls - the CSS playground - CSS menus
stu nicholls - the CSS playground - menu six

 

 

 

 

  1. 2008-09-25
  2. css
Go Index Test