BBCode [FONT2]

**HitomaruKonpaku** · 21-11-2014, 16:15

BBCode [FONT2]

FONT2 - Cơ bản

Nhưng thứ cơ bản nhất về FONT2

Nếu bạn là người mới, chưa biết cách sử dụng code thì hãy đọc từ đây

Tool tạo code

Coming soon...

Cú pháp

[font2=id|parameter][/font2]

id : tên của font2, có ích trong việc sử dụng lặp lại
parameter : Các style cho font2, mỗi style được cách nhau bới dấu "&"

font-family (ff)

VnSharing

[font2=hito01|ff=cooperb] Vn-Sharing [/font2]

size (s)

VnSharing

[font2=hito02|s=30] VnSharing [/font2]

color (cl)

Có 4 cách ghi màu

Hex: cl=22FF22
RGB: cl=255,0,255
RGBA: cl=0,117,201,0.7
Tên màu: cl=,red

VnSharing

[font2=hito03|cl=22FF22] VnSharing [/font2]

VnSharing

[font2=hito04|cl=255,0,255] VnSharing [/font2]

VnSharing

[font2=hito05|cl=0,117,201,0.7] VnSharing [/font2]

VnSharing

[font2=hito06|cl=,red] VnSharing [/font2]

background (bg)

Thay đổi màu nền, cú pháp tuơng tự <color>

VnSharing

[font2=hito07|bg=22FF22] VnSharing [/font2]

width (w)

VnSharing

[font2=hito08|w=200&bg=22FF22] VnSharing [/font2]

height (h)

VnSharing

[font2=hito09|h=50&bg=22FF22] VnSharing [/font2]

align (al)

Canh text theo chiều ngang

left (mặc định)
center
right

VnSharing

[font2=hito10|cl=ffffff&bg=7777ff&w=300&h=50&al=center] VnSharing [/font2]

vertical-align (val)

Canh text theo chiều dọc
(Tạm thời chưa hoạt động, trong tuơng lai thì chưa biết. Nhưng cứ để sẵn đây vậy

)

top (mặc định)
middle
bottom

VnSharing

[font2=hito11|cl=ffffff&bg=7777ff&w=300&h=50&al=center&val=middle] VnSharing [/font2]

margin (mar)

Tham khảo : http://www.w3schools.com/css/css_margin.asp
Lưu ý: Phải có đơn vị "px", các margin phải được ngăn cách bằng dấu "," (phẩy)

VnSharing

[font2=hito12|h=50&bg=22FF22&mar=auto] VnSharing [/font2]

VnSharing

[font2=hito13|h=50&bg=22FF22&mar=10px,0px,0px,20px] VnSharing [/font2]

padding (pad)

Cú pháp tương tự <margin>
Tham khảo : http://www.w3schools.com/css/css_padding.asp
Lưu ý: pad không nhận giá trị "auto"

VnSharing

[font2=hito14|pad=10px&bg=22FF22] VnSharing [/font2]

VnSharing

[font2=hito15|pad=10px,50px&bg=22FF22] VnSharing [/font2]

border (bd)

Tạo viền cho khung text. Có 2 cách:

Tạo cả 4 cạnh: bd=10_solid_00ff00

VnSharing

[font2=hito16|pad=5px&bg=22FF22&bd=10_solid_0000FF] VnSharing [/font2]
Tạo từng cạnh riêng
- top: bdt=5_solid_ffff00
- right: bdr=10_groove_ff0000
- bottom: bdb=15_dotted_0000ff
- left: bdl=20_double_00ffff
VnSharing

[font2=hito17|w=150&h=50&pad=5px&bg=22FF22&bdt=5_solid_ffff00&bdr=10_groove_ff0000&bdb=15_dotted_0000ff&bdl=20_double_00ffff] VnSharing [/font2]

border-radius (rad)

VnSharing

[font2=hito18|cl=ffffff&bg=22FF22&w=300&h=50&rad=10] VnSharing [/font2]

VnSharing

[font2=hito19|cl=ffffff&bg=7777ff&w=300&h=50&rad=10,30] VnSharing [/font2]

VnSharing

[font2=hito20|cl=ffffff&bg=22FF22&w=300&h=50&rad=10,30,50] VnSharing [/font2]

VnSharing

[font2=hito21|cl=ffffff&bg=7777ff&w=300&h=50&rad=10,30,50,70] VnSharing [/font2]

text-shadow (tsd)

Tạo bóng cho text

Cú pháp: {vị trí bóng theo chiều ngang}_{vị trí bóng theo chiều dọc}_{độ nhòe của bóng}_{màu bóng}

Lưu ý:

Nếu không muốn bóng bị nhòe thì ở độ nhòe của bóng đặt số 0
Các bóng phải được ngăn cách với nhau bằng dấu "_"

VnSharing

[font2=hito22|al=center&s=20&bg=7777FF&cl=FFFFFF&w=200&h=50&tsd=10_10_0_000000_-10_10_0_,red] VnSharing [/font2]

FONT2 - Mở rộng

Phần mở rộng của Code FONT2.

Nếu bạn đã nắm vững phần 1 thì phần này cũng không khó lắm đâu

state (stt)

Tạo hiệu ứng

hover: khi rê chuột vào, stt=hover

VnSharing

[font2=hito23|cl=ffffff&bg=7777ff&w=300&h=50] VnSharing [/font2]
[font2=hito23|stt=hover&cl=99ff88&bg=ff7777][/font2]
active: khi đè chuột trái, stt=active

VnSharing

[font2=hito24|cl=ffffff&bg=7777ff&w=300&h=50] VnSharing [/font2]
[font2=hito24|stt=active&cl=99ff88&bg=ff7777][/font2]
Kết hợp cả 2

VnSharing

[font2=hito25|cl=ffffff&bg=7777ff&w=300&h=50] VnSharing [/font2]
[font2=hito25|stt=hover&cl=99ff88&bg=ff7777][/font2]
[font2=hito25|stt=active&cl=ffffff&bg=000000&][/font2]

time (time)

Thời gian chuyển trạng thái của FONT2, tạo cảm giác mượt hơn

VnSharing

[box=; display: none ||||][font2=hito26|cl=ffffff&bg=7777ff&w=300&h=50&time=1][/font2]
[font2=hito26|cl=99ff88&bg=ff7777&stt=hover][/font2]
[font2=hito26|cl=ffffff&bg=000000&&time=500m&stt=active][/font2][/box]
[font2=hito26|] VnSharing [/font2]

Kết hợp với TABLE

Chi tiết : BBcode [TABLE2]

FONT2 - Nâng cao

Đây là phần cuối cùng, cũng là phần nguy hiểm, hại não, hại máy nhất

Đề nghị cân nhắc trước khi xem

Gradient (gra)

Gửi bởi Kaldorei

Cú pháp có thể hình dung là: gra=A_B1_C1_B2_C2_B3_C3.....
A quy định kiểu gradient:
A=70 như vd trên, nghĩa là gradient theo 1 trục nghiêng 70 độ, từ blue cho đến crimson.
A=0 ↑
A=45 ↗
A=90 →
A=135 ↘
A=180 ↓
B và C quy định 1 "check point" của gradient màu, cụ thể: tại vị trí C% thì có màu là B, như ở vd trên:
vị trí 0% màu blue
vị trí 20% màu navy
vị trí 40% màu green
vị trí 60% màu yellow
.....
Giữa các "check point" đó, màu tự động biến thiên đều.

[font2=kal01|w=300&h=100&gra=70_,blue_0_,navy_20_,green_40_,yellow_60_,orange_80_,crimson_100][/font2]

[font2=kal02|w=100&h=100&rad=50&gra=repeat135_,white_0_,cyan_6][/font2]

[font2=kal03|w=100&h=100&rad=50&gra=radial_,red_0_,yellow_30_,green_60][/font2]

[font2=kal04|w=100&h=100&rad=50&gra=repeatradial_,red_0_,yellow_6][/font2]

Animation / Keyframes (key)

[font2=kal05|key=30=60=90&bg=,red=,green=,blue&w=400&h=20&bd=5_solid_,black=5_solid_,red=5_solid_,cyan&ani=kal05,6s,ease,infinite][/font2]
[font2=kal05|stt=hover&ani=none][/font2]

♥

✈

[font2=kal06|key=0=20&ani=kal06,1.2s,infinite&cl=,red&s=40=35&w=100&h=80&val=middle]♥[/font2]
[font2=kal07|key=0=100&ani=kal07,30s,linear,infinite&tsd=-500_0_0_,black=500_0_0_,black&cl=,transparent&s=30&mar=auto]✈[/font2]

Gửi bởi Kaldorei

Xem thêm : http://vnsharing.site/forum/showthre...879#post132879

Q&A

Bạn nào có thắc mắc gì thì post bên dưới nhé

Mod / Mem nào biết sẽ trả lời cho các bạn

**phamhongphuc** · 21-11-2014, 21:30

Thêm một cách để có thể sử dụng các font của bộ FONT2 và GFONT một cách thoải mái với đống CSS của thẻ BOX đó là đặt thẻ FONT2 đâu đó trong bài viết thường thì để ở cuối bài. Khi đó forum sẽ tạo cho ta một đoạn code CSS @font-face để load font trong bộ FONT2 (mà hồi trước ông nào đó bảo là 30MB ấy) ra. Khi này ta có thể thoải mái điền tên font như trên vào cho thẻ BOX để có thể thoải mái style với đầy đủ bộ CSS ~~mà không cần rườm rà như trên~~

PHP Code:


[box= ;display:none||||][font2=id|ff=utm-aquarelle]
Này thì thẻ FONT2 này
[/font2][/box]
[box= ;font-family:utm-aquarelle;font-style:bold;font-size:30px;||||]
Dùng thẻ BOX thích hơn phải không :tungtang:
[/box]

Dùng thẻ BOX thích hơn phải không

Nhược điểm là không có các hiệu ứng :hover :active (đã có thẻ HOVER rồi, còn thiếu mỗi ACTIVE ~~và các code cấm khác~~)

**Tham Lam** · 22-11-2014, 00:45

stt=hover
stt=active

Muốn 1 cái font2 có background màu xanh lá, khi lia chuột vô thì ra màu hồng và active là màu đen thì làm sao?
Tương tự với mấy cái khác.

Còn gravity (đúng không nhỉ, cái đổi màu từ A sang B) thì sao?

Mù font2.

Edit: hoá ra là gradient mà gõ thành gravity. Ha ha.
Cơ mà font2 này xem ra xài phiền hơn là font2 trước @_@

**HitomaruKonpaku** · 22-11-2014, 01:25

Gửi bởi Tham Lam

stt=hover
stt=active

Muốn 1 cái font2 có background màu xanh lá, khi lia chuột vô thì ra màu hồng và active là màu đen thì làm sao?
Tương tự với mấy cái khác.

Còn gravity (đúng không nhỉ, cái đổi màu từ A sang B) thì sao?

Mù font2.

Đây là nội dung

PHP Code:


[font2=hito_thamlam|] Đây là nội dung [/font2] 
 
[box=; display: none ||||] 
[font2=hito_thamlam|s=30&cl=FFFFFF&bg=00FF00&mar=auto&pad=10px&time=0.5][/font2] 
[font2=hito_thamlam|stt=hover&bg=FF00FF][/font2] 
[font2=hito_thamlam|stt=active&bg=000000&time=0.2][/font2] 
[/box]