A Quick Look At Animate.css

I was browsing github today when I came across the very interesting Animate.css repository. Animate.css provides a bunch of cool cross browser CSS3 based ¬†animations under an MIT licence that you can use in your own projects with minimal effort. First things first you need to get a copy and depending how you want to use it, you can either build a custom package here, that only contains the effects you are after (hover over the text titles to see each effect in action!). Or if size isn’t an issue and you just want to play around simply clone a copy of the complete code base from github repository. From here its pretty easy to get started, just include the Animate.css style sheet into your page and then add the desired classes to your elements as you require. Below I have created a basic html document to demonstrate a provided “hinge” effect on an element containing some text. The Animate.css style sheet has simply been added in the head of the document. I am also loading jQuery so that when a visitor clicks the hingeElement the animate and hinge classes are then dynamically added to the element: Continue reading “A Quick Look At Animate.css” »

By |July 3rd, 2013|CSS, web development|0 Comments

Text Drop Shadows With CSS3

A few years back i worked at a digital agency where one of the guys on the team loved to look at pages and exclaim “its almost there it just needs a drop shadow and we are done”. For years now if you wanted to make some text look “a little bit fancy”, you found yourself starting up Photoshop, typing the text out then applying the “drop shadow” effect saving the images and then embedding in your page as. CSS3 simplifies this process with the introduction of the text-shadow property which allows the easy placement of a drop shadow effect onto standard text within an element. It is supported in all modern versions of the major browsers except Internet Explorer (hardly a massive surprise there though). The text-shadow property is used within an element description in the following format: text-shadow: horizontal-shadow vertical-shadow blur colour; Continue reading “Text Drop Shadows With CSS3” »

By |July 11th, 2012|CSS, web development|0 Comments