ĐỒNG HỒ FLASH HOA

Người đăng: Unknown on Thứ Tư, 26 tháng 9, 2012

Trước đây, mình có chia sẻ với các bạn một số mẫu đồng hồ và lịch (xem TẠI ĐÂY).
Hôm nay, mình tiếp tục chia sẻ với các bạn một số mẫu đồng hồ Flash có hình nền là các loại hoa lá cành... cũng khá đẹp mắt.
Mời các bạn xem phía dưới nha.





Các file flash này có kích thước chung là 240x300 (các file flash để minh hoạ cho bài viết mình trình diễn có kích thước hơi lớn 480x600)
Mẫu 1:


Mẫu 2:
 
 
Mẫu 3:


Mẫu 4:


Mẫu 5:


Mẫu 6:


Mẫu 7:


Mẫu 8:


Mẫu 9:


Mẫu 10:


Nếu để chung nhiều file flash sẽ làm cho trang load chậm, vì vậy mong các bạn thông cảm bấm vào các thẻ phía dưới để xem trực tiếp cho nhanh nha.


Mẫu 11 Mẫu 12 Mẫu 13 Mẫu 14 Mẫu 15 Mẫu 16


Mẫu 17 Mẫu 18 Mẫu 19 Mẫu 20 Mẫu 21 Mẫu 22


Mẫu 23 Mẫu 24 Mẫu 25 Mẫu 26 Mẫu 27 Mẫu 28


Mẫu 29 Mẫu 30 Mẫu 31 Mẫu 32 Mẫu 33 Mẫu 34


Mẫu 35 Mẫu 36 Mẫu 37 Mẫu 38 Mẫu 39 Mẫu 40


Mẫu 41 Mẫu 42 Mẫu 43 Mẫu 44


Mẫu 45 Mẫu 46 Mẫu 47


Nếu bạn thích mẫu nào thì ghi yêu cầu dưới comments (do chiều rộng sidebar của mỗi blog sẽ có kích thước khác nhau, nếu bạn muốn chỉnh kích thước chiều rộng của đồng hthì ghi yêu cầu phía dưới mình sẽ chỉnh cho bạn) và cho mình xin địa chỉ mail của bạn để dunghennessy gởi file flash cho bạn.
Chúc các bạn vui



More about

FLASH CON RỒNG

Người đăng: Unknown on Thứ Bảy, 22 tháng 9, 2012

Ở góc độ "tâm linh", con Rồng được xem là linh vật tượng trưng cho một sức mạnh linh thiêng vô hình nào đó...
Theo yêu cầu của nhiều bạn, dunghennessy chia sẻ đến với các bạn một số file flash về hình ảnh con Rồng.
 
Nếu không thấy con rồng, bạn rê chuột vào giữa khung sẽ thấy Rồng xuất hiện.
Mẫu 1: 1 con rồng

Mẫu 2: 2 con Rồng

Mẫu 3: 2 con Rồng vờn trăng

Mẫu 4: 2 con Rồng vờn mặt trời

Mẫu 5: 2 con rồng vờn trái đất

Mẫu 6: 2 con rồng vờn trái đất2

Mẫu 7: 2 con rồng vờn trái đất3

Mẫu 8: 4 con Rồng vờn mặt trời...Các bạn rê chuột vào từng điểm như giữa mặt trời, góc trên cùng bên phải, góc dưới cùng bên phải của khung (để lâu một tý...) sẽ thấy nhiều ảnh khá đẹp mắt do 4 con Rồng bay lượn tạo nên

Chúc các bạn vui!!!




More about

Tạo hình tam giác với CSS

Người đăng: Unknown on Thứ Năm, 20 tháng 9, 2012


Trong thiết kế blog/web site rất nhiều lần cần sử dụng các thuộc tính tạo tam giác bằng CSS mà không cần dùng hình ảnh. Bài viết này Viettin24h giới thiệu với các bạn sử dụng mẹo nhỏ với thuộc tính border trong css để tạo ra hình tam giác.

1- Đầu tiên tạo một thẻ div với id là demo:
<div id="demo">
.....
</div>
Sau đó bạn xem hình dưới để thấy được cách tạo ra hình tam giác.
Tạo hình tam giác với CSS
Khi để width và height bằng 0 thì thẻ div với border-width bằng 10px sẽ là hình vuông kết hợp của 4 hình tam giác tương đương với 4 cạnh border-left ,border-rightborder-bottomvà border-top.Để tạo ra hình tam giác ta sẽ ẩn 3 trong 4 border bằng cách để cho chúng màu trong suốt với giá trị transparent.

Bạn cũng có thể thay đổi kích thước của tam giác bằng cách thay đổi độ rộng của border ví dụ như :
#demo{
    .....
    border:10px solid transparent;
    border-top:15px solid red;
}
Hình tam giác thường được tạo bằng pseudo-class của một phần tử.Ví dụ như:
#demo{
    width:80px;
    height:80px;
    background-color:#232323;
    position:relative;
}

#demo:after{
    content:"";
    width:0;
    height:0;
    position:absolute;
    border:10px solid transparent;
    ...../*code thêm ở hình dưới*/.....
}
Xem hình dưới:
Tạo hình tam giác với CSS
Tuy chỉ là một mẹo nhỏ nhưng nó lại có khá nhiều ứng dụng hữu ích giúp làm tăng thẩm mỹ của trang web. Ví dụ như tạo tooltip hay ribbon..

Tạo tooltip

Ảnh minh họa:
Tạo hình tam giác với CSS
HTML code :
<span id="tooltip">Tooltip bằng CSS</span>
CSS code :
#tooltip{
background-color:#232323;
background-image:-moz-linear-gradient(top,#4a4a4a,#232323);
background-image:-o-linear-gradient(top,#4a4a4a,#232323);
background-image:-webkit-linear-gradient(top,#4a4a4a,#232323);
background-image:linear-gradient(top,#4a4a4a,#232323);
color:white;
padding:8px 15px;
font-size:14px;
border-radius:5px;
font-family:helvetica,sans-serif;
position:Relative;
text-shadow:0 1px 0 rgba(0,0,0,0.7);
}

#tooltip:after{
content:"";
width:0px;
height:0px;
position:absolute;
border:9px solid transparent;
border-top:9px solid #232323;
left:45%;
bottom:-16px;
}

Tạo ribbon

Ảnh minh họa:
Tạo hình tam giác với CSS
HTML code:
<div id="demo">
<h1 class="ribbon">Ribbon bằng CSS</h1>
<p><!-- nội dung --></p>
</div>
CSS code:
#demo{
background-color:#232323;
width:200px;
padding:50px 25px 20px 15px;
position:relative;
color:#c8c8c8;
font-family:helvetica,sans-serif;
line-height:20px;
}

.ribbon{
position:absolute;
height:30px;
top:10px;
left:-8px;
background-color:#0072ff;
padding:0 60px 0 15px;
max-width:180px;
color:white;
line-height:30px;
font-weight:400;
font-size:14px;
text-shadow:0 1px 0 rgba(0,0,0,0.5);
text-transform:uppercase;
letter-spacing:1px;
box-shadow:2px 2px 2px rgba(0,0,0,0.3);
}

.ribbon:before,.ribbon:after{
content:"";
position:absolute;
z-index:-1;
width:0;
height:0;
bottom:-6px;
left:3px;
border:6px solid transparent;
border-bottom:6px solid #023a7f;
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
}
Tuy nhiên tại sao namkna lại sử dụng cả :before và :after.Lý do là tại vì ở trình duyệt firefox hiện nay có một lỗi nhỏ khi ta sử dụng thuộc tính transform với hình tam giác.Xem hình dưới đây hoặc các bạn có thể test ngay trên trình duyệt có thể nhìn thấy ngay.
Tạo hình tam giác với CSS
Có thể thấy lỗi nhỏ này làm hình hiện thị trên màn hình trông không được đẹp mắt do vậy tôi sự dụng 2 hình tam giác chồng lên nhau bằng cả 2 lớp giả :before và :after để là mờ cái đường kẻ không mong muốn kia đi như hình dưới:
Tạo hình tam giác với CSS
Trên chỉ là 2 ví dụ đơn giản về sự hữu ích của việc tạo hình tam giác bằng css,hi vọng mẹo nhỏ này sẽ giúp ích được cho các bạn.
More about

ĐỒNG HỒ FLASH HÌNH KINH DỊ

Người đăng: Unknown on Thứ Tư, 19 tháng 9, 2012

Tiếp bài ĐỒNG HỒ FLASH HÌNH ĐỘNG VẬT (xem TẠI ĐÂY).
Hôm nay, mình tiếp tục chia sẻ với các bạn một số mẫu đồng hồ Flash có hình nền là những hình kinh dị: đầu lâu, bộ xương, máu dành cho những bạn có cảm giác mạnh.
Mời các bạn xem phía dưới nha.





Các file flash này có kích thước chung là 240x300 (chỉ có các file flash để minh hoạ cho bài viết có kích thước lớn 480x600)
Mẫu 1:


Mẫu 2:
 
 
Mẫu 3:




Nếu để chung nhiều file flash sẽ làm cho trang load chậm, vì vậy mong các bạn thông cảm bấm vào các thẻ phía dưới để xem trực tiếp cho nhanh nha.


Mẫu 4 Mẫu 5 Mẫu 6 Mẫu 7 Mẫu 8 Mẫu 9 Mẫu 10


Mẫu 11 Mẫu 12 Mẫu 13 Mẫu 14 Mẫu 15


Mẫu 16 Mẫu 17 Mẫu 18 Mẫu 19




Nếu bạn thích mẫu nào thì ghi yêu cầu dưới comments (do chiều rộng sidebar của mỗi blog sẽ có kích thước khác nhau, nếu bạn muốn chỉnh kích thước chiều rộng của đồng hthì ghi yêu cầu phía dưới mình sẽ chỉnh cho bạn) và cho mình xin địa chỉ mail của bạn để dunghennessy gởi file flash cho bạn.
Chúc các bạn vui



More about

ĐỒNG HỒ FLASH HÌNH ĐỘNG VẬT

Người đăng: Unknown

Trước đây, mình có chia sẻ với các bạn một số mẫu đồng hồ và lịch (xem TẠI ĐÂY).
Hôm nay, mình tiếp tục chia sẻ với các bạn một số mẫu đồng hồ Flash có hình nền là động vật cũng khá đẹp mắt.
Mời các bạn xem phía dưới nha.





Các file flash này có kích thước chung là 240x300 (chỉ có các file flash để minh hoạ cho bài viết có kích thước lớn 480x600)
Mẫu 1:


Mẫu 2:
 
 
Mẫu 3:


Mẫu 4:


Mẫu 5:


Mẫu 6:


Mẫu 7:

Nếu để chung nhiều file flash sẽ làm cho trang load chậm, vì vậy mong các bạn thông cảm bấm vào các thẻ phía dưới để xem trực tiếp cho nhanh nha.


Mẫu 8 Mẫu 9 Mẫu 10 Mẫu 11 Mẫu 12 Mẫu 13 Mẫu 14


Mẫu 15 Mẫu 16 Mẫu 17 Mẫu 18 Mẫu 19 Mẫu 20


Mẫu 21 Mẫu 22 Mẫu 23 Mẫu 24 Mẫu 25


Mẫu 26 Mẫu 27 Mẫu 28 Mẫu 29 Mẫu 30


Mẫu 31 Mẫu 32 Mẫu 33 Mẫu 34 Mẫu 35


Mẫu 36 Mẫu 37 Mẫu 38 Mẫu 39

Nếu bạn thích mẫu nào thì ghi yêu cầu dưới comments (do chiều rộng sidebar của mỗi blog sẽ có kích thước khác nhau, nếu bạn muốn chỉnh kích thước chiều rộng của đồng hthì ghi yêu cầu phía dưới mình sẽ chỉnh cho bạn) và cho mình xin địa chỉ mail của bạn để dunghennessy gởi file flash cho bạn.
Chúc các bạn vui



More about

HIỂN THỊ BÀI VIẾT TRONG NHÃN (Kiểu 10)

Người đăng: Unknown on Thứ Ba, 4 tháng 9, 2012

Với thủ thuật này, các bài viết của toàn bộ trang Blog hoặc các bài viết trong cùng một nhãn được hiển thị trong một tiện ích được chia thành 2 cột riêng biệt: cột bên trái và cột bên phải.
Cột bên trái bao gồm 2 phần: Phần trên cùng (còn gọi là top-news) bao gồm một hình ảnh đại diện và tiêu đề kèm theo một số dòng mô tả của bài viết mới nhất mà bạn vừa mới đăng. Phần dưới (còn gọi là bottom-news) bao gồm 4 ảnh nhỏ và tiêu đề bài viết của 4 bài đăng kế tiếp (số lượng này bạn có thtuỳ chọn).
Cột bên phải bao gồm các tiêu đề bài viết tiếp theo của Blog hoặc của một nhãn được sắp xếp từ trên xuống theo thứ tự thời gian (số lượng này bạn cũng có thể tuỳ chọn).
Mời bạn bấm vào "Xem thử" phía dưới để trải nghiệm trước thủ thuật này.

Xem thử

Đầu tiên, bạn đăng nhập vào blog > Chọn thiết kế > thêm tiện ích HTML/Javacript (nếu sử dụng giao diện mới thì bạn chọn Mẫu > thêm tiện ích HTML/Javacript), các bạn nào chưa biết cách thêm tiện ích HTML/Javacript thì xem BÀI NÀY, rồi dán code phía dưới vào.
<style type="text/css">
#cotent-news {
border:#999 solid 1px;
width: 660px;
}
#top-news {
width: 460px;
height:166px;
padding:5px;
border:#bbb solid 1px;
background:#000;
font-size:12px;
}
#bottom-news {
width: 460px;
padding:5px;
}
#bottom-news-item {
width: 106px;
margin-right:9px;
float:left;
}
#left-news {
padding:5px;
border-left:2px dotted #ccc;
}
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
imgico= "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNvEWjRBNz7IL2D2r4HGtfkesLhElhmOdYgbCzJVFawMUTLh512ZXczjVqaT1hAvlfRlnslkwbMjGixfLktV-M0YbRGMkOhwqI63T3lX63YBqW3TAor_2ymMRe58-VBiGNPICjVGD85vyE/s1600/1399304s1osheptmw.gif";
showRandomImg = true;
topwidth = 160;
topheight = 160;
botheight = 100;
botwidth = 105;
fntsize = 12;
vnesize = 18; //kích thước của tiêu đề bài viết trong class "top-news"
acolor = "#fff";
cmcolor = "#fff";
topcolor = "#fff";
aBold = true;
text = "comments";
showPostDate = true;
summaryPost = 200;
summaryFontsize = 12;
summaryColor = "#000";
botnum = 4;
numposts = 15;
label = "";
home_page = "http://www.dunghennessy.blogspot.com/";
</script>
<script src="https://sites.google.com/site/dungheineken/all.txt" type="text/javascript"></script>

Bây giờ bạn chỉnh sửa các dòng lệnh màu đỏ theo ý thích của mình. Trong đó:
* Width (đầu tiên): là chiều rộng của cả tiện ích
* Width (thứ hai): là chiều rộng của top-news
* Width (thứ ba): là chiều rộng của bottom-news  
* Background: màu nền của top-news
* Imgicon: icon trước tiêu đề bài viết ở cột bên phải 
* Topwidth: chiều ngang của ảnh ở top-news
* Topheight: Chiều cao của ảnh ở top-news
* Botheight: Chiều cao của ảnh ở bottom-news
* Botwidth: Chiều ngang của ảnh bottom-news
* cmcolor: màu của ch
* Summary Post: số lượng từ của dòng mô tả bài viết mới nhất
* Summary Fontsize: Kích thước chữ của dòng mô tả bài viết mới nhất.
* Botnum: Số lượng ảnh và tiêu đề các bài viết ở bottom-news
* Numpost: Số lượng các bài viết hiển thở tiện ích (bao gồm các bài viết ở top-news, bottom-news và các bài viết ở cột bên phải)
* Label: tên nhãn (nếu sử dụng cho cả blog thì ô này bỏ trống, còn nếu sử dụng cho một nhãn thì bạn phải viết chính xác tên nhãn và tên nhãn này phải nằm trong dấu ngoặc kép nếu không thì tiện ích này sẽ bị lỗi và không hiển thị...).
* Home Page: Địa chỉ blog của bạn.
Cuối cùng bấm Lưu và trở về blog xem kết quả nha.
Mở rộng thêm:
Code trên tôi đang áp dụng cho toàn blog, vì vậy nếu muốn hiển thị cho một nhãn nào đó các bạn phải ghi chính xác tên nhãn ở dòng lệnh Label và thay thế dòng lệnh màu vàng bằng dòng lệnh này:
https://dl.dropbox.com/u/66348944/only.txt    

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