CSS3

  • 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 
  • Deal of the Week: Designmodo’s Fantastic Startup Design Framework Based on Bootstrap 3 and PSD

    Who in the world of web design and development doesn’t know Designmodo? Active since 2010, these guys have brought useful resources to the design world and still keep on doing so. Their latest product aims at startups seeking to create a decent, flexible and unique website. Startup Design Framework is the only thing you need to achieve that. From today until the 20th of March 2014 our dear readers are entitled to claim a 25% discount on this fantastic product. Let’s take a closer look…



    Read more 
  • Total Recall #1: The Ultimate Collection of the Best Free Templates 2013 in PSD and HTML/CSS

    The past leaves its own mark, so it is very useful to look back early in the year, and put up a best-of-collection of remarkable things and resources. May be you have missed something valuable that might come in handy in the near future, probably something that will make your working process more efficient, time-saving and cost-effective. Or be it something that can help to quickly “kickstart” your web project, and is available free of charge and can freely undergo different changes. Today we are going to give a rundown of the previous year’s free stuff. To be more precise, today we have collected professional website layout PSD and HTML/CSS templates, which, as practice shows, are never enough.



    Read more 
  • Styling SVG with CSS: Capabilities and Limitations

    SVG is the new standard for vector images in the browser. Vector editors such as Adobe Illustrator allow to directly save to that format and modern browsers have no problems to properly display SVG. As SVG graphics consist of markup, they can be created and maintained using your favorite text editor, just as you do with your HTML. It is even possible to style SVG with CSS, though you’ll need to know about quite a few differences in doing so, compared to styling HTML.



    Read more 
search form
 
image description image description