Réflexions, lueurs et flous CSS entre navigateurs

Les réflexions peuvent ajouter une dimension intéressante aux objets, leur donnant une touche de réalisme et leur donnant un contexte dans leur environnement. Examinons maintenant comment réaliser des réflexions avec CSS et examinons également le flou lumineux et le flou sur tous les navigateurs..

Hypothèses

Suivre ce tutoriel fonctionne sur plusieurs hypothèses:

Vous connaissez votre code HTML.
Vous connaissez les sélecteurs CSS et CSS2.
Si vous voulez recréer exactement l'exemple, vous devez savoir comment boîte ombre travaux. Ce n'est pas la clé de ce tutoriel, vous devrez donc le comprendre vous-même. Si vous avez besoin d'explications, je vous suggère de regarder CSS3 par rapport à Photoshop: coins arrondis et ombres de boîte.

Box-reflect vs 'My Method'

Box-reflect est une propriété CSS qui sert précisément à cela: faire des réflexions. Nous n'utiliserons pas boîte-réflexion et masque-image, parce que:

Au moment de la rédaction, les deux propriétés ne sont prises en charge que par Webkit (Chrome et Safari)..
L'implémentation est pour le moins buggée.

Lorsque Microsoft a introduit ses effets de filtres (pensez à l'ère IE 4, aux tableaux imbriqués pour la présentation et aux images pour les réflexions), les filtres répugnants ne s'appliquaient pas à l'ensemble d'un élément donné. J'imagine qu'ils ont utilisé une sorte de boîte de délimitation du coin supérieur gauche au coin inférieur droit de l'élément, ce qui était logique, car à ma connaissance, il n'y avait pas moyen de dépasser cette boîte. Cependant, ils ne l'ont jamais corrigé.

À l’époque de la version Chrome 17, Webkit a commis la même erreur. Masquer les images, la clé pour -webkit-box-reflect, créer une sorte d’instantané dynamique dans la zone de délimitation, le coller en dessous et changer son opacité. J'ai essayé de recréer la démo en utilisant -webkit-box-reflect:

Je ne l'ai pas fini, mais le problème est clair. L’ETBR a rayon de la frontière et boîte ombre. La boîte-ombre est visible à l'intérieur, mais pas à l'extérieur de la zone de délimitation.

Dans ma méthode, les transformations de matrice, l’ombre et l’opacité dans l’encadré remplaceront l’image par réflexion et l’image par masque. Les limitations:

La plus grande limitation est que l'ombre de la boîte insérée ne rend pas le reflet totalement transparent. C'est une combinaison de transparence fausse et réelle qui fonctionnera la plupart du temps, mais pas toujours.
Le texte dans l'ETBR n'est pas affecté par l'ombre de la boîte insérée. Cela se produit si la couleur du texte n'est pas la même que la couleur de fond de la surface.

Violon | Plein écran

La couleur du texte ne devient pas plus sombre que l'arrière-plan. Il semble donc que vous ne pouvez pas avoir une couleur différente et la boîte-ombre ensemble.

Les choix…

Alors que nous sommes sur le sujet des matrices et des réflexions…

Vous prenez la pilule bleue - je vous montre comment recréer la démo mot à mot. Vous prenez la pilule rouge - je vais vous montrer comment réfléchir à n'importe quoi et je vous dirai où vous pouvez acheter ces lunettes réfléchissantes à un prix très intéressant..

Mettre tout simplement; Certaines des étapes suivantes sont facultatives, selon que vous souhaitiez recréer le pixel de démonstration pour pixel.

Facultatif: préparations

La démo commence avec un modèle HTML5…

index.html

      Réflexions CSS3

… Et ce fichier CSS.

style.css

 html hauteur: 100%;  body text-align: center; hauteur de ligne: 1; marge: 0; rembourrage: 0; hauteur: 100%;  p line-height: 1.2;

Et bien sûr, nous allons ajouter un lien vers la feuille de style:

    Réflexions CSS!

2D mais 3D

La démo est en 2D. Pas un seul élément 3D. Nous le savons, mais notre objectif est de faire leur pensons que nous avons construit cela et ensuite photographié la vue de face.

Si nous voulons qu’ils croient que c’est de la 3D, nous devons déterminer comment les objets sont positionnés et pivotés dans l’espace 3D. La démo a un horizon. Le top 10% correspond au ciel noir, les 90% restants étant un faux avion 3D. L'élément à refléter (dorénavant désigné dans notre démo comme ETBR) et le plan sont perpendiculaires entre eux (l'angle est de 90 °), la réflexion doit être parallèle à l'ETBR.

Étape 1: facultatif L'avion et l'ETBR

Le HTML:

   réflexion

L'ETBR est un enfant de l'avion. De cette façon, il reste dans la même position vue de l'avion et la lueur reste dans l'avion.

 body text-align: center; hauteur de ligne: 1; marge: 0; rembourrage: 0; couleur de fond: # 000; hauteur: 100%;  p line-height: 1.2;  #plane left: 0; Top 10%; largeur: 100%; en bas: 0; largeur minimale: 1080px; hauteur minimale: 600px; position: absolue; débordement caché; débordement-x: visible;

Remarque:

Le plan a une largeur min et une hauteur min, de sorte que l'ETBR est toujours visible.
Le débordement-y est défini sur hidden, de sorte que la lueur de l'ETBR reste dans le plan. (Le ciel doit être noir comme le noir.)
L'avion n'a pas de couleur de fond, mais tire sa couleur de la lueur, ce qui n'a pas de sens à tous les niveaux, mais qui a l'air le meilleur.

Étape 2: le balisage de réflexion

Localisez l'objet (ETBR), copiez-le, collez-le en lui-même et renommez-le en refl (ection):

 réflexionréflexion

Maintenant, dans le fichier css, créez le sélecteur de l'objet. Ajoutez #refl au sélecteur pour que nos styles soient appliqués aux deux éléments:

 #ETBR, #refl

Fondamentalement, les CSS et HTML de la réflexion doivent être identiques à ceux des CSS et HTML de l'ETBR. Nous allons positionner, refléter et adorer le reflet de l'étape 5. Mais pour le moment, nous allons masquer le reflet..

 #ETBR, #refl  #refl display: none;

Internet Explorer étant Internet Explorer, nous devons ajouter du code HTML conditionnel:

      Réflexions CSS3              réflexionréflexion

Vous pourriez vous demander pourquoi, juste nu avec moi. Parce que vous êtes hospitalisé, ce premier Fiddle sera complètement noir. Voulez-vous voir l'influence de l'avion? Le redimensionner.

Violon | Plein écran

Étape 3: Style de base optionnel

Cela ne nécessite aucune explication:

 #ETBR, #refl color: # 004; font-family: Impact, 'Arial Black', Helvetica, Arial, sans serif; text-transform: majuscule; taille de police: 200px; couleur de fond: #FFE; poids de police: gras; rembourrage: 30px; affichage: inline-block;  #refl display: none;

OK, une petite explication. La combinaison de text-align: center; et affichage: inline-block; centre un élément vieille école, mais ce n'est pas le Saint Graal; Les éléments en ligne ne peuvent pas contenir d’éléments de bloc. Je l'ai utilisé, car je ne voulais pas ajouter des milliers de conteneurs flottants pour cet exemple. En règle générale, c’est la voie à suivre.

Violon | Plein écran

Étape 4: Coins arrondis et lueur facultatifs

La lueur se compose de trois ombres: une grande ombre étendue (qui ressemble plus au reflet de la lumière sur le plan), la vraie lueur (une ombre blanche avec une plage de flou plus courte) et une ombre incrustée noire (qui rend le ETBR regarde comme il brille). Comme je l'ai déjà mentionné, je ne vais pas expliquer le fonctionnement de Box-Shadow, et Bord-Rayon parle de lui-même.

 #ETBR, #refl color: # 004; font-family: Impact, 'Arial Black', Helvetica, Arial, sans serif; text-transform: majuscule; taille de police: 200px; couleur de fond: #FFE; poids de police: gras; rembourrage: 30px; affichage: inline-block; box-shadow: rgba (255,255,240, .2) 0 0 200px 100px, rgba (255,255,240, .3) 0 0 40px, encart rgba (0,0,0, .8) 0 0 20px; border-radius: 30px;

Violon | Plein écran

Étape 5: Positionnement de la réflexion

Videz le sélecteur #refl pour rendre le reflet visible. Les réflexions n'étant pas "réelles", notre réflexion ne fera pas partie du flux de documents. il devrait flotter. Le choix évident consiste à définir la position sur absolue, ce qui signifie que l'élément est positionné par rapport à son premier élément ancêtre (non statique) positionné. Parce qu’il n’ya pas d’ancêtre au premier emplacement de la réflexion, celle-ci sera positionnée par rapport à la balise body..

Il est beaucoup plus facile de positionner la réflexion par rapport au texte réel, qui est également un ancêtre de la réflexion (coïncidence?). Pour ce faire, nous devons d’abord "positionner" l’ETBR:

 #ETBR, #refl color: # 004; font-family: Impact, 'Arial Black', Helvetica, Arial, sans serif; text-transform: majuscule; taille de police: 200px; couleur de fond: #FFE; poids de police: gras; rembourrage: 30px; affichage: inline-block; box-shadow: rgba (255,255,240, .2) 0 0 200px 100px, rgba (255,255,240, .3) 0 0 40px, encart rgba (0,0,0, 0,8) 0 0 20px; border-radius: 30px; position: relative;

Cela ne change pas réellement la position, mais elle est positionnée. À présent:

 #refl position: absolute; Top 100%; gauche: 0;

Le sommet de la réflexion est relatif à la hauteur et à la position de l'ETBR. 0% leur donneront le même sommet, 200% laisseront un écart aussi grand que la hauteur de l'ETBR et 100% placera le haut de la réflexion au bas de l'ETBR. Gauche est identique, mais prend le pourcentage de la largeur.

Violon | Plein écran

Étape 6: Mise en miroir, flou et transparence modernes

Presque tous les navigateurs couramment utilisés possèdent ces fonctionnalités, d'IE6 à Google Chrome. La mise en œuvre est différente cependant. Les navigateurs modernes sont très simples, pour chaque caractéristique une propriété: transformation, flou et opacité. Nous allons aussi utiliser box-shadow, mais en miroir d'abord.

En miroir

 #refl position: absolute; Top 100%; gauche: 0; -moz-transform: scaleY (-1); -webkit-transform: scaleY (-1); -ms-transform: scaleY (-1);

Avec transform, nous pouvons modifier un élément pour chaque parallélogramme que vous pouvez imaginer. Beaucoup de parallélogrammes, je sais. Mais nous avons seulement besoin de refléter la réflexion, nous allons donc laisser la plupart des fonctions de transformation inutilisées.

Tout concepteur doit savoir que la mise à l'échelle de -1 sur l'axe des ordonnées est identique à la mise en miroir. La mise à l'échelle sur l'axe des ordonnées multiplie la distance entre le haut (et le bas) et le centre. Si l’échelle est 2 sur l’axe Y, la distance entre le sommet et le centre sera deux fois plus grande. Si vous redimensionnez à -1, la distance sera la même, mais top est l'endroit où se trouvait le bas et le bas était celle du haut. Félicitations, vous savez comment refléter!

Brouiller

Tous les navigateurs modernes supporteront très bientôt les filtres, filtres -webkit-filter ou SVG. FF, Opera et IE10 prennent déjà en charge ce dernier, Safari et Chrome ne font que renforcer la tension avant de la relâcher. L'un des filtres SVG est le bon vieux flou gaussien. C'est lent, mais c'est quelque chose…

Créez un fichier "filter.svg" dans le même dossier que style.css. Son contenu:

Formalités, sauf pour les règles 6 à 8. Le filtre appelé "flou" (vous pouvez l'appeler n'importe quoi) rend flous 2 pixels horizontalement et 3 pixels verticalement. Retour à la feuille de style!

 #refl position: absolute; Top 100%; gauche: 0; -moz-transform: scaleY (-1); -webkit-transform: scaleY (-1); -ms-transform: scaleY (-1); filtre: url (filter.svg # blur); / * FF, IE10 & Opera * / -webkit-filter: flou (2 pixels);

filter.svg # flou signifie l'élément 'flou' dans filter.svg. Si l'ID du filtre était "quelque chose", l'URL serait filter.svg # rien. Le rayon de flou est défini dans le fichier SVG. Les navigateurs Webkit mettent tout cela en une seule règle.

Transparence

La transparence existe depuis beaucoup plus longtemps, il suffit donc de spécifier une propriété:

 #refl position: absolute; Top 100%; gauche: 0; -moz-transform: scaleY (-1); -webkit-transform: scaleY (-1); -ms-transform: scaleY (-1); filtre: url (filter.svg # blur); / * FF, IE10 & Opera * / -webkit-filter: flou (2 pixels); opacité: 0,25;

Je ne peux pas mettre le fichier SVG dans le violon. (Je dois donner l'exemple, donc je ne peux pas mélanger la sémantique et la présentation. Cela compliquerait les choses de toute façon…) Mais je ne suis pas en train de brouiller SVG…

Violon | Plein écran

Ce n'est pas complet. Lorsque Apple a créé la réflexion le troisième jour, elle était censée être moins réfléchissante. La réflexion devrait être moins nette plus loin de la surface. Laisse les ténèbres!

Cela ne fonctionne que si la surface a une couleur unie et si la couleur de la police est similaire à cette couleur: nous l'assombrirons en ajoutant une autre zone d'ombre. Cette boîte-ombre remplace l'ancien dans le #ETBR, #refl sélecteur. Nous allons remédier à cela en redéclarant l'ombre incrustée de l'ancien sélecteur. La deuxième ombre est la nouvelle ombre. Rappelez-vous chaque ombre que nous ajoutons au reflet est reflétée.

 #refl position: absolute; Top 100%; gauche: 0; -moz-transform: scaleY (-1); -webkit-transform: scaleY (-1); -ms-transform: scaleY (-1); filtre: url (filter.svg # blur); / * FF, Opera + IE10 * / -webkit-filter: flou (2 pixels); / * webkit * / opacité: 0,25; box-shadow: encart rgba (0,0,0, .8) 0 0 20px, encart # 000 0 50px 100px; / * la première ombre est ancienne * /

Le décalageY de la deuxième ombre est de 50 pixels, mais l'élément est toujours reflété après l'ombre est appliquée. L'ombre ne descend pas, elle monte.

Regarde ça:

Violon | Plein écran

Génial! Maintenant, jetez-y un coup d'oeil avec IE8 (ou croyez-moi sur parole): il s'agit essentiellement de deux copies de l'ETBR superposées, qui ne sont ni en miroir, ni en transparence, ni flou..

Étape 7: Filtrage sale

Nous avons ajouté des commentaires conditionnels lorsque nous avons commencé; trois groupes.

Les navigateurs modernes et IE10, qui ne supportent pas les anciens filtres IE (IE10 a abandonné le support), mais supportent les nouveaux.
IE8 et les versions antérieures, les oldIEs, supportent les filtres immondes et ne supportent pas les nouveaux.
IE9, qui supporte un peu des deux.

Si IE9 ne supportait pas les nouveaux éléments, ce serait beaucoup plus facile. (Ne vous méprenez pas, je suis heureux qu'Internet Explorer essaie de changer. Mais ce serait plus facile…) Et pour compliquer les choses, il existe des différences entre les filtres sales dans IE9 et IE8. Assez des plaintes, faisons quelque chose à ce sujet. Ajoutez pour chaque groupe un sélecteur #refl et déplacez la propriété opacity sur moderne.

 #refl position: absolute; Top 100%; gauche: 0; -moz-transform: scaleY (-1); -webkit-transform: scaleY (-1); -ms-transform: scaleY (-1); filtre: url (filter.svg # blur); / * FF, Opera + IE10 * / -webkit-filter: flou (2 pixels); / * webkit * / box-shadow: encart rgba (0,0,0, .8) 0 0 20px, encart # 000 0 50px 100px;  .modern #refl opacity: .25;  .ie9 #refl  .oldie #refl

Les filtres sales n'aiment pas l'opacité de CSS2. Et en parlant de filtres immondes, nous allons utiliser ceux-ci:

DXImageTransform.Microsoft.BasicImage nous permet de refléter l'image et de changer son opacité
DXImageTransform.Microsoft.MotionBlur et DXImageTransform.Microsoft.MotionBlur est génial.
DXImageTransform.Microsoft.Gradient en remplacement de la deuxième boîte-ombre.

En miroir

Le premier filtre, BasicImage, a en fait la propriété "mirror"! OUI! Malheureusement, la définition de cette propriété sur 1 reflète le contenu horizontalement et non verticalement. Mais cela ne signifie pas que c'est inutile pour nous. Faire pivoter un élément de 180 ° et le refléter horizontalement équivaut à le refléter verticalement. Et c'est possible:

 .oldie #refl filter: progid: DXImageTransform.Microsoft.BasicImage (miroir = 1, rotation = 2);

Cette rotation ne se mesure pas en degrés: 0 à 0 °, 1 à 90 °, 2 à 180 ° et 3 à 270 °. Seuls les vieux ont besoin de ça. IE9 prend en charge -ms-transform.

Opacité

Nous pouvons spécifier l'opacité dans le même filtre…

 .ie9 #refl -ms-filter: "progid: DXImageTransform.Microsoft.BasicImage (opacity = .25);"  .oldie #refl filter: progid: DXImageTransform.Microsoft.BasicImage (miroir = 1, rotation = 2, opacité = .35);

IE9 (et IE8, mais Internet Explorer reçoit déjà suffisamment d'attention) prend en charge -ms-filter. La valeur est une grosse chaîne. Cela crée une compréhension des autres navigateurs (Firefox va chez un psychiatre tous les vendredis à cause d'Internet Explorer).

Brouiller

… Mais nous avons besoin d'un nouveau filtre pour le flou. Plusieurs filtres, si nous voulons le faire bien paraître. Pas de virgule, pas filtre:s entre les filtres, juste un espace ou une nouvelle ligne. -ms-filter n'obtient plus de nouvelles lignes…

 .ie9 #refl -ms-filter: "ID de progression: DXImageTransform.Microsoft.BasicImage (opacité = .25) ID de progression: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow =" false ") progid: DXImageTransform.Microsoft.Microsoft.Mloss (force = 15, direction = 0) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = "false"); "  .oldie #refl filter: Progid: DXImageTransform.Microsoft.BasicImage (miroir = 1, rotation = 2, opacité = .35) Progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = "false") progid : DXImageTransform.Microsoft.MotionBlur (force = 15, direction = 0) Progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = "false");

Si nous le rendons flou une fois avec un rayon de 6 pixels, il semblerait que quelqu'un ait pris 4 copies du reflet et déplacé un de 6 pixels au-dessus, un de 6 pixels en dessous, un de 6 pixels à gauche et un de 6 pixels à droite. Si vous voulez vous montrer au pub, vous devez connaître le nom: Box Blur. L'ajout d'itérations (rendre flou le flou) fait en sorte que le flou de la boîte apparaisse comme un flou normal. La deuxième itération est le flou de mouvement, car il a l'air bien.

Violon | Plein écran

Cette fois, pas une, mais deux choses ne vont pas:

Le flou a déplacé le reflet de quelques pixels vers le haut et vers la droite dans IE9, mais dans IE8, il a déplacé le reflet vers le bas. Pourquoi? C'est un mystère.
Dans IE7 & IE8, la réflexion est également transparente partout.

Deuxième problème: parce que les anciens ne supportent pas Box-Shadow, nous utiliserons un dégradé d'alpha comme substitut. Ce sont, à ma connaissance, les premières valeurs de type RGBA en CSS, mais si les spécifications du w3c ne disaient rien sur les valeurs de rgba à cette époque, Internet Explorer n'écoutait pas. Ils ont utilisé 8 positions hexadécimales au lieu de 6. Les deux premières représentent l'alpha; les dégradés sales prennent ARGB au lieu de RGBA, ce qui, je dois l'avouer, sonne beaucoup mieux:

 .ie9 #refl -ms-filter: "ID de progression: DXImageTransform.Microsoft.BasicImage (opacité = .25) ID de progression: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow =" false ") progid: DXImageTransform.Microsoft.Microsoft.Mloss (force = 15, direction = 0) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = "false"); "  .oldie #refl filter: progid: DXImageTransform.Microsoft.Gradient (startColorstr = # 99000000, endColorstr = # 00000000) progid: DXImageTransform.Microsoft.BasicImage (miroir = 1, rotation = 2, opacité = .35) progid: DXImageTransform .Microsoft.Blur (PixelRadius = '3', MakeShadow = "false") progid: DXImageTransform.Microsoft.MotionBlur (force = 15, direction = 0) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow faux");

Le dégradé doit aussi être flou, alors c'est le premier. Filthy Filter Gradients sont par défaut verticaux. startColorstr est la couleur du dégradé en haut et startColorstr la couleur en bas, mais ça se reflète! # 99000000 est identique à rgba (0, 0, 0, 153). Rappelez-vous: plus l’opacité du dégradé est élevée, plus l’opacité du reflet semble faible..

Le positionnement est juste une affaire d'essais et d'erreurs. Comme la position de la réflexion est déjà définie en pourcentage, nous ne pouvons pas l'ajuster dans les pixels à l'aide des propriétés left et top. Au lieu de cela, nous utiliserons la marge:

 .ie9 #refl margin-top: 20px; marge gauche: -10px; -ms-filter: "progid: DXImageTransform.Microsoft.BasicImage (opacity = .25) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow =" false ") progid: DXImageTransform.Microsoft.MotionBlur (force 15). , direction = 0) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = "false"); "  .oldie #refl margin-top: -20px; marge gauche: -7px; filter: progid: DXImageTransform.Microsoft.Gradient (startColorstr = # 99000000, endColorstr = # 00000000) progid: DXImageTransform.Microsoft.BasicImage (miroir = 1, rotation = 2, opacité = .35) progid: DXImageTransform.Microsoft.Blur = '3', MakeShadow = "false") progid: DXImageTransform.Microsoft.MotionBlur (force = 15, direction = 0) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = "false");

Violon | Plein écran

Étape 8: Touches finales

Nous allons changer deux petites choses avant de passer votre temps à quelque chose de mieux, comme regarder des pandas à éternuer sur youtube..

Placer la réflexion au-delà de l'ETBR (dans l'espace z), car la réflexion floue se situe au-dessus de l'ETBR et au-dessus de la lueur.
Déplacez l'ETBR vers le bas. Le sommet de l'ETBR s'aligne parfaitement avec l'horizon, ce qui est très étrange.

Les solutions:

Normalement, nous définirions l’indice z de l’ETBR et la réflexion respectivement 2 et 1. Mais comme il n’ya pas d’autres éléments derrière la réflexion dans cette démo (encore une fois, dans l’espace z), nous pouvons simplement définir l’indicateur z- index de la réflexion à -1.
Ajouter un rembourrage au sommet de l'avion. Puisque l'ETBR est un enfant de l'avion, il descendra.

Voici le fichier CSS. Les dernières modifications sont mises en évidence:

style.css

 html hauteur: 100%;  body text-align: center; hauteur de ligne: 1; marge: 0; rembourrage: 0; couleur de fond: # 000; hauteur: 100%;  p line-height: 1.2;  #plane padding-top: 5%; gauche: 0; Top 10%; largeur: 100%; en bas: 0; largeur minimale: 1080px; hauteur minimale: 600px; position: absolue; débordement caché; débordement-x: visible;  #ETBR, #refl color: # 004; font-family: Impact, 'Arial Black', Helvetica, Arial, sans serif; text-transform: majuscule; taille de police: 200px; couleur de fond: #FFE; poids de police: gras; rembourrage: 30px; affichage: inline-block; box-shadow: rgba (255,255,240, .2) 0 0 200px 100px, rgba (255,255,240, .3) 0 0 40px, encart rgba (0,0,0, .8) 0 0 20px; border-radius: 30px; position: relative;  #refl position: absolute; z-index: -1; Top 100%; gauche: 0; -moz-transform: scaleY (-1); -webkit-transform: scaleY (-1); -ms-transform: scaleY (-1); filtre: url (filter.svg # blur); / * FF, Opera + IE10 * / -webkit-filter: flou (2 pixels); / * webkit * / box-shadow: encart rgba (0,0,0, .8) 0 0 20px, encart # 000 0 50px 100px;  .modern #refl opacity: .25;  .ie9 #refl margin-top: 20px; marge gauche: -10px; -ms-filter: "progid: DXImageTransform.Microsoft.BasicImage (opacity = .25) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow =" false ") progid: DXImageTransform.Microsoft.MotionBlur (force 15). , direction = 0) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = "false"); "  .oldie #refl margin-top: -20px; marge gauche: -7px; filter: progid: DXImageTransform.Microsoft.Gradient (startColorstr = # 99000000, endColorstr = # 00000000) progid: DXImageTransform.Microsoft.BasicImage (miroir = 1, rotation = 2, opacité = .35) progid: DXImageTransform.Microsoft.Blur = '3', MakeShadow = "false") progid: DXImageTransform.Microsoft.MotionBlur (force = 15, direction = 0) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = "false");

index.html

      Réflexions CSS3              réflexionréflexion

filter.svg

Conclusion

Et c'est tout! C'est le dernier violon, sans pour autant le flou du filtre SVG.

Violon | Plein écran

En plus, voici un pur CSS (à l'exception des étoiles en arrière-plan) Mac Dock utilisant cette technique.

J'espère que vous avez apprécié ce tutoriel et que vous avez appris quelque chose de nouveau. N'hésitez pas à laisser des questions dans les commentaires!

Création de sites web