Перейти к содержимому

Glass effect sur Bubble, créer un effet glassmorphism en CSS

Lypa

0:00 / 0:00

Glass effect sur Bubble, créer un effet glassmorphism en CSS

19 просмотров · 11 дней назад
Lypa
23 подписчика
19 просмотров · 11 дней назад
Tu veux donner un rendu moderne et soigné à ton app Bubble ? Le glassmorphism c'est un des styles de design les plus élégants du moment. Et sur Bubble, il suffit de quelques lignes de CSS pour l'obtenir. Dans cette vidéo, je te montre comment appliquer un effet de verre dépoli sur un groupe Bubble. Dans l’exemple on l'applique sur une carte bancaire avec des champs de saisie à l'intérieur. On voit ensemble : → Ce qu'est le glassmorphism → Comment ajouter du CSS custom sur un groupe dans Bubble → Construire la carte bancaire avec ses inputs stylisés → Les bonnes pratiques pour que l'effet fonctionne Je te conseille de tester différentes configurations pour trouver l’intensité de l’effet qui te correspond. Tu peux changer l’image de fond, changer la couleur et l’opacité de ta carte ayant l’effet, modifier les numéros du « Blur » dans le bout de code ci-dessous, … 📋 LE CODE CSS À COPIER-COLLER : ﹤style﹥ #glasseffect{ -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } ﹤/style﹥ ⚠️ remplace les < et ﹥par les chevrons de ton clavier, ils ne sont pas autorisés dans les descriptions Youtube, je les ai donc remplacés par des icons. Le code ne fonctionnera pas avec juste un copier-coller. PS : ne pas rajouter d'espace — 🚀 Tu veux construire ton app de A à Z sur Bubble toi-même tout en étant accompagné.e ? Découvre Lypa → https://lypa.fr Retrouves-moi sur Instagram →   / lypa_bubble   Pour LinkedIn →   / laure-gillet-8b7b9220b   Pour prendre rdv gratuitement avec moi → https://cal.com/laure-lypa/30min Si tu veux structurer ton projet, teste IA One ! Obtiens 5% de remise grâce à mon lien affilié : https://studio-builder.io/?ref=lypa (137,75€ TTC après réduction en paiement unique) Pour voir la vidéo à ce sujet :    • Pourquoi ChatGPT ne suffit pas pour valide...