Скачать модели p228 для css

Understanding the CSS3 Filter Functions

In this chapter we’ll discuss about the filter effects introduced in CSS3 that you can use to perform visual effect operations like blur, balancing contrast or brightness, color saturation etc. on graphical elements like an image before it is drawn onto the web page.

The filter effects can be applied to the element using the CSS3 property, which accept one or more filter function in the order provided.

filter:  blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | sepia() | saturate() | url();

Warning: The CSS3 filter effects currently not supported in any version of the Internet Explorer. Older versions of IE supported a non-standard property for creating effects like opacity, but this feature has been deprecated.

Setting the Image Brightness

The function can be used to set the brightness of an image. A value of will create an image that is completely black. Whereas, a value of or leaves the images unchanged. Other values are linear multipliers on the effect.

You can also set the brightness higher than the 100% which results in brighter image. If the amount parameter is missing, a value of is used. Negative values are not allowed.

Example

Try this code

— The output of the above example will look something like this:

Note: The filter functions that take a value expressed with a percent sign (e.g. ) also accept the value expressed as decimal (like, ). If the value is invalid, the function returns and no filter effect will be applied.

Usage

Just include setcssfilter.js:

script type='text/javascript' src='setcssfilter.js'>script>

Or the minified version:

script type='text/javascript' src='setcssfilter.min.js'>script>

Then set CSS filter with available calls:

setCSSFilter( , { progress:1, filter:"hue-rotate", start:0, end:360 } );

setCSSFilter( , { progress:1, filter:"brightness", start:100, end:200 } );

setCSSFilter( , { progress:1, filter:"drop-shadow", start:, end: } );

setCSSFilter( , { progress:1, filter:"contrast", start:100, end:200 } );

setCSSFilter( , { progress:1, filter:"saturate", start:100, end:500 } );

setCSSFilter( , { progress:1, filter:"sepia", start:0, end:100 } );

setCSSFilter( , { progress:1, filter:"grayscale", start:0, end:100 } );

setCSSFilter( , { progress:1, filter:"invert", start:0, end:100 } );

setCSSFilter( , { progress:1, filter:"blur", start:0, end:4 } );

setCSSFilter( , { progress:1, filter:"opacity", start:100, end:0 } );

That filter applying is cumulative, so you can set multiples filters at the same time. If you want to remove filter, you need to call again changing the ‘start’ and ‘end’ params.

You can call during a updating tween as this TimelineMax example:

var progressEase = { value:0 };

var tl = new TimelineMax( { repeat:-1 } );
    tl.to( progressEase, 1, { value:1, ease:Elastic.easeOut, onUpdate:updateFilter, onUpdateParams: } );
    tl.to( progressEase, 1, { value:0, ease:Elastic.easeIn, onUpdate:updateFilter, onUpdateParams: } );
    tl.to( progressEase, 1, { value:1, ease:Elastic.easeOut, onUpdate:updateFilter, onUpdateParams: } );
    tl.to( progressEase, 1, { value:0, ease:Elastic.easeIn, onUpdate:updateFilter, onUpdateParams: } );
    tl.to( progressEase, 1, { value:1, ease:Elastic.easeOut, onUpdate:updateFilter, onUpdateParams:, end: } ] } );
    tl.to( progressEase, 1, { value:0, ease:Elastic.easeIn, onUpdate:updateFilter, onUpdateParams:, end: } ] } );
    tl.to( progressEase, 1, { value:1, ease:Linear.easeNone, onUpdate:updateFilter, onUpdateParams: } );
    tl.to( progressEase, 1, { value:0, ease:Linear.easeNone, onUpdate:updateFilter, onUpdateParams: } );

function updateFilter( tween, obj ) {
    setCSSFilter( , { progress:tween.target.value, filter:obj.filter, start:obj.start, end:obj.end } );
};

The css

/*
   FILTER CONTRAST
*/
.contrast0 { -webkit-filter: contrast(  ); filter: contrast(  ); }
.contrast1 { -webkit-filter: contrast( 50% ); filter: contrast( 50% ); }
.contrast2 { -webkit-filter: contrast( 75% ); filter: contrast( 75% ); }
.contrast3 { -webkit-filter: contrast( 100% ); filter: contrast( 100% ); }
.contrast4 { -webkit-filter: contrast( 150% ); filter: contrast( 150% ); }
.contrast5 { -webkit-filter: contrast( 200% ); filter: contrast( 200% ); }
@media screen and (min-width: 48em) {
 .contrast0-ns { -webkit-filter: contrast(  ); filter: contrast(  ); }
 .contrast1-ns { -webkit-filter: contrast( 50% ); filter: contrast( 50% ); }
 .contrast2-ns { -webkit-filter: contrast( 75% ); filter: contrast( 75% ); }
 .contrast3-ns { -webkit-filter: contrast( 100% ); filter: contrast( 100% ); }
 .contrast4-ns { -webkit-filter: contrast( 150% ); filter: contrast( 150% ); }
 .contrast5-ns { -webkit-filter: contrast( 200% ); filter: contrast( 200% ); }
}
@media screen and (min-width:48em) and (max-width: 64em) {
 .contrast0-m { -webkit-filter: contrast(  ); filter: contrast(  ); }
 .contrast1-m { -webkit-filter: contrast( 50% ); filter: contrast( 50% ); }
 .contrast2-m { -webkit-filter: contrast( 75% ); filter: contrast( 75% ); }
 .contrast3-m { -webkit-filter: contrast( 100% ); filter: contrast( 100% ); }
 .contrast4-m { -webkit-filter: contrast( 150% ); filter: contrast( 150% ); }
 .contrast5-m { -webkit-filter: contrast( 200% ); filter: contrast( 200% ); }
}
@media screen and (min-width: 64em) {
 .contrast0-l { -webkit-filter: contrast(  ); filter: contrast(  ); }
 .contrast1-l { -webkit-filter: contrast( 50% ); filter: contrast( 50% ); }
 .contrast2-l { -webkit-filter: contrast( 75% ); filter: contrast( 75% ); }
 .contrast3-l { -webkit-filter: contrast( 100% ); filter: contrast( 100% ); }
 .contrast4-l { -webkit-filter: contrast( 150% ); filter: contrast( 150% ); }
 .contrast5-l { -webkit-filter: contrast( 200% ); filter: contrast( 200% ); }
}

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

More Examples

Apply a blur effect to the image:

img { 
filter: blur(5px);}

Apply a blurred background image:

img.background {  filter: blur(35px);}

Adjust the brightness of the image:

img { 
filter: brightness(200%);}

Adjust the contrast of the image:

img { 
filter: contrast(200%);}

Apply a drop shadow effect to the image:

img {  filter: drop-shadow(8px 8px 10px
gray);}

Convert the image to grayscale:

img { 
filter: grayscale(50%);}

Apply a hue rotation on the image:

img { 
filter: hue-rotate(90deg);}

Invert the samples in the image:

img { 
filter: invert(100%);}

Set the opacity level for the image:

img { 
filter: opacity(30%);}

Saturate the image:

img { 
filter: saturate(800%);}

Convert the image to sepia:

img { 
filter: sepia(100%);}

Using Multiple Filters

To use multiple filters, separate each filter with a space. Notice that the order is important (i.e. using grayscale()
after sepia() will result in a completely gray image):

img {  filter: contrast(200%) brightness(150%);}

All Filters

A demonstration of all filter functions:

.blur {  filter: blur(4px);}.brightness {
  filter: brightness(0.30);}.contrast {
  filter: contrast(180%);}.grayscale {  filter: grayscale(100%);}.huerotate {  filter: hue-rotate(180deg);}.invert {  filter: invert(100%);}.opacity {  filter: opacity(50%);}.saturate {  filter: saturate(7);}.sepia {
  filter: sepia(100%);}.shadow {
  filter: drop-shadow(8px 8px 10px green);}

Adjusting the Saturation of Images

The function can be used to adjust the saturaion of an image. A value of is completely un-saturated. A value of leaves the image unchanged. Other values are linear multipliers on the effect. Values of amount over 100% are also allowed, providing super-saturated results. If the » parameter is missing, a value of is used.

Example

Try this code

— The output of the above example will look something like this:

Note: The function specifies a filter reference to a specific filter element. For example, . If the filter reference to an element that didn’t exist or the referenced element is not a filter element, then the whole filter chain is ignored. No filter is applied to the element.

Filter Functions

Note: The filters that use percentage values (i.e. 75%), also accept the value as
decimal (i.e. 0.75).

Filter Description Play it
none Default value. Specifies no effects Play it »
blur(px) Applies a blur effect to the image. A larger value will create more blur. If no value is specified, 0 is used. Play it »
brightness(%) Adjusts the brightness of the image. 0% will make the image completely black.100% (1) is default and represents the original image.
Values over 100% will provide brighter results.
Play it »
contrast(%) Adjusts the contrast of the image.0% will make the image completely black.100% (1) is default, and represents the original image.
Values over 100% will provide results with more contrast.
Play it »
drop-shadow(h-shadow v-shadow blur spread color) Applies a drop shadow effect to the image. Possible values:h-shadow — Required. Specifies a pixel value for the horizontal shadow. Negative values place the shadow to the left of the image.v-shadow — Required. Specifies a pixel value for the vertical shadow. Negative values place the shadow above the image.blur — Optional. This is the third value, and must be in pixels. Adds a blur effect to the shadow. A larger value will create more blur (the shadow becomes bigger and lighter). Negative values are not allowed. If no value is specified, 0 is used (the shadow’s edge is sharp).spread — Optional. This is the fourth value, and must be in pixels. Positive values will cause the shadow to expand and grow bigger, and negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element). Note: Chrome, Safari and Opera, and maybe other browsers, do not support this 4th length; it will not render if added.color — Optional. Adds a color to the shadow. If not specified, the color depends on the browser (often black).An example of creating a red shadow, which is 8px big both horizontally and vertically, with a blur effect of 10px:filter: drop-shadow(8px 8px 10px red);Tip: This filter is similar to the
box-shadow property.
Play it »
grayscale(%) Converts the image to grayscale. 0% (0) is default and represents the original image.
100% will make the image completely gray (used for black and white images).Note: Negative values are not allowed.
Play it »
hue-rotate(deg) Applies a hue rotation on the image. The value defines the number of degrees around the color circle the image samples will be adjusted. 0deg is default, and represents the original image.Note: Maximum value is 360deg. Play it »
invert(%) Inverts the samples in the image. 0% (0) is default and represents the original image.
100% will make the image completely inverted.Note: Negative values are not allowed.
Play it »
opacity(%) Sets the opacity level for the image. The opacity-level describes the transparency-level, where:0% is completely transparent.100% (1) is default and represents the original image (no transparency).Note: Negative values are not allowed.Tip: This filter is similar to
the
opacity property.
Play it »
saturate(%) Saturates the image. 0% (0) will make the image completely un-saturated.100% is default and represents the original image.Values over 100% provides super-saturated results. Note: Negative values are not allowed. Play it »
sepia(%) Converts the image to sepia. 0% (0) is default and represents the original image. 100% will make the image completely sepia.Note: Negative values are not allowed. Play it »
url() The url() function takes the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element. Example:filter: url(svg-url#element-id)
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Usage

Just include setcssfilter.js:

script type='text/javascript' src='setcssfilter.js'>script>

Or the minified version:

script type='text/javascript' src='setcssfilter.min.js'>script>

Then set CSS filter with available calls:

setCSSFilter( , { progress:1, filter:"hue-rotate", start:0, end:360 } );

setCSSFilter( , { progress:1, filter:"brightness", start:100, end:200 } );

setCSSFilter( , { progress:1, filter:"drop-shadow", start:, end: } );

setCSSFilter( , { progress:1, filter:"contrast", start:100, end:200 } );

setCSSFilter( , { progress:1, filter:"saturate", start:100, end:500 } );

setCSSFilter( , { progress:1, filter:"sepia", start:0, end:100 } );

setCSSFilter( , { progress:1, filter:"grayscale", start:0, end:100 } );

setCSSFilter( , { progress:1, filter:"invert", start:0, end:100 } );

setCSSFilter( , { progress:1, filter:"blur", start:0, end:4 } );

setCSSFilter( , { progress:1, filter:"opacity", start:100, end:0 } );

That filter applying is cumulative, so you can set multiples filters at the same time. If you want to remove filter, you need to call again changing the ‘start’ and ‘end’ params.

You can call during a updating tween as this TimelineMax example:

var progressEase = { value:0 };

var tl = new TimelineMax( { repeat:-1 } );
    tl.to( progressEase, 1, { value:1, ease:Elastic.easeOut, onUpdate:updateFilter, onUpdateParams: } );
    tl.to( progressEase, 1, { value:0, ease:Elastic.easeIn, onUpdate:updateFilter, onUpdateParams: } );
    tl.to( progressEase, 1, { value:1, ease:Elastic.easeOut, onUpdate:updateFilter, onUpdateParams: } );
    tl.to( progressEase, 1, { value:0, ease:Elastic.easeIn, onUpdate:updateFilter, onUpdateParams: } );
    tl.to( progressEase, 1, { value:1, ease:Elastic.easeOut, onUpdate:updateFilter, onUpdateParams:, end: } ] } );
    tl.to( progressEase, 1, { value:0, ease:Elastic.easeIn, onUpdate:updateFilter, onUpdateParams:, end: } ] } );
    tl.to( progressEase, 1, { value:1, ease:Linear.easeNone, onUpdate:updateFilter, onUpdateParams: } );
    tl.to( progressEase, 1, { value:0, ease:Linear.easeNone, onUpdate:updateFilter, onUpdateParams: } );

function updateFilter( tween, obj ) {
    setCSSFilter( , { progress:tween.target.value, filter:obj.filter, start:obj.start, end:obj.end } );
};

ОНЛАЙН ГЕНЕРАТОР CSS ФИЛЬТРОВ ДЛЯ ИЗОБРАЖЕНИЙ

Для того чтобы упростить представление работы css свойства «filter» вы можете воспользоваться онлайн генератором. В левой и правой колонках представлены все 10 вариаций фильтров, кроме того на верхней панели можно переключить центральный вид на одновременное применение всех фильтров. В общем случае после выбора необходимого вам свойства, в центральной колонке будет отображен блог с изображением, ползунком и поле с кодом. Изменяя значения фильтра с помощью ползунка вы тут же сможете увидеть как будет выглядеть тот или иной фильтр, код также будет реагировать на движение ползунка и его можно скопировать сразу же после достижения нужного результата.

Формат изображения* — формат изображения для которого применяется фильтр.

Параметры вставки фильтра* — выбор как будет загружен фильтр на страницу.

Активировать все фильтры — открывается вид с ползунками для каждого фильтра. Фильтры будут применены одновременно.

Перезагрузка — сброс всех параметров.

* — В будущем будут добавлены варианты для изменения и этих параметров.

Common data about CSS property FILTER

CSS Filter change color gamma image or block on based image filters, sample — sepia, brightness, blur and other. Property Filter was add in CSS specification recently (first description — 25 october 2012). Internet Explorer not supported CSS Filter.

List browser support  property Filter

  • IE not supported — Microsoft Library.
  • Edge — not supported url
  • Chrome version 58 — 49 and Android Browser in Android 4.4 and 4.4.4 required add prefix «-webkit-«.

BLUR

Possible value: lenght (px,rem,vw,vh и т.д.).

Range of values: 0 — ∞; base value: 0 (base value — value wich image original).

Description: Blur this defocusing image. Warning — big params (over 100px) can reduse perfomance. Big params make image may be clode to monotone.

Sample: filter: blur(10px);

BRIGHTNESS

Possible value: float, percent.

Range of values: 0 — ∞, 0%-∞%; base value: 1 or 100%.

Description: Increase and decrease brightness. 0 — image fill black color. 1 or 100% — original color, more 100% increase brighness.

Sample: filter: brightness(0.2);

CONTRAST 

Possible value: float, percent.

Range of values: 0 -∞, 0%-∞%; base value: 1 or 100%.

Description: Increase and decrease contrast.

Sample: filter: contrast(200%);

DROP-SHADOW — Тень

Possible value: lenght and color shadow.

Range of values: first and two params — lenght offset, any number; 0 -∞, for thred params — blur, if «0» this no blur shadow.

Description: Shadow for image get after set next params: 1 offset X, 2 — offset Y, 3 — shadow blur, 4 — color shadow. Color shadow not required params for some browser (for example chrome set default color #1a1a1a). CSS Filter «drop-shadow» similar CSS ‘box-shadow’ property.

Sample: filter: drop-shadow(20px -20px 10px #000);

GRAYSCALE

Possible value:  float, percent.

Range of values: 0 — 1, 0%-100%; base value: 0;

Description: Decrease color image

Sample: filter: grayscale(0.2);

HUE-ROTATE

Possible value: angle (deg, rad)

Range of values: any number; base value: 0 or 360deg.

Description: filter based on offset value to color circle. Example — original blue will be replaced to light green when offset 90 degree and yellow when offset 180deg.

CSS property Hue-rotate — offset 120deg,
result color #007bff will be replaced to #7dfc04

Sample: filter: hue-rotate(180deg);

INVERT

Possible value:  float, percent.

Range of values: 0 — 1, 0%-100%; base value: 0.

Description: Invert color (example — black replaced white), 0 — original image, 1 or 100% full invert. Middle invert  (0.5 или 50%) image fill grey.

Sample: filter: invert(90%);

Opacity 

Possible value:  float, percent.

Range of values: 0 — 1, 0%-100%; base value: 1 or 100%.

Description: Opacity.

Sample: filter: opacity(0.7);

Saturate

Possible value:  float, percent.

Range of values: 0 — ∞, 0%-∞%;  base value: 1 or 100%.

Description: Increase and decrease saturate.

Sample: filter: saturate(0.7);

SEPIA 

Possible value:  float, percent.

Range of values: 0 — 1, 0%-100%;  base value: 0.

Description: Effect of agging in old photo. When value 100% or 1 — in image will be used only reddish-brown color.

Sample: filter: sepia(100%);

Links:

  • Specifications — https://www.w3.org/TR/filter-effects/
  • Descriptions — https://drafts.fxtf.org/filter-effects/
  • Browser supported — 
  • Mozila Web docs — https://developer.mozilla.org/en/docs/Web/CSS/filter
Ссылка на основную публикацию