Tuesday, January 31, 2017

CSS3 image and List hover effects

                No comments   

Intoduction :-
Hii Friends... 

 Today I explain how to make  CSS3 image hover effects. On the modern web there are so many techniques that can be used to create interesting interactions, but the simplest and most easy is use CSS, and specifically the additions that came with CSS3. It gives us beautiful animation and transitions or image effects.
Demo :-
Hover Effects
img21

DotNet Modules

Lorem Ipsum is simply dummy text
Lorem is not simply random text.
Neque porro quisquam est qui dolorem
 


Example :- 

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <title>Hover Effects</title>
    <style>
        .grid figure
        {
            position: relative;
            float: left;
            overflow: hidden;
            margin: 10px 1%;
            min-width: 320px;
            max-width: 480px;
            max-height: 360px;
            width: 48%;
            height: auto;
            background: #3085a3;
            text-align: center;
            cursor: pointer;
        }
        .grid figure figcaption
        {
            padding: 2em;
            color: #fff;
            text-transform: uppercase;
            font-size: 1.25em;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
        .grid figure figcaption, .grid figure figcaption > a
        {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .grid figure p
        {
            letter-spacing: 1px;
            font-size: 68.5%;
        }
        figure.effect-julia img
        {
            max-width: none;
            height: 400px;
            -webkit-transition: opacity 1s, -webkit-transform 1s;
            transition: opacity 1s, transform 1s;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
        figure.effect-julia figcaption
        {
            text-align: left;
        }
        figure.effect-julia p
        {
            display: inline-block;
            margin: 0 0 0.25em;
            padding: 0.4em 1em;
            background: rgba(255,255,255,0.9);
            color: #2f3238;
            text-transform: none;
            font-weight: 500;
            font-size: 75%;
            -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
            transition: opacity 0.35s, transform 0.35s;
            -webkit-transform: translate3d(-360px,0,0);
            transform: translate3d(-360px,0,0);
        }
        figure.effect-julia p:first-child
        {
            -webkit-transition-delay: 0.15s;
            transition-delay: 0.15s;
        }
        figure.effect-julia p:nth-of-type(2)
        {
            -webkit-transition-delay: 0.1s;
            transition-delay: 0.1s;
        }
        figure.effect-julia p:nth-of-type(3)
        {
            -webkit-transition-delay: 0.05s;
            transition-delay: 0.05s;
        }
        figure.effect-julia:hover p:first-child
        {
            -webkit-transition-delay: 0s;
            transition-delay: 0s;
        }
        figure.effect-julia:hover p:nth-of-type(2)
        {
            -webkit-transition-delay: 0.05s;
            transition-delay: 0.05s;
        }
        figure.effect-julia:hover p:nth-of-type(3)
        {
            -webkit-transition-delay: 0.1s;
            transition-delay: 0.1s;
        }
        figure.effect-julia:hover img
        {
            opacity: 0.4;
            -webkit-transform: scale3d(1.1,1.1,1);
            transform: scale3d(1.1,1.1,1);
        }
        figure.effect-julia:hover p
        {
            opacity: 1;
            -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            <div class="grid">
                <figure class="effect-julia">
                        <img src="img/21.jpg" alt="img21"/>
                        <figcaption>
                            <h2>DotNet <span>Modules</span></h2>
                            <div>
                                <p>Lorem Ipsum is simply dummy text</p>
                                <p>Lorem is not simply random text.</p>
                                <p>Neque porro quisquam est qui dolorem</p>
                            </div>
                      </figcaption>          
                    </figure>
            </div>
        </div>
    </div>
</body>
</html> 

Monday, January 30, 2017

CSS3 image and text hover effects

                No comments   

Intoduction :-
Hii Friends... 

 Today I explain how to make  CSS3 image hover effects. On the modern web there are so many techniques that can be used to create interesting interactions, but the simplest and most easy is use CSS, and specifically the additions that came with CSS3. It gives us beautiful animation and transitions or image effects.

Demo :-


Hover Effect
img12

DotNet Modules

This is a Plateform, Of new ideas and Interesting modules.
Example :- 

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <title>Hover Effect</title>
    <style>
        .grid figure
        {
            position: relative;
            float: left;
            overflow: hidden;
            margin: 10px 1%;
            min-width: 320px;
            max-width: 480px;
            max-height: 360px;
            width: 48%;
            background: #3085a3;
            text-align: center;
        }
        .grid figure figcaption
        {
            padding: 2em;
            color: #fff;
            text-transform: uppercase;
            font-size: 1.25em;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
        .grid figure p
        {
            letter-spacing: 1px;
            font-size: 68.5%;
        }
        figure.effect-marley figcaption
        {
            text-align: right;
        }
        figure.effect-marley h2, figure.effect-marley p
        {
            position: absolute;
            right: 30px;
            left: 30px;
            padding: 10px 0;
        }
        figure.effect-marley p
        {
            bottom: 30px;
            line-height: 1.5;
            -webkit-transform: translate3d(0,100%,0);
            transform: translate3d(0,100%,0);
        }
        figure.effect-marley h2
        {
            top: 30px;
            -webkit-transition: -webkit-transform 0.35s;
            transition: transform 0.35s;
            -webkit-transform: translate3d(0,20px,0);
            transform: translate3d(0,20px,0);
        }
        figure.effect-marley:hover h2
        {
            -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }
        figure.effect-marley h2::after
        {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            height: 4px;
            background: #fff;
            content: '';
            -webkit-transform: translate3d(0,40px,0);
            transform: translate3d(0,40px,0);
        }
        figure.effect-marley h2::after, figure.effect-marley p
        {
            opacity: 0;
            -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
            transition: opacity 0.35s, transform 0.35s;
        }
        figure.effect-marley:hover h2::after, figure.effect-marley:hover p
        {
            opacity: 1;
            -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            <div class="grid">
                <figure class="effect-marley">
                        <img src="img/12.jpg" alt="img12"/>
                        <figcaption>
                            <h2>DotNet <span>Modules</span></h2>
                            <p>This is a Plateform, Of new ideas and Interesting modules.</p>
                        </figcaption>           
                    </figure>
            </div>
        </div>
</body>
</html>

Saturday, January 28, 2017

CSS3 image hover effects

                No comments   


Intoduction :-
Hii Friends... 

 Today I explain how to make  CSS3 image hover effects. On the modern web there are so many techniques that can be used to create interesting interactions, but the simplest and most easy is use CSS, and specifically the additions that came with CSS3. It gives us beautiful animation and transitions or image effects.

Demo :-

Hover Effect
img03

DotNet Modules

This is a Plateform, Of new ideas friends.
Example :- 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hover Effect</title>
  <style>
 
  .grid figure {
    position: relative;
    float: left;
    overflow: hidden;
    margin: 10px 1%;
    min-width: 320px;
    max-width: 480px;
    max-height: 360px;
    width: 48%;
    background: #3085a3;
    text-align: center;
    cursor: pointer;
}

.grid figure figcaption {
    padding: 2em;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.25em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.grid figure figcaption,
.grid figure figcaption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.grid figure p {
    letter-spacing: 1px;
    font-size: 68.5%;
}

figure.effect-layla {
    background: #18a367;
}

figure.effect-layla img {
    height: 390px;
}

figure.effect-layla figcaption {
    padding: 3em;
}

figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after {
    position: absolute;
    content: '';
    opacity: 0;
}

figure.effect-layla figcaption::before {
    top: 50px;
    right: 30px;
    bottom: 50px;
    left: 30px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: scale(0,1);
    transform: scale(0,1);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

figure.effect-layla figcaption::after {
    top: 30px;
    right: 50px;
    bottom: 30px;
    left: 50px;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: scale(1,0);
    transform: scale(1,0);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
}

figure.effect-layla h2 {
    padding-top: 26%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
}

figure.effect-layla p {
    padding: 0.5em 2em;
    text-transform: none;
    opacity: 0;
    -webkit-transform: translate3d(0,-10px,0);
    transform: translate3d(0,-10px,0);
}

figure.effect-layla img,
figure.effect-layla h2 {
    -webkit-transform: translate3d(0,-30px,0);
    transform: translate3d(0,-30px,0);
}

figure.effect-layla img,
figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after,
figure.effect-layla p {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-layla:hover img {
    opacity: 0.7;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-layla:hover figcaption::before,
figure.effect-layla:hover figcaption::after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

figure.effect-layla:hover h2,
figure.effect-layla:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { display: table; content: ''; }
.clearfix:after { clear: both; }
.content {
    margin: 0 auto;
    max-width: 1000px;
}
 
  </style>
</head>
<body>
    <div class="container">
        <div class="content">
            <div class="grid">
                <figure class="effect-layla">
                        <img src="img/3.jpg" alt="img03"/>
                        <figcaption>
                            <h2>DotNet <span>Modules</span></h2>
                            <p>This is a Plateform, Of new ideas friends.</p>
                      
                        </figcaption>          
                    </figure>
            </div>
        </div>
    </div>
</body>
</html> 

Wednesday, January 25, 2017

jQuery image slider with three panels and 3D look

                No comments   

Intoduction :-
Hii Friends... 

 Today I explain How To make jQuery image slider with three panels and 3D look,
If you are a web designer or developer you are already aware of how to work jQuery
and CSS. CSS3 and jQuery have smart changes in web development. you Want to animate images or texts then you can easily with the help of Jquery and css3. For this I use animated hover effects,elastic effects, buttons with built-in progress bars,light boxes, image gallery effects, text effects and zoom-in effects.

Demo :-

Example :- 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Welcome On DotNetModules</title>
    <link rel="stylesheet" type="text/css" href="css/demo.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300|Prata'
        rel='stylesheet' type='text/css' />
    <script type="text/javascript" src="js/modernizr.custom.26887.js"></script>
    <noscript>
        <link rel="stylesheet" type="text/css" href="css/noscript.css" />
    </noscript>
</head>
<body>
    <div class="container">
        <div class="main">
            <div class="fs-slider" id="fs-slider">
                <figure>
                        <img src="images/1.jpg" alt="image01" />
                        <figcaption>
                            <h3>Lorem Ipsum</h3>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                        </figcaption>
                    </figure>
                <figure>
                        <img src="images/2.jpg" alt="image02" />
                        <figcaption>
                            <h3>Lorem Ipsum</h3>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                        </figcaption>
                    </figure>
                <figure>
                        <img src="images/3.jpg" alt="image03" />
                        <figcaption>
                            <h3>Lorem Ipsum</h3>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                        </figcaption>
                    </figure>
                <figure>
                        <img src="images/4.jpg" alt="image04" />
                        <figcaption>
                            <h3>Lorem Ipsum</h3>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                        </figcaption>
                    </figure>
                <figure>
                        <img src="images/5.jpg" alt="image05" />
                        <figcaption>
                            <h3>Lorem Ipsum</h3>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                        </figcaption>
                    </figure>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.imgslider.js"></script>
    <script type="text/javascript">
        $(function () {

            $('#fs-slider').imgslider();

        });
        </script>
</body>
</html>

Dear friends if you need this code. I will provide you Zip. Put your EmailId in comment box.

Wednesday, January 18, 2017

How to get all tables, Procedures, triggers, objects name in SQL server

                No comments   

Intoduction :-
Hii Friends...

This is an easy way to find tables, procedures, triggers which was made by you or your friends and you don't know the table or procedures name then you can simply fire below queries
with remember name like if your table name is tbl_Employee and procedure name is proc_ManageEmployee and trigger name is tgr_updateEmployee then you can fire query like below queries

 1. for tables :  select * from sys.tables where name like '%Employee%'
you will get tbl_Employee  as result.
2. for procedures :  select * from sys.procedures where name like '%Employee%'

you will get proc_ManageEmployee as result.
3. for triggers :  select * from sys.triggers where name like '%Employee%'

you will get tgr_updateEmployee as result.

 you can also put your own condition with these conditions like AND Id > 10 OR Mobile=123456789

 Thank You !

Monday, January 9, 2017

How To scroll from bottom to top

                1 comment   

Intoduction :-
Hii Friends... 

Today I explain How To scroll from top to bottom and bottom to top, we use “scrollTop” function of jquery. In order to make the Scroll to Bottom action smooth,
jQuery animation has been used. The jQuery scrollTop property is used to set the position of the browser Scrollbar. The page is scrolled to Top or Bottom position
by setting the scrollTop property.Through this button, we can back to the top section from the bottom section of the web page without manual page scrolling.


Example :-
<img src="img/BackToTopArrow.png" class="on-click-scroll-page-image" title="Go To Top" />


<style>
.on-click-scroll-page-image
        {
            max-width:50px;
            position:fixed;
            cursor:pointer;
            bottom:5px;
            right:5px;
            display:none;
        }

</style>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>

        $(document).ready(function () {
            $(window).scroll(function () {
                if ($(window).scrollTop() > 10) {
                    $('.on-click-scroll-page-image').show();
                }
                else {
                    $('.on-click-scroll-page-image').hide();
                }
            });
            $('.on-click-scroll-page-image').click(function () {  
                    $("html, body").animate({ scrollTop: 0 }, 600);
                    return false;
                         });
        });

    </script>

Popular Posts

  • Auto-Hiding Navbar with Javascript
    Intoduction :-   Hii Friends... today i explain how to hide a navbar when scroll the page. Fixed headers are fairly common nowadays with...
  • Awarepedia services
    Intoduction :-   Hii Friends...   Today I explain services of awarepedia.com  . Awarepedia is a online software development company and the...
  • Asp.net insert, Edit, update, delete in grid view
    Introduction :   Here I explain how to insert, edit, update and delete data in grid view using asp.net. In this project I use so...
  • How To scroll from bottom to top
    Intoduction :- Hii Friends...   Today I explain How To scroll from top to bottom and bottom to top, we use “scrollTop” function of jque...
  • Angular Expressions
    Intoduction :-   Hii Friends... Today I explain about angular js expressions. this is similar to JavaScript expressions. 1) The expr...
  • How to make a jumborton in bootstrap
    Introduction  Hi.. Friends, Today I explain that how to use jumborton in bootstrap.  A jumbotron indicates a big box for calling ...
  • How to make Testimonial Slider
    Intoduction :- Hii Friends... Today I explain how to make a bootstrap Testimonial Slider. Testimonial is a formal statement testifying t...
  • Creating Alert Messages in Bootstrap
    Intoduction :-   Hii Friends... Alert boxes are used quite often to stand out the information that requires immediate attention of the en...
  • Create a Cart Popup div in HTML & CSS
    Intoduction :-   Hii Friends... Today I explain how to Create a Cart Popup div in HTML & CSS . This moduel base on mouse hover when y...
  • How to Make Glyphicon in bootstrap
    Introduction Hi.. Friends, Today I explain that how to use glyphicons with bootstrap in asp.net. In the bootstrap, bootstrap...