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

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



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

3. Адаптация меню и системы навигации сайта к запросам клиента

Оформление меню и системы навигации может стать настоящей "изюминкой" вашего сайта при правильном подходе. Помните главное: меню должно быть удобным и функциональным, как бы оно ни выглядело.

- Сделайте перекрёстное меню!

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

- Супер-кнопки от CSS3 и RGBA

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

- Кнопки на заказ 3.0

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

- Центрированные вкладки от CSS

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

- Оформление кнопок средствами CSS по методу "раздвижных дверей"

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

- Оформление кнопок в виде ссылок

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

- Простые масштабируемые "хлебные крошки" от CSS

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

- Второе рождение кнопки

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

- Десяток способов оформления ссылок для удобства пользователей

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

- Создание панели навигации, подобной Vimeo

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

- Точнейшее горизонтальное центрирование панелей меню/вкладок

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

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

Ключевые тэги: CSS
Опубликовал Mysterious Master   Прочитано (раз): 9841   |   Оставлено комментариев: 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-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

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

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


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

















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