BBCode [FONT2]







1 - Cơ bản

2 - Mở rộng

3 - Nâng cao

4 - Q&A







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










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:

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




    VnSharing



    [font2=hito16|pad=5px&bg=22FF22&bd=10_solid_0000FF] VnSharing [/font2]

  2. 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)








Quote Originally Posted by Kaldorei
View Post

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]










Quote Originally Posted by Kaldorei
View Post






Xem thêm : http://vn-sharing.net/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








Temp