Một số code khung viền trang trí cho WordPress

Cho các bạn muốn “mỳ ăn liền” trang trí cho website của mình, code dạng HTML chỉ việc coppy và paste nên có thể dùng cho blogger, wordpress nên các bạn không phải lo về vấn đề hiển thị hay tương thích nhé. Chúng ta cùng bắt đầu tạo khung viền trong wordpress nào !

Một số code khung viền

Chú ý 1: Các bạn là phải dán code vào chế độ Văn bản (hay có mấy tên khác là chế độ Text hoặc chế độ HTML) của khung soạn thảo nhé. Cho những bạn chưa biết thì nếu các bạn muốn dán code vào thanh bên thì widget cần sử dụng ở đây là widget Văn bản nhé !

Chú ý 2:  Coppy qua notepad Thay dấu  bằng dấu “ (dấu nháy kép thẳng đứng)

Các code đường viền cơ bản

Dạng nét liền (solid)

Demo

CHÈN NỘI DUNG VÀO ĐÂY

Code:

<div style=”padding: 8px; border: 2px solid #FF1493; word-wrap: break-word;”>CHÈN NỘI DUNG VÀO ĐÂY</div>

Dạng dấu chấm (dotted)

Demo:

CHÈN NỘI DUNG VÀO ĐÂY

Code:

<div style=”padding: 8px; border: 2px dotted #FF69B4; word-wrap: break-word;”>CHÈN NỘI DUNG VÀO ĐÂY</div>

Dạng nét đứt (dashed)

Demo:

CHÈN NỘI DUNG VÀO ĐÂY

Code:

<div style=”padding: 8px; border: 2px dashed #FF4500; word-wrap: break-word;”>CHÈN NỘI DUNG VÀO ĐÂY</div>

Dạng nét đôi (double)

Demo:

CHÈN NỘI DUNG VÀO ĐÂY

Code:

<div style=”padding: 8px; border: 6px double #8A2BE2; word-wrap: break-word;”>CHÈN NỘI DUNG VÀO ĐÂY</div>

Dạng đường rãnh (groove)

Demo:

CHÈN NỘI DUNG VÀO ĐÂY

Code:

<div style=”padding: 8px; border: 10px groove salmon; word-wrap: break-word;”>CHÈN NỘI DUNG VÀO ĐÂY</div>

Dạng chóp (ridge)

Demo:

CHÈN NỘI DUNG VÀO ĐÂY

Code:

<div style=”padding: 8px; border: 10px ridge salmon; word-wrap: break-word;”>CHÈN NỘI DUNG VÀO ĐÂY</div>

Dạng đổ bóng bên trong (inset)

Demo:

CHÈN NỘI DUNG VÀO ĐÂY

Code:

<div style=”padding: 8px; border: 10px inset #8FBC8F; word-wrap: break-word;”>CHÈN NỘI DUNG VÀO ĐÂY</div>

Dạng đổ bóng bên ngoài (outset)

Demo

CHÈN NỘI DUNG VÀO ĐÂY

Code

<div style=”padding: 8px; border: 10px outset #8FBC8F; word-wrap: break-word;”>CHÈN NỘI DUNG VÀO ĐÂY</div>

Hoặc có thể thêm thuộc tính border-radius để bo tròn 4 góc, ví dụ như thế này:

Demo:

CHÈN NỘI DUNG VÀO ĐÂY

Code:

<div style=”border-radius: 25px; padding: 8px; border: 2px solid #FF1493; word-wrap: break-word;”>CHÈN NỘI DUNG VÀO ĐÂY</div>

Nếu nội dung trong khung quá dài, các bạn có thể dùng thuộc tính overflow kết hợp với max-height (hoặc height) để thu gọn lại (và sẽ xuất hiện thanh cuộn), ví dụ:

Demo:

Bọn chúng hí hửng, hí hửng nhưng rồi hơi bực vì cả đêm chưa có chuyện gì xảy ra. Chỉ có muỗi đến gặm chúng tơi bời. Bọn muỗi trên đài ngắm sao, không thích lại gần Vạn Độc Vương đầy độc và Đông Tử nói chuyện rất sinh động tay chân, nên giữa tấn công một người hay động đậy và tấn công hai tên dị quái ngồi im như bữa ăn dọn sẵn thì bọn muỗi chọn cái thứ hai rồi. Hai dị quái cắn răng chịu cắn, đến gần sáng, mới thấy hai con người hay giả vờ kia xích lại nhau chút. Bọn chúng mở cờ trong bụng, cuối cùng thì công trình kiên nhẫn nhiều chuyện cũng được đền đáp. Vậy mà Tường Vy lại đùng đùng xuất hiện.

 

Code:

<div style=”max-height: 150pxoverflow: auto; padding: 8px; border: 2px solid #FF1493; word-wrap: break-word;”>Bọn chúng hí hửng, hí hửng nhưng rồi hơi bực vì cả đêm chưa có chuyện gì xảy ra. Chỉ có muỗi đến gặm chúng tơi bời. Bọn muỗi trên đài ngắm sao, không thích lại gần Vạn Độc Vương đầy độc và Đông Tử nói chuyện rất sinh động tay chân, nên giữa tấn công một người hay động đậy và tấn công hai tên dị quái ngồi im như bữa ăn dọn sẵn thì bọn muỗi chọn cái thứ hai rồi. Hai dị quái cắn răng chịu cắn, đến gần sáng, mới thấy hai con người hay giả vờ kia xích lại nhau chút. Bọn chúng mở cờ trong bụng, cuối cùng thì công trình kiên nhẫn nhiều chuyện cũng được đền đáp. Vậy mà Tường Vy lại đùng đùng xuất hiện.</div>

 

Chú ý chung:

Phần chữ màu đỏ là độ dày của đường viền

Phần chữ màu xanh lá là loại đường viền (solid, dotted, dashed,…)

Phần chữ màu hồng là màu đường viền, có thể sử dụng tên gọi của màu (red, black,…), mã màu hex (#ffffff, #ff0000,…) hoặc các loại mã màu khác để thay màu cho đường viền. Về phần mã màu hex thì các bạn có thể xem và lấy mã màu ở ĐÂY nhé

Ba thành phần này có thể đổi chỗ cho nhau, kết quả đều không thay đổi.

Có thể sử dụng các thẻ <div>, <p>, <span> tuỳ trường hợp, không nhất thiết phải dùng thẻ <div> như trong code mẫu.

 

Kết hợp code

Kết hợp loại đường viền outset, groove và inset cùng thuộc tính border-radius.

Demo:

CHÈN NỘI DUNG VÀO ĐÂY

 

Code:

<div style=”border-radius: 25px; border:5px outset #D1ECFE;”>
<div style=”border-radius: 25px; border:5px groove #63C0FE;”>
<div style=”border-radius: 25px; border:5px inset #94D4FE;padding:10px;”>
CHÈN NỘI DUNG VÀO ĐÂY</div></div></div>

 Sử dung thuộc tính border-style để định dạng loại đường viền trên, dưới, trái, phải.

 Demo:

NỘI DUNG

Code:

<p style=”padding:8px; border-width:5px; border-color: #DC143C; border-style:
solid dashed dotted double; word-wrap:break-word;”>NỘI DUNG</p>

Background image, nền mờ

 

CHÈN NỘI DUNG VÀO ĐÂY

<div style=”border: #0033CC solid 2px; background-image:
url(‘CHÈN LINK HÌNH NỀN VÀO ĐÂY‘); word-wrap: break-word;
line-height: 20pt; text-align: justify;”>
<div style=”background-color: rgba(255,255,255,0.7); margin: 10px;
padding: 10px;”>CHÈN NỘI DUNG VÀO ĐÂY</div></div>

 

 + rgba(255,255,255,0.7) là màu sắc của nền mờ với độ mờ opacity từ 0 đến 1 (ở đây là 0.7)
GIẢI THÍCH
– padding: 8px: khoảng cách nằm giữa đường viền và nội dung
– border: 2px: độ dày của đường viền
– solid: loại đường viền (phần chữ mầu xanh)
– #FF1493: màu đường viền (phần chữ mầu hồng)
– border-radius: 25px: bo góc đường viền
– max-height: 150px: chiều cao tối đa của khung viền
– rgba(255,255,255,0.7): màu sắc với độ mờ opacity 0.7
– word-wrap: break-word: tự động xuống dòng
– line-height: 20pt: khoảng cách giữa các dòng
– Có thể sử dụng các thẻ <div>, <p>, <span> thay thế thẻ <div> tuỳ trường hợp.
– padding, border, margin, border-radius đều có thể sử dụng dưới dạng:

padding: 10px : các lề trên, lề dưới, lề trái, và lề phải là 10px
padding: 10px 20px : lề trên và lề dưới là 10px, lề phải và lề trái là 20px
padding: 10px 20px 30px : lề trên là 10px, lề phải và trái là 20px, lề dưới là 30px
padding: 10px 20px 30px 40px: lề trên là 10px, lề phải 20px, lề dưới là 30px, lề trái là 40p

Viết một bình luận