Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-11-04 18:01:42 +01:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
* 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.
Built from https://develop.svn.wordpress.org/trunk@25865


git-svn-id: http://core.svn.wordpress.org/trunk@25777 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Lance Willett 2013-10-22 17:00:10 +00:00
parent a9cab6f3fb
commit 521078cf17
3 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
wp-content/themes/twentyfourteen/images/pattern-dark.svg Normal file
View File

@ -0,0 +1,7 @@
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="5px" height="5px" viewBox="0 0 5 5" enable-background="new 0 0 5 5" xml:space="preserve">
<g>
<polygon points="1,0 0,1 0,5 5,0 "/>
<polygon points="5,5 5,1 1,5 "/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 322 B

7
wp-content/themes/twentyfourteen/images/pattern-light.svg Normal file
View File

@ -0,0 +1,7 @@
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="5px" height="5px" viewBox="0 0 5 5" enable-background="new 0 0 5 5" xml:space="preserve">
<g>
<polygon fill="#FFFFFF" points="1,0 0,1 0,5 5,0 "/>
<polygon fill="#FFFFFF" points="5,5 5,1 1,5 "/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 352 B

18
wp-content/themes/twentyfourteen/style.css
View File

@ -1004,10 +1004,7 @@ span + .edit-link:before,
*/ */
.featured-thumbnail { .featured-thumbnail {
background: #767676; background: url(images/pattern-light.svg) #767676 repeat fixed;
background-attachment: fixed;
background-image: -webkit-linear-gradient(135deg, #767676 12.5%, #fff 12.5%, #fff 50%, #767676 50%, #767676 62.5%, #fff 62.5%);
background-size: 4px 4px;
display: none; display: none;
float: none; float: none;
height: auto; height: auto;
@ -1018,11 +1015,8 @@ span + .edit-link:before,
z-index: 0; z-index: 0;
} }
.featured-thumbnail:hover { a.featured-thumbnail:hover {
background: #919191; background: url(images/pattern-light.svg) #919191 repeat fixed;
background-attachment: fixed;
background-image: -webkit-linear-gradient(135deg, #919191 12.5%, #fff 12.5%, #fff 50%, #919191 50%, #919191 62.5%, #fff 62.5%);
background-size: 4px 4px;
} }
.featured-thumbnail img { .featured-thumbnail img {
@ -2467,11 +2461,7 @@ span + .edit-link:before,
*/ */
.featured-content { .featured-content {
background: #000; background: url(images/pattern-dark.svg) #4d4d4d repeat fixed;
background-attachment: fixed;
background-image: -webkit-linear-gradient(135deg, #4d4d4d 12.5%, #000 12.5%, #000 50%, #4d4d4d 50%, #4d4d4d 62.5%, #000 62.5%);
background-image: linear-gradient(135deg, #4d4d4d 12.5%, #000 12.5%, #000 50%, #4d4d4d 50%, #4d4d4d 62.5%, #000 62.5%);
background-size: 4px 4px;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;