Text box HTML CSS template, khung mẫu cho bài viết

Dưới đây là một số mẫu text box template để 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

1. Khung ghi chú và thông báo trên Canhme.com

Đây là mẫu 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;">AAAAAAAAAAAAAAAAAAAAAA</div>

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

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

Demo:

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

Để thêm code này bạn dán vào như sau, thích thay thành văn bản nào thì tùy ý bạn nhé :v

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

3. Mẫu hiện tại đang 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

Đây là code để anh em chèn vào

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

4. Blockquote đang sử dụng trên square.com

Hôm nay đi dạo cũng vớ được một mẫu nữa, nhìn cũng ổn phết đó chứ nhỉ. Cũng không phải cái gì quá đặc sắc, chỉ là một cách phối màu mà mình cho là nhẹ nhàng, tinh tế, đáng để đưa vào thư viện của Hocban.vn

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

Đây là code để các bạn dán vào bài viết, page, widget,..hay vị trí nào đó trên website mà bạn muốn:

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

5. Text box từ WP Căn Bản

Đây là demo để anh em tham khảo

Đây là code để anh em dán vào, nhớ thay thế đoạn văn bản của mình bằng văn bản mà anh em muốn nhé !

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

6. Text box từ Bác Sĩ Windows

Demo:

Code để anh em dán vào:

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

7. Khung lưu ý của Google Help

Đây là demo:

Code để anh em cốp bi và dán vào.

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

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

Có thể bạn cũng thích

• Bộ sưu tập nút bấm – HTML and CSS Button Styles

Hocban.vn

Bài viết bạn đang xem được viết bởi Tịnh Nguyễn, là người thường đăng bài và comment dạo trên Hocban.vn