Adaptive Images in HTML
Overthrow
A tiny, no-frills, framework-independent, targeted overflow: auto polyfill for use in responsive design. Disable Overthrow What is this all about? You want to use CSS overflow in your designs, but overflow doesn't work properly in many browsers, particularly mobile ones. Many popular mobile browsers treat overflow: auto the same as overflow: hidden, cropping overflow content from view, and leaving users no way to access it. But wait - many browsers actually support overflow very well! What is Overthrow? Overthrow is a conservative attempt at filling the gaps in overflow support, with an emphasis on letting native implementations do their thing, and in touch-supporting browsers, providing a very minimal polyfill in browsers where native support is not available. First and foremost, Overthrow is designed to simply enable native CSS overflow in browsers it deems to have native support, but it includes a touch-scrolling polyfill too! A few example pages That's about it. Form elements
Navigation Menu Solution for Small Screens with jQuery Plugin | Tutorials
Nowadays, websites are not only being accessed from desktop. We can access websites from tablet or mobile devices anytime and anywhere. Therefore, a front-end web developer must create website that is compatible to all screen resolutions, from desktop to mobile devices. Here comes Responsive Web Design. When converting theme to support responsive layout, I always find a problem: how to fit the long menu into a small screen? We can dynamically create the dropdown menu from the original using some help from jQuery. With the help of jQuery when the user is on a small screen and clicks the dropdown menu, they will get an interface to select an option that is nice and easy to choose. I created a jQuery plugin for this script and you can download it at GitHub. About Author Arif Widipratomo Arif is our Front-End Web Developer.
Doubletake - Lab - Graham Bird
Doubletake dynamically updates the src of your images based on the browser width. Start with a small, mobile-friendly image in your HTML. Doubletake will use a defined set of breakpoints to update image SRCs when necessary. I'm using a couple of tools to help me resize the images on this page - a local copy of SLIR and the src.sencha.io web service. If you aren't comfortable resizing images on the fly, you could simply host multiple copies and then set the Doubletake breakpoints to the sizes you have created. Basic usage $('#container').doubletake(); Config You can configure the breakpoints, the regular expression pattern to match on the src attribute and whether to update just on $(document).ready() or on $(window).resize() as well. 'breakpoints': [320,480,640,960,1024], 'pattern': '/slir/w([0-9]+)', 'watchresize': true breakpoints An array representing the sizes of images you want to use. pattern A regular expression used to replace the value of the src attribute. watchresize Browser support
Fluid CSS3 Slideshow with Parallax Effect
In this tutorial we will create a slideshow with a parallax effect using several CSS3 properties. The idea is to move the background positions of two backgrounds while sliding the container of the slides. View demo Download source In this tutorial, we are going to create a slideshow with a parallax effect with the help of some CSS3 properties. We’ll use radio buttons and sibling combinators for controlling which slide is shown. There will be two backgrounds and the idea is to change the background positions and the position of the slider with transitions in order to create a slight parallax effect. The graphics used in the demo are by: 5Milli (Global Vector Map) and by WeGraphics (Free Vector Infographic Kit). Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties. The Markup We will “connect” the input elements to the division with the class sp-content by using the general sibling combinator. The CSS
TinyNav.js · Convert navigation to a select dropdown on small screen
Hoverizr - A responsive jQuery Image manipulation and overlay plugin | Grayscale, Blur, Color Inversion
Hoverizr is a really small (2.5KB minified) responsive jQuery plugin that outputs manipulated images on top (or below) your targeted images. Currently, it features three effects: grayscale, blur and color inversion. Automatically when you move your mouse over the target elements, the element above fades out to reveal the element beneath whether it is the original image or the manipulated one. hover mouse over the image to see the original version Hoverizr takes advantage of the <canvas> element to do all the image processing. Version 1.0 Minified Version - 2.5KB: jquery.hoverizr.min.js Developer Version - 6.3KB: jquery.hoverizr.js Or you can download it on GitHub 1. As said earlier, Hoverizr takes advantage of the <canvas> element's image proccessing capabilities. Then, depending on whether you wanted the manipulated image to be above or below the original, on mouse over the top element fades out to reveal the element below. That's not all though. 2. And you are done. 3. Here they are: 4. 5.
CSS3 Solutions for Internet Explorer
Advertisement Experienced developers understand that CSS3 can be added to new projects with progressive enhancement in mind. This ensures that content is accessible while non-supportive browsers fall back to a less-enhanced experience for the user. But developers could face a situation where a client insists that the enhancements work cross-browser, demanding support even for IE6. Opacity / Transparency I think all developers are baffled at why Internet Explorer still fails to support this very popular (albeit troublesome) property. The Syntax You really only need the second line, which works in all versions of Internet Explorer. The opacity value at the end of each IE line works basically the same way that the opacity property does, taking a number from 0 to 100 (the opacity property takes a two-digit number from 0 to 1, so “44″ for IE would be “0.44″ for the others). The Demonstration This is the same element without the opacity settings. The Drawbacks Rounded Corners (border-radius)
