The other day I was thinking that I quite liked these little ribbon things that people add to their images, so I put together this little tutorial on how to make your own. I came up with a few ideas, but they honestly didn’t look right without the use of images. This is a CSS only ribbon that fits on most images which can be integrated easily into existing code.
I recently made a post about creating a share button that zoomed out with transitions on hover. Although I had been targeting desktops with the demo, a user called egypturnash pointed out that the demo didn’t work on iPads or touch enabled devices because there is no hover option available. You touch or you don’t touch. My demo simply wouldn’t work if there was no way to hover. So how do we go about fixing this problem?
When it comes to attracting attention to yourself on the internet, nothing does a better job than share buttons. Whether its twitter or google plus, social media probably has a huge impact on your traffic. I set out to create an attention grabbing way to display buttons, and came up with this: a circle that expands revealing a bunch of…
In the past few weeks a new official specification for CSS variables has been introduced by the W3C with a lot of scrutiny and praise from the web design community. It’ll probably be a long time before any of us are realistically using variables every day, but it’s certainly something to look forward to. There are alternatives at the moment though.
In case you haven’t heard already, the big thing at the moment is responsive design. Everything has to be responsive in some way, so it’ll work on what is becoming an increasingly huge portion of traffic: mobile devices. Once the user is on your site though, how does one make the most out of their experience? Today I’m going to show you a bunch of things which aren’t in the spotlight when it comes to mobile design, but could really improve experience.
I thought this was pretty cool. I made this style of text for a free wordpress theme I’m working on, that I’ll hopefully be able to give you guys soon! The idea was pretty simple. I just wanted some text that would zoom out when you hovered over it. Then you could click down on it to push it ‘in’.
Well, and one line of Javascript. We’re goingto be creating a 99% CSS3 slider with one line of Javascript to initiate it. Everything else will be CSS. Wanna learn more? Continue reading!
Clicking in CSS I was reading a Sitepoint article on the CSS3 :target pseudo element. It basically allows you to initiate a CSS class by click, with just CSS. This is actually a property that totally went under my radar. @JoeZimJS (who you should definitely follow) mentioned how this could be used to create a tabbed interface, and today that’s…
Why would I? box-shadow is smaller and much easier to remember than the quite complex gradient syntax that we have at the moment. Plus, box-shadow boasts more support than the gradient properties. You can’t apply a gradient to a box-shadow either. If you take a look at these buttons posted a while ago, you’ll notice that there’s a slight gradient…
Inspired by the Mac App Store I was on the Mac App Store yesterday and I couldn’t help but notice their very pretty image slider. It automatically slides down every so often, but once you interact, you can ‘push’ an image onto a larger canvas to display it. Sort of like this: The previous image will then fade out and…
