Best of CSS Design 2009 Since 2007, every year I do a round up of best of CSS from Best Web Gallery (check out 07 and 08 collection). Well, it is the time of the year again — Best of CSS Design 2009. This year I've selected another 50 nicely designed web sites. Among the list, I notice a lot of them are minimalistic design with beautiful serif fonts. Sushi and Robots Bobulate A Way Back LegiStyles For a Beautiful Web Black Estate Cynosura Mark Dearman iA Trent Walton Area 17 Nosotros Atebits Square Space Gap Medics Fringe Typographica Book Cover Archive Search Inside Video Red Nose Day Carsonified Fajne Chlopaki Devia Mail Chimp Miro Squared Eye Clear Left White House 45 Royale Work at Play Wonderbra Legwork studio Surly Project 365 72 Ave Maxvoltar We Heart Jeff Finley Elliot Jay Stocks SimpleBits Corking Design Adii Burciaga Paravel Jeremy Charles Brite Revolution Go Media 31 Three AN idea Mission Bicycle
Enclosing Float Elements | Floats | HTML & CSS Workshop | Gary Turner web development Developers who are new to css, or those who work primarily in IE, run into a vicious “bug” in Firefox and other modern browsers. Their backgrounds disappear, or their borders do—but everything's fine in IE. The gnashing of teeth is heard throughout the land. The truth is, there's a reason for the behavior, and IE has screwed up again. The culprit is a wad bug known as hasLayout. In this demo, there are two ways to see what's going on, IE's way, and the right way. IE7 has internalized many of the IE6 bug work-arounds. Basic Non-Enclosed Float Notice that in the first box, the float element extends beyond the parent div. On a side note, IE does not properly handle collapsed margins when an element has layout. Now is the time for all good men to come to the aid of their country. This is non-float content. Using The Overflow Property If the parent element has an overflow: value other than the default “visible”, the height of the element will be sufficient to contain child floats. And so is this.
CSS3 Cookbook: 7 Super Easy CSS Recipes to Copy and Paste CSS3 Cookbook: 7 Super Easy CSS Recipes to Copy and Paste By now you’ve probably seen enough lengthy CSS3 tutorials to last a lifetime. You’re probably starting to become familiar with what CSS3 has to offer and are ready to move past basic theory and see some practical design examples that you can copy and paste right into your code without without wading through tons of commentary. Well you’re in luck because that’s exactly what we have for you today! Below you’ll find seven fun and attractive CSS tricks that you can grab and insert right into your own projects and customize at will. Keep in mind that since this stuff is still cutting edge, older browsers won’t support most of it. Letterpress Insetting text is fairly simple in CSS. To start off, fill your text with the darker shade of your background color. The HTML <body><div id="container"><p>pressed</p></div></body> The CSS Small Caps I also used the “uppercase” text-trasform just for fun. CSS Coupon Stitched Gloss Stroked Text & @font-face
WordPress Themes, WordPress Templates, Joomla, Website Templates - TemplateSOLD.com CSS Font-Size: em vs. px vs. pt vs. percent / Kyle Schaeffer One of the most confusing aspects of CSS styling is the application of the font-size attribute for text scaling. In CSS, you’re given four different units by which you can measure the size of text as it’s displayed in the web browser. Which of these four units is best suited for the web? It’s a question that’s spawned a diverse variety of debate and criticism. Meet the Units “Ems” (em): The “em” is a scalable unit that is used in web document media. So, What’s the Difference? It’s easy to understand the difference between font-size units when you see them in action. As you can see, both the em and percent units get larger as the base font-size increases, but pixels and points do not. Em vs. We’ve decided that point and pixel units are not necessarily best suited for web documents, which leaves us with the em and percent units. When the client’s browser text size is set to “medium,” there is no difference between ems and percent. The Verdict The winner: percent (%). Addendum (January 2011)
CSS Design Yorkshire - Gallery of CSS Websites Differences Between CSS2.1 and CSS3+ Most of us know that with the introduction of what we customarily call “CSS3″1, there have been changes and additions to CSS, compared to what we had in CSS2.1. Putting all cross-browser issues aside, I thought it would be nice to be able to document all these changes into a single post and keep it up to date. So if you want a list of everything that’s been introduced into the CSS spec since CSS2.1, here it is. New Properties Following is a list of CSS properties that were not defined in the CSS2.1 specification. New Values Properties from CSS2.1 have new values added to them in CSS3. New Selectors Following is a list of selectors introduced in CSS3. Other Miscallaneous New Features Other new features not part of CSS2.1 include: @font-faceMedia QueriesKeyframe animations using @keyframesConditional styles using @supportsNamespacing using @namespaceRegionsFilters Features Still in Flux The lists above aren't exhaustive. Summary Notes 1.
CSS Gallery Web Design Gallery For Inspiration untitled Disclaimer: "PMI®", "PMBOK®", "PMP®", "PMI-RMP®", "CAPM®" and "PMI-ACP®" are registered marks of the Project Management Institute, Inc. The Swirl logoTM is a trade mark of AXELOS Limited. ITIL® is a registered trade mark of AXELOS Limited. PRINCE2® is a Registered Trade Mark of AXELOS Limited. MSP® is a Registered Trade Mark of AXELOS Limited Certified ScrumMaster® (CSM) and Certified Scrum Trainer® (CST) are registered trade marks of SCRUM ALLIANCE® The APMG-International Finance for Non-Financial Managers and Swirl Device logo is a trade mark of The APM Group Limited. The Open Group®, TOGAF® are trademarks of The Open Group IIBA®, the IIBA® logo, BABOK® and Business Analysis Body of Knowledge® are registered trademarks owned by International Institute of Business Analysis. CBAP® is a registered certification mark owned by International Institute of Business Analysis. COBIT® is a trademark of ISACA® registered in the United States and other countries.
Top 100 CSS Designs of 2007 From big budget to small budget, intense to simplistic, this is one monster of a top 100 compilation! Take a moment to enjoy this year's best designs the world has to offer. Each site is rated in order of uniqueness, visual quality, and overall presentation. The arduous process of identifying the top 100 designs of 2007 was simple: find the best, new designs (including redesigns) of 2007 and rate them in order from 100 to one. Some designs are just stunning. Enjoy the Top 100 CSS Designs of 2007 below: And so this ends the top 100. So long 2007 it was a great year in design.
Creating an image map from SVG | David Lynch I was asked how I made the map in my examples earlier. I wrote a small script to do it. (The script is quite limited – I only made it complete enough to handle the SVG files I was using. Others might break it. Also, it requires pyparsing… and hoo-boy is that slow.) Example! Wikipedia is good for this, and has provided me with the example file I’ll use, a map of the USA. My example file is filled with all sort of crud that isn’t a definition of state boundaries, though, so I need to get just that. So I run my script: svg2imagemap.py Map_of_USA_with_state_names.svg 960 593 States (The “960 593” is the size of the image I’m creating from the SVG file.) This creates an html file named [svg name].html, so Map_of_USA_with_state_names.html. And we get: A map of the USA. Just to disclaim again: That script is unlikely to be immediately useful for any particular SVG image. One last time: I make no guarantee of this script working on an arbitrary SVG file.