Bộ Gõ Tiếng Việt Ẩn Hiện

Demo :

Code (chèn vào CSS):

Code:

#mudimPanel {-moz-opacity: 0.4;opacity: 0.4;filter: alpha(opacity=40);top: 5px!important;left: 5px!important;width: 330px!important;height: 47px!important;background-color:#FFF!important;padding: 4px!important;font-size: 9px!important;font-weight:bold;vertical-align:middle;}
#mudimPanel:hover { -moz-opacity: 0.7; opacity: 0.7; filter: alpha(opacity=70);}

Tùy chỉnh:
top hoặc bottom - phía trên hoặc phía dưới trang
left hoặc right - bên phải hay bên trái trang.
5px : khoảng cách đến phía trên hoặc phía dưới, bên phải hay bên trái trang.
width: 330px và height: 47px: chiều rộng và chiều cao của khung
font-size: 9px cỡ chữ.
background-color:#FFF : màu nền, nếu xoá sẽ trở thành màu vàng nhạt như mudim mặc định
Chú ý : không được bỏ !important ở bất kì thuộc tính nào.

Loại Thứ 2
Demo:

Cách làm: Đầu tiên làm gọn bảng mudim và di chuyển nó như hướng dẫn phía trên.
Sửa các thuộc tính của id mudimPanel.
Vào CSS tìm #mudimPanel
Sửa thuộc tính background để thêm ảnh "Bộ gõ" vào khung điều khiển bộ gõ. Ở đây mình sử dụng ảnh này :

Code:

background:#FFF url('http://www.c3zone.net/users/2611/10/63/87/album/go10.jpg') no-repeat right center!important;

Tiếp đó sửa thuộc tính padding cho nội dung bên trong không đè lên ảnh nền phía trên:

Code:

padding: 4px 26px 4px 4px!important;

Đặt thuộc tính left là -333 để khung điều khiển bộ gõ thụt vào bên trong.

Code:

left:-333px!important;

Sửa thuộc tính của mudimPanel khi di chuyển chuột vào.
CSS. tìm #mudimPanel:hover
thêm vào thuộc tính:

Code:

left:0!important;

Code hoàn chỉnh - Chèn vào CSS:

Code:

#mudimPanel {
-webkit-transition: all 2s ease; -moz-transition: all 2s ease;
background: white url('http://www.c3zone.net/users/2611/10/63/87/album/go10.jpg') no-repeat right center!important;
-moz-opacity: 0.9; opacity: 0.9; filter: alpha(opacity=90);
bottom: 9px!important;
left: -333px!important;
width: 330px!important;
height: 47px!important;
padding: 4px 26px 4px 4px!important;
font-size: 9px!important;
font-weight: bold;
vertical-align: middle;
-moz-box-shadow: 5px 5px 5px black;
-webkit-box-shadow: 5px 5px 5px black;
box-shadow: 5px 5px 5px black;
}
#mudimPanel:hover {
-webkit-transition: all 1s ease;-moz-transition: all 1s ease;
-moz-opacity: 1;opacity: 1;filter: alpha(opacity=100);
left: 0!important;
}

Được sửa bởi Admin ngày Fri Oct 21, 2011 5:58 pm; sửa lần 2.