We’ve all come across startup or app websites that display their product within a realistic smartphone or laptop image. Sometimes it’s used to show that the app or website is responsive and has been built for multiple platforms. When working on one particular project, I decided against using stock images for a variety of reasons and wanted an alternative…
CSS Device Shapes
There’s something attractive about plain HTML and CSS solutions. These days most front end developers spend the majority of their time working with a slew of javascript libraries, frameworks, dependencies and the endless documentation that goes along with it but sometimes it’s amazing how far modern HTML & CSS will get you.
For this particular project I wanted to insert a video in to a laptop. I wanted as few lines of code as possible. I came across the css devices on W3 schools but they weren’t responsive and were a bit too ‘blocky’ for my liking. But they were exactly the type of simplicity I was looking for… a div with an id of “laptop” and a child div with an id of “content”. Clean, self-explanatory, easy for anyone to maintain.
<div class="laptop">
<div class="content">
<!-- video or content goes in here -->
</div>
</div>That’s the easy bit of course. Now how the hell do you create an acceptable laptop graphic / shape with 2 divs? Well, a rectangle with a border and then a rectangle of a small height beneath it with a larger width. That kinda works but it could also be mistaken for a blackboard or a window / sill.
To make it a laptop it really needs to have a keyboard or trackpad area or a camera on the top of the screen. But we only have two divs and we’ve created shapes already with them… what do we do? Well, this is where pseudo elements come in. Both divs can have a ‘before’ and ‘after’ psuedo element. So now we have 6 potential elements to work with. More than enough.
Below is an example of the finished product. A laptop & desktop graphic with and without an embedded youtube video. Fully responsive, ridiculously lightweight (around 500 bytes minified + no additional http requests like an images would add) and super easy to work with, tweak and maintain. I also created similar css shapes for a smartphone and tablet which are all available on a dedicated github repo.
Some of you may be thinking “Why not just use SVG icons for maximum control?”. Well, it goes back to keeping things simple. SVG is not straightforward to work with (my opinion, in comparison to CSS anyway) and doesn’t have the same out-of-the-box-support in browsers that CSS does.
However, SVG does give you more control over things and I actually created a set of similar SVG images for smartphone, laptop, tablet & desktop. At one stage I was leaning towards using SVGs in this project (I personally prefer pixel perfect control over everything) but decided against it because in this case they wouldn’t have been easily maintainable and there were more quirks involved (it’s not straightforward insert html in to SVGs and support in IE / Edge is patchy so I didn’t want to create a bunch of additional work for myself & others now and in the future). SVGs would have been fine for me but it would inevitably result in questions down the line when someone else has to update things and wrap their head around how things are working. With the CSS solution, it just works and anyone with basic HTML / CSS knowledge will get it without having to think about it.
I’ve made all of this work available on a Github repo so you can pull it apart and do what you want with it.