When it comes to design the key is to do more with less. Too much makes a page look cluttered, too little makes it look like you are back in the 80s. Luckily web developers can do some amazing things with CSS3 that give a page, or content within a page, that extra “pop” needed to make things stand out and look great without making the site look busy and thrown together.
Here are some CSS3 Crazy Effects with Border Transitions. Originally made by ksk1015. Pretty basic CSS3 code, but amazing output. They are pretty useful when making your image galleries look great and stand out.
Requirements: D3 Framework
Demo: http://thecodeplayer.com/walkthrough/simple-yet-amazing-css3-border…
License: License Free
Tiny Circleslider is a circular slider / carousel. That was built to provide web developers with a cool but subtle alternative to all those standard carousels. Tiny Circleslider can blend in on any wepage. It was built using the javascript jQuery library.
It supports iPhone, iPad and Android as well. A interval can be set to slide automaticaly every given milliseconds. You can fire a callback after every move. It is easy customizable and lightweight with only 130 lines of code. The mimified size is only 4 KB.
Requirements: jQuery Framework
Demo: http://baijs.nl/tinycircleslider/
License: MIT, GPL License
D3 Cloud is a Wordle-inspired word cloud layout written in JavaScript. It uses HTML5 canvas and sprite masks to achieve near-interactive speeds. This layout requires D3. It’s similar to d3.layout.force, in that it’s asynchronous and stateful.
The layout algorithm itself is incredibly simple. For each word, starting with the most “importantâ€: Attempt to place the word at some starting point: usually near the middle, or somewhere on a central horizontal line. If the word intersects with any previously-placed words, move it one step along an increasing spiral. Repeat until no intersections are found.
Requirements: D3 Framework
Demo: http://www.jasondavies.com/wordcloud/
License: License Free
TypeScript is a language for application-scale JavaScript development. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript starts from the syntax and semantics that millions of JavaScript developers know today.
With TypeScript, you can use existing JavaScript code, incorporate popular JavaScript libraries, and be called from other JavaScript code. TypeScript compiles to clean, simple JavaScript code which runs on any browser, in Node.js, or in any other ES3-compatible environment.
Requirements: –
Demo: http://www.typescriptlang.org/
License: Apache License
CSSDesk is an Online CSS Sandbox. It allows people to quickly test snippets of CSS code, and watch the result appear live. I had very high ambitions for the project. There are line numbers and syntax highlighting appear live in the text box as you type. One of the greatest things is that it allows users to share their code with others as well.
And also, if you haven’t heard about Google’s Code Playground, it’s a web-based tool that lets web developers try out all of the APIs that Google provides, tweak the code, and see the results. Google’s Code Playground lets you play around without opening an external editor, and all of the APIs are loaded for you in the Pick an API box.
Requirements: –
CSS Desk: http://cssdesk.com/
Google Code Playground: http://code.google.com/apis/ajax/playground/
License: License Free
Uploading in HTML has always left much to be desired from developers. With the introduction of the File and Drag-and-Drop APIs, we are beginning to see improvements across many sites whose core functionality relies on uploading.
In Part I of Advanced Uploading Techniques, we will discuss reading file information and posting that up to a server. Of particular importance to this will be the concept of chunked uploading. In the Part II, we will address is the lack of a connection. Hardwired ethernet connections will always provide the most stable uploads, but for mobile browsers, especially ones not connected via WiFi, we must be able to react to a loss of connection.
Requirements: JavaScript Framework
Part I: http://creativejs.com/tutorials/advanced-uploading-techniques-part-1/
Part II: http://creativejs.com/advanced-uploading-techniques-part-2/
License: License Free
Last week, Twitter has updated your profile design again. Users’ new Twitter profiles now includes a Facebook / Google+-like cover image and repositioned profile image. The new striking design is already rolled out to all users.
If you’re visiting Twitter using your computer, you can upload your cover by clicking the image of the cog in the upper right-hand corner and choosing to “Edit Profile.†Choose “Design†from the left-hand menu, and then scroll down to the “Customize Your Own†section.
You will find some of the best Twitter Covers available on the internet from TwitrCovers. All Twitter covers are divided into categories like Nature, Movies, Animals, Art, Games, Quotes and etc. I am sure you can pick few ones for yourself.
Requirements: –
Demo: http://www.twitrcovers.com/
License: License Free
Attracting a potential customer is hard enough. Grabbing their interest and retaining them is even more difficult. It’s important to design your site so that user frustration is kept to a minimum, thereby maximizing customer retention.
KISSmetrics has published an Infographic: What Makes Someone Leave Your Website, is showing some examples of what not to do when designing your website.
Requirements: –
Demo: http://blog.kissmetrics.com/leave-a-website/?wide=1
License: License Free
Currently, people are managing dependencies, such as JavaScript libraries, manually. This sucks, and we want to change it. Bower is a package manager for the web. Bower lets you easily install assets such as images, CSS and JavaScript, and manages dependencies for you.
In a nutshell, Bower is a generic tool which will resolve dependencies and lock packages down to a version. It runs over Git, and is package-agnostic. A package may contain JavaScript, CSS, images, etc., and doesn’t rely on any particular transport (AMD, CommonJS, etc.).
Bower then makes available a simple programmatic API which exposes the package dependency model, so that existing build tools (like Sprockets, LoadBuilder, curls.js, Ender, etc.) can consume it and build files accordingly.
Requirements: –
Demo: http://twitter.github.com/bower/
License: MIT License
Even if you hate socialism, you’ll love this flexible jQuery social media plugin. jQuery Socialist is a plugin that lets you create a social stream or social wall from multiple social networks in one place. It supports Facebook, Twitter, LinkedIn, YouTube, Tumblr, Flickr, Pinterest, RSS Feeds, Craigslist, Google+ and more.
It displays updates from multiple social networks in attractive visual layouts. It supports multiple themes and it’s easy to implement with just a few lines of code. jQuery Socialist is provided under a MIT license.
Requirements: jQuery framework
Demo: http://plugins.in1.com/socialist
License: MIT License
