Created
September 10, 2017 20:06
-
-
Save MaxGraey/e51ce07a99f0105984c65fb1a6f36bfa to your computer and use it in GitHub Desktop.
Example of SVG and CSS Shadows comparision
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| SVG Filters supports by all browsers: | |
| http://caniuse.com/#search=SVG%20filters | |
| Advantages: | |
| - Performance (CSS) Filters usually has GPU acceleration | |
| - Support transpatent areas | |
| Disantages: | |
| - Hasn't inset shadows and Spread Radius | |
| --> | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>SVG vs CSS Shadows</title> | |
| <style> | |
| div.triangle { | |
| margin: 25px; | |
| border: 50px solid transparent; | |
| border-left-color: #f06; | |
| } | |
| div.triangle.drop { | |
| -webkit-filter: drop-shadow(5px 5px 10px gray); | |
| filter: drop-shadow(5px 5px 10px gray); | |
| } | |
| div.triangle.box { | |
| box-shadow: 5px 5px 10px gray; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="triangle drop"></div> | |
| <div class="triangle box"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment