50 фрагментов CSS полезных каждому дизайнеру

50 фрагментов CSS полезных каждому дизайнеру

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

В данной статье я хочу представить вам 50 полезных любому веб-профессионалу отрывков кода CSS2/CSS3. Они идеально подходят для хранения в предпочитаемой вами интегрированной среде разработки IDE, или даже в небольшом файле CSS. Так или иначе, я уверен, что дизайнеры и разработчики смогут найти применение некоторым фрагментам из этой подборки.

1. CSS Reset

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Базовые браузерные сбросы CSS – из тех самых простых фрагментов кода, которые можно отыскать онлайн. Это – мой собственный пользовательский отрывок, основанный на кодах Эрика Майера (Eric Meyer). Я включил немного кода для адаптивных изображений и установил все центральные элементы на border-box, что позволяет соответственно выровнять размеры полей и отступов.

2. Классический CSS Clearfix

Данный код clearfix годами вращался в Сети в среде самых находчивых веб-разработчиков. Вам требуется применить этот класс к контейнеру, содержащему «плавающие» элементы. Так гарантируется, что любой последующий контент не станет свободно перемещаться, а будет помещен в стек и сброшен.

3. Обновленный в 2011г. Clearfix

Насколько я знаю, существенной разницы в визуализации между более новой и классической версией нет. Оба этих класса эффективно очищают плавающие элементы, а также обязаны работать во всех современных браузерах и даже устаревшем Internet Explorer 6-8.

4. Кроссбраузерная прозрачность

Некоторые новые свойства CSS3 способствовали мнению о том, что их можно применять где угодно. К несчастью, непрозрачность – один из примеров, где CSS все еще требует некоторой незначительной доработки. Добавление свойства filter должно изящно управиться с любой более старой версией IE.

5. Шаблон CSS Blockquote

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

6. Персональные закругленные углы

Большинство разработчиков знакомы с синтаксисом закругленных углов CSS3. А как вам нравится назначение для каждого угла разных значений? Сохраните этот кодовый фрагмент и никогда больше не столкнетесь с этой проблемой! Я включил как сжатую версию, так и более длинную базовую, где каждый радиус угла разделяется на разное свойство.

7. Общие медизапросы

Этот великолепный шаблон можно найти на CSS-Tricks среди прочих фрагментов медиазапросов. Однако я скопировал их пример полностью, что включает множество реальных мобильных устройств. Эти коды предназначены даже для устройств на основе retina, использующих min-device-pixel-ratio.

8. Современные архивы шрифтов

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

9. Традиционное выделение текста

Некоторые новые веб-браузеры на своей странице позволяют вам назначать цвет выделения. По умолчанию он установлен на голубой, но можно выбрать любое значение цвета согласно собственной фантазии. Этот кодовый отрывок включает традиционный ::selection наряду с вендорными префиксами для Webkit’а и Mozilla.

10. Замена текста H1 логотипом

Впервые я обратил внимание на эту методику, когда та была применена в старой разметке на Digg. Вы можете установить тэг H1, в котором, кроме прочего, для SEO есть название вашего вебсайта в открытом тексте. Но, применив CSS, можно переместить этот текст так, чтобы тот не был виден, и заменить его на обычное изображение-логотип.

11. Polaroid Image Border

Применение этого простого фрагмента позволит вам применить к своим изображениям классы .polaroid. Так получается эффект старинной фотографии с широкой белой рамкой и легкими тенями блока. Вам понадобится изменить значения ширины/высоты, чтобы те соответствовали размерам вашего изображения и разметке вебсайта.

12. Псевдоклассы для ссылок

Большинство разработчиков CSS знают о стилях ссылок и эффектах :hover. Но я хотел бы включить этот небольшой фрагмент в качестве справки для новичков. У ссылки есть четыре состояния по умолчанию, а также несколько других элементов HTML. Держите этот отрывок под рукой, пока не запомните самые малоизвестные из них.

13. Необычные цитаты CSS3

Цитаты pullquote отличаются от блочных цитат blockquote тем, что извлекаются из блога или новостной статьи. Они часто ссылаются на цитируемый текст из статьи, и поэтому слегка отличаются от блочных цитат. У этого класса есть несколько основных свойств по умолчанию наряду с тремя уникальными семействами шрифтов.

14. Полноэкранные фоны при помощи CSS3

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

15. Вертикально центрированное содержимое

Применив автоматическую технику margin: 0 auto, можно легко вставить содержимое в центр своей страницы по горизонтали. Однако вертикальный контент поддерживать гораздо труднее, особенно принимая во внимание полосы прокрутки и прочее. Но это чистое CSS-решение, которое будет безупречно работать и без JavaScript’а.

16. Примените вертикальные полосы прокрутки

Когда содержимое страницы не заполняет всю высоту окна браузера, никакие полосы прокрутки вам не нужны. Однако изменение его размеров заставит их появиться и добавить лишние 10-15 px к ширине окна, вытесняя контент страницы. Данный отрывок кода гарантирует, что элемент HTML всегда окажется чуть выше браузера, что заставит полосы прокрутки оставаться на месте.

17. Шаблон градиентов CSS3

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

18. Шаблон @Font-Face

Вот еще один кусочек кода CSS3, который нелегко запоминается. С помощью @font-face можно внедрить в вебсайт свои собственные файлы TTF/OTF/SVG/WOFF и сгенерировать пользовательские семейства шрифтов. Применяйте в будущем этот шаблон на своих проектах в качестве основного примера.

19. Связанные элементы CSS3

20. Черно-белые полосы в CSS3

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

21. Необычный амперсанд &

Этот класс будет применен к одному элементу, обернутому вокруг символа амперсанда в содержимом страницы. Для выделения знака & он возьмет классические шрифты serif и курсив. Опробуйте этот код на демо-странице и посмотрите, понравится ли вам дизайн.

22. Абзацы с «фонарем»

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

23. Внутренняя тень блока CSS3

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

24. Внешняя тень блока CSS3

Помимо внутренних теней CSS3 я также хочу представить код внешней тени. Обратите внимание, что третье число в нашем синтаксисе представляет расстояние до размытия, тогда как четвертое – его ширину. Узнать больше об этих значениях можно на W3Schools.

25. Треугольные маркеры списка

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

26. Фиксированная ширина центрированной разметки

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Я знаю, ранее уже упоминалось о том, как установить горизонтальное позиционирование. Хочу вернуться обратно к короткому фрагменту кода горизонтального позиционирования, который идеально применим к разметкам с фиксированной шириной.

27. Текст в колонках CSS3

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

28. Фиксированный нижний колонтитул CSS

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

29. Решение проблемы прозрачности PNG в IE6

Использование внутри вебсайтов прозрачных изображений стало обычным делом. Оно началось с gif-изображений, но развилось до alpha-прозрачных PNG’ов. К сожалению, более старые версии Internet Explorer никогда не поддерживали прозрачность. Решить эту проблему должно добавление этого короткого фрагмента CSS.

30. Кроссбраузерная минимальная высота

Разработчики, которым пришлось работать с min-height, знают все о его ненадежной поддержке. С ней идеально справляются многие новые браузеры, однако Internet Explorer и старые версии Firefox испытывают реальные затруднения. Этот набор кода должен гарантировать исправление всех связанных с ней багов.

31. Подсветка input-ов CSS3

Мне действительно нравится этот базовый пользовательский класс CSS3 за то, как он переписывает поведение браузера по умолчанию. О раздражающих очертаниях input-ов пользователи Chrome и Safari знают все. Добавление этих свойств в свою таблицу стилей определит новый вид основных элементов input.

32. Стили ссылок на основе идентификатора типа файла

Довольно малоизвестный клочок CSS, но я люблю его за креативность! С помощью селекторов CSS вы можете определить тип файла своих ссылок и выполнить иконки как фоновые изображения. Они могут включать различные протоколы (HTTP, FTP, IRC, mailto) или просто сами типы файлов (mp3, avi, pdf).

33. Внедрение оборачивания кода

Обычные тэги pre применяются для отображения больших порций кода в разметке. Это – предварительно форматированный текст типа того, что можно видеть в Notepad или Textedit, за исключением того, что вы часто будете замечать, как длинные строки производят полосы прокрутки по горизонтали. Эта группа CSS заставит все тэги pre оборачивать код, а не вылезать за пределы контейнера.

34. Указывающий курсор над теми элементами, которые можно щелкнуть

Существует множество элементов HTML, на которые по умолчанию можно щелкать, и которые не всегда отображают иконку указателя-«руки». С помощью этого набора селекторов CSS можно, использовав класс .pointer, внедрить применение указателя к большому количеству ключевых элементов наряду с любыми прочими объектами.

35. Тень блока для страницы

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

36. «Облако» с текстом CSS3

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

37. Заголовки по умолчанию H1-H5

Я предложил вам много простого синтаксиса, включая сброс CSS и несколько перезагрузок элементов HTML. Этот шаблон включает стили по умолчанию всех основных элементов заголовка по порядку от H1 до H5. Вы также можете решить добавить H6, но я никогда не видел вебсайта, в котором бы применялись все шесть вложенных заголовков.

38. Фоновый шум из чистого CSS

Дизайнеры долгое время отмечали в вебсайтах применение этого эффекта, хотя обычно применяется повтор мозаичных изображений с alpha-прозрачностью. Однако для создания совершенно новых изображений можно ввести в CSS код Base64. Тот же случай, как в вышеприведенном отрывке, когда над фоном body генерируется небольшая шумовая текстура, или же можно создать пользовательский шумовой фон на NoiseTextureGenerator.

39. Упорядочение бесконечного списка

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

40. Всплывающие подсказки CSS при проведении мышью

На вебсайтах применяется множество всплывающих подсказок с открытым исходным кодом на основе jQuery. Но всплывающие подсказки на основе CSS очень редки, и это – один из моих любимых фрагментов. Просто скопируйте его в свою таблицу стилей, и с помощью новых атрибутов данных HTML5 можно установить текст всплывающей подсказки через data-tooltip.

41. Темно-серые закругленные кнопки

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

42. Отобразите на распечатанной веб-странице URL’ы

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

43. Отключите в мобильной версии Webkit подсветку

В зависимости от опыта вашей работы с мобильными устройствами этот кусок кода может не оказаться очень полезным. Но при получении доступа к мобильным вебсайтам в Safari и прочих браузерных движках на базе Webkit вы заметите, что при касании элемента его окружает серый блок. Просто примените к своему вебсайту эти стили, и он должен удалить все исходные подсветки мобильного браузера.

44. Узор CSS3 «горошек»

Я был слегка ошарашен, когда впервые обнаружил этот фрагмент кода онлайн. Но это действительно интересный метод генерирования «на лету» шаблонов BG с помощью одного CSS3. По умолчанию я нацелился на элемент body, а вы можете применить его к любому контейнеру div своей страницы.

45. Шаблон узора CSS3 «клетка»

Как в вышеприведенном примере с «горошком», можно создать полностью бесшовный шаблон «шахматной доски». Этот метод требует чуть больше синтаксиса для своей работы, но безупречно смотрится во всех браузерах, поддерживающих CSS3. Также можно сменить значения цвета с черно-белого на любые подходящие к цветовой схеме вашего вебсайта.

46.Ленточка Github

Так как я часто пользуюсь Github, этот фрагмент кода просто снес мне крышу. Вы можете быстро создавать на страницах своего сайта угловые ленточки, как на Github, с помощью свойств CSS3 transform. Оно идеально для популярных на Github плагинов с открытым исходным кодом или кодовых блоков. Также отлично подходит для демо-версий HTML/CSS/JS, если у вас активирован Github repo.

47. Сжатые свойства шрифтов CSS

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

48. Эффект загиба бумажной страницы

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

49. Мерцающие ссылки

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

50. Особенный демонстрационный баннер CSS3

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

Дополнительно

Вот еще несколько опубликованных ранее статей, способных вас заинтересовать:

Заключительные мысли

Язык стилей пользовательского интерфейса вебсайтов дорос до инспектора Всемирной паутины. W3C выпустил общедоступные спецификации HTML5 и CSS3, полагая их языками по умолчанию для конструирования вебсайтов. Как опытные, так и начинающие разработчики должны порадоваться этой подборке и, надеюсь, отыскать для себя полезные фрагменты кода.

Читатели могут скопировать и сохранить любой из этих фрагментов кода без атрибуции. Почти все выпущенные сейчас коды CSS имеют лицензии с открытым исходным кодом и предлагаются бесплатно на основании публикации. Я не говорю, что предлагаю все возможные коды CSS, которые могли бы вам понадобиться, но надеюсь, что очень к этому близок! Если у вас есть идеи или вопросы по поводу этой подборки, не стесняйтесь поделиться с нами внизу в области для комментариев.

Автор: Jake Rocheleau

Источник: http://www.hongkiat.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Хотите научиться создавать шикарные дизайны сайтов?

Получите пошаговую обучающую систему по веб-дизайну

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (2)

  1. Wordpress

    Очень хорошая шпаргалка! Уже в закладках.

  2. Ян

    Спасибо за подборку. Не знал, что у png есть проблемы с прозрачностью в IE6

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree