CSS Фильтр Генератор

Сыпыршы болу, жарықтылығы және басқа эффектілерді слайдермен реттеп, CSS фильтр кодын көру арқылы құрыңыз

Жаңарту ақпаратыCSS сүзгісі генераторы қосылды, бұлықтау және жарықтығын реттеп өндіруЖаңартулар ақпаратын көру

Ерекшеліктері

9 түрдегі эффектілерді слайдермен

Қозғап ұстағаны сайын көрініс және CSS коды бір мезгілде өзгеріп отырады

Өз суретіңізде сынап көріңіз

Қол жүргіндегі суретті браузерде көрсетіп, эффектінің әсерін тексеріңіз

Ұстап турғанда ғана түпнұсқа сурет

Эффект құрылғанға дейін және кейінгі суреттерді орын жүзінде салыстырыңыз

8 үлгісінен ұсақ түзету

Сепиа, ескі әдіс және т.б. үлгілерінен бастап түзетіңіз

Пайдалану әдісі

Суретті таңдаңыз

"Өз суретімді таңдаңыз" батырмасында қол жүргіндегі суретті көрсетіңіз. Таңдамасаңыз, іш жақта орнатылған үлгі суреттерімен сынап көре аласыз

Эффектіні реттеңіз

Үлгілерден ұқсас көріністі таңдаңыз немесе әр слайдер арқылы эффект күшін реттеңіз

Алдын-ала және кейінінің салыстыруы

"Түпнұсқа сурет пен салыстыру" батырмасын ұстап турғанда эффектсіз суретті көрсетіңіз

Кодты көшіңіз

"Көшіру" батырмасымен фильтр бір жолын өз CSS-іңізге салыңыз

Пайдалану жағдайлары

Фоннан суреттің мәтіннің оқылымдылығы

Фоннан суретті сәл сыпыршы, үстіне басқан тақырыбын оқуға ыңғайлы ету

Суреттің түсті ынамдастыру

Команда беті немесе галереяның суреттерін қара-ақ немесе сепиа түстікке ынамдастыру

Қолда орын алған суреттін сан анықтап ақ

Іс жүзінде пайдаланылатын суретке қолдап, сұра қалуы немесе ескі әдіс түстенің сан анықтаңыз

Қара режім үшін суретті реттеу

Қарай фон арқасында аршын болмау үшін жарықтылығы және контрастты төмендеткен санды анықтаңыз

Негіздемелік білім

Фильтр функциясы және бірліктер

CSS-тің фильтр қасиеті суретке немесе элементіге әсер ету қасиеті болып, blur немесе sepia сияқты функцияларды жарты арбас бөлсектеп жалғап жазады.

px（пиксель）：Blur функциясы сыпыршы радиусын px-те көрсетіді, 4px-ті көрсеткенде радиус 4 пиксель өндіріске түстелер сәлтіленіп кетеді.
% (пайыз)：Brightness немесе sepia функциялары әсер күшін%-та көрсетіді, brightness функциясында 100% түпнұсқа жарықтығы, 120% екі жүз жарықтатылған күйі болып табылады.
deg（градус）：Hue-rotate функциясы түстің айналасында түстенің бұрын градусталмас бұрынын көрсетіді, 180deg-ді көрсеткенде түстер бұшқыларының қарама-қарсы түсіне ауысады.

Неге жазу тәртібі нәтижені өзгертеді

Фильтерге жалғап құрылған функциялар сол жақтан қарай қолданылады, алдыңғы әсер құрылған нәтижеге келесі әсер құрылса, жалғап құрудың тәртібі өзгерткен кезде сыртқы түрінің айырмасы болуы мүмкін. Мысалы, қара-ақ құрып соның ішінде сепиа құрса, қайта түсі қалса, сепиа құрып соның ішінде қара-ақ құрса, қайта түсі жойылады. Бұл құралда қолданудың тәртібі бекітілген болса да, құрылған CSS кодын өндіктеп, тәртібін өзгертуге болады.

Backdrop-фільтер нің айырмасы

Фільтер және backdrop-фільтер сол функцияларды пайдалана алатын қасиет болса, әсер ету мәтінінің мақсаты айырмалы болып табылады.

filter：Фільтер анықталған элемент түпнұсқасының өзі (сурет немесе мәтін сияқты) сыртқы түрінге әсер ету қасиеті болып табылады.
backdrop-filter：Backdrop-фільтер анықталған элемент арқасында көрінетін бөлігіне әсер ету қасиеті болып, балшық сияқты көрінісіне пайдаланылады.