Articles by Denis Potschien

Google Profile: http://plus.google.com/108355723592614585569/posts

Design

Stitches: Free CSS Sprite Generator

May 22nd, 2015
by
stitches-css-teaser_EN

As we know, less files to download mean better loading performance and page reproduction. Therefore, icons and other images, particularly small images, are often combined into a sprite. A sprite is a collection of several images put into one image file. Creating a sprite manually requires some work. The images are arranged in an image file and their position, width, and height need to be...

Boilerplates & Other Tools

WebAnimator Plus: Sophisticated HTML5 Animations Made Easy

May 18th, 2015
by
webanimator_landingpage

Not too long ago, Flash was an established element of the web. Did you need anything related to animation, you were more or less doomed to use it. Of course Flash was the top dog – the alpha male – and alternatives didn’t exist. But that was only one-half of its success. The second half was its ease of use. Flash videos were created...

Development

Animsition: User-Friendly jQuery-Plugin for Animated Page Transitions

May 15th, 2015
by
animsition

JavaScript along with CSS3 make it easy to create website animations. Some use CSS3 animations to pimp page transitions within a website. The current Cascading Stylesheets version allows you to create simple fade-in and slide-in effects as well as 3D transitions to other pages. The fairly new jQuery plugin “Animsition” helps to easily integrate such animated page transitions into your web project. Incorporate Data,...

Design

HTML5: Screen Orientation API Uses Javascript to Rotate the Screen

May 8th, 2015
by
html5-screenorientationapi-teaser

Media queries allow websites to adjust their layout depending on the screen orientation of a smartphone or tablet. But sometimes you may want your website locked to a particular orientation, portrait or landscape. The format of native apps can be specified in such a case. The app will then only be displayed in the preset format – independently from the actual device orientation. By...

Development

Flickity: Beautiful Galleries on All Devices – Responsive and With Gesture Control

May 6th, 2015
by
Flickity

There are several solutions to creating galleries via JavaScript. But sometimes you may find the handling is not convincing, others provide a rather poor functionality. Flickity, however, is a state-of-the-art JavaScript framework for galleries that works great on desktops, as well as mobile devices. The gallery is responsive and can be controlled with your mouse or gestures – or even your keyboard. Thanks to...

Design

HTML5 and CSS3: Get Your Website Ready for High-Resolution Displays

April 22nd, 2015
by
HiDPI and HTML5/CSS

When Apple introduced a new high-resolution display – the so-called Retina display – for its iPhones, iPads, and MacBooks a couple of years ago, they ushered in a new era of display quality. On such screens, the human eye can’t discern individual pixels anymore. With high-res displays being the norm rather than the exception today, you’ll find more and more middle-range high-res mobile devices....

Essentials

OCR on Images with Project Naptha – a Clever Chrome Extension

March 19th, 2015
by
OCR on Images with Project Naptha – a Clever Chrome Extension

You rarely come across bitmap-based image formats like JPG or PNG that have longer texts in them. However, titles and additional information in images are quite common. Often you’ll find longer texts in screenshots. This text information can’t be highlighted and read by your browser, however. The Chrome extension Project Naptha allows you to highlight and read texts thanks to its built-in OCR. And...

Development

JavaScript: Create Circular Navigation Menus With Wheelnav.js

March 13th, 2015
by
JavaScript: Create Circular Navigation Menus With Wheelnav.js

Navigations don’t always have to be arranged horizontally or vertically. They can indeed go round in circles. And that’s where Wheelnav.js comes into play. This smart little tool allows you to arrange menus in circles. Selections are made by spinning the wheel. Wheelnav.js is based on Raphaël.js, which allows you to draw SVGs using JavaScript. Kick-start: Incorporate Libraries and Mark Elements Before we start,...

IMHO

A Life Without Adobe: Possible, but Pointless (IMHO)

February 28th, 2015
by
A Life Without Adobe: Possible, but Pointless (IMHO)

Adobe celebrates the 25th birthday of Photoshop. The first version of the image editing program came into market in 1990 and marked the beginning of the worldwide success of the Californian company. Photoshop is in all likelihood still the most famous product of Adobe; being popular and in use by a broader clientele than just the design industry. Throughout the last 25 years, Adobe...

Design

Logo Design According to Zeitgeist: Not Only the Times are Changing

February 26th, 2015
by
Logo Design According to Zeitgeist: Not Only the Times are Changing

Logos, be it wordmarks or symbols, are rarely „timeless“. Instead, they are regularly adapted over time – sometimes tentatively, sometimes more radical. Apart from taking on style details such as gloss, 3D, and shadow effects which disappear with the fading of those design trends, there seems to be an underlying general direction in logo design: shapes get more simple, proportions more harmonious, and details...