Прозрачный текст на css

CSS opacity (CSS прозрачность)

W3C в своей рекомендации CSS3 определяет свойство для применения эффекта прозрачности к элементам страницы. Значением данного свойства является число в диапазоне от 0.0 до 1.0. При значении равном нулю элемент становится полностью прозрачным, а при значении равном единице, соответственно, совсем не прозрачным. Свойство можно применять к любым элементам страницы.

Пример (задана прозрачность 0.2, 0.5 и 1.0):

.img1 { opacity: 0.2; }
.img2 { opacity: 0.5; }
.img3 { opacity: 1.0; }
/* Последнее правило можно не указывать, т.к. 
по умолчанию элемент и так полностью виден. */

Нравится? Да? Так что самое время подпортить настроение. Понятное дело, что разные браузеры по-разному реализуют данное свойство: кто вообще не реализует, кто реализует, используя свое собственное название для данного свойства, а кто фильтры использует.

Браузеры поддерживающие CSS3 opacity

Понимают CSS3 свойство opacity следующие браузеры: Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9.

Для установки прозрачности через скрипт используем: object.style.opacity

Mozilla 1.6 и ниже, Firefox 0.8

Старые Mozilla и Firefox 0.8 используют своё название данного свойства: -moz-opacity

Для установки прозрачности через скрипт используем: object.style.MozOpacity

Safari 1.1, Konqueror 3.1

Данные товарищи, построенные на движке KHTML, используют для управления прозрачностью свойство: -khtml-opacity

Для установки прозрачности через скрипт используем: object.style.KhtmlOpacity

Однако, имейте ввиду, что данное свойство доступно лишь в данных версиях этих браузеров. Safari с версии 1.2 использует CSS3 opacity, но при этом Konqueror старше версии 3.1, перестав поддерживать -khtml-opacity, не ввел поддержку CSS3 opacity.

Причиной по которой Konqueror утратил возможность реализации эффекта прозрачности как раз и заключается во внесение в ядро KHTML патчей от Safari, т.к. Safari использует возможности присутствующие в Mac OS X, но которых нет в KDE.

Конечно рано или поздно эта ситуация будет исправлена, но на данный момент в последней версии 3.5 ситуация остается прежней.

Internet Explorer 5.5+

Данный браузер, начиная с версии 5.5 и включая последнюю на сегодняшний день версию Internet Explorer 7, реализует прозрачность через Alpha DirectX фильтр. Стоит отметить, что данный фильтр использует значение прозрачности в диапазоне от 0 до 100 (а не от 0.0 до 1.0). Так же отмечу, что фильтр можно применять лишь к элементу с установленным свойством height, или width, или position со значением absolute, или writingMode со значением tb-rl, или с contentEditable установленным в true.

Пример (устанавливаем прозрачность на половину):

.img1 { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); }
/* синтаксис IE5.5+ (является предпочтительным) */
.img2 { filter: alpha(opacity=50); } /* синтаксис IE4 */

Для установки прозрачности через скрипт используем: object.style.filter = «progid:DXImageTransform.Microsoft.Alpha(строка параметров)». Для получения прозрачности аналогичной прозрачности W3C используем в качестве строки параметров значение «opacity=число от 0 до 100». Описание всех параметров смотрите на странице описания фильтра.

More

Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarShow/Force ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsJS String LengthJS Default ParametersGet Current URLGet Current Screen SizeGet Iframe Elements

Definition and Usage

The property sets the opacity level for an element.

The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.

opacity 0.2

opacity 0.5

opacity 1(default)

Note: When using the property to add transparency to
the background of an element, all of its child elements become transparent as
well. This can make the text inside a fully transparent element hard to read. If
you do not want to apply opacity to child elements, use RGBA color values
instead (See «More Examples» below).

Default value:	1
Inherited:	no
Animatable:	yes, see individual properties. Read about animatable Try it
Version:	CSS3
JavaScript syntax:	object.style.opacity=»0.5″ Try it

Виды титульных листов

По структуре различают два вида титульных листов — однополосный и двухполосный.

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

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

Также различают:

1. Разворотный титульный лист – это вторая и третья страницы двойного титульного листа, на которых (раздельно на каждой) напечатаны сведения об издательстве и издании (и только об этом).
2. Распашной титульный лист – разворот второй и третьей страниц двойного титульного листа с текстом и изображением, которые начинаются на левой странице разворота и заканчиваются на правой, т.е. распахнуты на разворот, в отличие от разворотного листа, где каждая страница разворота строится самостоятельно.
3. Совмещённый титульный лист – когда выходные данные титульного листа помещаются на спуске начальной полосы издания, т.е. совмещаются с текстом ради экономии, чаще всего в брошюрах и журналах. Часто совмещают с содержанием или оглавлением.

Прозрачность и зазубренный текст в IE

С выходом Windows XP появилось сглаживание экранных шрифтов методом ClearType, а вместе с ним и побочные эффекты в IE при использовании этого метода сглаживания. Касательно нашего случая, если применяется прозрачность к элементу с текстом при включенном методе сглаживания ClearType, то текст перестает нормально отображаться (полужирный текст — bold, например, двоится, могут так же появляться различные артефакты, например, в виде чёрточек, зазубренного текста). Для того чтобы исправить положение, для IE нужно задать фоновый цвет, CSS свойство background-color, элементу к которому применяется прозрачность. К счастью в IE7 баг устранен.

How To Create a Transparent Image Text

Step 1) Add HTML:

Example

<div class=»container»>  <img src=»notebook.jpg»
alt=»Notebook» style=»width:100%;»>  <div class=»content»>   
<h1>Heading</h1>    <p>Lorem ipsum..</p>  </div>
</div>

Step 2) Add CSS:

Example

.container {  position: relative;   max-width: 800px;
/* Maximum width */  margin: 0 auto; /* Center it */
}.container .content {
  position: absolute; /* Position the background text */  bottom: 0;
/* At the bottom. Use top:0 to append it to the top */  background:
rgb(0, 0, 0); /* Fallback color */  background: rgba(0, 0, 0, 0.5);
/* Black background with 0.5 opacity */  color: #f1f1f1;
/* Grey text */  width: 100%; /* Full width */  padding: 20px;
/* Some padding */}

❮ Previous
Next ❯

Прозрачность контента

Создавая средствами CSS-прозрачность контента, для начала стоит понять, как необходимо прописывать саму форму. Конечно же, в данном материале не будет углубления в стандартные теги для программирования страницы сайта в общем. Для наглядного примера речь пойдет о прямоугольной области, окрашенной монотонной заливкой. Чтобы отобразить ее, потребуется создать простенький файл стиля CSS с последующей привязкой, или же разместить код прямо на странице html-документа. Прописав для прямоугольного блока необходимые параметры высоты, ширины, цвета и контура, к стилю необходимо добавить код, позволяющий сделать прозрачность CSS-объекта. За это отвечает параметр «opacity: 0.X», так как это и есть уровень видимости. Чем ближе его значение к единице, тем объект становится незаметнее. Данный стиль будет исправно работать в браузерах, обладающих поддержкой CSS3. Такими инструкциями сейчас обладают практически все современные веб-обозреватели.

Лучшие модели до 30000 рублей

В сегменте до 30000 рублей вы сможете купить достаточно производительный для игр девайс или популярные в 2020 году трансформеры, которые выводят мобильность на новый уровень.

Lenovo Flex 3 11IGL05

Lenovo Flex – это самый настоящий малыш с диагональю 11,6 дюймов и HD разрешением. Матрица здесь IPS. Устройство является трансформером, то есть может разворачиваться на 360 градусов и по сути одновременно является планшетом. Модель очень легкая – 1,2 кг, имеет мощный для сегмента чип Intel Celeron N4020, память – 4/64 ГБ. Интерфейсы представлены двумя USB, HDMI, USB-C. Работа от аккумулятора – 8 часов.

Цена: от 27 000 рублей.

HP 17-ca0156ur

Далеко не всем требуется мобильность и если вы в первую очередь подыскиваете большой экран для фильмов или игр, то ноутбук от HP вам понравится. У него экран 17 дюймов с HD разрешением, процессор AMD A6 9225 и память 4 ГБ. Постоянный накопитель представлен SSD накопителем на 256 ГБ. Устройство имеет дискретную графику AMD Radeon 256. При этом модель может похвастаться 9 часами работы от аккумулятора и хорошим набором выходов – тремя USB, HDMI, 3,5 и картридером. Кроме того, устройство способно предложить DVD привод.

Цена: от 28 000 рублей.

ASUS X540UB-DM264

Если вы ищите игровой, но недорогой вариант, то данная модель вам подойдет. Здесь стоит мощный процессор Core i3, 4 ГБ оперативной памяти и дискретная видеокарта nVidia GeForce MX110. Постоянный накопитель – 500 ГБ. Экран устройства матовый, 15 дюймов с FHD разрешением. В ноутбуке есть три USB, HDMI, 3,5, картридер и дисковод. Автономность около 5-6 часов.

Цена: от 29 500 рублей. (Похожая модель, только шустрее: ASUS VivoBook A512DA-BQ1013).

Где находится Java в Windows 10?

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider

HSLA

Формат HSLA похож по синтаксису на HSL, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.

Пример

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Цвета</title>
<style>
body { background-color: #F9F2E3; }
h2 {
background-color: rgb(214,86,43);
color: rgba(255,255,255,.9);
padding: 10px;
}
p { color: green; }
div {
background-color: hsl(60,100%,25%);
color: hsla(120,100%,50%,0.1);
}
</style>
</head>
<body>
<h2>Предупреждение</h2>
<p>Все перечисленные на сайте методы ловли льва являются теоретическими
и базируются на вычислительных методах. Авторы не гарантируют вашей
безопасности при их использовании и снимают с себя всякую
ответственность за результат. Помните, лев это хищник и
опасное животное!</p>
<div>Арррргх!</div>
</body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Цвета на веб-странице

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

#RRGGBB | #RGB	3	12	1	3.5	1	1
Названия	3	12	1	3.5	1	1
rgb()	4	12	1	3.5	1	1
hsl()	9	12	1	9.5	3.1	1
rgba()	9	12	1	10	3.1	3
hsla()	9	12	1	10	3.1	3

#RRGGBB | #RGB	1	1	1	1
Названия	1	1	1	1
rgb()	1	1	1	1
hsl()	1	1	10	4
rgba()	4	4	10	4
hsla()	4	4	10	4

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

CSS opacity симбиоз

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

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/
-moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
-khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */

По сути, нужными являются первое и последнее правила, для IE5.5+ и браузеров понимающих CSS3 opacity, а два правила по середине явно погоды не делают, но и не очень то и мешают (сами решайте, нужны ли они вам).

Повышение универсальности кода

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

Для Internet Explorer версии 5.5 и выше воспринимаемым кодом является весьма длинная и некрасивая строчка — «filter:progid:DXImageTransform.Microsoft.Alpha(opacity=X)», где параметр прозрачности необходимо указывать уже не в долях от единицы, а в сотнях. Его максимальное значение, при котором прозрачность цвета CSS-объекта становится полной, составляет 100.

Собственный код существует и для менее популярных браузеров. Одним из таких является Konqueror, больше известный пользователям рабочей среды KDE на UNIX-подобных системах. Для него прозрачность CSS потребуется прописать параметром «-khtml-opacity: 0.X».

Для полной уверенности в оптимизации своего кода можно добавить строчку, обеспечивающую поддержку одних из первых версий браузеров Mozilla: «-moz-opacity: 0.X».

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

Transparency using RGBA

If you do not want to apply opacity to child elements, like in our example above, use RGBA color values.
The following example sets the opacity for the background color and not the text:

100% opacity

60% opacity

30% opacity

10% opacity

You learned from our CSS Colors Chapter, that you can use RGB as a color value. In addition to RGB,
you can use an RGB color value with an alpha channel (RGBA) — which specifies the opacity for a color.

An RGBA color value is specified with: rgba(red, green, blue, alpha). The
alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Tip: You will learn more about RGBA Colors in our CSS Colors Chapter.

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Style
Font Size
Font Google
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

:hover для простой смены прозрачности

Ещё отмечу, что для простой смены прозрачности (но не постепенного её изменения) в самый раз подходит псевдо-селектор :hover, который позволяет определить стили для элемента, в момент наведения на него мыши.

<style type="text/css">
a:hover img {
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
  -moz-opacity: 0.3;
  -khtml-opacity: 0.3;
  opacity: 0.3;
}
</style>

<a href="javascript:void(0)">
<img src="/images/articles/strawberry.jpg" width="100" height="80" />
</a>

Обратите внимание, что картинка размещена внутри элемента A. Дело в том, что Internet Explorer вплоть до версии 6, понимает псевдо-селектор :hover, только применительно к ссылкам, а не к любым элементам, как положено в CSS (в IE7 положение исправлено)

More Examples

Example

The opacity property adds transparency to the background of an element, and
to all of its child elements as well. This makes the text inside a transparent element hard to read:

div.first {  opacity: 0.1;}div.second { 
opacity: 0.3;}div.third {  opacity: 0.6;
}

Example

To not apply opacity to child elements (like in the example above) use RGBA color values
instead.
The following example sets the opacity for the background color, but not for the text:

div.first {  background: rgba(76, 175, 80, 0.1);}div.second {  background: rgba(76, 175, 80, 0.3);
}div.third {  background: rgba(76, 175, 80,
0.6);}

Try it Yourself »

Tip: Learn more about RGBA Colors in CSS RGBA Colors.

Example

How to use JavaScript to change the opacity for an element:

function myFunction(x) {// Return the text of the selected option  var opacity = x.options.text;  var el = document.getElementById(«p1»);
  if (el.style.opacity !== undefined) {    el.style.opacity = opacity;  } else {
    alert(«Your browser doesn’t support this example!»);  }
}

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS object-fitCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

По шестнадцатеричному значению

Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из её названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трёх цветов — красный, зелёный и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зелёную, а два последних — синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00.

More Examples

Example

Specify the background color with a HEX value:

body {background-color: #92a8d1;}

Example

Specify the background color with an RGB value:

body {background-color: rgb(201, 76, 76);}

Example

Specify the background color with an RGBA value:

body {background-color: rgba(201, 76, 76, 0.3);}

Example

Specify the background color with a HSL value:

body {background-color: hsl(89, 43%, 51%);}

Example

Specify the background color with a HSLA value:

body {background-color: hsla(89, 43%, 51%, 0.3);}

Example

Set background colors for different elements:

body {  background-color: #fefbd8;}h1 {  background-color: #80ced6;}div {  background-color: #d5f4e6;
}span {  background-color: #f18973;}