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;
Downloads - Marcofolio.net 2Icons Icon packs that are created by Marcofolio.net can be found here. 43Webdesign Scripts and plug-ins for your website. Don't forget to read the full article on how to implement these correctly and on how to customize them. 25Joomla Templates, modules, components and plug-ins for my personal favorite CMS Joomla! Download the CSS code to implement on your website. 20Photoshop Download the PSD source files from my tutorials or projects. 3Games Take a break and play some games. 0Cheat Sheets Use and print these cheat sheets for quick references. 7Source Programming source files. 2Other All other downloads that are not placed in the categories above are listed here.
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 3d animation using pure CSS3 Here's an example of pretty powerful CSS3 animation and 3d effects. Using the perspective, transform and transition properties, we can create a 3d animation effect. Simply hover over the movie posters below to see the effect in it's full glory. Just make sure you're running the latest version of a -webkit based browser (Apple Safari or Google Chrome) to see the effect. Iron Man 2With the world now aware of his dual life as the armored superhero Iron Man, billionaire inventor Tony...More info The Last AirbenderThe story follows the adventures of Aang, a young successor to a long line of Avatars, who must put his...More info Tron LegacySam Flynn, the tech-savvy 27-year-old son of Kevin Flynn, looks into his father's disappearance and finds...More info
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.
SlickMap CSS: A Visual Sitemapping Tool for Web Developers — Astuteo Side Projects SlickMap CSS is a simple stylesheet for displaying finished site maps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences. The general idea of SlickMap CSS is to streamline the web design process by automating the illustration of site maps while at the same time allowing for the pre-development of functional HTML navigation. Eliminates the need for additional software Easily revised with clients on-the-fly Clickable anchors with visible URLs Design process results in working HTML code SlickMap CSS was created by Matt Everson of Astuteo – that’s me – and it’s entirely free for you to download and use, modify for your own applications, or otherwise make millions off of.
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.
CSS Menu Generator HTML Tools » CSS Menu Generator Our CSS Menu Generator will generate both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons. As text links are fast becoming preferred over images where search engine optimization is needed, a CSS menu can give the affectiveness of text links with a better look than standard text links. We currently have 3 different styles of menu available to generate, so for this first step, please choose the style you prefer by clicking on the appropriate radio button below then clicking the 'Proceed' button. Disclaimer: By using any of the free webmaster tools on this site you agree that it is you who has sole responsibility and liability for any errors that may occur to your website or web server as a result.
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