If you think you know HTML and have a good handle on modern web standards, you should try this 15 HTML questions challenge by Alexander Dawson from sixrevisions. The questions will test your familiarity and understanding of HTML5 as well as related markup languages like XML and microformats. There is no time limit and score-tracking for this challenge, so take your time. Hit the button below to accept the challenge.
CSS sprites are usually used in situations that involve hovering over an element to manipulate the sprites. With CSS keyframe animation that is running infinitely, sprites can be made to animate almost like a GIF, but with finer control. In this inspirational Codepen demo by Avaz Bokiev, the sprites are animated using CSS continuously without needing any hover interaction. The animation can be stopped using a checkbox and you can control the sprite to animate forward or backward. Check out the CSS sprite animation demo by clicking on the button below.
Ever wondered how to produce a kinda realistic text rendering on the web using CSS? Check out this brilliant Codepen demo created by Lucas Bebber. The result convincingly looks like a camera shot of some text from a newspaper or a book. This realistic text effect is accomplished using mostly CSS. The trick is overlaying three or more slightly transparent objects and using 0.3 degrees rotation variation between each layer. Hit the button below to see the demo and codes.
- CSS Libraries & Toolkits
- Responsive Web Frameworks
- Material Design Frameworks
- Random CSS Stuff
- Web-Based Apps
Click on the individual links to view more. We hope you find this compilation of web development tools useful.
If you are one of the regular readers of Medium, you will notice they have a really clean image zooming effect when you click on the article images. Now you can have this zooming effect on your website too by using Zoom.js jQuery plugin created by Jacob Thornton. Just like Medium, this plugin produces a smooth zooming transitions that reuses Bootstrap transition.js and you can escape the zoom-in mode by clicking anywhere on the webpage, scrolling away or pressing [esc] key on your keyboard. To use zoom.js, simply link zoom.js, zoom.css and transition.js to your website. Last step is to add a
data-action="zoom" attribute to the images you want to make zoomable. Hit the button below to learn more about Zoom.js.
Dragula.js is a standalone library created by Nicolas Bevacqua for providing drag and drop features to your website. Dragula claims to provide the easiest possible API to make drag and drop a breeze in your applications. The main features of Dragula are:
- Super easy to set up
- No bloated dependencies and lightweight (~9KB minified)
- Figures out sort order on its own
- A shadow where the item would be dropped offers visual feedback
- Touch events
- Solid browser support
Hit the button below to learn more about Dragula.
Swiper is a standalone modern mobile touch slider with hardware accelerated transitions and amazing native behavior that runs great on iOS, latest Androids, Windows Phone 8 and modern desktop browsers. “Modern” here means it is not compatible with all platforms because it is only focused on modern apps/platforms to bring the best experience and simplicity. This free and open-source touch slider is created by iDangero.us. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps. Swiper comes with a very extensive API, solid documentation and a nicely prepared demo page with source codes. Hit the buttons below to learn more.
One of the simple but beautiful effects you can apply on a webpage especially landing pages is by having a fixed-position image placeholder that changes its image as user scrolls up and down the page. This can be done using just CSS as demonstrated by UI/UX designer Sebastiano Guerriero in his blog at Codyhouse.co. The single CSS rule to accomplish this is
background-attachment:fixed; which prevents the image placeholders from scrolling together with the page. Finally in each placeholders you simply need to set the image relevant to the content for the particular section. Hit the buttons below to learn more or jump straight to the demo.