Responsive jQuery Banner Slider with Pagination circles – Responsive_DG_Slider

After working on Responsive_DG_Slider,  which is a most flexible/responsive image slider with different random transition effects. After full-screen example, I am sharing another example with different transition effects. It is very easy to implement.

Here I am showing It’s Pagination circles with the height relative to the width functionality powered by the fantastic java-script library jQuery.

Configuring Your Slider

As we have done earlier, configuring the slider is very simple, you just need to place your images and call the initializer function and your slider is ready. Here’s how you can do this for liquid/responsive images slider with pagination.

The HTML

<div class="fluid_container">
        <div class="fluid_dg_wrap fluid_dg_charcoal_skin" id="fluid_dg_wrap_1">
            <div data-thumb="slides/thumbs/1.jpg" data-src="slides/1-1280x720.jpg">
                <div class="fluid_dg_caption fadeFromBottom">
                    Responsive_DG_Slider is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
                </div>
            </div>
            <div data-thumb="slides/thumbs/2.jpg" data-src="slides/2-1280x720.jpg">
                <div class="fluid_dg_caption fadeFromBottom">
                    It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
                </div>
            </div>
            <div data-thumb="slides/thumbs/3.jpg" data-src="slides/3-1280x720.jpg">
                <div class="fluid_dg_caption fadeFromBottom">
                    <em>It's <strong>completely free</strong>, with tons of effects, Prev / next, pager, Start / Stop / Auto control controls and lot of customizable options.</em>
                </div>
            </div>
            <div data-thumb="slides/thumbs/4.jpg" data-src="slides/4-1280x720.jpg">
                <div class="fluid_dg_caption fadeFromBottom">
                    Responsive_DG_Slider slideshow provides many options <em>to customize your project</em> as more as possible
                </div>
            </div>
            <div data-thumb="slides/thumbs/5.jpg" data-src="slides/5-1280x720.jpg">
                <div class="fluid_dg_caption fadeFromBottom">
                    It supports captions, HTML elements and videos and <em>it's validated in HTML5</em> (<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fdemo.web3designs.com%2FResponsive_DG_Slider%2Fresponsive-slider-pagination-circle.htm" target="_blank">have a look</a>)
                </div>
            </div>
            <div data-thumb="slides/thumbs/6.jpg" data-src="slides/6-1280x720.jpg">
                <div class="fluid_dg_caption fadeFromBottom">
                    Different color skins and layouts available, <em><a href="http://demo.web3designs.com/Responsive_DG_Slider/fullscreen-responsive-image-slider.htm">fullscreen</a> ready too</em>
                </div>
            </div>
        </div>
    </div>

The CSS

First we have to link it’s default css file.

<link rel='stylesheet' id='fluid_dg-css'  href='css/fluid_dg.css' type='text/css' media='all'>

Now some customization:

.fluid_container {
			margin: 0 auto;
			width: 100%;
		}

The jQuery

First, We have to add some jQuery library.

 <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.min.js'></script>
    <script type='text/javascript' src='Scripts/jquery.mobile.customized.min.js'></script>
    <script type='text/javascript' src='Scripts/jquery.easing.1.3.js'></script> 
    <script type='text/javascript' src='Scripts/fluid_dg.min.js'></script>

After adding all these library we have to initiate the Responsive_DG_Slider.

jQuery(document).ready(function(){
		jQuery(function(){			
			jQuery('#fluid_dg_wrap_1').fluid_dg({thumbnails: true,height:"25%"});
		}); })

You have done!!

Now enjoy your liquid slider. Please feel free to comment and share your thoughts/ideas about the result.

Updated

APIs and other options of this wonderful plugin, please click here.

You may like:

• Hot Tea / Coffee with Animated Smoke Effect – jQuery & CSS
• Cool Typography Effects With CSS3 and jQuery
• Hover and Click Trigger For CIRCULAR Elements With jQuery
• Random 3D Explosions, 3D clouds – Effects with CSS 3D and jQuery
• Cool Animated Fire Effects with CSS3 and jQuery
• jQuery Plugin for Cartoon-like Background Image Sprite Animation – AniDG – (alernative to animated Gif)
• DG_Slider – An Ultimate jQuery Content Slider Plugin
• Full-Screen Responsive jQuery Banner Slider – Responsive_DG_Slider
• Responsive jQuery Banner Slider with Pagination circles – Responsive_DG_Slider
• Animate Full-Page Multiple Background images with fade-in & fade-out effect – jQuery

Posted by: Dhiraj kumar

Full-Screen Responsive jQuery Banner Slider – Responsive_DG_Slider

After working on responsive or flexy designs, I found some serious issues about fixed width in most of images/banner sliders which I have got online. So, I thought to develop a liquid/responsive images slider with different transition effects. Here, I am going to introduce you, a most flexible/responsive slider i.e. Responsive_DG_Slider. It is so easy and useful. I have decided that I will post a page dedicated to this slider with it’s features and API later.

Here I am showing It’s full screen responsive image slider functionality powered by the fantastic java-script library jQuery. With a nice and simple design it adjusted automatically to the width of your browser screen. Image sliders add life and interactivity to your web contents. But creating an image slider from scratch is not that easy. You need some good programming skills to create your own slider. If you are not the programmer or you just don’t want to re-invent the wheel, Responsive_DG_Slider is for you. Previously, I have already developed a very simple and useful slider i. e. jQuery – DG_Slider.

Configuring Your Slider

Configuring the slider is very simple, you just need to place your images and call the initializer function and your slider is ready. Here’s how you can do this for full-screen.

The HTML

For develping a Full-Screen Background image slider you need to create the necessary HTML markups for your slider and then add references to necessary script files.

<div class="fluid_container">
        <div class="fluid_dg_wrap fluid_dg_emboss pattern_1 fluid_dg_white_skin" id="fluid_dg_wrap_4">
            <div data-thumb="slides/thumbs/1.jpg" data-src="slides/1-1280x720.jpg"></div>
            <div data-thumb="slides/thumbs/2.jpg" data-src="slides/2-1280x720.jpg"></div>
            <div data-thumb="slides/thumbs/3.jpg" data-src="slides/3-1280x720.jpg"></div>
            <div data-thumb="slides/thumbs/4.jpg" data-src="slides/4-1280x720.jpg"></div>
            <div data-thumb="slides/thumbs/5.jpg" data-src="slides/5-1280x720.jpg"></div>
            <div data-thumb="slides/thumbs/6.jpg" data-src="slides/6-1280x720.jpg"></div>
        </div>
</div>

The CSS

We have to link it’s default css file.

<link rel='stylesheet' id='fluid_dg-css'  href='css/fluid_dg.css' type='text/css' media='all'>

After attaching the default CSS, now we will customize it according to our requirement.

.fluid_container {
	bottom: 0; height: 100%; left: 0; position: fixed; right: 0; top: 0; z-index: 0;
}
#fluid_dg_wrap_4 {
	bottom: 0; height: 100%; left: 0;
	margin-bottom: 0 !important;
	position: fixed; right: 0; top: 0;
}
.fluid_dg_bar {
	z-index: 2;
}
.fluid_dg_prevThumbs, 
.fluid_dg_nextThumbs, 
.fluid_dg_prev, 
.fluid_dg_next, 
.fluid_dg_commands, 
.fluid_dg_thumbs_cont {
	background: #222;
	background: rgba(2, 2, 2, .7);
}
.fluid_dg_thumbs {
	margin-top: -100px; position: relative; z-index: 1;
}
.fluid_dg_thumbs_cont {
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
}
.fluid_dg_overlayer {
	opacity: .1;
}

The jQuery

First, We have to add some jQuery library.

    <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.min.js'></script>
    <script type='text/javascript' src='Scripts/jquery.mobile.customized.min.js'></script>
    <script type='text/javascript' src='Scripts/jquery.easing.1.3.js'></script> 
    <script type='text/javascript' src='Scripts/fluid_dg.min.js'></script>

After adding all these library we have to initiate the Responsive_DG_Slider. In this slider’s API we have several customization options. Here we are customizing some options according to this full-screen slider.

jQuery(document).ready(function(){
	jQuery(function(){			
		jQuery('#fluid_dg_wrap_4').fluid_dg({height: 'auto', loader: 'bar', pagination: false, thumbnails: true, hover: false, opacityOnGrid: false, imagePath: ''});
	}); 
})

Done!

That’s all, I hope you liked this article. Please feel free to comment and share your thoughts/ideas about the result.

Updated

APIs and other options of this wonderful plugin, please click here.

You may like:

• Hot Tea / Coffee with Animated Smoke Effect – jQuery & CSS
• Cool Typography Effects With CSS3 and jQuery
• Hover and Click Trigger For CIRCULAR Elements With jQuery
• Random 3D Explosions, 3D clouds – Effects with CSS 3D and jQuery
• Cool Animated Fire Effects with CSS3 and jQuery
• jQuery Plugin for Cartoon-like Background Image Sprite Animation – AniDG – (alernative to animated Gif)
• DG_Slider – An Ultimate jQuery Content Slider Plugin
• Full-Screen Responsive jQuery Banner Slider – Responsive_DG_Slider
• Responsive jQuery Banner Slider with Pagination circles – Responsive_DG_Slider
• Animate Full-Page Multiple Background images with fade-in & fade-out effect – jQuery

Posted by: Dhiraj kumar

Hover and Click Trigger For CIRCULAR Elements With jQuery

Today we want to share one possible solution to the circle hovering problem. We’ll create a plugin that will take care of the ‘mouseenter’, ‘mouseleave’ and ‘click’ events to be triggered only on the circular shape of the element and not its bounding box.

Applying a :hover pseudo-class to an element is widely known as the classic “hovering” over an element on a web page. A problem that arose with the introduction of the border-radius property is the non-realistic triggering of the hover event when entering the bounding box of the element and not just the actual visible area. This becomes extreme when we create a circle by setting the border-radius of a square to 50% (half of its outer width and height).

Today we want to share one possible solution to the circle hovering problem. We’ll create a plugin that will take care of the ‘mouseenter’, ‘mouseleave’ and ‘click’ events to be triggered only on the circular shape of the element and not its bounding box.

HOW IT WORKS

In our example, we’ll be creating a circle with some kind of hover effect. The structure will simply be:

<a href="#" id="circle" class="ec-circle">
    <h3>Hovered</h3>
</a>

And the style will be the following:

.ec-circle{
    width: 420px;
    height: 420px;
    -webkit-border-radius: 210px;
    -moz-border-radius: 210px;
    border-radius: 50%;
    text-align: center;
    overflow: hidden;
    font-family:'Kelly Slab', Georgia, serif;
    background: #dda994 url(HoverClickTriggerCircle.jpg) no-repeat center center;
    box-shadow: 
        inset 0 0 1px 230px rgba(0,0,0,0.6),
        inset 0 0 0 7px #d5ad94;
    transition: box-shadow 400ms ease-in-out;
    display: block;
    outline: none;
}

Now, we will define a class for the hover effect but not a dynamic pseudo-class :hover. The idea is to apply this class then with jQuery when we enter the circular area of our element:

.ec-circle-hover{
    box-shadow: 
        inset 0 0 0 0 rgba(0,0,0,0.6),
        inset 0 0 0 20px #c18167,
        0 0 10px rgba(0,0,0,0.3);
}

Only when we have JavaScript disabled, we’ll add the pseudo-class. This style can be found in the noscript.css:

.ec-circle:hover{
    box-shadow: 
        inset 0 0 0 0 rgba(0,0,0,0.6),
        inset 0 0 0 20px #c18167,
        0 0 10px rgba(0,0,0,0.3);
}

THE JAVASCRIPT

We are going to create a simple plugin that basically “redefines” the three events mentioned earlier. We’ll make the events only applicable on the circular shape:

$.CircleEventManager            = function( options, element ) {
    this.$el = $( element );
    this._init( options );
};

$.CircleEventManager.defaults   = {
    onMouseEnter    : function() { return false },
    onMouseLeave    : function() { return false },
    onClick         : function() { return false }
};

$.CircleEventManager.prototype  = {
    _init           : function( options ) {
        this.options = $.extend( true, {}, $.CircleEventManager.defaults, options );
        // set the default cursor on the element
        this.$el.css( 'cursor', 'default' );
        this._initEvents();

    },
    _initEvents     : function() {
       var _self   = this;
       this.$el.on({
           'mouseenter.circlemouse'    : function( event ) {
               var el  = $(event.target),
               circleWidth   = el.outerWidth( true ),
               circleHeight  = el.outerHeight( true ),
               circleLeft    = el.offset().left,
               circleTop     = el.offset().top,
               circlePos     = {
                       x     : circleLeft + circleWidth / 2,
                       y     : circleTop + circleHeight / 2,
                       radius: circleWidth / 2
                   };

                // save cursor type
                var cursor  = 'default';
                if( _self.$el.css('cursor') === 'pointer' || _self.$el.is('a') )
                    cursor = 'pointer';
                el.data( 'cursor', cursor );
                el.on( 'mousemove.circlemouse', function( event ) {
                var distance    = Math.sqrt( Math.pow( event.pageX - circlePos.x, 2 ) + Math.pow( event.pageY - circlePos.y, 2 ) );

                if( !Modernizr.borderradius ) {

                  // inside element / circle
                  el.css( 'cursor', el.data('cursor') ).data( 'inside', true );
                  _self.options.onMouseEnter( _self.$el );

                 }
                 else {

                   if( distance <= circlePos.radius && !el.data('inside') ) {                       // inside element / circle                       el.css( 'cursor', el.data('cursor') ).data( 'inside', true );                       _self.options.onMouseEnter( _self.$el );                                                   }                     else if( distance > circlePos.radius && el.data('inside') ) {

                      // inside element / outside circle
                      el.css( 'cursor', 'default' ).data( 'inside', false );
                      _self.options.onMouseLeave( _self.$el );
                    }
                   }
                }); 
            },
            'mouseleave.circlemouse'    : function( event ) {
              var el  = $(event.target);
              el.off('mousemove');
               if( el.data( 'inside' ) ) {
                  el.data( 'inside', false );
                  _self.options.onMouseLeave( _self.$el );
              }
             },
            'click.circlemouse'         : function( event ) {
              // allow the click only when inside the circle
                var el  = $(event.target);
                if( !el.data( 'inside' ) )
                    return false;
                else
                    _self.options.onClick( _self.$el );
            }
        });         
    },
    destroy             : function() {     
        this.$el.unbind('.circlemouse').removeData('inside').removeData('cursor'); 
    }
}

When we enter with the mouse in the square bounding box of our circle, we bind the ‘mousemove’ event to the element and like that we can track if the distance of the mouse to the center of the element if longer than the radius. If it is, we know that we are not yet hovering the circular area of the element.

Once the distance of the mouse is shorter than the radius, we know that we entered the circle and we trigger our custom ‘mouseenter’ event.
We also only allow the click event when the mouse is inside of the circle.
In our example we will then apply our plugin to the regarding element. In our case, we are adding the hover class on ‘mouseenter’ and removing it on ‘mouseleave’.

$('#circle').circlemouse({
    onMouseEnter    : function( el ) {

        el.addClass('ec-circle-hover');

    },
    onMouseLeave    : function( el ) {

        el.removeClass('ec-circle-hover');

    },
    onClick         : function( el ) {

        alert('clicked');

    }
})

Remember that the “normal” pseudo hover class is also defined in the noscript.css which gets applied when JavaScript is disabled.

Your turn

I hope you enjoyed this article and the techniques I used. Please share your comments and questions below!

Posted by: Dhiraj kumar

Rotating Words With CSS Animations – CSS3 Keyframes Animation Example

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.

THE HTML

We’ll have a main wrapper with a h2 heading that contains first-level spans and two divisions for the rotating words:

<section class="rw-wrapper">
	<h2 class="rw-sentence">
		<span>Real poetry is like</span>
		<br />
		<span>creating beautiful butterflies</span>
		<br />
		<span>with a silent touch of</span>
		<div class="rw-words rw-words-1">
			<span>spice</span>
			<span>colors</span>
			<span>happiness</span>
			<span>wonder</span>
			<span>sugar</span>
			<span>happiness</span>
		</div>
	</h2>
</section>

Now, ignoring the garbage placeholder text, we want each span of the rw-word to appear at a time. For that we’ll be using CSS animations. We’ll create one animation for each division and each span will run it, just with different delays.
So, let’s look at the CSS.

THE CSS3

First, we will style the main wrapper and center it on the page:

.rw-wrapper{
	width: 80%;
	position: relative;
	margin: 110px auto 0 auto;
	font-family: 'Bree Serif';
	padding: 10px;
	height: 400px;
	overflow: hidden;
}

We’ll add some text shadow to all the elements in the heading:

.rw-sentence{
	margin: 0;
	text-align: left;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}

And add some specific text styling to the spans:

.rw-sentence span{
	color: #444;
	white-space: nowrap;
	font-size: 200%;
	font-weight: normal;
}

The divisions will be displayed as inline elements, that will allow us to “insert” them into the sentence without breaking the flow:

.rw-words{
	display: inline;
	text-indent: 10px;
}

Each span inside of a rw-words div will be positioned absolutely and we’ll hide any overflow:

.rw-words span{
	position: absolute;
	opacity: 0;
	overflow: hidden;
	color: #888;
	-webkit-transform-origin: 10% 75%;
	-moz-transform-origin: 10% 75%;
	-ms-transform-origin: 10% 75%;
	-o-transform-origin: 10% 75%;
	transform-origin: 10% 75%;
}

Now, we’ll run two animations. As mentioned previously, we’ll run the same animation for all the spans in one div, just with different delays:

.rw-words-1 span{
	animation: rotateWord 16s linear infinite 0s;
}
.rw-words-2 span{
    animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) {
	animation-delay: 3s; 
	color: #6b889d;
}
.rw-words span:nth-child(3) {
	animation-delay: 6s; 
	color: #6b739d;	
}
.rw-words span:nth-child(4) {
	animation-delay: 9s; 
	color: #7a6b9d;
}
.rw-words span:nth-child(5) {
	animation-delay: 12s; 
	color: #8d6b9d;
}
.rw-words span:nth-child(6) {
	animation-delay: 15s; 
	color: #9b6b9d;
}

Our animations will run one cycle, meaning that each span will be shown once for three seconds, hence the delay value. The whole animation will run 6 (number of images) * 3 (appearance time) = 18 seconds.
We will need to set the right percentage for the opacity value (or whatever makes the span appear). Dividing 6 by 18 gives us 0.333… which would be 33% for our keyframe step. Everything that we want to happen to the span needs to happen before that. So, after tweaking and seeing what fits best, we come up with the following animation (Fade in and “fall”) for the first words:

@keyframes rotateWord {
    0% { opacity: 0; }
    5% { opacity: 1; }
    17% { opacity: 1; transform: rotate(0deg); }
	19% { opacity: 1; transform: rotate(98deg); }
	21% { opacity: 1; transform: rotate(86deg); }
	23% { opacity: 1; transform: translateY(85px) rotate(83deg); }
	25% { opacity: 0; transform: translateY(170px) rotate(80deg); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}

We’ll fade in the span and we’ll also animate its height.
The animation for the words in the second div will fade in and animate their width. We added a bit to the keyframe step percentages here, because we want these words to appear just a tiny bit later than the ones of the first word:

@keyframes rotateWordsSecond {
    0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
    10% { opacity: 0.3; width: 0px; }
    20% { opacity: 1; width: 100%; }
    27% { opacity: 0; width: 100%; }
    100% { opacity: 0; }
}

And that’s it folks! There are many possibilities for the animations, you can check out the demo and see what can be applied!
I hope you enjoyed this tutorial and find it inspiring!

 

Posted by: Dhiraj kumar

Creating CSS Starbursts Design with CSS3 Transform

Working with the new CSS3 rotation property I got that I could create image free starbursts. All I needed was a series of nested block-level elements each rotated by a slightly different amount. The rotation would distribute the box corners around the circumference of the star.

About these CSS3 Starbursts:

A good thing is if you create your starbursts with CSS3 you can do so much more than with images. You can experiment with different numbers of points/corners, rounded borders, resize, text-shadows and animations also.

To see the animations you will need to use latest browsers like IE 9+, Firefox 4.0+, Safari 4.1+ and Chrome 3.0+.

No CSS Hacks

There are no CSS hacks required for these CSS3 starbursts. CSS is designed to be backwards compatible so any browser that cannot understand CSS3 will simply ignore these new rules without any error.

iPhone, iPod Touch, & iPad Compatible

The Safari browser is one of the most advanced when it comes to CSS3 because it uses the powerful Webkit rendering engine. This means all these animated starbursts will work fine on the iPhone, iPod Touch and the iPad.

SEO Friendly

Because the text in each starburst is actually real text it will be crawled and indexed by Google like everything else. It also means that people who are vision impaired can more easily read and understand your web page if they are using a screen reader.

No Images Required

All of the shapes, colours and shadows in the starbursts above are created using CSS3 rules. No images are used at all.

No JavaScript Required

The animations in these demos are made possible with the CSS3 transition rules. No JavaScript is used to create any effects.

Resizable Text Compatible

All the dimensions of the starbursts are set in em measurements. This means that you can increase the text size in your browser and the starburst will grow in size along with all other text. This is great news for web accessibility.

The HTML

<div class="price-container">
  <div class="price">
    <span class="label">Buy</span>
    <span class="number">$99.95</span>
    <span class="label">Now</span>
  </div>
</div>

I have <div> that, you guessed it, contains the price starburst. I’ll use this for the background of the starburst. The <div> is the container for the text inside (the price info.) That’s it for the markup. From here, I’ll be styling pseudo classes to create the multiple points. Also, I mentioned earlier that there were a few less points in the CSS version of this starburst. This markup doesn’t really have anything unnecessary in it.

The CSS

Now on to the fun part. Let me overview what I’m going to do, then I’ll show you the styles needed to achieve it. I’m going to style .price-container, .price, and the :before and:after pseudo elements for each. Essentially, I’ve got six elements to work with. I created this background image to apply to each of the elements and I will rotate 15 degrees each:

The CSS is a little bit longer. I’ve used the rotation rules in the CSS, one is for Firefox (prefixed with -moz-), one is for webkit i.e. Safari and Chrome (prefixed with -webkit-), one is for Internet Explorer (prefixed with -ms-), one is for Opera (prefixed with -o-), and the other is the standard rotation rule as it will be used once this rotation property becomes standard:

.price-container,
.price-container:before,
.price-container:after,
.price-container .price,
.price-container .price:before,
.price-container .price:after {
	height: 8.5em;
	width: 8.5em;
	background: #760B1F url(price-bg.png) top left no-repeat;
	background-size: 8.5em;
}

.price-container:before,
.price-container:after,
.price-container .price:before,
.price-container .price:after {
	content: "";
	position: absolute;
}

.price-container {
	margin: 100px auto; /* Centering for demo */
	position: relative; /* Context */
	top: 2.5em;
	left: 2.5em;
	-webkit-transform: rotate(-45deg);
	  -moz-transform: rotate(-45deg);
	   -ms-transform: rotate(-45deg);
	    -o-transform: rotate(-45deg);
	       transform: rotate(-45deg);
}

.price-container:before {
	top: 0;
	left: 0;
	-webkit-transform: rotate(-30deg);
	  -moz-transform: rotate(-30deg);
	   -ms-transform: rotate(-30deg);
	    -o-transform: rotate(-30deg);
	       transform: rotate(-30deg);
}

.price-container:after {
	top: 0;
	left: 0;
	-webkit-transform: rotate(-15deg);
	  -moz-transform: rotate(-15deg);
	   -ms-transform: rotate(-15deg);
	    -o-transform: rotate(-15deg);
	       transform: rotate(-15deg);
}

.price-container .price {
	padding: .5em 0em;
	height: 7.5em; /* height minus padding */
	position: absolute;
	bottom: 0;
	right: 0;
	-webkit-transform: rotate(45deg);
	  -moz-transform: rotate(45deg);
	   -ms-transform: rotate(45deg);
	    -o-transform: rotate(45deg);
	       transform: rotate(45deg);
	z-index: 1; /* important so the text shows up */
}

.price-container .price:before {
	top: 0;
	left: 0;
	-webkit-transform: rotate(60deg);
	  -moz-transform: rotate(60deg);
	   -ms-transform: rotate(60deg);
	    -o-transform: rotate(60deg);
	       transform: rotate(60deg);
}

.price-container .price:after {
	top: 0;
	left: 0;
	-webkit-transform: rotate(75deg);
	  -moz-transform: rotate(75deg);
	   -ms-transform: rotate(75deg);
	    -o-transform: rotate(75deg);
	       transform: rotate(75deg);
}

A few things I’ll point out about the styles:

• Notice the order of the rotation angles: This order is important because there is going to be text inside the inner-most element. Therefore, the last element (the one the text going in, in this case .price) has to be straight. Notice that .price-container is rotated -45 degrees and .price is rotated 45 degrees – back to 0.
• The height and width: The height and width has to be set since we are dealing with background images here. I’ve set it in ems to adjust appropriately when the text size increases.
• There’s a padding top and bottom on .price-container .price. That’s why the height is a little different than all the others.
• Everything is positioned absolutely inside the first container. .price-container hasleft: 2.5em and top: 2.5em just to move the whole thing a little. When everything is rotated, the corners go of the page and out of the container a little.
• z-index: There’s a z-index defined for .price-container .price. This is so the price information inside this div is visible.

Now all that’s left is styling the text.

.price-container .price span {
        position: relative;
	z-index: 100;
	display: block;
	text-align: center;
	color: #FE0;
	font: 1.8em/1.4em 'georgia',Sans-Serif;
	text-transform: uppercase;
}

.price-container .price span.number {
  font-weight: bold;
  font-size: 2.5em;
  line-height: .9em;
  color: #fff;
}

Some more CSS used in hover effect:

.price-container.one:hover {
	-webkit-transform: rotate(-20deg);
	-moz-transform: rotate(-20deg);
	-ms-transform: rotate(-20deg);
	-o-transform: rotate(-20deg);
	transform: rotate(-20deg);
}

Doing It Image-Free

Now, I have some extra stuff in here because the design called for this very subtle inner border. If you don’t like or need the inner border, just remove the bit about background image and background size and design will hold up fine.

Browser Support

This works as-is in IE 9+, Firefox 4.0+, Safari 4.1+ and Chrome 3.0+. IE 8 and below do not support background-size, and Chrome 1.0, Firefox 3.6 and Safari 3.0 will require some vendor prefixes. IE8 does support pseudo elements, however doesn’t support transform.

The fallback would be a colored square. Very likely not a huge problem.

There You Have It

It’s a price star thing. Flexible enough to grow when you increase your font size. Made with some CSS. You can use this for highlighting prices, discounts etc.

That’s it!

I hope you enjoyed this article and if you have questions, comments, or suggestions, let me know! Thanks for reading.

Posted by: Dhiraj kumar

How to create a simple CSS3 loading animation

While playing DIRT 3, I’ve noticed a very cool triangle animation as part of their UI. Almost immediately, I thought about how to build a similar version of it using CSS3.

So, in this article you’ll see an experiment about how to create a simple CSS3 loading animation.

For this example, I’ll be using two CSS3 animations: one that fades the color for the triangles and one animation that rotates the whole design. These two animations, synchronized, will help creating a quite nice effect.

The HTML

Initially, I wanted to use pseudo-elements in order to have less markup elements.

Here’s how the markup looks like:

<div class="loading-wrap">
  <div class="triangle1"></div>
  <div class="triangle2"></div>
  <div class="triangle3"></div>
</div>

The CSS

There are some things you may find interesting here:

• For a nice color fade across all three triangles, you need to increment the animation-delay.
• Notice the gap between 20% and 100% for the rotation key-frames. This helps adding a stop effect for the animation.

.loading-wrap {
  width: 60px; height: 60px;
  position: absolute;
  top: 50%; left: 50%;
  margin: -30px 0 0 -30px;
  background: #777;
  animation: rotation ease-in-out 2s infinite;
  border-radius: 30px;
}

.triangle1, .triangle2, .triangle3 {
  border-width: 0 20px 30px 20px;
  border-style: solid;
  border-color: transparent;
  border-bottom-color: #67cbf0;
  height: 0; width: 0;
  position: absolute;
  left: 10px; top: -10px;
  animation: fadecolor 2s 1s infinite;
}

.triangle2, .triangle3 {
  content: '';
  top: 20px; left: 30px;
  animation-delay: 1.1s;
}

.triangle3 {
  left: -10px;
  animation-delay: 1.2s;
}

@keyframes rotation {
    0% {transform: rotate(0deg);}
    20% {transform: rotate(360deg);}
    100% {transform: rotate(360deg);}
}

@keyframes fadecolor {
    0% {border-bottom-color: #eee;}
    100%{border-bottom-color: #67cbf0;}
}

Browser support

Try using modern browsers like:

• Chrome,
• Firefox (Gecko),
• Opera 12+,
• Internet Explorer 10 or
• Safari 5+.

Conclusion

This is an experiment and you must be aware of it. For now, I think an animated GIF will do the job better in most of cases.

Also, this isn’t that example that advocates for using CSS3 stuff instead images to save HTTP requests. It is not applicable here as limited browser support for CSS3 animations has something to say. Though, I hope you’ll find this example useful and inspiring for your future projects.

Thanks for reading and I’m looking forward to read your opinions!

Posted by: Dhiraj kumar

HTML5 Logo Design Using CSS3

As you probably found out, some time ago, the The World-Wide Web Consortium (W3C) has unveiled the HTML5 Logo. They launched more than a logo as they got also a full branding, including badges, t-shirts and stickers.

So, I suppose that’s a good thing, that HTML5 got some branding, sounds very interesting!

While looking at it and admiring it, as I find it very nice, I thought about how can I do it with CSS3 (typically for me).

What about the logo? It’s A Bird… It’s A Plane…

No, it’s the new HTML5 logo and in this article I’ll design it using only CSS!

Concept

Getting back to our work, I thought about the ingredients I’d need for this angular orange shield:

• CSS borders shapes
• :before and :after pseudo-elements
• CSS3 properties that I used: opacity and transform
• Geo font via Google font API
• Some empty divs to build the five number (later edit)

CSS borders shapes

I used borders in order to create the shield icon.

:before and :after pseudo-elements

Using this type of selectors it’s helpful when you want to achieve a minimal HTML markup.

CSS3 opacity and transform

Even if the article’s name says : “HTML5 Logo made with CSS3”, this isn’t mainly about CSS3, but, opacity and transform properties were very useful for this.

Custom font

The method I’ll use to display the 5 number is to include the Geo font via Google Font API.

I know it’s not identical, but, at the time I wrote this article, I found it quite similar. Instead, I’d appreciate if you could suggest me a better font to use for the number.

For a perfect result, I guess I could have used CSS3 skew transformation and a lot of empty divs to create the “5” number …

HTML5

<div id="wrapper">
    <span>5</span>

    <div class="inner"></div>
    <div class="inner left"></div>
    <div class="inner left cover"></div>    
</div>

CSS3

#wrapper {
        position: relative;
        width: 340px;
        margin: 10px auto 30px auto;
    }

    #wrapper span {
        font: normal 475px/305px 'Geo', serif;
        width: 340px;
        text-align: center;
        position: absolute;
        top: 0;
        z-index: 9999;
        color: white;
    }    

    #wrapper:before {
        content: '';
        display: block;
        /*340 total width */
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-top: 345px solid #e34c26;
        width: 280px;
    }

    #wrapper:after {
        content: '';
        display: block;
        /*280 total width */        
        border-left: 140px solid transparent;
        border-right: 140px solid transparent;
        border-top: 40px solid #e34c26;
        width: 0;
        margin-left: 30px;
    }

    /**/

    .inner {
    position: absolute;
    top: 0;

    -moz-transform: scale(0.85);
    -webkit-transform: scale(0.85);
    -o-transform: scale(0.85);
    -ms-transform: scale(0.85);
    transform: scale(0.85);	
    }

    .inner:before {
        content: '';
        display: block;
        /*340 total width */
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-top: 345px solid #f06529;
        width: 280px;
    }

    .inner:after {
        content: '';
        display: block;
        /*280 total width */        
        border-left: 140px solid transparent;
        border-right: 140px solid transparent;
        border-top: 40px solid #f06529;
        width: 0;
        margin-left: 30px;

        position: relative;
        top: -1px; /* Fix spacing */
    }

    /**/

    .inner.left {
        width: 170px; /* half from the 340px total width */
        overflow: hidden;
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);		
        transform: scale(1);		
    }

    .inner.left:before {
        border-top-color: #e34c26;
    }

    .inner.left:after {
        border-top-color: #e34c26;
    }

    /**/

    .inner.left.cover {
        z-index: 10000;
        opacity: 0.1;
    }

Custom Font From Google Font API

<link href='http://fonts.googleapis.com/css?family=Geo' rel='stylesheet' type='text/css'>

My initial result:

I know it’s not perfect, especially the 5 number, but I hope you will still like it!

Updated result

I finally made it, I updated the initial HTML5 logo. Instead the custom font, empty divs were used in order to replicate the logo.

Now you have it! Minimal HTML markup, CSS3 transforms and pseudo-elements:-

HTML5

<div id="wrapper">        
    <div id="five">
        <div class="top"></div>
        <div class="left-top"></div>
        <div class="middle"></div>
        <div class="right"></div>
        <div class="bottom"></div>
        <div class="left-bottom"></div>      
    </div>

    <div class="inner"></div>
    <div class="inner left"></div>

    <div class="inner left cover"></div>    
</div>

CSS

h1 {
        font: bold 90px 'arial black';
        margin: 20px 0 0 0;
        text-align: center;
    }

    p {
        text-align: center;
    }

    /**/

    #wrapper {
        position: relative;
        width: 340px;
        margin: 10px auto 30px auto;
    }

    /**/

    #five {
        position: absolute; 
        z-index: 1;
        top: 0;
    }

    #five div,  #five div:after {
        position: absolute;
        background: #fff;
    }    

    #five .left-top {
        width: 40px;
        height: 130px;
        top: 72px;
        left: 70px;
        -webkit-transform: skew(5deg);
        -moz-transform: skew(5deg);
        -o-transform: skew(5deg);
		-ms-transform: skew(5deg);
		transform: skew(5deg);		
    }

    #five .top {
        width: 90px;
        height: 40px;        
        top: 72px;
        left: 80px;
    }

    #five .top:after {
        content: '';        
        left: 85px;
        top: 0;
        height: 40px;        
        width: 110px;
        -moz-transform: skew(-5deg);
        -webkit-transform: skew(-5deg);
        -o-transform: skew(-5deg);
		-ms-transform: skew(-5deg);		
		transform: skew(-5deg);
    }

    #five .middle {
        width: 96px;
        height: 40px;
        top: 162px;
        left: 75px;
    }

    #five .middle:after {    
        content: '';        
        top: 0;
        left: 96px;
        width: 80px;
        height: 40px;        
    }

    #five .right {
        left: 225px;
        top: 162px;
        height: 125px;        
        width: 40px;
        -moz-transform: skew(-5deg);
        -webkit-transform: skew(-5deg);
        -o-transform: skew(-5deg);
		-ms-transform: skew(-5deg);	
		transform: skew(-5deg);			
    }

    #five .bottom {	
        width: 90px;
        height: 40px;
        top: 260px;
        left: 87px;
        -webkit-transform: rotate(14deg);
        -moz-transform: rotate(14deg);
        -o-transform: rotate(14deg);  
		-ms-transform: rotate(14deg);		
		transform: rotate(14deg);		
    }

    #five .bottom:after {
        content: '';        
        left: 73px;
        top: -19px;
        height: 40px;        
        width: 94px;       
        -webkit-transform: rotate(-28deg);
        -moz-transform: rotate(-28deg);
        -o-transform: rotate(-28deg);
		-ms-transform: rotate(-28deg);	
		transform: rotate(-28deg);		
    }

    #five .left-bottom {	
        width: 40px;
        height: 65px;
        top: 222px;
        left: 80px;
        -webkit-transform: skew(5deg);
        -moz-transform: skew(5deg);
        -o-transform: skew(5deg);    
		-ms-transform: skew(5deg);	
		transform: skew(5deg);
    }

     /**/   

    #wrapper:before {
        content: '';
        display: block;
        /*340 total width */
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-top: 345px solid #e34c26;
        width: 280px;
    }

    #wrapper:after {
        content: '';
        display: block;
        /*280 total width */        
        border-left: 140px solid transparent;
        border-right: 140px solid transparent;
        border-top: 40px solid #e34c26;
        width: 0;
        margin-left: 30px;
    }

    /**/

    .inner {
        position: absolute;
        top: 0;

        -moz-transform: scale(0.85);
        -webkit-transform: scale(0.85);
        -o-transform: scale(0.85);
		-ms-transform: scale(0.85);	
		transform: scale(0.85);		
    }

    .inner:before {
        content: '';
        display: block;
        /*340 total width */
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-top: 345px solid #f06529;
        width: 280px;
    }

    .inner:after {
        content: '';
        display: block;
        /*280 total width */        
        border-left: 140px solid transparent;
        border-right: 140px solid transparent;
        border-top: 40px solid #f06529;
        width: 0;
        margin-left: 30px;

        position: relative;
        top: -1px; /* Fix spacing */
    }

    /**/

    .inner.left {
        width: 170px; /* half from the 340px total width */
        overflow: hidden;
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
    }

    .inner.left:before {
        border-top-color: #e34c26;
    }

    .inner.left:after {
        border-top-color: #e34c26;
    }

    /**/

    .inner.left.cover {
        z-index: 10000;
        opacity: 0.1;
    }

Browser support

Latest versions of:

• Mozilla
• Chrome
• Safari
• Opera
• IE9

 

Posted by: Dhiraj kumar

Cool notification messages with CSS3 and jQuery

Nowadays, UX is a key factor when it comes about creating/designing a product or system. To keep users happy, developers struggle to create a good experience and a better interactivity. UX is a term used to describe the overall experience and satisfaction a user has when using a product or system. So, a good UX will always make users happy and businesses more successful. Notification messages are an important part of the user experience and you can’t afford to omit them. A notification alert message should appear every time the user perform important tasks. In this article, you’ll learn how to create some alert messages with CSS3 and jQuery.

Message Types

Bellow is a list with common notification messages:

• Info
• Error
• Warning
• Success

Info

Its purpose is to inform user regarding a relevant matter.

Error

When an operation has failed, the user must be notified. For example: “The account couldn’t be deleted.” or “Your settings weren’t saved” etc.

Warning

This type of message notify the user of a condition that might cause a problem in the future.

Success

The success message should be displayed after user successfully performs an action.

The HTML

<div class="info message">
     <h3>FYI, something just happened!</h3>
     <p>This is just an info notification message.</p>
</div>

<div class="error message">
     <h3>Ups, an error ocurred</h3>
     <p>This is just an error notification message.</p>
</div>

<div class="warning message">
     <h3>Wait, I must warn you!</h3>
     <p>This is just a warning notification message.</p>
</div>

<div class="success message">
     <h3>Congrats, you did it!</h3>
     <p>This is just a success notification message.</p>
</div>

The CSS

.message{
     -webkit-background-size: 40px 40px;
     -moz-background-size: 40px 40px;
     background-size: 40px 40px;
     background-image: -webkit-gradient(linear, left top, right bottom,
                color-stop(.25, rgba(255, 255, 255, .05)), color-stop(.25, transparent),
                color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .05)),
                color-stop(.75, rgba(255, 255, 255, .05)), color-stop(.75, transparent),
                         to(transparent));
     background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                         transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                         transparent 75%, transparent);
     background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                         transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                         transparent 75%, transparent);
     background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                          transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                          transparent 75%, transparent);
     background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                          transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                           transparent 75%, transparent);
     background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                           transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                            transparent 75%, transparent);
     -moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
     -webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
     box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
     width: 100%;
     border: 1px solid;
     color: #fff;
     padding: 15px;
     position: fixed;
     _position: absolute;
     text-shadow: 0 1px 0 rgba(0,0,0,.5);
     -webkit-animation: animate-bg 5s linear infinite;
     -moz-animation: animate-bg 5s linear infinite;
}
.info{
     background-color: #4ea5cd;
     border-color: #3b8eb5;
}

.error{
     background-color: #de4343;
     border-color: #c43d3d;
}

.warning{
     background-color: #eaaf51;
     border-color: #d99a36;
}

.success{
     background-color: #61b832;
     border-color: #55a12c;
}

.message h3{
     margin: 0 0 5px 0;
}

.message p{
     margin: 0;
}

@-webkit-keyframes animate-bg{
    from {
       background-position: 0 0;
    }
    to {
       background-position: -80px 0;
    }
}

@-moz-keyframes animate-bg{
    from {
       background-position: 0 0;
    }
    to {
       background-position: -80px 0;
    }
}

Note the animate-bg, which animate the background diagonal stripes. Of course, to see this effect, you should use latest Webkit browsers like Chrome/Safari or Mozilla 5+. The notification messages will be hidden initially. For that we’ll use fixed positioning (absolutevalue just for IE6 – as there is no position:fixed support).

    position: fixed;
     _position: absolute; /* IE6 only */

The jQuery

Define the messages types using an array:

var myMessages = ['info','warning','error','success'];

The below function hides the notification messages. Messages could have dynamic heights and for that, each message’s height is calculated in order to hide it properly.

function hideAllMessages(){
         var messagesHeights = new Array(); // this array will store height for each
         for (i=0; i<myMessages.length; i++){
                   messagesHeights[i] = $('.' + myMessages[i]).outerHeight(); // fill array
                   $('.' + myMessages[i]).css('top', -messagesHeights[i]); //move element outside viewport
         }
}

The showMessage function is called when document ready.

function showMessage(type){
        $('.'+ type +'-trigger').click(function(){
                  hideAllMessages();
                  $('.'+type).animate({top:"0"}, 500);
        });
}

On page load, first of all we’ll hide all the messages: hideAllMessages(). Then, for each trigger, show the equivalent message:

$(document).ready(function(){
                 // Initially, hide them all
                 hideAllMessages();

                 // Show message
                 for(var i=0;i<myMessages.length;i++){
                        showMessage(myMessages[i]);
                 }

                 // When message is clicked, hide it
                 $('.message').click(function(){
                                  $(this).animate({top: -$(this).outerHeight()}, 500);
                  });            
});

Conclusion

Using CSS3, I think you can find endless possibilities to design notification messages. The above is just a minimal example, with no images (for simplicity’s sake). But, the design is not everything, as functionality and interactivity have a very important role here.

Updates

• Added CSS3 animation support for Mozilla 5+. I also fixed the proper CSS3 animation.
• CSS3 gradients syntax updated. Now, Safari also renders background stripes.

Posted by: Dhiraj kumar