CSS3 Modal Window Popups – sliding forms with fancybox effect

Today, I will describe you how to create cool CSS3 modal popup windows (or boxes). Literally, not so long ago, in order to achieve such effects, we used jQuery. But, as it turned out, CSS3 has all the necessary tools for making modal windows too. In our demonstration I have prepared single page with two popup elements: join form and login form. Welcome to test results (domo) and understand how it was made. read more @ http://www.css-jquery-design.com/…

css3-modal-window-popup

HTML

First, lets create the main HTML markup. As you can see – the structure is quite easy. Here are one panel with buttons and two popups. Each of them contains own overlay DIV element and popup DIV element with some content inside and ‘close’ button.  read more @ http://www.css-jquery-design.com/…

read-more-button

Animated Color wheel spinning with CSS3 Keyframes animation, Transform and Transition

I have done some experimental work to create CSS3 Animation without using JavaScript. I end up creating some animations using CSS3 Keyframes and Transform and like to share. I have done this animation using border-color tricks and CSS Transform: i.e. CSS scale and CSS3 rotation.

Note: Before going I like to make something clear, Internet Explorer 10, Firefox, and Opera supports the @keyframes rule and animation property. Chrome and Safari requires the prefix -webkit- in css.

Important: Internet Explorer 9, and earlier versions, does not support the @keyframe rule or animation property.

css3-keyframes-color-wheel-animation

The HTML

<div id="colorWheel">
    <span class="color01"></span>
    <span class="color02"></span>
    <span class="color03"></span>
    <span class="color04"></span>
    <span class="color05"></span>
    <span class="color06"></span>
    <span class="color07"></span>
    <span class="color08"></span>
    <span class="color09"></span>
    <span class="color10"></span>
</div>

The CSS

Now, We will use some CSS Technique using border-color tricks and CSS3 rotation. I have created this color cycle without using any image.  I have done a cool rotating wheel animation  using @keyframes animation.

#colorWheel {
    height: 100px;
    width: 100px;
    margin: 40px auto ;
    position: absolute; left:10%;
    -webkit-transform-origin: 50px 150px;
    -moz-transform-origin: 50px 150px;
    -ms-transform-origin: 50px 150px;
    -o-transform-origin: 50px 150px;
    transform-origin: 50px 150px;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
    animation: wheel 10s ease-in-out infinite alternate;
    -moz-animation: wheel 10s ease-in-out infinite alternate;
    -webkit-animation: wheel 10s ease-in-out infinite alternate;
    -ms-animation: wheel 10s ease-in-out infinite alternate;
}

@keyframes wheel{
    0%{
    opacity:1;
    left:-10%;
    transform:scale(.6) rotate(0deg);
}
50%{
    opacity:.7}
100%{
    left: 90%;
    opacity:1;
    transform:scale(1) rotate(2160deg);
}
}
@-webkit-keyframes wheel{
    0%{
    opacity:1;
    left:-10%;
    -webkit-transform:scale(.6) rotate(0deg);
}
50%{
    opacity:.7;}
100%{
    left: 90%;
    opacity:1;
    -webkit-transform:scale(1) rotate(2160deg);
}
}
@-moz-keyframes wheel{
0%{
    opacity:1;
    left:-10%;
    -moz-transform:scale(.6) rotate(0deg);
}
50%{
    opacity:.7;}
100%{
    left: 90%;
    opacity:1;
    -moz-transform:scale(1) rotate(2160deg);
}
}
@-ms-keyframes wheel{
0%{
    opacity:1;
    left:-10%;
    -ms-transform:scale(.6) rotate(0deg);
}
50%{
    opacity:.7;}
100%{
    left: 90%;
    opacity:1;
    -ms-transform:scale(1) rotate(2160deg);
}
}

#colorWheel:hover {}
#colorWheel span {
    position: absolute;
    -webkit-transform-origin: 50% 50%;
    border-style: solid;
    border-width: 150px 50px;
    box-sizing: border-box;
}
#colorWheel span.color01 {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    border-color: #43a1cd transparent transparent transparent;
}
#colorWheel span.color02 {
    -webkit-transform: rotate(36deg);
    -moz-transform: rotate(36deg);
    -ms-transform: rotate(36deg);
    -o-transform: rotate(36deg);
    transform: rotate(36deg);
    border-color: #639b47 transparent transparent transparent;
}
#colorWheel span.color03 {
    -webkit-transform: rotate(72deg);
    -moz-transform: rotate(72deg);
    -ms-transform: rotate(72deg);
    -o-transform: rotate(72deg);
    transform: rotate(72deg);
    border-color: #9ac147 transparent transparent transparent;
}
#colorWheel span.color04 {
    -webkit-transform: rotate(108deg);
    -moz-transform: rotate(108deg);
    -ms-transform: rotate(108deg);
    -o-transform: rotate(108deg);
    transform: rotate(108deg);
    border-color: #e1e23b transparent transparent transparent;
}
#colorWheel span.color05 {
    -webkit-transform: rotate(144deg);
    -moz-transform: rotate(144deg);
    -ms-transform: rotate(144deg);
    -o-transform: rotate(144deg);
    transform: rotate(144deg);
    border-color: #f7941e transparent transparent transparent;
}
#colorWheel span.color06 {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    border-color: #ba3e2e transparent transparent transparent;
}
#colorWheel span.color07 {
    -webkit-transform: rotate(216deg);
    -moz-transform: rotate(216deg);
    -ms-transform: rotate(216deg);
    -o-transform: rotate(216deg);
    transform: rotate(216deg);
    border-color: #9a1d34 transparent transparent transparent;
}
#colorWheel span.color08 {
    -webkit-transform: rotate(252deg);
    -moz-transform: rotate(252deg);
    -ms-transform: rotate(252deg);
    -o-transform: rotate(252deg);
    transform: rotate(252deg);
    border-color: #662a6c transparent transparent transparent;
}
#colorWheel span.color09 {
    -webkit-transform: rotate(288deg);
    -moz-transform: rotate(288deg);
    -ms-transform: rotate(288deg);
    -o-transform: rotate(288deg);
    transform: rotate(288deg);
    border-color: #272b66 transparent transparent transparent;
}
#colorWheel span.color10 {
    -webkit-transform: rotate(324deg);
    -moz-transform: rotate(324deg);
    -ms-transform: rotate(324deg);
    -o-transform: rotate(324deg);
    transform: rotate(324deg);
    border-color: #2d559f transparent transparent transparent;
}
#colorWheel:before {
    content: "";
    width: 300px;
    height: 300px;
    overflow: hidden;
    position: absolute;
    top: -30px;
    left: -130px;
    border-radius: 100%;
    border: 30px solid #ffffff;
    z-index: 100;
    box-shadow:0px 0px 2px 12px rgba(180,180,180,.5)
}
#colorWheel:after {
    content: "";
    width: 100px;
    height: 100px;
    overflow: hidden;
    position: absolute;
    top: 100px;
    left: 0px;
    border-radius: 100%;
    box-shadow:0px 0px 2px 12px rgba(250,250,250,.5);
    background: #444 url(Dhiraj.png); background-size:contain
}

view demo

Your turn

I had already posted some articles of css3 @keyframes animation examples.  Please check some of these beautiful animation with demo below:

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

Posted by: Dhiraj kumar

Animate Full-Page Multiple Background images with fade-in & fade-out effect – jQuery

“How to change multiple background-image of body with effects?” – I think this is a major problem which all designers face. You can fade background colors but not background images. The way to work around this is to have your images as <img> tags and hide them by default display:none;. Give your images position:absolute and z-index:-1 so they act like backgrounds and are behind everything else.

Here’s a quick example of multiple images fading one after the other.

jquery-full-page-animated-background-images

The HTML

Html is very simple. Just add a div with multiple images which you want to animate / change in background with fade effects.

<div id="wrap">
<img class="bgfade" src="http://farm9.staticflickr.com/8526/8668341950_182b74faf2_z.jpg">
<img class="bgfade" src="http://farm9.staticflickr.com/8532/8667337535_6da0a9a261_z.jpg">
<img class="bgfade" src="http://farm9.staticflickr.com/8540/8667244539_d227f8c435_z.jpg">
</div>

The CSS

Now, We will use some CSS Technique which will create an illusion like background-image animation. The way to work around this is to have your images as <img> tags and hide them by default “display:none;”. Give your images “position:absolute” and “z-index:-1” so they act like backgrounds and are behind everything else. Now, set css property of div#wrap which includes these images to “position:fixed” and “top:0; left:0;” so that it will fix with page background.

#wrap{
	position:fixed;; 
	z-index:-1; 
	top:0; 
	left:0; 
	background-color:black
}
#wrap img.bgfade{
	position:absolute;
	top:0;
	display:none;
	width:100%;
	height:100%;
	z-index:-1
}

jQuery

Now, it is java-script’s turn. We will calculate browser window’s height & width. After that we will set width/height of div#wrap to browser so that background cover entire webpage. Now we have to animate our images. We will simple use function of fadeIn() and fadeOut() in images for this.

$(window).load(function(){
$('img.bgfade').hide();
var dg_H = $(window).height();
var dg_W = $(window).width();
$('#wrap').css({'height':dg_H,'width':dg_W});
function anim() {
    $("#wrap img.bgfade").first().appendTo('#wrap').fadeOut(1500);
    $("#wrap img").first().fadeIn(1500);
    setTimeout(anim, 3000);
}
anim();})
$(window).resize(function(){window.location.href=window.location.href})

Updated

I have updated the script. Actually, after re-sizing the browser we have to update the width/height of div#wrap. So, I am going to reload this window, when ever browser will re-size. It will help to re-calculate all these and refresh the animation. Div#wrap will re-size according to browser window and play animation smoothly.

view demo

You may like:

Posted by: Dhiraj kumar

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.

responsive-slider-pagination-circle

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

Updated

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

You may like:

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.
jquery-responsive-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.
view demo

Updated

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

You may like:

Posted by: Dhiraj kumar

Responsive CSS design – Web Design Tips

For designers, the most difficult and interesting aspect of responsive web design has been the flexible nature of it. We’ve constantly in the process of trading in our tenacity for pixel perfection and embracing the web for what it really is; fluid. Today we’ll cover some steps to help you transition towards flexible web design, or as I like to call it, ‘Getting’ Flexy’.

Responsive CSS for a web site will increase a websites visitors by attracting the mobile and tablet visitors also along with the visitors who enjoy their post in desktop version.Now the number of people who are using the tablets and mobiles to browse the web are increasing. Hence a web page layout should be adaptable for all the view port of the device in which the visitor views the webpage.Some of the tips and tricks for the designers to keep in mind when they design a responsive webpages are given below. This will be a prefect resource for responsive web design tutorial in web.
responsive-css-design-tips

First, the basics

Responsive web design, as introduced has three core principles:

  • Flexible grids: percentage-based fluid columns of content.
  • Media queries: a magical tool to change your CSS based on the browser’s current state.
  • Flexible media: content such as images and video should scale with the browser’s dimensions.

You’ll notice that two of those ingredients have the phrase ‘flexible’. This is the key differentiation of responsive web design versus other web design approaches. Let’s look at how to become flexible.

Never use maximum-scale

Occasionally, in an attempt to override an orientation bug in iOS, web developers will add maximum-scale=1 to their meta name=”viewport” tag. Don’t do this. The unfortunate result is that users are unable zoom the page (using a pinch-zoom gesture). This is a bad practice and a huge accessibility concern. If you want your site to be ‘flexy’, it has to be zoom-able.

Do this: you win the internet!

<meta name="viewport" content="width=device-width, initial-scale=1">

This will inform the browser to set the window width to the device’s width without overriding any user needs. Then in your CSS, add this brand new at-rule:

/* You'll need prefixes. @-ms-viewport, @-o-viewport, etc... */
@viewport {
width: device-width;
}

This is an in-progress W3C spec written to move this viewport information over to CSS. IE10 and Opera browsers support this. Go ahead and start rolling this into production sites.

Responsive Images:

Making the height and the width of the images to auto is best for responsive webpages (should be used).

Also make sure always using a compressed image. Because images of 5mb or above are produced when captured from Digital cams. It will take time to load in mobile internet. Hence make sure you compress the image before you use it in the website.

Some of the sites found in the web

http://www.imageoptimizer.net

http://jpeg-optimizer.com/

Mobile Navigation Menu:

Navigation menu for mobile should be redesigned when the page is viewed in a smaller width.You could see how the menu is re aligned in this demo, when the width is reduced. Some responsive mobile navigation menus are available in internet.

http://webdesignerwall.com/demo/mobile-nav/

Relative Positioning Of Elements:

Every element in the html is relative to another.Thus it is much flexible when the browser width gets changed. In the this demo header and side menu positions are relative. That gives the flexibility for the menus to get aligned below the header when the width is reduced.

Relative Font Size & Usage Of Percentage:

Instead of using px for the font sizes em is used .Thus the font size reduces relatively when the font size of the header or some other html element reduces. Percentages should be used instead of px.

Example: instead of setting as 1000px , 100% or 90% should be set based on the requirement. Thus the website scales based on the width. The most common example is font-size, if you wanted to set a heading font-size (20px) based on your body font-size (10px) in em units.

Don’t use px units, use em units

The px vs em debate is a long one but em units have proven themselves useful in responsive web design. Using em units should be familiar to most web developers, but worth reviewing. An em unit is a relative unit of measurement based on the parent element.

Keep it relative: typography

Setting your type in em units enables you to use the power of CSS to build a scale-able typographic system that grows with the viewport.

body { font: 100%/1.5 serif; /* 16px */  }
h1 {  font-size: 2em; /* 32px */ }

@media (min-width: 600px) {
body { font: 112.5%; /* 18px */  }
h1 {    /* Do nothing! I'll automatically be 36px */ }
}

Based on personal experience, this will save you hours per project versus going through and updating pixel values. Also, it has an accessibility benefit when a user adjusts their font size.

Keep it relative: white-space

Additionally, using em units for padding and margin helps create a vertical base for your design. At larger screen dimensions you can insert more white-space into your design in a healthy, consistent manner without too much labour.

#hero { margin-bottom: 1em; }

@media (min-width: 600px) {
#hero { margin-bottom: 2em; }
}

Using em units will help you preserve a balanced system of relative proportions. For a more advanced approach on relative sizing,

Min-Width & Max-Width with CSS Media Queries:

Min-width and Max-width should be mentioned in the CSS along with the width.Thus imposing a constraint for the widths are better suited for scale-ability for its width.media queries should be added with the min-width or max-width as condition to display certain elements.

Media queries are so important for a responsive css design.

@media screen and (max-width:320px)
{
    .ad_bar{ display: none }
}

In the above code we are making the ads to disappear when the display device width is below 320px. By this we way we provide a better readability of the content in mobile devices.

max-width min-width
‘Desktop down’ ‘Mobile first’
Start large, dig down Start small, build up
Good for legacy sites Future friendly

Go forth and be flexy!

These are just the basics on the path towards fluid width nirvana. It’s important to remember that we’re all learning and it’s OK to make mistakes. I encourage you, if you haven’t already, to take the plunge and build out your own responsive design. The day when most websites sit on a flexible frame and are universally accessible by any device is hopefully fast approaching. Help the web become a better place.

If you have any more suggestions to be added , feel free to comment below.
view demo

 

Posted by: Dhiraj kumar

Pure CSS3 Animated Polaroid Gallery

Normally, Polaroid Gallery is a CSS3 & jQuery Image Gallery plugin for Media Library. It is used to overlay images as Polaroid pictures on the current page or post.

It’s a sure thing that CSS3 features like transitions, animations and transforms can add extra spice to your designs. In this article you will see how you can build an awesome CSS3 animated  Polaroid pictures gallery with some of these cool features.  This is something I wished to do for a while and I finally made it.css3-animated-polaroid-gallery

The HTML

The HTML structure hasn’t changed at all, simple and minimal. Here’s an excerpt:

<div class="photo-album">
<h2>Dhiraj, Geetu & Atharv at Taj ↦ Agra
  <a class="large polaroid img1" href="#"> 
    <img alt="" src="https://lh3.googleusercontent.com/-73u0oSgSX0w/UQ6PZ0Z1wOI/AAAAAAAADPE/57bc9C0BEG0/s512/Agra-trip%252520112.JPG" /> 
    Camel wants to kiss Atharv. </a> 
  <a class="polaroid img2" href="#"> 
    <img alt="" src="https://lh4.googleusercontent.com/-cPFum21LNBA/UQ6PXyb2ISI/AAAAAAAADPM/kJLhIyvx_2k/s512/Agra-trip%252520147.JPG" /> 
    My dearest one.. Atharv with Geetu. — at Taj Mahal</a> 
  <a class="small polaroid img3" href="#"> 
    <img alt="" src="https://lh6.googleusercontent.com/-Bz8NR-oKxGw/UQ6PguAxrsI/AAAAAAAADNY/B7i8X02vnbg/s512/Agra-trip%252520153.JPG" /> 
    Ferntastic</a> 
  <a class="medium polaroid img4" href="#"> 
    <img alt="" src="https://lh4.googleusercontent.com/-gB3RNt_3aos/UQ6Pmx5egoI/AAAAAAAADKM/lensH9ojFd0/s512/Agra-trip%252520154.JPG" /> 
    My dearest one.. Atharv with Geetu. — at Taj Mahal</a> 
  <a class="polaroid img5" href="#"> 
    <img alt="" src="https://lh5.googleusercontent.com/-YbVIBYilZ-M/UQ6P0w2PC8I/AAAAAAAADNc/kKzFy9k51D8/s512/Agra-trip%252520170.JPG" /> 
    Atharv & Geetu with Dhiraj.. Taj in background</a> 
  <a class="polaroid img6" href="#"> 
    <img alt="" src="https://lh6.googleusercontent.com/-IedPhDIDTcg/UQ6P5NG_hSI/AAAAAAAADKw/frG26WPd_OY/s512/Agra-trip%252520175.JPG" /> 
    Atharv in a cute pose.. Taj mahal in background</a> 
  <a class="polaroid img7" href="#"> 
    <img alt="" src="https://lh6.googleusercontent.com/-fhOKmDe-6S4/UQ6QBnHRDhI/AAAAAAAADPw/StGk4el6PVI/s512/Agra-trip%252520192.JPG" /> 
    Atharv with his papa Dhiraj</a> 
  <a class="small polaroid img8" href="#"> 
    <img alt="" src="https://lh4.googleusercontent.com/-lUXHF4hGxak/UQ6QF_7iZnI/AAAAAAAADOs/-agtNNnnYbU/s512/Agra-trip%252520193.JPG" /> 
    awesome</a> 
  <a class="medium polaroid img9" href="#"> 
    <img alt="" src="https://lh3.googleusercontent.com/-a-kezOzwNR8/UQ6QNJpEa4I/AAAAAAAADNk/FAN4Z3LDy2Y/s512/Agra-trip%252520206.JPG" /> 
    Geetu with Dhiraj</a> 
  <a class="polaroid img10" href="#"> 
    <img alt="" src="https://lh6.googleusercontent.com/-J3Gcspy0HKg/UQ6QXk3ZV9I/AAAAAAAADQE/0PyQD_VvC8o/s512/Agra-trip%252520221.JPG" /> 
    Nice one..</a> 
  <a class="small polaroid img11" href="#"> 
    <img alt="" src="https://lh5.googleusercontent.com/-OLpIvUAwZ6E/UQ6QY9gnPwI/AAAAAAAADNo/00eTz4E3_GI/s512/Agra-trip%252520223.JPG" /> 
    Sulphurous</a> 
  <a class="small polaroid img12" href="#"> 
    <img alt="" src="https://lh6.googleusercontent.com/-V-NJ8w3N5hs/UQ6QYqtZVOI/AAAAAAAADOw/FcjS2sgQXxA/s512/Agra-trip%252520229.JPG" /> 
    Atharv with his papa..</a> <a class="small polaroid img13" href="#"> 
    <img alt="" src="https://lh4.googleusercontent.com/-W1T4Z6_xwlQ/UQ6QAdQwuzI/AAAAAAAADNg/vSiGaoo7_TU/s512/Agra-trip%252520188.JPG" /> 
    Atharv with his papa Dhiraj</a> 
  <a class="small polaroid img14" href="#"> 
    <img alt="" src="https://lh6.googleusercontent.com/-Bz8NR-oKxGw/UQ6PguAxrsI/AAAAAAAADNY/B7i8X02vnbg/s512/Agra-trip%252520153.JPG" /> 
    Nice one..</a> 
  <a class="polaroid img15" href="#"> 
    <img alt="" src="https://lh4.googleusercontent.com/-W1T4Z6_xwlQ/UQ6QAdQwuzI/AAAAAAAADNg/vSiGaoo7_TU/s512/Agra-trip%252520188.JPG" /> 
    Atharv with his papa Dhiraj</a> 
</div>

CSS

a.polaroid {
		display: block;
		text-decoration: none;
		color: #333;
		padding: 10px 10px 20px 10px;
		width: 150px;
		border: 1px solid #d7d7d7;
		background-color: white; background:rgba(255,255,255,.9);
		z-index: 2;
		font-size: 0.7em;
		-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3),inset 0 0 0.7em rgba(0,0, 0, 0.4);;
		-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3),inset 0 0 0.7em rgba(0,0, 0, 0.4);;
		box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3),inset 0 0 0.7em rgba(0,0, 0, 0.4);-webkit-filter: blur(1px); border-radius:5px;
		-webkit-transition: all 0.5s ease-in; text-align:center
	}
	a.polaroid:hover, a.polaroid:focus, a.polaroid:active {
		z-index: 999;
		border-color: #999;
		-webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4),inset 0 0 0.7em rgba(0,0, 0, 0.4);
		-moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4),inset 0 0 0.7em rgba(0,0, 0, 0.4);
		box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4),inset 0 0 0.7em rgba(0,0, 0, 0.4);
		-webkit-transform: rotate(0deg) scale(1.05);
		-moz-transform: rotate(0deg) scale(1.05);
		transform: rotate(0deg) scale(1.05);-webkit-filter: blur(0px);
	}
	.polaroid img {
		margin: 0 0 15px;
		width: 150px;
		height: 120px;
	}

	a img {
		border: none;
		display: block;
	}

	.photo-album {
		position: relative; width: 80%; margin: 0 auto; max-width: 70em; height: 450px; margin-top:2.5em; min-width: 800px; max-width: 900px;
	}
	.photo-album .polaroid {
		position: absolute;
	}
	.photo-album h2 {
		position: absolute; z-index: 5; top: 150px; text-align: center; width: 100%; line-height: 2; 
	}
	.photo-album h2 span {
		background-color: white; background:rgba(255,255,255,.8);
		font-family: 'Satisfy', cursive;
		padding: 0.4em 0.8em 0.3em 0.8em;
		-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
		-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
		box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
		border-radius: 5px; border:1px solid #CCC
	}
	.photo-album .small {
		width: 75px; padding: 6px 6px 12px 6px; font-size: 0.6em;
	}
	.photo-album .small img {
		width: 75px; height: 60px;
	}
	.photo-album .medium {
		width: 200px; padding: 13px 13px 26px 13px; font-size: 0.8em;
	}
	.photo-album .medium img {
		width: 200px; height: 165px;
	}
	.photo-album .large {
		width: 300px; padding: 20px 20px 30px 20px; font-size: 1em;
	}
	.photo-album .large img {
		width: 300px; height: 250px
	}
	.photo-album .img1 {
		bottom: 10px; right: 365px; 
		-webkit-transform: rotate(10deg);
		-moz-transform: rotate(10deg);
		transform: rotate(10deg);
	}
	.photo-album .img2 {
		top: 50px; right: 20px;
		-webkit-transform: rotate(-4deg);
		-moz-transform: rotate(-4deg);
		transform: rotate(-4deg);
	}
	.photo-album .img3 {
		left: 400px; top: 0;
		-webkit-transform: rotate(-5deg);
		-moz-transform: rotate(-5deg);
		transform: rotate(-5deg);
	}
	.photo-album .img4 {
		top: 10px; left: 495px;
		-webkit-transform: rotate(-20deg);
		-moz-transform: rotate(-20deg);
		transform: rotate(-20deg);
	}
	.photo-album .img5 {
		bottom: 0; right: 0;
		-webkit-transform: rotate(1deg);
		-moz-transform: rotate(1deg);
		transform: rotate(1deg);
	}
	.photo-album .img6 {
		bottom: 10px; right: 156px;
		-webkit-transform: rotate(6deg);
		-moz-transform: rotate(6deg);
		transform: rotate(6deg);
	}
	.photo-album .img7 {
		bottom:0; left:400px;
		-webkit-transform: rotate(-10deg);
		-moz-transform: rotate(-10deg);
		transform: rotate(-10deg);
	}
	.photo-album .img8 {
		bottom: -20px; left: 700px;
		-webkit-transform: rotate(-8deg);
		-moz-transform: rotate(-8deg);
		transform: rotate(-8deg);
	}
	.photo-album .img9 {
		bottom: 0; left: 0;
		-webkit-transform: rotate(-8deg);
		-moz-transform: rotate(-8deg);
		transform: rotate(-8deg);
	}
	.photo-album .img10 {
		top: 0; left: 20px;
		-webkit-transform: rotate(8deg);
		-moz-transform: rotate(8deg);
		transform: rotate(8deg);
	}
	.photo-album .img11 {
		top: 0; right: 0;
		-webkit-transform: rotate(-8deg);
		-moz-transform: rotate(-8deg);
		transform: rotate(-8deg);
	}
	.photo-album .img12 {
		top: 0; left: 680px;
		-webkit-transform: rotate(18deg);
		-moz-transform: rotate(18deg);
		transform: rotate(18deg);
	}
	.photo-album .img13 {
		bottom: -20px; right: 630px;
		-webkit-transform: rotate(4deg);
		-moz-transform: rotate(4deg);
		transform: rotate(4deg);
	}
	.photo-album .img14 {
		top: 90px; left: 430px;
		-webkit-transform: rotate(15deg);
		-moz-transform: rotate(15deg);
		transform: rotate(15deg);
	}
	.photo-album .img15 {
		left:176px; top:20px;
		-webkit-transform: rotate(-8deg);
		-moz-transform: rotate(-8deg);
		transform: rotate(-8deg);
	}	
	a:hover, a:focus {
		z-index: 5;
	}

view demo

Your turn

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

Posted by: Dhiraj kumar

CSS3 3D effect, Shine text with css3 keyframe animation, Scrolling Page Background with jQuery – Happy New Year

On the occasion of New Year 2013, I thought to wish this festival by creating a nice webpage greeting. So, today I created this greeting card using 3D  and shining text effect with the help of CSS3, and scrolling background with JavaScript. I hope you all will enjoy this holiday as well as my web-card too :) .

Introduction

Greeting, today we are going to make a scrolling background effect. This script will move the background of any html tag, either vertically or horizontally. I used this script in one of my greeting card too which has a blue sky with clouds and it makes the whole website came alive. I think that’s pretty impressive. In this card you will find texts with different CSS effects like: 3D emboss, continuous spotlight shine effect, text shadow etc.

3d-shine-text-css3-scrolling-background-happy-new-year

The CSS

I have Used multiple text-shadows to create 3D text on any HTML element. No extra HTML, no extra headaches, just awesomesauce.
Works in the latest builds of Safari, Chrome, Firefox, and Opera.

h1 {
  margin:1.2em auto;
  font: bold 100px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
  -webkit-transition: .2s all linear;
}

Text shine Effect created with WebKit-specific CSS3 properties. You’ll need Safari or Chrome to enjoy key-frame animation.

p.shine{
    font-size: 3em;
    margin: 0 auto; padding:0;
    width: 95%;
}
.shine{
    background: #222 -webkit-gradient(linear, left top, right top, from(#ccc), to(#fff), color-stop(1, #f0f)) 0 0 no-repeat;
    background-size: 400px; -webkit-background-size: 400px; 
    -moz-background-size: 400px; -o-background-size: 400px;    
    color: rgba(255, 255, 255, 0.7);	
    background-clip: text; -webkit-background-clip: text; 
        -moz-background-clip: text; -o-background-clip: text;	
	-webkit-animation: shine 2s infinite;
	-moz-animation: shine 2s infinite;
	-o-animation: shine 2s infinite;
	-ms-animation: shine 2s infinite;
	animation: shine 2s infinite; 
}

@-webkit-keyframes shine{
    0%{background-position: top left;}
    100%{background-position: top right;}
}
@-moz-keyframes shine{
    0%{background-position: top left;}
    100%{background-position: top right;}
}
@-o-keyframes shine{
    0%{background-position: top left;}
    100%{background-position: top right;}
}
@keyframes shine{
    0%{background-position: top left;}
    100%{background-position: top right;}
}

For page background I used cloud in png format.

body{background:url(bg_clouds.png) 0 0}

The HTML

<h1>Happy New Year 2013</h1>
<p class="shine">The New Year is the time of unfolding horizons and the realization of dreams, may you rediscover new strength and garner faith with you, and be able to rejoice in the simple pleasures that life has to offer and put a brave front for all the challenges that may come your way.<br>
Wishing you a lovely New Year..</p>

The JavaScript – jQuery

We have to add jquery library in body first, after that we animate our page background with css background-position properties. I always prefer to use JavaScript files before close of body tag.

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">var scrollSpeed = 70; 
    var current = 0;
    function bgscroll(){
        current -= 1;   
        // move the background with backgrond-position css properties
        $('body').css("backgroundPosition", 1 ? current+"px 0" : "0 " + current+"px");   
    }
     setInterval(bgscroll, scrollSpeed);   </script>

view demo

Happy New Year!

I hope you like the result and don’t hesitate to share your thoughts about it. Thanks for reading!

Posted by: Dhiraj kumar

Snow-Fall Effect with JavaScript – Creating Merry Christmas Greetings

On the occasion of Christmas and winter Holidays, I thought to wish this festival by create a nice webpage greetings. So, today I had created this Christmas greeting card using snow-fall effect with help of CSS3 and JavaScript. I hope you all will enjoy this holiday and my web-card too :).

Today we will create a Christmas greeting card using CSS3 and jQuery. There are many things we can do with CSS3 and javascript. We’ll use snowfall.dg.js for creating these snow.

snowfall-effect-javascript-christmas-greetings

Features and Principle

Note: Snowfall Plugin is Less than 12Kb in size. There are many options for customize and use this plugin as per your requirement. Some features are:

  • No need to add any image for snow.
  • No need to add any JavaScript library.
  • You can use any html element in place of snow.
  • Change the Color of Snow by using hexadecimal value.
  • Also support in iPhone, iPad and Mobile devices.
  • Snow-fall movement with mouse/cursor.
  • Stick on bottom.
  • Snow melt effect.
  • Twinkle effect – you can use this also if you want star-fall 🙂
  • More options..

What this script does is adds snow-fall to the body. You can find more options in snowfall.dg.js.

The CSS

No special css required for snow fall effect. But in this greeting card, I have used css for background and my greeting message.

body{
         font-size:18px; 
         background:#badaf3 url(merry_chirstmas-wide.jpg) 100% 0 no-repeat; 
         background-size:cover; 
         font-family: 'IM Fell Double Pica', georgia, serif;
}
#welcome{
         font-size:2em; 
         width:40%; 
         margin:4%; 
         text-align:center; 
         background-color:#fff; 
         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
         background:rgba(255,255,255,.75); 
         border-radius:10px; 
         box-shadow:4px 4px 10px 0 rgba(20,20,20,.6); 
         text-shadow: 2px 2px 3px #fff; 
         font-style:italic; 
         padding:1em; 
         color:#700; 
         color:rgba(120,0,20,.9)
}

The Html

<div id="welcome">May the miracle of Christmas fill your heart with 
warmth & love. 
Christmas is the time of giving and sharing.
It is the time of loving and forgiving. 
Hope you and your family have
wonderful Holiday... &... Merry Christmas to Everyone! </div>

Snowfall – The javascript

We have to add this snowfall.dg.js in body. I always prefer to use JavaScript files before close of body tag.

<script type="text/javascript" src="snowfall.dg.js"><script>

view demo

Updated!

I have updated this greetings with Jingle bells music and Html5 audio tags. now our Html is

<div id="welcome">May the miracle of Christmas fill your heart with 
warmth & love. 
Christmas is the time of giving and sharing.
It is the time of loving and forgiving. 
Hope you and your family have
wonderful Holiday... &... Merry Christmas to Everyone! </div>
 <audio autoplay="true" loop="true">
   <source src="jingle_bells_merry.ogg" type="audio/ogg">
   <source src="jingle_bells_merry.mp3" type="audio/mpeg">
Your browser does not support the audio element (HTML5). Please update your Browser.
 </audio>

Merry Christmas

I hope you like the result and don’t hesitate to share your thoughts about it. Thanks for reading!

Posted by: Dhiraj kumar

Simple and Easy Tooltip Using jQuery & CSS3

I love jQuery and the way it makes web-designer’s/developer’s life easier.  Although it took all a while to accept it. I still prefer to write my own stuff, I can’t deny its advantages.   Today I will show you a “Tool-Tip” examples of using the same very, very simple script.

Features and Principle

Note: Tooltip Plugin is Less than 1Kb in size.
What this script does is adds an element to the body when you roll over a certain object. That element’s appearance is predefined with css (positioned absolute and styled) so all we need to do is fill the element with content, calculate mouse position and make it move accordingly. When cursor is moved over he object, element moves with it and when cursor roll out, the element is deleted.

Here is a  example where you can see this script in action.

The Simplest jQuery Tooltip Ever

The script takes a title attribute of an A tag and place it inside the popup element.

The Html

<a href="https://dhirajkumarsingh.wordpress.com" class="tooltip" title="Latest Techonology Updates in Web Technology">Roll over for tooltip</a>

The CSS

#tooltip{
	position:absolute; 
        color:#fff; 
        display:none;
	border:1px solid #333; 
        border-radius:4px;
	background-color:#222; background:rgba(2,2,2,.8);
	padding:2px 5px; 
        box-shadow:2px 2px 5px 0 rgba(2,2,2,.8);
}

jQuery – The javascript

First of all, we have to add jQuery library.
after adding jQuery library we have to add this tooltip plugin.
In this plugin you will got :

this.tooltip = function(){	
	/* CONFIG */		
		xOffset = 10;
		yOffset = 20;		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result		
	/* END CONFIG */		
	$("a.tooltip").hover(function(e){											  
		this.t = this.title;
		this.title = "";								  
		$("body").append("

“+ this.t +”

"); 
                $("#tooltip") .css("top",(e.pageY - xOffset) + "px") 
                              .css("left",(e.pageX + yOffset) + "px") 
                              .fadeIn("fast"); 
         }, function(){ this.title = this.t; 
                  $("#tooltip").remove(); 
         }); 
         $("a.tooltip").mousemove(function(e){ 
                $("#tooltip") .css("top",(e.pageY - xOffset) + "px") 
               .css("left",(e.pageX + yOffset) + "px"); 
}); 
}; 
// starting the script on page load 
$(document).ready(function(){ 
              tooltip()
});

view demo

Your turn

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

Posted by: Dhiraj kumar