Change an input’s HTML5 placeholder color with CSS

Today, We will play with some more interesting CSS style properties for HTML5 INPUT placeholder styling. Let’s explore, how to style placeholder text within INPUT elements with some unique CSS code. In previous articles, we have already covered some beautiful CSS effects on INPUT [type=button] and Input [type=text].
read more @ http://www.css-jquery-design.com/…

What is Placeholder?

The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format). The short hint is displayed in the input field before the user enters a value. The placeholder attribute works with the following input types: text, search, url, tel, email, and password.  The placeholder attribute is new in HTML5 read more @ http://www.css-jquery-design.com/…

Change input HTML5 placeholder color with CSS
There are three different ways of implementations: pseudo-elements, pseudo-classes, and nothing read more @ http://www.css-jquery-design.com/…
read-more-button

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

DG_Slider – An Ultimate jQuery Content Slider Plugin

DG_Slider is a jQuery  plugin that carries you on a content slider or carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget. It is light weight, at about 14 KB in size, yet very flexible and customizable to fit most of our needs. DG_Slider is a great plug-in. It offers a host of features and it is so customizable that you are limited only by your imagination.

DG_Slider : A ultimate jquery content slider plugin with multiple options

Features

  • Horizontal, vertical, and fade transitions
  • Display and move multiple slides at once (carousel)
  • Prev / next, pager, auto controls
  • Start / Stop control
  • Easing transitions
  • Random start
  • Ticker mode also :)
  • Before, after, first, last, next, prev callback functions
  • Optional styling included
  • Tons of customizable options

For more information/Options visit : https://dhirajkumarsingh.wordpress.com/ultimate-jquery-content-slider-plugin-dg_slider/

Posted by: Dhiraj kumar