article

Friday, October 25, 2013

Ajax Load More Pagination Results

Ajax Load More Pagination Results

Create table
CREATE TABLE IF NOT EXISTS `paginate` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(60) NOT NULL,
  `message` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=51 ; 

//index.php
<?php
include("config.inc.php");
$results = mysqli_query($connecDB,"SELECT COUNT(*) FROM paginate");
$get_total_rows = mysqli_fetch_array($results); //total records
//break total records into pages
$total_pages = ceil($get_total_rows[0]/$item_per_page); 
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Load More Pagination Results</title>
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 var track_click = 0; //track user click on "load more" button, righ now it is 0 click
 var total_pages = <?php echo $total_pages; ?>;
 $("#results").load("fetch_pages.php", {'page':track_click} ); //initial data to load
 $(".load_more").click(function (e) { //user clicks on button
  $(this).hide(); //hide load more button on click
  $('.animation_image').show(); //show loading image
  if(track_click <= total_pages) //make sure user clicks are still less than total pages
  {
   //post page number and load returned data into result element
   $.post('fetch_pages.php',{'page': track_click}, function(data) {
    $(".load_more").show(); //bring back load more button
    $("#results").append(data); //append data received from server
    //scroll page to button element
    $("html, body").animate({scrollTop: $("#load_more_button").offset().top}, 500);
    //hide loading image
    $('.animation_image').hide(); //hide loading image once data is received
    track_click++; //user click increment on load button
   }).fail(function(xhr, ajaxOptions, thrownError) { 
    alert(thrownError); //alert any HTTP error
    $(".load_more").show(); //bring back load more button
    $('.animation_image').hide(); //hide loading image once data is received
   });
   if(track_click >= total_pages-1)
   {
    //reached end of the page yet? disable load button
    $(".load_more").attr("disabled", "disabled");
   }
   }
  });
});
</script>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="results"></div>
<div align="center">
<button class="load_more" id="load_more_button">load More</button>
<div class="animation_image" style="display:none;"><img src="ajax-loader.gif"> Loading...</div>
</div>
</body>
</html>

//config.inc.php
<?php
$db_username = 'root';
$db_password = '';
$db_name = 'dbpagenation';
$db_host = 'localhost';
$item_per_page = 5;
$connecDB = mysqli_connect($db_host, $db_username, $db_password,$db_name)or die('could not connect to database');
?>

//fetch_pages.php
<?php
include("config.inc.php"); //include config file
//sanitize post value
$page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
//throw HTTP error if page number is not valid
if(!is_numeric($page_number)){
 header('HTTP/1.1 500 Invalid page number!');
 exit();
}
//get current starting point of records
$position = ($page_number * $item_per_page);
//Limit our results within a specified range. 
$results = mysqli_query($connecDB,"SELECT id,name,message FROM paginate ORDER BY id DESC LIMIT $position, $item_per_page");
//output results from database
echo '<ul class="page_result">';
while($row = mysqli_fetch_array($results))
{
 echo '<li id="item_'.$row["id"].'"><span class="page_name">'.$row["id"].') '.$row["name"].'</span><span class="page_message">'.$row["message"].'</span></li>';
}
echo '</ul>';
?>

//style.css
#results{
font: 12px Arial, Helvetica, sans-serif;
width: 400px;
margin-left: auto;
margin-right: auto;
}
#results .loading-indication{
 background:#FFFFFF;
 padding:10px;
 position: absolute;
}
.paginate {
 padding: 0px;
 margin: 0px;
 height: 30px;
 display: block;
 text-align: center;
}
.paginate li {
 display: inline-block;
 list-style: none;
 padding: 0px;
 margin-right: 1px;
 width: 30px;
 text-align: center;
 background: #4CC2AF;
 line-height: 25px;
}
.paginate .active {
 display: inline-block;
 list-style: none;
 padding: 0px;
 margin-right: 1px;
 width: 30px;
 text-align: center;
 line-height: 25px;
 background-color: #666666;
}
.paginate li a{
 color:#FFFFFF;
 text-decoration:none;
}
.page_result{
 padding: 0px;
}
.page_result li{
 background: #E4E4E4;
 margin-bottom: 5px;
 padding: 10px;
 font-size: 12px;
 list-style: none;
}
.page_result .page_name {
font-size: 14px;
font-weight: bold;
margin-right: 5px;
}
Posted by ednalan at 7:52 AM . Under , .

CSS3 Dropdown Navigation menu

CSS3 Dropdown Navigation menu 
//index.html
<html lang="en">
<head>
 <link href="stylesheet.css" type="text/css" rel="stylesheet">
 <title> CSS3 Dropdown Navigation menu</title>
 <!-- IE6-8 support of HTML5 elements --> <!--[if lt IE 9]>
 <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->
</head>
<body >
 <nav>
  <ul id="navMain">
   <li><a href="#"> Home</a></li>
   <li><a href="#"> About</a>
    <ul>
    <li><a href="#"> Staff Members</a></li>
    <li><a href="#"> Qualifications</a></li>
    <li><a href="#"> Our Services</a></li>
    <li><a href="#"> Location details</a></li>
    <li><a href="#"> Pricing details</a></li>
    </ul>
   </li>
   <li><a href="#"> Contact</a></li>
   <li><a href="#"> Newsletter</a></li>
  </ul>
 </nav>
</body>
</html>

//style.css
html{
padding:10px;
}

#navMain{
list-style:none;
font-family:tahoma;
font-size:14px;
border:1px #a81b2f solid;
float:left;
width:940px;
margin:0;
padding:0;
background:url('images/nav-bg.jpg');
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
#navMain > li{
float:left;
position:relative;
border-right:1px solid #9b2838;
}
#navMain > li > a{
color:#f4e4e6;
float:left;
text-decoration:none;
padding:11px 18px;
border-right:1px solid #bf3549;
}
#navMain > li > a:hover{
 background: rgba(99, 20, 32, 0.25);
}
#navMain .currentPage a{
 background: rgb(99, 20, 32);
 /* RGBa with 0.6 opacity */
 background: rgba(99, 20, 32, 0.25);
}
#navMain ul {
display:none;
position:absolute;
list-style:none;
left:0;
padding:0;
margin:0;
border-top:1px #a81b2f solid;
background:#e8edee;
}
#navMain ul li a{
color:#5d6364;
text-decoration:none;
display:block;
padding:6px 7px;
border-bottom:1px solid #d3d9da;
border-left:1px solid #d3d9da;
border-right:1px solid #d3d9da;
font-size:13px;
}
#navMain li:hover ul {
display:block;
top:39px;
min-width:200px;
}
Posted by ednalan at 7:12 AM . Under .

Wednesday, October 9, 2013

Uploading using jquery ajax

Uploading using jquery ajax 
//index.html
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Uploading using jquery ajax</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
 <div id="main">
  <h1>Upload Your Images</h1>
  <form method="post" enctype="multipart/form-data"  action="upload.php">
      <input type="file" name="images" id="images" multiple />
      <button type="submit" id="btn">Upload Files!</button>
     </form>

   <div id="response"></div>
  <ul id="image-list">

  </ul>
 </div>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script src="upload.js"></script>
</body>
</html>

//upload.js
(function () {
 var input = document.getElementById("images"), 
  formdata = false;

 function showUploadedItem (source) {
    var list = document.getElementById("image-list"),
     li   = document.createElement("li"),
     img  = document.createElement("img");
    img.src = source;
    li.appendChild(img);
  list.appendChild(li);
 }   

 if (window.FormData) {
    formdata = new FormData();
    document.getElementById("btn").style.display = "none";
 }
 
  input.addEventListener("change", function (evt) {
   document.getElementById("response").innerHTML = "Uploading . . ."
   var i = 0, len = this.files.length, img, reader, file;
 
  for ( ; i < len; i++ ) {
   file = this.files[i];
 
   if (!!file.type.match(/image.*/)) {
    if ( window.FileReader ) {
     reader = new FileReader();
     reader.onloadend = function (e) { 
      showUploadedItem(e.target.result, file.fileName);
     };
     reader.readAsDataURL(file);
    }
    if (formdata) {
     formdata.append("images[]", file);
    }
   } 
  }
 
  if (formdata) {
   $.ajax({
    url: "upload.php",
    type: "POST",
    data: formdata,
    processData: false,
    contentType: false,
    success: function (res) {
     document.getElementById("response").innerHTML = res; 
    }
   });
  }
 }, false);
}());

//upload.php
//create uploads folder root directory
<?php
foreach ($_FILES["images"]["error"] as $key => $error) {
    if ($error == UPLOAD_ERR_OK) {
        $name = $_FILES["images"]["name"][$key];
        move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "uploads/" . $_FILES['images']['name'][$key]);
    }
}
echo "<h2>Successfully Uploaded Images</h2>";

//style.css
body {
 font: 14px/1.5 helvetica-neue, helvetica, arial, san-serif;
 padding:10px;
}
h1 {
 margin-top:0;
}
#main {
 width: 300px;
 margin:auto;
 background: #ececec;
 padding: 20px;
 border: 1px solid #ccc;
}
#image-list {
 list-style:none;
 margin:0;
 padding:0;
}
#image-list li {
 background: #fff;
 border: 1px solid #ccc;
 text-align:center;
 padding:20px;
 margin-bottom:19px;
}
#image-list li img {
 width: 258px;
 vertical-align: middle;
 border:1px solid #474747;
}
Posted by ednalan at 6:13 AM . Under , .

Monday, October 7, 2013

CSS Buttons

CSS Buttons 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Buttons</title>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300' rel='stylesheet' type='text/css'>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<a href="#" class="button1">Button</a>
<a href="#" class="button2">Button</a>
<a href="#" class="button3">Button</a>
<a href="#" class="button4">Button</a>
<a href="#" class="button5">Button</a>
<a href="#" class="button6">Button</a>
<a href="#" class="button7">Button</a>
<a href="#" class="button8">Button</a>
<a href="#" class="button9">Button</a>
<a href="#" class="button10">Button</a>
<a href="#" class="button11">Button</a>
<a href="#" class="button12">Button</a>
</div>
</body>
</html>

//style.css
@charset "UTF-8";
/* CSS Document */

body{background:#ccc;}
#container{
 margin:100px auto;
 width:145px;
 padding:20px;
 background:#FFF;
 
 -webkit-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .3);
 -moz-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .3);
 box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .3); 
}

a{
 text-decoration:none;
 padding:5px 20px;
 margin:0px 20px 20px 0px;
 display:block;
 width:100px;
 text-align:center;
 font-family: 'Yanone Kaffeesatz', sans-serif;
 text-transform:uppercase;
 font-size:18px;
 letter-spacing:1px;
 
 /* Rounded Corners */
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px; 
 
 /* Drop Shadow */
 -webkit-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .3);
 -moz-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .3);
 box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .3); 
}

.button1{
 color:#fff;
 border:1px solid #515151;
 
 /* Text Shadow */
 text-shadow: 1px 1px 1px #515151;
 filter: dropshadow(color=#515151, offx=1, offy=1); 
 
 /* Button Gradient */
 background: rgb(125,126,125); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* IE10+ */
 background: linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
}

.button2{
 color:#fff;
 border:1px solid #2d3e5c; 
 
 background: rgb(96,108,136); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(96,108,136,1) 0%, rgba(63,76,107,1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(96,108,136,1)), color-stop(100%,rgba(63,76,107,1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* IE10+ */
 background: linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */
}

.button3{
 color:#fff;
 border:1px solid #5e8a00;
 
 text-shadow: 1px 1px 1px #5e8a00;
 filter: dropshadow(color=#5e8a00, offx=1, offy=1); 
 
 background: rgb(191,210,85); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(191,210,85,1) 0%, rgba(142,185,42,1) 50%, rgba(114,170,0,1) 51%, rgba(158,203,45,1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(191,210,85,1)), color-stop(50%,rgba(142,185,42,1)), color-stop(51%,rgba(114,170,0,1)), color-stop(100%,rgba(158,203,45,1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* IE10+ */
 background: linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 ); /* IE6-9 */
}

.button4{
 color:#fff;
 border:1px solid #e05702;
 
 text-shadow: 1px 1px 1px #e05702;
 filter: dropshadow(color=#e05702, offx=1, offy=1); 

 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px; 
 
 -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, .1);
 -moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, .1);
 box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, .1); 
 
 background: rgb(254,204,177); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(254,204,177,1) 0%, rgba(241,116,50,1) 50%, rgba(234,85,7,1) 51%, rgba(251,149,94,1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,204,177,1)), color-stop(50%,rgba(241,116,50,1)), color-stop(51%,rgba(234,85,7,1)), color-stop(100%,rgba(251,149,94,1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(254,204,177,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(254,204,177,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(254,204,177,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%); /* IE10+ */
 background: linear-gradient(top, rgba(254,204,177,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feccb1', endColorstr='#fb955e',GradientType=0 ); /* IE6-9 */
}

.button5{
 color:#fff;
 border:1px solid #009cc6;
 
 text-shadow: 1px 1px 1px #009cc6;
 filter: dropshadow(color=#009cc6, offx=1, offy=1); 
 
 background: rgb(169,228,247); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(169,228,247,1) 0%, rgba(15,180,231,1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,228,247,1)), color-stop(100%,rgba(15,180,231,1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(169,228,247,1) 0%,rgba(15,180,231,1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(169,228,247,1) 0%,rgba(15,180,231,1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(169,228,247,1) 0%,rgba(15,180,231,1) 100%); /* IE10+ */
 background: linear-gradient(top, rgba(169,228,247,1) 0%,rgba(15,180,231,1) 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=0 ); /* IE6-9 */
}

.button6{
 color:#fff;
 border:1px solid #6f818b;
 
 text-shadow: 1px 1px 1px #6f818b;
 filter: dropshadow(color=#6f818b, offx=1, offy=1); 
 
 background: rgb(206,220,231); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(206,220,231,1) 0%, rgba(89,106,114,1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(206,220,231,1)), color-stop(100%,rgba(89,106,114,1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); /* IE10+ */
 background: linear-gradient(top, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=0 ); /* IE6-9 */
}

.button7{
 color:#8b8b8b;
 border:1px solid #979797;
 
 text-shadow: 1px 1px 1px #fff;
 filter: dropshadow(color=#fff, offx=1, offy=1); 
 
 background: rgb(238,238,238); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
 background: linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}

.button8{
 color:#8b8b8b;
 border:1px solid #a0a0a0;
 
 text-shadow: 1px 1px 1px #fff;
 filter: dropshadow(color=#fff, offx=1, offy=1); 
 
 background: rgb(255,255,255); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 51%, rgba(255,255,255,1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(243,243,243,1)), color-stop(51%,rgba(237,237,237,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* IE10+ */
 background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

.button9{
 color:#fff;
 border:1px solid #810808;
 
 text-shadow: 1px 1px 1px #810808;
 filter: dropshadow(color=#810808, offx=1, offy=1); 
 
 background: rgb(247,13,13); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(247,13,13,1) 0%, rgba(150,11,11,1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,13,13,1)), color-stop(100%,rgba(150,11,11,1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(247,13,13,1) 0%,rgba(150,11,11,1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(247,13,13,1) 0%,rgba(150,11,11,1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(247,13,13,1) 0%,rgba(150,11,11,1) 100%); /* IE10+ */
 background: linear-gradient(top, rgba(247,13,13,1) 0%,rgba(150,11,11,1) 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f70d0d', endColorstr='#960b0b',GradientType=0 ); /* IE6-9 */
}

.button10{
 color:#fff;
 border:1px solid #111111;
 
 text-shadow: 1px 1px 1px #111111;
 filter: dropshadow(color=#111111, offx=1, offy=1); 
 
 background: rgb(97,97,97); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(97,97,97,1) 0%, rgba(66,66,66,1) 48%, rgba(53,53,53,1) 51%, rgba(36,36,36,1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(97,97,97,1)), color-stop(48%,rgba(66,66,66,1)), color-stop(51%,rgba(53,53,53,1)), color-stop(100%,rgba(36,36,36,1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(97,97,97,1) 0%,rgba(66,66,66,1) 48%,rgba(53,53,53,1) 51%,rgba(36,36,36,1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(97,97,97,1) 0%,rgba(66,66,66,1) 48%,rgba(53,53,53,1) 51%,rgba(36,36,36,1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(97,97,97,1) 0%,rgba(66,66,66,1) 48%,rgba(53,53,53,1) 51%,rgba(36,36,36,1) 100%); /* IE10+ */
 background: linear-gradient(top, rgba(97,97,97,1) 0%,rgba(66,66,66,1) 48%,rgba(53,53,53,1) 51%,rgba(36,36,36,1) 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#616161', endColorstr='#242424',GradientType=0 ); /* IE6-9 */
}

.button11{
 color:#fff;
 border:1px solid #a5b10b;
 
 text-shadow: 1px 1px 1px #a5b10b;
 filter: dropshadow(color=#a5b10b, offx=1, offy=1); 
 
 background: rgb(230,240,163); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(230,240,163,1) 0%, rgba(210,230,56,1) 50%, rgba(195,216,37,1) 51%, rgba(219,240,67,1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(230,240,163,1)), color-stop(50%,rgba(210,230,56,1)), color-stop(51%,rgba(195,216,37,1)), color-stop(100%,rgba(219,240,67,1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 51%,rgba(219,240,67,1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 51%,rgba(219,240,67,1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 51%,rgba(219,240,67,1) 100%); /* IE10+ */
 background: linear-gradient(top, rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 51%,rgba(219,240,67,1) 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 ); /* IE6-9 */
}

.button12{
 color:#fff;
 border:1px solid #de6106;
 
 text-shadow: 1px 1px 1px #de6106;
 filter: dropshadow(color=#de6106, offx=1, offy=1); 
 
 background: rgb(255,103,15); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(255,103,15,1) 0%, rgba(255,103,15,1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,103,15,1)), color-stop(100%,rgba(255,103,15,1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(255,103,15,1) 0%,rgba(255,103,15,1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(255,103,15,1) 0%,rgba(255,103,15,1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(255,103,15,1) 0%,rgba(255,103,15,1) 100%); /* IE10+ */
 background: linear-gradient(top, rgba(255,103,15,1) 0%,rgba(255,103,15,1) 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff670f', endColorstr='#ff670f',GradientType=0 ); /* IE6-9 */
}
Posted by ednalan at 6:43 AM . Under .
Subscribe to: Posts (Atom)

Related Post