Tympanus. Nifty Modal Window Effects. A set of experimental modal window appearance effects with CSS transitions and animations.
View demo Download source Today we want to share some ideas for modal window effects with you. There are infinite possibilities for transitioning the appearance of a dialog box and we wanted to provide some ideas of how to show dialog boxes and provide some inspiration. The idea is to have a trigger button (or any element) which will make a modal window appear on click using a simple transition (or animation). Please note: this only works as intended in browsers that support the respective CSS properties.
There are some knows issue with using visibility/opacity for iOS < 6 Mobile Safari, so this probably won't work on older devices. The structure of the modal window consists of a main wrapper and a content division: <div class="md-modal md-effect-1" id="modal-1"><div class="md-content"><h3>Modal Dialog</h3><div><p>This is a modal window. Transitions for Off-Canvas Navigations. Some inspiration for transition effects for off-canvas navigations.
View demo Download source Today we’d like to share another set of transition effects with you. 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. 3D Shading with Box-Shadows. A tutorial about a technique that uses box shadows for creating a realistic shading effect on simple objects.
View demo Download source When working with 3D transformed elements, you might notice that they don’t have any shading and appear to be very flat. In real life, objects block light and have shadows. Surfaces can be matte, reflective, and everything in between. Natural Language Form with Custom Input Elements. An experimental form that uses natural language instead of the usual form display.
Values are entered using custom input elements. View demo Download source There is something really interesting about Natural Language UIs and after visiting awesome Escape Flight, we wanted to play around with NL forms and custom form elements. The idea is to turn a classic form into one that uses natural language to obtain information from the user. For that we’ll construct a sentence where some words and parts are select elements and text inputs. Natural language forms are quite suitable for some UI cases, not for all, of course. Please note: this only works as intended in browsers that support the respective CSS properties. HexaFlip: A Flexible 3D Cube Plugin. HexaFlip is a JavaScript UI plugin that let's you use 3D cubes as interface elements.
Dive into the process of creating the plugin and learn some best practices regarding flexible UI plugins. View demo Download source. Animated Border Menus. A tutorial on how to create a off-canvas icon navigation with an animated border effect.
The menu effect is inspired by CreativeDash's bounce menu for mobile apps. View demo Download source The other day I saw a really nice concept of a menu on the UI8 site. CreativeDash implemented that gorgeous concept and I instantly had some ideas for more effects involving border transitions but also with the desktop in mind. So today I want to show you how to create something like that and provide some more inspirational examples. In this tutorial we will be going through demo 2 where the menu icon is in the top left corner and the border is thickest on the left side. Please note that we’ll be using transitions and animation on pseudo-elements which won’t work in some browsers (e.g.
So, let’s get started! 3D Restaurant Menu Concept. A responsive 3D menu concept for a restaurant website.
The idea is to show the menu as a folded flyer and unfold it in order to show the menu items. View demo Download source Applying CSS 3D transforms to components can bring some more realism to normally flat web elements. Rotating Words with CSS Animations. Using CSS Animations we will change or rotate some parts of a sentence.
View demo Download source In today’s tutorial we’ll create another typography effect. The idea is to have some kind of sentence and to rotate a part of it. We’ll be “exchanging” certain words of that sentence using CSS animations. Please note: the result of this tutorial will only work as intended in browsers that support CSS animations. So let’s start! In the following, we’ll be going through demo 2. The Markup We’ll have a main wrapper with a h2 heading that contains first-level spans and two divisions for the rotating words: Now, ignoring the garbage placeholder text, we want each span of the rw-word to appear at a time.
The CSS3 First, we will style the main wrapper and center it on the page: Flexible Slide-to-top Accordion. In today's tutorial we'll be creating a simple responsive accordion that, when opened, will slide to the top of the viewport and reveal the content by fading it in.
The idea is to avoid that the user has to scroll the content area into place. We'll also add some nice CSS3 transitions for the arrow to appear and to rotate when we click on an item. The accordion will be flexible, meaning that it will have a liquid width adjusting to the screen size. View demo Download source In today’s tutorial we’ll be creating a simple responsive accordion that, when opened, will slide to the top of the viewport and reveal the content by fading it in. The idea is to avoid that the user has to scroll the content area into place. The beautiful fashion photography is by Rayand; check out his Flickr Photostream. The Markup The HTML structure will consist of a wrapper with the class and ID st-accordion and an unordered list. Portfolio Zoom Slider with jQuery. In this tutorial we are going to create some nice effects for a portfolio or similar website with jQuery. We will create a tiny slider and integrate it with the amazing Cloud Zoom plugin and the elegant Fancybox plugin.
The idea is to give the user the option to view details of […] Animated Portfolio Gallery with jQuery. Today we will create an animated portfolio gallery with jQuery. The gallery will contain a scroller for thumbnails and a content area where we will display details about the portfolio item. The image can be enlarged by clicking on it, making it appear as an overlay.
Portfolio Flipping Slider Using jQuery & CSS3. There are many ways on displaying our portfolio, one of them is using grid style with slider effect for pagination. In this tutorial I’m going to share about how to displaying our portfolio grid with flipping slider effect for pagination using jQuery & CSS3 Transform. Slider Behaviour The slider will change our portfolio images when it’s flipping, this flipping effect is triggered by user click on the pagination.
So when user click a page each of our portfolio images will flipping 360 degree and when its animation near end the image will changed with new image. We will create four flipping effects that will be used for animation, there are : horizontal left direction, horizontal right direction, vertical top direction and vertical bottom direction. Markup & Styling.