Tạo menu chuyển động chỉ bằng Css3 (menu lavalamp)

Cách làm khá đơn giản và chỉ những trình duyệt web nào có hỗ trợ Css3 nó mới tạo ra hiệu ứng .

 xem demo  link down   và cách làm cho mọi site :
1-trong phần html cần đặt menu lava

Tìm Hiểu CSS Image Sprites

Thông thường khi load 1 trang web thì ta thấy có nhiều hình ảnh đi kèm ,tuy nhiên với css image sprites tất cả ảnh sẽ được đặt vào trong 1 bức ảnh duy nhất .Sau đó ta dùng thuộc tính background-position của CSS để hiện ra ảnh cần lấy .
ưu điểm của css image sprite
Thay vì load nhiều ảnh ta sẽ chỉ load 1 ảnh duy nhất  , chỉ phải gửi request đến server 1 lần để lấy ảnh thay vì gửi nhiều request đến server tiết kiệm bandwidth.

Tạo khung cho ảnh trong suốt bằng Css

sử dụng ảnh nhỏ trong suốt làm nền  sau đó dùng padding  lùi vào tạo viền.

<style>
body{background:#2EAF4C url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1H1Io0EhTA-xhH7jCHkVZwfu2pvGWEJRvm-0FxTuy-Jz3lpV8DRO4P3fDup-iwEikQYYgOMOZL3VPmMZv4Lbb0kZ4I4bWldH9iLc6OEIfqz60WL1DkDGRWj4N4H-fpNPIihDjSUHB72Ts/s1600/Windows_7_2.jpg) repeat fixed center top;color:#FFF;font-family:}
img {  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLU1lLFxDEc5jakbLYV15BuJiGukQaJm-ZAl-kC1pN4DV_d88WthvCK0pvqmQWPatmV3xTVkvF7BTmoejeKKNWtajKng-_zCs7BuqRYeP1i94mj9SIkZls7Ahr9Zupv2ri1XFmjfjjWVJc/s1600/black.png") repeat scroll left top transparent;    border: medium none;    margin-top: 50px;    padding: 15px;}
</style>

tham số padding :15px là  độ dày của khung  ảnh .
sử dụng
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1H1Io0EhTA-xhH7jCHkVZwfu2pvGWEJRvm-0FxTuy-Jz3lpV8DRO4P3fDup-iwEikQYYgOMOZL3VPmMZv4Lbb0kZ4I4bWldH9iLc6OEIfqz60WL1DkDGRWj4N4H-fpNPIihDjSUHB72Ts/s1600/Windows_7_2.jpg" width="300" height="200">

Tạo bóng đổ cho khung bằng css

opera firefox chrome

.shadow {
  -moz-box-shadow: 5px 5px 5px #ccc;
  -webkit-box-shadow: 5px 5px 5px #ccc;
  box-shadow: 5px 5px 5px #ccc;
}

 inset shadow

.shadow {
   -moz-box-shadow:inset 0 0 10px #000000;
   -webkit-box-shadow:inset 0 0 10px #000000;
   box-shadow:inset 0 0 10px #000000;
}

1. thamso1: Bóng đổ theo chiều ngang, nghĩa là phần bóng đổ sẽ lệch về phía phải của đối tượng.
2. thamso2: Bóng đổ theo chiều dọc, nghĩa là phần bóng đổ sẽ lệch về phía trên của đối tượng.

Resize image auto blogspot

Các bước thực hiện:
1. vào bố cục
2. vào chỉnh sửa code HTML
3. chèn đọan code CSS bên dưới vào trước dòng code ]]></b:skin>

.post IMG {
   max-width:250px;
   width: expression(this.width > 250 ? 250: true);
   max-height:220px;
   height: expression(this.height > 220 ? 220: true);
}

- thay đổi lại các con số : 250, 220 theo như ý muốn của bạn. Với 250 là độ rộng của ảnh muốn resize, 220 là chiều cao.
4. Save template.

xoay hình trong css javascript

css
/* for firefox, safari, chrome, etc. */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
/* for ie */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
script

Image Rotate








var ImageArr1 = new Array("Picture(3).jpg","Picture(1).jpg","Picture(2).jpg");
var ImageHolder1 = document.getElementById('Rotating1');

var ImageArr2 = new Array("Picture(5).jpg","Picture(6).jpg","Picture(7).jpg");
var ImageHolder2 = document.getElementById('Rotating2');

function RotateImages(whichHolder,Start)
{
var a = eval("ImageArr"+whichHolder);
var b = eval("ImageHolder"+whichHolder);
if(Start>=a.length)
Start=0;
b.src = a[Start];
window.setTimeout("RotateImages("+whichHolder+","+(Start+1)+")",1500);
}

RotateImages(1,0);
RotateImages(2,0);






boder-conner

div#conner {
margin: 0 10%;background: #9FB779
}
b.rtop, b.rbottom {
display:block;background: #FFF
}
b.rtop b, b.rbottom b {
display:block;
height: 1px;
overflow: hidden;
background: #9FB779
}
b.r1 {
margin: 0 5px
}
b.r2 {
margin: 0 3px
}
b.r3 {
margin: 0 2px
}
b.rtop b.r4, b.rbottom b.r4 {
margin: 0 1px;height: 2px
}
in html
<div id="conner" align="center">
<b class="rtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
</b>
<h4>Nội dung cần thể hiện</h4>
<b class="rbottom">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b> </div>

menu mutil level

<style type="text/css"> .menuchinh{ float:left; border-color:#00CC33; border-style:groove; border:2px; } .menuphu{ float:left; border-color:#00CC33; border-style:groove; border:2px; } </style> <script language="javascript"> function show(id) {var mem="menu"+id document.getElementById(mem).style.display="block"; } function hide(id) {var mem="menu"+id document.getElementById(mem).style.display="none"; } </script> <body> <div style="height:400px" class="menuchinh"> <ul><li onmouseover="show(1)" onmouseout="hide(1)" ><a href="#">trang chu</a></li> <li onmouseover="show(2)" onmouseout="hide(2)" ><a href="#">trang chu</a></li> </div> <div style="height:100px" class="menuphu"> <div id="menu1" style="display:none"> <ul> <li><a href="gghf">menu 1 1</a></li> <li><a href="gghf">menu 1 1</a></li> <li><a href="gghf">menu 1 1</a></li> </ul> </div> <div id="menu2" style="display:none"> <ul> <li><a href="gghf">menu 1 1</a></li> <li><a href="gghf">menu 1 1</a></li> <li><a href="gghf">menu 1 1</a></li> <li><a href="gghf">menu 1 1</a></li> <li><a href="gghf">menu 1 1</a></li> <li><a href="gghf">menu 1 1</a></li> </ul></div> </div>