Освоение CSS, часть 2: передовые методы и инструменты

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

В Часть 1: Моделирование Дизайн Elements мы рассмотрели основы веб-дизайна с помощью CSS.В части 2 we’ Re предлагают некоторые более сложные приемы и эффекты можно достичь с помощью CSS.Все, начиная от создания собственного интернет-приложений (например, календари) для укладки веб-страниц для использования с iPhone некоторые основы работы с CSS3 покрыта here.

1.Календари, списки, таблицы и Timelines

CSS может быть использован для создания календарей, сроки, и даже “ tables” (или диаграммы).Учебники ниже иногда используют CSS в сочетании с различными программирования languages.

CSS / Jquery Последовательное ListВы когда-нибудь приходилось вручную код то, что является последовательным?Разве ты не найти его annonying?Ну, вот простое решение для Вас.Этот учебник покажет вам, как использовать JQuery для добавления последующих классов CSS для создания графического list.

Menu List with CSS

Дата дисплеев с spritesЭто руководство объясняет, как добиться оригинального дисплея дату с помощью CSS спрайтов.Умная техника. альтернативная solution (с помощью transform недвижимость в CSS).

Styling dates with CSS

Чистый CSS Timeline Большая обучающая программа для создания чистого вида сроков для вашего сайта с помощью CSS и простой HTML markup.

Pure CSS Timeline

CSS на основе TimelineДругой учебник для создания временной шкалы с CSS.

A CSS-based Timeline

Ical подобные Календарь (CSS JQuery) Большая обучающая программа для создания динамических календарь напоминает Ical application.

iCal-like Calendar (CSS+jQuery)

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

Build a Calendar Using PHP, XHTML, and CSS Example

CSS: Список меню DesignЭто краткий учебник CSS, чтобы показать вам, как создать список меню либо с помощью стилей CSS границы или фоновое изображение.Хитрость заключается в том, чтобы применить нижнюю границу к элементу Ли, а затем использовать абсолютное имущественное положение переложить вложенные элементы вниз, чтобы покрыть border.

Menu List with CSS

Чистый CSS прокрутки таблицы с фиксированной HeaderВ этом учебнике показано, как использовать CSS для обеспечения прокрутки в HTML таблице с header.

Pure CSS Scrollable Table with Fixed Header

Дата Значки и комментарий Bubbles для вашего Blog“ Одна из вещей, вы столкнетесь, когда ваш блог становится больше, это то, что вам нужно втиснуть больше информации в меньше места, чтобы сделать это возможным, чтобы отобразить всю информацию, вы хотите показать.Одна из вещей, которые я сделал, чтобы это сделать, это добавить значок дату, а затем пузырь более, что с количеством комментариев в it.”

Date badges

Стилизация таблиц с CSSПростой учебник для укладки HTMLТаблицы полностью с CSS.

Styling tables with CSS

2.iPhone CSS Techniques

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

iPhone приложений Разработка интерфейса PatternsIPhone является одним большим ограничением — не клавиатура, небольшой экран, несколько кнопок — так разработке приложений для iPhone это упражнение в создании умного, простого программного обеспечения.Существуют три основные концепции взаимодействия, которые соответствуют трем различным типам Посмотреть контроллеры: навигация контроллеры, контроллеры панели вкладок, Модальные Контроллеры Посмотреть и контроллеры Table View с уважением.Они являются строительным материалом для крафта iPhone applications.

iPhone App Design Patterns

Обслуживание iPhone Конкретные CSSВ данной статье рассматриваются несколько различных способов, чтобы служить iPhone конкретного файла CSS, в том числе легкой way.

 Serving iPhone Specific CSS

Safari на iPhone графики, мультимедиа и визуальных эффектов кодирования инструкции To’ sЭто полное руководство от компании Apple по работе с Safari на iPhone, включая информацию о графике, средств массовой информации и more.

Safari on iPhone Graphics, Media, and Visual Effects Coding How-To's

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

С чего начатьс iPhone DevДанная статья представляет собой введение в различные способы получения контента и приложений на iPhone.Это отнюдь не полное руководство, но надеется направить вас в правильном направлении, и дать вам краткий обзор того, что включено в process.

iPhone App Design Resources

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

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

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

3.Форма и поиск Techniques

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

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

Create Custom Search Bars with Image Replacement using CSS

Необычные формыДизайн с использованием CSS В данной статье рассматриваются формы дизайн с CSS.

Fancy Form Design Using CSS

Проектирование поиск кнопку Submit – CSS кросс-браузер, совместимый SolutionУзнайте, как создать собственный имидж, как увеличительное стекло, или слово ‘ GO’ в кругу, вместо стандартного поиска Отправить button.

Создание форм Преобразование Через Высокий Встроенные LabelsВ этом учебнике показано, как увеличить формы последующая работа с помощью встроенного лучше labels.

 Making Forms Convert Through Awesome Inline Labels

CSSG Коллекция: Web FormsЭто коллекция уникальный дизайн веб-форм, доступных для использования в free.

CSSG Collections: Web Forms

45 действительно необходимы бесплатные HTML [форма] EnhancementsЭта коллекция бесплатных усовершенствования форм охватывает ряд CSS techniques.

минимальной макет формы / быстрый CSS tricksЭто сообщение дает несколько быстрых трюков CSS для минималистской форме макета и design.

minimal form layout/quick css tricks

4.Визуализация Techniques

Создание визуального представления данных может действительно поставить ваш сайт друг от друга.Будь это просто таблицы разъяснения отношений между наборами данных или даже вещи так просто, как погрузчики и прогресс бары, создание эффективной визуализации данных улучшает пользовательский опыт и повышает вероятность ваши посетители будут понимать ваши site’ S content.

Простой CSS блестящий прогресс-бар techniqueЭтот пост посвящен простой метод для создания прогресс-бар с парой DIVS и изображения, которые окрашены CSS.

Simple CSS shiny progress bar technique

20 CSS Визуализация данных TechniquesЭто сообщение дает прекрасную изложение более двадцати визуализации данных методов с использованием CSS.

 20+ CSS Data Visualization Techniques

Доступная визуализация данных с помощью веб-StandardsЭта статья от A List Apart дает краткое изложение на создание соответствующих стандартам визуализации данных с помощью CSS и XHTML.

Accessible Data Visualization with Web Standards

5.Другой Handy техники и Tips

Вот несколько других методов CSS для создания вещей, как прозрачность и реалистичные наведении effects.

CSS Звезда Рейтинг Часть DeuxЭтот учебник построен с бывшим руководством и показывает, как создать звездный рейтинг, который покажет, что рейтинги aren’. Т точным числом (например 3,5)

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Comments are closed.