Papermashup

Latest Posts


Subscribe


Tweets


"RT @finance_LL: I'm going to cancel Netflix and negotiate with each film producer separately, to get the best deal for me and my family #Br…"

@ashleyford 5 days ago

"The very best top news stories from Telford #BreakingNews https://t.co/B4SmSW1a7V"

@ashleyford 5 days ago
Papermashup

CSS

A style sheet language used for describing the presentation of a document written in a markup language.

Awesome Material inspired audio player

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 [...]

AshleyAshley

Periscope style heart effect with CSS and JS

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 [...]

AshleyAshley

Shuffling through CSS background gradients

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 [...]

AshleyAshley

CSS and JavaScript mobile UI preview tool

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 [...]

AshleyAshley

Simple CSS3 Animations

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’ [...]

AshleyAshley

Fade between a background image with CSS3

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 [...]

AshleyAshley

Optimise your site for mobile devices

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 [...]

AshleyAshley

5 tips to designing better landing pages

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 [...]

AshleyAshley

jQuery form titles

I thought I’d share a little technique that I occasionally use when coding forms with a limited amount of space. It’s a simple effect that allows you to contain the form input or textarea title within the form allowing the user to click inside the form input to remove it. You often see this used on search fields The JavaScript [...]

AshleyAshley