Fullscreen Image Blur Effect with HTML5
In Playground,
Today we want to share a neat image blur effect with you. Using canvas, we want to blur images on the transition to another one, creating a smooth effect.
Animated Buttons with CSS3
In Tutorials,
Still hyped by the possibilities of CSS3, I want to share some CSS3 button experiments with you. The idea is to create some animated link elements with different styles, hover effects and active states.
Fullscreen Image 3D Effect with CSS3 and jQuery
In Playground,
Today we want to share one of our CSS 3D Transforms experiments with you. The idea is to show an image’s fullscreen version by rotating two blocks in three-dimensional space. The faces of the blocks being rotated to the front will show the fullscreen image.
Creative CSS3 Animation Menus
In Tutorials,
Being in the mood for experimenting with CSS3, I’d like to show you some creative menu hover effects in today’s tutorial. The idea is to have a simple composition of elements, an icon, a main title and a secondary title, that will be animated on hover using only CSS transitions and animations. We’ll be exploring some different effects for the elements.
Blur Menu with CSS3 Transitions
In Tutorials,
There are so many great things we can do with the additional properties and possibilities that CSS3 brings along. Today I want to show you how to experiment with text shadows and with transitions in order to achieve a blur effect that we’ll apply to a menu on hovering over the elements. The main idea is to blur the other items while enhancing the one we are currently hovering.
Wave Display Effect with jQuery
In Playground,
How cool is it to sometimes just display content a little bit differently? Today we want to share an experiment with you that let’s you show images and content in a unique form – a wave. The idea is to initially have some smaller thumbnails rotated and placed in a wave-like manner. When clicking on a thumbnail, we’ll “zoom” into the wave. Clicking again will make the large content area appear; here we will show some more content.
Flexible Slide-to-top Accordion
In Tutorials,
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.
Circle Navigation Effect with CSS3
In Tutorials,
Today we want to show you how to create a beautiful hover effect for an image navigation using CSS3. The idea is to expand a circular navigation with an arrow and make a bubble with a thumbnail appear. In our example we will be showing the thumbnail of the next and previous slider image on hovering the arrows. The effect is done with CSS3 transitions.
Draggable Image Boxes Grid
In Tutorials,
Today we want to create a template with a fullscreen grid of images and content areas. The idea is to have a draggable grid that shows boxes of thumbnails and menu like items. Once clicked, the thumbnail will expand to the full size image and the menu item box will expand to a fullscreen content area.
Scrollbar Visibility with jScrollPane
In Tutorials,
Sometimes it can be very useful to hide the scrollbar of elements in a website and only show it when the user really needs it. The real-time activity feed in Facebook is an example for such a behavior. Today we want to show you how to use jScrollPane and extend it with the functionality to hide the scrollbar and show it on hover.
Responsive Image Gallery with Thumbnail Carousel
In Tutorials,
A tutorial on how to create a responsive image gallery with a thumbnail carousel using Elastislide. Inspired by Twitter’s “user gallery” and upon a request to show an integration of Elastislide, we want to implement a responsive gallery that adapts to the view-port width. The gallery will have a view switch that allows to view it with the thumbnail carousel or without. We’ll also add the possibility to navigate with the keyboard.
Elastislide – A Responsive jQuery Carousel Plugin
In Playground,
Elastislide is a responsive image carousel that will adapt fluidly in a layout. It is a jQuery plugin that can be laid out horizontally or vertically with a pre-defined minimum number of shown images.
Slicebox – A fresh 3D image slider with graceful fallback
In Playground,
Slicebox is a jQuery 3D image slider plugin that makes use of CSS 3D Transforms and provides a graceful fallback for older browsers that don’t support the new properties.
Automatic Image Montage with jQuery
In Playground,
Arranging images in a montage like fashion can be a challenging task when considering certain constraints, like the window size when using fullscreen, the right image number to fill all the available space or also the size of the images in use. With the following script you can automatically create a montage, either for a liquid container or a fixed size container (including fullscreen), with the option to fill all the gaps.
Image Zoom Tour with jQuery
In Playground,
Today we want to share a little zoom tour script with you. Showing a main image initially, we want to be able to zoom into certain parts of the image by clicking on tags, using another image for the closer view. This next step can contain other tags that again allow to show more images. We achieve the “zoom” effect by enlarging the current image and fading in the new one.
Circular Content Carousel with jQuery
In Playground,
Today we want to share a simple circular content carousel with you. The idea is to have some content boxes that we can slide infinitely (circular). When clicking on the “more” link, the respective item moves to the left and a content area will slide out. Now we can navigate through the carousel where each step will reveal the next or previous content box with its expanded content. Clicking on the closing cross will slide the expanded content area back in and animate the item to its original position.
Expanding Fullscreen Grid Portfolio
In Playground,
Today we want to share a neat experimental portfolio template with you. The main idea is to have a grid layout that we create with jQuery Masonry. Clicking to view more, we expand the according item to fullscreen in order to show a longer description of the item and a representative fullscreen background image.
Minimal and Contrasty Color Schemes in Web Design
In Articles,
Making a web design with contrasty colors will allow for a better focus on certain areas of a web site. With a minimal color scheme, more contrast can be achieved and with the right complementary color, a unique and impactful visual impression is given.
