Hôm nay tôi viết bài này vì gàn đây tôi bắt gặp khá nhiều bạn hỏi hiệu ứng nọ kia bằng jquery. Tôi không có ý nói và cũng không thể nói việc đi từ A đến B phải đi bằng con đường này mà không phải là con đường kia. Và việc dùng thế nào là quyền của người dùng, miễn sao họ tới dích là được. Thậm trí tôi còn ủng hộ xu hướng "đa đảng" vì có như thế mới có sự phát triển nếu không html, css hay jq sẽ độc tôn và dừng một chỗ.
Qua nhiều câu hỏi và các demo dường như nhiều bạn đang lạm dụng jquery nhiều hơn là tham khảo tìm tòi học hỏi. Vì có nhiều hiệu ứng khá đơn giản mà vẫn dùng jquery, có vẻ một số chưa học html css một cách nghiêm túc nhất, thực tế thì cho dù bạn có đến lớp gặp thầy dạy html css thì cũng không ai dạy bạn hết món. Chỉ có tự học trên w3c lần lượt từ đầu và tham khảo các ví dụ ở mấy trang nước ngoài mới vỡ ra nhiều điều.
Thực tế html css ngày nay có thể làm được nhiều việc hơn mọi ngưởi tưởng, các hiệu ứng chuyển động, xử lý thời gian, thuộc tính sự kiện, thậm trí đến cả tính toán mà không cần đụng đến dòng <script> nào
Vậy nên ngoại trừ học hỏi tìm hiểu những thứ lặt vặt trong jquery để góp vốn xây dựng những tiện ích lớn hơn thì những gì html css không thể làm được thì mới phải cầu đến jquery hoặc loại JavaScript Frameworks khác. Mặt khác khi tham khảo các ứng dụng lạ lạ của nước ngoài đôi khi họ cũng tính toán tìm một loại Framework Javascript thích hợp nhất chứ không nhất thiết phải Jquery như thói quen số đông Việt Nam.
Một điểm yếu của html css là sự lỗi thời của một số trình duyệt bảo thủ như IE vì nó là "doanh nghiệp nhà nước". Có nhiều cái không có tác dụng.
Nhưng ưu điểm lớn nhất là nhẹ, ngắn, chạy nhanh hơn.
Còn nhược điểm của jquery là dài dòng, chậm. Nếu áp dụng không đúng chỗ thì nó giống như cảnh bạn dùng ô tô để chở 1 cái bánh mì nhỏ thay vì đi bộ hoặc xe đạp sẽ tiện hơn.

thaotrinh

jquery là gì, lạm dụng jquery, tận dụng html css, lợi thế của html, JavaScript Frameworks css

Có nhiều cách khác nhau để website tự động chuyển trang
Ở đây tôi giới thiệu một mẹo nhỏ dùng javascript đo kích thước màn hình thiết bị, tùy kích thước màn hình thì nó sẽ tự động chuyển trang. Hiện tượng này tương tự như khi truy cập dantri.vn trên di động.

<script type="text/javascript">
//<![CDATA[
document.write("<p>Kích thước màn hình của máy bạn là: " + screen.width + " x " + screen.height + "</p>");
if(screen.width>=100)
    {self.location = "http://m.bendoi.vn";}
//]]>
</script>

thaotrinh

javascript đo kích thước màn hình, javascript measurement sizes of the screen

Đây là code bằng js đơn giản, dùng js tìm kiếm những thừ khóa được liệt kê, những từ khóa này sẽ bị thay thế bằng những chuỗi ký tự tùy ý. Chúng ta ứng dụng nó vào việc như: Tự động chèn link vào từ khóa, tự động tạo định dạng cho từ khóa, hoặc tạo hiệu ứng khi di chuột vào từ khóa sẽ xuất hiện box quảng cáo.

 <script type='text/javascript'>
window.onload=function replaceText()
{
if(!document.getElementById){return;}
bodyText = document.getElementById("bodytext");
theText = bodyText.innerHTML;
theText = theText.replace(/bd/gi, "<a href=\'http://bendoi.vn\' target=\'_blank\'/>bên đời</a> ");
theText = theText.replace(/facebook/gi, "<b>facebook</b> ");
theText = theText.replace(/fb/gi, "<a href=\'https://www.facebook.com/groups/bendoibendoi/\' target=\'_blank\'>bendoibendoi</a>");
bodyText.innerHTML = theText;
}
replaceText();
</script>
<div id="bodytext">
bd có trang facebook là fb
</div>

kết quả:

bên đời có trang facebook là bendoibendoi

Thao Trịnh

Khi lang thang vào những website chuyên giới thiệu các sản phẩm công nghệ, phong cách giao diện metro. Chúng ta thấy đôi khi họ sử dụng hiệu ứng trượt theo chiều ngang hoặc chiều dọc khá đẹp mắt.

Để làm được hiệu ứng đó, nhiều bạn cứ nghĩ phải đụng đến jquery hay đại loại là cần đến javascript. Và hầu hết các website giải quyết vấn đề theo cách này.
Với tôi thì nghĩ khác, tại sao chúng ta lại phải dùng js, nếu trinh duyệt tắt js thì sao. Trong khi vấn đề đó có thể được giải quyết đơn giản.



 Bài viết này là một demo mẫu viết bằng HTML + CSS, rất dễ tùy biết, nhanh gọn đẹp.

<style>
    #bendoi{width:500px; height:300px; border:0px solid #ccc; float:left;overflow:hidden;}
    .ngang, .doc {float:left; margin:5px; padding:5px; border:1px solid #ccc;display: block;overflow:hidden;box-align:center;text-align:center; min-width:50px; min-height:100px; position: relative;
    display: table-cell;vertical-align: middle;
    }
    /*ngang*/
    .ngang .trai {float: left;position: absolute;transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s;   -o-transition-duration: 1s;
      padding-top:35px}
 
   .ngang .phai { float: right;width: ;transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s;      -o-transition-duration: 1s; padding-top:35px}
 
    .ngang:hover .trai {margin-left: 120px;}
    .ngang:hover .phai {margin-right: 120px;}
    /*doc*/
    .doc .tren {position: absolute;transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s;   -o-transition-duration: 1s; top:10px}
 
   .doc .duoi {position: absolute;transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s;      -o-transition-duration: 1s;
      bottom:10px;}
 
    .doc:hover .tren {margin-top: 70px;}
    .doc:hover .duoi {margin-bottom: 70px;}
 
  </style>

  <div id="bendoi">
    <div class="ngang" style="width:150px; ">
      <div class="trai"> trai </div>
      <div class="phai"> phai </div>
    </div>
 
    <div class="doc" style="width:; height:;">
      <div class="tren"> tren </div>
      <div class="duoi"> duoi </div>
    </div>
 
 
    <div class="doc" style="width:; height:;">
      <div class="tren"> tren </div>
      <div class="duoi"> duoi </div>
    </div>
 
     <div class="ngang" style="width:150px; height:;">
      <div class="trai"> trai </div>
      <div class="phai"> phai </div>
    </div>
 
    <div class="ngang" style="width:150px;  height:;">
      <div class="trai"> trai </div>
      <div class="phai"> phai </div>
    </div>
 
    <div class="doc" style="width:; height:;">
      <div class="tren"> tren </div>
      <div class="duoi"> duoi </div>
    </div>
   
     <div class="ngang" style="width:150px; height:;">
      <div class="trai"> trai </div>
      <div class="phai"> phai </div>
    </div>
 
    <div class="doc" style="width:; height:;">
      <div class="tren"> tren </div>
      <div class="duoi"> duoi </div>
    </div>
 
  </div>   gửi email đến tôi nếu bạn muốn có một thiết kế riêng thật đẹp mắt và không "đụng hàng"

trai

phai

tren

duoi

tren

duoi

trai

phai

trai

phai

tren

duoi

trai

phai

tren

duoi

Thao Trinh

http://web.bendoi.vn/2013/09/css-hieu-ung-truot-len-xuong-trai-phai.html

Hồi mới đầu "vọc" web tôi không biết làm thế nào để hiện dòng chữ chú thích như "Nhập vào đây ..." mà mỗi khi click chuột vào đó thì chữ biến mất dành chỗ cho chúng ta gõ từ mới.
Tôi view source thấy có tý ứng dụng đó mà họ cũng cho nhiều dòng js. Rồi tôi lên các forum hỏi cũng không nhận được sự trả lời ưng ý. Cuối cùng sau thời gian tự học web căn bản đi từ HTML mà lên cuối cùng tôi thấy hóa ra những vấn đề tưởng phức tạp lại giả quyết rất đơn giản nếu chúng ta nắm chắc kiến thức cơ bản.

Hôm nay tôi giới thiệu 2 kiểu code cho chúng ta hiệu ứng này, nhưng tôi vẫn khuyên bạn nếu làm web thì nên học thật chắc kiến thức cơ bản, để đừng phức tạp hóa vấn đề. Tôi biết có nhiều bạn trẻ, làm blog cũng khá đẹp và cũng có thể nói là sớm có sản phẩm & kinh nghiệm. Nhưng các bạn ấy, làm web theo kiểu ngọn, sử dụng khá tốt mã nguồn mở, biết ứng dụng hoặc module cho web và tất nhiên xây nhà cũng rất nhanh. Tuy nhiên lệ thuộc quá nhiều vào mã nguồn, các ứng dụng được viết sẵn, đụng tý là đi tìm ứng dụng thay vì nhận ra rằng vấn đề đó có thể giải quyết theo hướng nào.

Bạn nên biết rằng hầu hết các tiện ích không liên quan đến cơ sở dữ liệu, tức là không cần phải lưu thông tin gì lên database website hoặc không liên quan đến "cân đo đong đếm" bài viết, những tiện ích ấy hầu hết viết bằng HTML + CSS + JAVASCRIPT. Đây là ngôn ngữ cơ bản trong các website, nó hoạt động trên bất kỳ website nào, bạn đừng bận tâm đến các mã nguồn. Mà nên chăng hiểu nó và ứng dụng nó vào các mục đích khác nhau.

Để ứng dụng hiệu ứng này có 2 cách chính:
Cách 1: Thêm thuộc tính sự kiện vào input text

<input type="text" onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' value='Nhập từ cần tìm vào đây'/>

Ví dụ:

Cách 2: Thêm placeholder vào input text với HTML5

<input type="text" value=""  placeholder="Nhập từ cần tìm vào đây"/><br/>

Ví dụ:

Thao trinh

http://web.bendoi.vn/2013/09/html-hien-thi-chu-thich-giu-cho-trong.html

 Đây là code hiển thị một popup lên màn hình khi bạn click vào một liên kết. Tôi tìm thấy code này tại một site blogger Ấn Độ. Tại Việt Nam, một số blogger nổi tiếng cũng đã giới thiệu lại thủ thuật này, tuy nhiên nội dung js bỏ vào link js, css lại rồi thêm nội dung khác vào popup. Do đó mọi người có thể khó xác định nguồn và sử dụng nó hơi thụ động nếu không quen code.

Bài này tôi giới thiệu code cơ bản để các bạn nhanh hiểu, dễ tùy biến, tường minh về các phong cách. Cùng một thủ thuật này, có 2 kiểu hiệu ứng.
1. Để tắt khối popup thì phải click close.
2. Để tắt khối popup thì chỉ cần click vào màn hình hoặc click close cũng được

Hiệu ứng jquery hiện popup và tắt khi click vào nút close (cần nút tắt)

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//open popup
$("#pop").click(function(){
  $("#overlay_form").fadeIn(1000);
  positionPopup();
});
//close popup
$("#close").click(function(){
$("#overlay_form").fadeOut(500);
});
});
//position the popup at the center of the page
function positionPopup(){
  if(!$("#overlay_form").is(':visible')){
    return;
  }
  $("#overlay_form").css({
      left: ($(window).width() - $('#overlay_form').width()) / 2,
      top: ($(window).width() - $('#overlay_form').width()) / 7,
      position:'absolute'
  });
}
//maintain the popup at center of the page when browser resized
$(window).bind('resize',positionPopup);
</script>
<style>
#overlay_form{
position: absolute;
border: 5px solid gray;
padding: 10px;
background: white;
width: 270px;
height: 190px;
}
</style>
<a href="#" id="pop" >PopUp</a>
<br />
<div id="overlay_form" style="display:none">
<a href="#" id="close" >Close</a>
</div>

Hiệu ứng jquery hiện popup và tắt popup bằng cách click lên vị trí bất kỳ bên ngoài (có thể không cần nút close)

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//open popup
$("#pop").click(function(){
  $("#overlay_form").fadeIn(1000);
  $(".background_overlay").fadeIn(500);
  positionPopup();
});
//close popup
$("#close, .background_overlay").click(function(){
$("#overlay_form").fadeOut(500);
$(".background_overlay").fadeOut(500);
});
});
//position the popup at the center of the page
function positionPopup(){
  if(!$("#overlay_form").is(':visible')){
    return;
  }
  $("#overlay_form").css({
      left: ($(window).width() - $('#overlay_form').width()) / 2,
      top: ($(window).width() - $('#overlay_form').width()) / 7,
      position:'absolute'
  });
}
//maintain the popup at center of the page when browser resized
$(window).bind('resize',positionPopup);
</script>
<style>
#overlay_form{
position: absolute;
border: 5px solid #8DC748;
padding: 10px;
background: white;
width: 270px;
height: 190px;
z-index: 200;
}
.background_overlay { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 1; background:black; opacity: 0.5;}
</style>
<a href="#" id="pop" >PopUp</a>
<br />
<div class="background_overlay" style="display:none"></div>
<div id="overlay_form" style="display:none">
Nội dung ...
<a href="#" id="close" >Close</a>
</div>

Ở hai kiểu hiệu ứng trên, để hiện popup đều phải click lên một siêu liên kết. Nếu bạn muốn nó tự động xuất hiện popup khi load xong trang thì sửa lại phần js ở trên như sau:

Tức là loại bỏ dòng số 9 và dòng thứ 12 như hình trên
Ta có thể áp dụng cho 2 hiệu ứng trên. Tức là chúng ta sẽ có thêm 2 hiệu ứng nữa là:
3. Tự động hiện pupup, tắt popup bằng cách click vào nút close.
4. Tự động hiện popup, tắt popup bằng cách click bất kỳ bên ngoài popup (ko cần nút close)

Tham khảo

www.theonlytutorials.com/demo/typewriter/

Đây là hiệu ứng nhã từng chữ lên màn hình, giống như kiểu người ta đang đánh máy với thời gian thực. Code này Tôi sưu tầm từ một site ấn độ. Theo tôi để có hiệu ứng đánh máy như thế này, bạn phải thêm thư viện jquery vào site thì có vẻ hơi "tốn đất". Bạn nên áp dụng thủ thuật này khi mà site đã có file jquery đang áp dụng cho tính năng khác. Như vậy để tận dụng jquery.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
.typewrite{ font-size: 20px;}
.typing-cursor{ position: relative; display: inline-block; width: 8px; text-indent: -999em; background: #ccc;}
</style>
<script>
$(document).ready(function(){
//get the content
var content = $('.typewrite').html();
//find the length of the content
var contentLength = content.length;
var char = 0;
$('.typewrite').html('<span class="typing-cursor">|</span>');
//Here is the function
(function typeFunc() {  
//dynamic delay to get the typewriting feel
    var typingSpeed = Math.round(Math.random() * 120) + 60;
    setTimeout(function() {
        char++;
        var type = content.substring(0, char);
$('.typewrite').html(type + '<span class="typing-cursor">|</span>');
//recursive
        typeFunc();
    }, typingSpeed);
}());
});
</script>
<div class="typewrite">
  Những dòng chữ viết theo kiểu đánh máy! <br/>
  Những dòng chữ viết theo kiểu đánh máy! <br/>
  Những dòng chữ viết theo kiểu đánh máy! <br/>
  Những dòng chữ viết theo kiểu đánh máy! <br/>
</div>
 

Những dòng chữ viết theo kiểu đánh máy!
Những dòng chữ viết theo kiểu đánh máy!
Những dòng chữ viết theo kiểu đánh máy!
Những dòng chữ viết theo kiểu đánh máy!

Tham khảo!

http://www.theonlytutorials.com/demo/typewriter/

Khi viết giao diện website nếu không để ý chúng ta sẽ vướng vào việc chỉnh sửa các thuộc tính cho các thẻ HTML khá chầy chật, chỗ thì thế này, chỗ thì thế khác, thêm chỗ nọ, bớt chỗ kia dẫn đến không động bộ có thể bị thiếu hoặc lặp lại không cần thiết. Những thuộc tính này đã được các trình duyệt hoặc mã nguồn web đó mặc định, đừng tưởng cái gì mình chưa khái báo thì thuộc tính đó là không.
Việc các trình duyệt, thiết bị, mã nguồn có sẵn các thư viện css mặc định sẽ được tự động sử dụng nếu chúng ta không trực trực tiếp khai báo css, cũng có cái lợi những cũng có cái bất tiện.
Điều này thấy rất rõ trong mã nguồn đóng blogger (blogspot), hay thậm chí bạn code một trang html mới tinh trong máy bạn thì mặc định margin đã là 10px (tùy trình duyệt).

Do đó bạn thấy tầm quan trọng của remove css default rồi, để chắc ăn nhất, chúng ta sẽ reset css khi bắt đầu một giao diện.
Cách tiến hành:
Bước 1: Cập nhật tất cả các thẻ HTML.
Bước 2: Liệt kê danh sách những thẻ HTML mà site của bạn sử dụng và có thể sẽ sử dụng, nếu cảm thấy sẽ chẳng có nhu cầu dùng đến thì thôi.
Bước 3: Chia các thẻ này theo nhóm. Những thẻ nào có chung một thuộc tính hoặc vài thuộc tính giống nhau thì thành một nhóm. Những thẻ được sử dụng những chưa xác định thuộc cụ thể thì cũng chung một nhóm.
Bước 4: Viết css cho các nhóm đó theo dạng

nhóm_1 {thuộc_tính_11: giá_trị_11; thuộc_tính_12: giá_trị_12; ...}
nhóm_2 {thuộc_tính_21: giá_trị_21; thuộc_tính_22: giá_trị_22; ...}
...
nhóm_trống {}

Bước 5: viết lại một số css xuống dưới, quy định riêng một số thuộc tính.

Ở đây tôi có một đoạn css tướng đối đủ dùng cho hầu hết các nhu cầu cơ bản. Các bạn tham khảo:
Đoạn css reset phải được viết trước tiên, sau đó mới load đến các css khác.

/*reset css*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,dfn,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video
{
border:0;
font:inherit;
font-size:100%;
margin:0;
padding:0;
vertical-align:baseline;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{ display:block;}
body{ line-height:1;}
ol,ul{ list-style:none;}
blockquote,q{ quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{ content:none;}
table{ border-collapse:collapse; border-spacing:0;}
b,u,i,del,em {/*lấy mặc định*/}
/*tùy ý css*/
...

http://web.bendoi.vn/2013/08/css-thu-thuat-reset-css.html

Để làm website tin tức thêm sinh động, chúng ta có thể nhúng thêm tiện ích tự động cập nhật tỷ giá ngoại tệ từ các ngân hàng. Đây là code php lấy thông tin tỷ giá các ngoại tệ từ vietcombank, cập nhật thường xuyên. Tôi đã sử lại code gốc để nó trông đẹp hơn và giống vietcombank, đồng thời tối ưu hơn với chuẩn html5 và load nhanh hơn so với trước phải dùng nhiều table lặp.
Tôi có 2 demo cho 2 kiểu xem, kiểu xem rộng và kiểu xem rut gọn để nhúng vào sidebar hoặc xem trên di động.

<!DOCTYPE html>
<html>
<head>
<title>Tỷ giá ngoại tệ vietcombank cập nhật</title>
<style>
/*skin:web.bendoi.vn*/
DIV.tygiangoaite {background:#0E5841;font: normal normal 13px  Tahoma; color:#fff;padding:5px}
table.tygiangoaite {    border-collapse: collapse;    width: 100%;}
table.tygiangoaite th { text-align: center; background:#6EAA58; font: bold normal 13px arial; color:#fff;}
table.tygiangoaite td { border: 1px dotted #ccc; padding:2px;}
table.tygiangoaite td.r {text-align: right;}
table.tygiangoaite tr:hover { background:#D4E6CC;}
</style>
</head>
<body>
<?php
class Rate{
var $source;
var $mydate;
function getXML(){return file_get_contents($this->source);}
function getRate(){
$xmlData = NULL;
$p = xml_parser_create();
xml_parse_into_struct($p,$this->getXML() , $xmlData);
xml_parser_free($p);
$this->mydate = $xmlData['1']['value'];
$data = array();
if($xmlData){
foreach($xmlData as $v)
if(isset($v['attributes']))
{$data[] = $v['attributes'];}
return $data;
}
return false;
}
function show(){$data = $this->getRate();
print '<table class="tygiangoaite">';
print '<tr class="th"><td colspan="5">Tỷ giá các ngoại tệ của Ngân hàng thương mại cổ phần Ngoại thương Việt Nam (Vietcombank) cập nhật '.$this->mydate.'</td></tr>';
print '<tr class="td"><td>Mã ngoại tệ</td><td>Tên ngoại tệ</td><td>Mua tiền mặt</td><td>Chuyển khoản</td><td>Bán</td></tr>';
foreach($data as $k=>$v){print '<tr><td>'.$v['CURRENCYCODE'].' </td><td>'.$v['CURRENCYNAME'].' </td><td class="r"> '.$v['BUY'].' </td><td class="r"> '.$v['TRANSFER'].'</td><td class="r">'.$v['SELL'].'</td></tr>';}
print '</table>';}}
$rate = new Rate();
$rate->source = 'http://www.vietcombank.com.vn/ExchangeRates/ExrateXML.aspx';
$rate->show();
?>
</body>
</html>

Bạn cũng có thể dùng luôn code dưới đây nhúng vào sidebar trong site của bạn cho nhanh gọn, bạn đặt đâu cũng được. Không cần chỉnh gì hết, nó tự động thu nhỏ cho vừa vùng chứa cho bạn.

<iframe style="height:420px;width:100%;border:0px;overflow:hidden;margin:0px;padding:0px;" src="http://bendoi.vn/tool/tygia/ngoai-te_vietcombank.php"></iframe>

http://web.bendoi.vn/2013/08/php-code-lay-ty-gia-ngoai-te-vietcombank.html

Background là thành phần trong css mà gần như ai thiết kế web cũng biết
Nói đến background là nghĩ ngay đến :
- Cách đơn giản nhất Background: #fff;
- Hoặc background:#ffcc00 url(link_img) repeat-x 0 50%; [#color] [link_img] [tính lặp] [vị trí]
Nếu bạn chưa rõ về kiểu viết thứ 2 ở trên thì xem lại bài về background trong phần tổng hợp css.

Tại bài này Tôi sẽ giới thiệu một số cách viết background phức tạp hơn. Đó là sự chuyển màu và các hướng chuyển màu mà trong css.
Cho tới thời điểm hiện nay, vẫn chưa có sự thống nhất chuẩn trong cách viết này, vì cách viết giống nhau không hẳn sẽ hiển thị giống nhau ở trình duyệt khác nhau, cách viết khác nhau có thể cho hiển thị như nhau dù cùng 1 trình duyệt. Tôi từng băn khoăn không biết mình nên viết theo kiểu nào để hiển thị được đúng nhất cho nhiều trình duyệt nhất và tôi đã giải quyết vấn đề này như sau, mời các bạn theo dõi.

Nói đến sự chuyển màu bạn sẽ thấy hiện nay có những loại chuyển màu sau:
- Linear Gradient : dạng đường thẳng.
- Ridial Gradient: dạng tròn.

Đối với loại hòa trộn màu theo dạng thẳng Linear Gradient
Phương màu sẽ được tạo ra từ điểm màu đầu tiên đến điểm màu cuối cùng, phương màu đi qua mổi điểm ảnh thì các điểm ảnh vuông góc với phương màu sẽ thay đổi một giá trị so với màu kế bên.
Cú pháp cơ bản:

Background: -[kiểu trình duyệt]-[tính lặp]-linear-gradient ([phương hướng màu], [màu 1] [vị trí màu 1],  [màu 2] [vị trí màu 2],  [màu 3] [vị trí màu 3],  [màu n] [vị trí màu n]);

- Kiểu trình duyệt: o, moz, webkit, ms.

- Tính lặp:
Giá trị: repeating có thể có hoặc không.

- Phương hướng màu gồm 2 loại:

+ Phương hướng cơ bản:
Có kiểu viết đầy đủ là [x_bắt_đầu  y_bắt_đầu], [x_kết_thúc  y_kết_thúc]
trong đó X là LEFT, RIGHT. Y là TOP, BOTTOM
ví dụ : LEFT TOP, RIGHT BOTTOM
Tuy nhiên nếu là phướng thẳng đứng (90deg) hoặc ngang (0deg) thì chỉ cần viết  y_kết_thúc

+  Phương hướng tùy chọn: viết cụ thể số góc mong muốn: ví dụ: 15deg, 30deg, 40deg, 50deg,...

- Màu:
Viết thieo kiển HEX (ví dụ: #ffcc00) hoặc RGB (ví dụ: rgb(0,100,255))

- Vị trí màu: giá trị từ điểm đầu tiên (0%) đến điểm cuối cùng (100%)

Tôi thấy cách viết đầy đủ nhất, tương thích với nhiều trình duyệt thì nên viết như sau:

background: #0B751D; /*phòng trường hợp xấu nhất*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0B751D, endColorstr=#1B8025);/* Internet Explorer 5.5 - 7 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#0B751D, endColorstr=#1B8025)";    /* For Internet Explorer 8 */
background-image: -ms-linear-gradient(bottom, #0B751D 0%, #EBEBEB 52%, #1B8025 100%); /* Internet exlorer 9+ */
background-image: linear-gradient(bottom, #0B751D 0%, #EBEBEB 52%, #1B8025 100%); /*chuẩn chung*/
background-image: -o-linear-gradient(bottom, #0B751D 0%, #EBEBEB 52%, #1B8025 100%); /* opera */
background-image: -moz-linear-gradient(bottom, #0B751D 0%, #EBEBEB 52%, #1B8025 100%); /* mozilla firefox */
background-image: -webkit-linear-gradient(bottom, #0B751D 0%, #EBEBEB 52%, #1B8025 100%); /* Google Chrome,...*/
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #0B751D), color-stop(0.52, #EBEBEB), color-stop(1, #1B8025));

Kiểu hòa trộn màu dạng tròn Ridial Gradient

Cú pháp chung:

background-image: -[Kiểu trình duyệt]-[tính lặp]-radial-gradient([vị trí tâm], [hình dạng] [phạm vi], [màu 1]  [vị trí màu 1], [màu 2] [vị trí màu 2], [màu 3] [vị trí màu 3], [màu n] [vị trí màu n])

- Kiểu trình duyệt o, moz, webkit, ms

- Tính lặp
Giá trị: repeating có thể có hoặc không.

- Vị trí tâmVị trí tâm màu thứ 1 so với khung hình của DIV. Cú pháp [X] [Y]. Có 2 loại vị trí.
Vị trí cơ bản: Giá trị X là: LEFT, CENTER, RIGHT. Giá trị Y là: TOP, CENTER, BOTTOM.
Vị trí tùy chọn: Đơn vị là PX, EM, %. Ví dụ: 20px, 2em, 50%.
Do đó có thể viết: 20px center hoặc 50% 30% hoặc 50px 100px.

- Hình dạng
Chỉ có 2 giá trị: ellipse hoặc circle

- Phạm vi
Hiện nay có 6 loại giá trị mặc định sau:
closest side (bên gần nhất)
closest corner (góc gần nhất)
farthest side (phía xa nhất)
farthest corner (góc xa nhất)
contain (chứa)
cover (che)

- Màu:
Có 2 loại hệ màu: Màu loại RGR-A (ví dụ rgba(184, 138, 79, 0.4)) hoặc HEX (ví dụ: #ccdd00)
- Vị trí màu:
là vị trí từ tâm màu thứ nhất đến màu thứ n. Đơn vị là PX, EM, %

Ví dụ hoàn chỉnh:

background-color:rgba(255, 255, 255, 0.6);
background-image: -moz-radial-gradient(21% 44%, ellipse cover, rgba(255, 255, 255, 0.6), rgba(93, 153, 95, 0.4) -100%,rgba(184, 138, 79, 0.2) 100%);
background-image: -webkit-radial-gradient(21% 44%, ellipse cover, rgba(255, 255, 255, 0.6), rgba(93, 153, 95, 0.4) -100%,rgba(184, 138, 79, 0.2) 100%);
background-image: -o-radial-gradient(21% 44%, ellipse cover, rgba(255, 255, 255, 0.6), rgba(93, 153, 95, 0.4) -100%,rgba(184, 138, 79, 0.2) 100%);
background-image: -ms-radial-gradient(21% 44%, ellipse cover, rgba(255, 255, 255, 0.6), rgba(93, 153, 95, 0.4) -100%,rgba(184, 138, 79, 0.2) 100%);
background-image: radial-gradient(21% 44%, ellipse cover, rgba(255, 255, 255, 0.6), rgba(93, 153, 95, 0.4) -100%,rgba(184, 138, 79, 0.2) 100%)

Như vậy, tôi đã giới thiệu các bạn 2 kiểu trộn màu cơ bản nhất. Kỹ thuật này vẫn đang được phát triển nên các bạn có thể tham khảo các tài liệu phân tích về vấn đề này tại đây:

• http://dev.w3.org/csswg/css-images-3/
• http://lists.w3.org/Archives/Public/www-style/2011Sep/0019.html
• https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-radial-gradient
• https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
• ...

Bạn xem thêm vài ví dụ :...

thao trinh

http://web.bendoi.vn/2013/08/Background-linear-gradient-Background-radial-gradient.html

 Để làm ẩn/hiện một đối tượng, về thao tác chúng ta có 2 cách:
- Một là hover vào layer0 sẽ xuất hiện layer1: Với cách này chúng ta dùng CSS

.layer0 {position:relative}
.layer0 .layer1 {position:absolute; display:none}
.layer0:hover .layer1{display:block;}

- Click vào layer0 sẽ làm ẩn/hiện layer1
Tuy nhiên CSS hiện nay không có thuộc tính :click tương tự như :hover Vậy nên ta đành dùng javascript để sử dụng click
Code dưới đây sử dụng jquery làm ẩn/hiện một đối tượng nào đó, nó thường được ứng dụng làm menu click hoặc sử dụng trong bài viết cho gọn tương tự như <details> trong HTML. Hay có têể ứng dụng làm Tab.

<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.1.js'></script>
<script>
jQuery(document).ready(function() {
jQuery("#layer0").click(function(){
jQuery("#layer1").slideToggle("slow");
jQuery(this).toggleClass("active"); return true;
});
});
</script>
<style>
  #layer0 {position:relative;}
  #layer1 {position:absolute; display:none; background:#eee;padding:10px}
</style>
<div id="layer0">  Bạn click vào đây
  <div id="layer1">Nội dung này được ẩn/hiện, nếu bạn không dùng css hoặc không dùng thuộc tính position:absolute thì mỗi lần hiện nó sẽ ảnh chèn vào vị trí xung quan tương tự như thẻ &lt;delails&gt; trong HTML5<br/>Còn nếu có position:absolute thì sự xuất hiện của nó không ảnh hưởng đến các đối tượng khác trong trang</div>
</div>

DEMO: Bạn click vào đây

Nội dung này được ẩn/hiện, nếu bạn không dùng css hoặc không dùng thuộc tính position:absolute thì mỗi lần hiện nó sẽ ảnh chèn vào vị trí xung quan tương tự như thẻ <delails> trong HTML5
Còn nếu có position:absolute thì sự xuất hiện của nó không ảnh hưởng đến các đối tượng khác trong trang

Bài đăng này còn một lỗi bất cập, mĩnh sẽ khắc phục sau

http://web.bendoi.vn/2013/07/jquery-click-an-hien-mot-doi-tuong.html

 Đây là code có sử dụng jquery có tác dụng căn một đối tượng ra giữa màn hình với bất kỳ màn hình nào, nó không phụ thuộc vào độ rộng dài của trang web mà phụ thuộc vào cỡ màn hình để lựa chọn vị trí giữa.

<script src="http://code.jquery.com/jquery-1.7.1.js"  type='text/javascript'></script>
<script type='text/javascript'>function resizePopup() {$("#popuplayer1").css({height:$(window).height(),width:$(window).width() });}$(function() { resizePopup(); });$(window).resize(function() { resizePopup(); }); </script>
 <style>
#popuplayer0{position: fixed;left:0px;top:0px;}
#popuplayer1 {display: table-cell;vertical-align: middle;text-align:center;background:#ccc;opacity:0.8;}
#popupcontent {width:255px;padding: 10px;display:inline-block;box-shadow: 0px 0px 50px 5px;background:#A6CDA4;}
</style>
<div id='popuplayer0'>
<div id='popuplayer1'>
<div id='popupcontent'>
Nội dung HTML <br/> <b>blog.bendoi.vn</b>
</div>
</div>
 </div>

sưu tầm có sửa chữa và chắp vá code

http://web.bendoi.vn/2013/07/jquery-tu-dong-co-dinh-doi-tuong-tai-trung-tam.html

Trước tiên tôi phải nói là đây không phải là bài viết "mì ăn liền". Mà là bài viết để bạn đọc hiểu về bản chất của việc thiết kế menu thả xuống nhiều cấp.
Trước tiên để hiểu bài bạn cần nắm được kiến thức cơ bản HTML & CSS chỉ có vậy thôi, không cần ngôn ngữ cao siêu nào khác.
Để bắt đầu tạo một menu thả xuống, tất nhiên ta phải đi tìm hiểu làm thử một cái ví dụ đơn giản nhất khi di chuột vào một đối tượng gốc, sẽ hiển thị ra một đối tượng thứ 2.
Ví dụ đơn giản nhất:

<style>
.layer0{position: relative;}
.layer0 .layer1{display:none;}
.layer0:hover .layer1{display:block; position: absolute;}
</style>
<div class="layer0" >layer0 <div class="layer1">layer1</div></div>

layer0

layer1

Nếu thêm những cấp nữa thì thế nào?
Bao nhiêu cấp ta viết bấy nhiêu hiệu ứng hover. Khi di chuột vào cấp n thì cấp n+1 sẽ xuất hiện

<style>
.layer00{position: relative;}
.layer00 .layer01{display:none;}
.layer00:hover .layer01{display:block; position: absolute;}
.layer00 .layer01 .layer02{display:none;}
.layer00:hover .layer01:hover .layer02{display:block; position: absolute; }
.layer00 .layer01 .layer02 .layer03{display:none;}
.layer00:hover .layer01:hover .layer02:hover .layer03{display:block; position: absolute; }
</style>
<div class="layer00">layer00
<div class="layer01">layer01
<div class="layer02">layer02
<div class="layer03">layer03</div>
</div>
</div>
</div>

layer00

layer01

layer02

layer03

Hoặc có thể viết gọn hơn:

<style>
.layer-0{position: relative;}
.layer-1,.layer-2,.layer-3{display:none;position: absolute;}
.layer-0:hover .layer-1,.layer-1:hover .layer-2,.layer-2:hover .layer-3{display:block;}
</style>
<div class="layer00">layer00
<div class="layer01">layer01
<div class="layer02">layer02
<div class="layer03">layer03</div>
</div>
</div>
</div>

layer-0

layer-1

layer-2

layer-3

---

Như vậy đó là đối với những trường hợp menu có số cấp đã xác định trước, mặc dù chúng ta thường chỉ làm menu có 2,3,4 đến 5 cấp là cùng. Nhưng đôi khi lại muốn vô số cấp, có thể là 10 hoặc 20 cấp mà không xác định trước, chẳng lẽ cứ lặp lại 10-20 lần css như thế.
Để giải quyết vấn đề này về mặt HTML chúng ta sẽ dùng <li>...</li> thay cho <div...>...</div>
Về mặt css sẽ dùng li:hover >ul thay cho hàng loạt lớp con của một đối tượng.

<style>
#nav {
display:inline-block;
width:100%;
background:#ccc;
}
#nav li {
position: relative;
list-style:none;
float:left;
margin:1;
padding:10;
}
#nav ul {
display: none;
position: absolute;
}
#nav li:hover >ul {
display: block;
z-index:1;
padding:0;
width:110px;
background:#E4F1F1;
box-shadow:5px 5px 20px 2px #999999;
}
#nav1 ul li { float:none; margin:0;}
#nav1 ul ul { left:100px;top:0;}
</style>
<ul id="nav">
<li>001</li>
<li>002</li>
<li>004
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</li>
<li>005
<ul>
<li>1-1</li>
<li>1-2+
<ul>
<li>2-1</li>
<li>2-2</li>
<li>2-3+
<ul>
<li>3-1</li>
<li>3-2</li>
<li>3-3</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

• 001
• 002
• 004
  • ...
  • ...
  • ...
• 005
  • 1-1
  • 1-2+
    • 2-1
    • 2-2
    • 2-3+
      • 3-1
      • 3-2
      • 3-3

---

Hoặc có thể viết :

<style>
#nav1 {
display:inline-block;
width:100%;
background:#ccc
}
#nav1 li {
position: relative;
list-style:none;
float:left;
margin:1;
padding:10;
}
#nav1 li:hover > ul { visibility:visible; }
#nav1 ul {
visibility:hidden;
position:absolute;
z-index:1;
padding:0;
width:110px;
background:#E4F1F1;
box-shadow:5px 5px 20px 2px #999999;
}
#nav1 ul li { float:none; margin:0;}
#nav1 ul ul { left:100px;top:0;}
</style>
<ul id="nav1">
<li>001</li>
<li>002</li>
<li>004
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</li>
<li>005
<ul>
<li>1-1</li>
<li>1-2+
<ul>
<li>2-1</li>
<li>2-2</li>
<li>2-3+
<ul>
<li>3-1</li>
<li>3-2</li>
<li>3-3</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

• 001
• 002
• 004
  • ...
  • ...
  • ...
• 005
  • 1-1
  • 1-2+
    • 2-1
    • 2-2
    • 2-3+
      • 3-1
      • 3-2
      • 3-3

Như vậy code cơ bản đã có, vấn đề còn lại của mọi người là thêm gia vị (màu mè, hiệu ứng trượt, bóng đổ, bo góc, khung hình) vào để có một phong cách sinh động và phù hợp với trang sẽ ứng dụng.

thaotrinh bendoi.vn

BLOG.bendoi.vn

 Mục đính chính của mình ở bài này không phải là vẽ hình xe ô tô bằng css mà đó chỉ là một ví dụ để chúng ta hiểu cách làm, sử dụng linh hoạt vào việc vẽ nhiều hình khác bằng css. Tại đây hình xe tải bằng css, mình chỉ chú ý đến đường nét mà chưa tại màu nền chuyển, tuy nhiên với css vẫn có thể làm đẹp được hư hình vẽ.

Trước tiên tha xem ứng dụng làm dấu mũi tên chỉ hướng cho những chú thích:

<style>
    .note {
        position:absolute;
        background:#ddd;
        padding:10px;
    }
    .vecter {
        border-left:10px solid transparent;
        border-right:10px solid transparent;
        border-bottom:10px solid #ddd;
        top:-10px;
        right:20px;
        position:absolute;
    }
    .note2 {
        position:absolute;
        background:#ddd;
        padding:10px;
        border-radius:10px;
    }
    .vecter2 {
        border-radius:10px;
        border:10px solid #ddd;
        top:-10px;
        right:20px;
        position:absolute;
    }
</style>
<div class="note">Nội dung chú thích
  <span class="vecter"></span>
</div>
<br/><br/><br/><br/><br/>
<div class="note2">Nội dung chú thích
  <span class="vecter2"></span>
</div>

Nội dung chú thích

Nội dung chú thích

---

Bây giờ ta sẽ xem chiếc ô tô tải.

<style>
    .oto {
        position:absolute;
        background:#ddd;
        padding:10px;
        border-radius:5px;
        border-top-left-radius:25px;
    }
    .wheel {
        border-radius:50%;
        border:2px solid #fff;
        width:20px;
        height:20px;
        position:absolute;
        background:#ddd;
        bottom:-12px;
    }
    .wheel1 {        left:10px    }
    .wheel2 {        right:40px    }
    .wheel3 {        right:10px    }
    .coachwork {
        width:auto;
        height:4px;
        border-radius:5px;
        top:-4px;
        left:45px;
        right:1px;
        background:#ddd;
        position:absolute;
    }
    .space {
        width:3px;
        height:20px;
        background:#fff;
        position:absolute;
        top:-5px;
        left:45px
    }
</style>
<div class="oto">Nội dung chú thích Nội dung chú thích
  <span class="wheel wheel1"></span>
  <span class="wheel wheel2"></span>
  <span class="wheel wheel3"></span>
  <span class="space"></span>
  <span class="coachwork"></span>
</div>

Nội dung chú thích Nội dung chú thích

TTTj of bendoi.vn

 Đôi khi muốn trang trí một đoạn ghi chú hoặc coment nào đó, ta thường nghĩ đến làm cho nó một hình nền.
Với thủ thuật css này, ta chỉ cần css không dùng hình nền vẫn có một khung ghi chú với border/ backgrounf chấp nhận được.

<style>
#gloss-triangle p{position:relative;background:#51C1FF;padding:15px}
#gloss-triangle p:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:30px solid #51C1FF;border-right:30px solid transparent;width:0;height:0;line-height:0}
#gloss-circle p{position:relative;border-radius:50px;padding:10px;}
#gloss-circle p,#gloss-circle p:after,#gloss-circle p:before{border:5px solid #51C1FF;background:#fff}
#gloss-circle p:after{bottom:-20px;left:30px;width:20px;height:20px}
#gloss-circle p:before{bottom:-30px;left:60px;width:10px;height:10px}
#gloss-circle p:after,#gloss-circle p:before{content:"";position:absolute;border-radius:50%}  
#gloss-triangle1 p{position:relative;background:#51C1FF;padding:25px;height:50px;width:200px;border-radius:50%;line-height:}
#gloss-triangle1 p:after{content:"";position:absolute;bottom:-20px;left:50px;border-top:30px solid #51C1FF;border-right:30px solid transparent;width:0;height:0;line-height:0}
#gloss-circle1 p{position:relative; ;padding:10px;padding:25px;height:50px;width:200px;border-radius:50%;}
#gloss-circle1 p,#gloss-circle1 p:after,#gloss-circle1 p:before{background:#51C1FF}
#gloss-circle1 p:after{bottom:-15px;left:25px;width:50px;height:30px}
#gloss-circle1 p:before{bottom:-30px;left:60px;width:30px;height:20px}
#gloss-circle1 p:after,#gloss-circle1 p:before{content:"";position:absolute;border-radius:50%}  
</style>
<div id="gloss-triangle">
<p> Khung chú thích đẹp mắt, có chỉ hướng hình tam giác vuông
</p>
</div>
<div id="gloss-circle">
<p> Khung chú thích đẹp mắt, có chỉ hướng hình tròn
</p>
</div>
<br/>
<div id="gloss-triangle1">
<p> Khung chú thích đẹp mắt, có chỉ hướng hình tròn
</p>
</div>
<br/>
<div id="gloss-circle1">
<p> Khung chú thích đẹp mắt, có chỉ hướng hình tròn
</p>
</div>

Khung chú thích đẹp mắt, có chỉ hướng hình tam giác vuông

Khung chú thích đẹp mắt, có chỉ hướng hình tròn

Khung chú thích đẹp mắt, có chỉ hướng hình tròn

Khung chú thích đẹp mắt, có chỉ hướng hình tròn

thaotrinh bendoi.vn

 Demo 1:

<style>
textarea.in{width:100%;height:500px;}
input.out{width:auto;border:0;}
</style>
<script>
  function dem()
  {
    str= fdem.text.value;
    fdem.kq.value=str.length;
  }
</script>
<form name='fdem' method='post' action='#'>
  <textarea name='text' onkeyup='dem()' onclick='this.select()' class='in'></textarea>
  <input name ='kq' class='out' />
</form>

TTTj - bendoi.vn

Đôi khi design website chúng ta cần một chút hình tam giác nho nhỏ để làm trang trí cho một góc hình nào đó.
Bạn có thể tham khảo một số kiểu sau đây:

<style>
        .triangle-left {
                height:0px;
                border-top: 100px solid transparent;
                border-bottom: 100px solid transparent;
                border-left: 100px solid rgb(179, 137, 62);
        }
        .triangle-right {
                height:0px;
                border-top: 100px solid transparent;
                border-bottom: 100px solid transparent;
                border-right: 100px solid rgb(179, 137, 62);
        }
        .triangle-bottom {
                width:0px;
                border-right: 100px solid transparent;
                border-left: 100px solid transparent;
                border-bottom: 100px solid rgb(179, 137, 62);
        }
        .triangle-top {
                width:0px;
                border-right: 100px solid transparent;
                border-left: 100px solid transparent;
                border-top: 100px solid rgb(179, 137, 62);
        }
        .triangle-top-left {
                width:0px;
                border-right: 100px solid transparent;
                border-top: 100px solid rgb(179, 137, 62);
        }
        .triangle-bottom-left {
                width:0px;
                border-right: 100px solid transparent;
                border-bottom: 100px solid rgb(179, 137, 62);
        }
        .triangle-bottom-right {
                width:0px;
                border-left: 100px solid transparent;
                border-bottom: 100px solid rgb(179, 137, 62);
        }
        .triangle-top-right {
                width:0px;
                border-left: 100px solid transparent;
                border-top: 100px solid rgb(179, 137, 62);
        }
</style>
<div class='triangle-left'>triangle-left</div>
<div class='triangle-right'>triangle-right</div>
<div class='triangle-bottom'>triangle-bottom</div>
<br/>
<div class='triangle-top'>triangle-top</div>
<div class='triangle-top-left'>triangle-top-left</div>
<div class='triangle-bottom-left'>triangle-bottom-left</div>
<div class='triangle-bottom-right'>triangle-bottom-right</div>
<br/>
<div class='triangle-top-right'>triangle-bottom-right</div>

triangle-left

triangle-right

triangle-bottom

triangle-top

triangle-top-left

triangle-bottom-left

triangle-bottom-right

triangle-bottom-right

---

thaoj!

<SCRIPT language=javascript>
<!--
document.onselectstart=new Function('return false');
function ds(e){return false;}
function ra(){return true;}
document.onmousedown=ds; /* mouse right*/
document.onclick=ra; /* mouse left*/
document.oncontextmenu = function (){ return false};
-->
</SCRIPT>

Còn nhiều kiểu viết khác tuy nhiên cách này ngắn gọn và hoạt động trên nhiều trình duyệt hiện tại.

Bạn nên biết nguyên lý rằng: Nội dung hiện lên màn hình người xem thì có nghĩa là dữ liệu đã về máy của họ, họ có thể sao chép những gì họ nhìn thấy nếu muốn. Nếu bạn chuyển Text thành ảnh thì người ta cũng chụp ảnh màn hình rồi dùng phần mềm Free tách chữ khỏi ảnh. Bạn cho người ta xem video nhưng không cho down quá lắm thì họ cũng dùng phần mềm Free quay phim lại màn hình là xong. Bạn dùng javascript chặn chuột phải thì khóa javascript trên trình duyệt thì bạn cũng hết cách.
Tóm lại đoạn javascript chỉ làm "dân ngồi máy lạnh" ngại copy chứ không thể ngăn mọi người copy.

<script language="javascript" type="text/javascript">
<!--
function jump(form) {
var myindex=form.menu.selectedIndex
if (form.menu.options[myindex].value != "0")
{
window.open(form.menu.options[myindex].value, target="_top");
}
}
//-->
</script>
<form>
<select name="menu" onchange="jump(this.form)">
<option value="http://...">...</option>
<optgroup label="Nhóm 1">
<option value="http://...">...</option>
<option value="http://...">...</option>
<option value="http://...">...</option>
</optgroup>
<optgroup label="Nhóm 2">
<option value="http://...">...</option>
<option value="http://...">...</option>
<option value="http://...">...</option>
</optgroup>
<optgroup label="Nhóm 3">
<option value="http://...">...</option>
<option value="http://...">...</option>
<option value="http://...">...</option>
</optgroup>
</select>
</form>

Nếu không phải bất cứ link nào cũng target="_blank" thì bạn thay bằng đoạn javacript để đáp ứng 1 số link cá biệt:

<script language="javascript" type="text/javascript">
<!--
function jump(form) {
var myindex=form.menu.selectedIndex
if (form.menu.options[myindex].value != "0")
{
if (form.menu.options[myindex].value == "http://web.bendoi.vn/2013/01/tong-hop-css.html")
{window.open(form.menu.options[myindex].value, target="_top");}
else
{
window.open(form.menu.options[myindex].value, target="_blank");
}
}
}
//-->
</script>

Demo:

Tổng hợp CSS _1,2,3 @keyframes : Dùng để điều khiển diễn biến một hoạt động của thành phần, được dùng kèm với thuộc tính animation. animation : Xác định một chuyển động của một thành phần animation-name : Xác định tên cho một animation. animation-duration : Xác định thời gian để hoàn thành một chu kỳ, mặc định là 0s, 0ms. (1s=1000ms).3 animation-timing-function : chỉ định tốc độ chuyển động animation-delay : Chỉ định các hình ảnh động sẽ bắt đầu animation-iteration-count : Xác định số lần thực hiện chuyển động. animation-direction : Chỉ định có / không chuyển động ngược lại trên các chu kỳ đi trước. animation-play-state : Chỉ định cho hành ảnh động chạy hoặc bị tạm dừng background : Thiết lập tất cả các thuộc tính nền trong một khai báo background-attachment : hình nền là cố định hoặc cuộn với phần còn lại của trang background-color : Thiết lập màu nền của một phần tử background-image : Thiết lập ảnh nền của một phần tử... background-position : Thiết lập vị trí bắt đầu của một hình ảnh nền background-repeat : Thiết lập một hình ảnh nền sẽ được lặp đi lặp lại như thế nào background-clip : Chỉ định khu vực bức tranh của nền background-origin : Chỉ định khu vực vị trí của các hình ảnh nền background-size : Chỉ định kích thước của các hình ảnh nền border : Thiết lập tất cả các thuộc tính đường viền trong một khai báo border-bottom : Xác định đường viền bên dưới. border-bottom-color : Xác định màu sắc cho đường viền bên dưới. border-bottom-style : Xác định hình dạng của đường viền dưới border-bottom-width : ác định bề dày cho đường viền bên dưới. border-color : Xác định màu sắc cho tất cả các đường viền xung quanh. border-left : Thiết lập tất cả các thuộc tính đường biên lề trái trong một khai báo border-left-color : Xác định màu sắc cho đường viền bên trái. border-left-style : Thiết lập phong cách của đường viền trái border-left-width : Thiết lập độ rộng của đường viền trái border-right : Thiết lập tất cả các thuộc tính đường viền trong một tuyên bố border-right-color : Thiết lập màu sắc của đường viền bên phải border-right-style : Thiết lập phong cách đường viền bên phải border-right-width : Thiết lập độ rộng của đường viền phải border-style : Xác định hình dạng của đường viền border-top : Xác định đường viền bên trên. border-top-color : Xác định màu sắc cho đường viền bên trên. border-top-style : Xác định hình dạng của đường viền trên border-top-width : Xác định bề dày cho đường viền bên trên. border-width : Thiết lập độ rộng của bốn đường viền outline : hiết lập tất cả các thuộc tính đường viền trong một khai báo outline-color : Sets the color of an outline outline-style : Sets the style of an outline outline-width : Sets the width of an outline border-bottom-left-radius : Xác định hình dạng của đường đường viền của các góc dưới bên trái border-bottom-right-radius : Xác định hình dạng của đường đường viền của các góc dưới bên phải border-image : Dùng để định dạng các dạng border bằng hình ảnh. border-image-outset : viết tắt cho thiết lập tất cả các đường viền ảnh (thực tế người ta viết sau border-image) border-image-repeat : Thiết lập kiểu lặp lại hình ảnh. Nó thường ko viết riêng lẽ mà viết chung với thuộc tính border-image border-image-slice : Chỉ định bù đắp vào phía trong của hình ảnh biên border-image-source : Specifies an image to be used as a border Chỉ định một hình ảnh được sử dụng như một đường viền border-image-width : Specifies the widths of the image-border Chỉ định độ rộng của hình ảnh biên border-radius : Thiết lập bán kính 4 góc đường biên trong 1 lần khai báo border-top-left-radius : Xác định hình dạng của đường đường viền của các góc trên bên trái border-top-right-radius : Xác định hình dạng của đường đường viền của các góc trên bên phải box-decoration-break * :   box-shadow : Gắn một hoặc nhiều ánh sáng bóng đổ vào hộp overflow-x : Chỉ định có hay không để cắt các cạnh trái / phải của nội dung, nếu nó tràn khu vực nội dung của phần tử overflow-y : Chỉ định có hay không để cắt các cạnh trái / phải của nội dung, nếu nó tràn khu vực nội dung của phần tử overflow-style : Chỉ rõ phương thức di chuyển ưa thích cho các yếu tố tràn rotation * : Xoay đối tượng quanh 1 điểm cho trước rotation-point : Xác định một điểm như là một bù đắp từ các cạnh đường viền trên bên trái color : Màu color-profile * : Cho phép các đặc điểm kỹ thuật của một hồ sơ màu nguồn khác với mặc định * opacity : độ trong suốt của thành phần rendering-intent * : Cho phép các đặc điểm kỹ thuật về màu đối tượng khác với màu mặc định bookmark-label * : Xác định nhãn của các dấu trang bookmark-level * : Chỉ định mức độ của các dấu trang bookmark-target * : Chỉ định các mục tiêu của liên kết bookmark float-offset * : Đẩy các yếu tố lưu hành theo hướng ngược lại của họ đã được lưu hành với phao hyphenate-after * : Chỉ định số lượng tối thiểu các ký tự trong một từ hyphenated sau khi ký tự gạch nối hyphenate-before * : Chỉ định số lượng tối thiểu các ký tự trong một từ hyphenated trước khi ký tự gạch nối hyphenate-character * : Chỉ định một chuỗi được hiển thị khi một gạch nối phá vỡ xảy ra hyphenate-lines * : Cho biết số lượng tối đa của dòng kế tiếp hyphenated trong một phần tử hyphenate-resource * : Chỉ định một danh sách được phân cách bằng dấu phẩy giúp trình duyệt xác định điểm dùng dấu gạch nối hyphens * : Đặt làm thế nào để phân chia các từ để cải thiện bố cục đoạn văn image-resolution * : Chỉ định độ phân giải chính xác của hình ảnh marks * : Thêm cây trồng và / hoặc các dấu chéo vào tài liệu string-set * :   height : Thiết lập chiều cao của một phần tử max-height : Thiết lập chiều cao tối đa của một phần tử max-width : Thiết lập chiều rộng tối đa của một phần tử min-height : Thiết lập chiều cao tối thiểu của một phần tử min-width : Thiết lập chiều rộng tối thiểu của một phần tử width : Bộ chiều rộng của một phần tử box-align : Xác định vị trí cho thành phần theo chiều dọc hoặc theo chiều thẳng đứng. box-direction : Xác định chiều load các đối tượng theo chiều trái <-> phải box-flex : Xác định sự ưu tiên linh hoạt theo các thành phần khác. box-flex-group * : Gán các yếu tố linh hoạt để flex nhóm box-lines : Chỉ định cột sẽ đi vào một dòng mới bất cứ khi nào nó chạy ra khỏi không gian trong hộp box-ordinal-group : Chỉ định thứ tự hiển thị của các phần tử con của một hộp box-orient : Xác định thành phần dọc theo phương hướng khối hoặc theo trục. box-pack : Định vị trí của thành phần theo mép rìa của thành phần. font : Thiết lập tất cả các thuộc tính phông chữ trong một khai báo font-family : Chỉ định font cho văn bản font-size : Chỉ định kích thước font chữ của văn bản font-style : Chỉ định kiểu font chữ cho văn bản font-variant : Chỉ định có hay không một văn bản sẽ được hiển thị trong một phông chữ nhỏ mũ font-weight : Xác định độ dày của một font chữ @font-face : Cho phép các trang web để tải về và sử dụng phông chữ khác với font chữ có trong máy font-size-adjust : Bảo tồn khả năng đọc văn bản khi font chữ dự phòng xảy ra font-stretch : Kéo giản font chữ content : Được sử dụng với: :before and :after để chèn nội dung được tạo ra counter-increment : Thuộc tính counter-increment khi sử dụng sẽ gia tăng một hoặc nhiều counter (sắp xếp có thứ tự, có hiển thị số) counter-reset : Tạo hoặc reset một hoặc nhiều counter. quotes : Thiết lập các loại dấu ngoặc kép để trích dẫn "..." crop * : Allows a replaced element to be just a rectangular area of an object, instead of the whole object move-to * : Causes an element to be removed from the flow and reinserted at a later point in the document page-policy * : Determines which page-based occurance of a given element is applied to a counter or string value grid-columns * : Xác định chiều rộng của mỗi cột grid-rows * : Xác định chiều rộng của mỗi dòng target * : A shorthand property for setting the target-name, target-new, and target-position properties target-name * : Specifies where to open links (target destination) target-new * : Specifies whether new destination links should open in a cửa sổ mới hoặc in a new tab of an existing window target-position * : Specifies where new destination links should be placed alignment-adjust * : Allows more precise alignment of elements alignment-baseline * : Specifies how an inline-level element is aligned with respect to its parent baseline-shift * : Allows repositioning of the dominant-baseline relative to the dominant-baseline dominant-baseline * : Specifies a scaled-baseline-table drop-initial-after-adjust * : Sets the alignment point of the drop initial for the primary connection point drop-initial-after-align * : Sets which alignment line within the initial line box is used at the primary connection point with the initial letter box drop-initial-before-adjust * : Sets the alignment point of the drop initial for the secondary connection point drop-initial-before-align * : Sets which alignment line within the initial line box is used at the secondary connection point with the initial letter box drop-initial-size * : Controls the partial sinking of the initial letter drop-initial-value * : Activates a drop-initial effect inline-box-align * : Sets which line of a multi-line inline block align with the previous and next inline elements within a line line-stacking * : A shorthand property for setting the line-stacking-strategy, line-stacking-ruby, and line-stacking-shift properties line-stacking-ruby * : Sets the line stacking method for block elements containing ruby annotation elements line-stacking-shift * : Sets the line stacking method for block elements containing elements with base-shift line-stacking-strategy * : Sets the line stacking strategy for stacked line boxes within a containing block element text-height * : Sets the block-progression dimension of the text content area of an inline box list-style : hiết lập tất cả thuộc tính cho một danh sách trong một khai báo list-style-image : Chỉ định một hình ảnh như danh sách các điểm đánh dấu mục list-style-position : Xác định nếu các dấu mục danh sách sẽ xuất hiện bên trong hoặc bên ngoài dòng chảy nội dung list-style-type : Chỉ định các loại đánh dấu mục danh sách (a,b,c; A,B,C; I,II,III;...) margin : Thiết lập tất cả các thuộc tính lề trong một khai báo margin-bottom : Thiết lập lề dưới của một phần tử margin-left : Thiết lập lề trái của một phần tử margin-right : Thiết lập lề phải của một phần tử margin-top : hiết lập lề trên của một phần tử marquee-direction * : Sets the direction of the moving content marquee-play-count * : Sets how many times the content move marquee-speed * : Sets how fast the content scrolls marquee-style * : Sets the style of the moving content column-count : Chỉ định số lượng các cột một phần tử được chia thành column-fill : Specifies how to fill columns column-gap : Chỉ định khoảng cách giữa các cột column-rule : Đường kẻ phân chia các cột column-rule-color : Chỉ định màu sắc của các quy tắc giữa các cột column-rule-style : Chỉ định phong cách của các quy tắc giữa các cột column-rule-width : Xác định chiều rộng của các quy tắc giữa các cột column-span : Số cột hiển thị tiền tố column-width : Xác định chiều rộng của các cột columns : thiết lập chiều rộng cột và cột số padding : Thiết lập tất cả các thuộc tính padding trong một khai báo padding-bottom : Thiết lập đệm dưới cùng của một phần tử padding-left : Thiết lập đệm trái của một phần tử padding-right : Thiết lập đệm phải của một phần tử padding-top : Thiết lập đệm trên của một phần tử fit * : Gives a hint for how to scale a replaced element nếu không its width nor its height property is auto fit-position * : Determines the alignment of the object inside the box image-orientation * : Specifies a rotation in the right or clockwise direction that a user agent applies to an image page * : Specifies a particular type of page where an element SHOULD be displayed size * : Specifies the size and orientation of the containing box for page content bottom : Xác định vị trí dưới cùng của thành phần clear : Xác định hai mặt của một yếu tố mà các yếu tố khác không được phép xuất hiện clip : Định vị một vùng của đối tượng được phép hiển thị . cursor : Xác định kiểu con trỏ chuột được hiển thị. display : Chỉ định một phần tử HTML nào đó sẽ được hiển thị như thế nào float : Chỉ định có hay không một hộp luôn nổi left : Chỉ định vị trí bên trái của một đối tượng overflow : Chỉ định những gì sẽ xảy ra nếu tràn bộ nội dung của một khung position : Chỉ định kiểu của phương pháp định vị được sử dụng cho một phần tử (tĩnh, tương đối, tuyệt đối hay cố định)right : Chỉ định vị trí bên phải của một đối tượngtop : Xác định vị trí dưới cùng của thành phầnvisibility : hỉ định có hay không một phần tử có thể nhìn thấy z-index : Thiết lập thứ tự sắp xếp các đối tượng tại một vị trí orphans * : Sets the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element page-break-after * : Thuộc tính page-break-after xác định các phân chia văn bản ngay sau thành phần. page-break-before * : Xác định các phân chia văn bản ngay trước thành phần page-break-inside * : Xác định các phân chia văn bản ngay bên trong thành phần. widows * : Sets the minimum number of lines that must be left at the top of a page when a page break occurs inside an element ruby-align * : Controls the text alignment of the ruby text and ruby base contents relative to each other ruby-overhang * : Determines whether, and on which side, ruby text is allowed to partially overhang any adjacent text in addition to its own base, when the ruby text is wider than the ruby base ruby-position * : Controls the position of the ruby text with respect to its base ruby-span * : Controls the spanning behavior of annotation elements mark * : A shorthand property for setting the mark-before and mark-after properties mark-after * : Allows named markers to be attached to the audio stream mark-before * : Allows named markers to be attached to the audio stream phonemes * : Specifies a phonetic pronunciation for the text contained by the corresponding element rest * : A shorthand property for setting the rest-before and rest-after properties rest-after * : Specifies a rest or prosodic boundary to be observed after speaking an element's content rest-before * : Specifies a rest or prosodic boundary to be observed before speaking an element's content voice-balance * : Specifies the balance between left and right channels voice-duration * : Specifies how long it should take to render the selected element's content voice-pitch * : Specifies the average pitch (a frequency) of the speaking voice voice-pitch-range * : Specifies variation in average pitch voice-rate * : Controls the speaking rate voice-stress * : Indicates the strength of emphasis to be applied voice-volume * : Refers to the amplitude of the waveform output by the speech synthesises border-collapse : Thuộc tính border-collapse xác định đường viền của table có tách biệt ra hay không. border-spacing : xác định khoảng cách giữa các đường viền của các cột lân cận. caption-side : Xác định vị trí một chú thích của table. empty-cells : Chỉ định có hay không để hiển thị đường viền và các nền vào ô trống trong một bảng table-layout : Thiết lập các thuật toán bố trí được sử dụng cho một bảng color : Thiết lập màu sắc của văn bản. direction : Xác định hướng cho văn bản. Load từ tái hoặc từ phải. letter-spacing : Tăng hoặc giảm khoảng cách giữa các ký tự trong đoạn text. line-height : Thiết lập chiều cao dòng text-align : Chỉ định sự liên kết ngang của văn bản Load từ tái hoặc từ phải. text-decoration : Quy định cụ thể trang trí thêm cho văn bản (gạch trên, gạch dưới, gạch ngang,..) text-indent : Chỉ định thụt đầu dòng của dòng đầu tiên trong một khối văn bản text-transform : Viết hoa/ thường unicode-bidi * :   vertical-align : sắp xếp các nội dung theo chiều dọc white-space : Xác định khoảng trắng có bên trong thành phần được xử lý như thế nào word-spacing : Tăng hoặc giảm không gian giữa các từ trong một văn bản hanging-punctuation * : Xác định một dấu chấm câu có thể đặt ở đầu hoặc ở cuối của một dòng văn bản. punctuation-trim * : Specifies whether a punctuation character should be trimmed text-align-last :   text-justify : Tăng hoặc giảm khoảng cách giữa các từ và giữa các ký tự sao cho dàn đều thành phần. text-outline * : Xác định dạng vùng biên cho text. text-overflow : Xác định vùng text bị cắt bớt. text-shadow : Thêm bóng cho văn bản text-wrap * : Định dạng dòng text có bị ngắt đoạn hay không. word-break : Sẽ làm cho những chữ trong một từ không còn là một thể thống nhất, có thể xuống hàng bất cứ vị trí nào trong từ.word-wrap : Thuộc tính word-wrap sẽ làm cho những từ dài xuống hàng mà không làm vỡ layout. transform : Áp dụng một chuyển đổi 2D hoặc 3D một phần tử transform-origin : Cho phép bạn thay đổi vị trí trên các yếu tố biến đổi transform-style : Các đối tượng lồng nhau vẫn giữ được tỷ lệ kích thước trong xử lý 3D. perspective : Tạo cảm giác cho ta thấy được chiều sâu của thành phần, ... perspective-origin : Đặt trục quay cho thành phần có sử dụng perspective. backface-visibility : Xác định bề mặt sau của thành phần khi thực hiện một chuyển động xoay. transition : Thiết lập các thuộc tính chuyển động trong 1 lần khai báo. [property] [duration] [timing-function] [delay]. transition-property : Xác định phương hướng chuyển động đối tượng (height , width, all, none) transition-duration : Thời gian chuyển động (s, ms) transition-timing-function : kiểu tốc độ hiệu ứng của 1 quá trình chuyển động (ease, ease-in, ease-out, ease-in-out, linear, cubic-bezier(0,1,0.35,0)) transition-delay : Xác định thời gian chờ đợi trước khi các hiệu ứng của quá trình chuyển đổi sẽ bắt đầu. (s, ms) appearance : Cho phép bạn thực hiện một cái nhìn yếu tố giống như một yếu tố giao diện người sử dụng tiêu chuẩn box-sizing : Xác định lại chiều rộng và chiều cao của thành phần icon * :   nav-down : Xác định nơi để điều hướng khi sử dụng phím điều hướng mũi tên bên dưới nav-index : Chỉ định thứ tự tabbing cho một phần tử nav-left : Xác định nơi để điều hướng khi sử dụng phím điều hướng mũi tên bên trái nav-right : Xác định nơi để điều hướng khi sử dụng phím điều hướng mũi tên bên phải nav-up : Xác định nơi để điều hướng khi sử dụng phím điều hướng mũi tên bên trên outline-offset : Khoảng cách vùng đệm và cũng là thông số kích thước phần đối tượng vượt tràn ra ngoài resize : Người dùng thay đổi kích thước đối tượng

---

Thaotrinh!