Coding Cluster

Showing posts with label CSS. Show all posts

Code for pure css menu

Tuesday

An attractive mouse hover menu using CSS only:

One of the fundamental things in web design in reference to usability is navigation. Navigation menus are important to help the user find the information that he or she seeks. Use of colors, highlights and mouse-over effects will facilitate detection of the items that are being searched.

In this post I give cool css only menu. The items background change with rounded corner when mouse hover . This menu build with css and 'UL' tag only. Just copy and paste the following html code to build this cool menu.

<html>
<head>
<style>
#topmenu {
 float:left;
 padding-right: 20px;
 padding-left: 80px;
 padding-top: 46px;
 font-family: 'GibsonRegular'; 
}
#topmenu ul {
 display: block;
 height: 34px;
 width: 540px;
}
#topmenu ul li {
 display: block;
 float: left;
 margin-right: 5px;
}
#topmenu ul li a {
 -webkit-border-radius: 17px;
 -moz-border-radius: 17px;
 border-radius: 17px;
 -webkit-transition-property: color, border;
 -webkit-transition-duration: .2s;
 -webkit-transition-timing: ease-in;
 -moz-transition-property: color, border;
 -moz-transition-duration: .2s;
 -moz-transition-timing: ease-in;
 -o-transition-property: color, border;
 -o-transition-duration: .2s;
 -o-transition-timing: ease-in;
 transition-property: color, border;
 transition-duration: .2s;
 transition-timing: ease-in;
 display: block;
 float: left;
 font-size: 14px;
 color: #65778c;
 text-decoration: none;
 line-height: 30px;
 height: 30px;
 padding-left: 13px;
 padding-right: 13px;
 border: 2px solid transparent;
}
#topmenu ul li a.active {
 border: 2px solid #c8d8df;
 color: #DE3068;
 text-decoration: none;
}
#topmenu ul li a:hover {
 border: 2px solid #c8d8df;
 color: #DE3068;
 text-decoration: none;
}
.ie7 #topmenu ul li a, .ie8 #topmenu ul li a {
 line-height: 34px;
 height: 34px;
 padding-left: 15px;
 padding-right: 15px;
 border: none;
}
</style>
</head>
<body>
<div id="topmenu">
  <ul>
    <li><a href="#" title="Hello!" class="active"><span>Hello!</span></a></li>
    <li><a href="#" title="Portfolio"><span>Portfolio</span></a></li>
    <li><a href="#" title="Services"><span>Services</span></a></li>
    <li><a href="#" title="About us"><span>About us</span></a></li>
    <li><a href="#" title="Blog"><span>Blog</span></a></li>
  </ul>
</div>
</body>
</html>

Demo

drag and drop between two divs using jquery ui

Jquery drag and drop sortable between different divs:
In this tutorial I'm using jquery 1.4 2 min js and jquery-ui-1.8.13.min.js for drag and drop divs with image. In this simaple example you can Drag and drop items within a list and also Drag and drop items within and between lists of divs
First download the requirement Jquey fils, you can download it from here or you can directly call from google.

Download jquery 1.4 2 min js

Downloadjquery-ui-1.8.13.min.js

Using the parameter connectWith (jQuery selector) we can define which other lists that items within a list can be dragged and dropped to. Add the following code into page load function.

<script>
$(document).ready(function () {
 $('.container .draggable-list').sortable({
 connectWith: '.container .draggable-list'
 });
});
</script>

then add that js reference to your page header tag

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>

Then copy and paste the following css in to your style region

<style>
.container {
 width: 400px;
 background-color:#000000;
 border-bottom-color:#003366;
}
.draggable-list {
 background-color: #0066FF;
 list-style: none;
 margin: 0;
 min-height: 70px;
 padding: 10px;
}
.draggable-item {
 background-color: #FFF;
 border: 1px dotted #000;
 cursor: move;
 display: block;
 font-weight: bold;
 color:#CC0033;
 text-shadow: 5px 5px 5px #FF0000;
 padding-bottom:  70px;
 margin: 5px;
}
.img1 {
 width:76px;
 height: 62px;
 background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmPR_z7HNH5_D5mL3iSnN3TKntSKvOpWrGXApaXvYRRgEViP9zN5X5hlXxt4JAbshSv4YOHSzyHFaXSfCZI1rKDU68JZm3PvonazswiGKHLGCwd-gbeFF5rpd0nquiDk07XylsVJRzlvaD/s1600/how+to+use+sprite+image.jpg') -3.5px -9px;
 float:left;
}
.img2 {
 background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmPR_z7HNH5_D5mL3iSnN3TKntSKvOpWrGXApaXvYRRgEViP9zN5X5hlXxt4JAbshSv4YOHSzyHFaXSfCZI1rKDU68JZm3PvonazswiGKHLGCwd-gbeFF5rpd0nquiDk07XylsVJRzlvaD/s1600/how+to+use+sprite+image.jpg') -98px -7px;
 width: 70px;
 height: 66px;
 float:left;
}
.img3 {
 background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmPR_z7HNH5_D5mL3iSnN3TKntSKvOpWrGXApaXvYRRgEViP9zN5X5hlXxt4JAbshSv4YOHSzyHFaXSfCZI1rKDU68JZm3PvonazswiGKHLGCwd-gbeFF5rpd0nquiDk07XylsVJRzlvaD/s1600/how+to+use+sprite+image.jpg') -198px -9px;
 width: 63px;
 height: 58px;
 float:left;
}

Finally add the draggable-list and draggable-item with in the container div.

<div class="container">
  <div class="draggable-list" style="float:left">
    <div class="draggable-item">
      <div class="img1"></div>
      <p style="float:right"> Group A </p>
    </div>
    <div class="draggable-item"> <span class="img2"></span>
      <p style="float:right"> Group A </p>
    </div>
    <div class="draggable-item"> <span class="img3"></span>
      <p style="float:right"> Group A </p>
    </div>
    <div class="draggable-item"> <span class="img5"></span>
      <p style="float:right"> Group A </p>
    </div>
    <div class="draggable-item"> <span class="img6"></span>
      <p style="float:right"> Group A </p>
    </div>
    <div class="draggable-item"> <span class="img4"></span>
      <p style="float:right"> Group A </p>
    </div>
  </div>
  <div class="draggable-list" style="float:right">
    <div class="draggable-item"> <span class="img7"></span>
      <p style="float:right"> Group B </p>
    </div>
    <div class="draggable-item"> <span class="img8"></span>
      <p style="float:right"> Group B </p>
    </div>
    <div class="draggable-item"> <span class="img9"></span>
      <p style="float:right"> Group B </p>
    </div>
    <div class="draggable-item"> <span class="img10"></span>
      <p style="float:right"> Group B </p>
    </div>
    <div class="draggable-item"> <span class="img11"></span>
      <p style="float:right"> Group B </p>
    </div>
    <div class="draggable-item"> <span class="img12"></span>
      <p style="float:right"> Group B </p>
    </div>
  </div>
</div>

Demo Download

Fading / Blinking rounded corner button only with pure css(without image)

Wednesday

Css only Rounded corners Opacity Gradient buttons:
This is the source code for, No JavaScript, No Images, No Flash - CSS Only! Blinking round corner button.

source code for css only rounded corner fade button

<html><head>
<style>
nav a#blink {
padding: 10px 10px;
margin-right: 10px;
margin-bottom: 5px;
border-radius:20px;
display: inline-block;
color: #421f00;
background-color:#e6a560;
background: -moz-linear-gradient(
top,
#e6a560 0%,
#ca6609);
background: -o-linear-gradient(
top,
#e6a560 0%,
#ca6609);
background: -webkit-gradient(
linear, left top, left bottom, 
from(#e6a560),
to(#ca6609));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e6a560', endColorstr='#ca6609');
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #ffd5ab;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(66,31,0,0.7);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(66,31,0,0.7);
text-shadow:
0px -1px 0px rgba(171,87,13,0.4),
0px 1px 0px rgba(255,255,255,0.3); 
opacity:0.7;
-webkit-animation-name: buttonPulse;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}

@-webkit-keyframes buttonPulse { 
0% { opacity: 0.5 }

50% { opacity: 1 }

100% { opacity: 0.5 }
} 
</style>
</head>
<body>
<nav role="navigation">
<a href="http://codingcluster.blogspot.in/2012/10/fadeblinking-rounded-corner-button-only.html" id="blink">Hay Look at my skin</a>
</nav>
</body>
</html>

Demo:

Avoid white background when iframe loads

Monday

Get Rid of White Flash when iframe Loads:

To avoid white background while iframe loads, you can hides iframe until its fully loaded. You can use the following code snippets to hide iframe when its loading.