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. And because the circle is such a special shape, we are going to create some special hover effects for it! 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: Although we could use images here, we’ll give ourselves a bit more freedom by using background images instead. Now, let’s make some hover effects! The CSS Example 1 And now, the interesting hover action!
Simple Drop-In Modals Simple Modals The simple modal style we show here is very basic, but effective. The modal itself is set to opacity: 0.0 and when we click the button it changes to opacity: 1.0. A -webkit-transition: opacity 0.25s linear on the shown state causes the fade in effect, so we only need javascript to change the state of the modal — not the animation. Show the Simple Modal Fancy Modal This modal is shown and hidden in a similar manner. We use a few properties like transforms, transitions and box shadows. Show the Fancy Modal Copyright ZURB, freely available for distribution under the MIT license. This is a simple modal. It appears based on one line of javascript and can be dismissed using the OK button below. This is a fancier modal. Using generated gradients, text-shadows, and box-shadows we can create this drop-down modal. Product Design Training from the Experts at ZURB This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS. Your ZURB ID explained
SpritePad - Create and edit css sprites Conditional Lightbox Lightboxes don’t work for small screens. Here’s Jordan Moore on the subject: The purpose of a lightbox is to display a larger image corresponding to the selected thumbnail version while keeping the user on the same page instead of linking directly to a page showing the full image. Again, there are an abundance of solutions for solving this problem but the vast majority of existing patterns translate poorly to smaller displays. In fact you may argue that a lightbox shouldn’t even exist on small displays. — Jordan Moore I wholeheartedly agree with Jordan, yet I’m seeing more and more lightboxes on responsive sites. So what’s a better alternative to lightboxes for small screens? In his article Why Separate Mobile & Desktop Web Pages? Interactions that happen through modal dialogs or across modules/panels on large screens often make more sense as separate pages on smaller screens. By default, simply link to the raw image file or chunk of content. View Demo
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!
Magnific Popup: Responsive jQuery Lightbox Plugin Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device(for jQuery or Zepto.js). Examples Single image lightbox Three simple popups with different scaling settings. 1 — fits horizontally and vertically, 2 — only horizontally, 3 — no gaps, zoom animation, close icon in top-right corner. Lightbox gallery You may put any HTML content in each gallery item and mix content types. Zoom-gallery If you wish to open the popup only after image is fully loaded, you may preload image via JS. Popup with video or map In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered. Dialog with CSS animation Animations are added with simple CSS transitions, you can make them look however you wish.More animation effects on CodePen. Popup with form Entered data is not lost if you open and close the popup or if you go to another page and then press back browser button. Ajax popup Fast
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. 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. Softening the edges#section2 1. 2. 3. Go forth and animate!
Magnific Popup, A Truly Responsive Lightbox (For jQuery And Zepto.js) Advertisement A lightbox is one of those tools that work great on the desktop but often fail on small mobile devices. These days, finding a plugin that is responsive and that displays content right away is hard. In this article, I’ll share the techniques I employed in creating this plugin, techniques that can make your lightbox much faster and easier to use, whatever the device being used. 1. We might not be able to speed up the loading time of an image with this lightbox plugin, but we can create the perception of a faster loading time. Progressive Loading of Images The majority of lightbox plugins will fully preload an image before displaying it. You can speed this up even more by progressively rendering the JPEG. CSS-Based Resizing The CSS-only approach makes this lightbox extremely flexible. Vertically centering an element with unknown dimensions is probably the most horrifying topic in CSS layout. Centering an HTML block Here are the criteria: Centering an image with a caption 2. <! 3.
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:
Perspective Page View Navigation Some effects for a perspective page view navigation where the page itself gets pushed away in 3D to reveal a menu or other items. This navigation idea is seen in mobile app design and we wanted to explore some more effects. View demo Download source Pushing the site content aside to reveal a navigation has certainly become a trend for mobile navigations. The approach reflects some practices in app design where “views” are shown with animations. We’ve experimented a bit and we’ve come up with a small set of effects that take the page and move it in 3D to reveal a navigation (or some other content if you like). Please note that this is highly experimental, so let us know if you find any bugs or problems. For the general effect to work, we need to wrap our page into a perspective wrapper. When we trigger the effect, we’ll need to change the position and overflow of the divisions to just show the current view. There are two styles for the menus which is a horizontal and a vertical one.