Icons Search Engine How To Nail A Sexy Layout // Archives // Addicted To New Part One, Skeletize, Visualize, and Nakedize This is the first article of a series on “How To Nail A Sexy Layout”. The sexy layout I have chosen for this series is HumanRadiator.com , the web home of the “blisteringly driven, torridly imaginitive, and feverishly creative” Jim Gosz. For those who don’t know, I am a developer and Jim is a designer for the University of Notre Dame’s Webgroup . Skeletize The first step in my development process is always creating the skeleton. <title>Generic Title</title> My intent for this series is not to spark a debate on whether or not my naming conventions are the best or I use too many divs, etc, etc. Onward! Visualize The goal of standards based development is to separate structure and presentation. Because all presentational graphics are rendered through background images, visualization is indespensible. The important thing to remember is that we have already created our skeleton and we do not want to modify this unless deemed absolutely necessary.
RSS: Best Design Practices And Icons | Design Showcase Advertisement RSS is extremely simple and yet so powerful. Not only does every weblog need it for content syndication; the number of RSS subscribers is a metric for weblog’s popularity and its success in the blogosphere. However, although millions do use RSS, hundreds of millions don’t. In this article we give an overview of what RSS is and present best design and usability-practices for design and placement of RSS-buttons on a web site. Please notice that you can find even more icons, buttons and design templates in our articles 20+ Free And Fresh Icon Sets, Freebies Round-Up: Icons, Buttons and Templates and in our Graphics category. What is RSS? RSS is basically a family of formats used to publish (not broadcast!) RSS content can be read using feed readers such as Bloglines or aggregators such as Netvibes. To get an instant idea of how it is actually done you should take a look at RSS in Plain English which explains the basics of RSS in 3.5 minutes in Plain English. Source: cadenhead.org
Icon Archive - Search 265,338 free icons, desktop icons, download icons, social icons, xp icons, vista icons CSS Menus - Vertical CSS Menu with Popout and Dropdown Menus This semantically correct Vertical CSS Popout Menu has been finalized as of 2005-02-28. See links below for supporting files. View source to see the HTML/XHTML and CSS that controls this vertical popout menu. Note from Claire at Tanfa: This CSS vertical popout menu uses the "whatever:hover" behavior file. It is available for download from the "whatever:hover page on Perterned's site. It simply needs uploading to your website (I put it in the same directory as my CSS file /css/csshover.htc) and off you go. There is a newer version of this file (V1.30.050121 - released 2005-01-21), since these menus were first written, which means you no longer have to use the specific selector workaround for them to work in IE5.x (see CSS comments). The hover targeting CSS itself has to be very specific for IE to understand it properly, again this is because we can't use child selectors. Vertical CSS Menu Horizontal CSS Menu
Free download of 6010+ icons in Windows 8, iOS 7 and Android style — Icons8 We tweet, message, and conduct structured interviews to determine which features the community needs, not to mention that the community invented many of them! Single Style All icons are done by a single designer, so your user interface will look consistent. Editable Vectors Paid Vector icons are not merged and have preserved shapes. Fonts Generator Paid Goodbye monster fonts of 500 icons. Icon Recoloring Pick a color and we will generate recolored versions of your PNG or SVG. Mac&Win Apps Allows you to search icons quickly, and works well with Photoshop. HTML Embedding Get a code to paste an icon right into your HTML. CSS Tabbed Navigation This page demonstrates a pure CSS method to generate a 'Tab' style interface (see here for more). It first uses the trick of an inline list to generate the tabs. To get the tabs to really look the part - the 'active' tab needs to blend into the 'content' area. This is achieved by giving the active tab a different class, and changing its properties (border-bottom and background) accordingly. Additionally, it allows one to change the active tab's :hover by not highlighting the active tab in the same way as the inactive tabs. Because the purpose of the tab interface is to 'guide' the user as to their present location, these small features do actually improve the 'usability' of the tab structure. The code is very simple, the CSS is embedded to let you see 'under the hood'. Note that for IE5/5.5 you probably need to add hacks to the CSS to overcome their bugs, I would have done it but I'm tired of box-model hacks...
CSS Techniques Roundup - 20 CSS Tips & Tricks September 22, 2005 Related Entries 55 people found this page useful, what do you think? Trackbacks Trackback Address: Comments Pete, Well done! Sami Pete, Great collection of useful references. Thanks Mark and Sami! Pete, this is really useful, about to get a junior developer to start on some look and feel tasks for a new application we are building and this wil save me a lot of time, thanks for the links. Also updated my site now so hopefully it doesn't offend the colour blind ;-) Once again cheers. Thanks Kev, glad to help out. Hey, there's some AWESOME stuff in here... Always great, instructive posts! Well, useful stuff, but ALL of them are listed on Here's a nice little top 10 from Evolt (now that they've got their site back up..... Hi Chris, Many of the links I posted here are listed in the link you posted, but not ALL of them. Keep up the good work Pete! thanks, Good job!!
CSS Swag: Multi-Column Lists One of the minor holy grails of XHTML and CSS is to produce a single, semantically logical ordered list that wraps into vertical columns. The ideal situation, in my view, would be a single XHTML list whose wrapping is controlled entirely by CSS. Further, the wrapped list should tolerate text resizing (easily accomplished by styling everything in ems). CSS and the browsers that support it don’t yet provide us with “vertical wrap,” so we have to augment basic list markup with additional attributes and styling rules to achieve the effect. I’ll take you there—or as close as we can get using today’s browsers—but along the way let’s look at a variety of ways to accomplish a similar effect. We’ll be shooting for something that looks a bit like this: (Why, you’ve doubtless been pondering, is this article entitled “CSS Swag”? Watch your step#section1 I’ll warn you up front. The reality is not so ideal. So why do we bother? To work, then. First, expunge all white space#section2 See Example 1.
CSS Sprites: Image Slicing’s Kiss of Death: A List Apart Back when video games were still fun (we’re talking about the 8-bit glory days here), graphics were a much simpler matter by necessity. Bitmapped 2-dimensional character data and background scenery was individually drawn, much like today’s resurgent pixel art. Hundreds and later thousands of small graphics called sprites were the building blocks for all things visual in a game. Article Continues Below As game complexity increased, techniques developed to manage the multitude of sprites while keeping game play flowing. One variation saw sprites being plugged into a master grid, then later pulled out as needed by code that mapped positions of each individual graphic, and selectively painted them on the screen. And what does this have to do with the web? Everything old is new again, and though the rise of 3D games has made sprite maps obsolete, the concurrent rise of mobile devices with 2D gaming capabilities have brought them back into vogue. How do CSS Sprites work? On to the HTML.