Tạo hiệu ứng bóng đổ cho liên kết với thuộc tính box-shadow

Thuộc tính box-shadow của CSS3 là một trong những thuộc tính mới rất hữu ích trong việc tạo CSS. Ở đây tôi xin giới thiệu cách sử dụng thuộc tính này để tạo hiệu ứng bóng đổ cho các liên kết.

Bạn có thể xem Demo dưới đây, rê con trỏ vào các liên kết để xem hiệu ứng.

Theo Wikipedia: Vi phạm bản quyền là sao chép lại tác phẩm của người khác mà không xin phép, thậm chí công bố công trình đó là của mình sáng tạo ra.

Trong tiếng Việt còn có từ đạo văn chỉ việc ăn cắp bản quyền các văn bản. Một từ tương tự là đạo nhạc, ăn cắp các giai điệu nhạc sáng tác bởi người khác.

Để làm được như vậy, trước tiên cần viết CSS như bên dưới và đặt trước thẻ </head>.

<style type="text/css">
a.box {
color: #FFF;
padding: 0 5px;
border: 1px solid #2DAEBF;
}
a.box:hover {
background-color: #2daebf;font-size: 1.5em;
-moz-box-shadow: 1px 1px #007d9a, 2px 2px #007d9a, 3px 3px #007d9a, 4px 4px #007d9a, 5px 5px #007d9a, 6px 6px #007d9a, 7px 7px #007d9a, 8px 8px #007d9a;
-webkit-box-shadow: 1px 1px #007d9a, 2px 2px #007d9a, 3px 3px #007d9a, 4px 4px #007d9a, 5px 5px #007d9a, 6px 6px #007d9a, 7px 7px #007d9a, 8px 8px #007d9a;
}
</style>

Tiếp theo là tạo cấu trúc HTML cho liên kết như sau.

<a class="box" href="#">text liên kết</a>

More about →

Chèn icon vào sau liên kết

Chèn icon đại diện vào sau liên kết một cách tự động :34) là một phương pháp phân biệt các kiểu liên kết khác nhau trên trang web của bạn. Các kiểu liên kết khác nhau đó gồm liên kết đến các trang video (như Youtube), các trang hình ảnh (như Flickr), các liên kết cho file có đuôi mở rộng (extension), liên kết Messenger Chat, các liên kết đến các trang xã hội, trang wiki… :44)

Bạn có thể xem Demo.

Để thực hiện điều này, bạn hãy đặt đoạn code CSS sau đây vào trước thẻ </head>.

<style type="text/css">
/* Video Websites */
a[href *="youtube.com/watch?"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/youtube.gif) no-repeat center right; } a[href *="metacafe.com/watch/"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/metacafe.gif) no-repeat center right; }
/* Image Websites */
a[href *="flickr.com/photos/"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/flickr.jpg) no-repeat center right; } a[href *="imageshack.us"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/imageshack.jpg) no-repeat center right; } a[href *="photobucket.com"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/photobucket.png) no-repeat center right; } a[href *="picasaweb.google"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/picasa.gif) no-repeat center right; }
/* Extensions */
a[href$='.doc'], a[href$='.rtf'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/word.gif) no-repeat center right; } a[href$='.txt'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/txt.gif) no-repeat center right; } a[href$='.xls'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/xls.png) no-repeat center right; } a[href$='.rss'], a[href$='.atom'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/rss.gif) no-repeat center right; } a[href$='.torrent'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/torrent.gif) no-repeat center right; } a[href$='.vcard'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/vcard.gif) no-repeat center right; } a[href$='.exe'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/exe.gif) no-repeat center right; } a[href$='.pps'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/pps.gif) no-repeat center right; } a[href$='.pdf'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/pdf.gif) no-repeat center right; } a[href$='.xpi'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/xpi.png) no-repeat center right; } a[href$='.fla'], a[href$='.swf'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/swf.png) no-repeat center right; } a[href$='.zip'], a[href$='.gzip'], a[href$='.bzip'], a[href$='.ace'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/zip.gif) no-repeat center right; } a[href$='.rar'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/rar.png) no-repeat center right; } a[href$='.ical'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/ical.gif) no-repeat center right; } a[href$='.css'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/css.png) no-repeat center right; } a[href$='.ttf'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/ttf.png) no-repeat center right; } a[href$='.jpg'], a[href$='.gif'], a[href$='.png'], a[href$='.bmp'], a[href$='.jpeg'], a[href$='.svg'], a[href$='.eps'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/jpg.jpg) no-repeat center right; } a[href$='.mov'], a[href$='.wmv'], a[href$='.mp4'], a[href$='.avi'], a[href$='.mpg'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/mpg.png) no-repeat center right; } a[href$='.mp3'], a[href$='.wav'], a[href$='.ogg'], a[href$='.wma'], a[href$='.m4a'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/mp3.gif) no-repeat center right; }
/* Messenger */
a[href ^="aim:"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/aim.gif) no-repeat center right; } a[href ^="msnim:"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/msn.gif) no-repeat center right; } a[href *="edit.yahoo.com/config/send_webmesg?"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/yim.gif) no-repeat center right; } a[href ^="skype:"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/skype.gif) no-repeat center right; }
/* Mail */
a[href ^="mailto:"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/email.png) no-repeat center right; }
/* Social Networks */
a[href *="facebook.com"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/facebook.jpg) no-repeat center right; } a[href *="twitter.com"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/twitter.gif) no-repeat center right; }
/* Other */
a[href *="wikipedia.org/wiki"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/wikipedia.png) no-repeat center right; }
/* External Links */
a[target="_blank"]
{padding: 5px 20px 5px 0;background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/external.gif) no-repeat center right;}
/ * Use this class if you want your images not to be added with the icon * /
.imagelink { padding: 0px !important; background-image: none !important; }
</style>

Trong đoạn code CSS ở trên, bạn có thể xóa bỏ phần CSS bất kỳ liên quan đến kiểu liên kết mà bạn không cần sử dụng.

Về cấu trúc HTML, bạn tạo cấu trúc thông thường cho liên kết dưới dạng:
<a href="URL_liên kết">Liên kết</a>

Đối với hình ảnh, nếu bạn không muốn hiển thị icon thì sử dụng cấu trúc HTML sau đây:

<a class="imagelink" href="URL_liên kết hình ảnh"><img src="URL_liên kết hình ảnh"/></a>

Đối với liên kết ngoài bạn muốn hiển thị icon sau liên kết thì sử dụng cấu trúc HTML sau đây:

<a target="_blank" href="URL_liên kết ngoài">Liên kết ngoài</a>

Thủ thuật này áp dụng tốt cho cả Blogger. :27)

More about →

Mở liên kết ngoài sang cửa sổ mới một cách tự động

Thông thường khi thiết kế website hay webblog, khi muốn mở liên kết ngoài sang một cửa sổ mới, chúng ta thường sử dụng giá trị target="_blank" theo như ví dụ sau đây:

<a href="http://www.blogger.com/" target="_blank">Blogger</a>

Tuy nhiên đối với cả một website hay webblog đồ sộ, cứ mỗi lần có một liên kết ngoài ta muốn mở sang một cửa sổ mới khi kích chuột vào liên kết đó thì thật là bất tiện và mất nhiều công sức.

Bằng một thủ thuật đơn giản với việc sử dụng Javascript chúng ta có thể mở các liên kết ngoài sang cửa sổ mới một cách tự động mà không cần phải sử dụng giá trị "_blank".

Bạn chỉ cần đặt đoạn code dưới đây trước thẻ </body>. Thủ thuật này sử dụng cho website thông thường và cho cả Blogspot nữa đấy. Thật tuyệt cho các Blogger.

<script type='text/javascript'>
this.blankwin = function(){
var hostname = window.location.hostname;
hostname = hostname.replace("www.","").toLowerCase();
var a = document.getElementsByTagName("a");
this.check = function(obj){
var href = obj.href.toLowerCase();
return (href.indexOf("http://")!=-1 && href.indexOf(hostname)==-1) ? true : false;
};
this.set = function(obj){
obj.target = "_blank";
obj.className = "external";
};
for (var i=0;i<a.length;i++){
if(check(a[i])) set(a[i]);
};
};



// script initiates on page load.

this.addEvent = function(obj,type,fn){
if(obj.attachEvent){
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn](window.event );}
obj.attachEvent('on'+type, obj[type+fn]);
} else {
obj.addEventListener(type,fn,false);
};
};
addEvent(window,"load",blankwin);
</script>

Đơn giản hơn, chúng ta đặt đoạn javascript trên vào một file nguồn như thế này.

<script src='http://huynhatha.250free.com/js/blankwindow.js' type='text/javascript'/>

Lưu ý bạn nên tải về file blankwindow.js và upload lên free hosting để sử dụng cho website/webblog của bạn nhé.

More about →

Mô tả liên kết sử dụng Javascript

Khi bạn trỏ vào các liên kết trên một trang web, phần lớn các công cụ trình duyệt sẽ hiển thị địa chỉ mà liên kết đó trỏ đến trên thanh trạng thái. Tại sao không thêm sự nổi bật cho trang web của bạn bằng cách mô tả cho các liên kết.


Có thể sử dụng ngôn ngữ JavaScript để làm việc này. Bạn chỉ cần thêm thẻ sự kiện "OnMouseOver" cho neo liên kết của bạn dưới dạng sau đây:

OnMouseOver="window.status='description'; return true;"

Lấy ví dụ, nếu thẻ neo ban đầu của bạn là:

<a href="http://www.websitecuaban.com/trang-chu.html">

Thì nên thay đổi nó thành:

<a href="http://www.websitecuaban.com/trang.chu.html" OnMouseOver="window.status='Go to my home page...'; return true;">

Chú ý: Vì OnMouseOver là một sự kiện JavaScript nên mô tả của bạn sẽ chỉ hiển thị trên các công cụ trình duyệt cho kích hoạt JavaScript như Netscape 2.x+ và Explorer 3.x. Các trình duyệt khác sẽ bỏ qua thẻ này.

More about →

Tạo hiệu ứng liên kết kiểu dancing

Có khá nhiều kiểu hiệu ứng liên kết. Một trong số đó là kiểu hiệu ứng nhảy múa theo đó các đoạn text có link liên kết nhấp nháy theo các màu sắc khác nhau rất nổi bật.

Bạn chỉ việc đặt đoạn mã javascript dưới đây trước thẻ đóng </head>.

<script language="javascript">
<!-- Begin
function initArray() {
for (var i = 0; i < initArray.arguments.length; i++) {
this[i] = initArray.arguments[i];
}
this.length = initArray.arguments.length;
}
var colors = new initArray(
"red",
"blue",
"green",
"purple",
"black",
"tan",
"red");
delay = .5; // seconds
link = 0;
vlink = 2;
function linkDance() {
link = (link+1)%colors.length;
vlink = (vlink+1)%colors.length;
document.linkColor = colors[link];
document.vlinkColor = colors[vlink];
setTimeout("linkDance()",delay*1000);
}
linkDance();
// End -->
</script>

Bạn cũng có thể thêm màu sắc cho hiệu ứng này.
Tham khảo theo Javascript.internet.com.

More about →