.. / 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
-
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
-
прыгающие блоки
- ru_webdev: Div высотой 1px
- Peek-a-boo IE6 Bug Прыжки по a:hover
- A demo explaining fixes for disappearing text in IE6.
-
Перекрытие Select
-
fixed
- Position:Fixed in IE6
-
ie7
- border-bottom inline элементов
- IE7 хак + float + height
- Блог про CSS и все что с этим связано. Новые приемы и технологии и т д.
-
Opera
- ru_webdev: Хаки
- CSS хак для Opera « TheRabbit.ru
- Подключение стиля только для Opera - RMCreative
-
FireFox
-
Safari
-
Таблицы
- cellspacing в css
- ExBB Full Mods 1.0 Beta Форум на PHP
- Глюки таблицв IE
- Пустые ячейки таблиц
- О счастье, людях, заработке в Интернете, да и просто о жизни
- Резиновые ячейки таблицы с overflow:hidden - статья на webew.ru
-
Формы
- боксовая смодель. Приведение к 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)
- В поисках Святого Грааля - 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 - сайт о вэб-разработке.
-
Тени
- Событие 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
-
Спасибо, хорошая подборка. По JavaScript такая есть?
-
Есть но неотсортированная. Много старья.
-
Спасибо, без лишних плясок поделились накопленным, супер. В закладки.
-
Спасибо огромное. Как раз кстати. Все вместе и все сразу. Ценная подборка. Тоже добавляю в закладки.
-
Cпасибо ребята, действительно много и по делу
-
блин, мощная такая подборочка. спасибо, буду юзать обязательно. сохранил ссылку.
-
Жирнейшая подборка. Решпект и уважуха. :)
-
Спасибо огромное! Так просто клад. Подборка отличная!
-
По джаваскрипту можно найти подобные подборки у буржуев, типа СмэшинМэгэзин и т.п. Ищите)