The design for a website I worked on recently required slanted boxes, here’s a simplified version of the what the designer had in mind:
Because the site was responsive, using background images wasn’t an option because retaining the slant angle at different widths would mean using lots of different images across breakpoints. This would be too much of a maintenance overhead, not to mention the fact that using a background image for a single colour block would be morally wrong.
The next approach that sprung to mind was using CSS triangles on before and after pseudo elements - a method I’ve used before on City’s course pages for slanted tabs. Unfortunately this method also failed the responsive test as you would need to know the width of the box to get a consistent angled line across the whole div.
My final approach was again to use pseudo elements, but this time applying a css 3 transform on them, skewing the whole element and hiding the overlapping areas. Here’s a pen with the code …
See the Pen Responsive slanted divs with CSS by Larry Naman (@LarryAnomie) on CodePen.
An interesting take on this year’s Google I/O by Christian Heilmann, in which he argues Google focused far more on native over web tech.
I’ve run into this error a couple of times recently when using the Yeoman webapp generator with Livereload. After trying changing the port used by the Livereload server in the Gruntfile and still seeing the error, running this command in the terminal…
lsof | grep 35729
…confirmed that Sublime Text was the port hogging culprit. Specifically the Livereload Sublime plugin. Disabling this plugin resolved the conflict.
Like Dave Brailsford, I’m a fan of marginal gains and love discovering small tips and tricks to optimise my development workflow. So in the spirit of marginal gains, here’s a tiny productivity tip for Backbone.js that I stumbled upon the the other day.
If you have jQuery included and need to target a child of your view’s el, instead of this…
You can just write…
BOOM. milliseconds of typing time saved.
Every Backbone view has a $ function that runs scoped queries within the view’s el. Probably obvious to most as it’s right there in the docs, but I only just noticed it so am recording it here as an aide memoir.
Have you checked the media attribute?
After a couple of days locked away in the office after work I’ve relaunched one of the first websites I built and designed.
Jamie launched his counselling and psychotherapy company back when I was first starting out in the web business in 2009. Three years later it was high time to revisit and spruce up the site.
Sass and Compass are great tools to help you write scalable, maintainable CSS, however it is admittedly a little tricky to get up and running in a Windows environment. This post aims to help you get going.
One of my all time favourite Family Guy gags in typographic poster form:
Some recent logo design work for the super fashion label Brat & Suzie
Having geek-out fun watching Batman cartoons and designing a noir/deco style logo for the Penguin’s hangout…