Our Solar System — An experiment with CSS3 border-radius, transforms & animations. Pure CSS Progress Bar. Demo: CSS3 Buttons. CSS3 Gradient Buttons. Last week I talked about Cross-Browser CSS Gradient. Today I'm going to show you how to put the CSS gradient feature in a good practical use. Check out my demo to see a set of gradient buttons that I have created with just CSS (no image or Javascript). The buttons are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values. The best part about this method is it can be applied to any HTML element such as div, span, p, a, button, input, etc.
What Is So Cool About These Buttons? Pure CSS: no image or Javascript is used. Preview The image below shows how the button will display in different browsers. Button States normal state = gradient with border and shadow styles. hover = darker gradient active = gradient is reversed, 1px down, and darker font color as well. General Styles For The Button The following code is the general styles for the .button class. Color Gradient Styles The code below is the CSS styling for the orange button.
Snazzy Hover Effects Using CSS. With all these CSS3 effects and tutorials popping up every day that show all the new and wonderful things we can make happen, we sometimes forget about poor little old CSS2.1 and the great potential it still has. With very good browser support, we can do lots of cool things that we know will work in all major browsers. In this tutorial, I will be going over creating flexible advanced hover techniques using CSS2.1 properties. Here is a live demonstration of the effect we will be creating.
Advanced hover states are quite simple When I first started learning CSS, the :hover pseudo-element was no more than a way to remove the underline on a text link. Since then, through experimentation, I have learnt that it is so much more powerful and it can create some really cool effects when used in conjunction with other CSS properties. The astute reader will see that this technique has great potential outside of what we discuss here, such as showing CSS tool tips when hovering over a hyperlink. <! Wrap up. Générateurs de CSS3 pour tous les navigateurs (ou presque) CSS3 Please! The Cross-Browser CSS3 Rule Generator. Cross-Browser CSS Gradient. The CSS gradient feature was introduced by Webkit for about two years but was rarely used due to incompatibility with most browers.
But now with the Firefox 3.6+, which supports gradient, we can style create gradient without having to create an image. This post will show you how to code for the CSS gradient to be supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome. Also, check out my updated dropdown menu (demo) using CSS gradient. For Webkit Browsers The following line of code is for webkit browsers such as Safari, Chrome, etc.
It will display a linear gradient from top (#ccc) to bottom (#000). background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); For Firefox 3.6+ background: -moz-linear-gradient(top, #ccc, #000); For Internet Explorer The following filter wlil only be read by IE: filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); Cross-Browser CSS Gradient (demo) CSS Gradient Dropdown Menu. Word-Wrap: Force Text to Wrap. Today I'm going to talk about a rarely used but extremely useful CSS property, the word-wrap. You can force long (unbroken) text to wrap in a new line by specifying break-word with the word-wrap property.
For example, you can use it to prevent text extending out the box and breaking the layout. This commonly happens when you have a long URL in the sidebar or comment list. Word-wrap is supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari. CSS: Word-Wrap Property (view demo) You can specify either normal or break-word value with the word-wrap property. Le petit journal du web #3 — Spécial CSS3 (et miscellanées) CSS3 Please : un générateur de CSS3. Des bulles de dialogue en CSS3 sans image. You Can Use CSS3 Right Now.