Почему редизайн сайта нужно делать с использованием CSS.
Цены на редизайн сайта часто практически равны ценам на разработку дизайна сайта с нуля. Многие не могут понять, почему так происходит. Поэтому возникает вопрос, зачем делать редизайн сайта, если сайт уже есть и он приносит прибыль. Очень сложно понять, когда наступил тот момент, когда нужно что-то менять.
Перекрывание селектов в IE6.
Даже через абсолютно спозиционированные ДИВ-ы с максимальным zIndex-ом в ИЕ6 "проглядывают" селекты. Задача: подобрать HTML/CSS-способы перекрывания селектов.
Практический CSS/JS: уменьшаем время загрузки страницы.
Примечание: ниже находится перевод двух близких статей ("Delay loading your print CSS" и "JS includes — the saga continues…") по оптимизации загрузки страницы при наличии нескольких файлов стилей или скриптов.
Внешние и внутренние отступы блоков, разночтение.
Это описание внутренних отступов блока — то расстояние, которое будет между рамкой блока и содержимым. Почти так мы писали и в BODY, чтоб начать страницу от края экрана.
Использование фонового изображения для замены текста.
С помощью простого трюка CSS вы можете улучшить представление шрифтов на своих веб-страницах. При этом и неграфические броузеры и поисковые роботы смогут с ними нормально работать.
Шрифты и CSS.
Многие мучаются при создании сайта. Во многих случаях на сайте требуется применить нестандартный шрифт или иероглиф. Вы скачиваете красивый шрифт и начинаете верстать страницу, но не у всех пользователей есть такие шрифты.
CSS от А до Я.
Представьте себе такую ситуацию: вы сделали серьезный сайт. И вдруг через некоторое время понимаете: шрифт не тот, фон не тот, цвета не те и т.д. Все надо менять. Обремененный заботой о любимых посетителях, вы спешите исправить недоработки во всех 500 (к примеру) страницах вашего сайта. На это уходит целый день.
Свойства текста.
Свойства текста применяются практически ко всем элементам CSS, которые могут включать в себя или описывать текст, правда, с учетом некоторых ограничений в каждом отдельном случае, Свойство text-align запоминает расположение текста относительно границ рабочего окна броузера или ячейки таблицы, иными словами - отвечает за выравнивание текстового блока.
Изменение фона в таблице.
С помощью стилей можно творить даже такие чудеса, как изменение цвета фона таблицы. Для этого необходимо написать небольшой обработчик соответствующего события, например, попадание курсора мышки в область таблицы:
Фиксирование шрифтов на странице с помощью таблицы стилей.
Предположим, что Вы создали достаточно симпатичную страничку с малым количеством графических элементов, текст у Вас расположен в таблице в две колонки. Вы некоторое время любуетесь вашим творением, но тут приходит Ваш приятель и погружает Вас в глубокое уныние, поставив в настройках броузера более крупный шрифт.
Кроссбраузерное выравнивание по центру.
Многие сайты проводят на своих страницах всяческие опросы пользователей. Обычно вопрос и варианты ответа на него помещается на заглавную страницу сайта, там, где его может увидеть как можно большее количество людей. Если делать механизм опроса с помощью традиционных средств HTML, то участие в нем пользователя потребует перезагрузки всей страницы. В данной статье я расскажу как можно осуществить опрос пользователей, используя модную нынче технологию AJAX.
Создание динамических элементов страницы с помощью CSS.
CSS предоставляет огромные возможности создания многих динамических элементов на странице, правда, увидеть их можно не во всех браузерах.
Простой тултип или всплывающая подсказка.
Довольно часто применяю этот простой прием, но еще о нем не рассказывал. Суть - при наведении мыши на определнный текст появляется краткое пояснение или расширенная информация рядом с текстом.
Динамическое выпадающее меню.
Слышали ли вы когда либо такое утверждение, что "нельзя сделать динамическое выпадающее меню исключительно на CSS для IE"? Уверен, что да. И что, вы-таки верите этому? Правильно, лучше не верьте.
CSS: советы и приёмы, часть 1. Поскольку я широко использую CSS на протяжении 2х лет, мне запомнилось несколько приёмов, которые делают CSS более эффективным инструментом и решают специфические проблемы. Мне бы хотелось поделиться моими любимыми CSS-приёмами и объяснить несколько самых частых ошибок, которые совершают новички. Если у тебя есть опыт работы с CSS, то скорей всего на твоём пути уже встречались эти советы и приёмы, но кто знает, вдруг найдётся парочка новых
CSS: советы и приёмы, часть 2.
В этой части я дам тебе несколько советов, содержание которых включает в себя группирование селекторов, горизонтальное выравнивание текста, импортирование CSS и ещё несколько проблемных вопросов. Если ты чего-то здесь не нашёл, попробуй почитать первую часть
Разворачивание и сворачивание слоя.
Физиология человеческого восприятия работает таким образом, что «быстрые» объекты просто не успевают восприниматься сознанием. Мозгу требуется определенное время, чтобы идентифицировать объект, понять его предназначение и усвоить информацию, которую он несет. С учетом этой особенности работают операционные системы, они отображают окна не мгновенно, а с некоторой задержкой, которая приходится на анимацию. Такого рода анимация называется «разворачивание окна» и состоит обычно в том, что окно словно прячется за невидимыми шторками, которые раздвигаются в стороны, постепенно показывая содержимое окна. Разворачивание может происходить по горизонтали, вертикали или сразу в двух направлениях. Аналогично совершается и сворачивание окна, но в этом случае информация скрывается.
Описанные действия с окнами можно перенести и на слои, которые должны отображаться поверх веб-страницы. Такие слои могут применяться для отображения дополнительной информации, например, различных предупреждений.
Власть народу - относительные размеры шрифтов.
Относительные размеры шрифтов делают сайты более удобными для чтения - но польза от этого не велика, если посетители сайта не знают, как реально изменять размеры текста. В Internet Explorer, наиболее распространенном на данный момент браузере, эта возможность спрятана в одном из меню второго уровня, из-за чего изменение размера текста становится чересчур сложной задачей для многих пользователей.
Выпадающие меню с помощью CSS.
Каждый, кому доводилось создавать выпадающие меню, знаком с тем, какое количество скриптов требуется для этого. Между тем, используя грамотно структурированный HTML-код и несложные CSS-правила, можно создать симпатичное выпадающее меню, которое легко менять и дополнять, и при этом оно будет работать во множестве браузеров, в том числе и в Internet Explorer. И самое главное для вас, любители "чистого" кода - никакого JavaScript! (На самом деле, небольшой скрипт все же необходим, но вовсе не для того, о чём вы подумали.)
Несвоевременные мысли о CSS.
Основной нашей целью было создать CSS разметку, которая бы полностью повторяла табличный дизайн WebReference.com, и прилично бы выглядела при любых размерах окна и шрифта. Статья очень интересная, советую прочитать.
Чем CSS хорош для поисковых машин?
Если вы никогда не сталкивались с CSS, то самое время начать его изучать. Для начала я расскажу вам о нескольких преимуществах CSS, которые касаются большинства поисковых машин.
CSS Design: Укрощение списков.
В данной же статье я покажу, как с помощью CSS можно укротить неповоротливые и неуклюжие списки. Хватит им беспризорно шататься по вашим веб-страницам. Настало ваше время командовать им, как себя вести.