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
Related
I'm working on a hubspot project that I got pulled into last minute and am having a lot of trouble with a particular issue. The page looks okay fullscreen but on mobile, I'm getting some crazy margin that is making the site look super funky. I've searched and searched through the elements with google dev tools and can't find any culprit. I was hoping someone either knows a common problem with this on hubspot or would easily be able to help me pinpoint which element is causing the problem.
A link to the site is
https://www.modev.com/amazon-dev-day-casual-connect-sf
Any help would be greatly appreciated. I'm driving myself crazy at this point.
Thanks,
Jon
I don't know Hubspot's templates so it's hard to say for sure. But tooling around with your site I tried to force the width of the HTML using jQuery
var screenWidth = $(window).width();
$('html').css('width', screenWidth);
It worked enough to show me that when scrolling down the mobile site something's off with the header that's hidden and shows on scroll. Either the class below or it's parent might be a good place to look.
cbp-af-header cbp-af-header-shrink
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
So the title pretty much say's it all, In case anyone is interested I'm self thought so please don't be so hasty to say I did no research or put any effort into this because I've messed around with a lot of various things on this somewhat BS page and searched using Google Yahoo and Bing looking for a similar issue. Basically the table layout seems to to get like a default transparent overlay, I noticed its only directly on the table because the background images are clearly visible when scrolling past the top of the page and its visible in each table cell.
Like I said I've tried various things with no luck but if this is just some common newbie mistake please point me to some reading material or even a good book for web design as I could really use the know how and wouldn't mind learning something as apposed to shooting in the dark with random bits of HTML, CSS and JavaScript in the little free time I do have..
*Also I was doing all this using blogger as my "host" mainly because I plan to ingrate the blogger framework or whatever into the page after I know its good to go. Find a link to the page below, If you need the raw HTML not formatted to blogger just let me know.
https://layout-dev.blogspot.com
Turns out the image host for the body background-image wasn't loading in the image on apple device's, still not sure why but after relocating the image to my personal Dropbox and directly linking to it that solved the problem. *As weird as that may sound the original url was http://subtlepatterns.com/patterns/binding_dark.png and simply replacing it with https://dl.dropbox.com/s/njcu65h90cmsbp8/binding_dark.png solved the problem. -Figured I should post the answer just in case someone ever has a similar issue.
I've been reading other posts about having horizontal scroll, but I haven't been able to do it. I took a web design class a very long time ago at my local community college, and all that was taught was basic HTML. I haven't been up to date with the latest web technology, which is why I'm considering to stop working for a singer in Los Angeles. I have tried reading tutorials, and looking at websites and looking/importing the code into Dreamweaver to see if I can understand it, but it's been hard.
Right now I was asked to have the news as just a thumbnail, but with horizontal scrolling. Right now I have the news appear in an iframe, but scrolling with a mouse is not even possible. It's also very hard to use the finger on a mobile device. What would be the best way to have something like apple.com in a simple html page? Something like just having the dots, and moving to the next page?
This is the news page of the page I work in: http://www.maria-del-pilar.com/main.html and this is the the page that loads within the iframe: http://www.maria-del-pilar.com/news.html
What do you guys recommend I should do? What would be the easiest way to scroll horizontally?
You will probably not want to hear this, but you will not make horizontal scrolling any better than what you have now without adding some javascript.
Great things can be achieved with jQuery - you will probably have to learn something new in order to use it, but hey - life is about learning, isn't it?
Also, after you learn just basics of jQuery, you will be able to use solution of somebody else and not necessarily write all code by yourself. Like this - http://www.jquery4u.com/plugins/10-jquery-horizonal-scroll-demos-plugins/
You can also abandon idea of horizontal scrolling whatsoever - I don't think it is anything special in terms of usability or design anyway. But I understand that you want to achieve what you were asked for.
Good luck
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