box Search is one of the most important part of any website. Here, I will show a few practical techniques for designing search forms and a few tricks to build usable and good-looking search functionality. Smashing Magazine did an excellent piece on Search Boxes which inspired me to write this post. Let’s get started! Here, with the help of three simple examples, allow me to show how to code search boxes with HTML & CSS and how to spice things up with a bit of Javascript. The example initially designed for this tutorial was too difficult for most people, so I have decided to start you off with a simple example to start off with. Example 1 Techniques that are used here are: Inner shadow with CSS3 Uses an image as the button, along with rollover effects The Markup It is a simple form wrapped in a div. The CSS A few points you should note: The height and width of the button must match the size of the image. If you are not familiar with the CSS3 box-shadow property, you might find these helpful:
Inducing Style Scope with HTML5 Canvas using the State Stack Published on October 25th 2012 by Eric Rowell What happens if we're creating large, complex canvas applications, and we have lots of methods and functions that draw things onto the canvas which can be executed in any order? We certainly don't want styles from different parts of our code base leaking into other parts of the code base. When working with HTML5 Canvas, we're constantly interacting with the canvas context object, which contains an abundance of cool styling properties and drawing methods. For a typical block of code that draws something onto the canvas, we draw a path, set a handful of context properties to style whatever it is we're drawing, and then use methods like fill() and stroke() to actually draw things onto the canvas. But what happens if we're creating large, complex canvas applications, and we have lots of methods and functions that draw things onto the canvas which can be executed in any order? Live Demo and Editor new window <! So what can we do do? <! Success!
Create a Grid Based Web Design in HTML5 & CSS3 Follow this step by step walkthrough of the making of a sleek website design for an eyewear brand in HTML5 and CSS3. We’ll build the HTML structure with the latest elements then style up the appearance of the site with CSS3 affects to match the original Photoshop concept with minimal use of background images. The design we’ll be coding up is for a fictional eyewear brand named OPTIK. If you’re interested in seeing how the design concept was created in Photoshop, head over to Blog.SpoonGraphics so see part one of the tutorial. Essentially the page is based on an underlying grid and features a few key focal elements to direct the user towards the various ranges of eyewear. View the Photoshop design tutorial I know I mentioned we’d build the website with minimal background images, but there’s still a few graphics that need pulling out of the Photoshop concept that just can’t be recreated in HTML or CSS (…yet!). In the original concept we saved two versions of the range graphics. <! <!
How to Make Auto-Advancing Slideshows Martin Angelov One of the most requested improvements over the tutorials presented on this site, when it comes to slideshows, is the ability to have the slides advance automatically. It is actually not that difficult to achieve this effect, and to demonstrate it, in this short tutorial we are going to make our HTML5 Slideshow auto advance with a few lines of jQuery. The Idea As our slideshow already has a previous / next arrows, we can just have a JavaScript function execute periodically and “click” the next arrow for us. $('#nextArrow').bind('click',function(){ alert("Clicked!") The snippet above will fire all the handlers for the click event and output the alert message. Combined with the setTimeout() JavaScript function we have all the tools necessary to make our slideshow transition automatically between the slides. The Implementation Bearing the above in mind, here is the complete auto advance code. autoadvance.js To Wrap Up by Martin Angelov Tutorials jQuery
Create a Stylish Contact Form with HTML5 & CSS3 Follow this step by step process to create your own stylish contact form completely out of HTML5 and CSS3. We’ll be using a couple of the handy new features in HTML5 to add cool functionality to our form, while making use of cool CSS3 properties to recreate our Photoshop concept purely in code. The design we’ll be building features all the things that make a rich interface; gradients, highlights and shadows! We’ll create a visual concept in Photoshop first of all, but when it comes to building the form we’ll recreate every effect with HTML5 and CSS3. View the HTML5/CSS3 form demo Open up Photoshop and create a new document. Use Photoshop layer styles to add a subtle drop shadow at around 30% opacity and a thin 1px stroke using a very light grey. Add a title to the design using the darker blue colour swatch. Use the same font styling on each of the labels, then draw a rounded rectangle with 5px corner radius to create an input field. The visual concept is now complete. <!
HTML5 Canvas Web Developer Resources: A Mega-Compilation The Internet is constantly growing and there are hundreds of thousands of collective resources for upcoming web developers. From online articles, tutorials, tools, guides, to videos, you can learn just about anything over the Web. It has really never been easier to jump online! Below I’ve put together a huge collection of some very helpful web developer resources. These include beginner’s material for HTML5/CSS3 along with more complicated theories for JavaScript and PHP programming. It’s possible for a couple of enthusiastic developers to study these languages and build wildly popular, web applications similar to Twitter or Tumblr. Fresh Resources for Web Designers and Developers (May 2020) Fresh Resources for Web Designers and Developers (May 2020) If you're a web designer or developer and want to make the most of your spare time, take... Helpful Online Magazines The blogging world has exploded with hundreds of thousands of new writers taking to the Internet. jQuery Plugins Galore macOS
HTML5 & CSS3 – What You Should Know HTML5, in conjunction with CSS3, will be a major alteration of how web pages are built once it is fully implemented. HTML4 was originally released in 1999 after only two years of work. There have been some minor adaptations since then, but the full upgrade to HTML5 has been “in committee” since 2001. The predicted finalization date was, at one point, extended as far out as 2022. The recent conflicts over Flash and the iOS have emphasized the necessity of new standards for anyone working on mobile platforms. Although some features of the intricate system are not yet generally accepted across browser platforms, developers and designers are implementing them as quickly as it is practical. Because HTML5 is built on the HTML4 foundation, learning to use the new version will not require revising every facet of how your pages are built. The audiovisual support of HTML5 is not fully there yet, but it promises to be superior. Creating rounded corners is greatly simplified. Authored by Maria A
Literally Canvas Thu, 06/14/2012 How to create a cool and usable CSS3 search box – Red Team Design In this new article, you'll learn how create a cool and usable CSS3 search box using the HTML5 placeholder attribute. For the browsers that don’t support this new HTML5 attribute, a fallback is created using Modernizr's feature detection. View demo Structure The form element is used as the wrapper, while the two inputs are used as search field and search button respectively. The HTML code You may notice the placeholder attribute, but just ignore it for now, as we will talk later about it. The reason why there are so many id's (instead of CSS3 advanced selectors as input[type="text"] or input[type="submit"]) is because I wanted this to degrade gracefully for older browsers. Form wrapper styles Below you can see the current result: Inputs styles Quick tip: When adding float: left to an element, there's no need to add also display: block. HTML5 placeholder attribute This new HTML5 attribute shows a text in a field as long as the field is empty and not focused, then hides the text. Browser support:
CSS3 tooltips – Red Team Design If your icon or button has insufficient text or none at all, or it just needs some additional explanation, then you surely need a CSS3 tooltip for it. Why’s that? Because, as they have proved till now, they can help you improve your website usability. Having said that, in this article you’ll learn how to create your own CSS3 tooltips: no images, no javascript. View demo “Do I really need them?” The HTML title attribute is the default additional info you can use. How it’s made The method might be familiar to you, a relative positioned element who wraps an absolute positioned one. Below you can see the proper structure, note the two pointers (made using :before and :after pseudo-elements ) who overlap: How the “bordered” pointer is made Here are the **ingredients **that were used to create them: <a href="#" class="tooltip"> your text <span>Your custom description</span></a> Why an anchor? Just for compatibility reasons. Browser support