Шрифт Awesome

Шрифт Awesome — это коллекция масштабируемых векторных иконок. Иконки можно форматировать с помощью css-свойств, устанавливать для них цвет, размер, тень и многое другое. Шрифт версии 4.5.0 включает 605 иконок.

1. Как установить шрифт Awesome

Способ 1.

Использовать версию файла font-awesome.css, размещенную на ресурсе CDNJS. Для этого нужно добавить следующий код в раздел <head>:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

После того, как шрифт подключен, вы можете использовать иконки на своем сайте.

Способ 2.

Скачать шрифт с сайта Font Awesome. Распаковать архив и закачать на сервер сайта две папки из архива — css и fonts. Если у вас на сайте уже есть папки с такими названиями, то нужно просто добавить в них файлы из скачанных папок.

Вы можете использовать полную

<link rel="stylesheet" href="http://ваш_сайт/css/font-awesome.css">

или минимизированную версию файла

<link rel="stylesheet" href="http://ваш_сайт/css/font-awesome.min.css">

2. Как использовать иконки Font Awesome

Иконки можно добавить на веб-страницу двумя способами: задать соответствующие классы для элементов <i> и <span> или добавить к нужному элементу с помощью псевдоэлементов :before, :after и соответствующего значения свойства content.

<i class="fa fa-home fa-fw"></i>
li:before {
content: "\f015"; /* добавляем иконку дом */
font-family: FontAwesome;
color: #aaaaaa;
margin-right: 10px; 
}

1. Стандартные иконки

Font Awesome предназначен для использования со строчными элементами. Для того, чтобы добавить иконки, сначала нужно задать класс fa для элемента <i> или <span>.

Чтобы добавить выбранную иконку перед элементом или после него, к элементу добавляется пустой элемент <i></i> или <span></span>, которому назначен класс иконки, а также дополнительный класс, расширяющий стилевое оформление.

fa-camera-retro

<i class="fa fa-camera-retro"></i>

2. Большие иконки

Чтобы увеличить размер иконки относительно ее контейнера, используйте классы fa-lg (33% увеличение), fa-2x, fa-3x, fa-4x или fa-5x.

fa-lg
fa-2x
fa-3x
fa-4x
fa-5x

<i class="fa fa-camera-retro fa-lg"></i> 
<i class="fa fa-camera-retro fa-2x"></i> 
<i class="fa fa-camera-retro fa-3x"></i> 
<i class="fa fa-camera-retro fa-4x"></i> 
<i class="fa fa-camera-retro fa-5x"></i>

3. Иконки с фиксированной шириной

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

<ul>
  <li><a href="#"><i class="fa fa-home fa-fw"></i> Главная</a></li>
  <li><a href="#"><i class="fa fa-book fa-fw"></i> Библиотека</a></li>
  <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Приложения</a></li>
  <li><a href="#"><i class="fa fa-cog fa-fw"></i> Настройки</a></li>
</ul>

4. Иконки для маркированного списка

Используйте классы fa-ul и fa-li, чтобы заменить маркеры по умолчанию в маркированном списке <ul>...</ul>.

  • элемент списка
  • элемент списка
  • элемент списка
<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>элемент списка</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>элемент списка</li>
  <li><i class="fa-li fa fa-square"></i>элемент списка</li>
</ul>

5. Иконки в рамке и кавычки

Воспользуйтесь классом fa-border, чтобы установить рамку для иконки. Классы pull-right и pull-left добавят кавычки для текста.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec purus congue, posuere libero in, porta sapien. In sed elit lectus. Sed lacus elit, semper vitae felis id, sodales congue sapien.

<p><i class="fa fa-quote-left fa-3x pull-left fa-border"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec purus congue, posuere libero in, porta sapien. In sed elit lectus. Sed lacus elit, semper vitae felis id, sodales congue sapien.</p>

6. Анимированные иконки

Добавьте классы fa-spin, fa-pulse, fa-spinner, fa-refresh или fa-cog, чтобы установить вращающиеся иконки. Анимация не поддерживается в IE8 — IE9.




<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>

7. Трансформированные иконки

Чтобы повернуть иконки или отобразить их зеркально, используйте классы fa-rotate-* и fa-flip-*.

normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
icon-flip-vertical

<i class="fa fa-shield"></i> 
<i class="fa fa-shield fa-rotate-90"></i> 
<i class="fa fa-shield fa-rotate-180"></i> 
<i class="fa fa-shield fa-rotate-270"></i> 
<i class="fa fa-shield fa-flip-horizontal"></i> 
<i class="fa fa-shield fa-flip-vertical"></i>

8. Комбинированные иконки

Можно комбинировать иконки, накладывая одну на другую. Используйте класс fa-stack для родительской иконки, класс fa-stack-1x — для стандартного размера и fa-stack-2x для увеличенного размера.
fa-staked

<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>

<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>

<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>

<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>

3. Коллекция Font Awesome 4.5.0, классы и css-код для вставки с помощью свойства content

3.1. Иконки для веб-приложений

fa-adjust\f042
fa-anchor\f13d
fa-archive\f187
fa-arrows\f047
fa-asterisk\f069
fa-at\f1fa
fa-balance-scale\f24e
fa-ban\f05e
fa-bank\f19c
fa-barcode\f02a
fa-battery-empty\f244
fa-battery-half\f242
fa-battery-quarter\f243
fa-battery-three-quarters\f241
fa-battery-full\f240
fa-bed\f236
fa-beer\f0fc
fa-bell\f0f3
fa-bell-o\f0a2
fa-bell-slash\f1f6
fa-bell-slash-o\f1f7
fa-binoculars\f1e5
fa-birthday-cake\f1fd
fa-bolt\f0e7
fa-bomb\f1e2
fa-book\f02d
fa-bookmark\f02e
fa-bookmark-o\f097
fa-briefcase\f0b1
fa-bug\f188
fa-building\f1ad
fa-building-o\f0f7
fa-bullhorn\f0a1
fa-bullseye\f140
fa-calculator\f1ec
fa-calendar\f073
fa-calendar-check-o\f274
fa-calendar-minus-o\f272
fa-calendar-o\f133
fa-calendar-plus-o\f271
fa-calendar-times-o\f273
fa-cart-plus\f217
fa-cc\f20a
fa-certificate\f0a3
fa-clock-o\f017
fa-clone \f24d
fa-close\f00d
fa-cloud\f0c2
fa-cloud-download\f0ed
fa-cloud-upload\f0ee
fa-code\f121
fa-code-fork\f126
fa-coffee\f0f4
fa-comment\f075
fa-comment-o\f0e5
fa-commenting\f27a
fa-commenting-o\f27b
fa-comments\f086
fa-comments-o\f0e6
fa-compass\f14e
fa-copyright\f1f9
fa-creative-commons\f25e
fa-crop\f125
fa-crosshairs\f05b
fa-cube\f1b2
fa-cubes\f1b3
fa-cutlery\f0f5
fa-dashboard\f0e4
fa-database\f1c0
fa-desktop\f108
fa-diamond\f219
fa-download\f019
fa-edit\f044
fa-ellipsis-h\f141
fa-ellipsis-v\f142
fa-envelope\f0e0
fa-envelope-o\f003
fa-envelope-square\f199
fa-exclamation\f12a
fa-exclamation-circle\f06a
fa-exclamation-triangle\f071
fa-external-link\f08e
fa-external-link-square\f14c
fa-eye\f06e
fa-eye-slash\f070
fa-eyedropper\f1fb
fa-fax\f1ac
fa-film\f008
fa-filter\f0b0
fa-fire\f06d
fa-fire-extinguisher\f134
fa-flag\f024
fa-flag-checkered\f11e
fa-flag-o\f11d
fa-flash\f0e7
fa-flask\f0c3
fa-frown-o\f119
fa-futbol-o\f1e3
fa-gear\f013
fa-gears\f085
fa-gift\f06b
fa-glass\f000
fa-globe\f0ac
fa-graduation-cap\f19d
fa-group\f0c0
fa-hashtag\f292
fa-heart\f004
fa-heart-o\f08a
fa-heartbeat\f21e
fa-h-square\f0fd
fa-history\f1da
fa-home\f015
fa-hospital-o\f0f8
fa-hourglass\f254
fa-hourglass-start\f251
fa-hourglass-half\f252
fa-hourglass-end\f253
fa-hourglass-o\f250
fa-i-cursor\f246
fa-inbox\f01c
fa-industry\f275
fa-info\f129
fa-info-circle\f05a
fa-key\f084
fa-language\f1ab
fa-leaf\f06c
fa-legal\f0e3
fa-lemon-o\f094
fa-lightbulb-o\f0eb
fa-location-arrow\f124
fa-lock\f023
fa-magic\f0d0
fa-magnet\f076
fa-map\f279
fa-map-marker\f041
fa-map-o\f278
fa-map-pin\f276
fa-map-signs\f277
fa-medkit\f0fa
fa-meh-o\f11a
fa-microphone\f130
fa-microphone-slash\f131
fa-moon-o\f186
fa-mouse-pointer\f245
fa-music\f001
fa-navicon\f0c9
fa-newspaper-o\f1ea
fa-object-group\f247
fa-object-ungroup\f248
fa-paint-brush\f1fc
fa-paper-plane\f1d8
fa-paper-plane-o\f1d9
fa-paw\f1b0
fa-pencil\f040
fa-pencil-square\f14b
fa-pencil-square-o\f044
fa-percent\f295
fa-phone\f095
fa-phone-square\f098
fa-plug\f1e6
fa-power-off\xf011
fa-print\f02f
fa-puzzle-piece\f12e
fa-qrcode\f029
fa-question\f128
fa-question-circle\f059
fa-quote-left\f10d
fa-quote-right\f10e
fa-recycle\f1b8
fa-refresh\f021
fa-registered\f25d
fa-reply\f112
fa-reply-all\f122
fa-retweet\f079
fa-road\f018
fa-rss\f09e
fa-rss-square\f143
fa-search\f002
fa-search-minus\f010
fa-search-plus\f00e
fa-send\f1d8
fa-send-o\f1d9
fa-server\f233
fa-share\f064
fa-share-square\f14d
fa-share-square-o\f045
fa-shield\f132
fa-shopping-bag\f290
fa-shopping-basket\f291
fa-shopping-cart\f07a
fa-sign-in\f090
fa-sign-out\f08b
fa-signal\f012
fa-sitemap\f0e8
fa-sliders\xf1de
fa-smile-o\xf118
fa-soccer-ball-o\f1e3
fa-sort\f0dc
fa-sort-alpha-asc\f15d
fa-sort-alpha-desc\f15e
fa-sort-amount-asc\f160
fa-sort-amount-desc\f161
fa-sort-asc\f0de
fa-sort-desc\f0dd
fa-sort-numeric-asc\f162
fa-sort-numeric-desc\f163
fa-spoon\f1b1
fa-star\f005
fa-star-half\f089
fa-star-half-o\f123
fa-star-o\f006
fa-street-view\f21d
fa-suitcase\f0f2
fa-sun-o\f185
fa-support\f1cd
fa-tachometer\f0e4
fa-tag\f02b
fa-tags\f02c
fa-tasks\f0ae
fa-terminal\f120
fa-thumb-tack\f08d
fa-ticket\f145
fa-tint\f043
fa-trademark\f25c
fa-trash\f1f8
fa-trash-o\f014
fa-tree\f1bb
fa-trophy\f091
fa-tty\f1e4
fa-umbrella\f0e9
fa-unlock\f09c
fa-unlock-alt\f13e
fa-unsorted\f0dc
fa-upload\f093
fa-user\f007
fa-user-plus\xf234
fa-user-secret\f21b
fa-user-times\f235
fa-user-md\f0f0
fa-volume-down\f027
fa-volume-off\f026
fa-volume-up\f028
fa-warning\f071
fa-wifi\f1eb
fa-wrench\f0ad

3.2. Иконки гаджетов

fa-mobile\f10b
fa-tablet\f10a
fa-television\f26c
fa-video-camera\f03d
fa-camera\f030
fa-camera-retro\f083
fa-hdd-o\f0a0
fa-headphones\f025
fa-laptop\f109
fa-gamepad\f11b
fa-keyboard-o\f11c

3.3. Иконки рука

fa-hand-grab-o\f255
fa-hand-lizard-o\f258
fa-hand-paper-o\f256
fa-hand-peace-o\f25b
fa-hand-pointer-o\f25a
fa-hand-scissors-o\f257
fa-hand-spock-o\xf259
fa-hand-o-down\f0a7
fa-hand-o-left\f0a5
fa-hand-o-right\f0a4
fa-hand-o-up\f0a6
fa-thumbs-down\f165
fa-thumbs-o-down\f088
fa-thumbs-o-up\f087
fa-thumbs-up\f164

3.4. Иконки транспорт

fa-ambulance\f0f9
fa-bicycle\f206
fa-bus\f207
fa-car\f1b9
fa-fighter-jet\f0fb
fa-motorcycle\f21c
fa-plane\f072
fa-rocket\f135
fa-ship\f21a
fa-space-shuttle\f197
fa-subway\f239
fa-taxi\f1ba
fa-train\f238
fa-truck\f0d1
fa-wheelchair\f193

3.5. Гендерные иконки

fa-child\f1ae
fa-female\f182
fa-male\f183
fa-genderless\f1db
fa-transgender\f224
fa-transgender-alt\f225
fa-mars\f222
fa-mars-double\f227
fa-mars-stroke\f229
fa-mars-stroke-h\f22b
fa-mars-stroke-v\f22a
fa-mercury\f223
fa-neuter\f22c
fa-venus\f221
fa-venus-double\f226
fa-venus-mars\f228

3.6. Файловые иконки

fa-folder\f07b
fa-folder-o\f114
fa-folder-open\f07c
fa-folder-open-o\f115
fa-file\f15b
fa-file-o\f016
fa-file-archive-o\f1c6
fa-file-audio-o\f1c7
fa-file-code-o\f1c9
fa-file-excel-o\f1c3
fa-file-image-o\f1c5
fa-file-movie-o\f1c8
fa-file-pdf-o\f1c1
fa-file-photo-o\xf1c5
fa-file-powerpoint-o\f1c4
fa-file-sound-o\f1c7
fa-file-video-o\f1c8
fa-file-word-o\f1c2
fa-file-zip-o\f1c6
fa-file-text\f15c
fa-file-text-o\f0f6
fa-files-o\f0c5
fa-image\f03e
fa-sticky-note\f249
fa-sticky-note-o\f24a

3.7. Иконки валюты

fa-btc\f15a
fa-dollar\f155
fa-euro\f153
fa-gbp\f154
fa-yen\f157
fa-money\f0d6
fa-ruble\f158
fa-rupee\f156
fa-shekel\f20b
fa-turkish-lira\f195
fa-won\f159

3.8. Иконки управляющих символов

fa-check\f00c
fa-check-circle\f058
fa-check-circle-o\f05d
fa-circle-thin\f1db
fa-check-square\f14a
fa-check-square-o\f046
fa-circle\f111
fa-circle-o\f10c
fa-dot-circle-o\f192
fa-minus-square\f146
fa-minus-square-o\f147
fa-plus-square\f0fe
fa-plus-square-o\f196
fa-minus\f068
fa-minus-circle\f056
fa-square\f0c8
fa-square-o\f096
fa-plus\f067
fa-plus-circle\f055
fa-times-circle\f057
fa-times-circle-o\f05c

3.9. Иконки платежных систем

fa-cc-amex\f1f3
fa-cc-diners-club\f24c
fa-cc-discover\f1f2
fa-cc-jcb\f24b
fa-cc-mastercard\f1f1
fa-cc-paypal\f1f4
fa-cc-stripe\f1f5
fa-cc-visa\f1f0
fa-credit-card\f09d
fa-credit-card-alt\f283
fa-google-wallet\f1ee
fa-paypal\f1ed

3.10. Иконки социальных сетей и сообществ

fa-codepen\f1cb
fa-behance\f1b4
fa-behance-square\f1b5
fa-deviantart\f1bd
fa-digg\f1a6
fa-dribbble\f17d
fa-facebook\f09a
fa-facebook-official\f230
fa-facebook-square\f082
fa-google-plus\f0d5
fa-google-plus-square\f0d4
fa-jsfiddle\f1cc
fa-flickr\f16e
fa-instagram\f16d
fa-github\f09b
fa-github-alt\f113
fa-github-square\f092
fa-linkedin\f0e1
fa-linkedin-square\f08c
fa-odnoklassniki\f263
fa-odnoklassniki-square\f264
fa-pinterest\f0d2
fa-pinterest-p\f231
fa-pinterest-square\f0d3
fa-stack-overflow\f16c
fa-yelp\f1e9
fa-tumblr\f173
fa-tumblr-square\f174
fa-twitter\f099
fa-twitter-square\f081
fa-vk\f189

3.11. Иконки редактирования текста

fa-align-center\f037
fa-align-justify\f039
fa-align-left\f036
fa-align-right\f038
fa-bold\f032
fa-chain\f0c1
fa-chain-broken\f127
fa-clipboard\f0ea
fa-columns\f0db
fa-copy\f0c5
fa-cut\f0c4
fa-dedent\f03b
fa-eraser\f12d
fa-floppy-o\f0c7
fa-font\f031
fa-header\f1dc
fa-indent\f03c
fa-italic\f033
fa-list\f03a
fa-list-alt\f022
fa-list-ol\f0cb
fa-list-ul\f0ca
fa-outdent\f03b
fa-paperclip\f0c6
fa-paragraph\f1dd
fa-paste\f0ea
fa-repeat\f01e
fa-rotate-left\f0e2
fa-rotate-right\f01e
fa-save\f0c7
fa-strikethrough\f0cc
fa-subscript\f12c
fa-superscript\f12b
fa-table\f0ce
fa-text-height\f034
fa-text-width\f035
fa-th\f00a
fa-th-large\f009
fa-th-list\f00b
fa-underline\f0cd

3.12. Иконки направления

fa-level-down\f149
fa-level-up\f148
fa-angle-double-down\f103
fa-angle-double-left\f100
fa-angle-double-right\f101
fa-angle-double-up\f102
fa-angle-down\f107
fa-angle-left\f104
fa-angle-right\f105
fa-angle-up\f106
fa-arrow-circle-down\f0ab
fa-arrow-circle-left\f0a8
fa-arrow-circle-right\f0a9
fa-arrow-circle-up\f0aa
fa-arrow-circle-o-down\f01a
fa-arrow-circle-o-left\f190
fa-arrow-circle-o-right\f18e
fa-arrow-circle-o-up\f01b
fa-arrow-down\f063
fa-arrow-left\f060
fa-arrow-right\f061
fa-arrow-up\f062
fa-arrows-h\f07e
fa-arrows-v\f07d
fa-caret-down\f0d7
fa-caret-left\f0d9
fa-caret-right\f0da
fa-caret-up\f0d8
fa-caret-square-o-down\f150
fa-caret-square-o-left\f191
fa-caret-square-o-right\f152
fa-caret-square-o-up\f151
fa-cart-arrow-down\f218
fa-chevron-circle-down\f13a
fa-chevron-circle-left\f137
fa-chevron-circle-right\f138
fa-chevron-circle-up\f139
fa-chevron-down\f078
fa-chevron-left\f053
fa-chevron-right\f054
fa-chevron-up\f077
fa-exchange\f0ec
fa-long-arrow-down\f175
fa-long-arrow-left\f177
fa-long-arrow-right\f178
fa-long-arrow-up\f176
fa-toggle-down\f150
fa-toggle-left\f191
fa-toggle-right\f152
fa-toggle-up\f151
fa-toggle-off\f204
fa-toggle-on\f205

3.13. Иконки видео плеера

fa-arrows-alt\f0b2
fa-backward\f04a
fa-compress\f066
fa-eject\f052
fa-expand\f065
fa-fast-backward\f049
fa-fast-forward\f050
fa-pause\f04c
fa-pause-circle\f28b
fa-pause-circle-o\f28c
fa-play\f04b
fa-play-circle\f144
fa-play-circle-o\f01d
fa-random\f074
fa-step-backward\f048
fa-step-forward\f051
fa-stop\f04d
fa-stop-circle\f28d
fa-stop-circle-o\f28e
fa-youtube-play\f16a

3.14. Брендовые иконки

fa-500px\f26e
fa-adn\f170
fa-amazon\f270
fa-android\f17b
fa-angellist\f209
fa-apple\f179
fa-bitbucket\f171
fa-bitbucket-square\f172
fa-black-tie\f27e
fa-bluetooth\f293
fa-bluetooth-b\f294
fa-buysellads\f20d
fa-chrome\f268
fa-css3\f13c
fa-connectdevelop\f20e
fa-dashcube\f210
fa-delicious\f1a5
fa-dropbox\f16b
fa-drupal\f1a9
fa-edge\f282
fa-empire\f1d1
fa-expeditedssl\f23e
fa-firefox\f269
fa-fonticons\f280
fa-fort-awesome\f286
fa-forumbee\f211
fa-foursquare\f180
fa-ge\f1d1
fa-get-pocket\f265
fa-git\f1d3
fa-git-square\f1d2
fa-gg\f260
fa-gg-circle\f261
fa-google\f1a0
fa-gratipay\f184
fa-hacker-news\f1d4
fa-houzz\f27c
fa-html5\f13b
fa-ioxhost\f208
fa-joomla\f1aa
fa-lastfm\f202
fa-lastfm-square\f203
fa-leanpub\f212
fa-linux\f17c
fa-maxcdn\f136
fa-meanpath\f20c
fa-medium\f23a
fa-mixcloud\f289
fa-modx\f285
fa-opencart\f23d
fa-openid\f19b
fa-opera\f26a
fa-optin-monster\f23c
fa-pagelines\f18c
fa-pied-piper\f1a7
fa-pied-piper-alt\f1a8
fa-product-hunt\f288
fa-qq\f1d6
fa-rebel\f1d0
fa-reddit\f1a1
fa-reddit-square\f1a2
fa-renren\f18b
fa-safari\f267
fa-scribd\f28a
fa-sellsy\f213
fa-share-alt\f1e0
fa-share-alt-square\f1e1
fa-shirtsinbulk\f214
fa-simplybuilt\f215
fa-skyatlas\f216
fa-skype\f17e
fa-slack\f198
fa-slideshare\f1e7
fa-soundcloud\f1be
fa-spotify\f1bc
fa-stack-exchange\f18d
fa-steam\f1b6
fa-steam-square\f1b7
fa-stethoscope\f0f1
fa-stumbleupon\f1a4
fa-stumbleupon-circle\f1a3
fa-tencent-weibo\f1d5
fa-trello\f181
fa-tripadvisor\f262
fa-usb\f287
fa-viacoin\f237
fa-vimeo\f27d
fa-vimeo-square\f194
fa-vine\f1ca
fa-wechat\f1d7
fa-weibo\f18a
fa-whatsapp\f232
fa-wikipedia-w\f266
fa-windows\f17a
fa-wordpress \f19a
fa-xing\f168
fa-xing-square\f169
fa-y-combinator\f23b
fa-yahoo\f19e
fa-youtube\f167
fa-youtube-square\f166

3.15. Иконки диаграмм

fa-area-chart\f1fe
fa-bar-chart\f080
fa-line-chart\f201
fa-pie-chart\f200

3.16. Вращающиеся иконки

fa-circle-o-notch\f1ce
fa-cog\f013
fa-gear\f013
fa-spinner\f110

4. Похожие ресурсы

В дополнение к коллекции Font Awesome, вы можете использовать и другие иконочные шрифты.

1. Fontello

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

2. Foundation Icon

Foundation Icon — еще одна коллекция иконочного шрифта от разработчиков фреймворка Foundation. Помимо стандартных иконок, на сайте представлены круглые иконки, иконки социальных сетей и многое другое.

3. Material icons

Material icons унифицированные плоские иконки от Google, воплотившие в себе простоту восприятия. Иконки оптимизированы для красивого отображения на всех распространенных платформах и для любых разрешений экрана.

Коллекция иконочных шрифтов содержит 750+ иконок. Самый простой способ установить коллекцию на свой сайт — использовать иконки как Google Web Fonts. Для этого в разметку страницы включается следующий код:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Для корректного отображения шрифта в браузерах элементу, который будет использовать иконочный шрифт, задается класс material-icons:

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Предпочтительный размер иконок */
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased; /* Поддержка всеми WebKit браузерами */
  text-rendering: optimizeLegibility; /* Поддержка Safari и Chrome */
  -moz-osx-font-smoothing: grayscale;  /* Поддержка Firefox. */
  font-feature-settings: 'liga'; /* Поддержка IE. */
}

Сами иконки добавляются с помощью тега <i class="material-icons">лигатура или html-код иконки</i>, например:

<i class="material-icons">account_balance_wallet</i>
<i class="material-icons">&#xE850;</i>

Лигатуру понимают все современные браузеры, IE — начиная с 10 версии.
Код иконки генерится автоматически, для этого вам нужно нажать левой кнопкой мыши на рисунок иконки и скопировать предложенный код.

3.1. Размер иконок

Размер иконок контролируется с помощью дополнительных классов:

.material-icons.md-18 {font-size: 18px;} /* для <i class="material-icons md-18"></i> */
.material-icons.md-24 {font-size: 24px;} /* для <i class="material-icons md-24"></i> */
.material-icons.md-36 {font-size: 36px;} /* для <i class="material-icons md-36"></i> */
.material-icons.md-48 {font-size: 48px;} /* для <i class="material-icons md-48"></i> */
3.2. Цвет иконок

Цвет иконок также задается с помощью дополнительных классов:

.material-icons.md-dark {color: rgba(0, 0, 0, 0.54);} /* <i class="material-icons md-dark"></i> */
.material-icons.md-light {color: rgba(255, 255, 255, 1);} /* <i class="material-icons md-light"></i> */
.material-icons.md-dark.md-inactive {color: rgba(0, 0, 0, 0.26);} /* <i class="material-icons md-dark md-inactive"></i> */
.material-icons.md-light.md-inactive {color: rgba(255, 255, 255, 0.3);} /* <i class="material-icons md-light md-inactive">face</i> */

Чтобы установить пользовательский цвет, нужно добавить класс, определяющий цвет иконки, например:

.material-icons.indigo {color: #1A237E;} /* <i class="material-icons indigo"></i> */

Поделиться:

Функция rgb()

Функция rgb() используется для задания цвета за счет комбинации красного (R), зеленого (G) и синего (B) цветов. Цветовая модель RGB генерирует цвета мониторов компьютеров и телевизоров, сканеров и других электронных устройств. Модель RGB является аддитивной цветовой моделью, т.е. цвета генерируются суммированием световых потоков.

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

Вторичные цвета всегда более яркие, чем основные цвета. Сумма красного, зеленого и синего цветов максимальной интенсивности (255, 255, 255) дает белый цвет. Сумма равных значений красного, зеленого и синего дает нейтральные оттенки серого цвета, причем малые значения основных цветов дают более темные серые тона, а большие — более светлые.

В CSS RGB-значения для каждой позиции задаются числами от 0 до 255, указанными через запятую. 0 означает отсутствие света, 255 — максимальная яркость.

RED GREEN BLUE
rgb(255,0,0) rgb(0,255,0) rgb(0,0,255)
rgb(248,0,0) rgb(0,248,0) rgb(0,0,248)
rgb(240,0,0) rgb(0,240,0) rgb(0,0,240)
rgb(232,0,0) rgb(0,232,0) rgb(0,0,232)
rgb(224,0,0) rgb(0,224,0) rgb(0,0,224)
rgb(216,0,0) rgb(0,216,0) rgb(0,0,216)
rgb(208,0,0) rgb(0,208,0) rgb(0,0,208)
rgb(200,0,0) rgb(0,200,0) rgb(0,0,200)
rgb(192,0,0) rgb(0,192,0) rgb(0,0,192)
rgb(184,0,0) rgb(0,184,0) rgb(0,0,184)
rgb(176,0,0) rgb(0,176,0) rgb(0,0,176)
rgb(168,0,0) rgb(0,168,0) rgb(0,0,168)
rgb(160,0,0) rgb(0,160,0) rgb(0,0,160)
rgb(152,0,0) rgb(0,152,0) rgb(0,0,152)
rgb(144,0,0) rgb(0,144,0) rgb(0,0,144)
rgb(136,0,0) rgb(0,136,0) rgb(0,0,136)
rgb(128,0,0) rgb(0,128,0) rgb(0,0,128)
rgb(120,0,0) rgb(0,120,0) rgb(0,0,120)
rgb(112,0,0) rgb(0,112,0) rgb(0,0,112)
rgb(104,0,0) rgb(0,104,0) rgb(0,0,104)
rgb(96,0,0) rgb(0,96,0) rgb(0,0,96)
rgb(88,0,0) rgb(0,88,0) rgb(0,0,88)
rgb(80,0,0) rgb(0,80,0) rgb(0,0,80)
rgb(72,0,0) rgb(0,72,0) rgb(0,0,72)
rgb(64,0,0) rgb(0,64,0) rgb(0,0,64)
rgb(56,0,0) rgb(0,56,0) rgb(0,0,56)
rgb(48,0,0) rgb(0,48,0) rgb(0,0,48)
rgb(40,0,0) rgb(0,40,0) rgb(0,0,40)
rgb(32,0,0) rgb(0,32,0) rgb(0,0,32)
rgb(24,0,0) rgb(0,24,0) rgb(0,0,24)
rgb(16,0,0) rgb(0,16,0) rgb(0,0,16)
rgb(8,0,0) rgb(0,8,0) rgb(0,0,8)
rgb(0,0,0) rgb(0,0,0) rgb(0,0,0)

Перевод RGB-формата в HEX

Чтобы перевести rgb-запись цвета в hex-формат, нужно взять каждое значение из трех цветов и разделить его на 16. Целая часть от деления будет первым hex-номером. Дробную часть нужно умножить на 16. Это будет второй hex-номер. Также, некоторые числа заменяются на буквы: 10=A, 11=B, 12=C, 13=D, 14=E, 15=F.

Например, переведем цвет rgb(174,175,12) в hex-формат:

174 ÷ 16 = 10 (.875*16) = AE (A=10, E=14)

175 ÷ 16 = 10 (.9375*16) = AF (A=10, F=15)

12 ÷ 16 = 0 (.75*16) = 0C (C=12)

Таким образом, rgb(174,175,12) эквивалентно #aeaf0c.

Поделиться:

Селекторы псевдоклассов и псевдоэлементов HTML5 форм

Псевдокласс — это ключевое слово, которое добавляется к css-селектору (любому элементу веб-страницы) и определяет его особое состояние. Например, с помощью псевдокласса :hover можно изменить стиль элемента при наведении на него курсора мыши.

Виды псевдоклассов

1. Псевдокласс :read-only

Псевдокласс :read-only отбирает html-элементы, для которых задан атрибут readonly — элементы <input> и <textarea>, а также для любого элемента, для которого установлен атрибут contenteditable. Не поддерживается в Internet Explorer, Firefox поддерживает альтернативный псевдокласс :-moz-read-only.

input:read-only:before {
  content: "?";
  color: coral;
}
input:-moz-read-only:before {
  content: "?";
  color: coral;
}

2. Псевдокласс :optional

Псевдокласс :optional отбирает элементы формы, для которых не задан атрибут required. Это могут быть элементы <input>, <select> и <textarea>. Поддерживается в Chrome 10+, Firefox, Safari, Opera 10+, Internet Explorer 10+, Android и iOS.

textarea:optional:hover {
  background: #f5f5f5;
  border: 1px solid #eee;
}

3. Псевдокласс :required

required
Рис. 1. Как работает псевдокласс :required

Псевдокласс :required отбирает элементы формы, для которых установлен атрибут required. Это элементы <input>, <select> и <textarea>. Благодаря этому псевдоклассу можно привлечь внимание к полям формы, обязательным для заполнения. Поддерживается в Chrome 10+, Firefox, Safari, Opera 10+, Internet Explorer 10+, Android и iOS.

input:required {
  color: salmon;
  font-weight: bold;
}

4. Псевдоэлемент ::placeholder

Псевдоэлемент ::placeholder отвечает за замещающий текст-подсказку, выводящийся внутри элементов <input> и <textarea>. В большинстве браузеров цвет замещающего текста по умолчанию светло-серого оттенка. С помощью псевдоэлемента ::placeholder можно изменить такие свойства, как font, color, добавить тень, подчеркивание и т.д. во всех случаях, кроме <input type="datetime-local"> и <input type="date">.

Браузеры имеют свою собственную реализацию псевдоэлемента ::placeholder, поэтому необходимо добавлять браузерные префиксы. В зависимости от браузера, текст-заполнитель может исчезать, когда поле ввода принимает фокус, например, в IE10+. Поддерживается во всех браузерах, в Internet Explorer 10+.

::-webkit-input-placeholder {color:#f00;} /* Chrome/Opera/Safari */
::-moz-placeholder {color:#f00;} /* Firefox 19+ */
:-ms-input-placeholder {color:#f00;} /* IE 10+ */
:-moz-placeholder {color:#f00;} /* Firefox 18- */

5. Псевдокласс :in-range

Выбирает поля формы с установленным диапазоном ограничения, заданным атрибутами min и max. Поддерживается в Chrome 10+, Firefox 28+, Safari 5.5+, Opera 11+, Android и iOS. Не работает в Internet Explorer.

input[type="number"]:in-range {
  background: lightblue;
}

6. Псевдокласс :invalid

Выбирает элементы <input>, значение которых является недопустимым согласно его типу, указанному в атрибуте type
Например, поле <input type="number"> не может содержать буквы, а <input type="email"> должно содержать валидный адрес электронной почты. Поддерживается в Chrome 10+, Firefox 4+, IE 10+, Safari 5+, Opera 10+ и iOS.

input[type="number"]:invalid {
  background: tomato;
} 

7. Псевдокласс :out-of-range

Используется для стилизации элементов, имеющих ограничения на ввод значений в случае, когда вводимое значение элемента неизбежно выходит за пределы указанного диапазона. Поддерживается в Chrome 10+, Firefox, 28+. Safari, Opera 11+, Android и iOS. Не работает в Internet Explorer.

input[type="number"]:out-of-range {
  background: silver;
}

8. Псевдокласс :read-write

Выбирает элементы формы, которые доступны для редактирования пользователем. К этой категории относятся элементы <textarea> И <input>, для которых не заданы атрибуты readonly или disabled, а также другие элементы, для которых задан атрибут contenteditable:

<input type="text">
<input type="number">
<textarea name="word" id="id" cols="30" rows="10"></textarea>
<div contenteditable></div>

Поддерживается в Chrome, Safari, Opera 14+ и iOS. Firefox поддерживает альтернативное :-moz-read-write. Не работает в Internet Explorer и на Android.

textarea:read-write {
  box-shadow: 0 0 2px 2px rgba(0,0,0,.3);
}
textarea:read-write:before {
  content: "Введите текст сюда...";
  color: #d9d9d9;
}

9. Псевдокласс :valid

Выбирает элементы формы, введенные значения которых соответствуют типу, указанному в атрибуте type или находящиеся в разрешенном диапазоне:
поля формы для ввода адреса электронной почты;
поля формы для ввода url-адресов;
поля формы, предполагающие введение числового значения, с указанием диапазона с помощью атрибутов min и max.

Поддерживается в Chrome 10+, Firefox 4+, Safari 5+, Opera 10+, Internet Explorer 10+ и на iOS.

input[type="number"]:valid {
  background-color: lightgreen;
}                   
input:valid {
  box-shadow: 0 0 3px 5px rgba(0, 200, 0, .2);
}
input:valid:focus {
  outline: 0;
  border: none;
  box-shadow: 0 0 3px 6px rgba(0, 200, 0, 0.3);
}

Поделиться:

Правило @charset

Кодировка документа обычно задается в html-документе в теге <meta charset="...">. Как для html-документов, так и для таблиц стилей должна использоваться кодировка UTF-8.

<!-- HTTP запись -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- краткая запись для HTML5 -->
<meta charset="utf-8">

Кодировка — это таблица соответствия машинных кодов и символов алфавита.

Правило @charset определяет кодировку символов, используемую в таблице стилей. Правило должно быть указано самым первым в таблице стилей и ему не должен предшествовать какой-либо символ, даже пробел. Если задано несколько правил @charset, то будет использоваться только первое. Правило может быть полезно при использовании не-ASCII символов в некоторых css-свойствах, например, content.

Не допускается одновременное задание кодировки в таблице стилей с помощью правила @charset и на html-странице внутри элемента <style>, или как значение атрибута свойства style.

Поскольку существует несколько способов задания кодировки таблицы стилей, браузер проверяет эти способы в следующем порядке:
1) Тип кодировки символов, размещенных в начале документа.
2) Значение атрибута charset в Content-Type, указанное в http-заголовке (или аналогичном), передаваемом веб-сервером.
3) Тип кодировки, указанный в правиле @charset.
Если в результате проверки информация о кодировке не была получена, то браузер подразумевает, что документ в кодировке UTF-8.

Синтаксис

@charset "UTF-8";       
@charset 'iso-8859-15';

Поделиться:

Правило @font-face

Каждый веб-дизайнер мечтает о создании сайта с красивой типографикой. Но, к сожалению, браузеры поддерживают лишь несколько гарнитур, так называемых «безопасных для веб» шрифтов. В стандартный набор входят следующие шрифты: Arial, Verdana, Times, Georgia, Courier New и несколько других.

Гарнитура определяет набор из одного или более шрифтов, каждый из которых состоит из символов, имеющих общие конструктивные особенности — вес, стиль, дизайн, начертание, плотность, размер, например, шрифты без засечек (или гротески), шрифты с засечками (антиква). Гарнитура состоит из набора знаков (цифры, буквы, знаки пунктуации, специальные символы, также может состоять из неалфавитных символов).
Шрифт — это набор символов конкретного размера, веса и стиля. Например, шрифт Times New Roman стиль italic размера 16px — это один шрифт, а Times New Roman стиль italic размера 10px — это уже другой.

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

Правило @font-face нужно размещать перед всеми остальными правилами css, так как этот прием улучшит производительность страницы. Загружаемые шрифты можно помещать в специальную папку fonts, созданную на сервере.

Чтобы подключить шрифт с помощью правила @font-face, нужно:
1) загрузить файл шрифта на сервер в нескольких форматах для поддержки всеми браузерами,
2) указать название шрифта, прописать ссылку на файл и задать описание шрифта,
3) добавить имя шрифта в свойство font-family элемента, который будет отображаться данным шрифтом.

@font-face { 
    font-family: "WebFont";
    src: url(WebFont.eot?) format("eot"), /* IE8+, знак ? позволяет обойти баг в обработчике значения src */
         url(WebFont.woff) format("woff"), /* все современные браузеры, IE9+ */
         url(WebFont.ttf) format("truetype"); /* все современные браузеры */
}
p {font-family: "WebFont", Arial, sans-serif; }

Этот код говорит браузеру отображать текст внутри элемента <p>, используя шрифт WebFont. Если браузер по какой-либо причине не сможет загрузить данный шрифт, он выберет подходящий из списка шрифтов. Он перебирает их в указанном порядке до тех пор, пока не находит шрифт, который сможет успешно использовать.

Внутри каждого семейства шрифта можно определить до девяти значений жирности (веса). Поэтому для каждого встраиваемого шрифта, а также для каждого начертания нужно задавать отдельное правило @font-face, т.е. нельзя объявить в одном правиле два разных шрифта или шрифт одного семейства, но разных стилей и веса.

@font-face { 
    font-family: "WebFont";
    src: url(WebFont.eot?) format("eot"), 
         url(WebFont.woff) format("woff"), 
         url(WebFont.ttf) format("truetype");
    font-weight: bold;
    font-style: italic;
}
@font-face { 
    font-family: "WebFont";
    src: url(WebFont.eot?) format("eot"), 
         url(WebFont.woff) format("woff"), 
         url(WebFont.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
}

В общем виде для шрифта можно задать следующие свойства:

@font-face {
  font-family: "FontName";
  src: url() format(" ");
  font-variant: ;
  font-stretch: ;
  font-weight: ;
  font-style: ;
} 

Если вы предполагаете, что на компьютере пользователя установлен данный шрифт и хотите, чтобы шрифт загружался только после проверки его наличия у пользователя, то можно воспользоваться значением local() для задания адреса:

@font-face { 
    font-family: "WebFont";
    src: local("WebFont"),
         url(WebFont.eot?) format("eot"), 
         url(WebFont.woff) format("woff"), 
         url(WebFont.ttf) format("truetype");
    font-weight: bold;
    font-style: italic;
}

Форматы веб-шрифтов

Свойство @font-face имеет хорошую поддержку в браузерах, но разные браузеры используют разные форматы шрифтов. Существуют четыре основных формата шрифтов:

Формат WOFF (Web Open Font Format), открытый сетевой формат шрифта, разработанный в Mozilla. Технически WOFF нельзя назвать форматом шрифта, так как он представляет собой лишь оболочку с функцией сжатия. Формат сжимает шрифты в формате TTF/OTF для использования их в интернете. Также, WOFF позволяет добавлять к файлу метаданные, например, сведения о лицензии.

Форматы OTF/TTF (OpenType Font и TrueType Font) работают в большинстве браузеров. Оба формата распространяются свободно.

Формат EOT (Embedded Open Type) создан разработчиками Microsoft, представляет сжатую копию шрифта TTF, повторное использование которого запрещается технологиями DRM (Digital Rights Management, цифровое управление правами доступа). Поддерживается только в IE, начиная с 8-й версии.

SVG/SVGZ (Scalabe Vector Graphics) — тип файлов шрифтов, представляющий векторное начертание шрифта. Как правило, имеет меньшие размеры файлов, тем самым позволяя улучшить производительность на мобильных устройствах. Работает в Opera Mobile и iOS Safari.

Сложности использования встроенных шрифтов

1) Файлы шрифтов могут быть больших размеров, поэтому в некоторых случаях добавление @font-face замедляет загрузку страниц.
2) С некоторыми шрифтами связаны лицензионные ограничения, не допускающие бесплатного использования.
3) Некоторые шрифты просто плохо смотрятся на веб-страницах.

Полезные ресурсы

  • font-squirrel

    Font Squirrel — сервис, позволяющий конвертировать веб-шрифты разных форматов. Небольшой минус — высота некоторых символов после конвертации может различаться. Шрифт загружается на сервис по кнопке Upload Fonts.

    Подробнее

  • Webfont.ru — ресурс, содержащий коллекцию бесплатных шрифтов для сайтов. На сайте также есть форум, где можно задавать вопросы, касающиеся использования того или иного шрифта. В закладке «Полигон» вы сможете увидеть, как будет выглядеть текст, поиграв с размерами, задав для него тень и т.д.

    Подробнее

Поделиться:

Свойство z-index

Наложение элементов с помощью свойства z-index

Свойство z-index управляет порядком наложения позиционированных элементов в случае, когда они накладываются друг на друга. Свойство принимает целые положительные и отрицательные значения.

В нормальном потоке position: static элементы располагаются последовательно один за другим в том порядке, в котором они определены в html-документе. По умолчанию установлен z-index: auto;.

x-y-z-axis
Рис. 1. Позиционирование элементов вдоль оси Z

Свойство z-index задает порядок расположения элементов вдоль оси Z. В обычной ситуации элементы с высоким значением индекса будут перекрывать элементы с меньшим значением и значением auto, располагаясь на переднем плане.

z-index-property
Рис. 2. Воздействие свойства z-index на позиционированные элементы

Контекст наложения

Если для элементов свойства z-index и position не заданы явно, контекст наложения равен порядку их расположения в исходном коде. Если для элементов не задан z-index, браузер отображает элементы на странице в следующем порядке:

Корневой элемент <html>, который содержит все элементы веб-странице.

Блочные элементы, не плавающие и не позиционированные.

Плавающие float не позиционированные элементы в порядке их расположения в исходном коде.

Строковые не позиционированные элементы (текст, изображения).

Позиционированные position элементы в порядке их следования в исходном коде. Последний из них будет расположен на переднем плане.

flow-normal
normal-flow
Рис. 3. Порядок расположения элементов в 3D пространстве по умолчанию
<div class="main">
    <header style="height: 50px;"></header>
    <p style="float: left; width: 340px;"><img src="https://html5book.ru/images/winter-image.jpg" style="float: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    <aside style="float: left; width: 200px;"></aside>
    <article style="position: absolute; right: 40px; top: 130px; width: 160px; height: 100px;"></article>
    <footer style="height: 50px;"></footer>
</div>

Как видно из рисунка, элемент с position: absolute; находится на переднем плане, далее идет текст, под ним располагаются плавающие элементы с float: left;, не позиционированные блочные элементы расположены на заднем плане (так как плавающие и позиционированные элементы удаляются из потока, то блочные не позиционированные элементы их игнорируют и располагаются друг за другом, в соответствии с разметкой, поэтому элемент <footer> расположился под элементом <header>).

Свойство z-index создает новый контекст наложения. Оно позволяет изменить порядок наложения позиционированных элементов. Элементы будут отображаться на странице в следующем порядке (если для них не заданы свойства, влияющие на контекст наложения — opacity, filter, transform):

Корневой элемент <html>, который содержит все элементы веб-странице.

Позиционированные элементы с отрицательным значением z-index.

Блочные элементы, не плавающие и не позиционированные.

Плавающие float не позиционированные элементы в порядке их расположения в исходном коде.

Строковые не позиционированные элементы (текст, изображения).

Позиционированные элементы со значениями z-index: 0; и z-index: auto;.

Позиционированные элементы с положительными значениями z-index. Высокое значение индекса отобразит элемент на переднем плане. Элементы с равными значениями z-index будут отображаться согласно их расположения в исходном коде.

flow-new
Рис. 4. Свойство z-index создает новый контекст наложения элементов в 3D пространстве

Поделиться:

Свойство resize

Свойство resize позволяет пользователю изменять размеры элемента, задавая направление изменения — по вертикали, горизонтали или в обе стороны. Для всех элементов, кроме <textarea>, свойство работает, только если для элемента установлено свойство overflow, отличное от visible. Не работает в Internet Explorer. Применяется к блочным элементам, строчно-блочным и таблицам.

resize-css
Рис. 1. Свойство resize

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

resize
Значения:
none Значение по умолчанию. Запрещает изменение размеров. С помощью этого значения можно отменить изменение размеров, установленное по умолчанию для элемента <textarea>.
both Элемент растягивается в обеих направлениях, по горизонтали и вертикали
horizontal Элемент может растягиваться в одном направлении — по горизонтали.
vertical Элемент может растягиваться только по вертикали.
inherit Наследует свойство от родительского элемента.

Синтаксис:

textarea {
    resize: none;
}
div {
    resize: vertical;
}

Поделиться:

Свойство display

Свойство display отвечает за вывод и визуальное отображение элементов на странице. Также с помощью свойства display можно изменить тип генерируемого контейнера. Свойство не наследуется.

Любой html-элемент генерирует на веб-странице прямоугольный контейнер. Все видимое на экране состоит из контейнеров разных типов.

В нормальном потоке блочные элементы генерируют структурные блоки и выводятся вертикально один над другим, занимая по ширине 100% ширины блока-контейнера.

Строковые контейнеры генерируют строковые блоки и выводятся в строке горизонтально. Ширина строковых элементов равна ширине их содержимого.

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

Таблицы обрабатываются браузером как блоки. Внутренние элементы таблицы генерируют прямоугольные блоки, имеющие содержимое, отступы padding и рамки border, но не имеющие полей margin.

Таблица 1. Значения свойства display
display
Значения:
inline Значение по умолчанию. Элемент генерирует строковый блок. Аналог — тег <span>.
block Элемент генерирует структурный блок, как и тег <div>.
flex Элемент генерирует структурный блок, который создает адаптивный контейнер для дочерних элементов.
inline-block Элемент генерирует строковый блок.
inline-flex Элемент генерирует строковый блок, который создает адаптивный контейнер для дочерних элементов.
inline-table Элемент определяет структурный блок, который генерирует строковый блок.
list-item Элемент генерирует структурный блок, который отображается как элемент списка <li>.
table Элемент генерирует структурный блок. На странице ведет себя аналогично <table>.
table-caption Элемент генерирует основной заголовок таблицы. На странице ведет себя аналогично <caption>.
table-column Элемент описывает столбец ячеек, визуальное представление не генерируется. Аналог — <col>.
table-column-group Элемент объединяет один или несколько столбцов. Аналог — <colgroup>.
table-cell Элемент генерирует отдельную ячейку таблицы, на странице ведет себя аналогично <th> и <td>.
table-header-group Элемент определяет группу строк заголовка, которая всегда отображается перед остальными строками и группами строк. Аналог — <thead>.
table-footer-group Элемент определяет группу строк заголовка, которая всегда отображается после всех остальных строк и перед любым нижним основным заголовком. Ведет себя аналогично <tfoot>.
table-row-group Элемент объединяет одну или несколько строк. Аналог — <tbody.
table-row Элемент является строкой ячеек. Пример — <tr>.
none Элемент не генерирует никакой контейнер, полностью удаляясь со страницы.
inherit Наследует свойство от родительского элемента.

Поделиться:

Функция hsl()

Функция hsl() используется для задания цветов в формате HSL. Функция принимает три значения, разделенных между собой запятой: тон (Hue), насыщенность (Saturation) и яркость (Lightness).

background: hsl(65, 10%, 50%);
background: hsl(320, 65%, 70%);

Тон

Тон или цвет, представляет собой угол (задается в градусах без указания единицы измерения), в диапазоне от 0° или 360° цветового круга относительно красного цвета. Красный цвет имеет угол 0° или 360°. Зеленый — 120°. Синий — 240°. Отрицательные значения допускаются, например 300° можно записать как -60°.

hsl-colors
Рис. 1. Цветовой круг HSL от Erin Sowards

Насыщенность

Насыщенность задается в процентах. 100% означает полную насыщенность, а 0% дает оттенок серого.

Яркость

Яркость, или светлота, также задается в процентах. 100% светлоты дает белый цвет, 0% — черный цвет.

Таблицы HSL-цветов

Изменяя значения насыщенности и яркости, можно получить соседние оттенки для того или иного цвета. Чтобы лучше понять, как работают эти два параметра, посмотрите таблицы ниже.

0° красный
Насыщенность  
0% 25% 50% 75% 100% Яркость
          100%
          88%
          75%
          63%
          50%
          38%
          25%
          13%
          0%
30° оранжевый
Насыщенность  
0% 25% 50% 75% 100% Яркость
          100%
          88%
          75%
          63%
          50%
          38%
          25%
          13%
          0%
60° желтый
Насыщенность  
0% 25% 50% 75% 100% Яркость
          100%
          88%
          75%
          63%
          50%
          38%
          25%
          13%
          0%
90° желто-зеленый
Насыщенность  
0% 25% 50% 75% 100% Яркость
          100%
          88%
          75%
          63%
          50%
          38%
          25%
          13%
          0%
120° зеленый
Насыщенность  
0% 25% 50% 75% 100% Яркость
          100%
          88%
          75%
          63%
          50%
          38%
          25%
          13%
          0%
150° зелено-голубой
Насыщенность  
0% 25% 50% 75% 100% Яркость
          100%
          88%
          75%
          63%
          50%
          38%
          25%
          13%
          0%
180° голубой
Насыщенность  
0% 25% 50% 75% 100% Яркость
          100%
          88%
          75%
          63%
          50%
          38%
          25%
          13%
          0%
210° сине-голубой
Насыщенность  
0% 25% 50% 75% 100% Яркость
          100%
          88%
          75%
          63%
          50%
          38%
          25%
          13%
          0%
240° синий
Насыщенность  
0% 25% 50% 75% 100% Яркость
          100%
          88%
          75%
          63%
          50%
          38%
          25%
          13%
          0%
270° пурпурно-синий
Насыщенность  
0% 25% 50% 75% 100% Яркость
          100%
          88%
          75%
          63%
          50%
          38%
          25%
          13%
          0%
300° пурпурный
Насыщенность  
0% 25% 50% 75% 100% Яркость
          100%
          88%
          75%
          63%
          50%
          38%
          25%
          13%
          0%
330° пурпурно-красный
Насыщенность  
0% 25% 50% 75% 100% Яркость
          100%
          88%
          75%
          63%
          50%
          38%
          25%
          13%
          0%

Поделиться:

Функция calc()

Функция сalc() позволяет задавать вычисляемые значения css-свойств. С помощью данной функции можно осуществлять следующие математические операции:
сложение +
вычитание -
умножение *
деление /

Функцию сalc() можно использовать для вычисления следующих типов значений:
размеров cm, mm, in, pt, pc, px
углов deg, grad, rad, turn
времени s, ms
и прочих числовых значений.

Все вычисления производятся в соответствии с правилами приоритета операторов. Нельзя складывать значения, заданные разными единицами измерения. Между операторами обязательны пробелы с обеих сторон:

div {
position: absolute; 
left: calc(100% - 20px);
}

или

div {
width: calc(100% - 50% / 2);
}

О проблемах, возникающих при использовании функции сalc() в LESS/SASS, вы можете прочитать здесь и здесь.

IE Firefox Chrome Safari Opera iOS Safari Opera Mini Android Browser Chrome for Android
10
9 частично
31 31 7 30 7.1 40
4.4 частично
42

Практическое применение

С помощью функции сalc() удобно позиционировать изображения:

div {background-position: calc(100% - 10px) calc(100% - 10px), calc(0% + 10px) calc(0% + 10px);}

See the Pen QKjgOY by Elena (@html5book) on CodePen.

А также задавать одинаковую ширину элементам и позиционировать элементы по центру блока:

div {width: calc(100% / 3);}

See the Pen rrOwYX by Elena (@html5book) on CodePen.

Поделиться:

Высота и ширина элемента

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

Между содержимым элемента и его рамкой находятся отступы padding, за рамкой элемента — поля margin. Область содержимого существует у каждого элемента, остальные области являются необязательными.

box-model
Рис. 1. Блочная модель элемента

1. Высота элемента

Свойство height задает высоту контента блочного элемента и не оказывает никакого влияния на строчные элементы display: inline;. Высота строчных элементов равна высоте их содержимого. Отрицательные значения не допускаются. Свойство не наследуется.

height
Значения:
auto Значение по умолчанию. Элемент будет отображаться в полную величину, независимо от высоты контейнера. Если сверху находится другой блок и для блока не задано обтекание с помощью свойства float, то произойдет наложение.
длина Высота элемента задается в величинах длины, например, px, cm и т.д.
% Вычисляется относительно высоты блока-контейнера.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

p {height: 100px;}

2. Ширина элемента

Свойство width задает ширину контента блочного элемента и не оказывает никакого влияния на строчные элементы display: inline;. Ширина строчных элементов равна ширине их содержимого. Отрицательные значения не допускаются. Свойство не наследуется.

width
Значения:
auto Значение по умолчанию. Элемент занимает всю ширину блока-контейнера. Если для элемента задать поля, рамку или отступы, они будут вычитаться из ширины элемента. Если для элемента задать левое и правое поле, равное auto, то элемент расположится по середине блока-контейнера.
длина Ширина элемента задается в величинах длины, например, px, cm и т.д.
% Ширина вычисляется относительно родительского элемента.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

p {width: 100px;}

3. Высота и ширина абсолютно позиционированного элемента

Задавать ширину и высоту абсолютно позиционированного элемента position: absolute; не всегда необходимо, так как в данном случае высота и ширина неявно определяются смещением элемента. Если для элемента заданы границы border и поля margin, они уменьшают размеры области содержимого на соответствующие значения.

div {
background: #6A7690;
position: absolute;
top: 0;
bottom: 0;
left: 50%;
right: 0;
} /*в данном случае высота элемента 100%, ширина 50% от родительского блока*/
height-width-auto
Рис. 2. Высота и ширина абсолютно позиционированного элемента

4. Отступы элемента

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

Если заданы три значения, например, div {padding: 10px 20px 30px;}, то они распределятся в следующем порядке: первое значение — верхний отступ, второе — правый и левый отступ, третье — нижний отступ.
Если заданы два значения, например, div {padding: 10px 20px;}, то первое задаст верхний и нижний отступ, второе — правый и левый.
Одно значение, например, div {padding: 10px;}, установит одинаковый отступ для всех сторон элемента.

padding
Значения:
длина Отступы элемента задаются при помощи единиц длины, например, px, pt, cm.
% Вычисляются относительно ширины родительского элемента, могут меняться при изменении ширины элемента. Отступы сверху и снизу равны отступам слева и справа, т.е. верхние и нижние отступы тоже вычисляются относительно ширины элемента.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

p {padding: 5px 10px 15px 10px;}

4.1. Отступы с одной стороны элемента

Чтобы задать отступ только с одной стороны элемента, нужно воспользоваться одним из свойств padding-top, padding-right, padding-bottom, padding-left, например:

p {padding-left: 10px;}

5. Поля элемента

Большинство элементов отделены друг от друга полями. Свойство margin — это краткая форма записи полей элемента в следующем порядке: верхнее, правое, нижнее, левое. Используется в случае, когда нужно задать поля с нескольких сторон, но не обязательно с четырех. Смежные по вертикали поля блочных элементов схлопываются, а верхние и нижние поля не оказывают никакого эффекта на строчные элементы. Отрицательные значения допускаются. Свойство не наследуется.

Если заданы три значения, например, div {margin: 10px 20px 30px;}, то они распределятся в следующем порядке: первое значение — верхнее поле, второе — правое и левое поле, третье — нижнее поле.
Если заданы два значения, например, div {margin: 10px 20px;}, то первое задаст верхнее и нижнее поле, второе — правое и левое.
Одно значение, например, div {margin: 10px;}, установит одинаковые поля для всех сторон элемента.

{margin: 0 auto;} сработает только в том случае, если ширина элемента задана явно.

absolute-size
Рис. 3. margin: auto; для абсолютно позиционированного элемента
margin
Значения:
длина Размер отступа задается в единицах длины, например, px, in, em. Значение по умолчанию 0.
% Вычисляется относительно ширины блока контейнера. Изменяются, если изменяется ширина родительского элемента.
auto Значение по умолчанию, браузером вычисляется в ноль. Если для правого и левого отступов установить значение auto, то элемент будет центрирован внутри своего блока-контейнера.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

div {margin: 5px 10px 2px 5px;}

5.1. Поля с одной стороны элемента

Свойства margin-top, margin-right, margin-bottom, margin-left управляют соответствующими полями с каждой стороны элемента, например:

p {margin-left: 10px;}

6. Ограничение ширины и высоты

CSS также поддерживает еще несколько свойств, связанных с установкой высоты и ширины элементов вeб-стpaниц: min-height, min-width, max-height и max-width. Эти свойства позволяют устанавливать минимальное и максимальное значения ширины или высоты элемента, давая элементу возможность заполнить доступное пространство. Свойства часто используются для адаптивного дизайна веб-страниц. Применяется для всех элементов, кроме строчных и элементов таблиц. Всегда идут после основного правила, т.е. после задания элементу height или width. Не наследуется.

min-height / min-width / max-height / max-width
Значения:
длина Размеры элемента задаются в единицах длины. Значения не могут быть отрицательными.
% Вычисляется относительно ширины/высоты блока контейнера. Изменяются, если изменяется ширина родительского элемента.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Можно задавать обычные размеры при помощи одних единиц измерения, а ограничения размеров при помощи других единиц, например:

div {
width: 400px;
max-width: 50%;
}

Элемент будет иметь ширину 400px, только если это значение не будет превышать 50% ширины блока-контейнера, в противном случае его ширина будет уменьшена.

Поделиться: