So I know that the question of how to make a radial menu has come up before and I am aware that some people have done absolutely amazing things already, but! I have to make one and I can't use anything more than css and js. The problem is, I have to implement the menu on the clients piece of crap drag and drop editor. It doesn't have anything fancy installed and isn't the most wonderful environment to work in.
To make matters worse, it has to be compatible back to IE8. I know. Trust me.
I was initially thinking of using a bunch of divs shaped as triangles layered over each other, but then I would have to cut off all of the tips poking out. Not sure how to do that.
Any ideas?
By the way, this is the triangle idea: http://imgur.com/YcWeOjE
Related
I've been struggling at work to figure this out for a week and can't quite figure it out and none of my friends know HTML/CSS so I thought why not ask here? I work on my company’s internal website, it's kinda crap none of the apps work. They have a carousel that we don't much care for that I'm trying to get rid of so I was going to make a new one... only issue is the site doesn't allow any scripts or java so I'm really just limited to basic html and css and I can't for the life of me figure out how to animations to work. I've figured out how to make a carousel by researching online that's fine that seems pretty straight forward, animating photos on their own seems straightforward... but trying to make an animation with any kind of control without java or scripts of any kind I can't figure it out. Was hoping someone could help me make a super basic one even if it's just a general image rotator with a hover to pause, but preferably something that rotates automatically and has navigation arrows or page dots...
I found this as something that might work for our site, but I need to reach out to our provider to find out why our host site is replacing the ">" between ".st-slider > #play1:checked" with garbage text preventing me from seeing if this animation will actually work (It should since there are no scripts running it and other keyanimation based css sliders work on our site). Then I would like it to look better... But to give an idea of what kind of project I'm looking at please see the link below.
https://codepen.io/miriamcc/pen/KzGGqZ
enter code here
Hello dear did you try to use
#keyframes
?
that would do the automated part of the work
I do a lot of work during the day and I program in quite a few languages so doing CSS work is a little tough because i don't specialize in it. I have run into an issue where wordpress no longer works for me so I have to do mysite on my own. can you guys point me to a web resource that will show me how to get a a look of a multi-level horiz. menu at the top of my homepage similar to the one found here?
https://www.cssscript.com/create-a-multi-level-drop-down-menu-with-pure-css/
I got that link from a similar thread here on S/O.
I copied all of the code there and put it in the appropriate CSS and HTML files, but I do not get the multi-leveledness. I only got a vertical menu on the left side without color. I'm a source coder, and generally automate things and I'm horrible at designing anything. I draw stick people and that's as far as my artistic talent goes. so CSS falls into that same boat. thanks!
If you really only got a vertical menu on the left side without color, that sounds like none of the CSS styles are actually taking effect. And since none of the elements have classes from what I can see, it sounds like your CSS isn't actually loading or being applied to the DOM. How have you included the CSS rules into your website? Before trying to use a different demo, try to get this specific one working by looking at your HTML structure and figuring out how to get the styles to grab onto the right elements...
I've been browsing Dribbble this morning and found this nice UI design for a dating app, see screenshot below:
Now, this is an ever growing trend in design and it does look fantastic, but realistically is it possible to code an element that has a horizontal/diagonal gradient and fades out vertically?
If I were to do this I would probably do it using only CSS, which is fine for the colour gradient, but is there a way to also fade the element out vertically. The only other way I can imagine doing this is to generate the gradient as an image on the fly using server side code but I'd imagine that would use a lot of server resources to regenerate on the fly.
Info on other ways of doing it would be great, I've tried a couple of ideas but nothing has actually worked yet.
Andy
I have an interesting problem.
I was making the solar system for fun, which can be seen here:
http://jessemorgan.me/solar-system/
Everything is working fine until I add Saturn, or anything after Jupiter. When I do that, all background images disappear, however are still being loaded successfully. Then out of curiosity, I added Neptune as well and Saturn's border then wasn't visible.
After debugging, I found that if I lowered the width/height of Saturn's orbit significantly, everything became visible again. That, for obvious reasons isn't a solution though.
It's all pure css/html. I only added jquery for zooming and popups. So hopefully, the solution will be a rather easy one. I'm just not seeing it.
Saturn and Neptune have been commented out, but all of the code remains.
Does anyone know why it's going all wacky?
Just a note and I will expand later... have you run it without Javascript? One of the parameters in your JS code could be funky, which would mess with how far you're "zoomed" in, when you really aren't--essentially cutting off parts of the solar system.
I'm interested how are these backgrounds made:
http://www.studioup.it/
https://www.fbf8.com/
I tried searching Google, but i'm not sure how is this technique called. Search for 'animated background' did not give the results what i was hoping for.
Is this some shape drawing / animation or what? Or maybe it's background animation, but done very elegant and with good taste?
AFAIK there isn't any specific name for this technique
Just applying classes, change positioning based on scroll position.
More details here
http://css-tricks.com/fancy-scrolling-sites/
There's another similar effect called Parallax Scrolling which is quite popular as well.(except for a few exceptions, I hate it mostly)