BBCode [box]

[indent]BBCode box[/indent]

Bài giới thiệu BBCode box, BBCode đơn giản nhưng có vai trò quan trọng bậc nhất nếu bạn muốn trình bày bài viết một cách cầu kỳ.

[hs1]BBCode box[/hs1]
[box="border: 5px double black; float: left; margin-right: 5px; padding: 5px; background-color: #fff"][toc][/box][hs2]box[/hs2]: Tạo ra một cái hộp (box) chứa nội dung
[indent][cbox][ob]box[cb]{Nội dung}[ob]/box[cb][/cbox]

[box]Nội dung Nội dung Nội dung[/box]

[ob]box[cb]Nội dung Nội dung Nội dung[ob]box[cb]

Những gì bạn thấy là... không có gì cả. Cái box chứa nội dung thực sự tồn tại, chỉ có điều do nó chưa được đặt thông số về viền hay màu nền nên nó không hiện ra mà thôi.

[box box="border: 2px solid #00dddd"]Nội dung Nội dung Nội dung[/box]

[ob]box box="border: 2px solid #00dddd"[cb]Nội dung Nội dung Nội dung[ob]box[cb]

Các thuộc tính của box
[indent][hs3]box[/hs3]: Quyết định bề ngoài của box
Thuộc tính này nhận các thông số CSS.

[box box="border: 8px groove #00dddd; padding: 2px"]Nội dung Nội dung Nội dung[/box]

[ob]box box="border: 8px groove #00dddd; padding: 2px"[cb]Nội dung Nội dung Nội dung[ob]box[cb]

[hs3]class[/hs3]: Đặt lớp cho box
Thuộc tính này sẽ đưa các thông số css chứa trong class tương ứng vào cột.

[box class="custom"]Nội dung Nội dung Nội dung[/box]

[ob]box class="custom"[cb]Nội dung Nội dung Nội dung[ob]box[cb]

[/indent][/indent]

[hs2]Chú ý[/hs2]
[indent]Box là một BBCode quan trọng, tuy nhiên nó có một đặc điểm là mỗi box chỉ nằm trên một dòng, thử đưa hai box nằm trên cùng một dòng sẽ cho ra kết quả là hai box nằm trên hai dòng khác nhau.
Để khắc phục, hãy dùng thông số display: inline-block.
Còn nhiều cách khắc phục khác nữa nhưng không tiện nêu ở đây.
[/indent]

[hs1]FAQ[/hs1]
Q: Mình có thể tạo một box có hình tròn không?
A: Được, bằng cách dùng border-radius: 50% với một box hình vuông
[box="border: 3px solid green; border-radius: 50%; width: 100px; height: 100px"][/box]
Q: Mình có thể tạo một box có hình tam giác không?
A: Được, cách làm tương đối khó hiểu, vậy nên tham khảo ở đây http://apps.eky.hk/css-triangle-generator/ là nhanh nhất, copy nguyên văn thông số css vào thôi (nhớ xóa hết mấy dấu xuống dòng).
[box="border-style: solid; border-width: 20px 0 0 20px; border-color: transparent transparent transparent green"][/box]
Q: Mình có thể...
A: Giới hạn sáng tạo với BBCode box là không có, nếu khi nào đó rảnh mình có thể liệt kê một vài thủ thuật đơn giản, những thủ thuật ảo diệu hơn thì hãy search google.
[id="xyz"]-----------------[/id]



[box="width: 250px; height: 100px; perspective: 1000px; display: inline-block"][box="position: relative; transform-style: preserve-3d; transform: rotateX(-30deg) rotateY(50deg) rotateZ(0deg)"]
[box class="square x1"][/box][box class="square x2"][/box][box class="square x3"][/box][box class="square x4"][/box][box class="square x5"][/box][box class="square x6"][/box][box class="square2 x11"][/box][box class="square2 x21"][/box][box class="square2 x31"][/box][box class="square2 x41"][/box][box class="square2 x51"][/box][box class="square2 x61"][/box]
[/box][/box][box="width: 200px; height: 100px; perspective: 1000px; display: inline-block"][box="position: relative; transform-style: preserve-3d; transform: rotateX(-150deg) rotateY(30deg) rotateZ(10deg)"]
[box class="square x1"][/box][box class="square x2"][/box][box class="square x3"][/box][box class="square x4"][/box][box class="square x5"][/box][box class="square x6"][/box][box class="square2 x11"][/box][box class="square2 x21"][/box][box class="square2 x31"][/box][box class="square2 x41"][/box][box class="square2 x51"][/box][box class="square2 x61"][/box]
[/box][/box][box="width: 200px; height: 100px; perspective: 1000px; display: inline-block"][box="position: relative; transform-style: preserve-3d; transform: rotateX(-40deg) rotateY(20deg) rotateZ(0deg)"]
[box class="square x1"][/box][box class="square x2"][/box][box class="square x3"][/box][box class="square x4"][/box][box class="square x5"][/box][box class="square x6"][/box][box class="square2 x11"][/box][box class="square2 x21"][/box][box class="square2 x31"][/box][box class="square2 x41"][/box][box class="square2 x51"][/box][box class="square2 x61"][/box]
[/box][/box][clear]


[space="125px"]Chúng được tạo ra từ box *true_story*


[metabox][style="square"]border: 3px solid black; width: 94px; height: 94px; text-align: center; vertical-align: top; position: absolute; display: inline-block; border-radius: 10px[/style]
[style="x1"]transform: rotateX(-25deg) translateZ(50px); transform-origin: 0px 100px 50px; background-color: rgba(255,0,0,1)[/style]
[style="x2"]transform: rotateY(90deg) translateZ(50px); background-color: rgba(0,255,0,0.5)[/style]
[style="x3"]transform: rotateY(180deg) translateZ(50px); background-color: rgba(255,0,0,0.5)[/style]
[style="x4"]transform: rotateY(270deg) rotateX(-25deg) translateZ(50px) translateX(-100px); transform-origin: 0px 100px 50px; background-color: rgba(0,255,0,1)[/style]
[style="x5"]transform: rotateX(90deg) translateZ(50px); background-color: rgba(0,0,255,1)[/style]
[style="x6"]transform: rotateX(270deg) translateZ(50px); background-color: rgba(0,0,255,0.5)[/style]
[style="square2"]border: 3px solid black; width: 44px; height: 44px; text-align: center; vertical-align: top; position: absolute; display: inline-block; border-radius: 5px; background-color: gray;[/style]
[style="x11"]transform: rotateX(0deg) translateZ(50px) translateY(25px)[/style]
[style="x21"]transform: rotateY(90deg) translateZ(25px) translateX(-25px) translateY(25px)[/style]
[style="x31"]transform: rotateY(180deg) translateZ(0px) translateY(25px)[/style]
[style="x41"]transform: rotateY(270deg) translateZ(25px) translateX(25px) translateY(25px)[/style]
[style="x51"]transform: rotateX(90deg) translateZ(0px) translateY(25px)[/style]
[style="x61"]transform: rotateX(270deg) translateZ(50px) translateY(-25px)[/style]
[style="custom"]border: 8px ridge #dd00dd;
background-color: #00dddd;
padding: 2px[/style][/metabox]