How to Style HTML5 Range Slider for Consistent Cross-Browser Appearance
The range input type is a new addition in HTML5, allowing users to input numbers within a specified range using a slider control. This intuitive user …
Latest in: HTML5 / CSS3 Tutorials
Creating Animated Tooltip Easily with Hint.css
Tooltip is a great way to display extra information on a website without taking extra space. The tooltip generally appears upon mouse hover, and there…
Easily Creating a Modal Window with the HTML5 Dialog Tag
The modal window, a ubiquitous interface element across websites, often houses subscription forms, upload interfaces (like those seen in WordPress), n…
A Look Into: HTML5 Download Attribute
Creating a download link is usually an easy task. All we need to do is use an anchor tag <a>, and add the reference URL pointing to the file. Bu…
How to Use CSS3 Page Breaks to Organize Printed Web Pages
While we live in a digital era where most content is easily accessible online, many people still prefer reading long-form text on paper. It’s possib…
How to Edit CSS Dotted Outline
By default, when an anchor tag element is in active or focus state, a dotted line appears around it, as shown in the image below. This outline is used…
How to Get User Location with HTML5 Geolocation API
In many cases, obtaining user location would be extremely useful to establish better user experience, for example: E-commerce sites can immediately pr…
How to Retrieve and Display Battery Status with HTML5
Apart from introducing new elements, the people behind the web standard, W3C, also introduced a set of JavaScript APIs that allow developers to commun…
Web Design: Hide / Show Notification Bar With CSS3
Inspired by a comment from one of our readers on our previous post (CSS3 Bounce Effect), we are going to show you how to create a notification bar wit…
How to Wrap Content in Custom Shapes with CSS3
Print media, compared to web media, offers greater flexibility in content layout and display. However, replicating those intricate shape frames used i…
How to Enhance Text Flow with CSS3 Hyphenation
Hyphenation becomes essential when dealing with narrow page or column widths that cannot fully accommodate lines of text. It helps achieve even paragr…
Optimizing UI Design: How to Apply CSS Based on Screen Orientation
Thanks to CSS3 Media Queries, we can now easily adjust and apply CSS styles depending on the size of the device’s screen or viewport. This article e…