IE9 SVG, needs conditional override of 'filter' to 'none' /īackground: url(data:image/svg+xml base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw元N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzYTFkNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjU2JSIgc3RvcC1jb2xvcj0iIzAzNWE4OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDFiMmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+) īackground: -moz-linear-gradient(top, #63a1d7 0%, #035a89 56%, #001b2d 100%) / FF3.6+ /īackground: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#63a1d7), color-stop(56%,#035a89), color-stop(100%,#001b2d)) / Chrome,Safari4+ /īackground: -webkit-linear-gradient(top, #63a1d7 0%,#035a89 56%,#001b2d 100%) / Chrome10+,Safari5.1+ /īackground: -o-linear-gradient(top, #63a1d7 0%,#035a89 56%,#001b2d 100%) / Opera 11.10+ /īackground: -ms-linear-gradient(top, #63a1d7 0%,#035a89 56%,#001b2d 100%) / IE10+ /īackground: linear-gradient(to bottom, #63a1d7 0%,#035a89 56%,#001b2d 100%) / W3C /įilter: progid:DXImageTransform.Microsoft. More details, for the next person that is looking to do this: (& if anyone more knowledgeable than me sees something drastically wrong with this, I welcome the feedback!) Examples and Code Download About Project Animated Gradient Ghost Button. Download these backgrounds and use them in. Pure CSS Gradient Background is a project on codepen.io which uses a CSS gradient animation applied as a background to the body of the document. (thus the need for internal styling if I wanted anything at all!) Combining colors is usually a good recipe for success, and using gradients is like taking it to the next level. The requirements provided to me for this page was that no external images or style sheets could be used, so I was severely limited with what I was allowed to do. ![]() I was still having some issues though when I popped the code into Dreamweaver - I think I just wasn't putting it in the right place and was missing a bracket somewhere. I used ColorZilla to create the gradient, and CodePen to play around.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |