web-development (CSS)

Showing posts with label web-development (CSS). Show all posts

Saturday, December 15, 2018

Create A CSS Administrator Login Form Design

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create A CSS Administrator Login Form Design and Login system using PHP with MYSQL database</title>
<style>
#login-form {
	margin:106px auto 0px auto;
	width:560px;
	border:solid 12px #E0E0E0;
	background:#E0E0E0;
	border-radius:12px;
	-moz-border-radius:12px;
	webkit-border-radius:12px;
}
#login-form{
border-color:#4BB2C5;
}
#login-inner {
	border-radius:5px;
	-moz-border-radius:5px;
	webkit-border-radius:5px;
	margin:0 auto;
	padding:30px;
	width:500px;
}
#login-form #wrapper{
	height: 50px;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	text-align:center;
	width:494px;
	margin:0px auto 30px auto;
	font-size:1.2em;
	background-image: url('img/bg.jpg');
}
#login-form #wrapper p{
	padding-top:4px;
	margin:0;
	text-transform:uppercase;
	letter-spacing:2px;
	line-height:2.2em;
	color:#FFF;
	font-weight:bold;
	text-shadow:#111 0px 1px 1px;
}
.field-separator{
	width:560px;
	margin:0px auto 20px auto;
}
#login-form label{
	color:#111;
	display:block;
	font-size:1em;
	margin-bottom:2px;
	font-weight:bold
}
#login-form input.txt {
	background:url('img/login_input_bg.png') repeat-x scroll left top #F7FCFF;
	border:1px solid #CCC;
	color:#25313C;
	font-size:1.4em;
	width:486px;
	padding:4px;
}
#login-form input#login-button{
	text-transform:uppercase;
	float:right;
	margin-top:10px;
	color:#DDD;
}
div#remember-me{
	float:left;
	width:300px;
	margin-top:16px;
}
div#remember-me a{
	color:#000;
	padding-right:10px;
	font-weight:bold;
	font-size:0.75em;
}
#login-bottom{
border-top: 2px dotted #BBB;
padding: 3px;
}
input.submit {
background-color: #111;
}
.submit::selection {
background: transparent;
}
input.submit.large {
padding: 8px 14px 9px;
font-size: 14px;
}
input.submit.round {
border:5px;
border-radius:5px;
-moz-border-radius:5px;
webkit-border-radius:5px;
}
</style>
</head> 
<body style="background:#FEFEFE url('img/bg.jpg') repeat-x;">
<form action="loginsubmit.php" method="post" id="login-form">
     <div id="login-inner">
         <div id="wrapper">
             <p>Administration Login</p>
         </div>
         <div class="field-separator">
             <label for="login">Login</label>
             <input type="text" name="login" value="" id="login" class="txt" />
         </div>
         <div class="field-separator">
             <label for="password">Password</label>
             <input type="password" name="password" value="" id="password" class="txt" />
         </div>
         <div id="login-bottom">
              <div id="remember-me">
                 <a href="#">Remember Me</a>|
                 <a href="#">Forgot Password</a>
			  </div>
             <input type="submit" name="enter" value="Enter" class="submit large round" id="login-button" />
             <div style="clear: both"></div>
         </div>
     </div>
</form>
</body>
</html>

//loginsubmit.php
<?php
$conn = new mysqli('localhost','root','','testingdb');
if ($conn->connect_error) {
    die('Error : ('. $conn->connect_errno .') '. $conn->connect_error);
}
$username = $_POST['login'];
$pass = $_POST['password'];
$sqlc="SELECT * FROM users WHERE username = '$username' AND password = '$pass'";
if ($rsdc=mysqli_query($conn,$sqlc)){
	$total=mysqli_num_rows($rsdc);
	  if ($total == '1') {
		  echo'<h1>You are a validated user.</h1>';
	  }else{
		echo'<h1>Sorry, your credentials are not valid, Please try again.</h1>';	
	  }		
}	
?>

Sunday, December 9, 2018

Create a Tabbed Content With jQuery And CSS

Create a Tabbed Content With jQuery And CSS
<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create a Tabbed Content With jQuery And CSS</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("a.tab").click(function () {
  $(".active").removeClass("active");
  $(this).addClass("active");
  $(".content").slideUp();
  var content_show = $(this).attr("title");
  $("#"+content_show).slideDown();
  return false
 });
});
</script>
</head>
<body>
<div id="tabbed_box_1">
 <div class="tabbed_area">
	<ul class="tabs">
         <li><a href="#" title="content_1" class="tab active">Popular</a></li>
         <li><a href="#" title="content_2" class="tab">Latest</a></li>
         <li><a href="#" title="content_3" class="tab">Comments</a></li>
     </ul>
     <div id="content_1" class="content">
      <ul>
          <li><a href="">Testing The Elements <small>January 11, 2010</small></a></li>
          <li><a href="">Testing Some Boxes <small>January 11, 2010</small></a></li>
          <li><a href="">Image in a post<small>January 11, 2010</small></a></li>
          <li><a href="">Sed tincidunt augue et nibh <small>November 11, 2011</small></a></li>
          <li><a href="">Morbi rhoncus arcu egestas erat <small>December 11, 2011</small></a></li>
          <li><a href="">Web Development <small>December 18, 2011</small></a></li>
		</ul>
     </div>
	 <div id="content_2" class="content">
      <ul>
          <li><a href="">Image in a post <small>January 11, 2010</small></a></li>
          <li><a href="">Testing The Elements<small>January 11, 2010</small></a></li>
          <li><a href="">Testing Some Boxes<small>January 11, 2010</small></a></li>
          <li><a href="">Lobortis tellus diam <small>January 11, 2010</small></a></li>
          <li><a href="">This is another featured post<small>January 7, 2011</small></a></li>
          <li><a href="">Testing The Elements<small>January 20, 2011</small></a></li>
		</ul>
     </div>
	 <div id="content_3" class="content">
      <ul>
          <li><a href="">admin: Looks like the Old Course at St. Andrews!...</a></li>
          <li><a href="">admin: Very nice boxes!...</a></li>
          <li><a href="">admin: And another threaded reply!...</a></li>
          <li><a href="">admin: This is a threaded reply!...</a></li>
          <li><a href="">admin: And this is a third comment with some lorem ipsum!...</a></li>
		</ul>
     </div>
 </div>
</div> 

<style>
body {
background-position:top center;
background-color:#EBE9E1;
margin:40px;
}
#tabbed_box_1 {
margin: 0px auto 0px auto;
width:300px;
}
.tabbed_area {
	border:2px solid #E6E6E6;
	background-color:#F5F4F0;
	padding:8px;
	border-radius: 8px; /*w3c border radius*/
	box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
	-moz-border-radius: 8px; /* mozilla border radius */
	-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */
	background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */
	-webkit-border-radius: 8px; /* webkit border radius */
	-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */
	background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* webkit gradient background */
}
ul.tabs {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}
ul.tabs li {
list-style:none;
display:inline;
}
ul.tabs li a {
	background-color:#EBE9E1;
	color:#000000;
	padding:8px 14px 8px 14px;
	text-decoration:none;
	font-size:9px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-transform:uppercase;
	border:1px solid #FFFFFF;
	background-position:bottom;
}
ul.tabs li a:hover {
background-color:#E4E3DD;
border-color:#FFFFFF;
}
ul.tabs li a.active {
	background-color:#ffffff;
	color:#282e32;
	border:1px solid #EBE9E1;
	border-bottom: 1px solid #ffffff;
	background-image:url(tab_on.jpg);
	background-repeat:repeat-x;
	background-position:top;
}
.content {
	background-color:#ffffff;
	padding:10px;
	border:1px solid #EBE9E1; 
	font-family:Arial, Helvetica, sans-serif;
	background-image:url(content_bottom.jpg);
	background-repeat:repeat-x;
	background-position:bottom;
}
#content_2, #content_3 { display:none; }
.content ul {
	margin:0px;
	padding:0px 0px 0px 0px;
}
.content ul li {
	list-style:none;
	border-bottom:1px solid #d6dde0;
	padding-top:15px;
	padding-bottom:15px;
	font-size:13px;
}
.content ul li:last-child {
border-bottom:none;
}
.content ul li a {
	text-decoration:none;
	color:#3e4346;
}
.content ul li a small {
	color:#8b959c;
	font-size:9px;
	text-transform:uppercase;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	position:relative;
	left:4px;
	top:0px;
}
.content ul li a:hover {
color:#a59c83;
}
.content ul li a:hover small {
color:#baae8e;
}
</style>
</body>
</html>

Sunday, July 29, 2018

Create a modal box jquery

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create a modal box jquery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	$('#popupmodal a').bind('click',function(e){
	var $this = $(this);
	$('#overlay').show();
	if(!$('#modal').is(':visible'))
		$('#modal').css('left','-260px')
	   .show()
	   .stop()
	   .animate({'left':'50%'}, 600);
	   e.preventDefault(); //default click prevented
	});

	//clicking on the cross hides the dialog
	$('#modal .close').bind('click',function(){
	   $('#modal').stop()
	   .animate({'left':'150%'}, 600, function(){
	   $(this).hide();
	   $('#overlay').hide();
	   });
	});
});
</script>
</head>
<body>
<div id="overlay" class="overlay" style="display:none;"></div>
<div id="modal" class="modal" style="display:none;">
	<span class="close"></span>
	<h2><img src="img/security.png"/>Login</h2>
	<div class="contents">
	<h1>Login[Quick Form Processing]</h1>
	<form action="" method="POST">
	<p><label style="display: block;">Username:</label><input class="text" type="text" name="username" /></p>
	<p><label style="display: block;">Password:</label><input class="text" type="password" name="password" /></p>
	<p><button class="button" name="login" type="submit">Login</button></p>
	</form>
	<p><a href="#">Forgot password?</a></p>
	</div>
</div>
<div id="popupmodal" style="text-align:center;margin:100px 0px 20px 0px">
	<a href="#"><h1>Click here to popup Login Modal</h1></a>
</div>

<style>
*{
margin:0;
padding:0;
}
body{
font-family:"Myriad Pro",Arial, Helvetica, sans-serif;
overflow-x:hidden;
}
.modal{
position:absolute;
top:25%;
width:450px;
height:300px;
margin-left:-250px;
z-index:9999;
color:#fff;
text-shadow:1px 1px 1px #000;
border:1px solid #303030;
background-color:#212121;
-moz-box-shadow:0px 0px 10px #000;
-webkit-box-shadow:0px 0px 10px #000;
box-shadow:0px 0px 10px #000;
}
.modal h2{
font-weight:100;
padding:5px 0px 5px 5px;
margin:5px;
background-color:#111;
border:1px solid #272727;
}
.modal h2 img{
float:left;
width:28px;
margin-right:10px;
-moz-box-shadow:0px 0px 4px #000;
-webkit-box-shadow:0px 0px 4px #000;
box-shadow:0px 0px 4px #000;
}
span.close{
background:#000 url(img/delete00.png) no-repeat center center;
cursor:pointer;
height:25px;
width:25px;
position:absolute;
right:12px;
top:12px;
cursor:pointer;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
opacity:0.5;
}
span.close:hover{
opacity:1.0;
}
.overlay{
position:fixed;
z-index:999;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:#000;
opacity:0.7;
}
.contents {
padding:10px 10px 10px 45px;
}
.button{
display: inline-block;
float:right;
padding: 4px 10px;
background-color: #1951A5;
color:#fff;
margin:20px;
font-size:12px;
letter-spacing:1px;
text-shadow:1px 1px 1px #011c44;
text-transform:uppercase;
text-decoration: none;
border:1px solid #4c7ecb;
outline:none;
background-image:
-moz-linear-gradient(
top,
rgba(255,255,255,0.25),
rgba(255,255,255,0.05)
);
background-image:
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgba(255,255,255,0.25)),
color-stop(1, rgba(255,255,255,0.05))
);
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.button:hover{
color: #011c44;
text-shadow: 1px 1px 1px #ccdffc;
}
.button:active{
margin-top:21px;
}
h1{font-weight:normal;font-size:20px;color:#aaaaaa;margin:10 0 10px 0;}
p{font-size: 16px;color: #dedede;margin-top:10px;}
a {color:#729e01;text-decoration:none;}
a:hover{color:#dedede;}
input.text{ border:#ccc 1px solid;-moz-border-radius:7px; -webkit-border-radius:7px;font-size: 20px;width:300px;padding-left:5px;}
</style>
</body>
</html>

Sunday, July 22, 2018

Jquery Notification Boxes

Jquery Notification Boxes

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Jquery Notification Boxes</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
   $('.notification').hover(function() {
     $(this).css('cursor','pointer');
    }, function() {
     $(this).css('cursor','auto');
   });
   $('.notification span').click(function() {
                $(this).parents('.notification').fadeOut(800);
            });
   
   $('.notification').click(function() {
                $(this).fadeOut(800);
            });
   
});
</script>
</head>

<body>
 <h1>Notification Boxes</h1>
    <div class="notification success">
        <span></span>
        <div class="text">
         <p><strong>Success!</strong> This is a success notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
        </div>
    </div>
 
    <div class="notification warning">
        <span></span>
        <div class="text">
         <p><strong>Warning!</strong> This is a warning notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
     </div>
    </div>
 
    <div class="notification tip">
        <span></span>
        <div class="text">
         <p><strong>Quick Tip!</strong> This is a quick tip notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
     </div>
    </div> 
 
 <div class="notification error">
        <span></span>
        <div class="text">
         <p><strong>Error!</strong> This is a error notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
        </div>
    </div>
    
     <div class="notification secure">
        <span></span>
        <div class="text">
         <p><strong>Secure Area!</strong> This is a secure area notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
     </div>        
    </div>
    
     <div class="notification info">
        <span></span>
        <div class="text">
         <p><strong>Info!</strong> This is a info notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
     </div>
    </div>
    
    <div class="notification message">
        <span></span>
        <div class="text">
         <p><strong>Message!</strong> This is a message notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
     </div>
    </div>
    
    <div class="notification download">
        <span></span>
        <div class="text">
         <p><strong>Download!</strong> This is a download notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
     </div>
    </div>
   
    <div class="notification purchase">
        <span></span>
        <div class="text">
         <p><strong>Purchase!</strong> This is a purchase notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
        </div>
    </div>
    
    <div class="notification print">
        <span></span>
        <div class="text">
         <p><strong>Print!</strong> This is a print notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
     </div>
    </div>
 
</body>
</html>

//css/style.css
body {
 margin: 70px;
 padding: 0;
 background: #e5e5e5;
}

#new {
 margin-bottom: 20px; 
}

h1 {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 18px;
 font-style: normal;
 font-weight: bold;
 color: #323232;
 margin: 50px;
}
/*NOTIFICATION BOX - NO DESCRIPTION */
.notification {
 min-height: 70px;
 width: 580px;
 display: block;
 position: relative;
 /*Border Radius*/
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px; 
 /*Box Shadow*/
 -moz-box-shadow: 2px 2px 2px #cfcfcf;
 -webkit-box-shadow: 2px 2px 4px #cfcfcf;
 box-shadow: 2px 2px 2px #cfcfcf;
 margin-bottom: 30px;
}
.notification span {
 background: url(../images/close.png) no-repeat right top;
 display: block;
 width: 19px;
 height: 19px;
 position: absolute;
 top:-9px;
 right: -8px;
}
.notification .text {
 overflow: hidden;
}
.notification p {
 width: 500px; 
 font-family: Arial, Helvetica, sans-serif;
 color: #323232;
 font-size: 14px;
 line-height: 21px;
 text-align: justify;
 float: right;
 margin-right: 15px;
 /* TEXT SHADOW */
  text-shadow: 0px 0px 1px #f9f9f9;
}

/*SUCCESS BOX*/
.success {
 border-top: 1px solid #edf7d0;
 border-bottom: 1px solid #b7e789;
 /*Background Gradients*/
 background: #dff3a8;
 background: -moz-linear-gradient(top,#dff3a8,#c4fb92);
 background: -webkit-gradient(linear, left top, left bottom, from(#dff3a8), to(#c4fb92));
}
.success:before {
 content: url(../images/success.png);
 float: left;
 margin: 23px 15px 0px 15px;
}
.success strong {
 color: #61b316;
 margin-right: 15px;
}

/*WARNING BOX*/
.warning {
 border-top: 1px solid #fefbcd;
 border-bottom: 1px solid #e6e837;
 /*Background Gradients*/
 background: #feffb1;
 background: -moz-linear-gradient(top,#feffb1,#f0f17f);
 background: -webkit-gradient(linear, left top, left bottom, from(#feffb1), to(#f0f17f));
}
.warning:before {
 content: url(../images/warning.png);
 float: left;
 margin: 15px 15px 0px 25px;
}
.warning strong {
 color: #e5ac00;
 margin-right: 15px;
}

/*QUICK TIP BOX*/
.tip {
 border-top: 1px solid #fbe4ae;
 border-bottom: 1px solid #d9a87d;
 /*Background Gradients*/
 background: #f9d9a1;
 background: -moz-linear-gradient(top,#f9d9a1,#eabc7a);
 background: -webkit-gradient(linear, left top, left bottom, from(#f9d9a1), to(#eabc7a));
}
.tip:before {
 content: url(../images/tip.png);
 float: left;
 margin: 20px 15px 0px 15px;
}
.tip strong {
 color: #b26b17;
 margin-right: 15px;
}
/*ERROR BOX*/
.error {
 border-top: 1px solid #f7d0d0;
 border-bottom: 1px solid #c87676;
 /*Background Gradients*/
 background: #f3c7c7;
 background: -moz-linear-gradient(top,#f3c7c7,#eea2a2);
 background: -webkit-gradient(linear, left top, left bottom, from(#f3c7c7), to(#eea2a2));
}
.error:before {
 content: url(../images/error.png);
 float: left;
 margin: 20px 15px 0px 15px;
}
.error strong {
 color: #b31616;
 margin-right: 15px;
}
/*SECURE AREA BOX*/
.secure {
 border-top: 1px solid #efe0fe;
 border-bottom: 1px solid #d3bee9;
 /*Background Gradients*/
 background: #e5cefe;
 background: -moz-linear-gradient(top,#e5cefe,#e4bef9);
 background: -webkit-gradient(linear, left top, left bottom, from(#e5cefe), to(#e4bef9));
}
.secure:before {
 content: url(../images/secure.png);
 float: left;
 margin: 18px 15px 0px 15px;
}
.secure strong {
 color: #6417b2;
 margin-right: 15px;
}
/*INFO BOX*/
.info {
 border-top: 1px solid #f3fbff;
 border-bottom: 1px solid #bedae9;
 /*Background Gradients*/
 background: #e0f4ff;
 background: -moz-linear-gradient(top,#e0f4ff,#d4e6f0);
 background: -webkit-gradient(linear, left top, left bottom, from(#e0f4ff), to(#d4e6f0));
}
.info:before {
 content: url(../images/info.png);
 float: left;
 margin: 18px 15px 0px 21px;
}
.info strong {
 color: #177fb2;
 margin-right: 15px;
}
/*MESSAGE BOX*/
.message {
 border-top: 1px solid #f4f4f4;
 border-bottom: 1px solid #d7d7d7;
 
 /*Background Gradients*/
 background: #f0f0f0;
 background: -moz-linear-gradient(top,#f0f0f0,#e1e1e1);
 background: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#e1e1e1));
}
.message:before {
 content: url(../images/message.png);
 float: left;
 margin: 25px 15px 0px 15px;
}
.message strong {
 color: #323232;
 margin-right: 15px;
}
/*DONWLOAD BOX*/
.download {
 border-top: 1px solid #ffffff;
 border-bottom: 1px solid #eeeeee;
 
 /*Background Gradients*/
 background: #f7f7f7;
 background: -moz-linear-gradient(top,#f7f7f7,#f0f0f0);
 background: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#f0f0f0));
}

.download:before {
 content: url(../images/download.png);
 float: left;
 margin: 16px 15px 0px 18px;
}

.download strong {
 color: #037cda;
 margin-right: 15px;
}

/*PURCHASE BOX*/

.purchase {
 border-top: 1px solid #d1f7f8;
 border-bottom: 1px solid #8eabb1;
 
 /*Background Gradients*/
 background: #c4e4e4;
 background: -moz-linear-gradient(top,#c4e4e4,#97b8bf);
 background: -webkit-gradient(linear, left top, left bottom, from(#c4e4e4), to(#97b8bf));
}

.purchase:before {
 content: url(../images/purchase.png);
 float: left;
 margin: 19px 15px 0px 15px;
}

.purchase strong {
 color: #426065;
 margin-right: 15px;
}

/*PRINT BOX*/

.print {
 border-top: 1px solid #dde9f3;
 border-bottom: 1px solid #8fa6b2;
 
 /*Background Gradients*/
 background: #cfdde8;
 background: -moz-linear-gradient(top,#cfdde8,#9eb3bd);
 background: -webkit-gradient(linear, left top, left bottom, from(#cfdde8), to(#9eb3bd));
}

.print:before {
 content: url(../images/print.png);
 float: left;
 margin: 19px 15px 0px 15px;
}

.print strong {
 color: #3f4c6b;
 margin-right: 15px;
}

Download Source Code and Images

Sunday, July 1, 2018

Create Contact Form (CSS, JQuery & AJAX)

Create Contact Form (CSS, JQuery & AJAX)

Demonstration how to create a css form contact form and jquery ajax

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create Contact Form (CSS, JQuery & AJAX)</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript">                                     
$(document).ready(function(){
 $("form").submit(function(){ 
  var str = $("form").serialize();
  $.ajax({
  type: "POST",
  url: "contacts.php",
  data: str,
  success: function(msg){ 
    if(msg == 'OK')
    {
     $("#note").html('<div class="notification_ok">Your message has been sent. Thank you!</div>');
     $("#fields").hide();
    }else{
     $("#note").html(msg);
    }
   }
   });
  return false;
 });
});
</script>
</head>
<body>
<div id="main">
<h2>Contact Form (JQuery & AJAX)</h2>
<div id="note"></div>
<form action="">  
   <fieldset><legend>Contact form</legend>
    <p>
     <label for="name">Name</label>
     <input type="text" name="name" size="30" />
    </p>
 <p>
     <label for="email">Email</label>
     <input type="text" name="email" size="30" />
    </p>
    <label for="subject">Subject</label>
     <input type="text" name="subject" size="30" />
    </p>             
    <p>
     <label for="message">Message</label>
     <textarea name="message" rows="10" cols="30"></textarea>
    </p>       
    <p class="submit">
     <button type="submit" name="submit">Send Message</button>
    </p>    
 </fieldset>
</form> 
</div>
<style>
body{
 background:#fbf9ee;
    font:80% Trebuchet MS, Arial, Helvetica, Sans-Serif;
 color:#333;
}
.notification_ok
{
border: 1px #567397 solid;
height: auto;padding:10px;
width: 90%
padding: 8px;
background: #f5f9fd;
text-align: center;
-moz-border-radius: 5px;
}
.notification_error
{
border: 1px solid #A25965;
height: auto;padding:10px;
width: 90%;
padding: 4px;
background: #F8F0F1;
text-align: left;
-moz-border-radius: 5px;
}
#main{
 float:left;
 display:inline;
 width:610px;
 margin-left:2px;
 padding-bottom:1em;
 }                
 form{
  margin:1.5em 0;
  padding-top:.5em;
  }
 fieldset{
  margin:0;
  padding:0;
  border:none;
  }  
 legend{
  display:none;
  }  
 label{
  float:left;
  width:120px;
  }
 input, textarea{
  width:250px;
  border:1px solid #dbd3b6;
  padding:5px;
  }  
 textarea{
  height:120px;
  overflow:auto;
  }     
 form p{
  clear:both; 
  margin:0;
  padding:8px 0;
  }
 button{
  border:none;
  padding:5px 15px;
  margin:0;
  float:left;
  background:#2c728a;
  color:#fff;
  font-weight:bold;
  font-size:15px;
  cursor:pointer;
  margin-left:120px;
  }         
</style>
</body>
</html>

<?php
//contacts.php
function ValidateEmail($email)
{
 $regex = "([a-z0-9_\.\-]+)". # name
 "@". # at
 "([a-z0-9\.\-]+){2,255}". # domain & possibly subdomains
 "\.". # period
 "([a-z]+){2,10}"; # domain extension 
 $eregi = eregi_replace($regex, '', $email);
 return empty($eregi) ? true : false;
}
$post = (!empty($_POST)) ? true : false;
if($post)
{
 $name = stripslashes($_POST['name']);
 $email = trim($_POST['email']);
 $subject = stripslashes($_POST['subject']);
  $message = htmlspecialchars($_POST['message']);
  $error = '';
  // Check name
  if(!$name)
  {
   $error .= 'Please enter your name.<br />';
  }
   // Check email
  if(!$email)
  {
   $error .= 'Please enter an e-mail address.<br />';
  }
   if($email && !ValidateEmail($email))
  {
   $error .= 'Please enter a valid e-mail address.<br />';
  }
   // Check message (length)
  if(!$message || strlen($message) < 15)
  {
   $error .= "Please enter your message. It should have at least 15 characters.<br />";
  }
   if(!$error){
    echo 'OK';
  } else{
   echo '<div class="notification_error">'.$error.'</div>';
  }
} 
?>

Friday, June 29, 2018

Create Contact Us Form Validate fields using javascript

http://farm6.static.flickr.com/5078/5884241163_8224f896c4_z.jpg

Create Contact Us Form Validate fields using javascript

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create Contact Us Form Validate fields using javascript</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</head>
<body>
<style>
#main{
float:left;
display:inline;
width:470px;
margin-left:55px;
}
form{
 margin:1em 0;
 }
fieldset{
 border:none;
 margin:0;
 background:#f1f1f1;
 border:5px solid #e7e7e7;
 padding:1em 15px; 
 } 
legend{
 display:none;
 } 
label{
 float:left;
 clear:both;
 width:120px;
 margin-right:10px;
 margin-top:5px;
 text-align:right;
 }
input, textarea{
 width:250px;
 border:1px solid #ccc;
 padding:5px;
 margin:5px 0;
 } 
textarea{
 height:80px;
 overflow:auto;
 }    
form p{
 clear:both;
 margin:0;
 }
form h3{
 margin:1em 0 .5em 0;
 font-size:25px;
 }          
.submit{
 text-align:right; 
 }
span.error{
 display:block;
 color:#a50000;
 font-weight:bold;
 margin-left:130px;
 }
</style>
<script>
this.form = function(){
 this.validate = function(name, email, message){
  $("span.error").remove();
  var valid = true;
  //name
  if(name == "") {
   error($("#name"),"Please tell us your name.")
   valid = false;
  };
  //email
  if(!checkEmail(email)) {
   error($("#email"),"We need a valid email address.")
   valid = false;
  }; 
  //messgae
  if(message == "") {
   error($("#message"),"Please write a message.")
   valid = false;
  };   
  return valid;
 };
 this.checkEmail = function(str){
  var regEx = /^[^@]+@[^@]+.[a-z]{2,}$/;
  return (str.search(regEx) != -1);
 };
 this.error = function(obj,text){
 var parent = $(obj).parent();
 parent.append("<span class=\"error\">"+ text +"</span>");
 $("span.error",parent).hide().show("fast");
 };
 $("#contactForm button").click(function(){              
 var name = $("#name").val();
 var email = $("#email").val();  
 var message = $("#message").val();    
 if(validate(name, email, message)) return true;
 return false;
 });
};
this.init = function() {
 form();
};
$(document).ready(function(){
 init();
});
</script>
<div id="main">
 <h2>Contact us</h2>
 <p>Nunc volutpat nisi nec leo. Fusce accumsan, mi ac posuere rhoncus,
 arcu orci tristique leo, vitae consequat.</p>
 <form id="contactForm" action="send.php" method="post">
 <fieldset><legend>Contact form</legend>
   <p>
    <label for="name">Name</label>
    <input type="text" name="name" id="name" size="30" />
   </p>
   <p>
    <label for="email">Email</label>
    <input type="text" name="email" id="email" size="30" />
   </p>            
   <p>
    <label for="message">Message</label>
    <textarea name="message" id="message" rows="10" cols="30"></textarea>
   </p>  
  <p class="submit">
   <button type="submit">Send</button>
  </p>
 </fieldset>  
 </form>
</div> 
</body>
</html>

//sent.php
<p><h1>Email Succesfully sent</h1></p>

Friday, April 21, 2017

Create Loader Animation with CSS

Create Loader Animation with CSS

<!DOCTYPE HTML>
<html>
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title> Loader Animation with CSS</title>
        <style type="text/css">
h2{font-size: 33px;margin-bottom: 10px;}
.loader {
    border-top: 16px solid #4285F4;
    border-right: 16px solid #EA4335;
    border-bottom: 16px solid #FBBC05;
    border-left: 16px solid #34A853;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    -webkit-animation: rotate 2s linear infinite;
    animation: rotate 2s linear infinite;
}
@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@-webkit-keyframes rotate {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}


.loader-container {
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 240px;
    height: 240px;
    float: left;
    position: relative;
    overflow: hidden;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.loader2, .loader2:before, .loader2:after {
    background: #000000;
    -webkit-animation: animate 1s infinite ease-in-out;
    animation: animate 1s infinite ease-in-out;
    width: 1em;
    height: 4em;
}
.loader2 {
    color: #000000;
    text-indent: -9999em;
    margin: 88px auto;
    position: relative;
    font-size: 11px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}
.loader2:before, .loader2:after {
    position: absolute;
    top: 0;
    content: '';
}
.loader2:before {
    left: -1.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}
.loader2:after {
    left: 1.5em;
}
@-webkit-keyframes animate {
    0%, 80%, 100% {
        box-shadow: 0 0;
        height: 4em;
    }
    40% {
        box-shadow: 0 -2em;
        height: 5em;
    }
}
@keyframes animate {
    0%, 80%, 100% {
          box-shadow: 0 0;
          height: 4em;
    }
    40% {
        box-shadow: 0 -2em;
        height: 5em;
    }
}
</style>
</head>

<body>
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <div class="">
             <h2>Loader Style 1</h2>
                <div class="loader"></div>
                
                <h2 style="margin-bottom:0px;">Loader Style 2</h2>
                <div class="loader-container">
                    <div class="loader2"></div>
                </div>
            </div>
  </div>
    </div>
</div>
</body>
</html>

Social Media Floating Sidebar with CSS

Social Media Floating Sidebar with CSS

<!DOCTYPE HTML>
<html>
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Social Media Floating Sidebar with CSS</title>
<style>  
body { background-color: #02c54c ;}
/* Sticky Social Icons */
.sticky-container{ padding:0px; margin:0px; position:fixed; right:-130px;top:230px; width:210px; z-index: 1100;}
.sticky li{list-style-type:none;background-color:#fff;color:#efefef;height:43px;padding:0px;margin:0px 0px 1px 0px; -webkit-transition:all 0.25s ease-in-out;-moz-transition:all 0.25s ease-in-out;-o-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; cursor:pointer;}
.sticky li:hover{margin-left:-115px;}
.sticky li img{float:left;margin:5px 4px;margin-right:5px;}
.sticky li p{padding-top:5px;margin:0px;line-height:16px; font-size:11px;}
.sticky li p a{ text-decoration:none; color:#2C3539;}
.sticky li p a:hover{text-decoration:underline;}
/* Sticky Social Icons */
</style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <div class="sticky-container">
                <ul class="sticky">
                    <li>
                        <img src="img/facebook-circle.png" width="32" height="32">
                        <p><a href="#" target="_blank">Like Us on<br>Facebook</a></p>
                    </li>
                    <li>
                        <img height="32" src="img/twitter-circle.png" width="32" height="32">
                        <p><a href="#" target="_blank">Follow Us on<br>Twitter</a></p>
                    </li>
                    <li>
                        <img src="img/gplus-circle.png" width="32" height="32">
                        <p><a href="#" target="_blank">Follow Us on<br>Google+</a></p>
                    </li>
                    <li>
                        <img src="img/linkedin-circle.png" width="32" height="32">
                        <p><a href="#" target="_blank">Follow Us on<br>LinkedIn</a></p>
                    </li>
                    <li>
                        <img src="img/youtube-circle.png" width="32" height="32">
                        <p><a href="#" target="_blank">Subscribe on<br>YouYube</a></p>
                    </li>
                    <li>
                        <img src="img/pin-circle.png" width="32" height="32">
                        <p><a href="#" target="_blank">Follow Us on<br>Pinterest</a></p>
                    </li>
                </ul>
            </div>
  </div>
    </div>
</div>
     </body>
</html>

Saturday, January 7, 2017

CSS target desktop, tablet and mobile?

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Saturday, August 13, 2016

Notification Box, Alert Boxes using Jquery CSS

Notification Box, Alert Boxes using Jquery CSS

<!DOCTYPE html>
<html lang="en">
<head>
<title>Notification Box, Alert Boxes using Jquery CSS</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
div.alert-message {
 display: block;
 padding: 13px 12px 12px;
 font-weight: bold;
 font-size: 14px;
 color: white;
 background-color: #2ba6cb;
 border: 1px solid rgba(0, 0, 0, 0.1);
 margin-bottom: 12px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 -ms-border-radius: 3px;
 -o-border-radius: 3px;
 border-radius: 3px;
 text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
 position: relative;
}
div.alert-message .box-icon {
 display: block;
 float: left;
 background-image: url('images/icon.png');
 width: 30px;
 height: 25px;
 margin-top: -2px;
 background-position: -8px -8px;
}
div.alert-message p {
 margin: 0px;
}
div.alert-message.success {
 background-color: #5da423;
 color: #fff;
 text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
}
div.alert-message.success .box-icon {
 background-position: -48px -8px;
}
div.alert-message.warning {
 background-color: #e3b000;
 color: #fff;
 text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
}
div.alert-message.warning .box-icon {
 background-position: -88px -8px;
}
div.alert-message.error {
 background-color: #c60f13;
 color: #fff;
 text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
}
div.alert-message.error .box-icon {
 background-position: -128px -8px;
}
div.alert-message a.close {
 color: #333;
 position: absolute;
 right: 4px;
 top: -1px;
 font-size: 17px;
 opacity: 0.2;
 padding: 4px;
}
div.alert-message a.close:hover, div.alert-box a.close:focus {
 opacity: 0.4;
}
</style>
<!-- JavaScript Test Zone -->
<script type="text/javascript"> 
$(function(){   
 $(".alert-message").delegate("a.close", "click", function(event) {
   event.preventDefault();
   $(this).closest(".alert-message").fadeOut(function(event){
    $(this).remove();
   });
  });
});
  </script>
</head>
<body>
 <div class="panels">
        <div class="panel" id="panel-1">
          <div class="alert-message info">
            <div class="box-icon"></div>
            <p>This is an info box<a href="" class="close">×</a>
          </div>
          <div class="alert-message success">
            <div class="box-icon"></div>
            <p>This is a success box<a href="" class="close">×</a>
          </div>
          <div class="alert-message warning">
            <div class="box-icon"></div>
            <p>This is a warning box<a href="" class="close">×</a>
          </div>
          <div class="alert-message error">
            <div class="box-icon"></div>
            <p>This is an alert box<a href="" class="close">×</a>
          </div>
        </div>
  </div>
</body>
</html>

Friday, August 12, 2016

Cool Notification Messages With CSS3 & jQuery

Cool Notification Messages With CSS3 & jQuery

<!DOCTYPE html>
<html>
<head>
<title>Cool notification messages with CSS3 & Jquery</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
var myMessages = ['info','warning','error','success']; // define the messages types   
function hideAllMessages()
{
   var messagesHeights = new Array(); // this array will store height for each
  
   for (i=0; i<myMessages.length; i++)
   {
      messagesHeights[i] = $('.' + myMessages[i]).outerHeight();
      $('.' + myMessages[i]).css('top', -messagesHeights[i]); //move element outside viewport   
   }
}
function showMessage(type)
{
 $('.'+ type +'-trigger').click(function(){
    hideAllMessages();      
    $('.'+type).animate({top:"0"}, 500);
 });
}
$(document).ready(function(){
   // Initially, hide them all
   hideAllMessages();
   // Show message
   for(var i=0;i<myMessages.length;i++)
   {
   showMessage(myMessages[i]);
   }
   // When message is clicked, hide it
   $('.message').click(function(){     
      $(this).animate({top: -$(this).outerHeight()}, 500);
    });   
});       
</script>
<style>
body
{
   margin: 0;
   padding: 0;
   font: 12px Arial, Helvetica, sans-serif;
   background: #f1f1f1;
}
.message
{
  -webkit-background-size: 40px 40px;
  -moz-background-size: 40px 40px;
  background-size: 40px 40px;   
  background-image: -webkit-gradient(linear, left top, right bottom,
        color-stop(.25, rgba(255, 255, 255, .05)), color-stop(.25, transparent),
        color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .05)),
        color-stop(.75, rgba(255, 255, 255, .05)), color-stop(.75, transparent),
        to(transparent));
  background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
       transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
       transparent 75%, transparent);
  background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
       transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
       transparent 75%, transparent);
  background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
       transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
       transparent 75%, transparent);
  background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
       transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
       transparent 75%, transparent);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
       transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
       transparent 75%, transparent);
        
   -moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
   -webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);  
   box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
   width: 100%;
   border: 1px solid;
   color: #fff;
   padding: 15px;
   position: fixed;
   _position: absolute;
   text-shadow: 0 1px 0 rgba(0,0,0,.5);
   -webkit-animation: animate-bg 5s linear infinite;
   -moz-animation: animate-bg 5s linear infinite;
}
.info
{
   background-color: #4ea5cd;
   border-color: #3b8eb5;
}
.error
{
   background-color: #de4343;
   border-color: #c43d3d;
}  
.warning
{
   background-color: #eaaf51;
   border-color: #d99a36;
}
.success
{
   background-color: #61b832;
   border-color: #55a12c;
}
.message h3
{
   margin: 0 0 5px 0;              
}
.message p
{
   margin: 0;              
}
@-webkit-keyframes animate-bg
{
    from {
        background-position: 0 0;
    }
    to {
       background-position: -80px 0;
    }
}
@-moz-keyframes animate-bg 
{
    from {
        background-position: 0 0;
    }
    to {
       background-position: -80px 0;
    }
}
#trigger-list
{
   text-align: center;
   margin: 100px 0;
   padding: 0;
}
#trigger-list li
{
   display: inline-block;
   *display: inline;
   zoom: 1;
}
#trigger-list .trigger
{
   display: inline-block;
   background: #ddd;
   border: 1px solid #777;
   padding: 10px 20px;
   margin: 0 5px;
   font: bold 12px Arial, Helvetica;
   text-decoration: none;
   color: #333;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}
#trigger-list .trigger:hover
{
  background: #f5f5f5;
}
.centered
{
   text-align: center;
}
.twitter-follow-button
{
   position: relative;
   top: 7px;
}
</style>
</head>
<body>
<div class="info message">
   <h3>FYI, something just happened!</h3>
   <p>This is just an info notification message.</p>
</div>
<div class="error message">
   <h3>Ups, an error ocurred</h3>
   <p>This is just an error notification message.</p>

</div>
<div class="warning message">
   <h3>Wait, I must warn you!</h3>
   <p>This is just a warning notification message.</p>
</div>
<div class="success message">
   <h3>Congrats, you did it!</h3>
   <p>This is just a success notification message.</p>

</div>
<ul id="trigger-list">
   <li><a href="#" class="trigger info-trigger">Info</a></li>
   <li><a href="#" class="trigger error-trigger">Error</a></li>
   <li><a href="#" class="trigger warning-trigger">Warning</a></li>
   <li><a href="#" class="trigger success-trigger">Success</a></li>
</ul>
</body>
</html>

Friday, July 29, 2016

Fancy Tooltips using CSS3

Fancy Tooltips using CSS3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 Tooltips</title>
<style>
body {
 background:#fafafa;
}
.container {
 width: 800px;
 border: 1px solid #C4CDE0;
 border-radius: 2px;
 margin: 0 auto;
 height: 500px;
 background:#fff;
 padding-left:10px;
 margin-bottom:30px;
}
.css-tooltip-top,
.css-tooltip-bottom,
.css-tooltip-right,
.css-tooltip-left
 {
 position: relative !important;
 display: inline-block !important;
 text-decoration: none !important;    
 }
 
.css-tooltip-top span,
.css-tooltip-bottom span,
.css-tooltip-right span,
.css-tooltip-left span,
.css-tooltip-diagonal-right span,
.css-tooltip-diagonal-left span
 {
 min-width: 180px;
 font-family: arial, sans-serif !important;
 font-size: 13px !important;
 line-height: normal !important;
 text-align: left !important;
 padding: 10px 10px 12px 10px !important;
 visibility: hidden;
    opacity: 0;
 position: absolute;
 z-index: 9999999 !important;

 -webkit-transition-duration: 0.25s;
 -moz-transition-duration: 0.25s;
 -o-transition-duration: 0.25s;
 -ms-transition-duration: 0.25s;
 transition-duration: 0.25s;
 -webkit-transition-timing-function: cubic-bezier(0.35,0,0.35,1);
 -moz-transition-timing-function: cubic-bezier(0.35,0,0.35,1);
 -o-transition-timing-function: cubic-bezier(0.35,0,0.35,1);
 -ms-transition-timing-function: cubic-bezier(0.35,0,0.35,1);
 transition-timing-function: cubic-bezier(0.35,0,0.35,1);
 }

.css-tooltip-top span:before,
.css-tooltip-bottom span:before,
.css-tooltip-right span:before,
.css-tooltip-left span:before,
.css-tooltip-diagonal-right span:before,
.css-tooltip-diagonal-left span:before
 {
 content: "";
 display: block;
 width: 0px;
 height: 0px;
 position: absolute;
 }

/* Tool tip Top */
.css-tooltip-top span
 {
 left: -10px;
 bottom: 100%;
 margin-bottom: 30px;
 
 -webkit-transition-property: opacity, margin-bottom, visibility;
 -moz-transition-property: opacity, margin-bottom, visibility;
 -o-transition-property: opacity, margin-bottom, visibility;
 -ms-transition-property: opacity, margin-bottom, visibility;
 transition-property: opacity, margin-bottom, visibility;
 }
 
.css-tooltip-top span:before
 {
    border-left: 8px solid transparent !important;
    border-right: 8px solid transparent !important;
 border-top: 8px solid #000;
 border-bottom: 0 !important;
 bottom: -8px;
 left: 15px;
 }

.css-tooltip-top:hover span
 { 
 margin-bottom: 10px; /* End Position */
 visibility: visible;
 opacity: 1;
 }

 
/* tooltip left
-------------------------------------------------------------- */

.css-tooltip-left span
 {
 right: 100%;
 top: -7px;
 margin-right: 35px;
 
 -webkit-transition-property: opacity, margin-right, visibility;
 -moz-transition-property: opacity, margin-right, visibility;
 -o-transition-property: opacity, margin-right, visibility;
 -ms-transition-property: opacity, margin-right, visibility;
 transition-property: opacity, margin-right, visibility;
 }
 
.css-tooltip-left span:before
 {
    border-left: 8px solid #000;
    border-right: 0 !important;
 border-top: 8px solid transparent !important;
 border-bottom: 8px solid transparent !important;
 top: 11px;
 right: -8px;
 }

.css-tooltip-left:hover span
 { 
 margin-right: 15px;
 visibility: visible;
 opacity: 1;
 }
 
/* tooltip right
-------------------------------------------------------------- */

.css-tooltip-right span
 {
 left: 100%;
 top: -7px;
 margin-left: 35px;

 -webkit-transition-property: opacity, margin-left, visibility;
 -moz-transition-property: opacity, margin-left, visibility;
 -o-transition-property: opacity, margin-left, visibility;
 -ms-transition-property: opacity, margin-left, visibility;
 transition-property: opacity, margin-left, visibility;
 }
 
.css-tooltip-right span:before {
    border-left: 0 !important;
    border-right: 8px solid #000;
 border-top: 8px solid transparent !important;
 border-bottom: 8px solid transparent !important;
 top: 11px;
 left: -8px;
 }

.css-tooltip-right:hover span
 { 
 margin-left: 15px;
 visibility: visible;
 opacity: 1;
 }
 
 
/*tooltip bottom
-------------------------------------------------------------- */

.css-tooltip-bottom span
 {
 left: -10px;
 top: 100%;
 margin-top: 30px;
 
 -webkit-transition-property: opacity, margin-top, visibility;
 -moz-transition-property: opacity, margin-top, visibility;
 -o-transition-property: opacity, margin-top, visibility;
 -ms-transition-property: opacity, margin-top, visibility;
 transition-property: opacity, margin-top, visibility;
 }
 
.css-tooltip-bottom span:before
 {
    border-left: 8px solid transparent !important;
    border-right: 8px solid transparent !important;
 border-top: 0 !important;
 border-bottom: 8px solid #000;
 top: -8px;
 left: 15px;
 }

.css-tooltip-bottom:hover span
 { 
 margin-top: 10px;
 visibility: visible;
 opacity: 1;
 }
 
/* Tooltip Color */
.color-blue span
 {
 color: #ffffff !important;
 
 background: #31598a;
 background: -moz-linear-gradient(top,  #37659d 0%, #31598a 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#37659d), color-stop(100%,#31598a)); 
 background: -webkit-linear-gradient(top,  #37659d 0%,#31598a 100%);
 background: -o-linear-gradient(top,  #37659d 0%,#31598a 100%);
 background: -ms-linear-gradient(top,  #37659d 0%,#31598a 100%);
 background: linear-gradient(top,  #37659d 0%,#31598a 100%);

 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 
 text-shadow: 0px 1px 0px rgba(0,0,0,0.4);
 }

.color-blue span:before
 {
 border-color: #31598a;
 }
 
.color-blue span:after
 {
 content: "";
 display: block;
 border-top: 1px solid #6591c3;
 position: absolute;
 left: 0px;
 top: 1px;
 width: 100%;
 height: 10px;
 
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 }
 
.color-green span
 {
 color: #ffffff !important;
 
 
 background: #206906; 
 background: -moz-linear-gradient(top,  #37790c 0%, #206906 100%); 
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#37790c), color-stop(100%,#206906)); 
 background: -webkit-linear-gradient(top,  #37790c 0%,#206906 100%); 
 background: -o-linear-gradient(top,  #37790c 0%,#206906 100%); 
 background: -ms-linear-gradient(top,  #37790c 0%,#206906 100%); 
 background: linear-gradient(top,  #37790c 0%,#206906 100%); 
 
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 
 
 text-shadow: 0px 1px 0px rgba(0,0,0,0.4);
 }


.color-green span:before
 {
 border-color: #206906;
 }
 

.color-green span:after
 {
 content: "";
 display: block;
 border-top: 1px solid #4f9c21;
 position: absolute;
 left: 0px;
 top: 1px;
 width: 100%;
 height: 10px;
 
 
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 }
 

.color-green span strong
 {
 background: #246407;
 border-bottom: 1px solid #205a06;
 }
 
/*orange*/

.color-orange span
 {
 color: #ffffff !important;
 
 
 background: #c34722; 
 background: -moz-linear-gradient(top,  #cb581f 0%, #c34722 100%); 
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cb581f), color-stop(100%,#c34722)); 
 background: -webkit-linear-gradient(top,  #cb581f 0%,#c34722 100%); 
 background: -o-linear-gradient(top,  #cb581f 0%,#c34722 100%); 
 background: -ms-linear-gradient(top,  #cb581f 0%,#c34722 100%); 
 background: linear-gradient(top,  #cb581f 0%,#c34722 100%);
 
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 
 
 text-shadow: 0px 1px 0px rgba(0,0,0,0.4);
 }


.color-orange span:before
 {
 border-color: #c34722;
 }
 

.color-orange span:after
 {
 content: "";
 display: block;
 border-top: 1px solid #e28266;
 position: absolute;
 left: 0px;
 top: 1px;
 width: 100%;
 height: 10px;
 
 
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 }
 

.color-orange span strong
 {
 background: #bf461a;
 border-bottom: 1px solid #ac3f17;
 }
 
 /*red*/

.color-red span
 {
 color: #ffffff !important;
 background: #b01c34; 
 background: -moz-linear-gradient(top,  #c01e38 0%, #b01c34 100%); 
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c01e38), color-stop(100%,#b01c34)); 
 background: -webkit-linear-gradient(top,  #c01e38 0%,#b01c34 100%); 
 background: -o-linear-gradient(top,  #c01e38 0%,#b01c34 100%); 
 background: -ms-linear-gradient(top,  #c01e38 0%,#b01c34 100%); 
 background: linear-gradient(top,  #c01e38 0%,#b01c34 100%); 
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 text-shadow: 0px 1px 0px rgba(0,0,0,0.4);
 }
.color-red span:before
 {
 border-color: #b01c34;
 }
.color-red span:after
 {
 content: "";
 display: block;
 border-top: 1px solid #e96e82;
 position: absolute;
 left: 0px;
 top: 1px;
 width: 100%;
 height: 10px;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 }
.color-red span strong
 {
 background: #b0182d;
 border-bottom: 1px solid #9d1628;
 }
</style>
</head>
<body>
<div class="container">
<p>
<a class="css-tooltip-bottom color-red"  target="_blank" href="#"><span>Tutorial101 laravel</span>Bottom tooltip</a>
</p>
<br />
<p>
<a class="css-tooltip-left color-green" href="#" target="_blank"><span>Tutorial101 codeignater</span>Left tooltip</a>
</p>
<br />
<p>
<a class="css-tooltip-right color-orange" target="_blank" href="#"><span>Tutorial101 Cakephp</span>Right tooltip</a>
</p>
</div>
</body>
</html>

Tuesday, May 12, 2015

CSS & HTML Mac Terminal shell look-alike

CSS and HTML Mac Terminal shell look-alike

<style>
.shell-wrap {
  width: 500px;
  margin: 100px auto 0 auto;
  box-shadow: 0 0 30px rgba(0,0,0,0.4);
 
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
 
.shell-top-bar {
  text-align: center;
  color: #525252;
  padding: 5px 0;
  margin: 0;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
  font-size: 0.85em;
  border: 1px solid #CCCCCC;
  border-bottom: none;
 
  -webkit-border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-topright: 3px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
 
  background: #f7f7f7; /* Old browsers */
  background: -moz-linear-gradient(top,  #f7f7f7 0%, #B8B8B8 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#B8B8B8)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #f7f7f7 0%,#B8B8B8 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #f7f7f7 0%,#B8B8B8 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #f7f7f7 0%,#B8B8B8 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #f7f7f7 0%,#B8B8B8 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#B8B8B8',GradientType=0 ); /* IE6-9 */
}
.shell-body {
  margin: 0;
  padding: 5px;
  list-style: none;
  background: #141414;
  color: #45D40C;
  font: 0.8em 'Andale Mono', Consolas, 'Courier New';
  line-height: 1.6em;
 
  -webkit-border-bottom-right-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-radius-bottomright: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}
 
.shell-body li:before {
  content: '$';
  position: absolute;
  left: 0;
  top: 0;
}
.shell-body li {
  word-wrap: break-word;
  position: relative;
  padding: 0 0 0 15px;
}
</style>
<div class="shell-wrap">
  <p class="shell-top-bar">/Users/ednalan/Documents/websites/</p>
  <ul class="shell-body">
    <li>cd /Users/ednalan/Documents/websites/tutorial101.blogspot.com/git/css-shell/demo/</li>
    <li>cd ../../../../</li>
    <li>pwd</li>
    <li>/Users/ednalan/Documents/websites/</li>
  </ul>
</div>

Friday, October 25, 2013

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;
}

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 */
}

Monday, September 2, 2013

Create CSS3 Dropdown menu

Create CSS3 Dropdown menu

<style type="text/css">#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu {
  height: 49px;
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  background: #141414;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  border-bottom: 2px solid #0fa1e0;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  background: #141414;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  color: #ffffff;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 49px;
  padding: 0 20px;
  text-decoration: none;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul {
  float: left;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #0fa1e0;
  margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active a {
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  background: #070707;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
}
#cssmenu > ul > li:hover > a {
  background: #070707;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
  background: #0fa1e0;
  border-bottom: 1px dotted #6fc7ec;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
  background: #0c7fb0;
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #0c7fb0;
  border-bottom: 1px dotted #6db2d0;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #095c80;
}</style>
<div id='cssmenu'>
<ul>
   <li><a href='#'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub '><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
         <li class='has-sub '><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

Wednesday, August 21, 2013

CSS Drop Down Menu

CSS Drop Down Menu

Save image

<style type="text/css">
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  color: #ffffff;
  display: inline-block;
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  min-width: 35px;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 -1px 0 #333333;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li.active a {
  background: #646464 url(menu_assets/images/grad_dark.png) repeat-x left bottom;
  background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(100%, #4a4a4a));
  background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: -o-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: linear-gradient(to bottom, #646464 0%, #4a4a4a 100%);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#646464', endColorstr='#4a4a4a', GradientType=0);
  box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
  -moz-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
  -webkit-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
  filter: none;
}
#cssmenu > ul > li.active a:hover {
  background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(100%, #4a4a4a));
  background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: -o-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: linear-gradient(to bottom, #646464 0%, #4a4a4a 100%);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#646464', endColorstr='#4a4a4a', GradientType=0);
  filter: none;
}
#cssmenu > ul > li a {
  box-shadow: inset 0 0 0 1px #8a8a8a;
  -moz-box-shadow: inset 0 0 0 1px #8a8a8a;
  -webkit-box-shadow: inset 0 0 0 1px #8a8a8a;
  background: #4a4a4a url(images/grad_dark.png) repeat-x left top;
  background: -moz-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8a8a8a), color-stop(50%, #707070), color-stop(51%, #626262), color-stop(100%, #787878));
  background: -webkit-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  background: -o-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  background: -ms-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  background: linear-gradient(to bottom, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
  border-bottom: 1px solid #5d5d5d;
  border-top: 1px solid #5d5d5d;
  border-right: 1px solid #5d5d5d;
  line-height: 34px;
  padding: 0 35px;
  filter: none;
}
#cssmenu > ul > li a:hover {
  background: #8a8a8a url(images/grad_dark.png) repeat-x left bottom;
  background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(50%, #4a4a4a), color-stop(51%, #3b3b3b), color-stop(100%, #525252));
  background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  background: -o-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  background: linear-gradient(to bottom, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
  filter: none;
}
#cssmenu > ul > li:first-child a {
  border-radius: 5px 0 0 5px;
  -moz-border-radius: 5px 0 0 5px;
  -webkit-border-radius: 5px 0 0 5px;
  border-left: 1px solid #5d5d5d;
}
#cssmenu > ul > li:last-child a {
  border-radius: 0 5px 5px 0;
  -moz-border-radius: 0 5px 5px 0;
  -webkit-border-radius: 0 5px 5px 0;
}
#cssmenu .has-sub:hover ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  top: 36px;
  left: -1px;
  min-width: 100%;
  text-align: center;
  /* IE7 */

  *width: 100%;
}
#cssmenu .has-sub ul li {
  text-align: center;
}
#cssmenu .has-sub ul li a {
  border-top: 0 none;
  border-left: 1px solid #5d5d5d;
  display: block;
  line-height: 120%;
  padding: 9px 5px;
  text-align: center;
}
</style>
<div id='cssmenu'>
<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

Tutorial101

article

Saturday, December 15, 2018

Create A CSS Administrator Login Form Design

Sunday, December 9, 2018

Create a Tabbed Content With jQuery And CSS

Sunday, July 29, 2018

Create a modal box jquery

Sunday, July 22, 2018

Jquery Notification Boxes

Sunday, July 1, 2018

Create Contact Form (CSS, JQuery & AJAX)

Friday, June 29, 2018

Create Contact Us Form Validate fields using javascript

Friday, April 21, 2017

Create Loader Animation with CSS

Social Media Floating Sidebar with CSS

Saturday, January 7, 2017

CSS target desktop, tablet and mobile?

Saturday, August 13, 2016

Notification Box, Alert Boxes using Jquery CSS

Friday, August 12, 2016

Cool Notification Messages With CSS3 & jQuery

Friday, July 29, 2016

Fancy Tooltips using CSS3

Tuesday, May 12, 2015

CSS & HTML Mac Terminal shell look-alike

Friday, October 25, 2013

CSS3 Dropdown Navigation menu

Monday, October 7, 2013

CSS Buttons

Monday, September 2, 2013

Create CSS3 Dropdown menu

Wednesday, August 21, 2013

CSS Drop Down Menu

Related Post

Search This Blog

HOME

Category

Popular Posts