WORWOR.NET ON FACEBOOK:
https://www.facebook.com/worwornet?fref=ts

Báo cập nhật tình trạng game định kỳ 6 tháng / 1 lần


Lưu ý: Quản lý diễn đàn không chịu trách nhiệm cho nội dung do người dùng đăng tải.

How to: Tip bằng CSS

Hướng dẫn sử dụng BBCode và các chức năng của forum.

User avatar
Thiên Thần Chuối
Site Admin
Posts: 345
Joined: 13 Jul 2015, 19:09
Mood: Shalala.
Has thanked: 125 times
Been thanked: 45 times
Gender: None specified

How to: Tip bằng CSS

Postby Thiên Thần Chuối » 15 Jul 2016, 14:46

Image


Các bạn thấy tip bằng javascript (bbcode tip và tipspan, tiphover) quá bất tiện và không nhất quán? Hãy đến với tip thủ công bằng CSS!


Tip bằng CSS khác với tip thường chỗ nào?

Phần này mình nghĩ mình không cần nói nhiều, các bạn chỉ cần nhìn ví dụ dưới đây là hiểu. Đại khái là vị trí xuất hiện tip sẽ nhất quán hơn và người dùng có thể di chuyển chuột vào nội dung tip và thao tác trên đó. Bù lại khuyết điểm cũng không phải không có nếu bạn thử di chuyển chuột vào vùng dòng thứ hai chỉ định, đương nhiên cũng có vài cách để che lấp khuyết điểm này nhưng do nó tùy tình huống và đôi khi là không khả thi nên mình sẽ không trình bày ở đây.

Tui nghĩ bạn nên
di chuyển chuột vào đây
Và giờ bạn thấy tui trong màu background mặc định
để thấy hiệu ứng tip xuất hiện bên phải.
Tui nghĩ bạn nên
di chuyển chuột vào đây
Và giờ bạn thấy tui trong màu background màu hường
để thấy hiệu ứng tip xuất hiện bên trái.
Tui nghĩ bạn nên
di chuyển chuột vào đây
Và giờ bạn thấy tui đang bó mình trong một cụm và xuống hàng.
để thấy hiệu ứng tip xuất hiện bên trên.
Tui nghĩ bạn nên
di chuyển chuột vào đây
Và giờ bạn thấy tui đang hiện lên từ từ
để thấy hiệu ứng tip xuất hiện bên dưới.

Sử dụng như thế nào?

Đối với những bạn muốn mì ăn liền thì đây là code sẵn. Chú ý là một dàn bbcode style kia mỗi bài viết chỉ cần xuất hiện một lần là đủ xài rồi.




Tui nghĩ bạn nên
di chuyển chuột vào đây
Và giờ bạn thấy tui trong màu background mặc định
để thấy hiệu ứng tip xuất hiện bên phải.

Tui nghĩ bạn nên
di chuyển chuột vào đây
Và giờ bạn thấy tui trong màu background màu hường
để thấy hiệu ứng tip xuất hiện bên trái.

Tui nghĩ bạn nên
di chuyển chuột vào đây
Và giờ bạn thấy tui đang bó mình trong một cụm và xuống hàng.
để thấy hiệu ứng tip xuất hiện bên trên.

Tui nghĩ bạn nên
di chuyển chuột vào đây
Và giờ bạn thấy tui đang hiện lên từ từ
để thấy hiệu ứng tip xuất hiện bên dưới.


Code: Select all

[mystyle]Tui nghĩ bạn nên [div=|tip_subject|][b]di chuyển chuột vào đây[/b] [div=|tip_content tip_right tip_style tip_style_right|]Và giờ bạn thấy tui trong màu background mặc định[/div][/div] để thấy hiệu ứng tip xuất hiện bên [b]phải[/b].

Tui nghĩ bạn nên [div=|tip_subject|][b]di chuyển chuột vào đây[/b] [div=|tip_content tip_left tip_style tip_style_left|background: pink;]Và giờ bạn thấy tui trong màu background màu hường[/div][/div] để thấy hiệu ứng tip xuất hiện bên [b]trái[/b].

Tui nghĩ bạn nên [div=|tip_subject|][b]di chuyển chuột vào đây[/b] [div=|tip_content tip_top tip_style tip_style_top|width: 150px; white-space: normal;]Và giờ bạn thấy tui đang bó mình trong một cụm và xuống hàng.[/div][/div] để thấy hiệu ứng tip xuất hiện bên [b]trên[/b].

Tui nghĩ bạn nên [div=|tip_subject|][b]di chuyển chuột vào đây[/b] [div=|tip_content tip_bottom tip_style tip_style_bottom|transition: opacity 2s;]Và giờ bạn thấy tui đang hiện lên từ từ[/div][/div] để thấy hiệu ứng tip xuất hiện bên [b]dưới[/b].[/mystyle]

[div=||display: none;]

*Phần dưới đây là phần lõi của tip bằng CSS.

--Phần này là phần chính nè

[style=.tip_subject]position: relative; display: inline-block;[/style]
[style=.tip_content]position: absolute; opacity: 0; z-index: -1;[/style]
[style=.tip_subject:hover .tip_content]opacity: 1.0; z-index: 1;[/style]

--Phần này là phần xác định vị trí của mấy cái tip thôi

[style=.tip_right]top: 0; left: 100%;[/style]
[style=.tip_left]top: 0; right: 100%;[/style]
[style=.tip_top]bottom: 100%;[/style]
[style=.tip_bottom]top: 100%;[/style]

*Phần dưới đây là phần custom style của tip bằng CSS.

[style=.tip_style]background: #DEDEDE; white-space: nowrap; padding: 5px;[/style]

[style=.tip_style_right]margin-left: 7px;[/style]
[style=.tip_style_right:before]content: ''; position: absolute; left: 0; top: 0; display: block; border: 7px solid transparent; border-right-color: black; margin-left: -14px;[/style]

[style=.tip_style_left]margin-right: 7px;[/style]
[style=.tip_style_left:before]content: ''; position: absolute; right: 0; top: 0; display: block; border: 7px solid transparent; border-left-color: black; margin-right: -14px;[/style]

[style=.tip_style_top]margin-bottom: 7px;[/style]
[style=.tip_style_top:before]content: ''; position: absolute; left: 0; bottom: 0; display: block; border: 7px solid transparent; border-top-color: black; margin-bottom: -14px;[/style]

[style=.tip_style_bottom]margin-top: 7px;[/style]
[style=.tip_style_bottom:before]content: ''; position: absolute; left: 0; top: 0; display: block; border: 7px solid transparent; border-bottom-color: black; margin-top: -14px;[/style]

[/div]





Đối với những bạn có ý định custom sâu hơn thì mình nghĩ là đọc phần comment của phần code trên kia là đủ hiểu rồi, cũng không cần phải nói gì thêm. Nếu bạn nào có nhu cầu giải thích sâu hơn thì cứ nhắn tui nha. =))



*Phần dưới đây là phần lõi của tip bằng CSS.

--Phần này là phần chính nè





--Phần này là phần xác định vị trí của mấy cái tip thôi






*Phần dưới đây là phần custom style của tip bằng CSS.















BBCode by Tendou.
Last edited by Thiên Thần Chuối on 15 Jul 2016, 17:20, edited 2 times in total.
.

Return to “How to Use”



Who is online

Users browsing this forum: No registered users and 1 guest