WebAppers

/ best free open source web resources /

Shopify

How to Create Simpsons Characters in Pure CSS

Posted · Category: Information

The Simpsons is an American family animated sitcom created by Matt Groening. The Simpsons is the longest-running American sitcom, the longest-running American animated program. The Simpsons is widely considered to be one of the greatest television series of all time. So, how about making Simpsons characters in pure CSS?

“First of all I took each character’s face and broke it up into different shapes that I could then piece together to create the character,” Chris Pattle explains. “You often see artists do the same kind of thing when demonstrating their drawing techniques so I figured it was the right way to start. The hardest part of this was breaking down the character into shapes that I knew I could create with CSS.” Chris Pattle said.

simpsons-css

Requirements: CSS
Demo: http://pattle.github.io/simpsons-in-css/
License: All images are copyright to their respective owners

Create Parallax Scrolling Sites Without Writing Code – Webydo

Posted · Category: Information

The popular B2B web design studio, Webydo continues to create quite the stir amongst the web design community and is making waves again – this time with their release of the first code-free Parallax Scrolling Animator. Webydo is an advanced online web design studio for creative professionals that allows for pixel perfect accurate web creation and incredible features for designers to take advantage of without having to know how to code. And now Webydo’s users can once again reach new heights in their web designs with the ability to create parallax scrolling websites, code-free.

One unique feature of Webydo is that it provides users with a voice through their Participation panel on which designers can make suggestions, vote on these posts, and then watch Webydo take action on the most popular ones. Parallax scrolling was one of the most popular feature suggestions that Webydo pushed to the top of its list. Still in closed beta and Webydo is inviting the first 8,000 designers who sign up in the next seven days to join the closed beta program. Invites will go quick, so hurry up and get yours before they are gone. Just last week Webydo offered 2,000 invites to their community, which ran out in the first 1.5 hours, so don’t miss out on the chance to be part of web design history.

image001

Take a look at the details below to see just how perfectly Webydo’s code-free parallax scrolling feature works seamlessly in line with the rest of its design studio. Then get ready to join the rest of the professional design community who had previously been limited in their ability to offer parallax websites to clients until now. Read the rest of this entry »

Deal of the Week: 100+ Geometrics Backgrounds & Patterns

Posted · Category: Information

If backgrounds are your business and business is your business, then this deal is so for you. This designerific Mighty Deal features not 1 but 2 amazing collections for you! First up is a set of 80 high-quality backgrounds and patterns to spice up your latest project.

Fully scalable and easy to edit, these badboys will make even the dullest-looking projected pop! Next up is a collection of 30 business card templates to let you spread the word about yourself and your business. Each hi-res JPG clocks in at 3840×2970 or 3840×2400 and is easily resizable to suit your needs, without having to worry about losing any quality in the process.

This backgrounds and business cards bundle normally sells for $200, but for a limited time only, you can get both incredible collections for only $18. That’s more than 90% off the regular price.

2014-06-02_194002

131 Free Design Resources for Web Designers

Posted · Category: Information

If you are a designer you will surely agree to this, won’t you? What makes them better is that they are for free! Yes, thats right. If you are a designer then you will certainly want to checkout these high quality resources which you can’t refrain from downloading.

Get a sneak peek into these design resources now:

1. Web design UI Elements

Present your website in a professional manner with this UI kit which includes over 100 vector graphic elements in 6 categories.

Download these here

2. Elegant Print Templates

Go for this traditional but inexpensive way to promote and advertise your Brand. Customize these easily customizable templates for Personal or Commercial Use Read the rest of this entry »

How to Do Parallax Properly with Great Performance

Posted · Category: Information

Parallax has become, for better or worse, an increasingly popular web trend. The problem is, a vast majority of sites using parallax suffer from terrible scroll performance. It’s especially bad on devices with high pixel density like retina MacBook Pro’s.

Dave Gamache has published an article: Parallax Done Right. He played quite a bit with parallax sites and has come up with a non-comprehensive list of Do’s and Don’ts that will hopefully keep you on track to get killer performance.

parallax-demo

Requirements: JavaScript / jQuery Framework
Demo: http://davegamache.com/parallax/
License: License Free

Best Node.js Tutorials and Resources for Beginners

Posted · Category: Best Collections, Information

Node.js is increasingly gaining popularity among web developers. Due to all hosting companies Node.js remains the prerogative of dedicated servers and VPS. Actually VPS is a solution that even a small startup can afford.

For more details refer to the documentation on nodejs.org. As you know, Node.js supports modules. You can find the folder for global modules here: \winginx\nodejs\node_modules\. Modules installed in this folder will be available in all scripts. You can use them, or create a copy in the home directory of your site.

  • Winginx includes module manager NPM, popular framework Express.js, and template engine Jade.
  • For debugging Node-Inspector module is connected. It’s ran as a Node.js server, to access it hit http://localhost:8080/ (please note that it works only in the webkit-compatible browser – Google Chrome).
  • What’s more, to ease your work with database modules and MySQL are also connected.

In brief we can say that Node.js, in contrast to PHP, is not interpreted but is compiled into a single server, and therefore occupies separate port. In conjunction with nginx it works as a backend-server, practicing dynamic queries, and nginx is engaged in statics. Read the rest of this entry »

Deal of the Week: The Ultimate Logo Design Kit

Posted · Category: Information

If you’re looking for a little logo inspiration, this Mighty Deal has your name on it. The ultimate Logo Mockup & Design Kit includes 70 retro logo templates, as well as 50+ photo-realistic logo mockups. These high-quality vector files, from Cruizine Design, are fully customizable and a snap to use.

In no time at all, you can change up the color, size, shape or details and have yourself a professional logo, banner, sign or promotional piece for your latest project. Normally, this Logo Mockup & Design Kit sells for $100, but for a limited time only, you can get the entire kit and kaboodle for just $24. That’s more than 75% off the regular price.

logo-design

How to Make Cool Animated GIFs for Your Design

Posted · Category: Information

You may have seen really cool animated GIFs that design professionals are using to present UI design on Behance, Dribble and other design communities platforms and wondered how did they created them. What is fast becoming one of the best ways of illustrating gestures and animations in mobile apps, animated GIFs offer a little more over traditional storyboards and static sceenshots.

Calvinpedzaihas shared a tutorial: How to create animated GIFs for UI design presentations, shows us how to create the animated GIF. And it will explain how to export your files properly and optimize into a GIF. Download of project file is also available.

weather-app-animated

Source: How to create animated GIFs for UI design presentations

25 Principles of Mobile Site Design from Google

Posted · Category: Information

Consumers increasingly rely on the mobile web to research and make purchases, which makes it more important than ever for companies to have an effective mobile presence. But what makes a good mobile site?

To answer this question, Google partnered with AnswerLab to research how a range of users interacted with a diverse group of mobile sites. From this research: Principles of Mobile Site Design: Delight Users and Drive Conversions, Google established 25 principles of mobile site design to help companies build mobile sites that delight customers and drive conversions.

mobile-design

Source: http://www.google.com/think/multiscreen/whitepaper-sitedesign.html

Deal of the Week: Typo-Painter for Photoshop

Posted · Category: Information

Using text to create images is a really unique and entertaining approach to creating graphics. The really neat thing is that you can do it yourself with minimal effort.

Typo-Painter for Adobe Photoshop will quickly become your absolute favorite plugin in your artistic toolbox! This plugin lets you create a typographic painting from any image, using any text you’d like.

Since your word-filled photo is saved in an EPS format, you can edit, scale, and customize the results. Using a vector tool software like Adobe Illustrator or CorelDraw, you can easily edit the final results any way you’d like. Typo-Painter normally sells for $10, but for a limited time only, you can get this incredibly fun and useful tool for just $5. That’s a 50% savings off the regular price.

typo-painter

Page 6 of 37«2345678910»...
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons