Tools : Spanky Corners -- The SitePoint Corners Store Generator To use the generator select your preferred foreground color (hex), background color (hex), corner radius (pixels: 5-60) and hit 'Spank Me!'. The generator will reload 'wearing' your selection while providing you 4 corner GIFs, the basic CSS and the HTML to obtain the effect. Or if you're lazy, try these preset values. Spanky Corners What? 'Spanky Corners' is an experimental technique for using only CSS to produce 'round-cornered content boxes' with semantically pure markup. Why? SpankyCorners has a number of advantages over alternative rounded corners methods. Spanky requires no extra HTML markup to act as 'CSS hooks'. News We're always happy to hear any feedback/suggestions for Spanky via this blog entry. Update: 8 May, 2006: Fixed a Firefox 1.0 render bug which was making the site look wacky. Update: 3 May, 2006: Solved the IE6 scaling problem. Update: 28 April, 2006: A few changes. Update: 15 April, 2006: Updated the way the images are generated and the code algorithms.
Listutorial: Tutorial 3 - Nested lists Tutorial 3 - Nested lists - all steps combined There may be times when you want to open a side navigation list out, to show subsections within a section. The most semantically correct way to achieve this is by using nested lists. HTML CODE <div id="navcontainer"> <ul> <li><a href="#">Milk</a> <ul> <li><a href="#">Goat</a></li> <li><a href="#">Cow</a></li> </ul> </li> <li><a href="#">Eggs</a> <ul> <li><a href="#">Free-range</a></li> <li><a href="#">Other</a></li> </ul> </li> <li><a href="#">Cheese</a> <ul> <li><a href="#">Smelly</a></li> <li><a href="#">Extra smelly</a></li> </ul> </li> </ul> </div> Step 1 - Make a nested list Start with a basic unordered list. Step 2 - Remove the bullets To remove the HTML list bullets, set the "list-style-type" to "none". Step 3 - Remove padding and margins Standard HTML lists have a certain amount of left-indentation. To remove this left-indentation consistently across all browsers, set both padding and margins to "0" for the "UL". margin: 0; padding: 0;
Nifty Corners Update This is the original article. The technique has been improved with better browser support and a lot of new features. Rounded Corners with CSS are a hot topic in web design: I think that there are hundreds of articles on them. Stripe it to get it rounded The basic idea of Nifty Corners is to get some coulored lines to get the rounded effect. And here's it the basic CSS: You can see the final effect on this simple example. The technique works even on floated, absolute positioned or percentage-width elements. Known bugs are: text-indent won't work on the element that has been rounded in Opera, and IE (both Mac & version 6 PC) would mess up on floated elements without specific width. The support should be extended to all modern browsers: the technique has been tested with success in Internet Explorer 6, Opera 7.6, FireFox 1.0, Safari 1.1 Mac IE. Easy, isn't it? Looking forward with DOM In the example we saw how to get rounded corners without images, sparing about 6-8Kb of page weight.
Free HTML and MySpace Code Generators CSS Design: Creating Custom Corners & Borders We’ve all heard the rap: Article Continues Below “Sites designed with CSS tend to be boxy and hard-edged. Where are the rounded corners?” Answer: the rounded corners are right here. In this article, we’ll show how customized borders and corners can be applied to fully fluid and flexible layouts with dynamic content, using sound and semantically logical markup. The markup#section2 In the example markup below, XHTML line breaks have been inserted to pad out dummy paragraphs: <h2>Article header</h2><p> A few paragraphs of article text. If we examine the markup, we’ll see that we have given ourselves at least five hooks, which is all we need to place customized graphics in each of the four corners (and left side) of our article. See Step 1 — primary markup. The design#section3 First let’s decide on some basic layout parameters. “I want the borders and corners to look something like this,” he said. “Could you leave that open, or make it so that it’s easy to change?” The process#section4
22 Handy HTML5 & CSS3 Tools, Resources And Guides HTML5 and CSS3 are bringing new features to us and in this article you’ll be able to find some great tools, cheat sheets and much more you could need to master these new features. Maybe those new features aren’t yet supported fully, but it’s a very good thinking to learn new technologies now so you would be able to use them fully when they are supported. Be modern designer! 1. After starting the testsuite it will automatically run a large number of small tests which will determine if your browser is compatible with a large number of CSS selectors. 2. CSS3 Please! 3. Allows you to create and costumize multiple CSS3 effects. 4. You can rotate, scale, skew, and otherwise transform HTML elements with CSS 3. 5. The CSS3 Gradient Generator was created as showcase of the power of CSS based gradients as well as a tool for developers and designers to generate a gradient in CSS. 6. Allows you to create rounded edge rectangles. 7. 8. 9. Many new CSS3 feature previews and demos. 10. 12. 13. 14. 15. 16.
10 Web Usability Tips - Just Fun 1. Motivate: Design your site to meet specific user needs and goals. Use motivators to draw different user "personae" into specific parts of your site. 2. 3. 4. 5. 6. 7. 8. 9. 10. The HTML5 Time Element Is Back and Better Than Ever The HTML5 time element pulled a disappearing act last year. HTML5 editor Ian Hickson deleted it from the specification, but then the W3C, the group that oversees HTML5, stepped in to override Hickson’s decision, adding time back to HTML5. Now you see it, now you don’t, now you do again. The W3C didn’t just add time back though; they’ve improved it considerably. While nothing has changed with the human-readable part — that is, anything between <time> and </time> — the datetime attribute has been imbued with new superpowers. The original version of the time element was rather strict; under the original spec datetime data needed to refer to a specific date. That’s all good and well for days, but what if you just wanted to specify a month? To specify a date no more precise than a month you’d do something like this: <time datetime="2012-02">. To see some more examples of the datetime attribute and what you can do with it, head over to Bruce Lawson’s blog.
Alertbox: Jakob Nielsen's Newsletter on Web Usability 10 Usability Heuristics for User Interface Design April 24, 1994 | Article: 2 minutes to readJakob Nielsen's 10 general principles for interaction design. They are called "heuristics" because they are broad rules of thumb and not specific usability guidelines. When to Use Which User-Experience Research Methods October 12, 2014 | Article: 8 minutes to readModern day UX research methods answer a wide range of questions. Cheap HTML5 web design templates Usability on the Web Usable Web sites are sites that work for your readers. A usable Web site encourages repeat visits. Find out what makes a usable Web site, and how to improve your own site. Learn how to do usability tests and create sites that your readers want to return to. What are Design PatternsDesign patterns are a useful tool to make sure that your site elements work as they are supposed to work. Why Use Design PatternsOnce you start understanding how useful design patterns are it can be tempting to use them for everything. usabilityDefinition of the term usability as it relates to Web design and development What is Graceful Degradation and Why Should Web Designers Care? The Back Button - How People Use Web SitesThe back button is the most important button on a Web page, and it's not even part of the page itself, but the browser. Link Names Should Match the Page They Link To - Links and UsabilityWhen you click on a link, you want to know where you're going. Is Your Site Cool?
yeoman.io Usability & user research articles Dear camera manufacturers, I’ve been one of your loyal customers. I’ve had a Canon SLR camera for more than 15 years, and played around with all sorts of cameras since I was 2 years old. But today I find myself less and less inclined to take my camera out for a spin, and that’s not for a lack of inspiration. You’re probably already aware that people haven’t stopped taking photos — they just use their smartphones to do so. According to some sources, shipments of standalone digital cameras almost halved in 2013. I don’t want this to continue. Fix your chargers In a recent trip, I had a bag stolen with my camera charger inside. So I bought this one instead: Yes, it’s a made-in-who-knows-where knockoff. While we’re at it, why don’t all cameras support charging via USB (since they tend to have a USB port anyway)? Make disposable cameras “Disposable cameras?” Let me explain: I love my iPhone camera and the millions of interesting things I can do with it, shooting time-lapse videos for example. Alex
5 More HTML5 APIs You Didn’t Know Existed The HTML5 revolution has provided us some awesome JavaScript and HTML APIs. Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers. Regardless of API strength or purpose, anything to help us better do our job is a step in the right direction. I recently shared with you 5 HTML5 APIs You Didn’t Know Existed in the hope that some of them would inspire you to improve your own web apps. I'd like to share with you 5 more lessor known HTML5 APIs -- hopefully you find some of them useful! Fullscreen API The awesome Fullscreen API allows developers to programmatically launch the browser into fullscreen mode, pending user approval: Any element can be pushed to fullscreen, and there's even a CSS pseudo-class to allow some control over the screen while in fullscreen mode. Page Visibility API var hidden, state, visibilityChange; if (typeof document.hidden ! getUserMedia API Battery API Link Prefetching There's five more HTML5 APIs to research and tinker with.