В тех случаях, когда таблицы делают все невероятно сложным, а иногда и невозможным в расшифровке код, CSS хранит вещи чистыми и простыми. Далее приведены 50 свежих CSS приемов, методов и учебных пособий, которые помогут Вам улучшить качество вашего следующего веб-дизайна.

Безопасность и эффективность

01. Сделайте загрузку ваших страниц быстрее путем объединения и сжатия JavaScript и CSS файлов

Это руководство расскажет вам, как сжать JS и CSS файлы на вашем сайте c помощью PHP. Но мы же используем Drupal... Зайдите на страницу /admin/settings/performance и включите опцию "Оптимизировать CSS-файлы" и "Оптимизировать JavaScript файлы"

Это позволит сократить количество и объем загружаемых с сервера файлов, что скажется на общей производительности. Кроме того позволит обойти ограничение IE на количество подключаемых CSS файлов.

02. Сожмите Gzip-ом ваша CSS

Эта статья охватывает самые лучшие и последние методы использования GZIP для сжатия файлов CSS. Довольно часто это поможет заметно сократить размер CSS файлов.

Используйте модуль CSS Gzip, чтобы сделать этот трюк, не напрягаясь.

03. Clickjane.css: Используйте CSS для обнаружения и блокирования Clickjacking Attacks

Эта статья расскажет как использовать clickjane.css для предотвращения clickjacking, класса атак.

04. 5 шагов по уменьшению размера таблиц стилей

Статья показывает пять различных способов сократить размер таблицы стилей.

Макет страницы

05. Выравнивание Inline изображения с помощью Vertical-Align свойства

Руководство покажет как задать правильно вертикальное выравнивание, которое по умолчанию, не всегда выглядит замечательно.

06. CSS Центровка

Руководство для центрирования в плавающей раскладке CSS. Оно очень простое и прямое, и работает практически во всех браузерах.

07. Установка и настройка Footer-а

Руководство подробно покажет, как сделать, чтобы footer всегда был внизу страницы.

08. Центровка по вертикали с CSS

Руководство содержит 5 способов выровнять содержимое по вертикали.

09. Советы по созданию стилей CSS для печати

Инструкция содержит советы по созданию стилей для печати страницы.

10. Плавающие изображения

Растягивающиеся блоки Выглядят и функционируют нормально, пока они не содержат элементов фиксированной ширины себя. Например - изображений. Этот Руководство рассказывает о том, как решить эту проблему.

11. Равная высота столбцов

Руководство рассказывает как создать полностью универсальным равную высоту колонок, используя силу семантической разметки.

12. CSS Колонки с границей

Техника позволяет создавать колонки, который имеют бордюр, одинаковой высоты.

13. Убийца коллекция CSS для обнуления стилей

Невероятно полная коллекция CSS для обнуления установок

14. Создание Polaroid Photo Viewer с CSS3 и jQuery

Галерея, созданная этим методом выглядит как flash

15. Изготовление макета для модульных систем

Этот учебник дает полные инструкции для создания модульных систем, использующих формат CSS. Позволяет практическое использование различных сеток на основе div, которые необходимы для отдельных элементов.

16. Несколько фонов (CSS3)

Учебник показывает как сделать несколько фонов у элемента. Делает это и у не поддерживаемых броузеров.

17. Несколько столбцов CSS3

Это руководство содержит описание как сделать несколько столбцов

18. Умные колонки в CSS и jQuery

Это руководство описывает как создать гибко подстраиваемое количество колонок в резиновой разметке.

19. CSS Hack для Chrome, Safari и Internet Explorer

Руководство по использованию отдельных частей CSS избранными броузерами (определение версий).

Меню навигации и настройки

20. Меню с наложением

Простой способ как сделать наложение меню с использованием z-index.

21. Крутые кнопки в CSS3 и RGBA

Немного магии и вы получите замечательные масштабируемые кнопки.

22. Пользовательские кнопки 3.0

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

23. Вкладки с CSS

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

24. Стиль кнопок с CSS раздвижных дверей

Метод позволяет использовать спрайты в методе раздвижных дверей.

25. Стилизация кнопки кнопки, как ссылки

Иногда вам придется использовать кнопку (например, в форме), но ваш дизайн будет выглядеть так гораздо лучше при использовании просто текстовой ссылки. Этот учебник дает представление о том, как сделать вашу кнопку, чтобы она выглядела как текстовая ссылки с помощью CSS.

26. Простая, масштабируемая, основанная на CSS навигационная линейка.

Это руководство позволит сделать вашу навигационную линейку простой и красивой.

27. Воссоздание кнопок

Статья об функциональных кнопках, первоначально созданные Google.

28. Список из 10 юзабилити ссылок

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

29. Создание Vimeo стиля навигации

Этот учебник показывает как создать навигацию в стиле Vimeo.com

Типографика

30. Обтекание текста внутри PRE тега

Это руководство содержит описание как завернуть текст в PRE тег.

31. Сделать красивый и умный текст с эффектом тени

Это руководство показывает, как создать тень для текста, без использования изображений.

32. Safari Text-Shadowing и Anti-Aliasing CSS Hack

Этот учебник позволяет использовать тени и anti-aliasing для броузеров, которые это поддерживают.

33. Safari Text-Shadowing и Anti-Aliasing CSS Hack ревизия

Этот описание пересмотр способа, описанного выше. Особенно хорошо смотрится, при использовании на темном фоне.

34. Шикарная вставка блока для блогов

Учебник показывает как сделать эффектный блок вставки pullquotes в ваш блог.

35. Радуга для текста

Эта техника для создания двух цветовых градиентов для текста, используя комбинацию JavaScript и CSS.

36. Создание лучших CSS шрифтов для таблиц

Эта статья позволяет правильно использовать шрифты в таблицах и формах.

37. CSS3 вложенный шрифт

Учебник позволяет встраивать шрифты в страницы, использую CSS 3

38. CSS эффект градиента текста

Трюк позволяет легко создавать градиент текста путем применения 1 пиксельного градиент PNG к нему.

Другие методы, подсказки и советы

39. 3D Cube помощью CSS

Техника позволяет создавать куб с 3 гранями и текстом на них.

40. Девять способов прятать адреса электронной почты по сравнению

Данная статья поможет вам скрывать от спам роботов адреса электронной почты на ваших страницах

41. Формы разметки и CSS

CSS разметка для стилизации форм. Семантически правильно, гибко и доступно.

42. iPhone CSS

В очень короткий и простой учебник о том, как сделать некоторые элементы CSS иначе на iPhone.

43. Улучшение процесса

Руководство предлагает советы для повышения эффективности вашего CSS.

44. CSS Tooltip указатель, без изображений

Учебник показывает как создать треугольники (будет использоваться для стрелка), используя CSS, без необходимости использования изображений.

45. Переключатель тем

Руководсто показывает как переключать темы для WP, Role Theme Switcher, Switchtheme.

46. CSS Swap Hover эффект

Эта техника позволяет заменять изображение при наведении на него мыши.

47. CSS графики

Техника позволяет создавать графики в CSS.

48. Изменение HTML фото при наведите

Техника простой и быстрой смены изображения, при наведении мыши. Используется только CSS.

49. 10 свойств, которые невозможно осуществить в IE6

Коллекция показывают, как выполнять целый ряд стилей, которые якобы невозможны в Internet Explorer 6.

50 10 CSS продвинутых техник

Руководство показывает десять различных CSS методов, которые делаются не совсем легко, но в конце результат стоит дополнительных усилий.

Творческая переработка оригинала