HTML/CSS

Фильтры Instagram на CSS

Сборник CSS стилей с эффектом фильтров Инстаграма.

1

Clarendon

Делает цвета осветленными и более интенсивными.

<figure class="clarendon">
    <img src="/files/img.jpg">
</figure>

<style>
.clarendon {
    position: relative;
    filter: contrast(120%) saturate(125%);
}
.clarendon::before {
    content: "";  
    display: block;  
    width: 100%; 
    height: 100%;  
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(127, 187, 227, 0.2);
    pointer-events: none;
    mix-blend-mode: overlay;    
}
</style>
2

Gingham

Добавляет размытие и желтоватый тон.

<figure id="retrace" class="gingham">
    <img src="/files/img.jpg">
</figure>

<style>
.gingham {
    position: relative;
    -webkit-filter: brightness(105%) hue-rotate(350deg);
    filter: brightness(105%) hue-rotate(350deg);
}
.gingham::before {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;    
    top: 0;
    left: 0;
    pointer-events: none;
    mix-blend-mode: darken;
    background: -webkit-linear-gradient(to right, rgba(66, 10, 14, 0.2) 1, rgba(0, 0, 0, 0));
    background: linear-gradient(to right, rgba(66, 10, 14, 0.2) 1, rgba(0, 0, 0, 0));
}
</style>
3

Reyes

Винтажный фильтр, осветляет фото и уменьшает насыщенность цветов.

<figure class="reyes">
    <img src="/files/img.jpg">
</figure>

<style>
.reyes {
    position: relative;
    filter: contrast(85%) brightness(110%) saturate(75%) sepia(22%);
    -webkit-filter: contrast(85%) brightness(110%) saturate(75%) sepia(22%);    
}
.reyes::before {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;    
    top: 0;
    left: 0;
    opacity: 0.5;
    background: rgba(173, 205, 239, 1);
    pointer-events: none;
    mix-blend-mode: soft-light;    
}
</style>
4

Aden

Добавляет эффект дымки и приглушает цвета.

<figure class="aden">
    <img src="/files/img.jpg">
</figure>

<style>
.aden {
    position: relative;
    filter: contrast(90%) brightness(120%) saturate(85%) hue-rotate(20deg);    
    -webkit-filter: contrast(90%) brightness(120%) saturate(85%) hue-rotate(20deg);
}
.aden::before {
    content: "";
    display: block;
    width: 100%;    
    height: 100%;
    position: absolute;    
    top: 0;
    left: 0;
    background: -webkit-linear-gradient(to right, rgba(66, 10, 14, 0.2) 1, rgba(66, 10, 14, 0));
    background: linear-gradient(to right, rgba(66, 10, 14, 0.2) 1, rgba(66, 10, 14, 0));
    pointer-events: none;
    mix-blend-mode: darken;    
}
</style>
5

Perpetua

Добавляет к фото яркости и зеленого свечения, уменьшает тени.

 

<figure class="perpetua">
    <img src="/files/img.jpg">
</figure>

<style>
.perpetua {
    position: relative;
}
.perpetua::before {
    content: "";
    display: block;
    width: 100%;    
    height: 100%;
    position: absolute;    
    top: 0;
    left: 0;
    opacity: 0.5;
    background: -webkit-linear-gradient(to bottom, rgba(0, 91, 154, 1) 1, rgba(61, 193, 230, 0));
    background: linear-gradient(to bottom, rgba(0, 91, 154, 1), rgba(61, 193, 230, 0));
    pointer-events: none;
    mix-blend-mode: soft-light;    
}
</style>
6

Amaro

Осветляет центр фото.

<figure class="amaro">
    <img src="/files/img.jpg">
</figure>

<style>
.amaro {
    position: relative;
    filter: contrast(90%) brightness(110%) saturate(150%) hue-rotate(-10deg);    
    -webkit-filter: contrast(90%) brightness(110%) saturate(150%) hue-rotate(-10deg);
}
</style>
7

Hudson

Смещает оттенки в синюю часть спектра и ослабляет центр фотографии.

<figure class="hudson">
    <img src="/files/img.jpg">
</figure>

<style>
.hudson {
    position: relative;
    filter: contrast(90%) brightness(120%) saturate(110%);    
    -webkit-filter: contrast(90%) brightness(120%) saturate(110%);
}
.hudson::before {
    content: "";
    display: block;
    width: 100%;    
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.5;
    background: -webkit-radial-gradient(50% 50%, circle closest-corner, rgba(255, 177, 166, 1) 50, rgba(52, 33, 52, 1));
    background: radial-gradient(50% 50%, circle closest-corner, rgba(255, 177, 166, 1) 50, rgba(52, 33, 52, 1));
    pointer-events: none;
    mix-blend-mode: multiply;    
}
</style>
8

Valencia

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

<figure class="valencia">
    <img src="/files/img.jpg">
</figure>

<style>
.valencia {
    position: relative;
    filter: contrast(108%) brightness(108%) sepia(8%);    
    -webkit-filter: contrast(108%) brightness(108%) sepia(8%);
}
.valencia::before {
    content: "";
    display: block;
    width: 100%;    
    height: 100%;
    position: absolute;    
    top: 0;
    left: 0;
    opacity: 0.5;
    background: rgba(58, 3, 57, 1);
    pointer-events: none;
    mix-blend-mode: exclusion;    
}
</style>
9

X-Pro ll

Добавляет яркость и придает теплые тона.

<figure class="x-pro-2">
    <img src="/files/img.jpg">
</figure>

<style>
.x-pro-2 {
    position: relative;
    filter: sepia(30%);    
    -webkit-filter: sepia(30%);
}
.x-pro-2::before {
    content: "";
    display: block;
    width: 100%;    
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: -webkit-radial-gradient(50% 50%, circle closest-corner, rgba(224, 231, 230, 1) 40, rgba(43, 42, 161, 0.6));
    background: radial-gradient(50% 50%, circle closest-corner, rgba(224, 231, 230, 1) 40, rgba(43, 42, 161, 0.6));
    pointer-events: none;
    mix-blend-mode: color-burn;    
}
</style>
10

Lo-Fi

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

<figure class="lo-fi">
    <img src="/files/img.jpg">
</figure>

<style>
.lo-fi {
    position: relative;
    filter: contrast(150%) saturate(110%);    
    -webkit-filter: contrast(150%) saturate(110%);
}
.lo-fi::before {
    content: "";
    display: block;
    width: 100%;    
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: -webkit-radial-gradient(50% 50%, circle closest-corner, rgba(0, 0, 0, 0) 70, rgba(34, 34, 34, 1));
    background: radial-gradient(50% 50%, circle closest-corner, rgba(0, 0, 0, 0) 70, rgba(34, 34, 34, 1));
    pointer-events: none;
    mix-blend-mode: multiply;    
}
</style>
11

Inkwell

Обесцвечивает фотографию.

<figure class="inkwell">
    <img src="/files/img.jpg">
</figure>

<style>
.inkwell {
    position: relative;
    -webkit-filter: contrast(110%) brightness(110%) sepia(30%) grayscale(100%);
    filter: contrast(110%) brightness(110%) sepia(30%) grayscale(100%);
}
.inkwell::before {
    content: "";
    display: block;
    width: 100%;    
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0);
    pointer-events: none;    
}
</style>
12

Toaster

Делает центр снимка выцветшим, смещая спектр к пурпурным оттенкам отсылающим к фотографиям 1980-х годов.

<figure class="toaster">
    <img src="/files/img.jpg">
</figure>

<style>
.toaster {
    position: relative;
    filter: contrast(150%) brightness(90%);    
    -webkit-filter: contrast(150%) brightness(90%);
}
.toaster::before {
    content: "";
    display: block;
    width: 100%;    
    height: 100%;
    position: absolute;    
    top: 0;
    left: 0;
    opacity: 0.5;
    background: -webkit-radial-gradient(50% 50%, circle closest-corner, rgba(15, 78, 128, 1) 1, rgba(59, 0, 59, 1));
    background: radial-gradient(50% 50%, circle closest-corner, rgba(15, 78, 128, 1) 1, rgba(59, 0, 59, 1));
    pointer-events: none;
    mix-blend-mode: screen;    
}
</style>
13

Walden

Высветляет центр изображения и делает фото более желтым.

<figure class="walden">
    <img src="/files/img.jpg">
</figure>

<style>
.walden {
    position: relative;
    filter: brightness(110%) saturate(160%) sepia(30%) hue-rotate(350deg);    
    -webkit-filter: brightness(110%) saturate(160%) sepia(30%) hue-rotate(350deg);
}
.walden::before {
    content: "";
    display: block;
    width: 100%;    
    height: 100%;
    position: absolute;    
    top: 0;
    left: 0;
    opacity: 0.3;
    background: rgba(204, 68, 0, 1);
    pointer-events: none;
    mix-blend-mode: screen;    
}
</style>
14

1977

Подчеркивает красные оттенки, делая при этом картинку выцветшей. Примерно так выглядели фото в конце 1970-х.

<figure class="f-1977">
    <img src="/files/img.jpg">
</figure>

<style>
.f-1977 {
    position: relative;
    filter: contrast(110%) brightness(110%) saturate(130%);    
    -webkit-filter: contrast(110%) brightness(110%) saturate(130%);
}
.f-1977::before {
    content: "";
    display: block;
    width: 100%;    
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(243, 106, 188, 0.3);
    pointer-events: none;
    mix-blend-mode: screen;    
}
</style>
15

Stinson

Вымывает цвета и осветляет изображение.

<figure class="stinson">
    <img src="/files/img.jpg">
</figure>

<style>
.stinson {
    position: relative;
    filter: contrast(75%) brightness(115%) saturate(85%);
    -webkit-filter: contrast(75%) brightness(115%) saturate(85%);    
}
.stinson::before {
    content: "";
    display: block;
    width: 100%;    
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(240, 149, 128, 0.2);
    pointer-events: none;
    mix-blend-mode: soft-light;    
}
</style>
16

Maven

Затемняет фото, подчеркивает тени и добавляет желтого оттенка.

<figure class="maven">
    <img src="/files/img.jpg">
</figure>

<style>
.maven {
    position: relative;
    filter: contrast(95%) brightness(95%) saturate(150%) sepia(25%);    
    -webkit-filter: contrast(95%) brightness(95%) saturate(150%) sepia(25%);
}
.maven::before {
    content: "";
    display: block;
    width: 100%;    
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(3, 230, 26, 0.2);
    pointer-events: none;
    mix-blend-mode: hue;    
}
</style>
17

Brooklyn

Подчеркивает зеленые оттенки.

<figure class="brooklyn">
    <img src="/files/img.jpg">
</figure>

<style>
.brooklyn {
    position: relative;
    filter: contrast(90%) brightness(110%);    
    -webkit-filter: contrast(90%) brightness(110%);
}
.brooklyn::before {
    content: "";
    display: block;
    width: 100%;    
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: -webkit-radial-gradient(50% 50%, circle closest-corner, rgba(168, 223, 193, 0.4) 1, rgba(183, 196, 200, 0.2));
    background: radial-gradient(50% 50%, circle closest-corner, rgba(168, 223, 193, 0.4) 1, rgba(183, 196, 200, 0.2));
    pointer-events: none;
    mix-blend-mode: overlay;    
}
</style>
08 апреля 2018
Такой эффект можно легко сделать через CSS свойство transition например для кнопок, меню и т.д.
Цвет карты можно изменить начиная с версии 2.0 с помощью CCS фильтров, применив их к элементу .ymaps-layers-pane
Оригинальный размер капчи составляет 304x78px и чаще всего она не помещается в габариты форм сайта. Исправить это можно...
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.