Currently, I’m just one in a huge crowd, a prospect who has seen so many “dribbbles” and who learned a lot of new techniques.
Today’s post is about… me. With your permission and hoping I’m not too selfish, I’d like to show you some of my latest CSS3 designs.
Drop shadows and inner shadows are some of the effects I learned to apply using Photoshop’s Blending options. But now, since CSS3 “hit the charts”, you don’t need Adobe’s design tool to add a drop shadow or an inner shadow to a box.
Nowadays, the cool thing is that you create beautiful CSS3 shadows without actually needing Photoshop anymore.
You may already know what a ribbon is and how it looks. Nowadays, the CSS ribbon effect is a web design trend. It’s cool and it can help you by adding a 3D effect to your design.
So, in this article you’ll learn how to create CSS ribbons, without any images and minimal HTML markup.
In my previous article,
border, ` border-radius
and box-shadow` properties were used to create a slick HTML5 search box. As you may know, when using all these together, a well-known Chrome bug is triggered.
Although this bug was fixed in the latest Chrome beta releases, below you’ll see the strange (may I call it like that?) or should I better say different behavior:
In this new article, you’ll learn how create a cool and usable CSS3 search box using the HTML5
placeholder attribute. For the browsers that don’t support this new HTML5 attribute, a fallback is created using Modernizr’s feature detection.
I made a page with the heart shape you can make with CSS3. Just some CSS3
text-shadow, a HTML heart character and voila:
This article contains a list with some free online tools I found very useful for my daily work. Even if you are a developer or a designer, these tools can realy improve your work.
Recently I talked about CSS cross-browser gradients and last week I wrote again about CSS3 gradients. So what I’m going to do today? I will show you how to put the CSS gradient feature in practical use.
In this article you will see how you can create a set of gradient buttons just with CSS (no images).
A while ago, I wrote another article here about the CSS3 gradients. At that time, you saw the browser support, the advantages of using them and their syntax.
So, what’s new since then?
The CSS3 Webkit syntax, which was quite different than Mozilla at that time, has been updated!