Articles by Denis Potschien

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

Design

HTML5: More Flexibility in Form Design

July 31st, 2014
by
HTML5: More Flexibility in Form Design

Forms have grown more versatile with HTML5. The input element is now able to contain email addresses and dates and marking input fields as mandatory or prepopulating them with content is no longer a case for JavaScript – just to name a few of the most valuable additions. But then, there’s even more to it. Did you know you can now have more than...

Design

CSS3 Background Blends: Photoshop Background Effects in pure CSS3

July 29th, 2014
by
CSS3 Background Blends: Photoshop Background Effects in pure CSS3

With CSS3 we are able to add more than one background to an element. In doing so background images and/or colors are piled upon each other, just as you know from the layers concept of Photoshop. While transparencies exist, the underlying background file or color will shine through. The new CSS3 Background Blends allow for even more possibilities to combine several backgrounds into one...

Development

Better than Pure CSS3: Realistic and Complex Shadows with Shine.js

July 25th, 2014
by
Better than Pure CSS3: Realistic and Complex Shadows with Shine.js

Thanks to CSS3 there are several possibilities to apply shadows to elements. We have text as well as element shadows, and even a shadow filter exists. Unfortunately all CSS3 shadows are limited to simple drop shadows, where you can define its colour, its blur, the offset and the size. The new JavaScript library offers many more features to let you create much more realistic...

Development

MagicSuggest for jQuery: Beautiful Selection Comboboxes Based on Bootstrap 3

July 23rd, 2014
by
MagicSuggest for jQuery: Beautiful Selection Comboboxes Based on Bootstrap 3

The „<select>“ element makes it easy to markup input areas for multiple selections. On the downside there are quite a few limitations to it and it sure doesn’t look anywhere near as great as MagicSuggest does. Instead of having boring select lists, MagicSuggest allows us to create beautiful comboboxes capable of multiple selections from both freely entered and prepopulated items. MagicSuggest: Simple Integration MagicSuggest...

Design

HTML5 Brings Tables Back: Contemporary Grid Layouts with CSS Grids

July 18th, 2014
by
HTML5 Brings Tables Back: Contemporary Grid Layouts with CSS Grids

Back in the days where CSS was a rumour and content and design were not divided, building a website using tables was perfectly common. With the rise of the semantic web tables were redefined to be used only for their original purpose, structuring data, that was meant to be shown in the form of tables. Furthermore, CSS didn’t bring forward an easy way to...

Development

HTML5 Imports: Import HTML Files Into HTML Files

July 15th, 2014
by
HTML5 Imports: Import HTML Files Into HTML Files

The „link“ element is a blessing. It allows for easy embedding of stylesheets and JavaScripts needed in multiple documents. It didn’t allow the embedding of HTML files, though. To achieve that we were limited to the „iframes“ element or the JavaScript method „XMLHttpRequest()“. Thanks to the new HTML5 Imports, we can now use the „<link>“ element to load one HTML file into another. Simple...

Design

HTML5 Clinic: Make Your Browser Talk via The Speech Synthesis API

July 11th, 2014
by
HTML5 Clinic: Make Your Browser Talk via The Speech Synthesis API

Navigation devices do it since forever. Now browsers are learning to do it, too. I’m talking about speech synthesis. HTML5’s new Speech Synthesis API allows your website to speak or more precise, to read out loud what is written there using a human voice. There are different voices for different languages, even several voices per language. Now all it takes is pressing a button...

Boilerplates & Other Tools

CSS Framework Cute Grids: Highly Flexible Grid System for Responsive Layouts

June 13th, 2014
by
CSS Framework Cute Grids: Highly Flexible Grid System for Responsive Layouts

These days it is impossible to ignore the power of mobile. So, if you’re in the process of designing a website, chances are that you will do that with mobile in mind. Most likely, you are working on implementing a fully responsive layout. The lean and clean CSS framework we want to introduce you to today, wants to help you achieve that goal easily....

Development

Coming to a Screen Near You: CSS3 Animations and The New JavaScript Method Animate()

June 4th, 2014
by
Coming to a Screen Near You: CSS3 Animations and The New JavaScript Method Animate()

With CSS3 animations in HTML documents have become fairly easy to achieve. Using the "@keyframes" rule various properties such as position and size of an HTML element get defined. Then the property "animation" cares for getting the keyframes up and running according to their definitions. Without the need for JavaScript and plug-ins we are able to create even complex animations, that run most flawlessly...

Design

CSS3: Viewport Units – New Units for Responsive Designs

May 29th, 2014
by
CSS3: Viewport Units – New Units for Responsive Designs

Developing web designs that adjust to the width or – if needed – the height of a browser window is easy with percentage-based values. You will probably be doing this on a daily basis, optimizing your website for tablets and smartphones. No matter the element, text blocks, images, everything adjusts to the size given. But using percentage-based values is not always the best way...