Denis Potschien

  • 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 impressive appearance.



    Read more 
  • 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 and complex shadows with Shine.js.



    Read more 
  • 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.



    Read more 
  • 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 structure layouts in rows and columns. Now, with the new CSS Grids rasterized layouts return and they resemble the way of table-based designs quite closely.



    Read more 
  • 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.



    Read more 
  • 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 and the browser will read your website contents to any visitor who demands it. A nice service for anyone and inevitable even for the visually impaired.



    Read more 
  • 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. "Cute Grids" is highly flexible and allows for the creation of a grid-based layout with up to 12 columns. "Cute Grids" will only take care of the columns, nothing else. But it will do that in relation to the size of the browser window.



    Read more 
  • 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 in all modern browsers. Problems occur as soon as you need to get JavaScript to enter the game of creating CSS3 animations. We all know, JavaScript is more often than not unavoidable as we need to calculate individual values or an animation process as a whole.



    Read more 
  • 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.



    Read more 
  • Adobe’s Snap.svg: Animations With HTML 5, Without Flash

    Flash has long been the standard for vector-based web animations. Some say for too long. The rise of mobile clients led to an acceleration of web standards such as HTML5. Thanks to the SVG formats, which is widely supported by modern browsers, we are able to embed vector-based graphics into our web projects without the need for a plug-in. Adobe’s JavaScript library Snap.svg even allows for the creation of vector-based animations with SVG.



    Read more 
search form
 
image description image description