Group items matching

in title, tags, annotations or url

"What once required background images and icons can now be created with plain-old CSS. Because modern browsers have access to things like box shadow, gradients, rounded corners, text-shadows, and font-face, we can finally take advantage of this and remove any need for images, when creating visual elements, such as buttons! I'll show you how in today's video tutorial. "

A nice video-tutorial in CSS3 Buttons, yum yum...

As a web community, we've made a lot of exciting progress in regards to CSS3. We've put properties like text-shadow & border-radius to good use while stepping into @font-face (not a CSS3-property) and visual effects like transitions and animations. We've also spent a great deal of time debating how and when to implement these properties. Just because a property isn't widely supported by browsers or fully documented at the moment, it doesn't mean that we shouldn't be working with it. In fact, I'd argue the opposite.

"http://css3generator.com/ » The drop-down list says "Choose Something". Choices include: shadows, transitions, even transform and @font-face! It has an option for border-radius, but if that's the only thing you need, there's the quick and dirty: http://border-radius.com/ » Super simple, uber-easy-to-use, just does border-radius. What more can I say? http://www.colorzilla.com/gradient-editor/ » Sleek, Photoshop-like gradient editor that spits out cross-browser CSS. Fancy - with live preview and the like. Resist the urge to add gradients to everything you do. http://www.cssbuttongenerator.com/ » Comes with some nice default palettes, but fully customizable with your own color values. Sleek color-picker and sliders to make it how you want it, plus a link to a more advanced button generator. I've definitely been making more buttons since this baby came online :)"

"Method 3: Box Shadow As mentioned, the idea for this experiment was the result of serendipitous fiddling with box-shadow settings. I personally like this one the best, because it's just one line of code, and it uses a new technology in an unexpected way."

create your own website for free without having coding knowledge by using css3 gradient generator all Text, box, radius, shadow and Icons etc

With the latest advancements in CSS, we now have access to powerful styling techniques, including box shadows, rounded corners, background gradients, etc. However, we don't currently have the ability to apply gradients to the text itself. Luckily, with a bit of trickery, we can force this effect - at least in webkit browsers! I'll show you how in today's video quick tip.

One of the very interesting techniques in creating buttons with CSS is by Johnny Simpson . His creation is these sleek pressure style buttons that you may find useful in your site. He mainly used multiple box shadows to add depth instead of gradients because it has more solid ground when it comes to support. They work well on the latest versions of all major browsers.

The tabs in this demo are image-less tabs with 4 different CSS3 enhancements: Rounded Corners (border-radius) Box Shadow (bottom of inactive tabs) Transitions (the glow on hover) Gradients (the active tab)

Rounded corners, gradients and drop shadows are well known features of CSS3, but beyond these there lie CSS transitions, transforms and animations. In combination they create effects never before achievable. CSS 3D transforms are smooth, hardware accelerated and simple to implement, with browsers taking on what would be very difficult perspective calculations.

Denise Jacobs reveals her top tips on how to use the most exciting CSS3 properties - and provide fallbacks for older browsers

The Crunchie Corner Lab is a simple tool that allows you to see how a variety of different borders, colors, shadows and radius values affect the display of your fancy CSS3 rounded corners. Just change the field values below to start experimenting.