Khi lang thang vào những website chuyên giới thiệu các sản phẩm công nghệ, phong cách giao diện metro. Chúng ta thấy đôi khi họ sử dụng hiệu ứng trượt theo chiều ngang hoặc chiều dọc khá đẹp mắt.

Để làm được hiệu ứng đó, nhiều bạn cứ nghĩ phải đụng đến jquery hay đại loại là cần đến javascript. Và hầu hết các website giải quyết vấn đề theo cách này.
Với tôi thì nghĩ khác, tại sao chúng ta lại phải dùng js, nếu trinh duyệt tắt js thì sao. Trong khi vấn đề đó có thể được giải quyết đơn giản.



 Bài viết này là một demo mẫu viết bằng HTML + CSS, rất dễ tùy biết, nhanh gọn đẹp.

<style>
    #bendoi{width:500px; height:300px; border:0px solid #ccc; float:left;overflow:hidden;}
    .ngang, .doc {float:left; margin:5px; padding:5px; border:1px solid #ccc;display: block;overflow:hidden;box-align:center;text-align:center; min-width:50px; min-height:100px; position: relative;
    display: table-cell;vertical-align: middle;
    }
    /*ngang*/
    .ngang .trai {float: left;position: absolute;transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s;   -o-transition-duration: 1s;
      padding-top:35px}
 
   .ngang .phai { float: right;width: ;transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s;      -o-transition-duration: 1s; padding-top:35px}
 
    .ngang:hover .trai {margin-left: 120px;}
    .ngang:hover .phai {margin-right: 120px;}
    /*doc*/
    .doc .tren {position: absolute;transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s;   -o-transition-duration: 1s; top:10px}
 
   .doc .duoi {position: absolute;transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s;      -o-transition-duration: 1s;
      bottom:10px;}
 
    .doc:hover .tren {margin-top: 70px;}
    .doc:hover .duoi {margin-bottom: 70px;}
 
  </style>

  <div id="bendoi">
    <div class="ngang" style="width:150px; ">
      <div class="trai"> trai </div>
      <div class="phai"> phai </div>
    </div>
 
    <div class="doc" style="width:; height:;">
      <div class="tren"> tren </div>
      <div class="duoi"> duoi </div>
    </div>
 
 
    <div class="doc" style="width:; height:;">
      <div class="tren"> tren </div>
      <div class="duoi"> duoi </div>
    </div>
 
     <div class="ngang" style="width:150px; height:;">
      <div class="trai"> trai </div>
      <div class="phai"> phai </div>
    </div>
 
    <div class="ngang" style="width:150px;  height:;">
      <div class="trai"> trai </div>
      <div class="phai"> phai </div>
    </div>
 
    <div class="doc" style="width:; height:;">
      <div class="tren"> tren </div>
      <div class="duoi"> duoi </div>
    </div>
   
     <div class="ngang" style="width:150px; height:;">
      <div class="trai"> trai </div>
      <div class="phai"> phai </div>
    </div>
 
    <div class="doc" style="width:; height:;">
      <div class="tren"> tren </div>
      <div class="duoi"> duoi </div>
    </div>
 
  </div>   gửi email đến tôi nếu bạn muốn có một thiết kế riêng thật đẹp mắt và không "đụng hàng"

trai

phai

tren

duoi

tren

duoi

trai

phai

trai

phai

tren

duoi

trai

phai

tren

duoi

Thao Trinh

http://web.bendoi.vn/2013/09/css-hieu-ung-truot-len-xuong-trai-phai.html

Khi viết giao diện website nếu không để ý chúng ta sẽ vướng vào việc chỉnh sửa các thuộc tính cho các thẻ HTML khá chầy chật, chỗ thì thế này, chỗ thì thế khác, thêm chỗ nọ, bớt chỗ kia dẫn đến không động bộ có thể bị thiếu hoặc lặp lại không cần thiết. Những thuộc tính này đã được các trình duyệt hoặc mã nguồn web đó mặc định, đừng tưởng cái gì mình chưa khái báo thì thuộc tính đó là không.
Việc các trình duyệt, thiết bị, mã nguồn có sẵn các thư viện css mặc định sẽ được tự động sử dụng nếu chúng ta không trực trực tiếp khai báo css, cũng có cái lợi những cũng có cái bất tiện.
Điều này thấy rất rõ trong mã nguồn đóng blogger (blogspot), hay thậm chí bạn code một trang html mới tinh trong máy bạn thì mặc định margin đã là 10px (tùy trình duyệt).

Do đó bạn thấy tầm quan trọng của remove css default rồi, để chắc ăn nhất, chúng ta sẽ reset css khi bắt đầu một giao diện.
Cách tiến hành:
Bước 1: Cập nhật tất cả các thẻ HTML.
Bước 2: Liệt kê danh sách những thẻ HTML mà site của bạn sử dụng và có thể sẽ sử dụng, nếu cảm thấy sẽ chẳng có nhu cầu dùng đến thì thôi.
Bước 3: Chia các thẻ này theo nhóm. Những thẻ nào có chung một thuộc tính hoặc vài thuộc tính giống nhau thì thành một nhóm. Những thẻ được sử dụng những chưa xác định thuộc cụ thể thì cũng chung một nhóm.
Bước 4: Viết css cho các nhóm đó theo dạng

nhóm_1 {thuộc_tính_11: giá_trị_11; thuộc_tính_12: giá_trị_12; ...}
nhóm_2 {thuộc_tính_21: giá_trị_21; thuộc_tính_22: giá_trị_22; ...}
...
nhóm_trống {}

Bước 5: viết lại một số css xuống dưới, quy định riêng một số thuộc tính.

Ở đây tôi có một đoạn css tướng đối đủ dùng cho hầu hết các nhu cầu cơ bản. Các bạn tham khảo:
Đoạn css reset phải được viết trước tiên, sau đó mới load đến các css khác.

/*reset css*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,dfn,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video
{
border:0;
font:inherit;
font-size:100%;
margin:0;
padding:0;
vertical-align:baseline;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{ display:block;}
body{ line-height:1;}
ol,ul{ list-style:none;}
blockquote,q{ quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{ content:none;}
table{ border-collapse:collapse; border-spacing:0;}
b,u,i,del,em {/*lấy mặc định*/}
/*tùy ý css*/
...

http://web.bendoi.vn/2013/08/css-thu-thuat-reset-css.html

Background là thành phần trong css mà gần như ai thiết kế web cũng biết
Nói đến background là nghĩ ngay đến :
- Cách đơn giản nhất Background: #fff;
- Hoặc background:#ffcc00 url(link_img) repeat-x 0 50%; [#color] [link_img] [tính lặp] [vị trí]
Nếu bạn chưa rõ về kiểu viết thứ 2 ở trên thì xem lại bài về background trong phần tổng hợp css.

Tại bài này Tôi sẽ giới thiệu một số cách viết background phức tạp hơn. Đó là sự chuyển màu và các hướng chuyển màu mà trong css.
Cho tới thời điểm hiện nay, vẫn chưa có sự thống nhất chuẩn trong cách viết này, vì cách viết giống nhau không hẳn sẽ hiển thị giống nhau ở trình duyệt khác nhau, cách viết khác nhau có thể cho hiển thị như nhau dù cùng 1 trình duyệt. Tôi từng băn khoăn không biết mình nên viết theo kiểu nào để hiển thị được đúng nhất cho nhiều trình duyệt nhất và tôi đã giải quyết vấn đề này như sau, mời các bạn theo dõi.

Nói đến sự chuyển màu bạn sẽ thấy hiện nay có những loại chuyển màu sau:
- Linear Gradient : dạng đường thẳng.
- Ridial Gradient: dạng tròn.

Đối với loại hòa trộn màu theo dạng thẳng Linear Gradient
Phương màu sẽ được tạo ra từ điểm màu đầu tiên đến điểm màu cuối cùng, phương màu đi qua mổi điểm ảnh thì các điểm ảnh vuông góc với phương màu sẽ thay đổi một giá trị so với màu kế bên.
Cú pháp cơ bản:

Background: -[kiểu trình duyệt]-[tính lặp]-linear-gradient ([phương hướng màu], [màu 1] [vị trí màu 1],  [màu 2] [vị trí màu 2],  [màu 3] [vị trí màu 3],  [màu n] [vị trí màu n]);

- Kiểu trình duyệt: o, moz, webkit, ms.

- Tính lặp:
Giá trị: repeating có thể có hoặc không.

- Phương hướng màu gồm 2 loại:

+ Phương hướng cơ bản:
Có kiểu viết đầy đủ là [x_bắt_đầu  y_bắt_đầu], [x_kết_thúc  y_kết_thúc]
trong đó X là LEFT, RIGHT. Y là TOP, BOTTOM
ví dụ : LEFT TOP, RIGHT BOTTOM
Tuy nhiên nếu là phướng thẳng đứng (90deg) hoặc ngang (0deg) thì chỉ cần viết  y_kết_thúc

+  Phương hướng tùy chọn: viết cụ thể số góc mong muốn: ví dụ: 15deg, 30deg, 40deg, 50deg,...

- Màu:
Viết thieo kiển HEX (ví dụ: #ffcc00) hoặc RGB (ví dụ: rgb(0,100,255))

- Vị trí màu: giá trị từ điểm đầu tiên (0%) đến điểm cuối cùng (100%)

Tôi thấy cách viết đầy đủ nhất, tương thích với nhiều trình duyệt thì nên viết như sau:

background: #0B751D; /*phòng trường hợp xấu nhất*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0B751D, endColorstr=#1B8025);/* Internet Explorer 5.5 - 7 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#0B751D, endColorstr=#1B8025)";    /* For Internet Explorer 8 */
background-image: -ms-linear-gradient(bottom, #0B751D 0%, #EBEBEB 52%, #1B8025 100%); /* Internet exlorer 9+ */
background-image: linear-gradient(bottom, #0B751D 0%, #EBEBEB 52%, #1B8025 100%); /*chuẩn chung*/
background-image: -o-linear-gradient(bottom, #0B751D 0%, #EBEBEB 52%, #1B8025 100%); /* opera */
background-image: -moz-linear-gradient(bottom, #0B751D 0%, #EBEBEB 52%, #1B8025 100%); /* mozilla firefox */
background-image: -webkit-linear-gradient(bottom, #0B751D 0%, #EBEBEB 52%, #1B8025 100%); /* Google Chrome,...*/
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #0B751D), color-stop(0.52, #EBEBEB), color-stop(1, #1B8025));

Kiểu hòa trộn màu dạng tròn Ridial Gradient

Cú pháp chung:

background-image: -[Kiểu trình duyệt]-[tính lặp]-radial-gradient([vị trí tâm], [hình dạng] [phạm vi], [màu 1]  [vị trí màu 1], [màu 2] [vị trí màu 2], [màu 3] [vị trí màu 3], [màu n] [vị trí màu n])

- Kiểu trình duyệt o, moz, webkit, ms

- Tính lặp
Giá trị: repeating có thể có hoặc không.

- Vị trí tâmVị trí tâm màu thứ 1 so với khung hình của DIV. Cú pháp [X] [Y]. Có 2 loại vị trí.
Vị trí cơ bản: Giá trị X là: LEFT, CENTER, RIGHT. Giá trị Y là: TOP, CENTER, BOTTOM.
Vị trí tùy chọn: Đơn vị là PX, EM, %. Ví dụ: 20px, 2em, 50%.
Do đó có thể viết: 20px center hoặc 50% 30% hoặc 50px 100px.

- Hình dạng
Chỉ có 2 giá trị: ellipse hoặc circle

- Phạm vi
Hiện nay có 6 loại giá trị mặc định sau:
closest side (bên gần nhất)
closest corner (góc gần nhất)
farthest side (phía xa nhất)
farthest corner (góc xa nhất)
contain (chứa)
cover (che)

- Màu:
Có 2 loại hệ màu: Màu loại RGR-A (ví dụ rgba(184, 138, 79, 0.4)) hoặc HEX (ví dụ: #ccdd00)
- Vị trí màu:
là vị trí từ tâm màu thứ nhất đến màu thứ n. Đơn vị là PX, EM, %

Ví dụ hoàn chỉnh:

background-color:rgba(255, 255, 255, 0.6);
background-image: -moz-radial-gradient(21% 44%, ellipse cover, rgba(255, 255, 255, 0.6), rgba(93, 153, 95, 0.4) -100%,rgba(184, 138, 79, 0.2) 100%);
background-image: -webkit-radial-gradient(21% 44%, ellipse cover, rgba(255, 255, 255, 0.6), rgba(93, 153, 95, 0.4) -100%,rgba(184, 138, 79, 0.2) 100%);
background-image: -o-radial-gradient(21% 44%, ellipse cover, rgba(255, 255, 255, 0.6), rgba(93, 153, 95, 0.4) -100%,rgba(184, 138, 79, 0.2) 100%);
background-image: -ms-radial-gradient(21% 44%, ellipse cover, rgba(255, 255, 255, 0.6), rgba(93, 153, 95, 0.4) -100%,rgba(184, 138, 79, 0.2) 100%);
background-image: radial-gradient(21% 44%, ellipse cover, rgba(255, 255, 255, 0.6), rgba(93, 153, 95, 0.4) -100%,rgba(184, 138, 79, 0.2) 100%)

Như vậy, tôi đã giới thiệu các bạn 2 kiểu trộn màu cơ bản nhất. Kỹ thuật này vẫn đang được phát triển nên các bạn có thể tham khảo các tài liệu phân tích về vấn đề này tại đây:

• http://dev.w3.org/csswg/css-images-3/
• http://lists.w3.org/Archives/Public/www-style/2011Sep/0019.html
• https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-radial-gradient
• https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
• ...

Bạn xem thêm vài ví dụ :...

thao trinh

http://web.bendoi.vn/2013/08/Background-linear-gradient-Background-radial-gradient.html

Trước tiên tôi phải nói là đây không phải là bài viết "mì ăn liền". Mà là bài viết để bạn đọc hiểu về bản chất của việc thiết kế menu thả xuống nhiều cấp.
Trước tiên để hiểu bài bạn cần nắm được kiến thức cơ bản HTML & CSS chỉ có vậy thôi, không cần ngôn ngữ cao siêu nào khác.
Để bắt đầu tạo một menu thả xuống, tất nhiên ta phải đi tìm hiểu làm thử một cái ví dụ đơn giản nhất khi di chuột vào một đối tượng gốc, sẽ hiển thị ra một đối tượng thứ 2.
Ví dụ đơn giản nhất:

<style>
.layer0{position: relative;}
.layer0 .layer1{display:none;}
.layer0:hover .layer1{display:block; position: absolute;}
</style>
<div class="layer0" >layer0 <div class="layer1">layer1</div></div>

layer0

layer1

Nếu thêm những cấp nữa thì thế nào?
Bao nhiêu cấp ta viết bấy nhiêu hiệu ứng hover. Khi di chuột vào cấp n thì cấp n+1 sẽ xuất hiện

<style>
.layer00{position: relative;}
.layer00 .layer01{display:none;}
.layer00:hover .layer01{display:block; position: absolute;}
.layer00 .layer01 .layer02{display:none;}
.layer00:hover .layer01:hover .layer02{display:block; position: absolute; }
.layer00 .layer01 .layer02 .layer03{display:none;}
.layer00:hover .layer01:hover .layer02:hover .layer03{display:block; position: absolute; }
</style>
<div class="layer00">layer00
<div class="layer01">layer01
<div class="layer02">layer02
<div class="layer03">layer03</div>
</div>
</div>
</div>

layer00

layer01

layer02

layer03

Hoặc có thể viết gọn hơn:

<style>
.layer-0{position: relative;}
.layer-1,.layer-2,.layer-3{display:none;position: absolute;}
.layer-0:hover .layer-1,.layer-1:hover .layer-2,.layer-2:hover .layer-3{display:block;}
</style>
<div class="layer00">layer00
<div class="layer01">layer01
<div class="layer02">layer02
<div class="layer03">layer03</div>
</div>
</div>
</div>

layer-0

layer-1

layer-2

layer-3

---

Như vậy đó là đối với những trường hợp menu có số cấp đã xác định trước, mặc dù chúng ta thường chỉ làm menu có 2,3,4 đến 5 cấp là cùng. Nhưng đôi khi lại muốn vô số cấp, có thể là 10 hoặc 20 cấp mà không xác định trước, chẳng lẽ cứ lặp lại 10-20 lần css như thế.
Để giải quyết vấn đề này về mặt HTML chúng ta sẽ dùng <li>...</li> thay cho <div...>...</div>
Về mặt css sẽ dùng li:hover >ul thay cho hàng loạt lớp con của một đối tượng.

<style>
#nav {
display:inline-block;
width:100%;
background:#ccc;
}
#nav li {
position: relative;
list-style:none;
float:left;
margin:1;
padding:10;
}
#nav ul {
display: none;
position: absolute;
}
#nav li:hover >ul {
display: block;
z-index:1;
padding:0;
width:110px;
background:#E4F1F1;
box-shadow:5px 5px 20px 2px #999999;
}
#nav1 ul li { float:none; margin:0;}
#nav1 ul ul { left:100px;top:0;}
</style>
<ul id="nav">
<li>001</li>
<li>002</li>
<li>004
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</li>
<li>005
<ul>
<li>1-1</li>
<li>1-2+
<ul>
<li>2-1</li>
<li>2-2</li>
<li>2-3+
<ul>
<li>3-1</li>
<li>3-2</li>
<li>3-3</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

• 001
• 002
• 004
  • ...
  • ...
  • ...
• 005
  • 1-1
  • 1-2+
    • 2-1
    • 2-2
    • 2-3+
      • 3-1
      • 3-2
      • 3-3

---

Hoặc có thể viết :

<style>
#nav1 {
display:inline-block;
width:100%;
background:#ccc
}
#nav1 li {
position: relative;
list-style:none;
float:left;
margin:1;
padding:10;
}
#nav1 li:hover > ul { visibility:visible; }
#nav1 ul {
visibility:hidden;
position:absolute;
z-index:1;
padding:0;
width:110px;
background:#E4F1F1;
box-shadow:5px 5px 20px 2px #999999;
}
#nav1 ul li { float:none; margin:0;}
#nav1 ul ul { left:100px;top:0;}
</style>
<ul id="nav1">
<li>001</li>
<li>002</li>
<li>004
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</li>
<li>005
<ul>
<li>1-1</li>
<li>1-2+
<ul>
<li>2-1</li>
<li>2-2</li>
<li>2-3+
<ul>
<li>3-1</li>
<li>3-2</li>
<li>3-3</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

• 001
• 002
• 004
  • ...
  • ...
  • ...
• 005
  • 1-1
  • 1-2+
    • 2-1
    • 2-2
    • 2-3+
      • 3-1
      • 3-2
      • 3-3

Như vậy code cơ bản đã có, vấn đề còn lại của mọi người là thêm gia vị (màu mè, hiệu ứng trượt, bóng đổ, bo góc, khung hình) vào để có một phong cách sinh động và phù hợp với trang sẽ ứng dụng.

thaotrinh bendoi.vn

BLOG.bendoi.vn

 Mục đính chính của mình ở bài này không phải là vẽ hình xe ô tô bằng css mà đó chỉ là một ví dụ để chúng ta hiểu cách làm, sử dụng linh hoạt vào việc vẽ nhiều hình khác bằng css. Tại đây hình xe tải bằng css, mình chỉ chú ý đến đường nét mà chưa tại màu nền chuyển, tuy nhiên với css vẫn có thể làm đẹp được hư hình vẽ.

Trước tiên tha xem ứng dụng làm dấu mũi tên chỉ hướng cho những chú thích:

<style>
    .note {
        position:absolute;
        background:#ddd;
        padding:10px;
    }
    .vecter {
        border-left:10px solid transparent;
        border-right:10px solid transparent;
        border-bottom:10px solid #ddd;
        top:-10px;
        right:20px;
        position:absolute;
    }
    .note2 {
        position:absolute;
        background:#ddd;
        padding:10px;
        border-radius:10px;
    }
    .vecter2 {
        border-radius:10px;
        border:10px solid #ddd;
        top:-10px;
        right:20px;
        position:absolute;
    }
</style>
<div class="note">Nội dung chú thích
  <span class="vecter"></span>
</div>
<br/><br/><br/><br/><br/>
<div class="note2">Nội dung chú thích
  <span class="vecter2"></span>
</div>

Nội dung chú thích

Nội dung chú thích

---

Bây giờ ta sẽ xem chiếc ô tô tải.

<style>
    .oto {
        position:absolute;
        background:#ddd;
        padding:10px;
        border-radius:5px;
        border-top-left-radius:25px;
    }
    .wheel {
        border-radius:50%;
        border:2px solid #fff;
        width:20px;
        height:20px;
        position:absolute;
        background:#ddd;
        bottom:-12px;
    }
    .wheel1 {        left:10px    }
    .wheel2 {        right:40px    }
    .wheel3 {        right:10px    }
    .coachwork {
        width:auto;
        height:4px;
        border-radius:5px;
        top:-4px;
        left:45px;
        right:1px;
        background:#ddd;
        position:absolute;
    }
    .space {
        width:3px;
        height:20px;
        background:#fff;
        position:absolute;
        top:-5px;
        left:45px
    }
</style>
<div class="oto">Nội dung chú thích Nội dung chú thích
  <span class="wheel wheel1"></span>
  <span class="wheel wheel2"></span>
  <span class="wheel wheel3"></span>
  <span class="space"></span>
  <span class="coachwork"></span>
</div>

Nội dung chú thích Nội dung chú thích

TTTj of bendoi.vn

 Đôi khi muốn trang trí một đoạn ghi chú hoặc coment nào đó, ta thường nghĩ đến làm cho nó một hình nền.
Với thủ thuật css này, ta chỉ cần css không dùng hình nền vẫn có một khung ghi chú với border/ backgrounf chấp nhận được.

<style>
#gloss-triangle p{position:relative;background:#51C1FF;padding:15px}
#gloss-triangle p:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:30px solid #51C1FF;border-right:30px solid transparent;width:0;height:0;line-height:0}
#gloss-circle p{position:relative;border-radius:50px;padding:10px;}
#gloss-circle p,#gloss-circle p:after,#gloss-circle p:before{border:5px solid #51C1FF;background:#fff}
#gloss-circle p:after{bottom:-20px;left:30px;width:20px;height:20px}
#gloss-circle p:before{bottom:-30px;left:60px;width:10px;height:10px}
#gloss-circle p:after,#gloss-circle p:before{content:"";position:absolute;border-radius:50%}  
#gloss-triangle1 p{position:relative;background:#51C1FF;padding:25px;height:50px;width:200px;border-radius:50%;line-height:}
#gloss-triangle1 p:after{content:"";position:absolute;bottom:-20px;left:50px;border-top:30px solid #51C1FF;border-right:30px solid transparent;width:0;height:0;line-height:0}
#gloss-circle1 p{position:relative; ;padding:10px;padding:25px;height:50px;width:200px;border-radius:50%;}
#gloss-circle1 p,#gloss-circle1 p:after,#gloss-circle1 p:before{background:#51C1FF}
#gloss-circle1 p:after{bottom:-15px;left:25px;width:50px;height:30px}
#gloss-circle1 p:before{bottom:-30px;left:60px;width:30px;height:20px}
#gloss-circle1 p:after,#gloss-circle1 p:before{content:"";position:absolute;border-radius:50%}  
</style>
<div id="gloss-triangle">
<p> Khung chú thích đẹp mắt, có chỉ hướng hình tam giác vuông
</p>
</div>
<div id="gloss-circle">
<p> Khung chú thích đẹp mắt, có chỉ hướng hình tròn
</p>
</div>
<br/>
<div id="gloss-triangle1">
<p> Khung chú thích đẹp mắt, có chỉ hướng hình tròn
</p>
</div>
<br/>
<div id="gloss-circle1">
<p> Khung chú thích đẹp mắt, có chỉ hướng hình tròn
</p>
</div>

Khung chú thích đẹp mắt, có chỉ hướng hình tam giác vuông

Khung chú thích đẹp mắt, có chỉ hướng hình tròn

Khung chú thích đẹp mắt, có chỉ hướng hình tròn

Khung chú thích đẹp mắt, có chỉ hướng hình tròn

thaotrinh bendoi.vn

Đôi khi design website chúng ta cần một chút hình tam giác nho nhỏ để làm trang trí cho một góc hình nào đó.
Bạn có thể tham khảo một số kiểu sau đây:

<style>
        .triangle-left {
                height:0px;
                border-top: 100px solid transparent;
                border-bottom: 100px solid transparent;
                border-left: 100px solid rgb(179, 137, 62);
        }
        .triangle-right {
                height:0px;
                border-top: 100px solid transparent;
                border-bottom: 100px solid transparent;
                border-right: 100px solid rgb(179, 137, 62);
        }
        .triangle-bottom {
                width:0px;
                border-right: 100px solid transparent;
                border-left: 100px solid transparent;
                border-bottom: 100px solid rgb(179, 137, 62);
        }
        .triangle-top {
                width:0px;
                border-right: 100px solid transparent;
                border-left: 100px solid transparent;
                border-top: 100px solid rgb(179, 137, 62);
        }
        .triangle-top-left {
                width:0px;
                border-right: 100px solid transparent;
                border-top: 100px solid rgb(179, 137, 62);
        }
        .triangle-bottom-left {
                width:0px;
                border-right: 100px solid transparent;
                border-bottom: 100px solid rgb(179, 137, 62);
        }
        .triangle-bottom-right {
                width:0px;
                border-left: 100px solid transparent;
                border-bottom: 100px solid rgb(179, 137, 62);
        }
        .triangle-top-right {
                width:0px;
                border-left: 100px solid transparent;
                border-top: 100px solid rgb(179, 137, 62);
        }
</style>
<div class='triangle-left'>triangle-left</div>
<div class='triangle-right'>triangle-right</div>
<div class='triangle-bottom'>triangle-bottom</div>
<br/>
<div class='triangle-top'>triangle-top</div>
<div class='triangle-top-left'>triangle-top-left</div>
<div class='triangle-bottom-left'>triangle-bottom-left</div>
<div class='triangle-bottom-right'>triangle-bottom-right</div>
<br/>
<div class='triangle-top-right'>triangle-bottom-right</div>

triangle-left

triangle-right

triangle-bottom

triangle-top

triangle-top-left

triangle-bottom-left

triangle-bottom-right

triangle-bottom-right

---

thaoj!

Lúc buồn tay tôi viết một đoạn CSS3 cho vui:

<style>
#thao {margin:auto; width:400px; height:270px; border:1px solid #ccc; position: relative;overflow:hidden;  }
#thao .layer1 {width:200px;height:50px;float:left; display:block; background:#E8F2FF;margin:2px;}
#thao .layer1:hover  { background:#D0E2EE;}
#thao .layer1 .layer2  {width:100px;height:1px;position: absolute; background:#E8F2FF;right:400px;top:0px; opacity:0;transition: all 2s ease-in-out 0s; -webkit-transition:all 2s ease-in-out 0s;}
#thao .layer1:hover .layer2 {width:200px;height:270px; background:#A3BCE3; display:block; right:0px;top:0px;  transition: all 2s ease-in-out 0s;-webkit-transition:all 2s ease-in-out 0s;    opacity:1;  }
</style>

<div id="thao">
  <div class="layer1">1... <div class="layer2">1.2...</div></div>
  <div class="layer1">2... <div class="layer2">2.2...</div></div>
  <div class="layer1">3... <div class="layer2">3.2...</div></div>
  <div class="layer1">4... <div class="layer2">4.2...</div></div>
  <div class="layer1">5... <div class="layer2">5.2...</div></div>
</div>

1...

1.2...

2...

2.2...

3...

3.2...

4...

4.2...

5...

5.2...

overflow-style ₃

---

Specifies the preferred scrolling method for elements that overflow
Chỉ rõ phương thức di chuyển ưa thích cho các yếu tố tràn

Thuộc tính	giá trị	Ví dụ	Mô tả
overflow-style	auto	overflow-style: auto ;
	scrollbar	overflow-style: scrollbar;
	panner	overflow-style: panner;	người sử dụng có thể di chuyển nội dung của phần tử trực tiếp.
	move	overflow-style: move;	người sử dụng có thể kéo nội dung xung quanh với con chuột
	marquee;	overflow-style: marquee;	nội dung di chuyển, mà không có bất kỳ sự kiện nào người sử dụng để kiểm soát nó

Xem ví dụ

<style>
.ttt{ width:100%; height:400px;margin:20px;border:0px solid #ff0099;}
#auto {overflow:hidden; overflow-style: auto; width:450px;height:300px;border:2px solid #ff0099;}
#scrollbar {overflow:hidden; overflow-style:scrollbar;border:2px solid #ff0099;width:450px;height:300px;}
#panner {overflow:hidden; overflow-style:panner;border:2px solid #ff0099;width:450px;height:300px;}
#move {overflow:hidden; overflow-style:move;border:2px solid #ff0099;width:450px;height:300px;}
#marquee {overflow:hidden; overflow-style:marquee;border:2px solid #ff0099;width:450px;height:300px;}
</style>
<div class="ttt">
<div id="auto"><img src="http://tusachphathoc.org/gallery/thumbs/lrg-4128-1038834_12963627-jpg"/></div></div>

<div class="ttt">
<div id="scrollbar"><img src="http://tusachphathoc.org/gallery/thumbs/lrg-4128-1038834_12963627-jpg"/></div></div>

<div class="ttt">
<div id="panner"><img src="http://tusachphathoc.org/gallery/thumbs/lrg-4128-1038834_12963627-jpg"/></div></div>

<div class="ttt">
<div id="move"><img src="http://tusachphathoc.org/gallery/thumbs/lrg-4128-1038834_12963627-jpg"/></div></div>

<div class="ttt">
<div id="marquee"><img src="http://tusachphathoc.org/gallery/thumbs/lrg-4128-1038834_12963627-jpg"/></div></div>

auto

scrollbar

panner

move

marquee

Sự tương thích ( Cập nhật / Báo lỗi )

x	x	x	x	x	x	x	x

---

Một kiểu đơn giản có thể dùng làm menu (thường áp dụng làm menu top) hoặc quảng cáo góc dưới màn hình. Điểm mấu chôt ở đây chính là thuộc tính position: fixed; cố định vùng trên màn hình máy tính.

• Nếu muốn làm menu top thì chọn top:0px, width:100%
• nếu muốn làm quảng cáo thì chọn bottom:1px, left:1px hoặc right:1px;

<style>
  #ad-rl{
    right: 5px;bottom: 5px;
    position: fixed;
    width:auto;
    border:1px solid #999;
    padding:10px;
    background: #E4e4e4;
  }
</style>

<div id="ad-rl">
  <a target="_blank" href="http://phim.bendoi.vn">Phim</a><br/>
  <a target="_blank" href="http://music.bendoi.vn">music</a><br/>
  <a target="_blank" href="http://it.bendoi.vn">it</a><br/>
  <a target="_blank" href="http://web.bendoi.vn">web</a><br/>
  <a target="_blank" href="http://test.bendoi.vn">test</a><br/>
  <a target="_blank" href="http://news.bendoi.vn">news</a><br/>
  <a target="_blank" href="http://ebook.bendoi.vn">ebook</a><br/>
  <a target="_blank" href="http://graphic.bendoi.vn">graphic</a><br/>
</div>

Xem demo hiện tượng tại trang này!

Phim
music
it
web
test
news
ebook
graphic

---

Làm nút top/bottom đơn giản

 <a style="position: fixed; Top: 100px; right:10px;" href="#" title="Về đầu trang">
<img src="http://png-3.findicons.com/files/icons/2127/ultimate_gnome/22/go_top.png"></a>
<a style="position: fixed; Top: 150px; right: 10px;" href="javascript:scroll(0,9999999)" title="Xuống cuối trang">
<img src="http://png-4.findicons.com/files/icons/2127/ultimate_gnome/24/bottom.png"></a>

Làm nút top/bottom đơn giản Xem demo trên trang này!

Cách dảo ngược đối tượng đơn giản:

<style>
.rotate {margin: auto;width:400px;height:300px;
transition: all 0.5s ease-in-out 0s;
perspective: 500;
background:#E8E8FF;
}
.rotate.x:hover {background-color:#E8E800;transform: rotateX(180deg);-webkit-transform: rotateX(180deg);-moz-transform: rotateX(180deg);-ms-transform: rotateX(180deg);-o-transform: rotateX(180deg);}
.rotate.y:hover {background-color:#E8E800;transform: rotateY(180deg);-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);-ms-transform: rotateY(180deg);-o-transform: rotateY(180deg);}

</style>
<div class="rotate x"><H1>BENDOI.VN</H1></div>
<div class="rotate y"><H1>BENDOI.VN</H1></div>

BENDOI.VN

BENDOI.VN

---

Cách trên khi kích thước vùng rotate biến đổi, có thể con trỏ chuột không còn nằm trong rotate nữa, khi đó có thể thuộc tính hover không được thực hiện hết.
Một cách trọn vẹn hơn, thêm vùng area cố định bao ngoài rotate, khi chuột đi vào area thì rotate sẽ quay:

<style>
.area {margin: auto;position:relative;width: 400px;     height: 300px;    perspective: 600px; background:#D9D9D9;}
.area .rotate{width: 100%;    height: 100%;
transform-style: preserve-3d;transition: all 0.5s ease-in-out 0s;
-webkit-transition:preserve-3d;transition: all 0.5s ease-in-out 0s;
-o-transition:preserve-3d;transition: all 0.5s ease-in-out 0s;
-moz-transition:preserve-3d;transition: all 0.5s ease-in-out 0s;
}
.area:hover .rotate.x {background-color:#E8E800;transform: rotateX(180deg);-webkit-transform: rotateX(180deg);-moz-transform: rotateX(180deg);-ms-transform: rotateX(180deg);-o-transform: rotateX(180deg);}
.area:hover .rotate.y {background-color:#E8E800;transform: rotateY(180deg);-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);-ms-transform: rotateY(180deg);-o-transform: rotateY(180deg);}
</style>
<div class="area"> <div class="rotate x">   <H1>BENDOI.VN</H1>  </div></div>
<br/>
<div class="area"> <div class="rotate y"> <H1>BENDOI.VN</H1>  </div></div>

BENDOI.VN

BENDOI.VN

---

Một cách xoay ảnh này sang ảnh khác:

<style type="text/css">
.area {margin: auto;position:relative;width: 400px;     height: 300px;    perspective: 600px; background:#D9D9D9;}
.area .rotate{width: 100%;    height: 100%;
transform-style: preserve-3d; transition: all 0.5s ease-in-out 0s;
-webkit-transition:preserve-3d; transition: all 0.5s ease-in-out 0s;
-o-transition:preserve-3d; transition: all 0.5s ease-in-out 0s;
-moz-transition:preserve-3d; transition: all 0.5s ease-in-out 0s;
}
.area .rotate .truoc,.area .rotate .sau{position:absolute;backface-visibility: hidden;}
.rotate.x .sau{ transform: rotateX(180deg);   -webkit-transform: rotateX(180deg); -o-transform: rotateX(180deg); -moz-transform: rotateX(180deg); }
.area:hover  .rotate.x{ transform: rotateX(180deg);   -webkit-transform: rotateX(180deg); -o-transform: rotateX(180deg); -moz-transform: rotateX(180deg); }
.rotate.y .sau{ transform: rotateY(180deg); -webkit-transform: rotateY(180deg);  -o-transform: rotateY(180deg); -moz-transform: rotateY(180deg);}
.area:hover  .rotate.y{transform: rotateY(180deg);   -webkit-transform: rotateY(180deg);  -o-transform: rotateY(180deg); -moz-transform: rotateY(180deg);}
</style>
<div class="area">
  <div class="rotate x">
    <div class="truoc"><img src="http://....jpg" title="2" /></div>
<div class="sau"><img src="http://....jpg" title="2" /></div>
  </div>
</div>
<div class="area">
<div class="rotate y">
    <div class="truoc"><img src="http://....jpg" title="2" /></div>
<div class="sau"><img src="http://....jpg" title="2" /></div>
</div>
</div>

---

Một cách viết tương tự:

<style type="text/css">
.area {margin: auto;position:relative;width: 400px;     height: 300px;    perspective: 600px; background:#D9D9D9;}
.area .rotate{width: 100%;    height: 100%;
transform-style: preserve-3d;transition: all 0.5s ease-in-out 0s;
-webkit-transition:preserve-3d;transition: all 0.5s ease-in-out 0s;
-o-transition:preserve-3d;transition: all 0.5s ease-in-out 0s;
-moz-transition:preserve-3d;transition: all 0.5s ease-in-out 0s;
}
.area .rotate >*{position:absolute;backface-visibility: hidden;}
.rotate.x *:nth-child(2){ transform: rotateX(180deg);  -webkit-transform: rotateX(180deg); -o-transform: rotateX(180deg); -moz-transform: rotateX(180deg); }
.area:hover > .rotate.x{ transform: rotateX(180deg);   -webkit-transform: rotateX(180deg); -o-transform: rotateX(180deg); -moz-transform: rotateX(180deg); }
.rotate.y *:nth-child(2){ transform: rotateY(180deg); -webkit-transform: rotateY(180deg);  -o-transform: rotateY(180deg); -moz-transform: rotateY(180deg);}
.area:hover > .rotate.y{transform: rotateY(180deg);   -webkit-transform: rotateY(180deg);  -o-transform: rotateY(180deg); -moz-transform: rotateY(180deg);}
</style>

<div class="area">
<div class="rotate x">
<img src="http://....jpg" title="1"/>
<img src="http://....jpg" title="2" />
</div>
</div>
<div class="area">
<div class="rotate y">
<img src="http://....jpg" title="1"/>
<img src="http://....jpg" title="2" />
</div>
</div>

---

- Có một bất cập là hiệu ứng thứ nhất đơn giản thì hiển thị trên hầu hết các trình duyệt chính.
- Hiệu ứng thứ 2,3,4 cũng hiển thị được trên các trình duyệt chính nhưng tại thời điểm hiện nay chỉ Firefox mới hiển thị đúng nhất.

Có thể nhiều người không để ý rằng khi zoom nhỏ 1 trang web, các box sẽ bị rớt xuống, không còn giống hình dạng ban đầu khi xem bình thường.

Mặc dù điều này chỉ xuất hiện khi zoom < 100 mà thực tế người dùng thường zoom > 100 % để dễ nhìn.

Tuy nhiên với một design chuyên nghiệp thì không nên có điều này.

code khi bình thường, nhiều người sẽ viết:

<style>
.box{width:600px;}
.box-0{width:200px;float:left;}
</style>
<div class="box">
<div class="box-0">...</div><div class="box-0">...</div><div class="box-0">...</div>
</div>

cụ thể sẽ xảy ra trường hợp như hình sau:

Vậy chúng ta có thể viết một cách "chắc ăn" mà đơn giản như "ngày còn bé": 

<table>
<tr>
<td><div class="box-1">...</div></td>
<td><div class="box-2">...</div></td>
<td><div class="box-3">...</div></td>
</tr>
</table>

Nhưng dùng TABLE thì có vẻ không "chuyên nghiệp" lắm, chúng ta nên viết:

 <style>
.box{width:600px;}
.box01,box03 {width:33%; float:left; margin:0; pidding:0;} /* nếu gộp cả 3 cái class thì có thể viết width:33.3% */
.box02 {width:34%; float:left; margin:5px; pidding:5px;}
.box-1,box-2,box-3 {} /*Nếu giống nhau thì bạn gộp chúng thành 1*/
</style>
<div class="box">
<div class="box01"> <div class="box-1">...</div> </div>
<div class="box02"> <div class="box-2">...</div> </div>
<div class="box03"> <div class="box-3">...</div> </div>
</div>