Lưu Quang Triệu

Không ngừng sáng tạo thì sẽ không sợ bị diệt vong

Cài đặt và cấu hình SQL Server để kết nối từ xa qua Internet

Posted by millionking on April 7, 2015

Hệ quản trị cơ sở dữ liệu Microsoft SQL Server của Microsoft được đánh giá là một trong những hệ quản trị cơ sở dữ liệu tốt và mạnh nhất hiện nay. Nếu bạn là một nhà phát triển ứng dụng cũng như phát triển website trên môi trường Windows thì không thể không biết đến SQL Server.

Khi phát triển các ứng dụng dạng Desktop thì chúng ta thường không quan tâm và thậm chí có thể không cần biết đến tính năng hỗ trợ kết nối từ xa của SQL Server. Nhưng khi bạn phát triển các ứng dụng Web, hoặc các ứng dụng desktop đòi hỏi dữ liệu tập trung tức thì để phục vụ cho việc ra báo cáo mà chương trình thì lại cách xa nhau về mặt địa lý, thì bạn sẽ cần đến tính năng kết nối từ xa của SQL Server. Tính năng này có trên tất cả các phiên bản SQL Server.

Trong bài viết này, tôi thực hiện hướng dẫn cài đặt và cấu hình trên phiên bản SQL Server, các phiên bản khác việc thực hiện tương tự.

Sau khi hoàn thành bài hướng dẫn này:

 

Bạn có thể cài đặt SQL Server

Bạn có kết nối vào SQL Server cài trên máy tính của bạn từ bất kỳ máy tính nào có nối mạng Internet từ bất cứ đâu.

 

Các bước thực hiện

 

Cài đặt SQL Server

Cấu hình SQL Server để mở kết nối từ xa.

Tạo user kết nối

Cấu hình Firewall trên Server cho phép nhận kết nối đến qua cổng kết nối của SQL Server

Cấu hình Router cho phép kết nối đến thông qua cổng của kết nối SQL Server

Bước 1: Cài đặt SQL Server

 

Bước 2: Config SQL Server cho phép kết nối từ xa

 

Mục đích là kích hoạt tính năng cho phép kết nối từ xa của SQL Server và thiết lập cổng nghe (Listenning Port) cho SQL Server.

 

Vào Start -> All Programs -> Microsoft SQL Server  -> Configuration Tools -> SQL Server Configuration Manager

 

Ở menu bên trái, chọn vào mục SQL Server Services -> Bên phải tìm mục SQL Server (MSSQLSERVER) (chú ý đây là dịch vụ cơ bản của SQL Server, tên của nó tùy thuộc vào Instant của SQL mà bạn cài vào máy, của tôi là MSSQLSERVER, có thể Instant của bạn sẽ khác). Click phải vào và chọn Properties (xem hình)

 

 

Trong Tab Log On, click chọn vào Built-In Account, chọn vào Network Service như trong hình, Click OK.

 

 

Quay lại màn hình SQL Server Configuration Manager -> ở menu bên trái tiếp tục click vào mục SQL Server Network Configuration để mở ra menu con Protocols for MSSQLSERRVER(tên trên máy bạn có thể khác), chọn vào mục này -> bên phải tìm mục có tên là TCP/IP, click phải vào nó và chọn Properties (xem hình).

 

 

Trong cửa sổ mở ra, ở Tab Protocols, mục Enabled chọn vào Yes.

 

 

Tiếp tục click qua Tab IP Address -> Sẽ xuất hiện list các IP (IP1, IP2,…) đây là danh sách các IP hình thành khi máy bạn có kết nối vào các mạng LAN khác nhau.

 

 

Hãy chọn một IP nào đó bất kỳ (ví dụ tôi chọn IP1)

 

 Ở mục IP Address bạn xóa đi và gõ lại địa chỉ IP của máy bạn trong mạng LAN (chú ý đây là địa chỉ IP của máy bạn trong mạng LAN – ví dụ của tôi là 192.168.1.2)

 

 Ở mục Active – chọn Yes, mục Enabled – chọn Yes

 

 Ở mục TCP Port, khai báo cổng share mặc định của SQL, bạn có thể để mặc định là 1433

 

Click OK

 

Restart lại SQL Server. (bằng cách chọn vào mục SQL Server Services, bên phải click phải vào mục SQL Server (MSSQLSERVER) -> Chọn Restart)

 

Bước 3: Tạo một user để thực hiện kết nối từ xa

 

Mở Start -> All Programs -> Microsoft SQL Server  -> SQL Server Management Studio -> Connect vào Server

 

Ở menu bên trái, mở mục Security -> Login -> Nhấn chuột phải và chọn New Login.

 

 

Gõ vào Tên User, Password như trong hình, bỏ dấu ở mục Enforce password Expiration -> Nhấn OK.

 

 

Bước 4: Cấu hình Firewall cho phép nhận kết nối đến qua cổng share của SQL Server

 

Mục đích của việc này là để mở cổng Firewall của Windows cho phép nhận kết nối từ bên ngoài qua cổng share của SQL, mặc định là cổng 1433

 

* Trên WindowsXP

 

Vào Control Panel -> Windows Firewall

 

 Trong Tab Exceptions, click vào nút Add Port để thêm cổng 1433

 

Hộp thoại Add Port hiện ra, trong mục Name gõ tên bất kỳ, Port Number gõ số 1433, click chọn vào mục TCP (xem hình dưới)

 

Nhấn OK

 

Log Off hoặc Restart lại máy.

 

 

* Trên Windows Vista, Windows 7:

 

Vào Start -> Control Panel -> Windows Firewall -> Ở menu bên trái chọn Advanced settings

 

Menu bên trái, click vào mục Inbound Rules

 

Tiếp tục ở Menu bên phải, click vào mục New Rule

 

Trong cửa sổ mới hiện ra, đánh dấu vào mục Port như hình -> Nhấn Next.

 

 

Tiếp theo nhấn chọn vào mục TCP và Specific local Ports, gõ vào 1433 (số cổng share của SQL Server đã config trong bước 2) -> Nhấn Next.

 

 

Trên màn hình tiếp theo, đánh dấu chọn vào mục Allow the connection -> Nhấn Next.

 

Trong màn hình tiếp theo, chọn kiểu mạng sẽ áp dụng mở cổng này, đánh dấu vào cả 3 mục Domain, Private, Public -> Nhấn Next.

 

 

Trong màn hình tiếp theo, gõ tên kết nối và Description tùy ý -> Nhấn Finish.

 

 

Log Off hoặc Restart lại máy

 

Bước 5: Cấu hình Router cho phép kết nối qua Port 1433

 

Mục đích của việc này:

 

 Mở cổng của Router trên mạng của bạn để cho phép nhận kết nối từ bên ngoài mạng (từ Internet) qua cổng kết nối của SQL Server (Port 1433).

 

Chuyển hướng (Forward) kết nối về đến đúng máy mà bạn làm Server khi Router nhận được yêu cầu qua cổng 1433

 

Tùy loại Router mà bạn đang sử dụng, việc cấu hình có thể khác nhau đôi chút. Ở đây tôi đang thực hiện config trên một loại Router của Dlink. Các loại Router khác bạn có thể tự tìm hiểu thêm. Cách thiết lập trên các loại Router cơ bản là giống nhau, chỉ khác nhau về cách bố trí trên menu thôi.

 

Đầu tiên mở IE ra và gõ địa chỉ của Gateway -> Enter và đăng nhập vào quản trị Router

 

Ví dụ: Gateway của tôi là 192.168.1.1 thì tôi gõ vào Address của IE là http://192.168.1.1 -> Enter

 

Hãy đọc hướng dẫn sử dụng kèm theo router của bạn để biết được địa chỉ gateway cũng như user và password đăng nhập vào quản trị.

 

Menu bên trái, chọn Advanced Setup -> NAT -> Virtual Servers

 

Click Add và thiết lập như trong hình -> Save.

 

 

Hãy chú ý các mục mà tôi đánh dấu:

 

Custom Server: Tên của thiết lập, do bạn tự đặt tùy ý

 

 Server IP Address: Đây là địa chỉ IP của máy mà bạn cài làm máy chủ. Ví dụ của tôi là 192.168.1.2

 

Chú ý: Đây chính là IP của máy mà yêu cầu sẽ được Router chuyển đến. Do đó bạn nên khai báo IP tĩnh cho máy bạn cài làm máy chủ để khỏi phải vào mục này thiết lập lại mỗi khi restart máy.

 

Xin nhớ rằng đây là IP của máy trong mạng LAN chứ không phải là IP đối với mạng Internet.

 

Port Start, Port End là số hiệu của cổng nhận yêu cầu, đều khai báo là 1433

 

Ở đây sở dĩ có Port Start và Port End là vì Router cho phép bạn Forward trong cả một dải các cổng (từ cổng đến cổng). Đối với kết nối SQL Server chúng ta đang thực hiện thì chỉ cần Port 1433 thôi. Một số loại router có mục Single Port Forwarding – cho phép bạn chỉ cần config một cổng thôi là đủ.

 

·         Mục Protocol: Chọn phương thức kết nối là TCP.

 

Chú ý: Thường thì phần thiết lập này nằm trong mục NAT (Network Address Translation), hoặc có thể là Port Forwarding,… tùy router.

 

Đến đây bạn đã hoàn thành việc cài đặt và cấu hình cho phép server nhận kết nối SQL Server từ xa qua cổng 1433.
Để test kết quả:

 

Hãy ngồi ở một máy tính nào đó ngoài mạng LAN của bạn, có kết nối Internet.

 

Dùng một chương trình quản lý SQL Server (có thể dùng SQL Server Management Studio), gõ vào các thông tin kết nối -> Nhấn Connect.

 

 

Chú ý một số thông tin:

 

1. Server name: Đây là địa chỉ của Server nhận kết nối (chính là máy bạn đã cài SQL). Trong hình tôi gõ là 222.252.241.123,1433. Trong đó 222.252.241.123 chính là địa chỉ IP của máy tôi ở trên Internet, 1433 là cổng (Port) share SQL Server của tôi (tùy cổng share của bạn thiết lập, số này có thể khác, nếu bạn dùng 1433 thì có thể không cần gõ vì đây là cổng mặc định)

 

2.Authentication: Chọn kiểu chứng thực người dùng, có hai chế độ chứng thực là Windows Authentication và SQL Server Authentication. Tuy nhiên để kết nối từ xa thì phải dùng SQL Server Authentication

 

3.Login: Gõ user name mà bạn đã tạo

 

4. Password: Mật khẩu tương ứng.

 

Nếu connect được thì có nghĩa là bạn đã cài đặt và thiết lập thành công.

 

Theo bis.net.vn

 

Posted in Sql Server | Leave a Comment »

Template cơ bản với HTML5 và CSS3

Posted by millionking on February 25, 2014

Template cơ bản với HTML5 và CSS3

Bài viết tạo một Template cơ bản với HTML5 và CSS3 có thể chạy trên các trình duyệt và một số phiên bản củ, mình cũng chưa test hết tất cả các trình duyệt nên không biết có phiên bản trình duyệt nào bị lỗi không nửa.

Ứng dụng thêm từ các bài viết trước.

PIE giúp IE hiển thị được CSS3

Đầu tiên tạo file index.html
Thư mục css chứa file style.css
Thư mục js chứa file html5.js và toàn bộ thư mục PIE, phần này trong 2 bài viết trên.
Và thư mục img chứa hình ảnh.

File index.html có nội dung như sau:


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>Admin</title>
<link href=”css/style.css” rel=”stylesheet” type=”text/css” />

<!–[if IE]>
<script src=”js/html5.js”></script>
<![endif]–>
</head>
<body>

<div id=”top”>Administrator</div>
<div id=”content”>
<div id=”left”>
<h1>Danh Mục Quản Lý</h1>
<ul>
<li><a href=””>Quản Lý Sản Phẩm</a></li>
<li><a href=””>Danh Mục Sản Phẩm</a></li>
<li><a href=””>Quản Lý Bài Viết</a></li>
<li><a href=””>Quản Lý Hình Ảnh</a></li>
<li><a href=””>Album Hình Ảnh</a></li>
<li><a href=””>Quản Lý Banner</a></li>
<li><a href=””>Cấu Hình Website</a></li>
<li><a href=””>Thông Tin Chung</a></li>
<li><a href=””>Quản Lý User</a></li>
<li><a href=””>Thoát Khỏi Hệ Thống</a></li>
</ul>
</div>
<div id=”right”>
<div id=”menu”>
<h1>Quản Lý Sản Phẩm</h1>
<div id=”menuright”>
<ul>
<li><a href=””>Thêm Sản Phẩm</a></li>
<li><a href=””>Quản lý Sản Phẩm</a></li>
</ul>
</div>
<div></div>
<p>Quản lý sản phẩm</p>
</div>

<div id=”infomation”>
Infomation
</div>
</div>
</div>
<div></div>
<div id=”bottom”>Bản quyền thuộc công ty  1/2012</div>
</body>
</html>

File style.css có nội dung:


@charset “utf-8”;
/* CSS Document */

*{
margin:0px;
padding:0px;
}

body{
width:1000px;
margin:auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}

#top{
border:#999999 solid 1px;
height:150px;
line-height:120px;
padding-left:50px;
font-size:50px;
color:#333333;
font-weight:700;
font-family:Geneva, Arial, Helvetica, sans-serif;
margin-bottom:10px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:#666 0px 2px 3px;
-moz-box-shadow:#666 0px 2px 3px;
box-shadow:#666 0px 2px 3px;
background:#aeaeae;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#aeaeae), to(#d0d0d0));
background: -moz-linear-gradient(#aeaeae, #d0d0d0);
background: linear-gradient(#aeaeae, #d0d0d0);
-pie-background:linear-gradient(#aeaeae, #d0d0d0);
behavior: url(js/PIE/PIE.htc);
}

#left{
width:200px;
float:left;
border:#999999 solid 1px;
height:auto;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:#666 0px 2px 3px;
-moz-box-shadow:#666 0px 2px 3px;
box-shadow:#666 0px 2px 3px;
background:#d0d0d0;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#d0d0d0), to(#aeaeae));
background: -moz-linear-gradient(#d0d0d0, #aeaeae);
background: linear-gradient(#d0d0d0, #aeaeae);
-pie-background:linear-gradient(#d0d0d0, #aeaeae);
behavior: url(js/PIE/PIE.htc);
}

#right{
width:786px;
float:left;
height:auto;
margin-left:10px;
height:auto;

}

#menu{
width:786px;
float:left;
height:auto;
border:#999999 solid 1px;
height:auto;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:#666 0px 2px 3px;
-moz-box-shadow:#666 0px 2px 3px;
box-shadow:#666 0px 2px 3px;
background:#d0d0d0;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#d0d0d0), to(#aeaeae));
background: -moz-linear-gradient(#d0d0d0, #aeaeae);
background: linear-gradient(#d0d0d0, #aeaeae);
-pie-background:linear-gradient(#d0d0d0, #aeaeae);
behavior: url(js/PIE/PIE.htc);
}

#infomation{
margin-top:10px;
width:786px;
float:left;
height:auto;
border:#999999 solid 1px;
height:auto;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:#666 0px 2px 3px;
-moz-box-shadow:#666 0px 2px 3px;
box-shadow:#666 0px 2px 3px;
background:#d0d0d0;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#d0d0d0), to(#aeaeae));
background: -moz-linear-gradient(#d0d0d0, #aeaeae);
background: linear-gradient(#d0d0d0, #aeaeae);
-pie-background:linear-gradient(#d0d0d0, #aeaeae);
behavior: url(js/PIE/PIE.htc);
}

.del{
clear:left;
}

#content{
height:auto;
}

#bottom{
margin-top:10px;
border:#999999 solid 1px;
height:100px;
line-height:100px;
text-align:center;
margin-bottom:10px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:#666 0px 2px 3px;
-moz-box-shadow:#666 0px 2px 3px;
box-shadow:#666 0px 2px 3px;
background:#d0d0d0;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#d0d0d0), to(#aeaeae));
background: -moz-linear-gradient(#d0d0d0, #aeaeae);
background: linear-gradient(#d0d0d0, #aeaeae);
-pie-background:linear-gradient(#d0d0d0, #aeaeae);
behavior: url(js/PIE/PIE.htc);
}

/*menu left*/

#left h1{
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
text-align:center;
margin-top:10px;
margin-bottom:10px;
color:#333333;
}

#left ul{
list-style-type:none;
margin-left:-20px;
}

#left li a{
width:170px;
display:block;
height:25px;
line-height:25px;
text-decoration:none;
color:#333333;
margin-bottom:5px;
padding-left:20px;
border:#999999 solid 1px;
margin-left:9px;
font-weight:700;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
background: #d0d0d0;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#d0d0d0), to(#999999));
background: -moz-linear-gradient(#d0d0d0, #999999);
background: linear-gradient(#d0d0d0, #999999);
-pie-background:linear-gradient(#d0d0d0, #999999);
behavior: url(js/PIE/PIE.htc);
}

#left li a:hover{
color:#FFCC00;
}

/*Menu right */

#right #menuright ul{
list-style-type:none;
}

#right #menuright ul li{
width:160px;
display:inline;
}

#right #menuright ul li a{
float:left;
color:#333333;
height:25px;
line-height:25px;
border:#999999 solid 1px;
text-decoration:none;
font-weight:700;
margin-left:10px;
padding-left:5px;
padding-right:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
background: #d0d0d0;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#d0d0d0), to(#999999));
background: -moz-linear-gradient(#d0d0d0, #999999);
background: linear-gradient(#d0d0d0, #999999);
-pie-background:linear-gradient(#d0d0d0, #999999);
behavior: url(js/PIE/PIE.htc);
}

#right h1{
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
margin-left:10px;
margin-top:10px;
margin-bottom:10px;
color:#333333;
}

#right p{
margin:10px;
}

Posted in Thủ thuật, Web | Tagged: | Leave a Comment »

Tạo menu 3D với hiệu ứng Flipping bằng CSS3

Posted by millionking on February 14, 2014

1. BƯỚC 1: HTML

Chúng ta sẽ tao ra một cấu trúc HTML bao gồm một danh sách UL-LI với các liên kết. Tuy nhiên sẽ có thêm vài phần tử SPAN để hỗ trợ hiệu ứng 3D cho menu của chúng ta. Bạn có thể tham khảo code bên dưới:

01 <ul class="block-menu">
02  <li><a href="#" class="three-d">
03   Home
04   <span aria-hidden="true" class="three-d-box">
05    <span class="front">Home</span>
06    <span class="back">Home</span>
07   </span>
08  </a></li>
09  <li><a href="#" class="three-d">
10   Demos
11   <span aria-hidden="true" class="three-d-box">
12    <span class="front">Demos</span>
13    <span class="back">Demos</span>
14   </span>
15  </a></li>
16  <!-- more items here -->
17 </ul>

Bên trong các thẻ A, sẽ được chèn vào vài phần tử SPAN để hiển thị cho mặt trước (front) và mặt sau (back) của hộp 3d khi animation. Mỗi mặt cũng cần thêm các văn bản giống thẻ A.

2. BƯỚC 2: CSS

Thực tế thì phần tử A không di chuyển, để thực hiện điều đó, chính thẻ SPAN parent mới là yếu tố quyết định.

01 /* basic menu styles */
02 .block-menu {
03   display: block;
04   width: 980px;
05   margin: 50px auto;
06   background: #000;
07      }
08
09 .block-menu li {
10  display: inline-block;
11 }
12
13 .block-menu li a {
14  color: #fff;
15  display: block;
16  text-decoration: none;
17  font-family: 'Passion One', Arial, sans-serif;
18  font-smoothing: antialiased;
19  text-transform: uppercase;
20  overflow: visible;
21  line-height: 20px;
22  font-size: 24px;
23  padding: 15px 10px;
24 }
25
26 /* animation domination */
27 .three-d {
28  perspective: 200px;
29  transition: all .07s linear;
30  position: relative;
31  cursor: pointer;
32 }
33  /* complete the animation! */
34  .three-d:hover .three-d-box,
35  .three-d:focus .three-d-box {
36   transform: translateZ(-25px) rotateX(90deg);
37  }
38
39 .three-d-box {
40  transition: all .3s ease-out;
41  transform: translatez(-25px);
42  transform-style: preserve-3d;
43  pointer-events: none;
44  position: absolute;
45  top: 0;
46  left: 0;
47  display: block;
48  width: 100%;
49  height: 100%;
50 }
51
52 /*
53  put the "front" and "back" elements into place with CSS transforms,
54  specifically translation and translatez
55 */
56 .front {
57  transform: rotatex(0deg) translatez(25px);
58 }
59
60 .back {
61  transform: rotatex(-90deg) translatez(25px);
62  color: #ffe7c4;
63 }
64
65 .front, .back {
66  display: block;
67  width: 100%;
68  height: 100%;
69  position: absolute;
70  top: 0;
71  left: 0;
72  background: black;
73  padding: 15px 10px;
74  color: white;
75  pointer-events: none;
76  box-sizing: border-box;
77 }

LƯU Ý: Một số CSS có thể cần thêm prefix.

Hiệu ứng này không có Javascript, Flash hoặc Canvas nên bạn có thể áp dụng cho menu của mình không phải lo về tốc độ.

Chúc các bạn thành công!

Biên soạn từ: davidwalsh.name

Posted in Thủ thuật, Web | Leave a Comment »

Tạo menu bay lượn bằng CSS3

Posted by millionking on February 14, 2014

Đầu tiên chúng ta tạo file HTML trước

01 <ul id="nav">
02             <li><a href="http://minhtriet09it.blogspot.com/">Home</a></li>
03             <li><a class="hsubs" href="#">Menu 1</a>
04                 <ul class="subs">
05                     <li><a href="#">Submenu 1</a></li>
06                     <li><a href="#">Submenu 2</a></li>
07                     <li><a href="#">Submenu 3</a></li>
08                     <li><a href="#">Submenu 4</a></li>
09                     <li><a href="#">Submenu 5</a></li>
10                 </ul>
11             </li>
12             <li><a class="hsubs" href="#">Menu 2</a>
13                 <ul class="subs">
14                     <li><a href="#">Submenu 2-1</a></li>
15                     <li><a href="#">Submenu 2-2</a></li>
16                     <li><a href="#">Submenu 2-3</a></li>
17                     <li><a href="#">Submenu 2-4</a></li>
18                     <li><a href="#">Submenu 2-5</a></li>
19                     <li><a href="#">Submenu 2-6</a></li>
20                     <li><a href="#">Submenu 2-7</a></li>
21                     <li><a href="#">Submenu 2-8</a></li>
22                 </ul>
23             </li>
24             <li><a class="hsubs" href="#">Menu 3</a>
25                 <ul class="subs">
26                     <li><a href="#">Submenu 3-1</a></li>
27                     <li><a href="#">Submenu 3-2</a></li>
28                     <li><a href="#">Submenu 3-3</a></li>
29                     <li><a href="#">Submenu 3-4</a></li>
30                     <li><a href="#">Submenu 3-5</a></li>
31                 </ul>
32             </li>
33             <li><a href="#">Menu 4</a></li>
34             <li><a href="#">Menu 5</a></li>
35             <li><a href="#">Menu 6</a></li>
36             <li><a href="/tao-menu-bay-luon-bang-css3.html">Back</a></li>
37         </ul>

Và phần quan trọng nhất là đây, đoạn CSS giúp bạn làm nên những điều thần kỳ

001 #nav,#nav ul {
002     list-stylenone outside none;
003     margin0;
004     padding0;
005 }
006 #nav {
007     font-family"Lucida Sans Unicode",Verdana,Arial,sans-serif;
008     font-size13px;
009     height36px;
010     list-stylenone outside none;
011     margin40px auto;
012     text-shadow0 -1px 3px #202020;
013     width980px;
014
015     /* border radius */
016     -moz-border-radius:4px;
017     -webkit-border-radius:4px;
018     border-radius:4px;
019
020     /* box shadow */
021     -moz-box-shadow: 0px 3px 3px #cecece;
022     -webkit-box-shadow: 0px 3px 3px #cecece;
023     box-shadow: 0 3px 4px #8b8b8b;
024
025     /* gradient */
026     background-image: -webkit-gradient(linear, left bottomleft top, color-stop(0#787878), color-stop(0.5#5E5E5E), color-stop(0.51#707070), color-stop(1#838383));
027     background-image: -moz-linear-gradient(center bottom#787878 0%#5E5E5E 50%,#707070 51%#838383 100%);
028     background-color:#5f5f5f;
029 }
030 #nav ul {
031     left-9999px;
032     positionabsolute;
033     top-9999px;
034     z-index2;
035 }
036 #nav li {
037     border-bottom1px solid #575757;
038     border-left1px solid #929292;
039     border-right1px solid #5d5d5d;
040     border-top1px solid #797979;
041     displayblock;
042     floatleft;
043     height34px;
044     positionrelative;
045     width105px;
046 }
047 #nav li:first-child {
048     border-left0 none;
049     margin-left5px;
050 }
051 #nav li a {
052     color#FFFFFF;
053     displayblock;
054     line-height34px;
055     outlinemedium none;
056     text-aligncenter;
057     text-decorationnone;
058
059     /* gradient */
060     background-image: -webkit-gradient(linear, left bottomleft top, color-stop(0#787878), color-stop(0.5#5E5E5E), color-stop(0.51#707070), color-stop(1#838383));
061     background-image: -moz-linear-gradient(center bottom#787878 0%#5E5E5E 50%,#707070 51%#838383 100%);
062     background-color:#5f5f5f;
063 }
064
065 /* keyframes #animation1 */
066 @-webkit-keyframes animation1 {
067     0% {
068         -webkit-transform: scale(1);
069     }
070     30% {
071         -webkit-transform: scale(1.3);
072     }
073     100% {
074         -webkit-transform: scale(1);
075     }
076 }
077 @-moz-keyframes animation1 {
078     0% {
079         -moz-transform: scale(1);
080     }
081     30% {
082         -moz-transform: scale(1.3);
083     }
084     100% {
085         -moz-transform: scale(1);
086     }
087 }
088 #nav li > a:hover {
089     /* css3 animation */
090     -moz-animation-name: animation1;
091     -moz-animation-duration: 0.7s;
092     -moz-animation-timing-function: linear;
093     -moz-animation-iteration-count: infinite;
094     -moz-animation-directionnormal;
095     -moz-animation-delay: 0;
096     -moz-animation-play-state: running;
097     -moz-animation-fill-mode: forwards;
098
099     -webkit-animation-name: animation1;
100     -webkit-animation-duration: 0.7s;
101     -webkit-animation-timing-function: linear;
102     -webkit-animation-iteration-count: infinite;
103     -webkit-animation-directionnormal;
104     -webkit-animation-delay: 0;
105     -webkit-animation-play-state: running;
106     -webkit-animation-fill-mode: forwards;
107 }
108 #nav li:hover > a {
109     z-index4;
110 }
111 #nav li:hover ul.subs {
112     left0;
113     top34px;
114     width150px;
115 }
116 #nav ul li {
117     backgroundnone repeat scroll 0 0 #838383;
118     box-shadow: 5px 5px 5px rgba(0000.5);
119     opacity: 0;
120     width100%;
121
122     /*-webkit-transition:all 0.3s ease-in-out;
123     -moz-transition:all 0.3s ease-in-out;
124     -o-transition:all 0.3s ease-in-out;
125     -ms-transition:all 0.3s ease-in-out;
126     transition:all 0.3s ease-in-out;*/
127 }
128
129 /* keyframes #animation2 */
130 @-webkit-keyframes animation2 {
131     0% {
132         margin-left:185px;
133     }
134     100% {
135         margin-left:0px;
136         opacity:1;
137     }
138 }
139 @-moz-keyframes animation2 {
140     0% {
141         margin-left:185px;
142     }
143     100% {
144         margin-left:0px;
145         opacity:1;
146     }
147 }
148 #nav li:hover ul li {
149     /* css3 animation */
150     -moz-animation-name: animation2;
151     -moz-animation-duration: 0.3s;
152     -moz-animation-timing-function: linear;
153     -moz-animation-iteration-count: 1;
154     -moz-animation-directionnormal;
155     -moz-animation-delay: 0;
156     -moz-animation-play-state: running;
157     -moz-animation-fill-mode: forwards;
158
159     -webkit-animation-name: animation2;
160     -webkit-animation-duration: 0.3s;
161     -webkit-animation-timing-function: linear;
162     -webkit-animation-iteration-count: 1;
163     -webkit-animation-directionnormal;
164     -webkit-animation-delay: 0;
165     -webkit-animation-play-state: running;
166     -webkit-animation-fill-mode: forwards;
167
168     /*-webkit-transition:all 0.3s ease-in-out;
169     -moz-transition:all 0.3s ease-in-out;
170     -o-transition:all 0.3s ease-in-out;
171     -ms-transition:all 0.3s ease-in-out;
172     transition:all 0.3s ease-in-out;*/
173 }
174 /* animation delays */
175 #nav li:hover ul li:nth-child(1) {
176     -moz-animation-delay: 0;
177     -webkit-animation-delay: 0;
178 }
179 #nav li:hover ul li:nth-child(2) {
180     -moz-animation-delay: 0.05s;
181     -webkit-animation-delay: 0.05s;
182 }
183 #nav li:hover ul li:nth-child(3) {
184     -moz-animation-delay: 0.1s;
185     -webkit-animation-delay: 0.1s;
186 }
187 #nav li:hover ul li:nth-child(4) {
188     -moz-animation-delay: 0.15s;
189     -webkit-animation-delay: 0.15s;
190 }
191 #nav li:hover ul li:nth-child(5) {
192     -moz-animation-delay: 0.2s;
193     -webkit-animation-delay: 0.2s;
194 }
195 #nav li:hover ul li:nth-child(6) {
196     -moz-animation-delay: 0.25s;
197     -webkit-animation-delay: 0.25s;
198 }
199 #nav li:hover ul li:nth-child(7) {
200     -moz-animation-delay: 0.3s;
201     -webkit-animation-delay: 0.3s;
202 }
203 #nav li:hover ul li:nth-child(8) {
204     -moz-animation-delay: 0.35s;
205     -webkit-animation-delay: 0.35s;
206 }

Thật tuyệt phải không nào! Chúc các bạn thành công!

Posted in Thủ thuật | Leave a Comment »

Hiệu ứng 3D đẹp khi rê chuột vào ảnh bằng CSS3 và jQuery

Posted by millionking on February 14, 2014

BƯỚC 1: HTML

Cấu trúc HTML cho thumbnail của chúng ta như sau:

01 <div id="grid" class="main">
02   
03     <div class="view">
04  
05         <div class="view-back">
06             <span data-icon="A">566</span>
07             <span data-icon="B">124</span>
08             <ahref="http://www.flickr.com/photos/ag2r/5439506585/in/photostream">→</a>
09         </div>
10  
11         <img src="images/1.jpg" />
12  
13     </div>
14  
15     <div class="view">
16  
17     <!-- ... -->
18  
19     </div>
20  
21     <!-- ... -->
22      
23 </div>

Mỗi thumbnail sẽ được đặt vào những phần riêng biệt, với class “view” ta sẽ định HTML cho nó như sau:

01 <div class="view">
02  
03     <div class="view-back">
04         <!-- ... -->
05     </div>
06      
07     <div class="slice s1" style="background-image: url(images/1.jpg); ">
08         <span class="overlay"></span>
09          
10         <div class="slice s2" style="background-image: url(images/1.jpg); ">
11             <span class="overlay"></span>
12              
13             <div class="slice s3" style="background-image: url(images/1.jpg); ">
14                 <span class="overlay"></span>
15                  
16                 <div class="slice s4" style="background-image: url(images/1.jpg); ">
17                     <span class="overlay"></span>
18                      
19                     <div class="slice s5" style="background-image: url(images/1.jpg); ">
20                         <span class="overlay"></span>
21                     </div><!-- /s5 -->
22                  
23                 </div><!-- /s4 -->
24                      
25             </div><!-- /s3 -->
26                  
27         </div><!-- /s2 -->
28              
29     </div><!-- /s1 -->
30      
31 </div><!-- /view -->

Mỗi slice sẽ có ảnh nền của nó khi chúng chồng lên nhau, điều này giúp ta điều khiển dễ hơn. Đồng thời thêm 1 thẻ Span nằm lên trên để tạo ra hiệu ứng chân thật hơn.

Đoạn JavaScript của chúng ta như sau:

01 $.fn.hoverfold = function( args ) {
02  
03     this.each( function() {
04      
05         $( this ).children( '.view' ).each( function() {
06          
07             var $item   = $( this ),
08                 img     = $item.children( 'img' ).attr( 'src' ),
09                 struct  = '<div>';
10                     struct  +='<div>';
11                         struct  +='<div>';
12                             struct  +='<div>';
13                                 struct  +='<div>';
14                                 struct  +='</div>';
15                             struct  +='</div>';
16                         struct  +='</div>';
17                     struct  +='</div>';
18                 struct  +='</div>';
19                  
20             var $struct = $( struct );
21              
22             $item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice').css( 'background-image''url(' + img + ')' ).prepend( $( '<span ></span>' ) );
23              
24         } );
25          
26     });
27  
28 };

BƯỚC 2: CSS

Thiết lập stype cho các view riêng biệt. Điều này rất là quan trọng, bởi vì ở đó chúng ta sẽ thêm vào perspective.

01 .view {
02     width316px;
03     height216px;
04     margin10px;
05     floatleft;
06     positionrelative;
07     border8px solid #fff;
08     box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
09     background#333;
10     perspective: 500px;
11 }

Class “slice” sễ cần một số thuộc tính 3D và transition:

1 .view .slice{
2     width60px;
3     height100%;
4     z-index100;
5     transform-style: preserve-3d;
6     transform-origin: left center;
7     transition: transform 150ms ease-in-out;
8      
9 }

Phần mô tả hiện ra khi chúng đẩy các “slice” sang một bên sẽ có style như sau:

1 .view div.view-back{
2     width50%;
3     height100%;
4     positionabsolute;
5     right0;
6     background#666;
7     z-index0;
8 }

Style cho các thẻ spans và link:

01 .view-back span {
02     displayblock;
03     floatright;
04     padding5px 20px 5px;
05     width100%;
06     text-alignright;
07     font-size16px;
08     color: rgba(255,255,255,0.6);
09 }
10  
11 .view-back span:first-child {
12     padding-top20px;
13 }
14  
15 .view-back a {
16     display: bock;
17     font-size18px;
18     color: rgba(255,255,255,0.4);
19     positionabsolute;
20     right15px;
21     bottom15px;
22     border2px solid rgba(255,255,255,0.3);
23     border-radius: 50%;
24     width30px;
25     height30px;
26     line-height22px;
27     text-aligncenter;
28     font-weight700;
29 }
30  
31 .view-back a:hover {
32     color#fff;
33     border-color#fff;
34 }

Phần icon xuất hiện phía trước thẻ span chúng ta sẽ sử dụng font dạng icon tại Fontello . Chúng ta sẽ add 1 data-icon vào thẻ span và sử dụng pseudo-class :before để hiển thị nó:

1 .view-back span[data-icon]:before {
2     contentattr(data-icon);
3     font-family'icons';
4     color#aaa;
5     color: rgba(255,255,255,0.2);
6     text-shadow0 0 1px rgba(255,255,255,0.2);
7     padding-right5px;
8 }

Tất cả sẽ di chuyển sang phải ngoại trừ Slide đầu tiên (do chúng ta có 2 lớp chồng lên nhau)

1 .view .s2,
2 .view .s3,
3 .view .s4,
4 .view .s5 {
5 transform: translateX(60px);
6 }

Thiết lập các vị trí nền tương ứng của mỗi slice cho hình nền:

01 .view .s1 {
02     background-position0px 0px;
03 }
04 .view .s2 {
05     background-position-60px 0px;
06 }
07 .view .s3 {
08     background-position-120px 0px;
09 }
10 .view .s4 {
11     background-position-180px 0px;
12 }
13 .view .s5 {
14     background-position-240px 0px;
15 }

Các lớp phủ ban đầu sẽ có một độ opacity là 0 và chúng ta sẽ thêm một transition và thay đổi mức độ opacity khi rê chuột vào:

01 .view .overlay {
02     width60px;
03     height100%;
04     opacity: 0;
05     positionabsolute;
06     transition: opacity 150ms ease-in-out;
07 }
08  
09 .view:hover .overlay {
10     opacity: 1;
11 }

Hãy cố định các vị trí và z-index cho hình ảnh (chỉ để chúng ta không nhìn thấy phần dưới ở bên trên và phần dự phòng). Và chúng ta cũng sẽ thêm một transition cho các trình duyệt không hỗ trợ 3D transforms:

1 .view img {
2     positionabsolute;
3     z-index0;
4     transition: left 0.3s ease-in-out;
5 }

Khi phát hiện ra trình duyệt không hỗ trợ 3D chúng ta sẽ gọi file CSS fallback.css lên để giải quyết vấn đề:

01 .view {
02     overflowhidden;
03 }
04  
05 .view:hover img {
06     left-85px;
07 }
08  
09 .view div.view-back {
10     background#666;
11 }

Nó sẽ giúp tấm ảnh của bạn trượt qua trái khi rê chuột vào.

VỚI PHẦN VÍ DỤ

Chúng ta tạo ra 1 hiệu ứng “gấp ảnh”. Để làm điều này chúng ta sẽ thay đổi giá trị của “viễn cảnh” các phần khi xem. Và di chuyển chúng trên các phần đó.

1 .view {
2     perspective: 1050px;
3 }
4  
5 .view div {
6     transition: all 0.3s ease-in-out;
7 }

Các slide 2, 3 ,4 5 sẽ chuyển động dạng 3D và chúng ta sẽ có được hiệu ứng gấp ảnh:

01 .view:hover .s2{
02     transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);
03 }
04 .view:hover .s3,
05 .view:hover .s5{
06     transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);
07 }
08 .view:hover .s4{
09     transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg);
10 }

Mỗi slide sẽ di chuyển sang trái, và nên đặt cho nó giá trị là 59px để độ gấp được tốt hơn. Slide thứ 2 sẽ xoay 1 góc -45 độ để trong như nó chuyển về bên trái. Slide thứ 4 sẽ xoay theo hướng khác, Slide 3 và 5 cùng xoay 90 độ. Hãy nhớ rằng chúng ta có các lốp chồng lên nhau, do vậy nếu lớp cha thay đổi thì các lớp con cũng sẽ xoay theo. Để nhìn nó thực tế hơn ta thêm các gadient vào lớp phủ trên cùng.

01 .view .s2 > .overlay {
02     background: linear-gradient(right, rgba(0,0,0,0.050%,rgba(0,0,0,0100%);
03 }
04  
05 .view .s3 > .overlay {
06     background: linear-gradient(left, rgba(255,255,255,00%, rgba(255255255,0.2100%);
07 }
08  
09 .view .s4 > .overlay {
10     background: linear-gradient(right, rgba(0,0,0,0.60%,rgba(0,0,0,0.2100%);
11 }
12  
13 .view .s5 > .overlay {
14     background: linear-gradient(left, rgba(0,0,0,0.80%,rgba(0,0,0,0100%);
15 }

Phần mô ta cũng sẽ có một màu nền, va ta sẽ có nó 1 chút shadow:

1 .view div.view-back{
2     background: linear-gradient(left#0a0a0a 0%,#666666 100%);
3 }

OK! Chúng tôi đã cố gắng trình bày một cách chi tiết để các bạn tiện theo dõi và hiểu rõ vấn đề! Nó thật tuyệt phải không nào!

Chúc các bạn thành công và có nhiều ý tưởng!

Theo: tympanus.net

Posted in Thủ thuật | Leave a Comment »

Tạo Form Tìm Kiếm Tuyệt Đẹp Bằng CSS3

Posted by millionking on February 14, 2014

HTML

Trước khi gõ code HTML, hãy chú ý hai thuộc tính placeholder và required. Đây là hai thuộc tính quan trọng khi tạo form tìm kiếm của HTML5.

1 <form class="form-wrapper">
2    <input id="search" type="text" />
3    <input id="submit" type="submit" value="go" />
4 </form>

CSS

01 .form-wrapper {
02    width450px;
03    padding8px;
04    margin100px auto;
05    overflowhidden;
06    border-width1px;
07    border-stylesolid;
08    border-color#dedede #bababa #aaa #bababa;
09    -moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb0 4px 0 #aaa05px 5px #444;
10    -webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb0 4px 0 #aaa,0 5px 5px #444;
11    box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb0 4px 0 #aaa0 5px5px #444;     
12    -moz-border-radius: 10px;     
13    -webkit-border-radius: 10px;    
14    border-radius: 10px;    
15    background-color#f6f6f6;    
16    background-image: -webkit-gradient(linear, left topleft bottom, from(#f6f6f6), to(#eae8e8));    
17    background-image: -webkit-linear-gradient(top#f6f6f6#eae8e8);     
18    background-image: -moz-linear-gradient(top#f6f6f6#eae8e8);     
19    background-image: -ms-linear-gradient(top#f6f6f6#eae8e8);    
20    background-image: -o-linear-gradient(top#f6f6f6#eae8e8);     
21    background-image: linear-gradient(top#f6f6f6#eae8e8);}            
22
23 .form-wrapper #search {
24    width330px;
25    height20px;
26    padding10px 5px;
27    floatleft;
28    fontbold 16px 'lucida sans''trebuchet MS''Tahoma';     
29    border1px solid #ccc;     
30    -moz-box-shadow: 0 1px 1px #ddd inset0 1px 0 #fff;
31    -webkit-box-shadow: 0 1px 1px #ddd inset0 1px 0 #fff;
32    box-shadow: 0 1px 1px #ddd inset0 1px 0 #fff;
33    -moz-border-radius: 3px;    
34    -webkit-border-radius: 3px;     
35    border-radius: 3px;}       
36
37 .form-wrapper #search:focus {
38    outline0;
39    border-color#aaa;
40    -moz-box-shadow: 0 1px 1px #bbb inset;
41    -webkit-box-shadow: 0 1px 1px #bbb inset;
42    box-shadow: 0 1px 1px #bbb inset;}
43
44 .form-wrapper #search::-webkit-input-placeholder {
45    color#999;
46    font-weightnormal;}
47
48 .form-wrapper #search:-moz-placeholder {
49    color#999;
50    font-weightnormal;}
51
52 .form-wrapper #search:-ms-input-placeholder {
53    color#999;
54    font-weightnormal;}
55
56 .form-wrapper #submit {
57    floatright;
58    border1px solid #00748f;
59    height42px;
60    width100px;
61    padding0;
62    cursorpointer;
63    fontbold 15px ArialHelvetica;
64    color#fafafa;
65    text-transformuppercase;
66    background-color#0483a0;
67    background-image: -webkit-gradient(linear, left topleft bottom, from(#31b2c3), to(#0483a0));
68    background-image: -webkit-linear-gradient(top#31b2c3#0483a0);     
69    background-image: -moz-linear-gradient(top#31b2c3#0483a0);
70    background-image: -ms-linear-gradient(top#31b2c3#0483a0);
71    background-image: -o-linear-gradient(top#31b2c3#0483a0);
72    background-image: linear-gradient(top#31b2c3#0483a0);
73    -moz-border-radius: 3px;     
74    -webkit-border-radius: 3px;
75    border-radius: 3px;
76    text-shadow0 1px 0 rgba(00 ,0, .3);
77    -moz-box-shadow: 0 1px 0 rgba(2552552550.3inset0 1px 0 #fff;
78    -webkit-box-shadow: 0 1px 0 rgba(2552552550.3inset0 1px 0 #fff;
79    box-shadow: 0 1px 0 rgba(2552552550.3inset0 1px 0 #fff;}
80
81 .form-wrapper #submit:hover, .form-wrapper #submit:focus {
82    background-color#31b2c3;
83    background-image: -webkit-gradient(linear, left topleft bottom, from(#0483a0), to(#31b2c3));
84    background-image: -webkit-linear-gradient(top#0483a0#31b2c3);     
85    background-image: -moz-linear-gradient(top#0483a0#31b2c3);
86    background-image: -ms-linear-gradient(top#0483a0#31b2c3);
87    background-image: -o-linear-gradient(top#0483a0#31b2c3);
88    background-image: linear-gradient(top#0483a0#31b2c3);}
89
90 .form-wrapper #submit:active {
91    outline0;     
92    -moz-box-shadow: 0 1px 4px rgba(0000.5inset;
93    -webkit-box-shadow: 0 1px 4px rgba(0000.5inset;
94    box-shadow: 0 1px 4px rgba(0000.5inset;}
95
96 .form-wrapper #submit::-moz-focus-inner {
97    border0;}

Chúc các bạn thành công!

Posted in Thủ thuật | Leave a Comment »

Đổ bóng thẻ DIV với CSS3

Posted by millionking on February 14, 2014

  1. Chúng ta thực hiện việc đổ bóng về phía phải – dưới:
    box-shadow: 5px 5px 5px #666;
    -moz-box-shadow: 5px 5px 5px
     #666;
    -webkit-box-shadow: 5px 5px 5px
     #666;

    • Đối số 1: Qui định đổ bóng theo chiều ngang (đơn vị px).
    • Đối số 2: Qui định đổ bóng theo chiều dọc (đơn vị px).
    • Đối số 3: Độ rộng của bóng đổ (đơn vị px).
    • Đối số 4: Màu của bóng đổ.

 


Bóng đổ về phía trên – trái: Chỉ cần thực hiện với dấu (-) ở trước là dc kết quả mong muốn:

box-shadow: -5px -5px 5px #666;
-moz-box-shadow: -5px -5px 5px #666;
-webkit-box-shadow: -5px -5px 5px #666;

box-shadow: 0px 0px 6px rgba(0, 0, 0, 10);
-moz-box-shadow:0px 0px 6px rgba(0, 0, 0, 10);
-webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 10);

Posted in Thủ thuật | Leave a Comment »

Cách tạo Ribbon Menu bằng CSS3

Posted by millionking on February 14, 2014

<div class='ribbon'>
2     <a href='#'><span>Home</span></a>
3     <a href='#'><span>About</span></a>
4     <a href='#'><span>Services</span></a>
5     <a href='#'><span>Contact</span></a>
6 </div>

Đây là dạng cấu trúc menu bình thường, bây giờ chúng ta sẽ định dạng phần cơ bản cho Menu, tạo khung và các thuộc tính hover cho Ribbon Menu bằng CSS3.

01 * {
02     /* Basic CSS reset */
03     margin:0;
04     padding:0;
05 }
06  
07 body {
08     /* These styles have nothing to do with the ribbon */
09     background:url(dark_wood.png) 0 0 repeat;
10     padding:100px 0 0;
11     margin:auto;
12     text-align:center;
13 }
14  
15 .ribbon {
16     display:inline-block;
17 }
18  
19 .ribbon a:link, .ribbon a:visited {
20     color:#000;
21     text-decoration:none;
22     float:left;
23     height:3.5em;
24     overflow:hidden;
25 }
26  
27 .ribbon span {
28     background:#fff;
29     display:inline-block;
30     line-height:3em;
31     padding:0 1em;
32     margin-top:0.5em;
33     position:relative;
34  
35     -webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */
36     -moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */
37     -ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */
38     -o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */
39     transition: background-color 0.2s, margin-top 0.2s;
40 }
41  
42 .ribbon a:hover span {
43     background:#FFD204;
44     margin-top:0;
45 }

 

Tiếp đến chúng ta tạo thuộc tính before, after cho phần hover của Ribbon Menu, công việc này là nét đặc trưng cũng như là phần quan trọng của menu chúng ta, khi rê chuột vào thì link sẽ được nổi lên kèm theo Ribbon.

01 .ribbon span:before {
02     content"";
03     position:absolute;
04     top:3em;
05     left:0;
06     border-right:0.5em solid #9B8651;
07     border-bottom:0.5em solid #fff;
08 }
09  
10 .ribbon span:after {
11     content"";
12     position:absolute;
13     top:3em;
14     right:0;
15     border-left:0.5em solid #9B8651;
16     border-bottom:0.5em solid #fff;
17 }

 

Tiếp theo chúng ta sẽ tạo đuôi cho menu (hai đuôi cá ở đầu và cuối của Ribbon Menu). Bạn có hai giai đoạn là tạo viền và cắt viền.

01 .ribbon:after, .ribbon:before {
02     margin-top:0.5em;
03     content"";
04     float:left;
05     border:1.5em solid #fff;
06 }
07  
08 .ribbon:after {
09     border-right-color:transparent;
10 }
11  
12 .ribbon:before {
13     border-left-color:transparent;
14 }

 

DEMO

Posted in Thủ thuật | Leave a Comment »

process year for javascript auto

Posted by millionking on January 15, 2014

<address>Copyright &copy; 2000-<script type=”text/javascript”>document.write(new Date().getFullYear());</script> Golf Digest Online Inc. All rights reserved.</address>

Posted in Web | Leave a Comment »

Abstract Class vs Interface

Posted by millionking on October 26, 2012

Probably “Difference Between abstract Class and Interface” is the most frequent question being asked in .Net world .  In this tutorial, I will explain the difference theoretically followed by code snippet.
Theoretically there are basically 5 differences between Abstract Class and Interface which are listed as below :-

  1. A class can implement any number of interfaces but a subclass can at most use only one abstract class.
  2. An abstract class can have non-abstract Methods(concrete methods) while in case of Interface all the methods has to be abstract.
  3. An abstract class can declare or use any variables while an interface is not allowed to do so.

    So following Code will not compile :-

    interface TestInterface

    {

    int x = 4;  // Filed Declaration in Interface

    void getMethod();

     

    string getName();

    }

     

    abstract class TestAbstractClass

    {

    int i = 4;

    int k = 3;

    public abstract void getClassName();

    }

    It will generate a compile time error as :-

    Error    1    Interfaces cannot contain fields .

    So we need to omit Field Declaration in order to compile the code properly.

    interface TestInterface
    {
    void getMethod();
    string getName();
    }

    abstract class TestAbstractClass

    {

    int i = 4;

    int k = 3;

    public abstract void getClassName();

    }

    Above code compiles properly as no field declaration is there in Interface.

  4. An abstract class can have constructor declaration while an interface can not do so.

    So following code will not compile :-

    interface TestInterface

    {

    // Constructor Declaration

    public TestInterface()

    {

    }

    void getMethod();

    string getName();

    }

     

    abstract class TestAbstractClass

    {

    public TestAbstractClass()

    {

    }

    int i = 4;

    int k = 3;

    public abstract void getClassName();

    }

    Above code will generate a compile time error as :-

    Error    1    Interfaces cannot contain constructors

    So we need to omit constructor declaration from interface in order to compile  our code .

    Following code compile s perfectly :-

    interface TestInterface

    {

    void getMethod();

    string getName();

    }

     

    abstract class TestAbstractClass

    {

    public TestAbstractClass()

    {

    }

    int i = 4;

    int k = 3;

    public abstract void getClassName();

    }

  5. An abstract Class is allowed to have all access modifiers for all of its member declaration while in interface  we can not declare any access modifier(including public) as all the members of interface are implicitly public.

    Note here I am talking about the access specifiers of the member of interface and not about the interface.

    Following code will explain it better :-

    It is perfectly legal to give provide access specifier as  Public (Remember only public is allowed)

    public interface TestInterface

    {

        void getMethod();

        string getName();

    }

    Above code compiles perfectly.

    It is not allowed to give any access specifier to the members of the Interface.

    interface TestInterface

    {

    public void getMethod();

    public string getName();

    }

    Above code will generate a compile time error as :-

    Error    1    The modifier ‘public’ is not valid for this item.

    But the best way of declaring Interface will be to avoid access specifier on interface as well as members of interface.

    interface Test

    {

    void getMethod();

    string getName();

    }

Posted in C#, Java | Leave a Comment »