The words “vintage” and “retro” might at first glance be intimidating to designers whose idea of a gorgeous website is modern and streamlined, not old or dusty. But don’t let the nod to the past fool you. Vintage and retro design elements are not only bright and eye-catching, but they also have a distinctly fresh edge to them with their bold font choices, punchy colors, and graphics that run the gamut from fun to flirtatious, enticing to seductive, and from mainstream advertising to pop art.
What exactly constitutes vintage and retro web design? The websites showcased below show many different approaches to the theme, but certain elements often repeat themselves. Handwriting and scripted fonts are popular, as are old cars, early electronic devices, mid-century modern design, retro product models, old fashioned postcards, and vintage signage. While some web pages sport a sixties nod to space travel, others corner post-war optimism and peppy 1950s advertising campaigns, while still others feature military themes or pin-up girls. Some websites even reach further back in time, replicating early twentieth century newspapers and serials.
And while a few of the websites featured provide retro or vintage-themed products and services, such as old photo booths, music recordings, or font styles, the majority of them have simply picked up on the style as a unique way to showcase their businesses, whether they be design studios, literary websites, or fashion advisors.
E-commerce is one of the best things that came along with the internet, making it easy to purchase goods not only from local shops, but from a worldwide selection. This thing goes both ways, not only good for us, but also for the shop owners who increase their sales considerably through internet. However, times change and just having an online shop isn’t enough. You need to take advantage of every aspect to outrun your competition and when I’m saying this I’m referring to design, usability and a well written code. In this article, there are 30 e-commerce websites that combine in a charming way those three aspects of web design.
HTML5 and CSS3 have brought to the design world not only new techniques and an easier or more manageable code but also the chance to create features for a website that were previously available with flash, javascript or some pretty hardcore designing. I wasn’t expecting to find so many high quality websites that use HTML5 and CSS3 so I have to admit that I am pleasantly surprised. I’ve surfed on these 55 sites for a while to see the different features that they have implemented with success and believe me when I’m telling you this, they’re worth bookmarking so that you could take a peek at them for inspiration.
It is almost impossible to gather in an article all the CSS code snippets that could help you in the future but here are some of the ones that you would need more often than others. Don’t get scared by the length of some of these CSS hacks’s code cause they’re all easy to implement and where is the case, they’re well documented. Besides the ones that solve common and annoying problems there are also some that solve new issues brought by the new technologies.
Comprehensive List of Browser-Specific CSS Hacks
Cross browser coding can be sometimes tricky but these browser specific css hacks can help you with your problems. With them cross browser compatibility comes to you served on a plate.
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
Using the same type of menus over and over again doesn’t mean that you’re defining your own style, in the real world, that mean’s that you’re getting rigid and rusty. When you’re at that point, you gotta slap yourself a couple of times (just for fun) and then surf on the net to find some inspiration, something different, something that others are trying in their designs.
