Glitch Effect on Text / Images / SVG. Lucas Bebber's Glitch is a super cool effect.
It's like you're looking at some text displayed on a progressive scan monitor that has been dropped on the ground one too many times and so the alignment of the pixels is off in weirdly un-even amounts time and space. It's bonafide CSS trick if there ever was one! It took me a bit to figure out how it was working, so I thought I'd explain.
Then I ended up making it work for other kinds of content as well as making it into a group of Sass @mixins to make working with it a bit easier. Three Copies of the Text While the HTML is just: <div class="glitch" data-text="GLITCH">GLITCH</div> Three copies of it are created, via pseudo elements, and they are positioned right on top of each other. Producing three unique copies that can be controlled individually: Alter the Copies Each copy is identical except that: It's offset to the left or rightIt has a highlight, in the form of a text-shadow So now the three copies are like this: Clipping the Copies Sass @mixins. Chartist - Simple responsive charts. You may think that this is just yet an other charting library.
But Chartist.js is the product of a community that was disappointed about the abilities provided by other charting libraries. Of course there are hundreds of other great charting libraries but after using them there were always tweaks you would have wished for that were not included. Highly customizable responsive charts Facts about Chartist The following facts should give you an overview why to choose Chartists as your front-end chart generator: Simple handling while using convention over configurationGreat flexibility while using clear separation of concerns (Style with CSS & control with JS)Usage of SVG (Yes!
These projects and wrapper libraries are known to me right now that either use Chartist.js or wrap them into a library for usage in a framework. Cross-browser support Note that CSS3 animations on SVG CSS attributes are not supported on all browsers and the appearance may vary. 10 Awesome jQuery and HTML5 Audio Players. Want to play audio on your website?
Media Element js Instead of offering an HTML5 player to modern browsers and a totally separate Flash player to older browsers, MediaElement.js upgrades them with custom Flash and Silverlight plugins that mimic the HTML5 MediaElement API. MediaBox HTML5 Music Player with 3 CSS3 Skins Universal HTML5 Player MusicBox. Plain Pattern. Execute PHP online - functions-online (français) MyTinyTodo - simple open source to-do list script written in PHP and jQuery. Free textures for your next web project. The seigaiha or wave is a pattern of layered concentric circles creating arches, symbolic of waves or water and representing surges of good luck.
Made by Olga Libby Download A friend gave me a cork wallet. I scanned it and made this. Made by Atle Mo Download The Asanoha pattern is one of the most popular traditional patterns often seen on Japanese kimono. Made by Olga Libby Download Yes, the Japanese sure know a thing or two about patterns. Download Long overdue, I know. Made by Aslan Zamanloo. Download It’s not quite a new year yet, but soon! Made by Mustafa BAL. Download Colorful waves, with value apparently. Made by Michal. Download This is rather bisarre, but interesting. Made by Ignasi Àvila Padró. Download Fabric is never out of style, cheap or not. Made by Ufuk Sarp Selçok. Download Everyone loves a bit of pink, right? Made by ExcogitoWeb. Counter-increment compteur css counter css. Saviez-vous que la propriété Css counter-increment vous permettait de créer un compteur ?