How to make tiles glossy ?

[meetdilip]

I guess using gradient in CSS we can do it. Pros, please assist.

[a_5mith]

@meetdilip You can do it in CSS, yes. It's difficult to just give you some css to use, as each use case is different. A few minutes on google should give you the gradient effect css code to use, then you just need to adjust to your own taste.

[meetdilip]

Can you give a sample code please ?

[a_5mith]

@meetdilip Something like this. If you're using this on your homepage for the "tiles", then replace .shine:before for .category-header-image-cover:before (untested)

Edit fiddle - JSFiddle - Code Playground

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

(jsfiddle.net)

[meetdilip]

@a_5mith said:

@meetdilip Something like this. If you're using this on your homepage for the "tiles", then replace .shine:before for .category-header-image-cover:before (untested)

Edit fiddle - JSFiddle - Code Playground

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

(jsfiddle.net)

Thanks. Will try and update.

[a_5mith]

@meetdilip Just a thought, I noticed on your website that you're only using css colours to create your tiles. If this is the case, you could always cheat slightly and use an image as the gloss. I created this one for you to download and try: https://i.imgur.com/zLBAf4u.png

Download that, and set it as the image on your categories, then set the image class to cover from the dropdown, this will produce an effect like the attached:

You can then specify the colour underneath as you normally would. If you had a specific angle you wanted, I can change the gloss image for you. (Once, time is money after all. ;))

[meetdilip]

Thanks for the tip. I did go that way first. But when I try various layout, it is makes the layout breaking. Lovely tile you made. Will attach mine.

[a_5mith]

@meetdilip The overlay you make has to be larger than the tile to cater for iPad portrait etc and changing screensizes. 450x450 seems to be a sweetspot that caters for all device sizes.

[psychobunny]

@a_5mith said:

If this is the case, you could always cheat slightly and use an image as the gloss. I created this one for you to download and try: https://i.imgur.com/zLBAf4u.png

This is pretty cool. Wonder if we should make a "resources" category for stuff like this

[meetdilip]

@psychobunny said:

@a_5mith said:

If this is the case, you could always cheat slightly and use an image as the gloss. I created this one for you to download and try: https://i.imgur.com/zLBAf4u.png

This is pretty cool. Wonder if we should make a "resources" category for stuff like this

I can make a few tiles of 450 x 450.