Once upon a time we relied purely on Photoshop to create fancy image effects. These days though we’re turning more and more to pure CSS to add eye candy to our images. Applying custom image treatments using code makes for an infinitely flexible workflow that’s easy to tweak at any time. Today I’ll walk you through creating some extremely simple and fun CSS image tricks. From polaroids to vignettes, you won’t believe what we can pull off.
Read MoreBy "css3 speech bubble", Jin means using a pseudo element on a container to add a little pointer arrow (triangle). Setting the container with an inline style is all well and good, but unfortunately there is no inline style for pseudo elements. There is a solution though! While we are setting the inline style for the container, we can set an inline style for border-color too. Even though the container actually has no border, we can rely on inheritance to pass that color down to the pseudo element, which is treated like a child element.
CSS3 offers a wealth of possibilities in terms of visual and interactive effects, even allowing you to create animated elements without the need for either Flash or JavaScript. In this tutorial we’ll go through the process of translating a page element using a CSS3 transform.
Making media display consistently on your site can be a problem, especially with multiple content authors. In this tutorial Opera’s Chris Mills shows you how object-fit and object-position can solve it.
In the last few years, we’ve seen a lot of single page websites lying around the internet, most of them using JavaScript for some transitions effect. Well, now we're going to teach you how you can have your own, but instead we’ll be using CSS Transitions and the :target property to do all the magic.
CSS is a beautiful language but it can also be frustrating at times. Certain CSS solutions don’t work on certain browsers (cough Internet Explorer cough) and much of your time can be spent debugging code. Thankfully there are lots of great CSS snippets available online that fix common problems and design issues. In this article we have listed 30 CSS snippets that we think you will find very useful.
The word-wrap property has been removed from the CSS3 spec and other related properties have been added. Although browser support is not great for these new features, it’s nice to know that in the future we’ll have some powerful tools at our disposal to handle overflow and line breaks in a more fine-grained manner.
Follow along as we create a simple and fun download button using some fancy CSS3. Our button will use lots of fun goodies including border-radius, box-shadow, linear-gradients, z-index and transitions to achieve a unique double sliding drawer effect on hover.
In today’s tip we’ll show you how to spice up your menu by adding a neat hover effect to it. The idea is to slide an image out to the right when hovering over a menu item. Each menu item (which is a unordered list item in this case) will have an anchor containing two spans and an image.
We're going to create cool neat title screens with CSS. You can just add a header tag with an anchor link inside. It would be cool to do it with just the header tag but you'll also need to figure out a way to get the layers all right with the text on top without the extra element.