• Home
  • Categories
  • Recent
  • Popular
  • Top
  • Tags
  • Users
  • Groups
  • Documentation
    • Home
    • Read API
    • Write API
    • Plugin Development
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
v3.5.1 Latest
Buy Hosting

How to make tiles glossy ?

Scheduled Pinned Locked Moved General Discussion
10 Posts 3 Posters 2.5k Views
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • meetdilipM Offline
    meetdilipM Offline
    meetdilip GNU/Linux
    wrote on last edited by
    #1

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

    A 1 Reply Last reply
    0
  • A Offline
    A Offline
    a_5mith
    replied to meetdilip on last edited by a_5mith
    #2

    @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.

    1 Reply Last reply
    1
  • meetdilipM Offline
    meetdilipM Offline
    meetdilip GNU/Linux
    wrote on last edited by
    #3

    Can you give a sample code please ?

    A 1 Reply Last reply
    0
  • A Offline
    A Offline
    a_5mith
    replied to meetdilip on last edited by a_5mith
    #4

    @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

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

    favicon

    (jsfiddle.net)

    meetdilipM 1 Reply Last reply
    0
  • meetdilipM Offline
    meetdilipM Offline
    meetdilip GNU/Linux
    replied to a_5mith on last edited by
    #5

    @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

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

    favicon

    (jsfiddle.net)

    Thanks. Will try and update.

    A 1 Reply Last reply
    0
  • A Offline
    A Offline
    a_5mith
    replied to meetdilip on last edited by a_5mith
    #6

    @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:

    effect.png

    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. ;))

    psychobunnyP 1 Reply Last reply
    2
  • meetdilipM Offline
    meetdilipM Offline
    meetdilip GNU/Linux
    wrote on last edited by
    #7

    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.

    Tile 1.png Tile 2.png Tile 3.png Tile 4.png Tile 5.png

    A 1 Reply Last reply
    0
  • A Offline
    A Offline
    a_5mith
    replied to meetdilip on last edited by
    #8

    @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.

    1 Reply Last reply
    1
  • psychobunnyP Offline
    psychobunnyP Offline
    psychobunny
    replied to a_5mith on last edited by
    #9

    @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

    meetdilipM 1 Reply Last reply
    0
  • meetdilipM Offline
    meetdilipM Offline
    meetdilip GNU/Linux
    replied to psychobunny on last edited by
    #10

    @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. 🙂

    1 Reply Last reply
    0

Copyright © 2023 NodeBB | Contributors
  • Login

  • Don't have an account? Register

  • Login or register to search.
Powered by NodeBB Contributors
  • First post
    Last post
0
  • Home
  • Categories
  • Recent
  • Popular
  • Top
  • Tags
  • Users
  • Groups
  • Documentation
    • Home
    • Read API
    • Write API
    • Plugin Development