article

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

Saturday, December 15, 2018

Create A CSS Administrator Login Form Design

Create A CSS Administrator Login Form Design

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!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>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//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>';   
      }    
}  
?>

Posted by ednalan at 6:34 AM . Under .

Sunday, December 9, 2018

Create a Tabbed Content With jQuery And CSS

Create a Tabbed Content With jQuery And CSS
<!DOCTYPE html>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<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>

Posted by ednalan at 10:55 PM . Under , .

Sunday, July 29, 2018

Create a modal box jquery

Create a modal box jquery
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!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>

Posted by ednalan at 9:47 PM . Under , .

Sunday, July 22, 2018

Jquery Notification Boxes

Jquery Notification Boxes

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!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>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
//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
Posted by ednalan at 1:28 AM . Under , .

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









?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!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>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<?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>';
  }
}
?>

Posted by ednalan at 6:25 PM . Under , .

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











?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!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>
?
1
2
//sent.php
<p><h1>Email Succesfully sent</h1></p>

Posted by ednalan at 7:53 AM . Under , .

Friday, April 21, 2017

Create Loader Animation with CSS

Create Loader Animation with CSS
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!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>
Posted by ednalan at 10:20 PM . Under .

Social Media Floating Sidebar with CSS

Social Media Floating Sidebar with CSS
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!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>

Posted by ednalan at 5:34 PM . Under .

Saturday, January 7, 2017

CSS target desktop, tablet and mobile?

?
1
2
3
4
5
6
@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 */ }
Posted by ednalan at 7:33 PM . Under .

Saturday, August 13, 2016

Notification Box, Alert Boxes using Jquery CSS

Notification Box, Alert Boxes using Jquery CSS
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!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>
Posted by ednalan at 7:25 PM . Under , .

Friday, August 12, 2016

Cool Notification Messages With CSS3 & jQuery

Cool Notification Messages With CSS3 & jQuery
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!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>
Posted by ednalan at 7:15 PM . Under , .

Friday, July 29, 2016

Fancy Tooltips using CSS3

Fancy Tooltips using CSS3
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
<!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>
Posted by ednalan at 11:31 PM . Under .

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>
Posted by ednalan at 7:03 AM . Under .

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;
}
Posted by ednalan at 7:12 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 .

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>
Posted by ednalan at 8:34 AM . Under .

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>
Posted by ednalan at 1:30 AM . Under .
Subscribe to: Posts (Atom)

Related Post