CSS3 vs. Photoshop

4 Posts

Each tutorial in this series will harness CSS3 to achieve visual effects which have traditionally relied on creating images in Photoshop before slicing them up and porting to a web design. This cross-process has created a gap between programmers and designers and slicing a design can sometimes be a very awkward task. The limitations of CSS have made creating something as simple as an angled or oblique gradient impossible. But now, thanks to CSS3, our imagination is the only limit.

Posts in this series
  • CSS
    CSS3 vs. Photoshop: Complex BackgroundsPreview
    This tutorial will outline how to create complex backgrounds which, in the past, could only be achieved by slicing up a design created in Photoshop or another graphic editor. We're going to look at how to use gradient shades and how to combine them with multiple image backgrounds to create radical effects. Are you ready?Read More…
  • CSS
    CSS3 vs. Photoshop: Rounded Corners and Box ShadowsPreview
    This tutorial will demonstrate how to create a nice, simple navigation bar using several combined CSS3 styles. We're aiming for a look and feel that in the past could only be created by combining several images, JavaScript and several divs. Let's get it started…Read More…
  • CSS
    CSS3 vs Photoshop: Opacity and TransparencyPreview
    During this quick tutorial we'll get to grips with the concepts of Opacity and Transparency in HTML elements. We'll be playing with a set of effects which, before CSS3, could only be achieved by using several images created in Photoshop. Read More…
  • CSS
    CSS3 vs Photoshop: TransformsPreview
    It's time for some more CSS3 vs. Photoshop, and on this occasion we're going to dig into transforms. Changing an object's shape is a huge part of any graphic editor's toolset. These days, with CSS3 we can rotate, scale, and skew an element's shape without the need for Photoshop. Let's try it! Read More…