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.
In this tutorial I will teach you how to create a twitter UI box for your website or desktop application. As always the PSD files are available for download with this tutorial. If you have any questions, please ask in the comments.
A recent requirement of mine was to convert large CSV files to XML, and then build an accompanying interface to update & manage the data. jQuery is very useful for traversing & manipulating large DOM’s, but there are a few gotcha’s to be aware of.
In this tutorial, we’ll learn how to create a slick email signup form. This form will harness the full power of AJAX, meaning that we will submit data to the server, validate it, and receive a response – all without a single page refresh Along the way, you should pick up some useful tips related to PHP and JavaScript, as well as general programming best practices.
With the constant move to replace Flash for simple use cases many websites are using HTML + CSS content sliders or carousels to show information. Many of these are quite complex and rely on animations created in javascript, the only way until CSS transitions were introduced into Webkit browsers (Safari, Chrome etc.) in 2008. By the end of 2010 transitions will be implemented in the stable build of all browsers apart from Internet Explorer – with features still being added to the IE9 previews we may even see them supported in IE9.
In this tutorial I will show you how to create a website layout using the apple.com style
Disqus is a great plug-n-chug commenting system, but it’s lacking a few very useful features: Markdown support, syntax highlighting the comments, and callbacks to tell you when a comment has been added or edited. And getting the comment/reaction count for the current page or linked posts is overly complicated and/or not-well-documented. This plugin hopefully simplifies the Disqus installation process while adding several helpful features.
In this tutorial, are going to create an animated 404 page, which will make the experience of running into the notorious 404 error a lot less frustrating. You can also easily modify and improve it.
We are like to presenting some useful JavaScript tutorials, jQuery snippets, libraries, articles, tools and resources, we’re today with some latest techniques about javascript. In this round-up we sharing calendars, forms, buttons, navigation, debugging, optimization and compatibility tables as well as handy resources and tools. We also cover various jQuery-plugins that will help you extend the functionality of your website development and improve user experience with ready components or coding solutions. Most of the Web Developers and Designers are using mostly JavaScript as per latest design requirements, because now many modren techniques are available on world wide web, we always follow various web techniques and scripts for best user experience, we sharing most wanted JavaScript Tutorials as per modern web needs.
Listify is a very simple free service for web developers which allows you to convert raw text to html’s ‘list’ or ‘option’ elements by choosing various options like delimiter, type of lists and ignoring digits.
Stylebot is a Chrome extension that aims to simplify customizing the web, making it more accessible and adaptable. It puts you in control of the webs presentation, allowing you to quickly change the appearance of any page.
It’s really bugged me when writing large JavaScript applications, organization of code never really seems to be considered. We use frameworks for all the server-side stuff we do, but everyone seems content writing JavaScript in one big mess. Enter MVC using MooTools.
Learn the difference between a Landing page, Land and Jump page and a Microsite and how to design a page that converts.
A cool jQuery slideshow that displays images in a reel like fashion, one image at a time and in an continual manner. Supports both horizontal or vertical orientation.
It will take an awful lot of effort on Google’s part to tear most web developers away from their beloved Firefox, but with the number of web-developer-friendly extensions for Chrome on the rise, developers in increasing numbers are giving Chrome a try and some of them are not looking back.
The new canvas tag in HTML5 is known for its illustration power. It’s basically an empty element on which you can write and sketch using Javascript. But there’s a hidden power: image manipulation. In this article we’ll show you some fundamentals of pixel manipulation in the canvas, and how to use this knowledge to obtain interesting effects.