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
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
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.
Been looking into responsive web design lately, and to practice I've made a very simple "application" which adapts to the screen size of the browser. Everything works as expected, but now I'd like to spice up the interface.
My intention is to create a logo and perhaps some icons too. I've downloaded GIMP and I was thinking of using it. Then it struck me, is that the proper way to proceed?
Is GIMP a good choice? Or, could that be achieved with the functions in HTML5, like canvas and stuff like that. Or how do you normally do and with what tools?
I'm not quite sure how to proceed.
Thanks!
i recommend you using EaselJS , i hope you enjoy working with it, however normal graphics that you want ever be accessible for wide range of your visitors should be designed and saved as popular graphic formats such as PNG , JPEG and GIF.also gimp is a good lovely tool.
I have graphs, reports or just plain text I want to place in a web page. Instead of sitting on the dull white background, I want them to have some containers around them. I can do plain color backgrounds but I was wondering if there are templates for containers with things like rounded corners, shaded containers, flexible gradients, drop shadow, ideas for partioning sections of a webpage.
Basically I want a resource that has a wealth of these things instead of me searching across tens of sites hoping to find something. I am a web developer not a designer so I need some ideas and help. While there are lots of whole page templates, I am more specific and want ideas for stuff similar to DotNetNuke containers. (Don't send me to DNN templates)
Actually if you want rounded corners, you CAN do it using CSS. Here's a good article on it:
http://www.devwebpro.com/25-rounded-corners-techniques-with-css/
Instead of looking around for graphics, why not create simple ones in Photoshop? All of these "partitions" for your website can easily be done by yourself either by using graphics you create or by some CSS. (i.e. for drop shadow, you can alter the borders)
If you're not into using Photoshop to create your own graphics, here are two sites for vector graphics--you'll have to dig around a bit.
http://www.vecteezy.com/
http://www.hongkiat.com/blog/50-websites-for-free-vector-images-download/