Mã code tạo khung Text mẫu dạng html Css đẹp mắt tổng hợp 2021

Mã code tạo khung Text mẫu dạng HTML CSS (đóng khung text văn bản trong HTML hoặc code tạo khung HTML) để chèn vào bài viết tạo ra sự chuyên nghiệp cho bài viết. Các mẫu được tổng hợp từ nhiều website trên internet, được phép chia sẻ lại nên mình đăng lên đây để bạn nào cần thì lấy về để sử dụng.

Các đoạn mã code tạo khung Text mẫu html css tổng hợp

Mã code tạo khung Text mẫu kiểu ghi chú và thông báo

Đây là thông báo mẫu được tạo bởi đoạn mã code tạo khung text mẫu kiểu ghi chú và thông báo. Bạn tham khảo và làm theo hướng dẫn bên dưới.

Để tạo được đoạn mã code tạo khung text mẫu như trên, bạn coppy đoạn mã bên dưới và đổi nội dung text thành nội dung mong muốn. Dán và lưu trong chế độ soạn thảo html thì nó mới hoạt động. Bạn có thể thay đổi mã màu #ebf6e0 theo ý muố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 dolor sit amet, consectetur adipiscing elit. Proin nec dolor lobortis, feugiat ipsum a, aliquet eros. Praesent sit amet faucibus ante, ut volutpat quam. Phasellus ac facilisis justo. Vivamus venenatis tempus sem sed bibendum. Etiam finibus dolor tincidunt purus hendrerit sollicitudin. Aliquam at quam vitae turpis pharetra aliquet. Nullam lorem eros, sagittis feugiat urna sed, consectetur bibendum enim. Phasellus ultricies blandit facilisis. Nulla commodo pellentesque ex nec fringilla. Aliquam et massa nec libero rhoncus gravida.</div>

Mẫu nội dung thông báo khác có màu hồng

Đoạn mã code để coppy và dán vào khung soạn thảo html

<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: Đây là nội dung thông báo mẫu, thay đổi nội dung mẫu ở đây</div>

Tương tự, bạn cũng có thể thay đổi mã màu rgb và thay đổi nội dung theo ý muốn.

Đoạn mã code tạo khung text mẫu khung lưu ý

Đoạn mã code tạo khung Text mẫu kiểu khung quy định bình luận

Đây là mẫu xem trước các bạn có thể tham khảo

Đoạn mã để coppy và thay đổi theo ý muốn

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

Đoạn code tạo khung text mẫu HTML CSS dùng cho ghi chú của học bạn

Mẫu xem trước, mẫu này mình thấy màu sắc khá hay.

Đoạn mã code tạo khung text mẫu ở trên để coppy và sử dụng.

<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;">Không cần chuyên code hoặc lập trình gì vẫn có thể sử dụng. Chỉ cần coppy thư viện và sử dụng, thay đổi nội dung theo mong muốn</div>

Code tạo khung text mẫu HTML CSS – Blockquote của square

Demo

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

Đoạn mã code tạo khung text mẫu ở trên để coppy và sử dụng.

<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

Demo

Đoạn mã code tạo khung text mẫu ở trên để coppy và sử dụng.

<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;">Nulla in sodales felis, non tincidunt dolor. Sed ornare vel augue fermentum tempor. Aliquam ac sem ante. Suspendisse vitae nisi ac orci pretium euismod. Mauris condimentum ut mauris eu sollicitudin. Phasellus placerat odio ut tincidunt malesuada. Aliquam nec eros mauris. Sed a velit sagittis, eleifend nunc ut, consectetur lectus. Pellentesque vehicula magna nec odio euismod ultrices.</span></div>

Text box từ Bác Sĩ Windows

Demo

Đoạn mã code tạo khung text mẫu ở trên để coppy và sử dụng.

<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;">Nulla in sodales felis, non tincidunt dolor. Sed ornare vel augue fermentum tempor. Aliquam ac sem ante. Suspendisse vitae nisi ac orci pretium euismod. Mauris condimentum ut mauris eu sollicitudin. Phasellus placerat odio ut tincidunt malesuada. Aliquam nec eros mauris. Sed a velit sagittis, eleifend nunc ut, consectetur lectus. Pellentesque vehicula magna nec odio euismod ultrices.</div>

Đoạn mã của Google Help

Demo của Google Help

Đoạn mã code tạo khung text mẫu ở trên để coppy và sử dụng.

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

Nguồn: Internet và học bạn.