Créer un flou d'arrière plan en CSS

FullMerinos Matthias Le 28 juin 2020

Le flou d'arrière plan est très utilisé pour détacher efficacement et sobrement un élément de sa page. On retrouve cet effet sur de nombreux sites internet, comme par exemple sur la barre de navigation du site d'Apple ou bien sur celle du site de Pixelmator. Il est efficace sur les éléments qui se trouvent en premier plan de l'interface : on ne le perçoit que si d'autres éléments se trouvent en dessous.

Pour atteindre ce résultat, il faudra apprendre à utiliser la propriété CSS backdrop-filter, qui est un équivalent de la propriété filter à cela près qu'elle ne s'applique qu'au background. Plus précisément, nous utiliserons le filtre blur() de cette propriété, qui correspond à l'effet de flou.

Utilisation

La syntaxe de base du backdrop-filter est la suivante :

.element {
    backdrop-filter: []* | none
}
 

Dans notre cas on utilisera uniquement le filtre blur() mais il est intéressant de noter qu'il en existe bien d'autres
(cf. https://developer.mozilla.org/fr/docs/Web/CSS/filter-function/blur).

Pour ce que l'on cherche à reproduire, le paramètre suivant donne un résultat satisfaisant :

.element {
    -webkit-backdrop-filter: blur(15px); /* assure la compatibilité avec safari */
    backdrop-filter: blur(15px);
}

Le paramètre pris par blur() (ici 15px) va définir notre niveau de flou (qu'on appelle conventionnellement la longueur). Plus sa valeur est grande plus le flou appliqué est intense.

À noter : on peut également combiner plusieurs filtres de la manière suivante :

.element {
    -webkit-backdrop-filter: blur(15px); /* assure la compatibilité avec safari */
    backdrop-filter: blur(15px) grayscale(0.5) opacity(0.8);
}

Pour finaliser notre flou, le coupler à un backround-color nous permettra de le coloriser et de le rendre identifiable sur fond blanc. On obtient ainsi :

.element {
    -webkit-backdrop-filter: blur(15px); /* assure la compatibilité avec safari */
    backdrop-filter: blur(15px);
    background-color: rgba(182, 182, 182, 0.2);
}

Résultat

 

Le filtre est dynamique et fonctionne lorsque le contenu situé en dessous est scrollé.

Support

Comme le montre le site Can I Use, cette propriété est relativement récente et ne bénéficie pas d'un support universel. En revanche elle tend à se généraliser, et dans le cas d'une incompatibilité, elle ne devrait en rien gêner la bonne lisibilité du site.


A propos de l'auteur

FullMerinos
Matthias

Passionné de technologie diplômé d'une Licence en Informatique.

Votre commentaire

Vous devez être connecté pour poster un commentaire. Se connecter ou Créer un compte

Commentaires 6

  • tutherchaar Le 29 février, à 08:50 | Répondre

    Buy Fake and Real passport id cards drivers license  WhatsApp: (((   +16265140391    ))Websit;;;; https://documentscenterofficials.com
    Buy IELTS, IDP TOEFL, GMAT, ESOL, DEGREE, DIPLOMAT
    Buy Registered Passports,Drivers license,IELTS & TOEFL, ESOL Certificates W= ithout Attending The Exam
    BUY PASSPORTS,DRIVERS LICENSES,ID CARDS,BIRTH CERTIFICATES,VISAS,SSN,MARRIA=
    GE CERTIFICATES,DIVORCE PAPERS,UaS GREEN CARD
    BUY PASSPORTS,DRIVERS LICENSES,ID CARDS,BIRTH CERTIFICATES,VISAS,SSN,MARRIA=
    GE CERTIFICATES,DIVORCE PAPERS,US GREEN CARD
    Buy IELTS, IDP TOEFL, GMAT, ESOL, DEGREE, DIPLOMAS
    We deal and specialize in helping you to get registered TOEFL, IELTS, IDP, = ESOL, GMAT CELTA/DELTA, DEGREE, DIPLOMAS & other English Language Certifica= tes. We produce TOEFL & IELTS, ESOL, and CELTA/DELTA, DEGREE, DIPLOMAS Engl= ish Language for you with ease.
    Contact Email ....... alldocumentsvendor@gmail.com  Website::::::https://documentscenterofficials.com
    Whatsapp ......   +16265140391BUY FAKE REAL PASSPORT DRIVING LICENSE ID CARD VISA SSN
    We have years of experience producing original quality real/false passports=
    , ID's, drivers licenses and many other identity documents, really cheap fo=
    r countries such as ; Switzerland, United Kingdom, United States, Spain, Sw= eden, Australia, Austria, Canada, Chile, Denmark, Ecuador, Finland, France,=
    Germany, Israel, New Zealand, South Africa, e.t.c.
    Passports with chip for the following countries are also available for : Au= stralia, Austria, Finland, Germany, Malaysia, Netherlands, Sweden, Switzerl= and, Thailand, United Kingdom, United States, e.t.c.
    We can also produce documents such as work permit, for UK, USA, Italy just =
    to name a few.
    You can contact us directly to get the additional information and place the=
    order through the bellow address..
    Registered and unregistered passport of all countries.visas,biometric passp= ort, degrees,drivers license,I.D cards.Training certificates M GCSE, A-leve= ls, High School Diploma Certificates ,GMAT, MCAT, and LSAT Examination Cert= ificates , Novelty Birth, Marriage, and Death Certificates , Novelty Passpo= rts and New Identity Packages , Replicated, False Degrees/Diplomas from mos=
    a, Swiss, card, ids, document, getting,visas, cards, foreign.
    Contact Email ....... alldocumentsvendor@gmail.com   Whatsapp ......   +16265140391
    Website :::::::https://documentscenterofficials.com
    Purchase High Quality Original and Fake Passports, Driver's License and Ids=
    of Australia
    Purchase High Quality Original and Fake Passports, Driver's License and Ids=
    of Austria

    Purchase High Quality Original and Fake Passports, Driver's License and Ids=
    of Iceland
    Purchase High Quality Original and Fake Passports, Driver's License and Ids=
    of Greenland
    Purchase High Quality Original and Fake Passports, Driver's License and Ids=
    of South Africa
    Purchase High Quality Original and Fake Passports, Driver's License and Ids=
    of Jamica
    Purchase High Quality Original and Fake Passports, Driver's License and Ids=
    of Netherlands

    Purchase High Quality Original and Fake Passports, Driver's License and Ids=
    of Slovakia
    Purchase High Quality Original and Fake Passports, Driver's License and Ids=
    of Slovenia
    Purchase High Quality Original and Fake Passports, Driver's License and Ids=
    of Serbia & Montenegro
    Purchase High Quality Original and Fake Passports, Driver's License and Ids=
    of Poland
    Purchase High Quality Original and Fake Passports, Driver's License and Ids=
    of Japan
    Purchase High Quality Original and Fake Passports, Driver's License and Ids=
    of Argentina
    Buy Quality Real And Fake Passports,Driver=C3=A2=E2=82=AC=E2=84=A2s License= ,ID Cards,Fake ID's for Over
    Changes in NAME, DOB, LICENSE #, RESTRICTIONS, etc.all our documents are us=
    ed at any border pass ,airport,applications with no problems we produce
    the following documents and the list is not full place your order for detai= ls.
    Buy real and fake Passport ,Visa,Driving License,ID CARDS,marriage certific= ates,diplomas etc
    Buy Original,Passport,id cards,Visa,Drivers License,Toefl,Ielts,Toeic,Celta= /Delt
    BUY fake British passports (UK), Americans, Canadians
    False identity CARDS ONLINE IN UNITED STATES, DRIVING LICENSE
    Buy fake birth certificates
    BUY FAKE DRIVING LICENSE
    Buy Real EU/USA/UK/Canadian Passports,Driver=C3=A2=E2=82=AC=E2=84=A2s Licen= se,ID Cards,Visas, USA Green Card and Citizenship.
    buy original / fake passports, Drivers license, ID cards, birth certificate=
    s, diplomas, university degrees etc
    BUY HIGH QUALITY FAKE OR REAL PASSPORT,ID CARDS,DRIVING LICENSE, MARRIED,re=
    al or fake passport,visa ,France driver license, id cards,diplomas,birth ce= rtificates ETC
    Buy Visa, passport, id card, birth certificate, Driving License Transcripts
    Douala : Buy Original FAKE Passports ,Id Card Drivers License demosmiller
    Best Quality Novelty real and Fake IDs and Passports,Marriage certificates = and Drivers license etc buy now high quality-We have the best HOLOGRAMS AND=
    DUPLICATING MACHINES With over 13million of out documents circulating over=
    the world.-IDs Scan-yes...-HOLOGRAMS: IDENTICAL-BAR CODES: IDS SCAN-UV: YE= SIDS WITH FAST SHIPPING
    We absolutely guarantee 24 hour passport,citizenship,Id cards,driver=C3=A2= =E2=82=AC=E2=84=A2s license,diplomas,degrees,certificates service available=
    .. Tourist and business visa services available to residents of all 50 state=
    s and all nationalities Worldwide. are unique producers of Authentic High Q= uality passports, Real Genuine Data Base Registered and unregistered Passpo= rts and other Citizenship documents.I can guarantee you a new Identity star= ting from a clean new genuine Birth Certificate, ID card, Drivers License,P= assports, Social security card with SSN, credit files, and credit cards, sc= hool diplomas, school degrees all in an entirely new name issued and regist= ered in the government database system..
    quality false and Real documents.We offer only original high-quality Regis= tered and unregistered passports, driver=C3=A2=E2=82=AC=E2=84=A2s licenses,=
    ID cards, stamps, Visa, school Diplomas and other products for a number of=
    countries like:USA, Australia, Belgium,Brazil, Canada, Italian,Finland, Fr= ance, Germany, Israel, Mexico, Netherlands, South Africa,Spain, United King= dom and worldwide.
    Contact Email .......  alldocumentsvendor@gmail.com
    Whatsapp ......   +16265140391
    Websit::::https://documentscenterofficials.com
     

  • Bakaryboss Le 9 janvier, à 20:51 | Répondre

    merci bcp

  • j9meskot Le 26 juillet, à 08:59 | Répondre

    cool j'ai bien aime

  • adam-el-kaoun Le 9 juillet, à 18:12 | Répondre

    Hey

  • adamelkn Le 9 juillet, à 18:10 | Répondre

    hey

  • idriss-pro Le 5 juillet, à 19:31 | Répondre

    três bons tuto je t'admire !!!!!!!!!!