Tuesday, March 29, 2016

Box Design in html

                No comments   

Intoduction :- 
Hii Friends...
Today I explain how to make multiple box with multiple colors with the help of html. Here with the html we create multiple colors boxes.Html is a client side tool, and a good thing is html is not a case sensitive language. 

DEMO:-
Example :-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .ser_top
        {
            border: 1px #e91547 solid;
        }
        .ser_hadding
        {
            background-color: #eb1646;
            border-radius: 0px 0px 10px 0px;
            text-align: center;
            font-size: 16px;
            padding: 5px 0px 5px 0px;
        }
        .ser_hadding a
        {
            color: #FFFFFF;
        }
        .ser_hadding a:hover
        {
            color: #FFFF00;
            text-decoration: none;
        }
        .col-md-3
        {
            width: 25%;
        }
        .ser_img
        {
            padding-left: 75px;
            margin-top: 5px;
        }
        .img-responsive
        {
            display: block;
            height: auto;
            max-width: 100%;
        }
        .ser_text
        {
            text-align: center;
            font-size: 14px;
            font-family: Arial;
            color: #000000;
        }
        .read_more
        {
            background-color: #1195d5;
            color: #FFFFFF;
            text-align: center;
            width: 110px;
            padding: 5px;
            border-radius: 5px;
            margin-left: 65px;
            margin-top: 5px;
            margin-bottom: 5px;
        }
        .read_more a
        {
            color: #FFFFFF;
        }
     
     
        .ser_top1
        {
            border: 1px #fc6e22 solid;
        }
        .ser_top2
        {
            border: 1px #8ae409 solid;
        }
        .ser_top3
        {
            border: 1px #1195d5 solid;
        }
        #welcome
        {
            background: #FFFFFF;
            width: 100%;
            float: left;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="welcome">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <div class="ser_top">
                        <div class="ser_hadding">
                            <img src="img/page-html.ico" style="height:30px; width:30px;" />&nbsp;&nbsp;<a href="#">HTML</a></div>
                        <div class="ser_img">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhriHfw8KtedIOQ1MQwCVDUdBEtTB7K11-LVZaA9IPxJ1op4wjjue14yF5t3M0akFrTrkosTqywM6QDePPjkK06ALp-zfukLsrPKp7Od0Lx4kTyVGhujfPX2lJWbCspz1lkZ2R-FWoZ44Q/s1600-r/dotnetnew.png" class="img-responsive" style="margin-left: -42px;" /></div>
                        <div class="ser_text">
                            you can find Html,Html5 designs
                            <br />
                            on my blog.</div>
                        <div class="read_more">
                            <a href="#">Read More....</a></div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="ser_top1">
                        <div class="ser_hadding" style="background-color: #fc6e22;">
                            <img src="img/download.png" style="height:30px; width:30px;" />&nbsp;&nbsp;<a href="#">Css</a></div>
                        <div class="ser_img">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhriHfw8KtedIOQ1MQwCVDUdBEtTB7K11-LVZaA9IPxJ1op4wjjue14yF5t3M0akFrTrkosTqywM6QDePPjkK06ALp-zfukLsrPKp7Od0Lx4kTyVGhujfPX2lJWbCspz1lkZ2R-FWoZ44Q/s1600-r/dotnetnew.png" class="img-responsive" style="margin-left: -42px;" /></div>
                        <div class="ser_text">
                             you can find Css,Css3 designs
                            <br />
                            on my blog.
                        </div>
                        <div class="read_more">
                            <a href="#">Read More....</a></div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="ser_top2">
                        <div class="ser_hadding" style="background-color: #83da06;">
                            <img src="img/logo_js.png" style="height:30px; width:30px;" />&nbsp;&nbsp;<a href="#">JavaScript</a></div>
                        <div class="ser_img">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhriHfw8KtedIOQ1MQwCVDUdBEtTB7K11-LVZaA9IPxJ1op4wjjue14yF5t3M0akFrTrkosTqywM6QDePPjkK06ALp-zfukLsrPKp7Od0Lx4kTyVGhujfPX2lJWbCspz1lkZ2R-FWoZ44Q/s1600-r/dotnetnew.png" class="img-responsive" style="margin-left: -42px;" /></div>
                        <div class="ser_text">
                             you can find Javascrip and Angular js
                            <br />
                            on my blog.
                        </div>
                        <div class="read_more">
                            <a href="#">Read More....</a></div>
                    </div>
                </div>
                <div class="col-md-3" style="display:none;">
                    <div class="ser_top3">
                        <div class="ser_hadding" style="background-color: #1195d5;">
                            <img src="img/post.png" />&nbsp;<a href="#">blank</a></div>
                        <div class="ser_img">
                            <img src="img/pos.png" class="img-responsive" /></div>
                        <div class="ser_text">
                            blank<br />blank
                            </div>
                        <div class="read_more">
                            <a href="#">Read More....</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Monday, March 14, 2016

Css two way hovering

                No comments   

Intoduction :- 
Hii Friends...
Today I explain how to make css hovering fill circle  boundary with images bounce .
hover selector is used to select elements when you mouse over them.  Here in this code it has two style hovering one is front part and second is back part. In back part we can add images . Here in back part i only write some headings.
DEMO:-
DotnetModules

Example :-

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>DotnetModules</title>
    <style type="text/css">
        .flip-container {
            -webkit-perspective: 1000;
            -moz-perspective: 1000;
            perspective: 1000;
        }
          .flip-container:hover .flipper,
            .flip-container.hover .flipper {
                -webkit-transform: perspective(800px) rotateY(180deg);
                -moz-transform: perspective(800px) rotateY(180deg);
                transform: perspective(800px) rotateY(180deg);
            }
        .flip-container,
        .front,
        .back {
            width: 100%;
            height: 100%;
        }
       .service-one {
            padding: 30px 30px 15px;
            height: 19rem;
            border-top: 1px solid #ddd;
            border-right: 1px solid #ddd;
        }
         .service-one {
            -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
        }
            .service-one.active,
            .service-one:hover {
                background-color: #31B0D5;
            }
          .flipper {
            -webkit-transition: 0.6s;
            -moz-transition: 0.6s;
            transition: 0.6s;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
            position: relative;
        }
        .front,
        .back {
            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            backface-visibility: hidden;
            position: absolute;
            top: 0;
            left: 0;
        }
         .front {
            z-index: 2;
            -webkit-transform: perspective(800px) rotateY(0deg);
            -moz-transform: perspective(800px) rotateY(0deg);
            transform: perspective(800px) rotateY(0deg);
        }
         .back {
            -webkit-transform: perspective(800px) rotateY(180deg);
            -moz-transform: perspective(800px) rotateY(180deg);
            transform: perspective(800px) rotateY(180deg);
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div class="service-one  border-bottom" style="height: 200px; width: 200px;">
                <a href="javascript:void(0)">
                    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                        <div class="flipper">
                            <div class="front">
                                <div style="margin-left: 1px;">
                                    <img class="img-responsive" style="height: 90px; width: 90px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhriHfw8KtedIOQ1MQwCVDUdBEtTB7K11-LVZaA9IPxJ1op4wjjue14yF5t3M0akFrTrkosTqywM6QDePPjkK06ALp-zfukLsrPKp7Od0Lx4kTyVGhujfPX2lJWbCspz1lkZ2R-FWoZ44Q/s1600-r/dotnetnew.png">
                                    </img>
                                </div>
                                <h3 style="margin-left: 1px;">Welcome
                                </h3>
                                <p style="margin-left: 1px;">
                                    DotNetModules
                                </p>
                            </div>
                            <div class="back">
                                <p style="margin-left: 1px; color:white;">
                                    *  Your Welcome *
                                </p>
                                <br />
                                <p style="margin-left: 1px; color:white;">
                                    *  On My Blog *
                                </p>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </form>
</body>
</html>

Friday, March 11, 2016

Css hovering fill circle boundary with images bounce

                No comments   

Intoduction :- 
Hii Friends...
Today I explain how to make css hovering fill circle  boundary with images bounce .
hover selector is used to select elements when you mouse over them.  When we put a cursor on the image the hovering is work and fill the circle on hovering color that you want to fill.  And the images is give a little bounce.

DEMO:-
DotnetModules

Example :-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>DotnetModules</title>
    <style type="text/css">
         .service-box .icon
        {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: #18639D;
            margin: 0 auto;
            text-align: center;
            position: relative;
        }
        .service-box .icon img
        {
            position: relative;
            z-index: 100;
            transition: all 0.3s ease 0s;
        }
        .service-box .icon:before
        {
            content: '';
            width: 102%;
            height: 102%;
            border-radius: 50%;
            background: #dfdfdf;
            position: absolute;
            top: -1px;
            left: -1px;
            z-index: 10;
            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            -ms-transform: scale(0);
            -o-transform: scale(0);
            transform: scale(0);
            transition: all 0.3s ease 0s;
        }
        .service-box:hover .icon img
        {
            -webkit-transform: scale(0.9);
            -moz-transform: scale(0.9);
            -ms-transform: scale(0.9);
            -o-transform: scale(0.9);
            transform: scale(0.9);
        }
        .service-box:hover .icon:before
        {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            -o-transform: scale(1);
            transform: scale(1);
        }
        .service-box h5
        {
            font-size: 1.4em;
            color: #252525;
            margin: 1em 0em 0.5em 0em;
        }
        .service-box p
        {
            color: #333333;
            margin: 0;
            line-height: 1.8em;
            width: 95%;
            font-size: 1em;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="specialty-grids-top">
        <div class="col-md-2 service-box" style="visibility: visible; margin: 1%; margin-left: 1em;
            -webkit-animation-delay: 0.4s;">
            <figure class="icon">
                <span><img src="http://bulletpay.in/images/airtel.png"></span>
            </figure>
        </div>
    </div>
    </form>
</body>
</html>

 

Thursday, March 10, 2016

Css hovering fill circle boundary

                No comments   

Intoduction :- 
Hii Friends...
Today I explain how to make css hovering fill circle.hover selector is used to select elements when you mouse over them.  When we put a cursor on the image the hovering is work and fill the circle on hovering color that you want to fill.   
DEMO:-
DotnetModules

Example :-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>DotnetModules</title>
<style type="text/css">
.mbimg img { border-radius:100px; text-align:center; position:absolute; margin:-60px 0px 0px 72px;}
.mbimg  a img {  border: solid 4px #e1dfe0;}
.mbimg  a:hover img {  border: solid 4px #488a8e;}
.mbtext { padding:75px 8px 10px 8px; text-align:justify; font-size:13px;}
</style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="mbimg">
        <a href="#">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhriHfw8KtedIOQ1MQwCVDUdBEtTB7K11-LVZaA9IPxJ1op4wjjue14yF5t3M0akFrTrkosTqywM6QDePPjkK06ALp-zfukLsrPKp7Od0Lx4kTyVGhujfPX2lJWbCspz1lkZ2R-FWoZ44Q/s1600-r/dotnetnew.png" style="margin-top:40px; height:120px; width:120px;" />
        </a>
    </div>
    </form>
</body>
</html>

Datepicker in html

                No comments   

Intoduction :- 
Hii Friends...
Today I explain how to make a datepicker in html . The datepicker is tied to a standard form input field. Focus on the input  to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page.

DEMO:-

Pick a Date:

Example :-

 <html>
<head>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
   <script type="text/javascript">
        $(document).ready(
     function () {
      $("#datepicker").datepicker({
          changeMonth: true,
          changeYear: true
      });
        }
      );
  
    </script>
</head>
<body>
    <p style="color:rgb(36, 159, 163);">
       <b>Pick a Date:</b>
        <input type="text" id="datepicker" /></p>
</body>
</html>

Wednesday, March 9, 2016

Css hovering fill circle

                No comments   

Intoduction :- 
Hii Friends...
Today I explain how to make css hovering fill circle.hover selector is used to select elements when you mouse over them.  When we put a cursor on the image the hovering is work and fill the circle on hovering color that you want to fill.   
DEMO:-
Dotnetmodules

Welcome
DotNetModules

Example :-

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Dotnetmodules</title>
    <style>
.workBlock{ max-width:832px; margin:55px auto 50px auto;}
.roundBox{ display:block; width:208px; height:208px; border:1px solid #dddddd; border-radius:100%; float:left; position:relative;  }
.roundBox .icon{ margin-top:35px; text-align:center; clear:coth; display:block;}
.roundBox h4{ font-size: 20px; font-family: Arial; text-align: center; color: #000000; text-transform: uppercase; margin: 133px 0 0 0;}
.roundBox .num{ position:absolute; width:49px; height:49px; background:#fff; border-radius:100%; font-family: 'nexa_boldregular'; font-size:23px; text-align:center; line-height:50px; bottom:-25px; left:50%; margin-left:-25px; display:block; z-index:5; }
.roundBox .arrow{ position:absolute; width:49px; height:49px; background:#fff; border-radius:100%; top:50%; margin-top:-25px; right:-25px;  display:block; z-index:5; padding-top:10px; text-align:center; }
.roundBox .arrow.bgnone{ background:none;}
.roundBox .hoverBox{ background:#00adef; border:1px solid #00adef; opacity:0; position:absolute; width:100%; height:100%; left:0; top:0;
-webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
   border-radius:100%;
   display:table;
}
.roundBox:hover .hoverBox{ opacity:1; border-radius:100%;
-webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
  -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}
.roundBox .hoverBox p{ font-size:24px; color:#fff; text-align:center; font-family:Arial; padding:0 15px;  display:table-cell; vertical-align:middle; }
.roundBox.heighilight{ background:#fff; }
.roundBox.heighilight .hoverBox:hover{ background:#1564af; -webkit-transform: scale(1); border:1px solid #1564af;
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
  -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
   border-radius:100%;
    }
    </style>
</head>
<body>
    <article class="roundBox">
                 <div class="icon">
                 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhriHfw8KtedIOQ1MQwCVDUdBEtTB7K11-LVZaA9IPxJ1op4wjjue14yF5t3M0akFrTrkosTqywM6QDePPjkK06ALp-zfukLsrPKp7Od0Lx4kTyVGhujfPX2lJWbCspz1lkZ2R-FWoZ44Q/s1600-r/dotnetnew.png" style="height: 128px; width: 195px;" alt="" /> </div>
                 <div class="hoverBox">
                    <p> Welcome <br>  <span class="item_price">DotNetModules</span></p>
               </div>
      </article>
</body>
</html>

Popular Posts