Home
Videos uploaded by user “Chick Tuts”
How to: Create a Hexagon using CSS tutorial
 
02:29
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: 10869 Chick Tuts
How To: CSS Only Sprite Animation Tutorial
 
03:36
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: 9138 Chick Tuts
jQuery UI Slider and CSS Tutorial
 
05:46
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: 9131 Chick Tuts
jQuery Tutorial - How to trigger mousemove events - Interactive example
 
03:10
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: 689 Chick Tuts
Sprite animation CSS3 only tutorial. Photoshop GIF to JPEG tutorial.
 
04:07
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: 918 Chick Tuts
CSS3 gradients tutorial. On the fly shadows.
 
02:40
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: 404 Chick Tuts
Smiley HTML Canvas Tutorial | Part 2: Circles and Ellipses
 
06:53
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: 892 Chick Tuts
How To: Fancy Arrow CSS only Tutorial
 
02:14
Learn how to create a fancy arrow using a simple CSS trick. Check out our latest project, FairPlayer Music Player: https://play.google.com/store/apps/details?id=com.fairplayer
Views: 3026 Chick Tuts
Square HTML Canvas Tutorial | Part 1: Rectangles and Text
 
04:03
Today we are going to learn what an HTML canvas is. We are also going to draw some basic rectangles and some text in set canvas. A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content. In order to draw graphics inside of it, we need to use JavaScript. Thank you for watching! For questions or suggestions, leave me a comment down bellow.
Views: 456 Chick Tuts
Loading circle tutorial. CSS only loading effect.
 
03:16
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: 1031 Chick Tuts
jQuery parallax effect on mousemove tutorial. Pink cat optical illusion.
 
02:41
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: 3201 Chick Tuts
jQuery Array Tutorial
 
02:41
Learn how to declare an array in jQuery and how to iterate over it using the $.each() function while doing a fun visual application using colorful balls.
Views: 343 Chick Tuts
jQuery UI slider tutorial. Kitty unblur trick.
 
03:09
Learn how to use the jQuery UI slider with this fun, short and practical tutorial. As promised, the link to the picture of the cat: http://tinypic.com/view.php?pic=2rfdhqo&s=8#.VhfU8fmqpBc
Views: 297 Chick Tuts
Text selection styling and CSS rule to disable selection highlighting
 
03:32
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: 780 Chick Tuts
Creating a Drop-down Navigation Menu with CSS. Fluid Drop-down Menu Tutorial
 
04:23
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: 424 Chick Tuts