Twenty Fourteen: Tone down the diagonal lines placeholders and recreate the pattern with CSS

[iamtakashi]

Make the diagonal lines little faint so that it's not to harsh when there is no featured image.

However we should keep the contrast for hover state so that the lines are visible when we mouse hover the featured image. Also we should recreate the pattern image with CSS.

Related: #24883

[iamtakashi]

Here is the patch to tone down the diagonal lines and to recreate the pattern with CSS.

[iamtakashi]

Add fallback colors if gradients are not supported, and this patch is made from the WordPress root directory.

[iamtakashi]

Another updated patch

[iamtakashi]

Here is the before vs after comparison with the latest patch: ​http://f.cl.ly/items/0L1S1u1e0R3s1O0U3I2w/placeholder-change.jpg

[obenland]

I don't think toning down the color is at all necessary. We agreed that we keep the pattern around, I like it the way it is.

[iamtakashi]

Replying to obenland:

I don't think toning down the color is at all necessary. We agreed that we keep the pattern around, I like it the way it is.

I thought you agreed what I proposed here :) ​http://core.trac.wordpress.org/ticket/24883#comment:11

What I'm intending here is try to find a middle ground because some disliked the lines from the beginning. And I actually like the lighter version now.

Color (or tone in this case) is subjective and it's difficult to make a decision that every one agrees in a community. I'd like to see others' opinions too. If you like either of them over another, please speak up here.

[lancewillett]

Related: #25363

[celloexpressions]

I'd be interested in why one looks better or worse to eveyone else, if you can identify it, because then we can justify our decision one way or the other.

To me, it looks much better with the original, darker styling. The lighter styling seems nice, but it looks terrible on bad screens (too low-contrast, almost looks like a pixelated solid color) and doesn't match the high contrast of the rest of Twenty Fourteen. In the context of the bold black header/sidebar against the white page background, the faint lines seem almost accidental. Since we're consciously including them as a graphical detail, let's make them feel intentional; which, to me, they do with the current tone (could even go slightly darker).

With the darker weight, I think they work better for the purpose of looking good and present-by-design in the absence of a featured image, while the lighter variant feels more like something's missing and it's only there to make you set a featured image.

(Also, test it with the patch from #25363, it makes a big difference on the clarity of the lines when scrolling.)

Either way, if we change the color on hover, that desperately needs a transition. I believe the best approach is to set it to the darker color and only change the opacity, so that we can apply a transition to the opacity. It would be nice if the existing weight/tone went lighter on hover, since that happens when there is a featured image.

[obenland]

​Before and after proposed change.

[iamtakashi]

Discussed in the office hours today and we've decided to keep the original color but replicating the pattern with CSS. ​IRC log

I'll update the patch including the tip from buffler in #25363

[iamtakashi]

Recreate the pattern with CSS and minor style adjustments. Also this patch includes the fix from buffler to stop the flashing.

[lancewillett]

In 25610:

Twenty Fourteen: redo the featured image background pattern with CSS plus minor style adjustments. Props iamtakashi, fixes #25300. This also fixes #25363, props buffler.

[lancewillett]

In 25614:

Twenty Fourteen: remove unused images, following r25610. See #25300.