The previous article, Understanding the CSS Clip Property by Hugo Giraudel offers a great overview of the CSS clip property and the rect() function. Today Mary Lou wants to explore the practical side of it a little bit more. She is going to create a neat and simple effect for revealing some extra content and expanding a fullscreen overlay. She wants to show how to leverage the CSS clip property to make a smooth transition when clicking on a box element.

In this tutorial Elliot Ross will look at bringing some of the web’s mobile techniques to HTML email. User take-up of mobile email is massive: some email campaigns get more mobile opens than desktop, yet many marketing emails render poorly on mobile devices. Mobile support on the web has never been better – so if you’re sending emails that drive customers to the web, it makes sense to design mobile friendly emails too.

There are several tactics for deciding where to put breakpoints in a responsive design. There is the rusty idea that they should be based on common screen sizes, but this doesn’t scale well. There are no common screen sizes. Another popular tactic is to create a breakpoint wherever the layout breaks. This sounds much better. But it still leaves you with the question, How do you determine whether the layout is broken? One logical answer is to look at classic readability theory and to define our breakpoints based on that.

Hugo Giraudel is pretty sure some of you don’t even know there is a CSS property called clip since it’s probably the less used property in the world. He will cover pretty much everything you have to know about it. The clip property aims at defining what portion of an element you want to show. You may have heard of this stuff as crop. There are a bunch of JavaScript plugins out there to crop an element, but actually you can do pretty much the same thing with the CSS clip property.

In the following quick tip you will learn how to create a simple step by step progress bar using Adobe Illustrator. For the main shapes Andrei Marius will use some basic tools along with the Transform effect and some simple Pathfinder options. For the small details he’ll use some basic vector shape building techniques, several Drop Shadow effects and some simple blending techniques. In the final steps he’ll add the simple pieces of text and the little check symbol.

In this article you will find useful information about working with the DMXzone Uniform Dreamweaver extension. We covered basic as well as the advanced usage. You can explore the main features packed in this tool and also learn how to use it in conjunction with the Dreamweaver control behaviors. All tutorials are well presented with screenshots and also in video format.

It used to be that if you wanted to create a drop down menu then you needed to use a lot of background images as well as complicated Javascript. Today however all of that is a thing from the past. In this tutorial the DeveloperDrive Team will create a simple yet very effective drop down menu using only CSS. They will build their drop down menu in two steps, first they will construct a simple menu using HTML and then add the styling with CSS. They will create this drop down menu by using the <nav> element, as well as the display:block, and use the position element in order to position the menu.

As a designer, this is one of the most exciting parts of a new year. Here Kendra Gaines is, trying to figure out what’s going to be big for design trends in 2013. It absolutely makes sense. Web designers have to really be up on all the new trends to be relevant and abreast of what’s next after that trend. Of course responsive design is going to be big this year — it was big last year! And of course she is going to continue designing with grids. That’s basic design! This time around, she wanted to look into some trends that seem to be growing.

You might believe that web developers who use Windows as their primary OS have it easy, when testing Internet Explorer; simply click on the blue “E” and go to town. That might be true if they only had to worry about the version of IE on their PC, but Rey Bango knows that’s not the case. Depending on your project’s needs, you may need to ensure compatibility from IE6 through IE10, which certainly poses some challenges.

In this tutorial, you will learn how to create a sticky note for your website. The effect is built of five simple steps, the first step simply adds the text you want to use, as well as creating the square that in essence becomes the sticky note. Step two focuses on the getting the font right as well as adding a drop shadow effect. Step three focuses on tilting the notes so they don’t look as boring as if they were all lined up. The fourth step allows the sticky notes to zoom when you move your mouse over them. The fifth and final step adds a smooth effect and allows you to change the colors of the sticky notes.