CSS3

Facebook Twitter

Scrollbar Visibility with jScrollPane. Var $el = $('#jp-container').jScrollPane({ verticalGutter : -16 extensionPlugin = { extPluginOpts : { mouseLeaveFadeSpeed : 500, hovertimeout_t : 1000, useTimeout : false, deviceWidth : 980 hovertimeout : null, isScrollbarHover: false, elementtimeout : null, isScrolling : false, addHoverFunc : function() { if( $(window).width() <= this.extPluginOpts.deviceWidth ) return false; var instance = this; $.fn.jspmouseenter = $.fn.show;

Scrollbar Visibility with jScrollPane

Draggable Image Boxes Grid. Today we want to create a template with a fullscreen grid of images and content areas.

Draggable Image Boxes Grid

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. 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.

Flexible Slide-to-top Accordion

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. Wave Display Effect with jQuery. How cool is it to sometimes just display content a little bit differently?

Wave Display Effect with jQuery

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. Blur Menu with CSS3 Transitions. There are so many great things we can do with the additional properties and possibilities that CSS3 brings along.

Blur Menu with CSS3 Transitions

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.

Creative CSS3 Animation Menus

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. The icons used in the demos are actually a Web Symbols typeface that we’ll include with @font-face. 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.

CSS3 Loading Animation Loop

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. For the CSS style is very simple, just play with the parameters for the graphic you want, as regards the animation simply use the transform:rotateproperty. 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.

CSS3 Hover Effects

CSS3 - Animation

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.

CSS3 Menu Navigation Effect

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! CSS3 Loading Animation. Hello guys, this time i wanted to create 3 simple CSS3 Loading Animations.

CSS3 Loading Animation

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.