reset and begin
Showing posts with label css bonus. Show all posts

5/26/2013

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

2/20/2012

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.

5/15/2011

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.

10/26/2010

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 &gt; 250 ? 250: true);
   max-height:220px;
   height: expression(this.height &gt; 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.

4/24/2010

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);





7/13/2009

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>

7/06/2009

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>

List

Profiles Information


About me : Nothing is 1 vài thứ - 1985

Places I've Lived : I Hà Nội

Home Page : http://www.shimivn.blogspot.com/

Think : 1:1000000000

Languages spoken : Vietnamese,English.

Mobile : sony C2305

dell : i3-Ram 3GB- HDD 250GB .