I came across this nicely designed audio player on CodePen, put together by Michael Zhigulin It uses the waves.js click effect library...
A style sheet language used for describing the presentation of a document written in a markup language.
I came across this nicely designed audio player on CodePen, put together by Michael Zhigulin It uses the waves.js click effect library inspired by Google’s Material Design. For this tutorial demo I’m using a royalty free track from bensound.com. What is Google Material? Google’s Material Design language has begun making its [...]Ashley
If you’ve seen the Periscope app heart animation, you’ll know what I’m talking about. It’s the one where you tap on the screen and a flurry of hearts appear and fade out animated up the screen. If you’re building a iOS native app you can check out this code, which uses the react native playground. The HTML This [...]Ashley
UiGradients.com is a great little resource for finding inspiration for CSS background gradient colours, and it makes it super easy to get the CSS to paste in your project. So here’s an awesome tool that shuffles through the gradient colours with a fade transition. We take the json file from the git repo and use that to loop through [...]Ashley
I stumbled across an awesome post on Codepen by Felix Rilling which uses pure CSS to display a phone with an iframe embeded to enable you to preview a responsive site. You can view the original code he wrote here. I’ve taken the code and modified it to make it easy to preview a site for different mobile screen sizes and added a rotational [...]Ashley
The days of static content are well and truly dead and buried, Halleluja for CSS3! Recently i’ve been using this snippet of CSS in most of my projects to add slick transitions on page load. You can even add the CSS classes to ajax loaded content and on show the animations will kick in. How To Use You have to add the ‘animated’ [...]Ashley
There is no one-size-fits-all approach. Each project has its own focus, requirements and audience. This article will hopefully help you make the best decision for your project by outlining the advantages and disadvantages of each solution. Jeffrey Veen said: “Day by day, the number of devices, platforms, and browsers that need to work [...]Ashley
Creating an image rollover is pretty easy with CSS. Give the element a background-image, Then absolute position a span element within the div. Then you just need to set the opacity of the span element to 0, and animate the opacity on span:hover. This method uses a CSS sprite image, you could easily use two images but it’s best to save [...]Ashley
With the advent of smart phones and more powerful handheld devices like the iPad are your mobile users having the best experience? The mobile arena introduces a layer of complexity that can be difficult for designers and developers to accommodate. Mobile development is more than cross-browser, it should be cross-platform. Add a Mobile Stylesheet [...]Ashley
Marketing your site to the right audience and getting your core message across is crucial in order to sell your product or service. There is no single formula to achieve this, only different strategies and tests will lead to a landing page that suits your products needs. 1. Call to action Users will click on a call to action buttons because [...]Ashley