Css

2010/May/16

 

 เราสามารถใช้ความสามารถของ css 3 ในการตกแต่งให้ปุ่มของเรามีหน้าตาสวยงามได้โดยใช้คำสั่ง

 1. การไล่เฉกสี (Color Gradient)

background: -webkit-gradient(linear, left top, left bottom,
from(#f88e11), to(#f06015));  /*Safari*/
background: -moz-linear-gradient(top,  #f88e11,  #f06015); 
/*Firefox*/
filter:  progid:DXImageTransform.Microsoft.gradient(
startColorstr='#f88e11', endColorstr='#f06015'); /*IE*/

 2.  ขอบมน (Border radius)

-webkit-border-radius: .5em;  /*Safari*/
-moz-border-radius: .5em;  /*Firefox*/
border-radius: .5em;  /*IE*/

3.  เงาของตัวอักษร (Text Shadow)

text-shadow: 0 1px 1px rgba(0,0,0,.3);

4.  เงาของกล่อง (Box Shadow)

-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); /*Safari*/
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);  /*Firefox*/
box-shadow: 0 1px 2px rgba(0,0,0,.2); /*IE*/

 

ดูตัวอย่าง

2009/Jun/08

เป็นการซ่อนรายละเอียดจากสิ่งที่เกินกว่า ความกว้างหรือความยาว ที่เรากำหนดไว้ เช่น เรากำหนดความกว้างของกรอบใส่ข้อความไว้ 540px  แต่ขนาดรูปในกรอบมีขนาดมากกว่าคือ   600px 
เราสามารถใช้ซ่อนรายละเอียดของรูปภาพส่วนที่เกิน

overflow:hidden;
Before  ดูตัวอย่าง 



After ดูตัวอย่าง 



Css

 


body {     background:#444; }
img{border:0;}
#container{
margin:0 auto;
text-align:left;
width:790px;
}
#main{
float:left;
display:inline;
width:580px;
margin:1em 0;    
background:#fff;
}
#main .content{
margin-left:20px;
margin-top:20px;
width:540px;
overflow:hidden;
}


Html

<div id="container"> 
<div id="main"> 
<div class="content"> 
<p><img src="sample.jpg" alt="600px wide image" />p> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Proin et nisi. Fusce volutpat quam. Phasellus 
eget mi. Integer urna purus, bibendum ut, venenatis 
non, condimentum id, tellus. In placerat sollicitudin
justo. Suspendisse consequat. Integer aliquam rutrum
magna. Etiam eu neque. Fusce eu dolor. Morbi 
sollicitudin condmentum turpis. Nulla tristique
lacus vel nunc. Cras iaculis tempus dui. Sed 
elementum ante. Cras ac odio sit amet ante 
ultrices semper. 
Mauris tellus urna, porta ut, vulputate non, 
hendrerit sit amet, leo. Pellentesque 
habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. 
Aliquam erat volutpat.p> 
div> 
div> 
div>


 

 พอดีคุณ  ฟิวส์ ได้ comment ว่าอยากได้ กรอบที่ขยายตาม object ด้านในหรือรูปด้านใน
 ถ้าลองใช้

 min-width:540px;

 ก็จะได้แบบนี้   ดูตัวอย่าง 

 


แต่ min/max-* ใน IE 6 จะไม่ Support  อาจจะใช้ css expression (IE Only) ควบคุมแทน

width:expression(document.body.clientWidth<540? "540px":"auto");

 

2009/Jun/05

เป็นคำสั่งการใช้งาน css ที่เรามักใช้กันเป็นประจำ 
- กำหนดตำแหน่งในแนวตั้งด้วย  line-height

  line-height:10px; 

เมื่อเราต้องการให้ container จำกัดความสูงเราสามารถใช้ line-height เผื่อกำหนดให้ข้อมูลใน container อยู่ตรงกลาในแนวตั้ง

มาดูตัวอย่างกัน

Output เป็นการสร้าง paging style อย่างง่ายสามารถปรับเปลี่ยนได้ตามต้องการ


>> ดูตัวอย่าง<<



 Css


.page-control a {
font-size:12px;
line-height:20px;
font-family:Trebuchet MS;
text-decoration: none;
margin:0;
border: 1px solid #fff;color: #fff;
background-color: #434343;
font-weight: bold;
float:left;
width:20px;
margin-right:4px;
display:block;
padding-left:5px;
}
.page-control a.active ,.page-control a:hover {
background-color: #00DCFF; color: #000;
}
.page-control a:focus,.page-control a:active {
outline: none;
}

  Html

  <div class="page-control">
<a href="#">1a>
<a href="#">2a>
<a href="#">3a>
<a href="#">4a>
<a href="#">5a>
<a href="#">6a>
<a href="#">7a>
div>

 

 



snippet.googalz.com
View full profile