Fullscreen Overlay Effects Some simple and creative overlay styles and effects. From sliding the overlay into the viewport to using SVG morphing shapes, we explore some effects for fullscreen overlays. View demo Download source Today we’d like to share some inspiration on fullscreen overlay styles and effects with you. Like with any UI component, there are new trends and styles emerging and we’d like to try out some subtle, as well as fancy effects for overlays. The special thing about these overlays is that they don’t have a fixed size like modals but they occupy all the screen, so when creating effects one has to take that into account and not overdo it. Note that these effects were created with modern browsers in mind so they might not show the desired effect in older ones. An example for a subtle, yet interesting effect is the first one which got inspired by the same effect on Huge. For some of the SVG examples we use Snap.svg to morph a path into another one.
UI Animation and UX: A Not-So-Secret Friendship Using the words “animation” and “the web” together tends to conjure up memories of frantic searches for the “skip intro” button to save ourselves from a terrible sensory assault. Animation on the web has hit some pretty sad lows, there’s no arguing that. But adding motion to our work can be meaningful and functional—when we find the right circumstances. Article Continues Below When used as more than just a subtle design detail, animation can provide cues, guide the eye, and soften the sometimes-hard edges of web interactions. It can improve the user experience. A CSS animation refresher#section1 This article uses CSS animations and transitions in the associated examples. CSS animations are what we most closely associate with traditional animation. CSS also has transitions—which, as it happens, can also be used to make things move. In practice, animations and transitions are often used together, so I’ll use the term animation in a general sense to indicate them both. 1. 2. 3.
Dot Navigation Styles Today we'd like to share some subtle effects and styles for simple dot navigation with you. These styles could, for example, be used for a page scroll navigation or a thumbnail preview, in a vertical or horizontal fashion. View demo Download source Small UI elements usually don’t get too much attention when it comes to creative effects. They are often neglected because of their size. Note that some effects might not work as intended in some browsers (SVG transition, 3D transform-style). For the structure we’ll have an unordered list with links: <div class="dotstyle dotstyle-fillup"><ul><li class="current"><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Products</a></li><li><a href="#">Portfolio</a></li><li><a href="#">Blog</a></li><li><a href="#">Contact</a></li></ul></div> For some examples, we also use an additional empty list element, i.e. in order to “move” the current item in the “dot move” style. We define some common styles:
SpritePad - Create and edit css sprites Circle Hover Effects with CSS Transitions From our sponsor: Get started on your Squarespace website with a free trial In today’s tutorial we’ll experiment with hover effects on circles. Since we have the border radius property, we can create circular shapes and they have been appearing more often as design elements in websites. One use that I especially enjoy seeing is the circular thumbnail which just looks so much more interesting than the usual rectangular. Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties. We will omit vendor prefixes in this tutorial. So, let’s get started! The HTML For most of the examples, we’ll be using the following structure: <ul class="ch-grid"><li><div class="ch-item ch-img-1"><div class="ch-info"><h3>Use what you have</h3><p>by Angela Duncan <a href=" on Dribbble</a></p></div></div></li><li><div class="ch-item ch-img-2"><div class="ch-info"><h3>Common Causes of Stains</h3><p>by Antonio F. The CSS Example 1
Image Lightbox, Responsive and Touch‑friendly — Osvaldas Valutis As for the image lightboxes, I have always lacked simplicity for them. I mean not only the visual design, but the overall experience: from implementation to UX. All due respect, but I have never liked any of these light-fancy-face-boxes. They all were solving problems that just don’t exist: lots of unwanted features by default, total mess in markup, no native behavior for touch screens. Features Ascetic. As I mentioned earlier, the plugin produces a single-element markup by default: No default CSS. position value can be anything, but in most cases fixed will produce what’s expected. JavaScript Source: imagelightbox.js (uncompressed; 9kb) and imagelightbox.min.js (minified; 4kb). The plugin takes the advantage of jQuery. ImageLightbox() accepts some options. It also has a couple of method functions, as mentioned: Examples Plugin without demo is a rhyme without reason. Demo The most interesting part in making of the plugin was mastering touch events on Windows Phone. P.S. Changelog
Simple Stack Effects A set of simple stack effects for inspiration. The main idea is to have one item shown initially and then, on some trigger, more items are revealed as decoration. As seen in image grids or on scroll websites as creative effect. View demo Download source Today we’d like to share some inspiration for simple stack effects with you. Note that for some of the effects we use perspective and 3D transforms so they will only work in modern browsers. The beautiful illustrations are by Isaac Montemayor. The markup is the following: We use a figure with three or four images. All images, except for the last one, will be absolute: Setting one of the images to position relative will give our parent figure a height. An example effect is the following: This effect moves the items to the corners and scales them down. Note that for some of the examples (grids), we simply set the width of the images to something smaller. I hope you enjoy these little effects and find them inspiring!
Inspiration for Item Transitions Some inspiration and ideas for item transitions considering different scenarios and use cases, including a small component, a full-width image header and a product image with a transparent background. State transitions are done using CSS Animations. View demo Download source Today we’d like to share some item transition inspiration with you. A very special case is the usage of (product) images with transparent background. For transitioning the state, we are using CSS Animations. One of the transitions that can be viewed in the large header slideshow example is based on Hakim El Hattab’s slick context-shift transition, Kontext, and another one makes use of one of Lionel’s CSS Shake animations. Please note that in some examples we are using CSS Animations on pseudo-elements which might not be supported in some browsers (especially mobile browsers). Please also note that the examples only serve for your inspiration. We’ve divided the inspiration for transitions into three demos:
Blueprint: Responsive Full Width Tabs Sushi Gumbo Beetroot Sushi gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Pea Sprouts Fava Soup Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Turnip Broccoli Sashimi Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Asparagus Cucumber Cake Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Magis Kohlrabi Gourd Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Ricebean Rutabaga Celery quandong swiss chard chicory earthnut pea potato. Noodle Curry Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.Sushi gumbo beet greens corn soko endive gumbo gourd. Leek Wasabi