Khung text mẫu HTML CSS

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) để anh em chèn vào bài viết cho nó nhí nhảnh tí :v Các mẫu mình tham khảo từ nhiều website trong và ngoài nước, thấy ưng cái bụng là hốt về để dành chơi :v

Trước khi đi vào nội dung bài viết thì mình có một gợi ý cho anh em nào muốn tùy biến nhiều hơn về màu sắc, màu nền, làm đẹp website, giúp trang web trở nên XỊN XÒ hơn. Đó là bạn tham gia học CSS cơ bản này nhé ! Đó cũng là một hành trang quan trọng để bạn chủ động hơn trong con đường làm web hoặc Digital Marketing sau này.

Một số đoạn code tạo khung text mẫu HTML CSS

Để sử dụng hiệu quả những đoạn code khung viền html – code tạo khung text mẫu HTML CSS thì bạn có thể tham khảo các bài học về thuộc tính Border hoặc CSS Borders.

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.

Để 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

<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

Code để dán vào đây nhé anh em:

<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;">Thông báo: Nội dung thông báo</div>

Khung lưu ý mới của Canhme.com

Code:

<div class="symple-box yellow center " style="background: #fffdf3; border-radius: 2px; border: 1px solid #f2dfa4; box-sizing: border-box; color: #c4690e; float: none; font-family: Arial, sans-serif; font-size: 15px; margin: 0px auto; outline: 0px; padding: 15px 20px; vertical-align: baseline;"><strong style="background: transparent; border: 0px; box-sizing: initial; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Lưu ý</strong>:
<ul style="background: transparent; border: 0px; box-sizing: initial; margin: 0px 0px 20px 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="background: transparent; border: 0px; box-sizing: initial; list-style: disc; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Mỗi khách hàng chỉ được sử dụng mỗi coupon 1 lần duy nhất.</li>
<li style="background: transparent; border: 0px; box-sizing: initial; list-style: disc; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Tối đa mỗi khuyến mại tên miền có thể đăng ký 20 domain/account/giao dịch.</li>
<li style="background: transparent; border: 0px; box-sizing: initial; list-style: disc; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Khuyến mại kết thúc vào 11h59 ngày 3/12/2019 theo giờ Việt Nam.</li>
</ul>
</div>

Khung quy định bình luận trên ocuaso.com

Bạn nào thích qua bên ocuaso mà coi nhé, kéo xuống dưới khung comment sẽ thấy. Hôm nay mình vào và thấy khá thích.

<div style="box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 10px; box-sizing: inherit; margin-bottom: 10px; padding: 20px; box-sizing: inherit; line-height: 1.6em; padding: 15px;">
<span style="box-sizing: inherit; font-weight: 700; line-height: 2.0em;"><span style="color: black;">&nbsp;Lưu ý:</span></span><br />
<span style="color: #222222;">» Địa chỉ email của bạn được bảo mật.</span><br />
<span style="color: #222222;">» Mục không có dấu sao (*) là không bắt buộc.</span><br />
<span style="color: #222222;">» Bình luận bằng tiếng Việt có dấu nếu có thể.</span></div>

Đang sưu tầm tiếp anh em ạ :v ai có mẫu nào cho mình xin một đường link.

Code tạo khung text mẫu HTML CSS dùng cho ghi chú trên 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

<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>

Code tạo khung text mẫu HTML CSS – Blockquote đang sử dụng trên square.com

Note: The Code Block has a 400 KB limit, which is around 300,000 characters.

<blockquote style="-webkit-text-stroke-width: 0px; background: rgb(232, 249, 244); border: 1px solid rgb(142, 227, 200); box-sizing: border-box; clear: right; color: #181818; font-family: &quot;Gotham SSm A&quot;, &quot;Gotham SSm B&quot;, Gotham, sans-serif; font-size: 14px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 300; letter-spacing: normal; line-height: 1.6em; margin: 1.5em 0px; orphans: 2; padding: 1.6em; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
<strong style="box-sizing: border-box; font-weight: 500;">Note:&nbsp;</strong>The&nbsp;Code Block has a 400 KB&nbsp;limit, which is around 300,000 characters.</blockquote>

Text box từ WP Căn Bản

Đây là demo code tạo khung text mẫu HTML CSS của Wpcanban.com để anh em tham khảo

<div class="content-box-yellow" style="background-color: #fef5c4; border: 1px solid rgb(250, 223, 152); box-sizing: inherit; margin: 0px 0px 25px; overflow: hidden; padding: 20px;">
<span style="color: #222222; font-family: sans-serif;">Như vậy là chúng ta vừa thực hiện xong việc cài WordPress Trên Hostinger với tên miền tk rồi đấy. Nhìn chung quy trình cài đặt chỉ khác ở đoạn đầu thôi, còn lại các bạn cứ thực hiện tương tự như trên localhost. Bài 35 này cũng đã khép lại Series WordPress Cơ Bản. Trong tương lai có thể mình sẽ hướng dẫn thêm các bài cài đặt nhanh WordPress mà không cần đăng ký tên miền, cài trên các Hosting miễn phí khác nhé.</span></div>

Text box từ Bác Sĩ Windows

<div class="box_luuy" style="background: #66689c; box-shadow: rgba(0, 0, 0, 0.1) 3px 4px 4px; clear: both; line-height: 1.7; color: white; font-family: Roboto; letter-spacing: -0.75px; margin: 5px 0px; padding: 20px 25px; transition: 0.5s;">Như vậy là chúng ta vừa thực hiện xong việc cài WordPress Trên Hostinger với tên miền tk rồi đấy. Nhìn chung quy trình cài đặt chỉ khác ở đoạn đầu thôi, còn lại các bạn cứ thực hiện tương tự như trên localhost. Bài 35 này cũng đã khép lại Series WordPress Cơ Bản. Trong tương lai có thể mình sẽ hướng dẫn thêm các bài cài đặt nhanh WordPress mà không cần đăng ký tên miền, cài trên các Hosting miễn phí khác nhé.</div>

Khung lưu ý của Google Help

<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

<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>

 Mẫu 2: Text box với viền nét đứt và nền vàng nhạt

<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>

Mẫu 3: Text box với hiệu ứng bóng và nền tím nhạt

<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>

Mẫu 4: Text box với viền đôi và nền hồng phấn

<div style="background: #ffeef0; border: 3px double #f472b6; border-radius: 4px; padding: 18px 22px; margin: 10px auto; color: #831843; font-family: Arial, sans-serif; font-size: 15px; line-height: 1.6;">
Aliquam nec eros mauris. Text box này sử dụng viền đôi và màu hồng phấn, lý tưởng cho các thông báo vui tươi hoặc nội dung nổi bật.
</div>

Mẫu 5: Text box với nền gradient và viền xanh lá

<div style="background: linear-gradient(45deg, #d4fc79, #96e6a1); border: 1px solid #38a169; border-radius: 6px; padding: 20px; margin: 12px auto; color: #1a4731; font-family: 'Helvetica', sans-serif; font-size: 16px; line-height: 1.6;">
Sed a velit sagittis, eleifend nunc ut. Mẫu này sử dụng nền gradient xanh lá, mang lại cảm giác hiện đại và tươi mới, phù hợp cho các nội dung sáng tạo.
</div>

Tiếp tục sưu tầm, anh em có mẫu nào đẹp chia sẻ với HOTRO.ORG nhé ! Cảm ơn anh em ?