background preloader

CSS3 Animation Cheat Sheet - Justin Aguilar

CSS3 Animation Cheat Sheet - Justin Aguilar
How it works The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated. The CSS3 Animation Cheat Sheet uses CSS3 @keyframes and works on all the latest browsers (that's IE 10). Using CSS3 @keyframes, you don't have to worry about positioning the element to accomodate the animations - it will animate into place. Also for users with older browsers, the animated element will be visible and in place, even if the animation doesn't trigger. Add the animation stylesheet to the <head> element of your webpage: Replace css with the name of the directory where the animation stylesheet is. Add an animation class to the element you want animated: Replace slideUp with the desired animation class. For entrance animations, you need to make them invisible by adding the visibility: hidden property to the animated element: Adding effects Related:  Programming

I miss you ♥ | Vertical align anything with just 3 lines of CSS With just 3 lines of CSS (excluding vendor prefixes) we can with the help of transform: translateY vertically center whatever we want, even if we don’t know its height. The CSS property transform is usally used for rotating and scaling elements, but with its translateY function we can now vertically align elements. Usually this must be done with absolute positioning or setting line-heights, but these require you to either know the height of the element or only works on single-line text etc. So, to vertically align anything we write: That’s all you need. To make it even more simple, we can write it as a mixin: You can find a demo of it here: See the Pen Vertical center with only 3 lines of CSS by sebastianekstrom (@sebastianekstrom) on CodePen. Update (April 25th, 2014) As a few people have pointed out, this method can cause elements to be blurry due to the element being placed on a “half pixel”. Or, you can set the perspective of the element (thanks to roydukkey):

Code & Conquer Most Important: Have Fun. And earn some badges. See how your strategy works out in different scenarios, challenge other players, receive points, earn badges and climb your way to the top of the leaderboard. Boost your coding skills. Do it playing. This game provides the perfect setting to introduce the key concepts employers ask you to know. Patterns in Interaction Design 21 Really Useful & Handy PHP Code Snippets PHP is the most widely used web based programming language that powers millions of websites including some of the most popular ones like Facebook. Here are 21 really useful and handy PHP code snippets that every type of PHP developer will find useful. 1. This code will create a human readable string that will look more close to dictionary words, useful for captchas. function readable_random_string($length = 6){ $conso=array("b","c","d","f","g","h","j","k","l", "m","n","p","r","s","t","v","w","x","y","z"); $vocal=array("a","e","i","o","u"); $password=""; srand ((double)microtime()*1000000); $max = $length/2; for($i=1; $i<=$max; $i++) { $password. 2. If you don’t need human readable string, then use this function instead, which will create a random string you can use for user id’s etc. 3. With this snippet, you can encode any email address into HTML entities so that spam bots do not find it. 4. function is_valid_email($email, $test_mx = false) { if(eregi("^([_a-z0-9-]+)(\. 5. 6. 7.

Using Custom Data Attributes and Pseudo-Elements A tutorial on how to (ab)use custom data attributes and pseudo-elements for creating image captions. In today’s tutorial I want to show you some simple CSS tricks using data attributes and pseudo-elements. The aim is to create an image caption using only an anchor and an image as markup. If you’d like to explore some fancy image caption hover effects with “real” markup, check out the Caption Hover Effects. And if you are interested in some really cool animations and transitions with pseudo-elements, then check out this article by Marco Barria: Examples of Pseudo-Elements Animations and Transitions. The demos feature some beautiful artwork by Jaime Martinez. Please note that we will be using some CSS features that might not work in older browsers. Let’s start with the markup. As you can see, we define two data attributes, one for the title and one for the description. Our first image caption will be a static one: we want to place the content of the data attributes right next to the image.

untitled User Interface Prototyping - Low- and High-Fidelity Prototyping Today 14 Coding Challenges to Help You Train Your Brain Programming is becoming an essential part of nearly every industry known to man, the way it helps to organize and maintain large systems is not possible to compare to anything else, and so more and more people begin their journey. You can learn to code both from interactive platforms and also from books – whichever you find most appropriate and easy to learn from. But, sometimes that’s not good enough, and we want to practice new things. Coding is a lot about creativity, your ability to come up with new and interesting ideas; but sometimes, due to a large amount of time spent tackling common problems, we forget about creativity. We could say that coding challenges are great for: learning new ways of doing thingspracticing a new programming languageencountering critical problem solvingkeeping our brain sharp and focusedhaving fun! 1. You get to earn real money, and it’s supported by a community of nearly a million coders, so I’m pretty sure there is a lot of challenging stuff to encounter.

An Introduction To CSS3 Keyframe Animations Advertisement By now you’ve probably heard at least something about animation in CSS3 using keyframe-based syntax. The CSS3 animations module1 in the specification has been around for a couple of years now, and it has the potential to become a big part of Web design. Using CSS3 keyframe animations, developers can create smooth, maintainable animations that perform relatively well and that don’t require reams of scripting. It’s just another way that CSS3 is helping to solve a real-world problem in an elegant manner. In this article, we’ll cover all the important parts of the syntax, and we’ll fill you in on browser support so that you’ll know when to start using it. A Simple Animated Landscape Scene For the purpose of this article, I’ve created a simple animated landscape scene to introduce the various aspects of the syntax. (NOTE: Versions of Safari prior to 5.1 have a bug that prevents the animation from finishing correctly. The @keyframes At-Rule Here’s the @ rule we’ll be using: Shorthand

XML to XSD Generater Online - xmlGrid.net Create XML Schema from an XML Document How to generate/create a schema xsd from an XML document? Step 1: load XML file. Demo; ; Editor;XML Editor XmlToText; XML document to plain text file;XML To Text Xsd2Xml; XML document from a schema xsd file;XSD To XML XPathTester; test XPath expression;XPath Forum; Big experience - A concept model for digital strategy & product man... Beginning Game Development: Part VIII - DirectSound | Coding4Fun Articles Welcome to the eighth article on beginning game development. We have spent a lot of time working with the graphics capabilities of DirectX. We also covered how the DirectX API allows us to control input devices. Sound in Games Sound creates an ambiance in a game that provides for a more immersive game experience. Sound effects also provide the same audible cues we expect in real life, such as the direction and speed of a person approaching us based on the volume, direction, and frequency of the footsteps. In BattleTank2005 I want to integrate sound in the following way. Secondly, I want to be able to play background music during game play and I want to control what music plays when in the game. I am going to cover the first requirement in this article, and then cover sound effects and playing MP3 and WMA files with the AudioVideo namespace in the next article. DirectSound The DirectSound namespace only supports playing 2 channel waveform audio data at fixed sampling rates (PCM). Device

A Collection of Page Transitions A showcase collection of various page transition effects using CSS animations. View demo Download source Today we’d like to share a collection of creative page transitions with you. We’ve put together a couple of animations that could be applied to “pages” for creating interesting navigation effects when revealing a new page. Please note that this is just for showcasing some interesting effects and for inspiration. The CSS animations are divided into different sets, depending on what they do. Please note: this only works as intended in browsers that support the respective CSS properties. For showcasing the page transitions, we’ve used the following structure: <div id="pt-main" class="pt-perspective"><div class="pt-page pt-page-1"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div><div class="pt-page pt-page-2"></div></div> The perspective container is relative and we add a perspective of 1200px to it.

Related: