—»     —»   Правим CSS: Продвинутые методы и утилиты
  Раздел: CSS/Style Sheets   Комментариев: 1  

Правим CSS: Продвинутые методы и утилиты



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

Мы предлагаем вам некоторые профессиональные методы и эффекты, которые вы можете достичь с помощью CSS. В этой статье охвачена информация, начиная от создания собственных веб-приложений (типа календаря) до стилизации веб-страниц по стандартам iPhone, и до некоторых основ работы с CSS3.

1. Календари, Списки, Таблицы и Временная шкала

С помощью CSS можно создавать календари, временные шкалы, и даже "таблицы" (диаграммы). Нижеприведенная обучающая документация иногда используют CSS в совокупности с различными языками программирования.

- Временная шкала на CSS/jQuery
Вам когда-нибудь приходилось вручную писать код каких-нибудь последовательных действий? Очень надоедливый процесс, не правда ли? Ну что же, вот и простое решение проблем. Данная обучающая документация расскажет вам о том, как использовать jQuery для того, чтобы добавить последовательность классов CSS, чтобы получить графический список.
Правим CSS: Продвинутые методы и утилиты


- Дата, отображаемая "спрайтами"
В данной тексте объясняется то, как достичь оригинального варианта отображения даты, применяя CSS-спрайты. Очень ловкий прием. Альтернативный метод (используя преобразовательное свойство в CSS).
Правим CSS: Продвинутые методы и утилиты


- Простейшая временная шкала на CSS
Отличная статья о том, как создать опрятную временную шкалу для вашего сайта, с непосредственным использованием CSS и HTML.
Правим CSS: Продвинутые методы и утилиты


- Временная шкала, основанная на CSS
Еще одна статья о создании временной шкалы с использованием CSS.
Правим CSS: Продвинутые методы и утилиты


- Календарь схожий с "iCal" (CSS+jQuery)
Отличная статья о создании динамического календаря, аналогичного приложению iCal.
Правим CSS: Продвинутые методы и утилиты


- Пример создания календаря с помощью PHP, XHTML и CSS
Простая обучающая статья о создании динамического он-лайн календаря.
Правим CSS: Продвинутые методы и утилиты


- CSS: Дизайн меню
Небольшая статья о том, как создать меню, используя или CSS-стиль для границ таблицы или фоновое изображение. Трюк состоит в том, чтобы применить только нижнюю границу к элементу "li", а потом использовать абсолютное позиционирование, чтобы сместить вложенные элементы вниз, закрыв тем самым границу таблицы.
Правим CSS: Продвинутые методы и утилиты


- Простенькая таблица на CSS с фиксированным заголовком
Данная статья расскажет о том, как использовать CSS так, чтобы реализовать скроллинг внутри HTML-таблицы с заголовком.
Правим CSS: Продвинутые методы и утилиты


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


- Украшаем таблицы с помощью CSS
Простая статья о том, как можно оформить HTML-таблицы используя исключительно CSS.
Правим CSS: Продвинутые методы и утилиты


2. Методы применения CSS для iPhone

iPhone, можно сказать, революционизировал то, как многие люди представляют себе WEB. До этого мобильные веб-браузеры были сделаны немного неуклюже и использовались для быстрой проверки обновлений в сети, но никак не в роли основного браузера. Но сейчас, iPhone и другие схожие мобильные устройства очень сильно облегчили пребывание в сети в моменты, когда персональный компьютер для вас недоступен. Ниже приведены
некоторые ресурсы по созданию CSS специально для iPhone.

- Темы интерфейса для iPhone
iPhone представляет собой одно большое неудобство – нет клавиатуры, маленький экран, всего несколько кнопок. Из-за этого, создание и оформление приложения для iPhone считается чуть ли не испытанием по созданию продуманного и простого программного обеспечения. Существует три главных основы взаимодействия, которые соответствуют трем разным типам составляющих вида: Диспетчер Навигации, Диспетчер панели закладок, Диспетчер Модального вида, и неплохо было бы взять во внимание Диспетчер отображения таблиц. Это основные составляющие в ремесле iPhone-приложений.
Правим CSS: Продвинутые методы и утилиты


- Правка специфических CSS для iPhone
В данной статье описаны несколько разных путей подготовки специфического CSS-файла для iPhone, включая легкий способ.
Правим CSS: Продвинутые методы и утилиты


- Как это работает: Safari для iPhone Graphics, Media и Visual Effects
Полноценный путеводитель от Apple о том, как работать с Safari в iPhone. Включая также информацию по графике, медиа и другом…
Правим CSS: Продвинутые методы и утилиты


- Веб-разработка для iPhone
Другой путеводитель о том, как правильно разрабатывать сайты, предназначенные для iPhone.

- Как начать работать с iPhone
Статья рассказывающая о различных путях получения контента и приложений на iPhone. Это ни в коем случае не является путеводителем, но стоит надеяться на то, что статья укажет вам правильный курс и даст вам представление о сложности самого процесса.
Правим CSS: Продвинутые методы и утилиты


- 6 подсказок о том, как оптимизировать ваш сайт под iPhone
Сейчас обычные сайты получают намного больше трафика с мобильных телефонов, чем когда-либо прежде. Даже если в ваших ближайших планах нет пункта разработки отдельного мини-сайта для ваших посетителей, пользующихся iPhone, существуют некоторые азы, которые помогут вам хоть немного "подружить" ваш веб-сайт с iPhone. Данная статья разведает вам несколько секретов того, как оптимизировать ваш сайт для посетителей, пользующихся мобильными устройствами iPhone.

- jPint
Коллекция библиотек, разработанная Journyx, с помощью которой разработчики смогут создавать веб-приложения, которые максимально схожи по стилю с родными приложениями iPhone. К тому же, это даёт возможность использования данных приложений теми людьми, кто, по каким-либо причинам, пока еще не приобрел iPhone.

- 43 ресурса по разработке приложений iPhone
Программирование приложений для iPhone по прежнему остается чем-то новым. До сих пор поиск ресурсов по разработке приложений может оказаться немного сложным процессом. Но мы уже собрали небольшую коллекцию, которая снабдит вас информацией о создании того или иного iPhone-приложения. Пройдитесь по этому списку и вам будет предоставлена коллекция книг, блогов, подкастов, скринкастов, библиотек с доступным исходным кодом, сообществ, форумов, обучений и многое другое.

3. Формы и методы поиска

Также важной частичкой веб-дизайна считается создание удобного внешнего вида, страницы авторизации и полей поиска. Если вы хотите придать дизайну сайта более эстетический вид, или хотите повысить удобство использования путём изменения внешнего вида, то нижеприведенные источники, вероятно, придутся вам очень полезными.

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


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


- Кросс-браузерное решение: CSS-оформление кнопки подтверждения поиска
Изучите вариант создания и внедрения собственной пиктограммы с лупой, или же круглой иконки с фразой "Найти", взамен стандартной кнопке поиска.
Правим CSS: Продвинутые методы и утилиты


- Коллекции CSSG: Шаблоны для веб
Коллекция бесплатных уникальных шаблонов.
Правим CSS: Продвинутые методы и утилиты


- Более 45 важных улучшений для шаблонов HTML
Коллекция бесплатных усовершенствований шаблонов, также охватывающая некоторые CSS методы.

- Небольшие секреты быстрого CSS для минимальной разметки страницы
В сообщении охватываются некоторые уловки CSS по созданию минималистской разметки и дизайна.
Правим CSS: Продвинутые методы и утилиты


4. Методы визуализации

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

- Простенькая блестящая полоса загрузки на CSS
Статья рассказывает о простом способе создания полосы загрузки с применением пары div’ов и изображения, дополненного CSS.
Правим CSS: Продвинутые методы и утилиты


- Более 20 способов визуализации данных с помощью CSS
Статья даёт прекрасное описание более 20 способам визуализации данных посредством CSS.
Правим CSS: Продвинутые методы и утилиты


- Доступная визуализация данных по стандартам Веб
Статья с "A List Apart", в которой дано хорошее описание процесса реализации визуализации данных с использованием CSS и XHTML, придерживаясь стандартов.
Правим CSS: Продвинутые методы и утилиты


5. Другие ловкие способы и подсказки

Небольшая сборка полезных методов применения CSS для создания эффекта прозрачности или реалистичных эффектов при наведении мыши.

- Рейтинг в виде звезд на CSS
Статья, основанная на документации, рассказывает о создании "звездочного" рейтинга с неточным числом (типа 3.5).
Правим CSS: Продвинутые методы и утилиты


- Два способа достижения прозрачности с помощью CSS
Статья рассказывает о двух способах создания прозрачности посредством CSS, включая ту, которая использует CSS3.
Правим CSS: Продвинутые методы и утилиты


- Горизонтальное размещение изображения в тэге "h2", используя "span"
Изучайте то, как установить фоновое изображение на "h2" так, чтобы оно было расположено по правую сторону текста, оставляя при этом стандартные свойства таблицы.
Правим CSS: Продвинутые методы и утилиты


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


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


- Как это работает: Большое фоновое изображение с использованием CSS
Обучающая статья о разных вариантах внедрения больших фоновых изображений на сайт, включая как одиночное изображение, так и двойное.
Правим CSS: Продвинутые методы и утилиты


- Создание превью используя функцию "clip" в CSS
Функция "clip" очень подходит для того, чтобы вырезать изображения и делать маленькие превью без использования дополнительных файлов. Данный способ может быть использован для создания квадратных превью-картинок, или других типов превью без многочисленного повторения файлов на сервере. Просмотрите краткую информацию…
Правим CSS: Продвинутые методы и утилиты


- CSS замена изображений… изображениями!
Сайты с черным фоном обычно отдают предпочтение белым или ярким логотипам. Результат может быть привлекательным, если просматривать это на дисплее, но при печати страницы сайта, могут возникнуть некоторые неприятности: вполне вероятно, что логотип может не отобразиться, или же (если он был сохранен в расширении *gif), он будет отображен с зазубренным пиксельным контуром, чего по идее не должно быть видно из-за черного фона. В данной статье описаны методы, использующие в html изображения, оптимизированные под веб и CSS, чтобы заменять изображение на другое, более подходящее.

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


- Плоды совмещения CSS и Internet Explorer
Статья охватывает несколько способов, помогающих решить проблему отображения CSS в Internet Explorer.
Правим CSS: Продвинутые методы и утилиты


- Отключение нежелательного содержимого HTML, используя CSS
Статья рассказывает о том, как заблокировать любое нежелательное содержимое HTML, которое могут использовать ваши клиенты, если захотят обновить свой сайт посредством CSS.
Правим CSS: Продвинутые методы и утилиты


6. Способы применения CSS3

Ниже приведены методы применения CSS исключительно стандарта CSS3. Коллекция информации об интеграции CSS3 с jQuery, применение эффекта тени и градирования + некоторая информация и обучение многочисленным методам.

- Интеграция CSS3 и jQuery
Крупная сводка информации о способах комбинирования CSS3 и jQuery.

- CSS-градация в действии
Статья с примерами применения CSS-градиентов (включая примеры кода).
Правим CSS: Продвинутые методы и утилиты


- Тень в CSS3
Обзор применения родного эффекта тени в CSS3.

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

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


7. Утилиты CSS

Нижеперечисленные утилиты помогут сделать ваши CSS более быстрыми, лучшими и продуктивными.

- SlickMap CSS – утилита визуальной схемы построения сайта для веб-разработчиков
Утилита для создания стилизованной схемы разработки сайта из обычного HTML.
Правим CSS: Продвинутые методы и утилиты


- Phoenix: Дополнения для Firefox
Phoenix представляет собой платформы разработки дополнения для firefox, которая позволяет вам работать с кодами CSS, HTML и javascript. Также вам будет рассказано о том, как использовать множество CSS или JS файлов на одной странице, в соответствии с их размерами и возможностью контролировать их.
Правим CSS: Продвинутые методы и утилиты


- Juicer – утилита упаковки CSS и javascript
Данное приложение объединит все ваши CSS или JS файлы в один целый, сократив при этом HTML-запросы и увеличив скорость загрузки страницы.
Правим CSS: Продвинутые методы и утилиты


- Gridmaker v3
Простое он-лайн приложение по созданию решеток.
Правим CSS: Продвинутые методы и утилиты


- Boks – визуальный редактор решеток
Это приложение будет работать на ос Windows, MAC и Linux. Оно было разработано для тех, кто считает, что система решеток прекрасно отвечает требования и по сей день, но никогда не уделяли особого внимания этой технологии. Оно обрабатывает конфигурации решеток, CSS (с или без сжатия), и экспортирует все данные в файл grid.png и HTML.
Правим CSS: Продвинутые методы и утилиты


- Modernizr
Приложение дает вам возможность использовать операторы "если" в ваших CSS с интуитивным синтаксисом.

- CSS Vertical Rhythm Generator
Данная утилита поможет вам определять CSS с плотной вертикальной периодичностью. Если вы не совсем уверены в том – понимаете ли вы, о чем идет речь, то эта статья для будет как раз кстати.

Typeselect – Замена выделяемого текста
Используя typeface.js, jQuery, toDataURL, свойства фона и реальный наложенный текст посредством CSS, "Type Select" может совместить выбранные шрифты со стандартным шрифтом вашего браузера. Теперь вы можете использовать красиво оформленные шрифты. Недостаток заключается в том, что не поддерживается разрыв строки и эффект при наведении. К тому же, текст будет невозможно выделить в IE.
Правим CSS: Продвинутые методы и утилиты


- CSS Prism
Введите URL-адрес до любого файла CSS и редактируйте используемые в нем цвета. Вы можете использовать закладку CSS Prism для того, чтобы посмотреть или отредактировать цветовой спектр любого веб-сайта.
Правим CSS: Продвинутые методы и утилиты


- Сожмите PHP, CSS, javascript и оптимизируйте работу сайта
В статье дается хорошее описание GZip-сжатия.

8. Дополнительные статьи и ресурсы

Нижеприведенные статьи будут отличным дополнением ваших знаний о том, как нужно работать с CSS. В них включены "хаки", создание интерактивных дизайнов с использованием CSS и jQuery, а также коллекция трюков CSS для работы с WordPress.

- Создание интерактивного веб-дизайна с применением CSS и jQuery
Сводка информации по крутым способам применения CSS и jQuery со всего Веб.
Правим CSS: Продвинутые методы и утилиты


- Мои лучшие 10 CSS трюков
Сводка нескольких отличных методов и подсказок по применению CSS.

- Различные пути форматирования CSS
Данная статья сфокусирована на различных способах форматирования CSS, которые отличаются от различных способов организации CSS. Конечно же, это связанные понятия, но организация больше сфокусирована на том, как элементы упорядочены и распределены по группам, в то время, как форматирование уделяет больше внимания интервалам и структуре.

- CSS-спрайты – это глупо! Давайте вместо этого использовать архивы!
В статье описывается то, почему использовать архивы гораздо лучше, чем CSS-спрайты.

- 10 изумительных "хаков" и техник применения CSS
Охвачено 10 кросс-браузерных CSS-техник и хаков для создания более лучших веб-сайтов.

- 7 небольших трюков CSS, в которых вы постоянно нуждаетесь, используя темы оформления WordPress
Сводка важных CSS-трюков и методов применения, направленных на разработку дизайна для WordPress.
Правим CSS: Продвинутые методы и утилиты


- 15 эффективных подсказок и трюков от мастеров CSS
Сводка советов от мастеров CSS.
Правим CSS: Продвинутые методы и утилиты


- 21 стильное решение по оформлению вашего дизайна с помощью CSS/jQuery
Собрание обучений по применению CSS и jQuery для придания вашему веб-сайту больше эстетической привлекательности.
Правим CSS: Продвинутые методы и утилиты


- CSS: отдаем дань селекторам
Отличная статья о селекторах в CSS.
Правим CSS: Продвинутые методы и утилиты


- 10 свойств CSS, которые было невозможно реализовать в IE6
В статье описаны 10 свойств CSS, которые, по предположениям, не поддерживались в IE6. В опровержение данным предположениям, в статье описаны методы их реализации.

- Фоновые изображения и CSS в сообщениях E-mail с использованием HTML
Несколько подсказок о том, как использовать фоновое изображение в E-mail письмах с применением HTML.
Правим CSS: Продвинутые методы и утилиты


Автор статьи © Cameron Chapman
Русский перевод © CoolWebmasters.Com 2009
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Mysterious Master   Прочитано (раз): 12338   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 5 февраля 2012 @ 22:36
Написал: dearcrash — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Очень необходимая программа для всех веб-мастеров)) Настоятельно рекомендую!! Я от неё просто в восторге) winked
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

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

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


Гостиницы хостелы санкт петербурга hostelsv-tver.ru
hostelsv-tver.ru
Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Май 2019    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728293031