Tổng hợp một số code khung viền trang trí

Posted by admin on 24/05/2020 Leave a comment (0) Go to comments

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

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

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

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

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

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

Dạng chóp (ridge)

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

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

Ngoài ra các bạn cũng có thể kết hợp các code đường viền ở trên thành những dạng đường viền hỗn hợp hoặc có thể thêm thuộc tính border-radius để bo tròn 4 góc, ví dụ như thế này:

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)

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 bằng cách google 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.

Một số mẫu khung viền cho blog

Mẫu 1

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.

Code:

Mẫu 2

Demo:

Firefly – A*Teen

When I said go I never meant away
You ought to know the freaky games we play
could you forgive and learn how to forget
hear me as I’m calling out your nameFirefly come back to me
make the night as bright as day
I’ll be looking out for you
tell me that your lonely too
firefly come lead me on
follow you into the sun
that’s the way it ought to be
firefly come back to meYou and me
we shared a mystery
we were so close
like honey to the bee
And if you tell me how to make you understand
I’m minor in a major kinda wayFirefly come back to me
make the night as bright as day
I’ll be looking out for you
tell me that your lonely too
firefly come lead me on
follow you into the sun
that’s the way it ought to be
firefly come back to meFly firefly through the sky
come and play with my desire
don’t be long don’t ask why
I can’t wait another night

Code:

Lưu ý: Chỉnh độ cao của khung viền ở phần chữ màu xanh lá. Nội dung phải đủ lớn thì thanh cuộn mới xuất hiện, nếu nội dung của các bạn ngắn hơn hoặc bằng chiều cao tối đa thì thanh cuộn sẽ không hiển thị.

Mẫu 3

Demo:

Code:

Mẫu 4

Demo:

Code:

Mẫu 5

Demo:

Hai tên biết Vạn Độc Vương võ công cao siêu nên cả đêm ngồi chịu muỗi cắn không dám động đậy sợ bị phát hiện, chỉ hấp háy liếc nhau, giao tiếp bằng mắt diễn tiến sự việc. 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.

Code:

Mẫu 6

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:

Lưu ý: Trong code mẫu này có 4 dòng nội dung, trong đó dòng Nội dung cuối cùng được mình đánh dấu id (id=”dong-cuoi-cung”). Khi nội dung của các bạn ít hơn 4 dòng trong code mẫu thì các bạn chỉ được phép xoá một trong các dòng 1, 2, 3 ở trên, còn dòng Nội dung cuối cùng thì không được xoá. Nếu nội dung của các bạn nhiều hơn số dòng trong code mẫu thì các bạn copy đoạn code của dòng nội dung thứ 1 hoặc 2 hoặc 3 và dán nó lên trước code của dòng Nội dung cuối cùng là được

Mẫu 7 (Credit)

Demo:

Cảm ơn các bạn đã xem bài viết này

Code:

Mẫu 8

Demo:

~ Nội dung ~

Các code đường viền cơ bản
Tạo lớp nền mờ (opacity) phủ lên hình nền
Giải thích một số thuộc tính trong code
Một số khung viền mẫu

Trước khi đi vào hướng dẫn cụ thể thì mình cũng xin nói trước với các bạn là mình hoàn toàn không phải là dân chuyên về công nghệ thông tin hay viết code gì cả, mình chỉ tự mò mẫm và hiểu theo ý của mình, vì vậy những từ mình dùng trong bài viết có thể không chính xác với từ ngữ, thuật ngữ trong chuyên ngành công nghệ thông tin hoặc code của mình có thể thừa hoặc chưa chặt chẽ. Thế nên nếu có chỗ nào sai sót thì mong các bạn góp ý chứ đừng gạch đá mình nhé. Và hãy chuẩn bị tinh thần đi, bài này rất là dài đấy nhé.

Code:

Lưu ý: Chỉnh độ rộng của khung nội dung ở phần chữ màu xanh lá, nếu các bạn muốn khung nội dung trôi sang bên trái thì thay chữ right trong code mẫu bằng left là được (và nếu thế thì sẽ phải sửa lại margin cho thích hợp). Một số thuộc tính về font chữ, màu chữ, cỡ chữ, margin, padding hay đường viền, độ trong suốt của nền thì các bạn có thể sửa lại sao cho phù hợp nhé