CSS3

  • CSS3 Lifelike: A Slightly Different Box Model with {box-sizing:border-box}

    real-world-box-w550

    The classical box model in CSS has never been the most intuitive. Thanks to CSS3, we now have an alternative to consider: {box-sizing:border-box}. This model has lots of advantages, especially when it comes to flexible layouts.



    Read more 
  • HINT.css – Tooltips In Pure CSS3 And HTML5, No JavaScript Needed

    Tooltips in HTML pages general do not need any effort from a developer’s side, as long as they put proper title attributes to their elements. The title is then used for showing the tooltip, but also for other things, such as providing a screen reader with proper content. Speaking of the use case of tooltips, the visual presentation depends on the browser your site gets visited with. Developers with the need for more control turned to JavaScript bases solutions years ago. Kashagra Gour created Hint.css, which proves as a decent alternative, based completely on CSS and HTML.



    Read more 
  • Tilted: HTML Elements Become Parallelograms With Maskew

    You know that you can tilt HTML elements into the shape of a parallelogram using the CSS3 property “transform”. Nice, at first sight. But then, calling “transform” on a picture leads to tilting the picture itself. Uncle Hugo is not amused about his new skewed look. And you know, it is his corporation you are preparing the web site for. To save you, I have found the JavaScript library Maskew. Maskew skews elements into parallelograms too. But it does not skew the content, only the frame. Uncle Hugo himself will not tilt (at you) this way…



    Read more 
  • Neither Graphics Nor Fonts! Icons In Pure CSS3 with One-Div.com

    Icons are becoming more and more common these days. Mobile clients are responsible for this trend as icons are most useful in environments where screen real estate is scarce. Icons help you find your ways around without needing too much text (if any). With the rise of higher density screens and rising resolutions it is preferrable to shift away from static icon imagery to vectorized icons that are able to scale to any desired size without pixelation or blurry looks. This requirement has initiated the rise of icon fonts. But wait, there is another possibility with its own advantages. Icons can be designed using pure CSS3 also…



    Read more 
  • Easings.net – CSS3 Animations Leadfooted

    With the introduction of CSS3 we are able to use animated hover effects and other transitions. These transitions can be induced through the use of so-called easings. Easings differ in the way they start and accelerate or slow down and stop an animation. The website Easings.net has put together an overview of available easings. On top of that they provide some additional effects complete with source code for your easing pleasure.



    Read more 
  • Focal Point: CSS-Framework Scales Down Images In Responsive Designs Intelligently

    Responsive webdesign aims to present websites in the best possible way, even if viewed on mobile devices. Images are usually simply scaled down in that approach. If you use images with a high grade of details pictures soon become too small. The new CSS framework Focal Point cares for shifting the focus to the most important part of the image before scaling down. That way smaller resolutions only see part of the image but larger.



    Read more 
  • In From The Cold: Find A Slot For Every Content With Off-Canvas Layouts

    As a web designer you face challenges constantly. But the evolution of mobile devices multiplies the challenges you have to cope with. Placing texts, images, navigation, sidebars, headers and what not on a desktop-sized browser-window is hard enough in terms of creativity and information architecture. Doing the same on a mobile device is close to impossible. There just isn’t enough screen real estate. A new approach that addresses this problem works with the use of so-called off-canvas-layouts. In this type of layout content is placed where you cannot see it, outside the screen, well, outside its visible area to be more precise.



    Read more 
  • Makisu – Sushi-Inspired CSS 3D Navigation for jQuery

    Better browser support has CSS experiments become more popular these days. My personal favorite up until today was Paperfold CSS. Of course we also saw Meny and some other more playful approaches. Makisu is a brand-new concept for dropdown navigation menus realized by the use of CSS 3D transforms. I have seldom seen such an impressing result. Sorry Paperfold CSS, I leave you for Makisu…



    Read more 
  • tiltShift.js: Tiltshift-Effects with CSS3 and jQuery

    tiltShift.js is nothing short of a little sensation. Using the new CSS3 Image Filters, developer Noel Tock realized a tiltshift-effect for any image you’d want to apply one to. It has of course to be said, that at the time of this writing only Chrome and Safari 6 are able to visualize the effect. Furthermore the pictures have to be generally qualified for the use of tiltshift. But this proves true for all possible fake tiltshifts, as can be achieved by Photoshop and others.



    Read more 
  • Metro UI CSS: You can have a tiled website too

    Microsoft’s new UI, once known by the name of Metro, has caused quite some buzz in the tech world. Meanwhile the name has been dropped, which again caused quite a buzz in the tech world. We don´t know why this was done nor do we know if the next Windows will be a market success. What we know is, that Metro as a design style has its fans. If you are one of them, we have great news for you. Thanks to Metro UI CSS you can give your very own website the same tiled look, the interface of the next generation Windows will have. Go ahead!



    Read more 
search form
 
image description image description