Learn how to create a hexagon in CSS by following this simple tutorial. Image: https://raw.githubusercontent.com/ChickTuts/Resources/master/14.%20Hexagon/bunny.jpg Check out our latest project, FairPlayer Music Player: https://play.google.com/store/apps/details?id=com.fairplayer
Views: 14787 Chick Tuts
This is a tutorial for creating a sprite animation from a .gif using only CSS3. Special thanks to Jonathan Dahl for the awesome Robin .gif: https://dribbble.com/shots/2168369-Robin-Run-Cycle jQuery version, with added controls: https://jsfiddle.net/stephino/51fa3m17/
Views: 10590 Chick Tuts
Learn how to use the jQuery UI Slider. This tutorial also includes a CSS trick on how to make a moon using only CSS3. At the end of this tutorial you will know how to use the jQuery slider in making the transition between the phases of the moon. If you have any questions leave a comment below. Check out our latest project, FairPlayer Music Player: https://play.google.com/store/apps/details?id=com.fairplayer
Views: 10026 Chick Tuts
In this tutorial we are going to learn how to trigger a mousemove event in jQuery. As usual, we are doing this using a fun and visual example. Enjoy.
Views: 827 Chick Tuts
Today’s tutorial is going to cover drawing paths, mainly lines, arcs and ellipses. If you have not seen the previous tutorial, go check it out for a brief introduction to the html canvas element. In this tutorial, we are first going to learn how to draw a triangle and then a more complex shape, a smiley. Thank you for watching! Don’t forget to like and subscribe in order to support my channel.
Views: 1156 Chick Tuts
Views: 569 Chick Tuts
Today I show you how to transform any GIF in a long filmstrip using Photoshop. Then, we will make a sprite animation using CSS3 only. Now, why not just use a GIF ? You have no control over animated GIFs. You can't start or stop them, let alone change the speed. They animate as soon as they load. Also, when you load multiple instances of the same GIF, they all use the same image across the page and move at the same time. Sprites are great for game development because they are fast, scalable, you can animate only a part of them, you have control over them, you can preload then so they don't freeze if the connection is slow and so on. This is why most browser-based games use this technique extensively. Image link: https://raw.githubusercontent.com/ChickTuts/Resources/master/15.%20GIFs/filmstrip.jpg Check out our latest project, FairPlayer Music Player: https://play.google.com/store/apps/details?id=com.fairplayer
Views: 1050 Chick Tuts
A simple and fun way to create a parallax effect. Resources: https://raw.githubusercontent.com/ChickTuts/Resources/master/10.%20Parallax/cat.png https://raw.githubusercontent.com/ChickTuts/Resources/master/10.%20Parallax/stripes.png The linear function used to move the top image in report to the mouse potion was calculate with the equation of a straight line. Math: http://www.purplemath.com/modules/slope.htm Where: x = e.pageX f(x) = y = m * x + n = newPosition Slope: m = (y2-y1) / (x2-x1) Where: - x1 = 0 , we want newPosition = windowWidth - itemWidth - x2 = 100% == windowWidth, we want newPosition = 0 - y1 = windowWidth - itemWidth - y2 = 0 Now you have everything to calculate m and n. Good luck. Check out our latest project, FairPlayer Music Player: https://play.google.com/store/apps/details?id=com.fairplayer
Views: 3438 Chick Tuts
In this tutorial we will learn how to make a cool circle loading effect using CSS only. We are also going to learn about the CSS3 @keyframes rule. Check out our latest project, FairPlayer Music Player: https://play.google.com/store/apps/details?id=com.fairplayer
Views: 1205 Chick Tuts
This tutorial shows you how to style selected text in CSS by using the ::selection pseudo element. Furthermore, I am going to show you how to make text unselectable by disabling selection highlighting.
Views: 1060 Chick Tuts
Create a CSS3 gradient on the fly with this easy and short tutorial. Leave a comment below if you have any questions or suggestions. Don't forget to rate and subscribe. Deviantart hummingbird link: http://pixievamp-stock.deviantart.com/art/Green-Humming-Bird-PNG-115347171
Views: 481 Chick Tuts
Today we are going to make a quick collapsable, fluid drop-down menu. That means the menu is going to resize when you resize the browser.
Views: 493 Chick Tuts