April 13, 2013
rails, web design
To remember where your users were before they clicked on your page, capture the url they can from using a before_filter in your controller:
class StaticPagesController < ApplicationController
session[:last_page] = request.env['HTTP_REFERER']
and then add a link pointing back to that url on your page.
<% if session[:last_page] %>
<%= link_to "Back >>", session[:last_page] %>
<% end %>
Links that help
January 21, 2012
adobe illustrator, design
adobe illustrator, design, gradient, hackers, web design
To create a repeating background for your website using a gradient affect that looks something like this:
do the following.
Adobe illustrator CS5
Draw a square.
Open the gradient window (Window -> Gradient)
Click the gradient box (will apply black to white gradient).
Open the color pallette (Window -> Color) and get both the color and gradient window on screen at the same time (tricky because Adobe UI is terrible).
Once you’ve got them both up, click and drag the colors you want for your gradient from the color palette down to the ends of the gradient.
Transform and slim the gradient until your happy. Save this image somewhere you can access from your website. Remember to reduce the size of your canvas (Shift -O) to make sure your image is slim when you export it.
Now apply the following CSS to the body of your website:
This takes the gradient we just created, and repeats it across the screen and applies a default color to anything below your gradient image where is runs out.
Voila! That’s it. You’ve now got a nice background to build off of.
September 9, 2011
background, css, gradient, html, ux, web design, webdesign
Ever wonder how some websites get that nice, subtle background going? I did. Turns out it’s really easy.
Just make an image (say 4 pixels high with a single dark pixel at top and three light ones below)
And repeat it as a background image over your page.
<link href="css/repeatedBackground.css" media="screen" rel="stylesheet" type="text/css" />
It’s subtle, but nice for corporate style look and feel work or in any enterprise as a background to a table or TPS report.
Another approach is to apply the same idea with a gradient. Take a longer gradient image (say 1×500 pixels) and repeat it along the x-axis with a darker background color for where the gradient runs out :
and you get something like this:
Cool eh? These are just a web design tips I am picking up no my current project. Thanks to Jonas Claesson for point these out.