Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2012
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Do CSS gradients slow down your website?

    Simple question, just wondering if gradients such as the one below effect the performance of your website?

    Code:
     background: #a90329; /* Old browsers */
    background: -moz-linear-gradient(top,  #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
    background: linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Posts
    339
    Thanks
    3
    Thanked 35 Times in 35 Posts
    Not significantly, not measurable in seconds, only in milli- or microseconds. It is a faster method in terms of rendering than using images for it. However, the code gets more complicated with it. That's why I'm in the end still using images, which are rendered by all browser versions.

    What I do is inform about which browser version the customer is using, create a CSS gradient, adapt the color to his liking, and if he is satisfied, I create an identical image.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • Users who have thanked Frankie for this post:

    jaydrones (05-03-2012)

  • #3
    New Coder
    Join Date
    Apr 2012
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Good info, thanks!

  • #4
    New to the CF scene
    Join Date
    May 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have never experienced lag or crashing when using gradients, and I have used similar codes to this. Maybe your PC's graphic card is due for a change.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •