WebAppers

/ best free open source web resources /

Shopify

A Comparison of JavaScript Physics Engines

Posted · Category: Information

In this article we will take a look at three popular Javascript physics libraries and one that is currently in development: box2dweb, Ammo.js, JigLibJS, and Cannon.js. For each one, a quick introduction will be given and then the library will be rated based on ease of use, performance, and feature set.

Though it is possible to run any of these libraries without a visual representation, that isn’t much fun, so we will set up a small environment to see the results as the simulation runs. I’ll use Three.js and its CanvasRenderer for this due to its popularity and how simple it is to use. Besides showing how the objects are interacting, this will also demonstrate how to extract scene information from each library. The scene will consist of two ramps leading down to a floor; balls will drop down onto the ramps from random locations above the scene, roll down the ramps, and land onto the floor.

javascript-physics

Setup

Our base scene that will be used in each example has two ramps which lead down to the ground. Balls will be dropped from random points above the ramps, rolling down to and then off of the ground plane. This simple scene will highlight the similarities and differences between the four libraries. Read the rest of this entry »

The Best Deals for Design Apps & Resources

Posted · Category: Information

TickitWickit.com is a popular site that retails heavily discounted bundles of high quality software, aimed at empowering the creative community on a quarterly basis. It comes with a unique concept: everything you buy earns you future discounts. Users can save 2x on every purchase by earning “tickits” – a discount you win when you make a purchase – to save up to 25% additional discounts off future purchases.

Now, they are running a Ten Everyday Promotion for the next 3 Days, they will randomly select ten lucky winners. That’s 30 winners who will get ALL the deals for free for A WHOLE YEAR. That’s 365 days of deals. You can check out their current deals.

1winner-everyhour-webappers

There are some awesome deals there like 60% off WebIconSet Deal gives you access to over 1,000 and counting of high-quality and user-friendly stock icons till the end of year 2015! 75% off Themify Deal gives you two developer themes for just $29.

design-deals

Experiments: Interactive CSS3 Lighting Effects on iPad

Posted · Category: Information, License Free

3D transforms are awesome, but they’re even cooler with lighting effects. Tom Giannattasio, working at edX which is a joint venture between MIT and Harvard focused on building an open-source platform for online education.

He has created an Interactive CSS3 Lighting Effects for iPad. The specular highlights are created with CSS gradients and masks. The cast shadow relies on box shadows and transforms. It looks best in Safari browser.

css3-lighting

Requirements: CSS3
Download Link: http://attasi.com/labs/ipad/
License: License Free

How to Create PayPal Loading Animation with CSS3

Posted · Category: Information, License Free

PayPal is a global e-commerce business allowing payments and money transfers to be made through the Internet. Online money transfers serve as electronic alternatives to paying with traditional paper methods, such as checks and money orders. Most of the websites accept PayPal payment nowadays.

I particular like the loading animation of PayPal while you are logging in. Fabrice Weinberg has recreated the PayPal Loading Animation using Pure CSS. It is absolutely mind-blowing. It’s pretty amazing what can be achieved with gradients. Take a look at it, I am sure you can learn some CSS techniques there as well.

paypal-loading-animation-css

Requirements: CSS3
Demo: http://codepen.io/FWeinb/pen/BeJLo
License: License Free

Awesome CSS3 Border Transition Effects

Posted · Category: Information, License Free

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.

css3-border-transition

Requirements: D3 Framework
Demo: http://thecodeplayer.com/walkthrough/simple-yet-amazing-css3-border…
License: License Free

Users’ New Twitter Profiles Now Includes Cover Image

Posted · Category: Information, 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.

twitter-covers

Requirements: -
Demo: http://www.twitrcovers.com/
License: License Free

Infographic: What Makes Someone Leave Your Website

Posted · Category: Information, 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.

what-makes-someone-leave-a-website

Requirements: -
Demo: http://blog.kissmetrics.com/leave-a-website/?wide=1
License: License Free

How to Make Awesome Lasers Effect with CSS3

Posted · Category: Information, License Free

Jeff Broderick made some pretty awesome work, and he is showing an awesome laser effect on his portfolio website. And then Ryan Collins thought it was a pretty cool idea. He figured it would be easy enough to make Lasers Effect in CSS3, so he decided to give it a try.

You can hover over the image on the left and see the magic at work on the demo site. At the moment it only works on webkit based browsers. It’s very handy to achieve via CSS3, and the effect is very attractive.

css3-lasers

Requirements: CSS3 Support Browsers
Demo: http://www.ryancollins.me/?p=539
License: License Free

Create Stacked Images with CSS3 Pseudo-Elements

Posted · Category: Information, License Free

Inspect Element has written a tutorial to show us you can create a simple “stacked” look to some images with CSS3 Pseudo-Elements.

It’s important to note that currently only Firefox supports transitions on :before and :after (the transitions are defined earlier in the page on the pseudo elements themselves) as far as I know. WebKit doesn’t seem to support it in any incarnation at this point but hopefully will add it sometime soon.

css3-stack

Requirements: CSS3 Pseudo-Elements
Demo: http://inspectelement.com/demos/css3/stacks/
License: License Free

HTML5 APIs and Specification for Web Developers

Posted · Category: Information, License Free

Whilst we see, read and hear a lot about the new semantic elements in HTML5 we arguably hear far less about the application programming interfaces (APIs) that make up a large part of the specification itself.

In some cases the APIs have been around and implemented for a while, but they’ve never been documented; something which HTML5 has set out to change.

.Net Magazine has published an article: The developer’s guide to the HTML5 APIs, which we’re not going to look at code but instead we’ll focus on describing the APIs, their purpose and progress. So that you will be in the right direction to find out more.

html5-api

Source: http://www.netmagazine.com/features/developer-s-guide-html5-apis

Page 17 of 33...«131415161718192021»...
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons