Viewers Choice

0% Reload HTML5 introduced the progress bar element, which allows us to show the progress of certain tasks, like uploads or downloads, basically anything that is in progress Basic Usage The progress bar can be added with <progress> ; the progress value is determined with the value, min and max attributes, as follows. <progress value="40" max="100"></progress> Since this is a native progress bar, the presentation is vary dependent on the platform. Below is how a native progress bar looks in Windows and OSX. Now, let's try styling this progress bar, so it has a consistent or similar look across all platform. Styling Progress Bar In the stylesheet, we actually can use the element selector to target and add style rules to <progress> element. In this example, we change the background color, remove the border line, and make it rounded by adding a border radius at half of its height. progr...

CSS3 is rapidly expanding the toolkit that web developers and designers have to make visually appealing components without the use of images, Photoshop, or CSS sprites. While all of those have their place, and will never be completely removed from the development process, buttons are one component of a website that we can make dynamic, slick and scalable – exclusively in code. All of the CSS3 buttons that we create today will be styled forms of anchor tags. Some like to use button elements for these, but I find it’s easiest to use anchor tags so you can easily add the :hover and :active pseudo classes and quickly add href to it to complete the button. What We're Creating For this tutorial, we’ll be creating several different CSS3 buttons, all of which can have different colors, shadows, sizes – all using pure CSS3. We will be using the following properties: border-radius , linear-gradient , box-shadow , text-shadow and opacity . you might want to change some of these ...

I was recently visiting MooTools Developer Christoph Pojer’s website and noticed a sexy link hover effect: when you hover the link, the the link animates and tilts to the left or the right. To enhance the effect, the background color of the link is changed. I scoped out his JavaScript file to see how he created the effect but there were no link effects in it — the effects were being created with just CSS! .sexy-links a { display: inline-block; padding: 4px; outline: 0; color: #3a599d; -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; -o-transition-duration: 0.25s; transition-duration: 0.25s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; -webkit-transform: scale(1) rotate(0); -moz-transform: scale(1) rotate(0); -o-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } .sexy-links a:hover { background: #3a59...