CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Lets have a look at how CSS filters work and how you can quickly create elements that are beautifully filtered
Today we will create a collapsing menu that contains vertical navigation bars and a slide out content area. When hovering over a menu item, an image slides down from the top and a submenu slides up from the bottom. Clicking on one of the submenu items will make the whole menu collapse like a card deck and the respective content area will slide out.
Throughout the years I’ve found that it’s a waste of time trying to adapt a pre-made framework to a site, it rarely works well and you end up spending more time fighting to get the framework to fit, than if you had just coded the site from scratch.
Using something you’ve built ensures it works, remains elastic for all of your sites, contains the same coding style and saves you time for each site you build.
Create CSS buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible.
imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features, such as photo notes like those on Flickr.
selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.
In this tutorial we are using Google’s AJAX Search API, to create a custom search engine, with which you can search for web results, images, video and news items on your site.
The Periodic Table of the HTML5 Elements shows the 104 elements currently in the HTML5 working draft and two proposed elements marked with an asterisk.
Many CSS maintenance issues that arise can be avoided if you use PHP to generate your CSS, and use PHP’s capabilities to abstract multiple lines of CSS3 into a single line.
A quick look at why we use AJAX loading GIFs, how to get a better user experience out of them, and 2 great generator sites for you to get them from.
In this tutorial, we’ll build a innovative login form, where the user drops a “webid” file in the login form to authenticate. The file contains an image and some info about the card holder. Most importantly, the file contains a long string of random characters used to generate the key sent to the server.
In this tutorial we are going to create a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview. The idea is to have a thumbnails bar at the bottom of the page that scrolls automatically when the user moves the mouse. When a thumbnail is clicked, it moves to the center of the page and the full screen image is loaded in the background. Now the user can move up and down and the image will get scrolled automatically, giving him the opportunity to see all of the image.
HTML5 Microdata could mark the beginning of a practical, realistic approach to a truly semantic web. If so, why isn’t anyone talking about it!?
After you make the building blocks of your application, using Models, Views are how you display that information to a user. Having written a lot of JavaScript that adds content to the page, I know just how much it can suck. Wouldn’t it be so much nicer to write your views like we do in other languages?
Javascript is now extremely important. Some sites use javascript for a tiny enchantments, many of today’s webapps are depending on it, some of them are even totally written in js. In this article I’ll point out some important rules, how to use your javascript, which tools to use and what benefits you’ll gain from it.
This post goes through the entire process of designing and writing the front-end code for a modern, minimal blog. The project uses a number of cool technologies including HTML5, CSS3, @font-face and jQuery. The entire project is available as a zip download.
The plugin will analyse the properties youre animating on, and select the most appropriate method for the browser in use. This means your transitions on left, top and opacity will convert to a CSS3 transition on Webkit & Mozilla agents that support it, and Opera 10.50 . If the user is on a browser that has no CSS3 transitions, this plugin knows about it and wont get involved.
HTML5 has been released for quite a while now, and its capabilities never cease to amaze me. Here, I have got 10 more HTML and Javascript demonstrations that show you what they can do.
The beauty in CSS is that a tiny directive can make a huge difference in how the page displays. Here are seven quick CSS snippets that will give your website more “pop” and make your user’s experience more functional and enjoyable.
The differences between grabbing the text with textContent and innerText vary wildly. Because no whitespace normalization is performed, what textContent is essentially doing is acting like a PRE element. innerText performs the normalization, but varies between WebKit and IE, and even between IE7 and IE8. The solution? The custom getPlainText() function.