After a month of inactivity on my blog, I'm finally back with a simple useful post about tools for speed up development of CSS3.
CSS3 was an huge evolution for the Cascading Style Sheets's World. The introduction of transitions, transforms and other new utilities to manage the appearance of our HTML page was fresh air for this style sheet language.
Today, with CSS3, when can do stunning transitions with few lines of code, amazing looping animations, add shadows to box and text, define media queries to create custom styles based on dimensions of our web page.
In this post I want to show you 4 useful web resources to boost up you CSS development and learn more about the syntax of every property.
Easing animation tool
Do you know that bezier curve are also available in CSS3 transitions? Maybe you know the the simple
ease-in-out timing function but if you are looking for something more stunning maybe you have to check Caesar, an amazing easing animation tool for CSS3.
It provides a big list of presets with an easy-to-use graph to customize your transition curve, combined with a visual preview to check the final result. Of course, you can copy the generated code (with vendors) to use in your project.
-webkit-transition: all 800ms cubic-bezier(1.000, 0.000, 0.000, 1.000); -moz-transition: all 800ms cubic-bezier(1.000, 0.000, 0.000, 1.000); -o-transition: all 800ms cubic-bezier(1.000, 0.000, 0.000, 1.000); transition: all 800ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
Box Shadow Generator
CSS Shadows were a great turning point on web development. Stop using images to create 3D effects and depths on your web page, just add a
text-shadow property. Of course, there is a amazing code generator for this effect: use it, play it and learn the css rule properly!
The CSS3 shadow property have a nice set of options to set: angle, blur, distance, color and opacity. The tool have a nice UI to choose the best option for you and check a live preview of the result.
-webkit-box-shadow: 11px 11px 10px 0px rgba(125, 75, 38, 0.75); -moz-box-shadow: 11px 11px 10px 0px rgba(125, 75, 38, 0.75); box-shadow: 11px 11px 10px 0px rgba(125, 75, 38, 0.75);
Gradient Color Generator
Gradient colors are another big feature of CSS3. If you have played with software like Photoshop you know how this thing work and today we can do it with some lines of code. Here is a nice tool to help you to master this property.
background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(left, #1e5799 0%, #207cca 26%, #207cca 26%, #2989d8 68%, #7db9e8 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #1e5799 0%,#207cca 26%,#207cca 26%,#2989d8 68%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #1e5799 0%,#207cca 26%,#207cca 26%,#2989d8 68%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 */
Clip and masking elements of our DOM could be a great idea to create nice animation effect or visual tricks. Sometimes could be difficult create elaborated masks so we can have help from some nice tools to play with the
clip-path property. With the tool linked down here we can create custom shapes to create masking effects: the tool will give us CSS style and SVG path for cross browser support.
/*Chrome,Safari*/ -webkit-clip-path: polygon(200px 250px,400px 100px,300px 50px,0px 0px); /*Firefox*/ clip-path: url("#clipPolygon");
<svg width="0" height="0"> <clipPath id="clipPolygon"> <polygon points="200 250,400 100,300 50,0 0"></polygon> </clipPath> </svg>
Hope you enjoy this tools!
For any question, integrations and more, post a comment below.