Scrollbar Visibility with jScrollPane. 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. View demoDownload source jScrollPane was created by Kevin Luck and you can read more about it here:jScrollPane – cross browser styleable scrollbars with jQuery and CSS. Draggable Image Boxes Grid. 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. View demo Download source The main idea for this template and its effects comes from the beautiful Flash-based website of Stephen Hamilton. Circle Navigation Effect with CSS3. 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. View demo Download source The beautiful images are by Andrey & Lili and they are licensed under the CC BY-NC 3.0 License. Flexible Slide-to-top Accordion. Wave Display Effect with jQuery. 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. View demo Download source How cool is it to sometimes just display content a little bit differently?
The images used in the demo are by Chris Willis. The icons are by WPZOOM and you can find the set here:WPZOOM Developer Icon Set (154 free icons) They are licensed under the Attribution-ShareAlike 3.0 Unported License. The beautiful slider is by Orman Clark of premiumpixels.com. How it works The HTML structure will consist of a main wrapper with the class wd-wrapper. Initially, we will have the sine curve showing small thumbnails, all randomly rotated: Options Demos.
Blur Menu with CSS3 Transitions. 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. View demo Download source. Creative CSS3 Animation Menus. 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. View demo Download source 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. Original Hover Effects with CSS3. CSS3 Loading Animation Loop. Hi folks, this time we’re going to see and create three CSS3 animation loop, can be used in many fields, such as preloader for images with jQuery.
I remember this animations are only visible in Firefox, Safari and Chrome. Let’s see how to create it. First Example CSS3 Loading Animation Loop In this first example, create only two div and thanks to the border-radius property, they will take the circle shape. CSS3 Hover Effects. Hello guys, this time I will show you other five examples of hover effects using different CSS properties compared to the old tutorial posted on Codrops.
In summary, we seek the same method but we will act especially using the border property, as we shall see later that allows us to create very particular effects. Please note that this will only work properly in modern browsers that support the CSS3 properties in use. HTML Markup This simple structure allows us to make these effects.
CSS3 Menu Navigation Effect. Hi guys been a long time since i write on my blog and then i inaugurate this day with a new tutorial that will treat apply CSS3 properties to menu navigation.
We are going to see how to play nice effects without the use of jQuery. I remember this tutorial works perfectly on all browsers except Internet Explorer for the first two examples, while the last example will only be visible in Firefox, Safari and Chrome because it uses the CSS3 Animation Property. Let’s start! First Example – CSS3 Menu Navigation Effect only CSS3 Transition Now look carefully … this markup is really easy, just create an unordered list and insert inside the links that we need, apply an .animation class every li that has a link and we will see later how the animation will apply to our links!
CSS3 Loading Animation. Hello guys, this time i wanted to create 3 simple CSS3 Loading Animations.
I remember that CSS3 Loading Animations are only visible in Firefox, Safari and Chrome. What do you wait, start reading! How To Create CSS-Based Content Accordion. In today’s tutorial we are going to learn how we can create a horizontal and vertical content accordion by just using CSS3. There are many jQuery plugins out that can do this job for you but what do you do if the visitor has Javascript turned off, then the accordion won’t work correctly. If your accordion is purely in CSS then it will work for all your visitors. We are going to create a horizontal and vertical content accordion. On clicking the headline text the slide will open displaying the full content, and here’s a quick preview (screenshots) how they look like. Like what you see? 1.