- This topic is empty.
November 1, 2016 at 11:53 am #247281
On this site there are 3 buttons that I would like to scale with the background http://brandyderr.com/
Is it possible with CSS or jQuery to keep the button position as the site scales?
If someone has an idea or could point to a tutorial that would be great.
JohnNovember 1, 2016 at 4:14 pm #247287ShikkedielParticipant
It would probably be easiest to
transform: scale()the whole thing. Since it only takes an integer value, I think you’d need some JS to determine the exact factor.November 1, 2016 at 11:14 pm #247289BeverleyhParticipant
It’s a simple layout so how about remaking with relative units instead of fixed pixels. Moving forward, this might be of interest to you https://css-tricks.com/building-resizeable-components-relative-css-units/ (a good read with loads of examples)November 2, 2016 at 6:49 am #247297
Thanks for the replies. I’ll take a look at the link regarding resizeable components with relative CSS.
And through the “scaling/resizing” would the buttons retain their position relative the Logo that they are on top of?
ThanksNovember 2, 2016 at 9:28 am #247318ShikkedielParticipant
Beverley’s suggestion is a better idea because it won’t need any JS. Regarding your question, the answer for both approaches would be affirmative.November 2, 2016 at 11:32 am #247323
Great, thanks for all the helpNovember 2, 2016 at 11:35 am #247326Paulie_DMember
Gotta say my first thought was that the whole logo / button is probably an ideal opportunity for an SVG or Canvas rather than positioning links / buttons on top of an image.November 4, 2016 at 9:08 am #247454
I am reading up on the canvas and resizable components. And while its making sense I am still at loss as to how I can position the buttons on the page and have them scale with the logo. And my efforts to find a post or tutorial hasn’t yielded any results.
Sorry if I am missing something but this is all relatively new for me.November 4, 2016 at 10:35 am #247475Alex ZaworskiParticipant
If I’m understanding everything correctly canvas seems like it’d be tough here. If it were me, I would export the logo with the buttons already drawn as an SVG, drop it inline into your document, and add event listeners/hover styles on the buttons by assigning IDs/classes to them. Then you can just scale it like you would an image and it’ll all work fine.
There are quite a few good articles on SVG on this site (and elsewhere) so if you’re not familiar at all I’d spend some time reading up.
That’s all assuming you have access to an Illustrator (or comparable) file for the logo— might be outta luck on that front otherwise.November 4, 2016 at 10:45 am #247479
This is exactly what I am looking for. And yes, I have access to the Illustrator and this website is something that I designed so source files are no problem.
That said, I have read up an SVG and I have been using them with increasing frequency.
- The forum ‘CSS’ is closed to new topics and replies.