С начала CSS3, веб-дизайнеры начали экспериментировать с различными кода на основе решений, чтобы добавить к проектированию, и даже составить дизайн полностью.Даже в старых версиях CSS есть много дизайнерских решений, которые можно сделать со 100% кода, никаких изображений necessary.

В этой статье we’ Re собираюсь взглянуть на некоторые конструктивные решения, которые теперь можно с CSS, будь то с новой, более продвинутой CSS3 или с предыдущими версиями.Все, начиная от мелких деталей до целых функции могут быть созданы с помощью CSS и немного разметки и it’ Удивительно видеть решений, созданных и прогресса, достигнутого в только в последние несколько years.

Несмотря на некоторые интересные вещи, которые мы можем сделать с CSS, каким практическим это?We’ будем также принимать во внимание практичности некоторых из этих целей, и должны ли они быть просто для веселья и экспериментов, или, возможно, когда-нибудь реальной частью веб-дизайна.It’ с интригующим думать о том, какие образы и Photoshop стиле эффектов вскоре может быть полностью заменен только с кодом, и как это скажется на будущем веб-development.

Типография Effects

We’ Re начинает видеть больше эффектов дизайна приходят в жизнь с CSS, особенно с тенденцией красивой типографикой.Используя CSS, чтобы добавить к типу является фантастическим использованием CSS, заменяя традиционные средства, такие как изображения или просто по умолчанию для веб-(а иногда и скучно) font.

Врезка (Letterpress) Type

Этот эффект был сделан многие из нас до этого, в той или иной форме.При использовании в заголовки, котировки или других форм содержания означало, чтобы выделиться, результат может быть очень практичным и красивым. учебник по Line25 акции эффективный способ для этого, с несколько другой дизайн possibilities.

Текст Rotation

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

Custom Typography (@ шрифт лицу)

В Photoshop можно использовать любой шрифт, мы хотим разработать с тех пор, как it’ S установлен в нашей системе.На веб, что не всегда было возможно.С CSS3′ Новый @ шрифт лицу, хотя, we’ Re начинают видеть более интересным, дизайн-комплименты шрифтов в Интернете.@ Шрифт лицу делает его простым и чисто CSS основе.Тем не менее, SIFR и Cufón также может быть использован в качестве резервного в то время как we’ повторно все еще ждут другие, не совместимых браузеров наверстать упущенное.Более подробную информацию о всех этих методов замены шрифтов, взгляните на наш пост, Обзор популярных Внедрение шрифтов Web Services.

Использование @ шрифт лицу может сделать мир разницы в результатах дизайном, невероятно прост в реализации, и отлично подходит для SEO и обслуживания, как well.

Хороший, подробный и простой учебник, чтобы следовать в случае, если у человека нет опыта с помощью @ шрифт лицу еще можно найти по меньшей Zen элементов: CSS3 вложения @ шрифт face.В качестве дополнительного ресурса, Шрифт Squirrel имеет @ шрифт лицу генератора, наряду с большим количеством качество бесплатных шрифтов для use.

Drop-Shadow Text

Текст тень простой эффект многих из нас также уже используется.It’ SA большим эффектом, чтобы добавить некоторые детали проекта, но и помочь выделите текст и добавить глубины в веб-дизайне.Проще говоря, код для создания CSS3 тень текста выглядит следующим образом:

text-shadow: 1px 1px 0 #000;

Самое приятное то, что при восстановлении использование переменной текст с отбрасывание тени, код только одна линия и легко настроить.Для более детального пост и пару примеров, обязательно ознакомьтесь с Миган Fisher’ S краткий учебник. Тени и CSS3

Gradients

Градиенты были тоже когда-то возможно только при размещении в изображениях, но сейчас существует множество приемов, которые используют либо умнее изображений, или даже изображение без методы, чтобы создать тот же эффект дизайна we’ ве используют для years.

Чистая CSS3 Gradients

CSS3 и WebKit также поставляются с чистым CSS градиенты, которые могут позволить для создания многих элементов Web, которые когда-то требовали изображений.Выше демо- Pure CSS Menu Автор Nick La, с использованием CSS градиенты и другие функции, такие как тени и закругленные corners.

Существует также учебник для выполнения многих из перечисленных выше градиент выглядит:. Cross-Browser CSS Gradient

Градиент текста (или что-нибудь еще)

Хотя этот эффект действительно включает некоторые изображения, это все еще очень хороший пример CSS особенно потому, что она совместима в большинстве браузеров, в отличие от многих CSS3 трюки.С небольшой узор или градиент, мы можем воссоздать любой текст, DIV, изображение или любой другой с рисунком вышележащих it.

Необычные Borders

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

Есть много уникальных идей, которые могут быть созданы с помощью только CSS 2.1, и, следовательно, будут совместимы с гораздо более браузерах.Это действительно просто требуется некоторое творчество и вне нестандартного мышления.В посте, 12 творческих и Прохладный использует для пограничной CSS Property, многие эффекты передразнил с минимальными разметки и чистого CSS.Некоторые могут быть не вполне практичным для повседневной границы изображения, но многие могли быть применены к другим использования CSS, CSS, как плакаты или изображения (см. ниже)

Затем, с CSS3 мы имеем больше возможностей и больше возможностей границу для распространенных стилей границы.CSS3 ввел использование границе изображения, градиента границ, и, конечно, закругленные углы.Другие методы, используя поле тень собственности можно получить интересные эффекты, а также.Для примера и быстро snippits проверить Дизайн Shack’ S Введение в CSS3 – Часть 2. Borders

Большие техники и Tutorials

Некоторые методы проектирования осуществляется с CSS может быть мелких деталей, в то время как другие могут составлять всего проекта.Ниже приведены некоторыеэкспериментов или использование больших решений сделано с CSS.Если любое изображение или JavaScript была применена в эффектах ниже, это для дополнительных подробностей или функциональности.Тем не менее, для всех этих основное внимание по-прежнему 100% CSS.

Перекрытие Ribbons

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

Этот учебник работает почти в каждом браузере, кроме IE и некоторых старых версиях Opera.Несмотря на это, деградировали версия на самом деле хорошо работает в своем собственном отношении, в противном случае можно получить тот же вид использования изображений с альтернативной таблицы стилей, и быть вызван только при обнаружении этих browsers.

Этот эффект работает. Chrome 4, Firefox 3.5, Safari 4

* Не корректно работать в IE или Opera, но ухудшает gracefully.

Подробная Polaroids

“ Polaroid look” фотографий и других изображений на веб давно уже тенденция, и больше склоняется к ретро-стиле.Раньше это выглядит связана с использованием фонового изображения Polaroid, и размещение фото на вершине.В качестве альтернативы, CSS версии 2.1 был (и есть до сих пор) возможно с использованием отступов и границ, но мы определенно можем сделать его еще более интересным с достижениями CSS3

Этот урок и эффект выше использует некоторые более продвинутые и современные CSS трюков, чтобы принести больше жизни во внешний вид Polaroid.Крис Spooner’ S Как создать чистый CSS Polaroid Фото Gallery включает в себя функции, такие как CSS отбрасывание тени, преобразование и повороты, и даже классические г-индекс особенность, которая была вокруг в течение некоторого времени, но doesn’ т, кажется,использовать достаточно часто.Все эти эффекты собрались вместе, чтобы создать то, что выглядит несколько заказных фотографий Polaroid, но единственно верный изображений используются фотографии themselves.

Этот эффект работает. Chrome 4, Firefox 3.5, Safari 4

* Окончательный эффект перехода добавил при наведении курсора мыши не работает в Firefox yet.

3D куба с помощью CSS 2D transformations

В старые времена CSS, мы привыкли к плоской коробки на плоских экранах.Тем не менее, с новейшим выпуском WebKit, во многих современных браузерах можно использовать 3D-преобразования для создания 3D коробок с обычного текста, отступы, поля, рамки, фоны, и more.

Будьте уверены, чтобы проверить tutorial для полного объяснения и список браузеров, которые в настоящее время может сделать этот эффект правильно.Кроме того, использование WebKit анимацию, вращающиеся кубы и другие дизайн и интерактивность эффекты возможны без вспышки или JavaScript.Большая часть об этой технике в том, что разметка за это невероятно прост и семантических и CSS является довольно простым, как well.

Этот эффект работает в: Chro …

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