Alex manages design and front end development for sitepoint.com and is SitePoint's Design and UX editor.
With Apple’s Watch announcement earlier in the week, the smart-watch UI design sector is certainly heating up. It’s clear that we’re still in the early stages of discovering what actually works in this very tiny, personal form factor. It’s an area that encompasses two very different design legacies. It brings with it: the long history […]
It’s been a little over a week since I set the first challenge — to recreate this animated GIF in code — so it’s time to look at the results.
Remember, there were no real rules and scientifically-measurable correct answer to the problem — it comes down to balance of code and magic. We certainly got a bunch of fantastic solutions.
Scott Kellum – border-radius/border-width
The most popular approach seemed to be the ‘border-radius/border-width’ solution, and Scott Kellum had one of the first and still best take on that one. Creating the triangle with border mitred-edges isn’t too difficult, but getting in and out of the triangle transition in a elegant way was the hard part.
Scott’s code is succinct and the animation is smooth.
Jeremy Karlsson – SVG
Being a big advocate of SVG myself, it was great to see an SVG solution courtesy of Jeremy Karlsson. The SVG is a markup language so obviously changes the markup in this demo, but could be easily embedded as an image, object or CSS background in a production solution.
You’ll see that Jeremy’s solution is using SVG’s <animate> functionailty rather than CSS animation. Very cool.
Simon Buerger – CSS Clip-path
Simon Buerger is basing his solution on a reshaping CSS clip-path. You often see clip-path used with a ‘rectangle’, ‘circle’ or ‘ellipse’ values, but Simon is using the rarer ‘polygon’ value. Polygon takes a series of X Y values to create a mask shape.
A few months ago there was a fun little problem posted to Reddit. I had a go, but I thought it might be fun to throw it to the SitePoint readers and CSS conjurers to see what you can come up with.
There are at least 4 approaches that I can think of, but there may be more.
The only prize is the glory of showing everyone the majesty of your CSS skills.
Your task, should you accept it, is to reproduce this animated spinner GIF in HTML and CSS.
As you can see, it’s a looping animation — probably a loading spinner — that transitions from a red circle to a green square to a blue triangle. You’ll also notice the shape rotates clockwise each time it changes.
I’ve set it up as a basic CodePen that you are welcome to fork as your starting point. I’ve embedded the original GIF so you can see what you’re working on.
- HOWEVER: Be aware that simplicity and elegance is king. An efficient, close approximation of the GIF done in 10 lines of code will probably be judged as a better solution than a ‘pixel-perfect’ solution that uses 100 lines. A pixel-perfect 10 line solution trumps all.
- The HTML is one DIV. You’d need to convince us that you had a very good reason to change that.
All solutions are to be presented as CodePen links posted to the comments below. You’ve got a week to submit your best ideas.
Go for it.
Good typography always been a delicate balance of art and science. Sure, mathematics and grids will get you a long way. But great type — like painting or poetry — also often has an innate, hard-to-define beauty that usually only comes from craft and hard-won experience.
In other words, you need to look at a lot of type — and know what you are looking at — to really understand it.
A few weeks ago we talked about a great little tool for type fanciers called Type Sample. This week I came across another cool little tool — Fontface Ninja.
Fontface Ninja puts type information on font, size and line-height at your cursor-tip. Simply punch the ninja button, point at some type and all is instantly revealed.
Clicking on any text item copies it’s text styles to a panel at the top of your screen, where you can then test that sample font different sizes.
At the moment Font Ninja is available as an extension of Chrome and Safari, or as a bookmarklet on other browsers.
Check it out.
We had some wonderfully thoughtful and incisive comments on our Star Wars Poster Redesign Competition. The time has come to announce the winners.
Firstly we can announce that Gabrielle’s sinister kabuto-inspired design has won the popular vote. Regardless, it was great work by both Gabrielle and Annarita.
And now for the Mighty Deals prize packs.
Choice of ANY five (5) Deals from the Mighty Deals Collection.
- Winner: janberry
4 people win any two (2) Deals from the Mighty Deals Collection.
We will make contact with each of individually to organise your prize pickups. In the meantime, browse the excellent Mighty Deals catalog and pick out your packs.
Thanks so much to everyone who contributed, and special thanks to Mighty Deals for supplying some great designer/developer prizes.
And finally a question: Would you, our readers, be interested in doing a challenge like this with us for prizes and glory?
Mighty Deals have been a great supporter of SitePoint, as well as a great reservoir of cost-effective front-end resources for developers — including everything from fonts to textures to patterns to brushes and more.
Today we’re going to combine the two, and you get benefits!
Firstly we set a brief for two of our favorite SitePoint design authors – Gabrielle Gosha and Annarita Tranfici.
1). Re-design the original Star Wars Poster, but set the story in an entirely new universe/genre. This could be cowboys, gangster, steampunks, rom-coms, buddy-cop films or bollywood.
2). Choose any two Mighty Deals deals to help your design.
3). Present your poster.
4). Tell us what you did, what deals you selected and why.
You guys get the easy bit! Simply tell us in the comments which poster you like best and why.
We will pick 5 winners out of the comments:
1) First Prize: 1 Person to Win Any Five (5) Deals from the Mighty Deals Collection.
2) Second Prize: 4 People to Win any Two (2) Deals from the Mighty Deals Collection.
Ophelie and I will select the winners on Thursday 19th June.
Designers always loved Helvetica. And they redeclared their love for it constantly. In film. On countless t-shirts. Pinterest collections. Hell, there’s even a Helvetica perfume! As a typeface, it’s always been the ‘Glenda the Good Witch’ to Comic Sans’ cackling ‘Wicked Witch of the West’. But some time around 2010 something happened to the relationship. […]
What’s the big deal about SVG, anyway?
Don’t you just hit ‘Save as SVG’ in Illustrator, and you’ve got yourself an SVG?
Yes and no. While it’s technically true, by the same logic, every MS Word user is technically a web developer.
Perhaps the question to ask is: Is that SVG file any more useful than an equivalent PNG or JPG?
Often the generated SVG files we get from graphics apps are not actually very much use outside the application that made it.
The real power of SVG becomes clearer when you’ve got a readable, manipulatable document — and not a dense, arcane document ejected from a graphics app.
Today, I want to give you a speed guide on the basics of SVG, and how to get files that you can work with.
In the weeks that follow, we’ll cover some more interesting thing you can do with these files.
SVG 101: How do you create an SVG?
Arguably, the coolest thing about SVG is you don’t need fancy (or expensive) software to make them. Just like your HTML/CSS files, you can create an SVG with nothing more than trusty ol’ Notepad, Textedit or even VIM.
Working with SVG over the past year, I’ve sometimes felt like there are two different kinds of SVG.
The ‘Save As..’ SVG
These ‘Save as’ SVGs are tangled, needlessly complicated files commonly spat out of a range of vector editing apps. They’re riddled with bad markup practices, and meaningless app-specific code.
These files are to SVG, what MS Word is to HTML.
Sure, they’ll probably render ok in a modern browser, but the underlying code is deeply ugly and difficult to manipulate outside of the editor that created it.
The ‘Hand-cut’ SVG
other type of SVG is a simpler, well-organised, often hand-edited file. You’ll know these files when you come across them, because when you browse them in a text editor, they make as much sense as any well-written HTML file.
It’s this clarity that really unlocks the flexibility of SVG on the web, so turning the first type of SVG into the second type is a super-valuable move.
WebCode from PixelCut is a different kind of vector graphics apps — an app that constructs SVGs from bare bones — not as an afterthought.
Today’s article is going to be the first in new series called ‘Nailing the Detail’. Each week we’re going to pick a famous ‘style’ or ‘design movement’, tell you a little about it’s history and where it fits in.
Then we’re going to try to help you incorporate that look into your web design.
Today we’re starting with Bauhaus!
Let’s go back. Waaay Back..
To understand the Bauhaus movement, it helps to know a little about the time before it.
Throughout most of recorded history, every item we used — chairs, pots, hammers, fabric — was handmade, one-by-one, by a person in a shed somewhere.
While these items weren’t always beautiful, even the simplest of items was generally, at least ruggedly functional, because each had been individually crafted and considered by it’s maker.
However, by the mid-1800’s, the industrial revolution was really getting up a head of steam — literally! — and things had changed. Volume and production speed was the name of the game.