Bài viết này mình dành để tổng hợp một số đoạn code tạo khung text mẫu HTML CSS đẹp để khi cần thì copy dùng cho lẹ. Bạn nào cũng có nhu cầu thì tham khảo hoặc lưu bài viết lại để dùng nhé, tìm Google cũng mỏi đó ^^
Dưới đây là một số đoạn code tạo khung Text mẫu dạng HTML CSS (đóng khung text văn bản trong HTML, code khung viền html hoặc code tạo khung HTML). Các mẫu mình tham khảo từ nhiều website và tự làm.
Một số đoạn code tạo khung text mẫu HTML CSS
Khung ghi chú và thông báo trên Canhme.com
Đây là khung text mẫu HTML CSS mình khá là thích khi truy cập canh me – blog thông tin, khuyến mại về các dịch vụ hosting, domain rất lớn tại Việt Nam hiện nay.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Để sử dụng các bạn copy đoạn code dưới đây vào trình soạn thảo ở chế độ Text. Nhớ dán trong chế độ soạn thảo HTML nhé :v
Mã nguồn
<div style="background: #ebf6e0; border-radius: 2px; border: 1px solid #b3dc82; box-sizing: border-box; float: none; margin: 0px auto; outline: 0px; padding: 15px 20px; vertical-align: baseline; color: #5f9025; font-family: arial, sans-serif; font-size: 15px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>Một mẫu khác cũng của Canhme.com, cái này màu hường cho thông báo đồ là hợp nè :v
Thông báo: Nội dung thông báo
Code để dán vào đây nhé anh em:
Mã nguồn
<div style="background: rgb(255, 233, 233); border-radius: 2px; border: 1px solid rgb(251, 196, 196); box-sizing: border-box; color: #de5959; float: none; font-family: Arial, sans-serif; font-size: 15px; margin: 0px auto; outline: 0px; padding: 15px 20px; vertical-align: baseline;">AAAAAAAAAAAAAAAAAAAAAA</div>Code tạo khung text mẫu HTML CSS dùng cho ghi chú trên beta.hocban.vn/
Cái này mình tùy biến từ plugin Shortcodes Ultimate, cũng có một số mẫu khác nữa, tạm thời show cái này ra trước :v
Lưu ý là cái này không phải nói các anh em học bên web thì không cần học nhiều cũng làm được web, ở đây là đang so sánh về ưu điểm của việc sử dụng CMS cho dân không chuyên với việc phải bỏ thời gian dài đi học để làm được một sản phẩm tương tự.
Đây là code để anh em chèn vào
Mã nguồn
<div style="background: linear-gradient(40deg,#4caf5014,#ffeb3b17);
border-radius: 3px;
border: 3px solid #d5d5d500;
color: #333333;
border-image-source: linear-gradient(to right, #4caf5080, #9c27b0a8, #03a9f4a6);
border-image-slice: 1;
font-family: inherit;
font-size: inherit;
font-stretch: inherit;
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
line-height: inherit;
margin: 0px;
padding: 1em;
vertical-align: baseline;">
Lưu ý là cái này không phải nói các anh em học bên web thì không cần học nhiều cũng làm được web, ở đây là đang so sánh về ưu điểm của việc sử dụng CMS cho dân không chuyên với việc phải bỏ thời gian dài đi học để làm được một sản phẩm tương tự.</div>Khung lưu ý của Google Help
Đây là demo:
Code để anh em cốp bi và dán vào.
Mã nguồn
<aside class="caution" style="background: rgb(255, 243, 224); box-sizing: inherit; color: #dd2c00; font-family: Roboto, sans-serif; font-size: 14px; margin: 16px 0px; padding: 12px 24px 12px 20px;"><strong style="box-sizing: inherit; margin-top: 0px;">Caution:</strong><span style="box-sizing: inherit; margin-bottom: 0px;">&nbsp;This number only tracks requests that have been logged since DevTools was opened. If other requests occurred before DevTools was opened, those requests aren't counted.</span></aside>MẪU TEXT BOX PHẦN 2 NHÉ AE
Mẫu 1: Text box cơ bản với viền mềm mại và nền xanh nhạt
Mã nguồn
<div style="background: #e6f3fa; border: 1px solid #4a90e2; border-radius: 5px; padding: 20px; margin: 10px auto; color: #333; font-family: Arial, sans-serif; font-size: 16px; line-height: 1.6;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Đây là mẫu text box cơ bản với màu xanh dịu nhẹ, phù hợp cho các ghi chú hoặc thông báo quan trọng.
</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Đây là mẫu text box cơ bản với màu xanh dịu nhẹ, phù hợp cho các ghi chú hoặc thông báo quan trọng.
Mẫu 2: Text box với viền nét đứt và nền vàng nhạt
Mã nguồn
<div style="background: #fef5c4; border: 2px dashed #f7b731; border-radius: 3px; padding: 15px 20px; margin: 10px auto; color: #5c3c00; font-family: Roboto, sans-serif; font-size: 15px; line-height: 1.7;">
Nulla in sodales felis, non tincidunt dolor. Mẫu này sử dụng viền nét đứt và màu vàng nhạt, thích hợp để làm nổi bật các lưu ý hoặc mẹo nhỏ.
</div>Nulla in sodales felis, non tincidunt dolor. Mẫu này sử dụng viền nét đứt và màu vàng nhạt, thích hợp để làm nổi bật các lưu ý hoặc mẹo nhỏ.
Mẫu 3: Text box với hiệu ứng bóng và nền tím nhạt
Mã nguồn
<div style="background: #f3e8ff; border: 1px solid #c084fc; box-shadow: 3px 3px 5px rgba(0,0,0,0.1); border-radius: 8px; padding: 20px 25px; margin: 15px auto; color: #4c1d95; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 1.6;">
Phasellus placerat odio ut tincidunt malesuada. Mẫu này có hiệu ứng bóng nhẹ và màu tím pastel, phù hợp cho các đoạn văn bản cần sự tinh tế.
</div>Phasellus placerat odio ut tincidunt malesuada. Mẫu này có hiệu ứng bóng nhẹ và màu tím pastel, phù hợp cho các đoạn văn bản cần sự tinh tế.
Mẫu 4: Text box đơn giản với màu đen chủ đạo
Mã nguồn
<div style="background: #f8f9fa; border: 1px solid #343a40; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); padding: 22px 28px; margin: 18px auto; color: #212529; font-family: 'Arial', sans-serif; font-size: 15px; line-height: 1.6; max-width: 100%; transition: all 0.3s ease; cursor: pointer;"><strong>📝 Hướng dẫn:</strong> Phasellus placerat odio ut tincidunt malesuada. Mẫu tối giản này có hover effect mượt mà, hoàn hảo cho tài liệu học tập hoặc blog.</div>📝 Hướng dẫn: Phasellus placerat odio ut tincidunt malesuada. Mẫu tối giản này có hover effect mượt mà, hoàn hảo cho tài liệu học tập hoặc blog.
MẪU TEXT BOX PHẦN 3 – có hiệu ứng động
Mẫu 1: Viền xanh neon – Hiệu ứng quét ngang
Mã nguồn
<div style="background:#000; color:#0f0; padding:25px 30px; margin:25px auto; max-width:100%; border-radius:8px; font-family:'Courier New'; font-size:16px; position:relative; overflow:hidden;">
<div style="position:absolute; top:0; left:-100%; width:50%; height:100%; background:linear-gradient(90deg, transparent, rgba(0,255,0,0.3)); animation:scan3 2s linear infinite;"></div>
<strong>SUCCESS:</strong> Đăng ký thành công!
</div>
<style>@keyframes scan3{0%{left:-100%;} 100%{left:100%;}}</style>Mẫu 2: Nền trắng – Viền đen + hiệu ứng “máy quét”
Mã nguồn
<div style="background:#fff; color:#000; padding:25px 30px; margin:25px auto; max-width:100%; border:2px solid #000; border-radius:10px; position:relative; overflow:hidden; font-family:'Courier New';">
<div style="position:absolute; top:0; left:-100%; width:100%; height:4px; background:#000; animation:scan16 2s infinite;"></div>
<strong>SCAN:</strong> Đang kiểm tra hệ thống...
</div>
<style>@keyframes scan16{0%{left:-100%;} 100%{left:100%;}}Mẫu 3: Nền neon xanh → tím (hiệu ứng cyber)
Mã nguồn
<div style="max-width:100%; margin:20px auto; padding:30px; background:#000; color:#0f0; font-family:'Courier New'; font-size:18px; border:2px solid #0f0; border-radius:12px; position:relative; overflow:hidden;">
<div style="position:absolute; inset:-2px; border:2px solid #0f0; border-radius:12px; animation:scan53 2s infinite;"></div>
<p style="margin:0; white-space:nowrap; overflow:hidden; border-right:3px solid #0f0; animation:type53 4s steps(40) infinite;">CODE: Hệ thống đang khởi động... 100%</p>
</div>
<style>
@keyframes type53 {0%{width:0;} 100%{width:100%;}}
@keyframes scan53 {0%{top:-100%;} 100%{top:100%;}}
</style>Mẫu 4: Nền “đám mây” + chữ bay
Mã nguồn
<div style="max-width:100%; margin:20px auto; padding:40px; background:#87CEEB; color:#2c3e50; font-family:'Georgia'; font-size:24px; text-align:center; position:relative; overflow:hidden; border-radius:20px;">
<div style="position:absolute; top:20%; left:-100px; font-size:60px; opacity:0.3; animation:cloud56 15s infinite linear;">☁️</div>
<div style="position:absolute; top:50%; left:-100px; font-size:80px; opacity:0.2; animation:cloud56 20s infinite linear 5s;">☁️</div>
<strong>DREAM:</strong> Bay cao như mây!
</div>
<style>
@keyframes cloud56 {0%{left:-100px;} 100%{left:110%;}}
</style>Mình vẫn tiếp tục sưu tầm, anh em có mẫu nào đẹp chia sẻ với beta.hocban.vn/ nhé, cảm ơn anh em !
Copy gán vào đâu vậy bác, mò nảy giờ mà không ra 🙁
À, cái này là mẫu mình dùng để dán vào bài viết, trang. Bạn chuyển sang chế độ soạn thảo HTML >> dán code mẫu vào >> chuyển lại chế độ soạn thảo văn bản bình thường là thấy kết quả nhé !
Cũng được đó
Cái này dành cho mấy anh em không chuyên thôi, còn anh em làm bên web thì thôi mấy cái này quá đơn giản ấy mà ^^
Hay đó để áp dụng vô blog
Quẩy lên bác ^^
Rất hữu ích nhé bác, em vừa áp dụng cho web em xong.
Ngon ngay, cảm ơn bác đã khen ạ ^^
Thanks bác, e thấy bên Canhme dùng plugin Shortcode để tạo mấy cái box kia nhưng đã CSS lại cho với bản mặc định 😀
Plugin Shortcode tạo texbox, nút nhấn,…cũng sẽ tiện hơn cho ae nào không thích vọc vào HTML CSS nè. CanhMe chỉnh mấy cái khung text box nhìn trực quan, quá oke đó bác.
Em hỏi chút, em muốn tạo box text cho toàn bộ bài viết thì vào đâu chèn đoạn code trên ạ. Em dùng wordpress flatsome ạ !
Nếu mà bài nào cũng chèn thì bác tham khảo các plugin hỗ trợ chèn ads vào đầu, cuối, giữa bài viết như: Insert Content, Ad Inserter.
Bài viết rất hữu ích
Cảm ơn bác đã khen ạ, quá là cảm động ^^
Cho mình hỏi tăng khoảng cách dòng với khung text box bằng cách nào tại làm xong nó cứ bị dính sát vào đoạn văn bên trên và bên dưới.
À, bác thêm thẻ
sau mỗi đoạn code mẫu HTML trên là được nhé ! Cứ 1 cái
là nó xuống 1 hàng.
Cảm ơn bạn vì những chia sẻ thật sự hữu ích đúng thứ mình cần.
Không có chi nhé ngừ đẹp ^^
Bạn chịu khó sưu tầm ghê 🙂
KK, để khi cần thì copy cho lẹ á bác, với e thích nghịch mấy cái này lắm ^^
blogger nổi tiếng đây rồi