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 BBCode [FONT2] Th_83










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 BBCode [FONT2] Th_46)

  • 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 BBCode [FONT2] Th_82






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 BBCode [FONT2] Th_46



Đề nghị cân nhắc trước khi xem BBCode [FONT2] Th_46






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é BBCode [FONT2] Tamrua



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








Temp