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

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



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

5. Другие дельные советы, приёмы и подсказки

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

- Сборка трёхмерного куба с помощью CSS

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

- Сравнительный анализ лучших способов скрыть адрес электронной почты

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

- Разметка анкет средствами CSS (дополнение)

Здесь дан CSS-шаблон для оформления анкеты. Модель разметки позаимствована в пособии Дерека Фэзэрстоуна "Общедоступные способы разметки анкет" ("Accessible Forms Markup", Derek Featherstone). Шаблон семантически верный, гибкий и доступный.
50 новых CSS-приёмов для вашего будущего Интернет-проекта

- iPhone CSS

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

- Модернизация вашего рабочего процесса за счёт ускоренной разработки интерфейсной части проекта

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

- CSS-стрелки для контекстных меню, созданные без помощи изображений - применение CSS-многоугольников?

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

- Применение переключателя на базе cookie

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

- CSS-эффект просмотра изображений наведением курсора

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

- Штабельные диаграммы CSS

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

- Просмотр HTML-изображений наведением курсора / CSS-уловка

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

- 10 свойств, неприменимых ранее к IE6

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

- 10 непростых, но шикарных CSS-приёмов

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


Автор статьи © Cameron Chapman
Русский перевод © CoolWebmasters.Com 2009
Предыдущая страница | Страница 5 из 5

Новость отредактировал 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-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

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

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


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

















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