DEV Community

Cover image for Comment utiliser la propriété filter en css
William Masivi for KADEA ACADEMY

Posted on

Comment utiliser la propriété filter en css

Tout d'abord voici la définition que nous propose MDN:

La propriété CSS filter permet d'appliquer des filtres et d'obtenir des effets graphiques de flou, de saturation, etc. Les filtres sont généralement utilisés pour ajuster le rendu d'une image, d'un arrière-plan ou des bordures.

Développement:
Pour utiliser la propriété CSS filter, on utilisera none ou une ou plusieurs des fonctions listées ci-après avec, pour chacune, un argument. Si la valeur est invalide, la fonction renverra none. Sauf mention contraire, les fonctions qui acceptent des valeurs exprimées en pourcentages (34%) acceptent également des valeurs décimales (0.34).

Lorsqu'une seule propriété filter possède deux fonctions (ou plus), le résultat obtenu sera différent de l'application de deux propriétés filter (ou plus) séparées avec chacune une fonction.

Quelques valeur du filter css:
La propriété de Filtre CSS filter permet de spécifier une/des fonctions de Filtre CSS qui correspondront au divers effets à appliquer sur un élément HTML. Exemple de syntaxe CSS filter : filter : contrast(400%); filter : grayscale(0.5) blur(10px); filter : sepia(20%) opacity(10%) drop-shadow(20px 20px 20px #000);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>points anim</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="contenaire">
        <span class="dot"></span>
        <div class="dots">
            <span></span>
            <span></span>
            <span></span>
        </div>

    </div>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode
.contenaire{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 142px;
    height: 40px;
    background-color:beige;
    filter:contrast(20);
}
.contenaire .dot{
    position: absolute;
    width: 16px;
    height: 16px;
    top: 12px;
    left: 15px;
    filter: blur(4px);
    background: black;
    border-radius: 50%;
    animation: point 2.8s infinite;
}
.contenaire .dots span{
    display: block;
    float: left;
    width: 16px;
    height: 16px;
    margin-left: 16px;
    filter: blur(4px);
    background: black;
    border-radius: 50%;
}
.contenaire .dots{
    margin-top: 12px;
    margin-left: 31px;
    animation: points 2.8s infinite;
}
@keyframes point{
    50%{
        transform: translateX(96px);
    }
}
@keyframes point{
    50%{
        transform: translateX(-31px);
    }
}
Enter fullscreen mode Exit fullscreen mode

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more