—»     —»   50 новых CSS-приёмов для вашего будущего Интернет-проекта
  Раздел: CSS/Style Sheets   Комментариев: 2  

50 новых CSS-приёмов для вашего будущего Интернет-проекта



1. Безопасность и функциональность
2. Разметка страницы
3. Адаптация меню и системы навигации сайта к запросам клиента
4. Типографская разметка текста
5. Другие дельные советы, приёмы и подсказки

2. Разметка страницы

Собственно, для этого и разработали CSS. Возможности в этом плане почти безграничны, особенно с присвоением CSS3 статуса нового стандарта.

- Выравнивание изображений внутри текста через вертикальное структурирование

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

- CSS-центрирование

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

- Фиксация нижнего колонтитула с помощью CSS

Удерживать колонтитулы внизу ваших страниц посредством CSS может быть весьма проблематично, в зависимости от остальных компонентов вашей страницы. Здесь, как раз, и описан метод закрепления колонтитула в отведённом ему месте - ниже всего прочего содержимого страницы! К очень подробному разъяснению приложены пошаговые детальные инструкции.
50 новых CSS-приёмов для вашего будущего Интернет-проекта

- Вертикальное центрирование с использованием CSS

Эта публикация знакомит вас с пятью отличными способами вертикального центрирования содержимого вашей страницы. В ней рассматриваются преимущества и недостатки каждого из методов наряду с детальными указаниями по их применению. Методы разные - от использования элементов "div" в качестве таблиц до привязки к точным координатам.
50 новых CSS-приёмов для вашего будущего Интернет-проекта

- Полезные советы по созданию таблиц стилей CSS для печатных страниц

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

- Подвижные изображения

Подвижные компоненты - редкие молодцы. Они, как правило, выглядят и работают отлично, но лишь пока вы не начнёте заполнять их объектами фиксированной ширины, - например, изображениями. Здесь описан способ придания подвижности, в том числе, вашим изображениям. Он пригоден и для большинства встроенных видео-фрагментов. И, хотя этот приём основан на применении всего лишь одного свойства CSS-технологии, путём необходимой доработки его можно приспособить для использования в Windows.
50 новых CSS-приёмов для вашего будущего Интернет-проекта

- Гибкие столбцы равной высоты

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

- CSS-столбцы и их границы

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

- Создание программы просмотра полароид-фотографий с помощью CSS3 и jQuery

Фотогалерея, созданная таким путём, - шедевр. HTML и CSS-вёрстка для неё не так уж сложны, а руководство даётся очень подробное. Хотя CSS3 поддерживается не каждым браузером, влияние этого фактора постепенно снижается, позволяя отлично применять эту технологию с небольшой скидкой на то, что некоторые посетители сайта не смогут оценить её эффект в полной мере.
50 новых CSS-приёмов для вашего будущего Интернет-проекта

- Сногсшибательный набор CSS-стилей для полного ресета стилей

Полнейший набор инструментов для досконального ресета, причём, здесь описан каждый, какой бы вам ни понадобился. Некоторые, состоящие всего из пары элементов, работают быстро и легко, в то время как другие предназначены для решения комплексных задач, и обеспечивают ресет чего угодно.
50 новых CSS-приёмов для вашего будущего Интернет-проекта

- Проектирование систем модульной структуры

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

- Вариативность фона (CSS3)

Здесь описано применение CSS3 для обеспечения вариативности фона. Пока эта технология поддерживается только браузером Safari, но в инструкции сказано, как добиться того, чтобы она заработала и в других браузерах. Она ещё не прошла валидацию, но когда стандарт CSS3 будет полностью сформирован, видимо, пройдёт.
50 новых CSS-приёмов для вашего будущего Интернет-проекта

- Вариативность столбцов CSS3

Руководство по созданию с помощью CSS3 многостолбцевых структур. CSS простыми и действенными средствами решает эту задачу гораздо легче, чем большинство других генераторов многостолбцевых структур. К сожалению, на данный момент этот метод пригоден только для браузеров Firefox, Safari и Chrome.
50 новых CSS-приёмов для вашего будущего Интернет-проекта

- Умные столбцы от CSS и jQuery

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

- Подгон CSS под браузеры Chrome, Safari и Internet Explorer

Здесь описано применение различных таблиц стилей в зависимости от браузера, установленного у ваших пользователей (IE 5-8, Google Chrome и Safari 1-4). Очень ценный приём для желающих работать со стилями, поддерживаемыми не всеми браузерами, без потери качества просмотра при открытии страницы в незнакомом браузере.

Новость отредактировал Design FactoRy - 11 июля 2017, 20:06
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Mysterious Master   Прочитано (раз): 9840   |   Оставлено комментариев: 2
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 8 ноября 2010 @ 21:25
Написал: Drofa — группа: Читатели  
На сайте с: 1.10.2010   |   Публикаций: 0   |   Комментариев: 11
ICQ: 643208630
Воспользуюсь. Отличная информация.
Комментарий #2: 8 ноября 2010 @ 22:49
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3304   |   Комментариев: 500
ICQ: --- не указано ---
Drofa, конечно пользуйтесь smile
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Август 2019    »
ПнВтСрЧтПтСбВс
 1234
567891011
12131415161718
19202122232425
262728293031