10 Best Tutorials To Learn CSS3. MockFlow: Free online Wireframe Tool (with OfflineSync) for Software and Websites. When can I use... Making a Giveaway Randomizer App w/ jQuery. Martin Angelov The first Tutorialzine giveaway has finished! Now is the time to draw the winners.
But, as this is a web development blog, we cannot just run an ORDER BY RAND() MySQL query in phpMyAdmin. Even more, three different sets of prizes must be awarded. The app is divided in three steps – in step one you provide a list of the contestants’ name and email, divided by a comma (each contestant on a separate line). The HTML As usual, we start with the HTML markup and the new doctype.
Randomizer.html <! As you will see in a moment, we are applying a number of styles to the body element and use it as a regular block container. As you will see in the next section of the tutorial, we are making the body three times wider than the browser window, and each section div is exactly 33.333% of its width. Lastly we include the jQuery library, our script.js file, and another one – md5.js.
Fill in CSV formatted data The CSS The next step in building the app, is laying down the CSS. Styles.css – Part 1. Sexybuttons. Sexy Buttons is a HTML/CSS-based framework for creating beautiful web site buttons. These stylish, attention getting buttons can be used for calls to action wherever user interaction is desired. Compare Sexy Buttons with the standard browser buttons: The framework is focused on being simple yet flexible and strives to be as easy to implement as possible. Button Features The underlying HTML can use either <button> or <a> elements.
Demo Demo and Quick Start Guide (English) 快速上手指南及示范 (Chinese) Browser Support Sexy Buttons has been tested and is supported in the following browsers: Mozilla Firefox 3.5+ Internet Explorer 6+ Safari 4 Google Chrome Opera 10 Only those browsers and versions that have been tested are included above. Support the Project Do you really like Sexy Buttons? Credits Sexy Buttons was inspired and derived from the excellent work done by these fine folks:
CSS performance: UI with fewer images. 2010 update: Lo, the Web Performance Advent Calendar hath moved Dec 23 This post is the one-before-last article in the 2009 performance advent calendar experiment. Often performance improvements come with their drawbacks, sometimes improving performance causes pains in other parts of the development process or strips stuff from the final product. Sometimes there's even a conflict where you have to pick: slow, unusable and beautiful or fast and looking like hacked with a blunt axe. But it doesn't have to be this way. This post outlines some approaches to achieving common UI elements using CSS tricks in as many browsers as possible while using as fewer images as possible. Sometimes some browsers may not be fully supported but that's ok - as long as there's progressive enhancement and the basic page is usable, people rarely notice 1px glows and other ornaments.
So let's get started. Rounded corners Yep, let's tackle the biggie. So starting with a normal module - head, body and border: Result: