Thanks to text shadows, outlines, transitions, and even text gradients, we can now create cool typography that you’d swear had to be made with a program like Photoshop. Nope, all CSS3 baby! Let’s take a look in this video quick tip.
We’ve all had to achieve some effect that required an extra handful of divs or PNGs. We shouldn’t be limited to these old techniques when there’s a new age coming. This new age includes the use of CSS3. In today’s tutorial, I’ll show you eleven different time-consuming effects that can be achieved quite easily with CSS3.
Creating Dynamic Buttons With CSS3
Creating buttons with CSS becomes a lot more comfortable. The following example demonstrates how to create nice looking, dynamic buttons that are fully scaleable using the new CSS3 properties border-radius, box-shadow and RGBa.
When Tim and I were discussing the redesign of this site last year, one of the clear goals was to have a graphical style without making the pages heavy with a lot of images. When we launched, a lot of people were surprised that the design wasn’t built with PNGs. Instead we’d used RGBA colour values, which is part of the CSS3 specification.
Last week I launched a holding page for Ecliptic Labs, an iPhone development company based in Belfast (keep an eye on them, there’s going to be some great stuff from them this year).
This demonstration works in Firefox, Safari and Google Chrome and shows how to style buttons using just border radius, drop shadows and gradient fills. No graphics have been used in this demo and no extra markup. If you wanted to be adventurous you could also add a hover state change of gradient fill to give an illumination effect. When Opera support transitions I will add this to the demo, and when IE9 is released we will see if that too will support any CSS3 styles.
CSS is a well-known, widely used language to style websites. With version three in the works, many time-saving features will be implemented. Although only the most modern browsers currently support these effects, it’s still fun to see what’s around the corner! In this tutorial I’ll show you five techniques.
This is my third article on CSS3 No Image Aqua Buttons. The previous articles include:
1. CSS3 Gradients: No Image Aqua Button
2. CSS3 Aqua Button – Revisited for Firefox 3.6
3. And this one – Read on!
We love CSS at ZURB. We love it so much that we’re using the new, yet-to-be released version (CSS3) in some of our projects. In the works for nearly 10 years now, CSS3 is finally starting to see the light at the end of the tunnel as new browsers like Firefox and Safari continue to push its implementation.
Progressive Enhancement with CSS 3: A better experience for modern browsers
I’ve come across quite a few sites that explain how to create flexible CSS3 buttons but i’ve never really spent the time to implement one until i found a great little write up courtesy of the guys over at the Zurb blog who have a fantastic post on creating CSS3 buttons. So i’ve taken their example and tweaked it to fit my needs. It’s worth noting that if your using Internet explorer you’re not going to see all these effects as IE still doesn’t support CSS3. Compatible CSS3 browsers are, Safari, Chrome and FireFox 3+.
Welcome to the CSS3 Gradient Generator! Please be aware that in order to make the most use of this utility you will need either a webkit browser such as Safari or Google Chrome, or the Firefox 3.6 beta. Currently Internet Explorer does not support CSS based gradients. This tool is updated whenever implementation methods are changed.
I’m going to show you how CSS 3 transforms and WebKit transitions can add zing to the way you present images on your site.
The trick with these overlays is the gradient border, going form a lighter to darker orange as you go from top to bottom. To create that effect we used to the border-image property, which is a tricky little addition to CSS
These examples came about when experimenting with the extend property in MooTools. By extending the styles class I could add CSS3 properties into the Core MooTools framework and do CSS3 animations.
A Look at Some of the New Selectors Introduced in CSS3
Everyone who has been using CSS is immediately familiar with selectors as they are what is used to target elements on a page and style them. CSS3 brings even more options as far as selecting elements goes. It will allow designers and developers to implement designs much easier and quicker than before.
Although I don’t understand why animations have been added in CSS3, this upcoming standard does have a couple of very neat features added to the CSS we’re using today. I wanted to take a couple of these new things, and create a Sweet tabbed navigation using CSS3
Just last week we released an extensive printable HTML 5 Cheat Sheet that lists all currently supported HTML 5 tags, their descriptions, their attributes and their support in HTML 4. In comments to this post we received many requests for a similar CSS 3 cheat sheet that would present the main features of CSS 3 in a handy, printable reference card.
Designing UI elements for a mobile browser has taught me a great deal when it comes to creating interactive graphical elements that are to be used in a very small space.Â Of course, when I say small space, I mean a small space that has the potential to be different for each handset out there.Â Not only are we talking resolution differences, but the screen DPI can change from device to device as well.
This custom dialog box is one of the scripts in that website and I think it will be quite useful for all of us. The reason I have this custom dialog box is to overcome the inconsistencies across different browsers. It uses CSS3 to style everything and it looks really nice!
The border-radius page in our CSS3 Preview section has been updated to reflect the latest version of the Backgrounds & Borders specification and the latest browser support. The page now offers a more comprehensive and easy to follow guide/tutorial, including cross-browser examples, which should enable any designer (whether novice or expert) to get to grips with border-radius in a matter of minutes
In September and October of 2005 I published a series of articles that explained the selectors that are available in CSS 2.1. A quick summary is that most of the selectors described in those articles can be used now in modern browsers like Mozilla/Firefox, Safari, and Opera.
So I was looking at all the nice things the WebKit folks did, and one particular feature really got his way into my thoughts, and I was playing with possible usecases for weeks.. I’m talking about the CSS transforms.
While I was coding the Notepad theme, I’ve learned some new CSS3 features and now I would like to share it with you. View the demo to see a Mac-like multi-level dropdown menu that I’ve created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered.
More and more we see people using horizontal sliding panels on their websites. And they usually look very nice! Some will put a contact or login form in there, others will put some information about them and their website, or even things like a tag cloud or social networking buttons.
Webkit is one of the few – if only – browser engines that really embraces advanced CSS3 effects. Unfortunately, this presents somewhat of a double-edged sword. We get to play with all of these amazing effects – such as CSS masks, reflections, transitions, animations, scaling, etc. – yet, we can’t truly implement them into our projects until more browsers provide support. With all of that said, it’s important to be on the cutting edge of what’s possible.
A beautiful country that my girlfriend and me visited last year during our summer holiday. While we were there, we took a lot of pictures that would look pretty nice on polaroid. Placing them on simple polaroids on a webpage simply didn’t do it for me. I wanted to drag them around, rotate them and still have a fun time. That’s were
CSS and jQuery come in play. By combining the CSS3 Box Shadow and Rotate properties, this effect is relatively easy to create. When dragging a polaroid around, you’ll see the shadow. When it’s placed down, it’s rotated to the left or the right (random).
In this last period on PV.M Garage we have described many trends of the modern Web Design and many techniques for creating stunning and impressive web sites. In one of our tutorials we learned how to realize a nice 3D ribbon and how to play with the drop shadow in Photoshop to simulate depth in a web design layout.
Letterpress effect looks good in modern websites, letterpress effect can be gain using Photoshop and also using text-shadow property of CSS. So here today we will learn how to achieve Letterpress effect with photoshop and also with Css and in the end of this tutorials we have also collected some tutorials on Letterpress around design community
Magical things can be done by combining various CSS properties, especially when some of the new CSS3 tricks are thrown into the mix. Let’s take a look at building a cool looking stack of Polaroid photos with pure CSS styling.
We build a pretty typical image gallery design pattern, a grid of images that pop up larger when clicked. But this image gallery page makes use of hot semantic HTML5 markup, loads of visual treats with CSS3 and jQuery, and made editable through the CMS PageLime. Quick reminder, the demo is awesome-est in a WebKit browser (Safari or Chrome).
Organizing the content of a page in a both intuitive and eye-catching manner, is a must in modern web design. One principle that has been around for some time is dividing text into tabs. This allows you to squeeze much more content in a seemingly limited space and provide a structured way of accessing it.
Today we are making an AJAX-powered tab page with CSS3 and the newly released version 1.4 of jQuery, so be sure to download the zip archive from the button above and continue with step one.
A few years back, rounded corners became one of the signature design elements of the Web 2.0 trend. Even though they started as a fad, rounded corners are more than simple eye candy. They also have a role in separating or grouping the sections of a page. As CSS3 gets closer to becoming the new standard for mainstream design, the days of rounded corners through elaborate background images is fading. This means less headache and time spent working out alternatives for each browser.
There isn’t a lot of information to be found about the :not() selector. The specifications only offer 3 lines of text and a couple of examples. So lets see what it can do!