1. Безопасность и функциональность
2. Разметка страницы
3. Адаптация меню и системы навигации сайта к запросам клиента
4. Типографская разметка текста
5. Другие дельные советы, приёмы и подсказки
2. Разметка страницы
Собственно, для этого и разработали CSS. Возможности в этом плане почти безграничны, особенно с присвоением CSS3 статуса нового стандарта.
- Выравнивание изображений внутри текста через вертикальное структурирование
Вертикальное выравнивание изображений внутри текста по умолчанию порой даёт неприглядный результат. Следуя этой инструкции, можно лучше встроить изображения в текст на вашем сайте с учётом его шрифта. В ней рассматриваются различные типы вертикального выравнивания и их сочетаемость со шрифтом.
- CSS-центрирование
Здесь также даются инструкции по центрированию средствами CSS подвижной разметки. Это очень просто, доступно и применимо, практически, к любому браузеру. В основе метода - ограничение страницы слева и справа в сочетании с одним из добавочных кодов для сохранения её вида при смене браузера.
- Фиксация нижнего колонтитула с помощью CSS
Удерживать колонтитулы внизу ваших страниц посредством CSS может быть весьма проблематично, в зависимости от остальных компонентов вашей страницы. Здесь, как раз, и описан метод закрепления колонтитула в отведённом ему месте - ниже всего прочего содержимого страницы! К очень подробному разъяснению приложены пошаговые детальные инструкции.
- Вертикальное центрирование с использованием CSS
Эта публикация знакомит вас с пятью отличными способами вертикального центрирования содержимого вашей страницы. В ней рассматриваются преимущества и недостатки каждого из методов наряду с детальными указаниями по их применению. Методы разные - от использования элементов "div" в качестве таблиц до привязки к точным координатам.
- Полезные советы по созданию таблиц стилей CSS для печатных страниц
Здесь даются отменные советы по созданию таблиц стилей, улучшающих вид страницы при её распечатке. Прилагаются инструкции по выполнению всех операций - от указания адресатов ссылок после их текста до вынесения комментариев на новую страницу. Выбирайте интересующие вас приёмы из числа предложенных или копируйте себе таблицу стилей полностью.
- Подвижные изображения
Подвижные компоненты - редкие молодцы. Они, как правило, выглядят и работают отлично, но лишь пока вы не начнёте заполнять их объектами фиксированной ширины, - например, изображениями. Здесь описан способ придания подвижности, в том числе, вашим изображениям. Он пригоден и для большинства встроенных видео-фрагментов. И, хотя этот приём основан на применении всего лишь одного свойства CSS-технологии, путём необходимой доработки его можно приспособить для использования в Windows.
- Гибкие столбцы равной высоты
Здесь описано создание полностью универсальных, равных по высоте столбцов через валидную и семантическую разметку. Метод работает при смене браузера как для статичной, так и для подвижной, и даже для растяжимой формы дизайна. Описание очень подробное, но вполне доступное для понимания.
- CSS-столбцы и их границы
Этот приём позволяет создавать с помощью CSS равные по высоте столбцы, имеющие границы. Для достижения эффекта здесь используются вложения групп элементов "div" вместо изображений. Конечный результат - просто чудо.
- Создание программы просмотра полароид-фотографий с помощью CSS3 и jQuery
Фотогалерея, созданная таким путём, - шедевр. HTML и CSS-вёрстка для неё не так уж сложны, а руководство даётся очень подробное. Хотя CSS3 поддерживается не каждым браузером, влияние этого фактора постепенно снижается, позволяя отлично применять эту технологию с небольшой скидкой на то, что некоторые посетители сайта не смогут оценить её эффект в полной мере.
- Сногсшибательный набор CSS-стилей для полного ресета стилей
Полнейший набор инструментов для досконального ресета, причём, здесь описан каждый, какой бы вам ни понадобился. Некоторые, состоящие всего из пары элементов, работают быстро и легко, в то время как другие предназначены для решения комплексных задач, и обеспечивают ресет чего угодно.
- Проектирование систем модульной структуры
Это подробная инструкция по созданию средствами CSS систем модульной структуры. Этим способом удобно формировать отдельные фрагменты содержания страницы из различных элементов "div", образующих сетку. В итоге мы получаем большой запас гибкости структуры при работе с любым содержимым - от изображений до текстов, - сохраняя его однородность и связность.
- Вариативность фона (CSS3)
Здесь описано применение CSS3 для обеспечения вариативности фона. Пока эта технология поддерживается только браузером Safari, но в инструкции сказано, как добиться того, чтобы она заработала и в других браузерах. Она ещё не прошла валидацию, но когда стандарт CSS3 будет полностью сформирован, видимо, пройдёт.
- Вариативность столбцов CSS3
Руководство по созданию с помощью CSS3 многостолбцевых структур. CSS простыми и действенными средствами решает эту задачу гораздо легче, чем большинство других генераторов многостолбцевых структур. К сожалению, на данный момент этот метод пригоден только для браузеров Firefox, Safari и Chrome.
- Умные столбцы от CSS и jQuery
Здесь описано создание регулируемых столбцов внутри подвижных структур комбинацией средств CSS и jQuery. Суть метода - в размещении как можно большего количества столбцов внутри исходного столбца с последующим выравниванием пространства между ними. Весьма изящное решение, если вам предстоит варьировать количество столбцов, и не хочется затем заполнять образовавшиеся в проекте пустоты.
- Подгон CSS под браузеры Chrome, Safari и Internet Explorer
Здесь описано применение различных таблиц стилей в зависимости от браузера, установленного у ваших пользователей (IE 5-8, Google Chrome и Safari 1-4). Очень ценный приём для желающих работать со стилями, поддерживаемыми не всеми браузерами, без потери качества просмотра при открытии страницы в незнакомом браузере.
Раздел: CSS/Style Sheets Комментариев: 2
50 новых CSS-приёмов для вашего будущего Интернет-проекта
Предыдущая страница | Страница 2 из 5 | Следующая страница
Новость отредактировал Design FactoRy - 11 июля 2017, 20:06
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Подробности здесь
Опубликовал Mysterious Master Прочитано (раз): 10244 | Оставлено комментариев: 2
Автор перевода — CoolWebmasters.Com © | Источник материала / оригинал статьи Распечатать
Автор перевода — CoolWebmasters.Com © | Источник материала / оригинал статьи Распечатать