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.
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.
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.
“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.
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. :-)
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.
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.
Edge Animate is a new tool developed by Adobe in September 2012 which is designed to create animated, interactive content for the Web.
We’ve all seen margin: 0 auto; for horizontal centering, but margin: auto; has refused to work for vertical centering… until now!
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.
Every time we use CSS, we use selectors. But despite this, CSS selectors are one of the more neglected parts of the specification.
Subtle and modern effects for links or menu items
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 (previously known as Zen Coding) is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow
Here’s a simple example where the module is set apart from the background through color differences
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
Over the last months, I have seen a ton of mixins to handle offsets when dealing with absolute / fixed / relative positioning.
This tutorial outlines how you can make something like this, emphasizing the CSS3 3D concepts.
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.
Sticky-kit provides an easy way to attach elements to the page when the user scrolls such that the element is always visible.
A jQuery plugin, that provides a more friendly way of displaying time updates to users!
Here is formFive, a polyfill for your forms that makes some HTML5 form features available on older browsers.
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 is a small, powerful way for you to enjoy working directly with the DOM.
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.
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.
Here are some popular European typefaces and their proper pronunciation in German, French and Italian.
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.
Google outlines in its quality guidelines for building smartphone-optimized websites 3 configurations which they recommend.
The only way to create a true edge-to-edge display is to remove the edge all together.
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.
Here we’ll showcase 30 different examples of well-designed restaurant logos. These logos come from a variety of different designers.
Flat design is the total opposite of skeuomorphic design – which may tell you absolutely nothing about either style!
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!
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.
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.
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.
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.
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.
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.
Patterns have graced our designs for thousands of years. The texture, color and life added by patterns have enhanced design the world over.
We would like to present to you a really amazing collection of free download fonts collected from all over the web.
Subscribe to our email newsletter for useful tips and freebies.