Showing posts with label designing. Show all posts
Showing posts with label designing. Show all posts

Wednesday, 2 September 2015

html - Darken the image with hover

Live Demo Link  - Click Me

Darken the image on mouse hover

HTML - 
<button class="view_new">
    <div class="a">
    <img src="http://upload.wikimedia.org/wikipedia/en/thumb/2/2a/Burj_Al_Arab,_Dubai,_by_Joi_Ito_Dec2007.jpg/220px-Burj_Al_Arab,_Dubai,_by_Joi_Ito_Dec2007.jpg" alt="Dubai" />
    </div>
</button>
CSS - 
.view_new {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
    background-color: white;
}
.view_new .a {
    margin: 10px;
}

.view_new img {
    display: block;
}

.view_new:hover .a {
    background-color: black;
}

.view_new:hover img {
    opacity: 0.4;
}


 
Share:

Sunday, 7 June 2015

Login/Sign Up Design with social login

Login & Sign Up Design with the Social Login 

 Check -







Download Source Code - Click here


Share:

Friday, 24 April 2015

WordPress - Masonary Responsive Look for Blog Post




Create a page template like - "page-blog.php" post this file inside the theme files. "/wp-content/theme/yourtheme/page-blog.php"
<?php
/**
 * Template Name: Masonry Blog
 *
 * Blog Template
 *
 */
 ?>
<?php include_once( 'header.php' ); ?>
<!-- Start the Loop. -->
<div class="masonry">
  
<?php
$temp = $wp_query;
$wp_query= null;
$wp_query = new WP_Query();
$wp_query->query('posts_per_page=100'.'&paged='.$paged);
while ($wp_query->have_posts()) : $wp_query->the_post();
?>
<div class="item">

<a href="<?php the_permalink() ?>" rel="bookmark" title="Click to view: <?php the_title_attribute(); ?>">
<?php the_title(); ?></a>


<?php if ( has_post_thumbnail() ) {
 $size=75;
 ?>
 <a href="<?php the_permalink() ?>" rel="bookmark" title="Click to view: <?php the_title_attribute(); ?>">
<?php the_post_thumbnail( $size );  }  ?>
</a>

<?php the_excerpt(); ?>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" class="read_more_link">Read More</a>
</div>
<?php endwhile;?>
<?php $wp_query = null; $wp_query = $temp;?>
<!-- stop The Loop. -->
</div><!-- container -->
<?php get_footer(); ?>
CSS  Code - Put this below code in themes "Style.css"


.masonry {
    margin: 1.5em 0;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    font-size: .85em;
}

.item {
    display: inline-block;
    background: #fff;
    padding: 1em;
    margin: 0 0 1.5em;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 2px 2px 4px 0 #ccc;
}

@media only screen and (min-width: 400px) {
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 700px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 900px) {
    .masonry {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media only screen and (min-width: 1100px) {
    .masonry {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }
}

@media only screen and (min-width: 1280px) {
    .wrapper {
        width: 1260px;
    }
}

Share:

best Social icons for the footer



HTML  Code -

<html>
<body>
<center><h1>Best Footer Design</h1></center>
<div class="socials">
  <div class="container">
    <aside class="footer_widget">
<ul class="socialicons">
    <li><a target="_blank" href="https://www.facebook.com/756dk"><img alt="Facebook" src="https://tunedballoondemo.files.wordpress.com/2014/02/facebook.png"></a></li>
      <li><a target="_blank" href="https://twitter.com/kapoordeepanshu"><img alt="Twitter" src="https://tunedballoondemo.files.wordpress.com/2014/02/twitter.png"></a></li>
      <li><a target="_blank" href="https://plus.google.com/+DeepanshuKapoorcybersecurity"><img alt="Google" src="https://tunedballoondemo.files.wordpress.com/2014/02/google.png"></a></li>
      <li><a target="_blank" href="https://www.youtube.com/channel/UC27t7pR8bt7HQVBEniIj39g"><img alt="YouTube" src="https://tunedballoondemo.files.wordpress.com/2014/02/youtube.png"></a></li>
      <li><a target="_blank" href="https://instagram.com/kapoordeepanshu/"><img alt="Instagram" src="https://tunedballoondemo.files.wordpress.com/2014/02/instagram.png"></a></li>
  </ul>
</aside>  </div>
  <!-- end container -->
</div>
</body>
</html>

CSS Code - 

.socials {
    background: none repeat scroll 0 0 #110614;
    color: #fff;
    margin-top: 50px;
    padding: 15px 0 5px;
    text-align: center;
}

.container:after {
    clear: both;
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
}
.container {
    width: 1280px;
}
.container {
    margin: 0 auto;
    position: relative;
    width: 960px;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

ul.socialicons {
    padding: 8px 0;
    text-align: center;
}
ol, ul {
    list-style: outside none none;
}
aside.footer_widget ul li {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    padding: 0;
}
.socials ul li {
    color: #fff;
    display: inline-block;
}
ul.socialicons li {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    padding: 5px 0;
}
aside ul li {
    font-size: 1em;
    padding: 5px 0;
}
Share:

Sunday, 1 March 2015

Create Responsive Menu



HTML CODE 

<!Doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Responsive Navigation Menu</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <label for="show-menu" class="show-menu">Show Menu</label>
 <input type="checkbox" id="show-menu" role="button">
  <ul id="menu">
  <li><a href="#">Home</a></li>
  <li>
   <a href="#">About ￬</a>
   <ul class="hidden">
    <li><a href="#">Who I am</a></li>
    <li><a href="#">What I Do</a></li>
   </ul>
  </li>
  <li>
   <a href="#">Portfolio ￬</a>
   <ul class="hidden">
    <li><a href="#">Web</a></li>
    <li><a href="#">Security</a></li>
    <li><a href="#">SEO</a></li>
   </ul>
  </li>
  <li><a href="#">Designing</a></li>
  <li><a href="#">Development</a></li>
 </ul>
</body>
</html>

Corresponding CSS


/*Strip the ul of padding and list styling*/
ul {
 list-style-type:none;
 margin:0;
 padding:0;
 position: absolute;
}

/*Create a horizontal list with spacing*/
li {
 display:inline-block;
 float: left;
 margin-right: 1px;
}

/*Style for menu links*/
li a {
 display:block;
 min-width:140px;
 height: 50px;
 text-align: center;
 line-height: 50px;
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 color: #fff;
 background: #2f3036;
 text-decoration: none;
}

/*Hover state for top level links*/
li:hover a {
 background: #19c589;
}

/*Style for dropdown links*/
li:hover ul a {
 background: #f3f3f3;
 color: #2f3036;
 height: 40px;
 line-height: 40px;
}

/*Hover state for dropdown links*/
li:hover ul a:hover {
 background: #19c589;
 color: #fff;
}

/*Hide dropdown links until they are needed*/
li ul {
 display: none;
}

/*Make dropdown links vertical*/
li ul li {
 display: block;
 float: none;
}

/*Prevent text wrapping*/
li ul li a {
 width: auto;
 min-width: 100px;
 padding: 0 20px;
}

/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
 display: block;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 text-decoration: none;
 color: #fff;
 background: #19c589;
 text-align: center;
 padding: 10px 0;
 display: none;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}

/*Responsive Styles*/

@media screen and (max-width : 760px){
 /*Make dropdown links appear inline*/
 ul {
  position: static;
  display: none;
 }
 /*Create vertical spacing*/
 li {
  margin-bottom: 1px;
 }
 /*Make all menu links full width*/
 ul li, li a {
  width: 100%;
 }
 /*Display 'show menu' link*/
 .show-menu {
  display:block;
 }
}
Share:

Blogger Tutorials

Blogger Templates

d-koder - Web Developer / Security Specialist / Penetration Tester I would like to write tutorials about the issue we use to get while coding something. Hope these small tuts will help developers worldwide. > Website

Interested In -

Html/Css
PHP
Javascript
Jquery
Ajax
JSON
GITHUB