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
Related
I have recently started to see websites with full size, full width background images, and when you scroll down there comes a section with some content and then a different background. and that scrolls with the page. I am sure if you have seen it you know what I am talking about.
How do you call this technique? Is there a name for it? I would like to look for a tutorial on this, but I don't know what to look for.
Thanks!
I think u are looking for Parallax Scrolling Website.
There are many tutorials for doing that easily.
A simple example for that is given here.
Moe can be found-
http://webdesign.tutsplus.com/articles/web-design-inspiration-scrollin-scrollin-scrollin--cms-25486
http://webdesign.tutsplus.com/tutorials/how-to-give-your-logo-the-slip-scroll-effect--cms-22274
http://webdesign.tutsplus.com/tutorials/create-a-masked-background-effect-with-css--cms-21112
http://webdesign.tutsplus.com/articles/building-a-complete-website-with-the-gumby-framework--webdesign-16980
http://webdesign.tutsplus.com/articles/working-with-gumbys-parallax-extension--webdesign-16967
http://webdesign.tutsplus.com/tutorials/jazz-up-a-static-webpage-with-subtle-parallax--webdesign-10195
http://webdesign.tutsplus.com/tutorials/create-a-parallax-scrolling-website-using-stellarjs--webdesign-7307
http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641
If u like to implement Parallax with Twitter Bootstrap, then this tutorial is for u-
https://www.impulse-themes.com/zenith/development/twitter-bootstrap-parallax-scrolling
Think u have your complete answer.
Are you perhaps looking for Parallax? There are many resources online with instructions about it, hopefully knowing the term will get you there.
Here's a simple demo with pure CSS Parallax, but you could also check out Awwwards for some inspiration.
The term “parallax” first came from the visual effect of 2D side scrolling videogames that used different background image movement speeds to create the illusion of depth during gameplay. This was generally done by making the background of the game move slower than the foreground in order to make it seem further away. This same concept applies to parallax site design in which the background of the website moves at a different speed as the rest of the page for an impressive visual effect that allows for countless creative applications for online storytelling.
You can check the link below for more information, tips and some downsides as well.
See More
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.
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
I've been tasked with creating an HTML5 demo that basically consists of a rotateable cube. Each face should have different text on it, and then when you tap a face it should animate itself so that the face expands to fill the entire screen.
Are there any good (simple) tutorials out there that show how to do this? Everything I've found so far is excessively complex and appears to contain a great deal more code than just what I need. I have a basic understanding of HTML elements and javascript.
Check out whats going on at http://www.htmlfivewow.com/slide44 which tackles most of your cube needs. Hit right key a few times and you'll see it going. You should be able to work from that. It's all just <div>s.
I'm working on a web site with Expression Web. I came across this website http://www.ecodetox.ca and what I really liked was how everything seemed to be in round rectangles. I also noticed the background had a drop shadow. I'm wondering how I could achieve this type of effect in expression web without using loads of images from Photoshop. Thanks
All those rounded corners are images :
http://www.ecodetox.ca/images/middle-accueil/middle_01.jpg
http://www.ecodetox.ca/images/menu/menu_01.jpg
The methods for doing this are numerous and will depend on the actual design you want for your site. You will need familiarity with CSS and HTML and once you're comfortable you can check out the myriad tutorials online