Design, CG Graphics & Inspiration

Web Design Digest No.7 (18 — 24 August 2013)

This is weekly Web Design Digest No.7. Оnce a week, we will publish a digest of the latest news, useful tools for web developers, freebies and many more cool stuff from the world of web design.

Web Coding

Emmet LiveStyle

Emmet LiveStyle is a plugin for live bi-directional (editor↔browser) CSS editing of new generation. Currently, it works in Google Chrome, Safari and Sublime Text, more browsers and editors will be available later.

Introducing LiveStyle: Better, Stronger And Smarter CSS Live Reload

In the past, we featured some exciting tools and libraries: PrefixFree, Foundation, Sisyphus.js, GuideGuide, Gridpak, JS Bin and CSSComb. All of them have been developed and released by active members of the Web design community as open-source projects.

How to test responsive designs for free

“Stop resizing that browser, you’re gonna wear it out!” How many times have you heard that one? Well okay, maybe not so many times, but if you develop responsive design web sites, you know what I’m talking about: with every DOM or CSS edit you’re dragging that browser edge back and forth, testing your changes and looking for anything broken.

Client-Side Storage Options

It’s part of the ‘hands-on’ look at client side storage in this post (via the jsFiddles included). The FileSystem API example stores sample data and then displays it on screen. :-)

Resize an Image Using Canvas, Drag and Drop and the File API

It’s a massive honor to have Tom “Trenkavision” Trenka write a guest post for this blog. Tom was one of the original contributors of the Dojo Toolkit and my mentor at SitePen. I’ve seen his genius first hand and he’s always the first one to foresee issues with a potential solution. He also thinks outside the box, coming up with unconventional but reliable solutions to edge case problems. This is a perfect example.

Using WebGL to Add 3D Effects to Your Website

You have probably heard about the growing interest in WebGL, the technology that allows for real-time 3D graphics in the browser. For a few years, talented people around the world have been using it to create amazing experiences, music videos, games, data visualizations, and more.

World Simplest HTML5 WYSISYG Inline Editor

The demo uses bootstrap and jQuery, but only to make the code a little more brief, and could all easily be done in plain old JavaScript.

New Features of Edge Animate CC

Edge Animate is a new tool developed by Adobe in September 2012 which is designed to create animated, interactive content for the Web.

CSS coding

Absolute Horizontal And Vertical Centering In CSS

We’ve all seen margin: 0 auto; for horizontal centering, but margin: auto; has refused to work for vertical centering… until now!

Six Ways of Centering With CSS

Centering HTML elements on a web page seems like it should be simple. In some cases, it is… but complex layouts often eliminate some solutions, leaving web developers working without a net.

10 CSS selectors you shouldn’t code without

Every time we use CSS, we use selectors. But despite this, CSS selectors are one of the more neglected parts of the specification.

Creative Link Effects

Subtle and modern effects for links or menu items

Language-wide Features in CSS

In addition to the unique property/value pairs that CSS offers, there are also a small handful of language-wide features that can come in handy, including a few that are brand new in the spec.

Emmet — the essential toolkit for web-developers

Emmet (previously known as Zen Coding) is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow

Spacing The Bottom of Modules

Here’s a simple example where the module is set apart from the background through color differences

Facebook like menu (responsive)

We have prepared two demonstrations (different responsive results). For the first menu, it turns into a selector, for the second one it turns into a vertical menu

Sass mixin for offsets

Over the last months, I have seen a ton of mixins to handle offsets when dealing with absolute / fixed / relative positioning.

Creating a 3D Cube Image Gallery

This tutorial outlines how you can make something like this, emphasizing the CSS3 3D concepts.

JavaScript

Why Does Angular.js Rock?

Angular.js is a MV* (Model – View – Whatever) Javascript framework which is maintained by Google which excels in the creation of single-page-applications or even for adding some “magic” to our classic web applications.

Backbone.js Tips And Patterns

Backbone.js is a popular open-source JavaScript “MV*” framework that has gained significant traction since its first release a little over three years ago.

Building Modular JavaScript Projects with RequireJS

This opens up a host of problems with managing dependencies in the JavaScript code base. In this article, we will look at the usage of RequireJS, which makes these dependencies easier to manage, and as a result, less soupy code.

TodoMVC

Developers these days are spoiled with choice when it comes to selecting an MV* framework for structuring and organizing their JavaScript web apps.

Creating a Completely Customized Google Map Plugin for jQuery

Last week I briefly touched on the customization possibilities of Google Maps, this week we’ll be taking a more in depth look at what exactly you can customize.

11 Javascript ToolKit For Creating Charts and Graphs

This article is basically your guide to the most popular and an effective JavaScript toolkit for creating charts and graphs. We will give you an overview of what these toolkits can actually do for you.

Sticky-Kit

Sticky-kit provides an easy way to attach elements to the page when the user scrolls such that the element is always visible.

tidyTime.js

A jQuery plugin, that provides a more friendly way of displaying time updates to users!

HTML5 form support for legacy browsers

Here is formFive, a polyfill for your forms that makes some HTML5 form features available on older browsers.

JointJS – JavaScript diagramming library

JointJS is an open source JavaScript library for creating diagrams. It can be used to create either static diagrams or, and more importantly, fully interactive diagramming tools and application builders.

gradientmaps.js – Gradient Maps for the Web

In Photoshop, you can manipulate images in all kinds of ways using gradient map adjustment layers. You can tint or tone images, easily convert them to black and white, adjust the midtones, or remap all the colors of an image into your own custom colormap for some great creative effects.

HTML(.js)

HTML is a small, powerful way for you to enjoy working directly with the DOM.

Web Design

WordPress UI Evolution For The Past 10 Years

WordPress turned 10 and the name certainly doesn’t need an introduction, especially to those who are involved in blogging. WordPress has been one of the greatest tools a writer can have when it comes to online publishing. It has certainly made its name over the whole Internet, and helped bloggers and website owners to achieve their publishing dreams.

A Journey Through Beautiful Typography In Web Design

Typography has the potential to go beyond merely telling a story — it shows the user who is behind the website and what you’re about.

The Pronunciation of European Typefaces

Here are some popular European typefaces and their proper pronunciation in German, French and Italian.

How to keep responsive design engaging

Responsive web design is popular and it’s absolutely no secret. It’s what experts are calling for and what many brands are switching to. It’s not just about creating a mobile-ready site, but about making your site visible to every browser size, whether via desktop, tablet or smartphone.

The Difference Between Adaptive Design And Responsive Design

Google outlines in its quality guidelines for building smartphone-optimized websites 3 configurations which they recommend.

iPhone 6. An edgy concept.

The only way to create a true edge-to-edge display is to remove the edge all together.

Create a 3D Vintage Lightbulb Sign Using Illustrator, Cinema 4D, and Photoshop

Great-looking 3D typography often involves the use of several applications. In this tutorial, we will show you how to create a vintage lightbulb sign using Adobe Illustrator to create and export the basic paths, Cinema 4D to create the 3D render, and Photoshop for post-production.

30 Restaurant Logos for Design Inspiration

Here we’ll showcase 30 different examples of well-designed restaurant logos. These logos come from a variety of different designers.

40+ Excellent Examples of Flat Website Design

Flat design is the total opposite of skeuomorphic design – which may tell you absolutely nothing about either style!

50 Funny & Creative Error 404 Pages

The Error 404 page is like a little hidden world that you often hope no one will see. But if someone does, you should make sure that it’s amazing!

Awesome Travel Website Design Examples

Look for perfect spot to spend holidays, search the proper hotel staying close with business. Even avail the effectively provided services at the comfort of their home.

Web Design Freebies

Perspective App Screen Mock-Up 5

A new perspective mobile app screen mockup with a transparent glass feeling reminiscent of iOS7 and its contextual screen visuals. Use the smart layer to show the different levels of your app UI.

6 Free Customizable Retro/Vintage Logos & Emblems

Quickly and easily create yourself a retro/vintage style logo with these 6 free customisable insignias. Open up the file, edit the text and you instantly have a trendy emblem for some fun branding or cool apparel merchandise.

Free Vector Pack: Birthday Vector Graphics

Our latest featured freebie is another vector pack featuring a set of more than 40 vector graphics perfect for your birthday and party-related design projects.

125 + FREE Business Cards PSD for PhotoShop

They all are in PSD format for Photoshop. So they can be easly edit or modify by using Photoshop. All this Free Business Cards PSD files are collected right after long hours searches on top quality design blogs and search engines. They all are free and ready to use.

Free Responsive HTML5 Template

Today, we are pleased to introduce Type & Grids, a free responsive HTML5 template by Jeremiah Shoaf. It looks great on all devices, including desktops, laptops, tablets and phones. All of the content resides in a single HTML file, so setting it up is super-simple.

Free download: 25 free retro patterns

Patterns have graced our designs for thousands of years. The texture, color and life added by patterns have enhanced design the world over.

Collection of Free Fonts and Typefaces for August 2013

We would like to present to you a really amazing collection of free download fonts collected from all over the web.

More Web Design Digests

  • Zfort Group,
  • August 11, 2013

SHARE THIS POST

The article has been written by the Zfort Group, an IT Outsourcing Services Company. Zfort Group specializes in top-notch IT outsourcing services since 2000.

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.