Whenever I am starting a new web design project, I always first take a look around and see if I can find a CSS template that will fit my needs. Personally I am willing to spend $10 or $20 on a premium CSS template because I know it will save me a bunch of design time down the road. Before I whip out my credit card though I always check a couple of the top CSS Template website for free options. These days, free CSS templates are numerous and great quality.
Below I have compile a list of the top free CSS template websites I use on a regular basis. Take a look and see if you can find a template that will match up with your next project. If you know of any more free CSS template websites, then let us know about them in the comments.
1
Open Designs
This site is probably the cleanest designed in our list. This website provides a ton of free CSS templates, but also provides and easy way to filter and search by keyword, color, and style.
CSS Creme has lots of things on there site like web design tutorials and galleries for inspiration. They also have a fairly healthy collection of free CSS templates to choose from. They are somewhat hidden in the site but we found them for you to use.
OS Templates is another great source for free CSS templates. They have a basic section for free templates, but they also have another section dedicated to free, responsive css templates. Responsive web design is all the rage these days so this is a great place to grab some free templates.
This is another marketplace where you can buy and sell CSS Templates. We have tracked down the free CSS templates section to head on over and see if you can find a templates for your next project.
Today we give away the HTML version of our fully responsive premium WordPress theme Serendipity.
(Free for only personal use.)
If you are not feeling good about HTML and would like to have the theme with an admin panel along with gallery featuring Tumblr-like lightbox, working contact form and font/color/background options, WordPress version of Serendipity is what you are looking for.
One rather simple way to handle this is to put an inline image on the page, fixed position it to the upper left, and give it a min-width and min-height of 100%, preserving it's aspect ratio.
However, this doesn't center the image and that's a pretty common desire here... So, we can fix that by wrapping the image in a div. That div we'll make twice as big as the browser window. Then the image will be placed, still preserving it's aspect ratio and covering the visible browser window, and the dead center of that.
Credit to Corey Worrell for the concept on this one.
Works in:
Safari / Chrome / Firefox (didn't test very far back, but recent versions are fine)
IE 8+
Opera (any version) and IE both fail in the same way (wrongly positioned, not sure why)
Peter VanWylen wrote in to say that if you add the image via JavaScript, the img needs to have width: auto; and height: auto; to work in IE 8, 9, or 10.
The Fall 2012 campaign for Saks Fifth Avenue features humorous flowcharts helping shoppers decide what to buy.
Shopping and gift-giving are all about choices. Should you give her shoes or earrings? Do they want something for the house or a present that’s more personal? And how about a little something for myself?
Pentagram’s new fall campaign for Saks Fifth Avenue attempts to diagram this complex decision-making process in a series of humorous flowcharts. Designed by Michael Bierut and Katie Barcelona with Sabrina Friebis Ruiz, the graphics appear on shopping bags, print promotions and advertising for the luxury retailer. In developing the campaign, Pentagram worked once again with Saks Executive Vice President and Chief Creative Officer Terron Schaefer and his creative team led by Christopher Wieliczko and Andrew Winton.
The flowcharts are used as patterns on shopping bags.
Each flowchart starts with a problem posed in a circle (“Uh oh, is that today?”) and branches off at different decision points as shoppers consider their options, winding through various stages of deliberation (“He’d like to have…. Jeans that aren’t ‘Dad jeans’”) or distress (“Think quick… I think I need an expert”). The paths all lead to Saks, represented by the store’s square logo, also designed by Pentagram.
The campaign complements the grid-based, black-and-white brand identity we designed for Saks in 2006, as well as the look and feel of previous campaigns we’ve developed for the retailer, which are often playful, usually highly graphic, sometimes directional, and may involve games and puzzles.
Project Team: Michael Bierut, partner-in-charge and designer; Katie Barcelona, designer; Sabrina Friebis Ruiz, design assistant.
by 09-30. Monday 1. Reading: html & CSS (chapter 10~11: p. 228~260 ) 2. Reading: DreamWeaver CS6 (Chap. 3, 7) 3. Reading response paper Don't make me Think (Chap. 1~4): - Summery and your thought on your reading: font size: 11pt. 350~400 words. single space, you may include images, save PDF at Dropbox by 10-02. Wednesday 1.. Reading: html & CSS (chapter 12,13,15) 2.Reading response paperDon't make me Think (Chap. 5~8):- Summery and your thought on your reading:font size: 11pt. 350~400 words. single space, you may include images, save PDF at Dropbox 3. Exercise Assignment: Resume: using html& external CSS
Note how the other elements are displayed as if "Two" were in its normal position and taking up space.
Absolute positioning
Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. The absolutely positioned element is positioned relative to nearest positioned ancestor. If a positioned ancestor doesn't exist, the initial container is used.
In the example below, the blue ancestor div is positioned relative (so it becomes the nearest positioned ancestor) and box Two is positioned absolutely:
If #ancestor had not been positioned relative, box Two would have appeared relative to the upper left corner of the page.
Fixed positioning
Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport. This is often used to create a floating element that stays in the same position even after scrolling the page. In the example below the "One" box is fixed 80px from the top of the page and 20px from the left:
#one { position: fixed; top: 80px; left: 20px }
When viewing the top of the page, the position box appears in the upper left, and after scrolling, it remains in the same place relative to the viewport:
The Fall 2012 campaign for Saks Fifth Avenue features humorous flowcharts helping shoppers decide what to buy.
The flowcharts are used as patterns on shopping bags.
