WordPress.org

Make WordPress Core

Changeset 25865


Ignore:
Timestamp:
10/22/2013 04:59:59 PM (7 years ago)
Author:
lancewillett
Message:

Twenty Fourteen: use SVG images instead of CSS3 gradients for featured image background pattern. Props iamtakashi.

  • Fixes laggy loading in Firefox, see #25600.
  • Significantly reduces CPU usage.
  • Scalable and crisp on HiDPI/retina screens.
  • SVG is support in IE9 which doesn't support CSS gradients.
Location:
trunk/src/wp-content/themes/twentyfourteen
Files:
3 added
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentyfourteen/style.css

    r25864 r25865  
    10051005
    10061006 .featured-thumbnail {
    1007     background: #767676;
    1008     background-attachment: fixed;
    1009     background-image: -webkit-linear-gradient(135deg, #767676 12.5%, #fff 12.5%, #fff 50%, #767676 50%, #767676 62.5%, #fff 62.5%);
    1010     background-size: 4px 4px;
     1007    background: url(images/pattern-light.svg) #767676 repeat fixed;
    10111008    display: none;
    10121009    float: none;
     
    10191016}
    10201017
    1021 .featured-thumbnail:hover {
    1022     background: #919191;
    1023     background-attachment: fixed;
    1024     background-image: -webkit-linear-gradient(135deg, #919191 12.5%, #fff 12.5%, #fff 50%, #919191 50%, #919191 62.5%, #fff 62.5%);
    1025     background-size: 4px 4px;
     1018a.featured-thumbnail:hover {
     1019    background: url(images/pattern-light.svg) #919191 repeat fixed;
    10261020}
    10271021
     
    24682462
    24692463.featured-content {
    2470     background: #000;
    2471     background-attachment: fixed;
    2472     background-image: -webkit-linear-gradient(135deg, #4d4d4d 12.5%, #000 12.5%, #000 50%, #4d4d4d 50%, #4d4d4d 62.5%, #000 62.5%);
    2473     background-image:         linear-gradient(135deg, #4d4d4d 12.5%, #000 12.5%, #000 50%, #4d4d4d 50%, #4d4d4d 62.5%, #000 62.5%);
    2474     background-size: 4px 4px;
     2464    background: url(images/pattern-dark.svg) #4d4d4d repeat fixed;
    24752465    -webkit-box-sizing: border-box;
    24762466    -moz-box-sizing:    border-box;
Note: See TracChangeset for help on using the changeset viewer.