Photography and CSS

Published
June 16, 2010
by
Chris Coyier

It sure seems like a heck of a lot of web designers are also photographers, doesn't it? And by "photographer", I mean they own a DSLR and heavily consider aesthetics when taking a picture. Why the overlap of interests? Well clearly web design often incorporates photographs. Maybe we like to have the equipment we need to take decent pictures for websites and it grows from there. Maybe it's because photography is a lot like design. You have a canvas of sorts and you need to take into account the principals of design: color, balance, line, shape, contrast... the gestalt.

I think maybe the connection runs a little deeper though, in that it appeals to our inner nerd in the same type of way.

CSS isn't a particularly difficult language to understand. You select things, and change the values of different properties. There is no logic, no math, no object oriented concepts, no security concerns... It largely reads like plain English. Yet, understanding it and being really good at it are pretty far apart. The old adage applies nicely:

It takes a day to learn and a lifetime to master.

CSS might seem a little mystifying at first, until you dig in a little and then you might think "this is all there is?" I found photography to be similar. At first, a DSLR can seem like a maze of settings and details to know about. It seems like learning how to change everything according to the circumstances and your desired outcome is going to be incredibly complicated. Then the further you dig in, you realize it basically boils down to your ISO, shutter speed, and aperture. Then it happens again, "this is all there is?"

It goes deeper in both directions. Yes, CSS can get more complicated with stuff like CSS3 transitions, cross-browser quirks, and trying to style form elements to look decent. Yes, photography can get more complicated with things like different lenses, dealing with white balance, and processing RAW. But those things are somewhat minor compared to the core concepts. Master those fundamentals, and the rest comes along with it over time.

I actually started on photography and then learned CSS. I got in love with photography, bought a Canon 350D + Sigma 70-300m + Canon 50mm.
Almost at the same time, like 3 or 4 months later, got used to CSS and got myself into javascript. Since then photography is on standby mode.

Just for the record… I’m not a particularly good photographer, but I do have a Canon XTi and a few lenses and quite enjoy learning about it and getting better. This post is just about me noticing how similar the two things feel to me.

It’s definitely striking how many web designers have a DSLR. But why do you even need a DSLR when it comes down to ISO, shutter speed, and aperture? Even the most basic pocket cameras have these settings lately. And basically the composition is the most important part of a picture. Oh well.. That’s probably the inner tech snob in all of us.

The difference between a DSLR and point and shoot is all about the lens and the size of the sensor, and to a lesser degree the functions of the camera.

The bigger lens on a DSLR completely changes the look of a photo compared to the tiny lens on a point and shoot. And the larger sensors make for much cleaner images, especially in low light and at high ISO levels.

Being able to instantly snap a photo, or a series of 5-10 photos in one second allows you to capture things you’d never get waiting for the point and shoot to find its focus and take the photo.

One of the reasons that most web designers are also photographers is that photography is also an art like web design… It involves an appreciation of beauty… perhaps this is also the reason why most web designers also like painting, music and sketching… I consider web designers web artists. . . Like art you use your God-given talent and combine it with skills that you learn through hardwork… Photographs, photoshop and illustrator is often like the colors that painters use, codes like css-xhtml and jquery is often like the eye for detail of a painter and lastly the monitor screen is like the canvass in which you unleash your masterpiece and express your inner artist or geek for that matter (right on chris!). But also I really think that this is a science for it involves structured procedure, technique and logic. . . At least that is how I feel . . .

I do wish I could get my own DSLR someday. . . :) Its a bit pricey from a students allowance here in the philippines. . . work work work i got to go and work on my blog and hopefully be as successful as chris is someday . . . :D

No flintknapper has ever taken a photograph. Fact. Their hands cannot grasp metal or plastics. Nor can they comprehend two-dimensional representations other than cave art (and murals/wall-art, by extention). One flintknapper named Henri Smalls entered a Cinema in 1922 and exploded.

I’m a full time commercial photographer, part time web developer and I feel exactly like you do, from the other side of the coin. Both photography and web design involve an intersection of technology, craft and aesthetics I find irresistible. My tools have changed, from a chemical to an electronic environment, but the elements of craft and the stimulation and satisfaction derived from making something beautiful using technology (and experience of course) is the same. Fun to see the same appreciation through your eyes.

Very cool insight! As a photographer/designer I can so relate to this discussion.

I think it’s awesome how with the same very basic set of tools, we can end up with so much amazing, diverse and unique art.

I think it comes down to the vision of the artist, taking those same basic tools, rules and techniques available to all and using them in unique ways and combinations to tease out subtle details and create the things we visualize.

It’s easy enough to learn the rules, tools and techniques, of CSS and photography. But it really does take long time to get to that point where you’re so comfortable with them that you can quickly use them to create your visions.

So true. I am a full time photographer and a fully-part time web designer and developer. I am still learning a lot of design stuff from you every day! I think one helps the other ya know? Being a web designer also helped me with my Photoshop skills. Learned a lot about creating graphics from scratch.

The statements in this post are so true. I started with film photography in high school before ever getting into web design, but was into 3D animation and graphic design at that time.

Now I incorporate a lot of my digital photography into my web design work. You can really instill a lot of value for yourself to your current and future clients by saving them money in your ability to produce digital assets on your own versus buying expensive stock photos. I wonder how many stock images one could buy to equal the same amount of money used to buy a digital SLR? Not too many in the grand scheme of things, and I suspect that’s a huge reason these two disciplines go hand in hand.

Btw, I had a Canon XTi for the last three years and loved it but am about to upgrade to a Canon 5D MI. Can’t wait for some full frame action!

Well said and great little thought to put out there (we all love to relate)! I bought a DSLR to support my web design/development and have taken a great interest in both photography and cinematography.

With the HDSLR cameras shooting high def it’s fun to not only be creative with photos but also in video!

This is a great post and I agree whole-heartedly! While I’m a front-end developer and designer, I also enjoy photography. I certainly don’t consider myself a “professional” photographer by any standards, but I’ve certainly got that “designers” eye when I take photos and it’s very helpful.

If I can, I’ll take my own photos…sometimes stock photography just doesn’t always cut it for me!

I’m a web designer who has also worked as a professional photographer. I have frequently explained to friends that what attacts me to photography also attracts me to web design. Going back a few years to the darkroom days, photography was about creating a design in the camera and then tweaking it in the darkroom. I find the process in web design similar; creating a design in photoshop and tweaking it with CSS. Also, the same old magic of putting photographic paper into chemicals and seeing the image develop is similar to writing a bunch of HTML and CSS and seeing the results in a browser.

Maybe it has something to do with working in a darkroom, and shutting yourself off from the world. I ‘do’ CSS but I don’t touch photography, can’t afford the tools – after Ive spent all me dosh on CS5 and the latest iMac.

I think anyone who says something like “just because you bought a DSLR, doesn’t mean your a photographer” is wrong, when you pick up a camera your a photographer. It doesn’t make you a good one. Saying your a proffessional Photographer is something I was slow to call myself. I would agree with Chris about a lifetime to master both css and photography! I am both a proffessional photographer and web designer http://www.milkbottlephotgraphy.co.uk and let me know what you think. can I call myself a proffessional?

Hey Chris, Interesting topic but yeah well done for spotting the connection. I myself am a web designer and I have a very keen eye for good photography especially when making these choices for my websites that I design and develop. Being able to have some kind of control over images I we use is a bonus and having photography skills will allow designers to take photos content they want on their site without the use of generic stock photos. Making it more more unique.

i agree, chris. what i like about digital photography is that it allows me to learn from my mistakes. being also a musician, i like that approach a lot.

what i like best about (digital) photography is that 1.) it is so hard and 2.) that it is so easy. technically it’s getting easier and cheaper. to master light, aesthetics, human perception and semantic aspects of visual phenomena stays as tricky as always.

transitioning from analogue to digital, i found it difficult to choose shots. deleting photos is now one of my favourite parts of the game.

css is similar in many aspects. isn’t it easy? and how mind-boggling the possibilities are.

I agree with Chris Coyier on his wonderful article about Photography and CSS. The experience in taking various shots using different combination of ISO, Shutter speed and Aperture is like that of writing CSS for cross-browser and cross-platform web-apps :)

This comment thread is closed. If you have important information to share, you can always contact me.

Treehouse is where you go to learn HTML, CSS, and how to build iOS apps. It's a complete education in modern web and app technology, designed to get you ready for a hot new job or to kickstart your own business.

The Lodge is a member login only area with access to video training on how to build websites from scratch using the best modern tools.

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.