I had one of those moments this week when I remembered I saw a while ago a tucked corners effect made by Joshua Hibbert. That was cool. While thinking about it, one of my first thoughts was to try finding an alternative solution that can allow you to use a pattern as a background for the containing block.
For this alternative CSS3 tucked corners effect, I used the beveled corners technique by Lea Verou, a technique you’ve seen implemented before for my CSS tabs with beveled corners.
Nowadays, using subtle patterns is kinda cool so I thought why not using them also on buttons? The idea was to create some nice CSS3 patterned buttons and in this article you’ll see what I’ve been working on lately.
You’ve seen triangles everywhere: on tooltips, dropdowns and even on loading animations. Like it or not, these triangle shapes are quite important when trying to build some relationships between various UI elements.
Everything is a rectangle when working with HTML. But there are different ways to build triangle shapes in HTML, SVG & CSS for your designs and in this article, you’ll see how you can actually do that.
CSS transitions do not have any effect on CSS gradients. As far as I know, the thing is that something similar would be quite difficult to achieve considering the multitude of possible gradients that can be created using a color palette.
Though there are some simple ways you can simulate smooth CSS transitions on gradients and below you’ll see how to do that.
It would be just great if we could learn something new every day. I guess the best way to do it is by trying new stuff every time it’s possible.
While working on a project, I had a situation where it was needed to use an iconic font externally declared via CSS @font-face. So, in this situation, my iconic font worked perfectly in all major supported browsers, excepting Firefox. It was such a disappointing situation.
After I’ve pulled out half of my hair searching for a solution, I found out that Firefox doesn’t allow cross-domain fonts by default - unless you set an Access-Control-Allow-Origin header to the font.
Having an effective pricing table can help you a lot to increase the conversion rate for your product sales page. It’s very important to make things clear from the beginning because this way you’ll help your visitors to take the best decision for choosing the plan that suits them.
The pricing table’s design also plays an important role here. So, in today’s article you’ll learn how to create a nice and effective pricing table using CSS3.
It’s been almost a month already since I launched this new responsive design and unfortunately I didn’t had much time to properly introduce it to you. This improved design is something I wanted to do for a long time and I’m glad I finally managed it. It’s simpler, minimal, responsive and I like to think that now the content is much easier to read (scan).
The other day, while working on a web project, I had to emphasize somehow a dynamic notification bubble. Basically, every time the notification value changes, a visual effect was needed in order to get user’s attention. So I made that using CSS3 keyframe animation.
Using pseudo-elements like ::before and ::after helps you specifying which content should be inserted before or after the content of an element. HTML replaced elements like input or img have no content, therefore, you shouldn’t be able to use any generated content for them.
But, there’s almost always a but, it seems that you can use generated content on a number of replaced elements that vary from browser to browser. This is something that has intrigued me lately and that’s why I decided to write down this article.
I wrote a while ago about the future CSS4 Selectors, namely about CSS Selectors Level 4 Working Draft release. It was such a good news to see that things are continuously moving on. I’m saying that because it’s a long way until CSS3 will reach final recommendation phase and yet we’re seeing news about the future CSS4. Isn’t that cool?
Meanwhile, I thought a little bit about the upcoming CSS parent selector. At this time, if you ask me, I think it will be the most awesome feature and definitely is at the top of my CSS wishlist.
