Tuesday, January 31, 2017

CSS3 image and List hover effects

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

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>

CSS3 image and text hover effects

Unknown 3:11 AM css No comments

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>

CSS3 image hover effects

Unknown 2:05 AM css No comments

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>

jQuery image slider with three panels and 3D look

Unknown 4:57 AM js 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.

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

Unknown 2:17 AM tables 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 !

How To scroll from bottom to top

Unknown 3:10 AM js 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>

Tuesday, January 31, 2017

CSS3 image and List hover effects

DotNet Modules

Monday, January 30, 2017

CSS3 image and text hover effects

DotNet Modules

Saturday, January 28, 2017

CSS3 image hover effects

DotNet Modules

Wednesday, January 25, 2017

jQuery image slider with three panels and 3D look

Wednesday, January 18, 2017

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

Monday, January 9, 2017

How To scroll from bottom to top

Popular Posts

Blog Archive

About Me