CSS3

  • 20 Free HTML, PSD and GUI Templates: August 2014 Edition

    Summer moves on, but we are here to stay, as reliable as always, bringing you the next bunch of free HTML, PSD and GUI templates developers and designers brought forth in the month of August 2014. Despite the hot days creativity didn’t dry up. My favorite this month is the HTML5 template Sublime, but there should be enough to choose from for everybody. If you’re a first-time visitor to this series, scroll down to the bottom of the post where we have neatly listed all the already published parts of our monthly collection.



    Read more 
  • HTML5: Native Dialogue Windows With the New Dialog Element

    New HTML5 elements and new JavaScript APIs allow us to create complex applications for the browser. Part of any modern application are one or more dialogue windows. These require users to confirm the execution of certain actions or simply issue a message. With the new „<dialog>“ element we can now markup these windows using pure HTML5.



    Read more 
  • 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 
  • Responsive Images: Finally The Picture Element Arrives!

    This has taken quite a while. There was a lot of discussion, but now reality has it. The picture element as propagated by the W3C has finally arrived. If you are into the matter, you might know that the WhatWG had tried to standardize an additional attribute to the image element, named srcset as opposed to picture. Whoever believed in what WhatWG said, as they stated they’d stand for the "living standard" while W3C would be more an administrator of a static snapshot, got it wrong. W3C is alive and kicking.



    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 
  • Magic.css: CSS3 Animations on Steroids

    It is almost a year ago, that Christian Pucci from Italy introduced his stylesheet-project Magic.css. Magic.css lets you build CSS3 animations with special effects. Last year, Christian, better known as miniMac, had only a handful of effects to show. Up until today, this number has grown to 55. All the effects come in a single stylesheet, prefixed for all modern browsers. Magic.css is published under the terms of the MIT license, and can be used freely.



    Read more 
  • The CSS Animations Pocket Guide: Now More Free Than Ever

    Publisher Five Simple Steps ceased to exist. Before they vanished, they took the friendly move to transfer all the rights on the books published back to their respective authors. Val Head, author of The CSS Animations Pocket Guide immediately put up a page on her personal blog and started to offer the guide along the lines of the "Pay what you want" model which includes getting it for free, too.



    Read more 
  • Everyday Helpers: Fresh Free CSS Tools GenerateCSS and Gradientoo

    A good CSS generator is a valuable addition to any designer’s toolbox. As an avid reader of Noupe Magazine you already know of a good chunk of helper services. Today we want to introduce you to two more great apps. While one, GenerateCSS, is a full-fledged toolbox in its own right, the other, Gradientoo, only serves the task of creating gradients, but does this with an unknown flexibility. Both are worth a bookmark in your favorites collection…



    Read more 
search form
 
image description image description