[WPtips] Code đường viền và cách viết một số kiểu khung viền trang trí cho blog WordPress (bản cập nhật)

Trang:123456

---

VI. Kiểu khung viền 2 lớp

Kiểu này là kiểu mà rất nhiều bạn hỏi mình đây nè Mình sẽ giải thích cách thức để viết được code kiểu này trước, sau đó sẽ viết code mẫu cho các bạn sau nhé

Trước khi bắt tay vào viết code khung viền, Sera xin nhắc lại một lần nữa:

Vui lòng không ăn cắp, không đạo nhái, không đem các bài hướng dẫn của tôi ra khỏi blog Gió Xanh (wptutbyserahwang.wordpress.com) dưới mọi hình thức! Xin hãy tôn trọng chất xám và công sức của tôi! Ăn cắp là *beep*

Tiếp theo là vài điều các bạn cần lưu ý trước khi viết code:

1.Trước khi học viết các kiểu khung viền (Kiểu 1, Kiểu 2, Kiểu 3, Kiểu 4), các bạn phải quay lại Trang 1 của bài hướng dẫn này hoặc bấm vào ĐÂY để đọc các lưu ý cần thiết khi viết và thay code. Đó là những chú ý quan trọng và các bạn BẮT BUỘC phải đọc để code khung viền có thể hoạt động như ý muốn.

2.Cách viết code đường viền và các lưu ý khi viết code đường viền cơ bản mình đã viết rất chi tiết ở Trang 1 của bài này rồi nên mình sẽ không giải thích lại trong phần này nữa. Nếu các bạn chưa đọc thì hãy bấm vào ĐÂY để đọc, và các bạn bắt buộc phải đọc hết toàn bộ nội dung có trong trang 1 để việc tuỳ chỉnh và thay code diễn ra suôn sẻ. Mình đã viết lưu ý rất đầy đủ ở trang 1 rồi mà bạn nào còn hỏi những cái mình viết rồi là mình cho ăn búa nhá

3.Các code khung viền sẽ luôn sử dụng thuộc tính padding (hoặc có cả margin nữa), chi tiết về padding mình đã viết ở trang 1 rồi nên cũng không nhắc lại ở phần này nữa.

4.Ở trang cuối cùng của bài này mình có tổng hợp một số hình ảnh dạng pattern (pattern hiểu đơn giản là dạng hoạ tiết lặp lại) và ảnh động làm nền cho bài viết, các bạn có thể bấm vào ĐÂY để xem nhé

Nào, bây giờ chúng ta sẽ mổ xẻ cấu trúc của kiểu khung viền 2 lớp này. Đúng như cái tên, kiểu khung viền này bao gồm 2 lớp: lớp nền bằng hình ảnh ở phía sau và lớp nền mờ (thường là màu trắng) đè lên nó. Tóm lại, kiểu khung viền này gồm 2 code khung viền 1 lớp cơ bản lồng vào với nhau. Cách viết code khung viền 1 lớp cơ bản mình đã viết ở Trang 2 rồi, các bạn có thể bấm vào ĐÂY để xem nhé Tuy nhiên, ở trang 2 mình mới chỉ hướng dẫn các bạn cách chèn nền màu đơn và nền bằng hình ảnh, trong khi đó lớp nền thứ 2 của kiểu khung viền này lại là một màu trắng hơi hơi trong suốt?! Vậy thì làm sao để có được lớp nền này?! Câu trả lời rất đơn giản, chúng ta vẫn sẽ sử dụng mã màu, nhưng mã màu cần sử dụng ở đây là mã rgba. Đây là dạng mã màu mở rộng của mã màu rgb, chữ a ở cuối cùng đại diện cho mức độ trong suốt của màu, có giá trị từ 0 đến 1, giá trị càng nhỏ thì độ trong suốt càng lớn. Các bạn có thể vào trang hexcolortool.com để tuỳ chỉnh độ trong suốt và lấy mã màu rgba nhé Nhưng theo mình thấy thì đa số mọi người chỉ sử dụng lớp nền mờ màu trắng chứ không dùng các màu khác, thế nên mình sẽ viết luôn thuộc tính background với nền mờ màu trắng cho các bạn nhé. Cú pháp viết thuộc tính background lúc này sẽ như sau:

background: rgba(255, 255, 255, 0.8);

Trong đó, 0.8 là mức độ trong suốt của lớp nền, các bạn có thể tăng giảm tuỳ ý nhé. Phần thập phân nằm sau dấu chấm không nhất định phải dùng 1 con số duy nhất, các bạn có thể dùng nhiều hơn 1 số cũng được. Ví dụ như mình có thể để độ trong suốt là 0.84 hoặc 0.856 đều được. Tóm lại là các bạn cứ điều chỉnh độ trong suốt đến khi nào hài lòng thì thôi.

Nào, giờ thì chúng ta sẽ bắt đầu với code định dạng bài viết cơ bản sau:

<div style="font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">CODE NỘI DUNG BÀI VIẾT</div>

Kết quả:

CODE NỘI DUNG BÀI VIẾT

Như mình đã nói ở trên, kiểu khung viền này có 2 lớp, bao gồm 1 lớp nền bằng hình ảnh ở phía sau và 1 lớp nền mờ (thường là màu trắng) đè lên nó. Điều này đồng nghĩa với việc mình phải sử dụng 2 cặp thẻ định dạng để viết code khung viền, 1 cặp thẻ dùng để viết code lớp nền bằng hình ảnh, 1 cặp thẻ dùng để viết code lớp nền mờ. Thông thường, nếu không thêm các thuộc tính đè lớp khác thì cặp thẻ định dạng viết sau sẽ hiển thị đè lên cặp thẻ định dạng viết trước. Do đó, mình sẽ viết cặp thẻ xác định lớp nền bằng hình ảnh trước, rồi mới viết cặp thẻ xác định lớp nền mờ sau. Bởi vì lớp nền mờ nằm bên trên lớp nền bằng hình ảnh, do đó mình sẽ phải lồng code lớp nền mờ vào bên trong code nền bằng hình ảnh. Ở đây mình có sẵn 1 cặp thẻ định dạng của code định dạng bài viết cơ bản rồi nên mình sẽ dùng nó để viết code cho lớp nền bằng hình ảnh ở dưới cùng để tiết kiệm thời gian viết code, nếu có nhiều thẻ div quá thì nhìn cũng hoa mắt lắm

Giờ mình sẽ viết code minh hoạ cho các bạn xem nhé

Mình sẽ bắt đầu viết code nền bằng hình ảnh với code định dạng có sẵn ở trên. Lúc này, code của mình sẽ có dạng như sau:

<div style="background: url('https://wptutbyserahwang.files.wordpress.com/2020/04/galaxy.jpg'); padding: 14px; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">CODE NỘI DUNG BÀI VIẾT</div>

Kết quả:

CODE NỘI DUNG BÀI VIẾT

Rồi, bây giờ mình sẽ viết thêm 1 code nền mờ mới, vì mình đã viết các thuộc tính định dạng cơ bản như font, cỡ chữ, màu chữ,… ở code nền bằng hình ảnh rồi nên mình sẽ không viết lại những thuộc tính đó trong code nền mờ nữa. Do đó, sau khi xoá hết các thuộc tính định dạng cơ bản đi thì lúc này code nền mờ của mình sẽ trở nên ngắn gọn như thế này:

<div style="background: rgba(255,255,255,0.6); padding: 14px;">CODE NỘI DUNG BÀI VIẾT</div>

Bây giờ mình sẽ lồng code nền mờ vào trong code hình nền. Nếu là code khung viền 1 lớp cơ bản (chỉ có 1 cặp thẻ định dạng), các bạn sẽ dán đè code bài viết lên dòng chữ CODE NỘI DUNG BÀI VIẾT đúng không nào? Nhưng kiểu khung viền này lại có 2 lớp, thế nên chúng ta sẽ dán đè code nền mờ lên dòng chữ CODE NỘI DUNG BÀI VIẾT ở code hình nền. Đó chính là cách lồng code nền mờ vào trong code hình nền Tức là lúc này, code của mình sẽ có dạng như sau (mình sẽ tô màu nền để các bạn dễ phân biệt code nền ảnh và code nền mờ nhé):

<div style="background: url('https://wptutbyserahwang.files.wordpress.com/2020/04/galaxy.jpg'); padding: 14px; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">

<div style="background: rgba(255,255,255,0.6); padding: 14px;">CODE NỘI DUNG BÀI VIẾT</div>

</div>

Kết quả:

CODE NỘI DUNG BÀI VIẾT

Rồi, bây giờ mình sẽ viết mẫu code khung viền kiểu này cho các bạn nhé Mình tạm gọi nó là code khung viền 2 lớp cơ bản. Tất cả các tuỳ chọn bổ sung như thêm đường viền, bo tròn 4 góc, tạo thanh cuộn dọc đều sẽ được thực hiện tuỳ chỉnh trên code khung viền 2 lớp cơ bản này.

<div id="NEN-ANH" style="background: url('link ảnh nền'); padding: 2%; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">

<div id="NEN-MO" style="background: rgba(255,255,255,0.888); padding: 3%;">CODE NỘI DUNG BÀI VIẾT</div>

</div>

Với code mẫu ở trên, mình đã gán id cho các cặp thẻ định dạng để các bạn dễ tìm kiếm khi muốn tuỳ chỉnh. Nghĩa là khi các bạn muốn tuỳ chỉnh gì đó với lớp nền bằng hình ảnh, các bạn sẽ thêm bớt thuộc tính vào thẻ div có id là NEN-ANH. Nếu các bạn muốn tuỳ chỉnh với lớp nền mờ, các bạn sẽ thêm bớt thuộc tính vào thẻ div có id là NEN-MO. Cách viết code đường viền và viết các tuỳ chọn bổ sung như bo tròn 4 góc, tạo thanh cuộn dọc mình đã viết ở Trang 1 của bài này rồi, nếu các bạn quên hoặc chưa đọc thì hãy bấm vào ĐÂY để đọc nhé

Ở bài hướng dẫn viết code khung viền cũ, mình dùng cả thuộc tính margin lẫn padding cho lớp nền gần với nội dung bài viết nhất. Nhưng trong bài hướng dẫn mới này, mình chỉ dùng thuộc tính padding mà thôi, còn khi nào dùng margin thì các bạn có thể quay lại phần hướng dẫn viết kiểu khung viền số 1 hoặc bấm vào ĐÂY để đọc lại. Do mình dùng padding nên thuộc tính này sẽ xuất hiện ở cả lớp nền gần với nội dung văn bản nhất lẫn các lớp nền bị nó đè lên. Trong code mẫu, mình mặc định padding cho lớp nền ảnh dưới cùng (tức là thuộc tính padding nằm trong thẻ div có id là NEN-ANH) là 2% có nghĩa là khoảng cách tính từ mép lớp nền ảnh (lớp nền này có thể có đường viền hoặc không có đường viền bao quanh) vào đến mép lớp nền mờ (lớp nền mờ này có thể có đường viền hoặc không có đường viền bao quanh) là 2%. Còn nếu các bạn muốn tăng giảm khoảng cách tính từ mép lớp nền mờ vào đến bên trong nội dung bài viết thì các bạn sẽ điều chỉnh lại giá trị của thuộc tính padding nằm trong thẻ div có id là NEN-MO, ở đây mình mặc định padding là 3%. Do mình ít khi thay đổi theme nên mình thường dùng đơn vị % để tính giá trị của thuộc tính padding để code khung viền có thể hiển thị đẹp trên cả thiết bị di động lẫn laptop hoặc máy tính để bàn. Thế nên các bạn không nhất thiết phải dùng đơn vị % như trong code mẫu mà có thể dùng đơn vị px. Nếu các bạn hay thay đổi theme thì các bạn nên tính theo đơn vị px (tốt nhất là nên để giá trị padding từ 15px trở xuống) thì khoảng cách giữa các lớp nền sẽ ít bị xê dịch hơn khi đổi theme mới.

Rồi, bây giờ mình sẽ viết vài ví dụ tuỳ chỉnh với code khung viền 2 lớp cơ bản cho các bạn xem nhé

Ví dụ 1: Từ code mẫu ở trên, mình sẽ thay hình nền cho code. Để thay hình nền, mình sẽ tìm đến thẻ div có id là NEN-ANH và thay link hình ảnh vào dòng chữ link ảnh nền trong code. Mình có link ảnh nền như sau:

https://wptutbyserahwang.files.wordpress.com/2019/09/58.jpg

Bây giờ mình sẽ thay link ảnh nền ở trên vào code mẫu nhé:

<div id="NEN-ANH" style="background: url('https://wptutbyserahwang.files.wordpress.com/2019/09/58.jpg'); padding: 2%; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">

<div id="NEN-MO" style="background: rgba(255,255,255,0.888); padding: 3%;">CODE NỘI DUNG BÀI VIẾT</div>

</div>

Kết quả:

CODE NỘI DUNG BÀI VIẾT

Để các ví dụ sau dễ quan sát hơn, mình sẽ thay dòng chữ CODE NỘI DUNG BÀI VIẾT bằng một đoạn code nội dung văn bản khác (đoạn code này sẽ được tô màu xanh nhạt để phân biệt với code khung viền). Lúc này, code của mình sẽ có dạng như sau:

<div id="NEN-ANH" style="background: url('https://wptutbyserahwang.files.wordpress.com/2019/09/58.jpg'); padding: 2%; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">

<div id="NEN-MO" style="background: rgba(255,255,255,0.888); padding: 3%;">

<p style="text-align: justify;">Quan Lan: "Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi."</p>

<p style="text-align: justify;">Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: "Em cũng chưa nói em yêu anh bao giờ mà?"</p>

<p style="text-align: justify;">Sau đó cậu tốn mất một giờ để xin lỗi.</p>

<p style="text-align: justify;">Trang Lân: "Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!"</p>

<p style="text-align: justify;">Quan Lan: "Im ngay, đang ở sân bay đừng làm mất mặt!"</p>

<div style="font-size: 14px; text-align: center; padding-left: 28%;"><span style="color: #808080;"><em>– Trích từ truyện "Quý ngài định kiến" của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.</em></span></div>

</div>

</div>

Kết quả:

Quan Lan: “Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi.”

Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: “Em cũng chưa nói em yêu anh bao giờ mà?”

Sau đó cậu tốn mất một giờ để xin lỗi.

Trang Lân: “Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!”

Quan Lan: “Im ngay, đang ở sân bay đừng làm mất mặt!”

– Trích từ truyện “Quý ngài định kiến” của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.

Ví dụ 2: Tiếp tục với đoạn code hoàn chỉnh (đã có nền ảnh và code nội dung) ở ví dụ 1, mình muốn bo tròn 4 góc của lớp nền bằng hình ảnh dưới cùng, vậy thì mình sẽ thêm thuộc tính border-radius vào thẻ div có id là NEN-ANH. Lúc này, code của mình sẽ có dạng như sau:

<div id="NEN-ANH" style="border-radius: 10px; background: url('https://wptutbyserahwang.files.wordpress.com/2019/09/58.jpg'); padding: 2%; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">

<div id="NEN-MO" style="background: rgba(255,255,255,0.888); padding: 3%;">

<p style="text-align: justify;">Quan Lan: "Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi."</p>

<p style="text-align: justify;">Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: "Em cũng chưa nói em yêu anh bao giờ mà?"</p>

<p style="text-align: justify;">Sau đó cậu tốn mất một giờ để xin lỗi.</p>

<p style="text-align: justify;">Trang Lân: "Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!"</p>

<p style="text-align: justify;">Quan Lan: "Im ngay, đang ở sân bay đừng làm mất mặt!"</p>

<div style="font-size: 14px; text-align: center; padding-left: 28%;"><span style="color: #808080;"><em>– Trích từ truyện "Quý ngài định kiến" của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.</em></span></div>

</div>

</div>

Kết quả:

Quan Lan: “Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi.”

Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: “Em cũng chưa nói em yêu anh bao giờ mà?”

Sau đó cậu tốn mất một giờ để xin lỗi.

Trang Lân: “Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!”

Quan Lan: “Im ngay, đang ở sân bay đừng làm mất mặt!”

– Trích từ truyện “Quý ngài định kiến” của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.

Ví dụ 3: Tiếp tục với đoạn code hoàn chỉnh (đã có nền ảnh và code nội dung) ở ví dụ 1, mình chỉ muốn bo tròn lớp nền mờ màu trắng, vậy thì mình sẽ thêm thuộc tính border-radius vào thẻ div có id là NEN-MO. Lúc này, code của mình sẽ có dạng như sau:

<div id="NEN-ANH" style="background: url('https://wptutbyserahwang.files.wordpress.com/2019/09/58.jpg'); padding: 2%; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">

<div id="NEN-MO" style="border-radius: 15px; background: rgba(255,255,255,0.888); padding: 3%;">

<p style="text-align: justify;">Quan Lan: "Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi."</p>

<p style="text-align: justify;">Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: "Em cũng chưa nói em yêu anh bao giờ mà?"</p>

<p style="text-align: justify;">Sau đó cậu tốn mất một giờ để xin lỗi.</p>

<p style="text-align: justify;">Trang Lân: "Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!"</p>

<p style="text-align: justify;">Quan Lan: "Im ngay, đang ở sân bay đừng làm mất mặt!"</p>

<div style="font-size: 14px; text-align: center; padding-left: 28%;"><span style="color: #808080;"><em>– Trích từ truyện "Quý ngài định kiến" của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.</em></span></div>

</div>

</div>

Kết quả:

Quan Lan: “Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi.”

Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: “Em cũng chưa nói em yêu anh bao giờ mà?”

Sau đó cậu tốn mất một giờ để xin lỗi.

Trang Lân: “Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!”

Quan Lan: “Im ngay, đang ở sân bay đừng làm mất mặt!”

– Trích từ truyện “Quý ngài định kiến” của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.

Ví dụ 4: Tiếp tục với đoạn code hoàn chỉnh (đã có nền ảnh và code nội dung) ở ví dụ 1, mình muốn tạo đường viền dạng dấu chấm (dotted) có màu đỏ thẫm pha hồng (mã HEX là #d1003f) bao quanh lớp nền mờ, vậy thì mình sẽ thêm thuộc tính border vào thẻ div có id là NEN-MO. Lúc này, code của mình sẽ có dạng như sau:

<div id="NEN-ANH" style="background: url('https://wptutbyserahwang.files.wordpress.com/2019/09/58.jpg'); padding: 2%; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">

<div id="NEN-MO" style="border: dotted #d1003f 2px; background: rgba(255,255,255,0.888); padding: 3%;">

<p style="text-align: justify;">Quan Lan: "Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi."</p>

<p style="text-align: justify;">Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: "Em cũng chưa nói em yêu anh bao giờ mà?"</p>

<p style="text-align: justify;">Sau đó cậu tốn mất một giờ để xin lỗi.</p>

<p style="text-align: justify;">Trang Lân: "Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!"</p>

<p style="text-align: justify;">Quan Lan: "Im ngay, đang ở sân bay đừng làm mất mặt!"</p>

<div style="font-size: 14px; text-align: center; padding-left: 28%;"><span style="color: #808080;"><em>– Trích từ truyện "Quý ngài định kiến" của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.</em></span></div>

</div>

</div>

Kết quả:

Quan Lan: “Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi.”

Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: “Em cũng chưa nói em yêu anh bao giờ mà?”

Sau đó cậu tốn mất một giờ để xin lỗi.

Trang Lân: “Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!”

Quan Lan: “Im ngay, đang ở sân bay đừng làm mất mặt!”

– Trích từ truyện “Quý ngài định kiến” của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.

Ví dụ 5: Tiếp tục với đoạn code hoàn chỉnh (đã có nền ảnh và code nội dung) ở ví dụ 1, mình muốn bo tròn 4 góc và tạo đường viền bao quanh lớp nền mờ thì mình sẽ thêm đồng thời 2 thuộc tính border và border-radius vào thẻ div có id là NEN-MO. Lúc này, code của mình sẽ có dạng như sau:

<div id="NEN-ANH" style="background: url('https://wptutbyserahwang.files.wordpress.com/2019/09/58.jpg'); padding: 2%; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">

<div id="NEN-MO" style="border: dotted #d1003f 2px; border-radius: 15px; background: rgba(255,255,255,0.888); padding: 3%;">

<p style="text-align: justify;">Quan Lan: "Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi."</p>

<p style="text-align: justify;">Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: "Em cũng chưa nói em yêu anh bao giờ mà?"</p>

<p style="text-align: justify;">Sau đó cậu tốn mất một giờ để xin lỗi.</p>

<p style="text-align: justify;">Trang Lân: "Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!"</p>

<p style="text-align: justify;">Quan Lan: "Im ngay, đang ở sân bay đừng làm mất mặt!"</p>

<div style="font-size: 14px; text-align: center; padding-left: 28%;"><span style="color: #808080;"><em>– Trích từ truyện "Quý ngài định kiến" của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.</em></span></div>

</div>

</div>

Kết quả:

Quan Lan: “Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi.”

Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: “Em cũng chưa nói em yêu anh bao giờ mà?”

Sau đó cậu tốn mất một giờ để xin lỗi.

Trang Lân: “Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!”

Quan Lan: “Im ngay, đang ở sân bay đừng làm mất mặt!”

– Trích từ truyện “Quý ngài định kiến” của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.

Ví dụ 6: Tiếp tục với đoạn code hoàn chỉnh (đã có nền ảnh và code nội dung) ở ví dụ 1, mình muốn tạo đường viền bao quanh cả lớp nền ảnh lẫn lớp nền mờ thì mình sẽ thêm thuộc tính border vào cả thẻ div có id là NEN-ANH lẫn thẻ div có id là NEN-MO. Lúc này, code của mình sẽ có dạng như sau:

<div id="NEN-ANH" style="border: solid #d1003f 3px; background: url('https://wptutbyserahwang.files.wordpress.com/2019/09/58.jpg'); padding: 2%; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">

<div id="NEN-MO" style="border: dotted #d1003f 2px; background: rgba(255,255,255,0.888); padding: 3%;">

<p style="text-align: justify;">Quan Lan: "Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi."</p>

<p style="text-align: justify;">Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: "Em cũng chưa nói em yêu anh bao giờ mà?"</p>

<p style="text-align: justify;">Sau đó cậu tốn mất một giờ để xin lỗi.</p>

<p style="text-align: justify;">Trang Lân: "Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!"</p>

<p style="text-align: justify;">Quan Lan: "Im ngay, đang ở sân bay đừng làm mất mặt!"</p>

<div style="font-size: 14px; text-align: center; padding-left: 28%;"><span style="color: #808080;"><em>– Trích từ truyện "Quý ngài định kiến" của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.</em></span></div>

</div>

</div>

Kết quả:

Quan Lan: “Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi.”

Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: “Em cũng chưa nói em yêu anh bao giờ mà?”

Sau đó cậu tốn mất một giờ để xin lỗi.

Trang Lân: “Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!”

Quan Lan: “Im ngay, đang ở sân bay đừng làm mất mặt!”

– Trích từ truyện “Quý ngài định kiến” của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.

Qua 6 ví dụ ở trên thì các bạn biết cách tuỳ chỉnh chưa nào? Đến đây coi như là xong cách viết code khung viền 2 lớp rồi. Nhưng vẫn còn một vấn đề nho nhỏ nữa, có bạn hỏi là mình muốn trong code khung viền có nhiều lớp nền mờ và giữa các lớp nền này có khoảng cách với nhau thì làm thế nào? Câu trả lời rất đơn giản! Code khung viền 2 lớp có 1 code của lớp nền ảnh và 1 code của lớp nền mờ phải không nào? Nếu các bạn muốn có thêm nhiều lớp nền mờ thì chỉ cần tăng số code của lớp nền mờ lên mà thôi. Nào, bây giờ chúng ta lại xem ví dụ với code khung viền 2 lớp cơ bản (đã chèn nền ảnh) nhé:

<div id="NEN-ANH" style="background: url('https://wptutbyserahwang.files.wordpress.com/2019/09/58.jpg'); padding: 2%; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">

<div id="NEN-MO" style="background: rgba(255,255,255,0.888); padding: 3%;">CODE NỘI DUNG BÀI VIẾT</div>

</div>

Kết quả:

CODE NỘI DUNG BÀI VIẾT

Nhìn vào code ở trên, code lớp nền mờ chính là cặp thẻ div có chứa id tên là NEN-MO. Mình sẽ viết tách ra đây cho các bạn dễ nhìn nhé:

<div id="NEN-MO" style="background: rgba(255,255,255,0.888); padding: 3%;">CODE NỘI DUNG BÀI VIẾT</div>

Trên đây là code cho 1 lớp nền mờ, mình tạm gọi là code nền mờ đầu tiên. Mình muốn có thêm 1 lớp nền mờ nữa nên mình sẽ sao chép code nền mờ ở trên và dán nó vào ngay sau thẻ div đóng (</div>) của code nền mờ đầu tiên. Nếu các bạn muốn có lớp nền mờ thứ 3, thứ 4,… thì các bạn cũng làm tương tự, dán code nền mờ mới vào ngay sau thẻ div đóng của code nền mờ ở trên nó. Lúc này, code khung viền của mình sẽ có dạng như sau (mình sẽ tô màu nền cho code nền mờ để các bạn dễ nhìn nhé):

<div id="NEN-ANH" style="background: url('https://wptutbyserahwang.files.wordpress.com/2019/09/58.jpg'); padding: 2%; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">

<div id="NEN-MO" style="background: rgba(255,255,255,0.888); padding: 3%;">CODE NỘI DUNG BÀI VIẾT</div>

<div id="NEN-MO" style="background: rgba(255,255,255,0.888); padding: 3%;">CODE NỘI DUNG BÀI VIẾT</div>

</div>

Kết quả:

CODE NỘI DUNG BÀI VIẾT

CODE NỘI DUNG BÀI VIẾT

Nhìn vẫn cứ như là 1 lớp nền mờ ấy nhỉ? Đó là vì chúng ta chưa thiết lập khoảng cách giữa các lớp nền mờ với nhau, theo mặc định thì khoảng cách này bằng 0 nên lớp nền mờ đầu tiên và lớp nền mờ thứ 2 bị dính vào nhau. Do đó, mình sẽ dùng thêm thuộc tính margin để thiết lập khoảng cách giữa các lớp nền mờ với nhau. Khái niệm và cách viết thuộc tính margin mình đã nhắc đến ở Trang 2 rồi nên sẽ không viết lại ở đây nữa, các bạn có thể bấm vào ĐÂY để đọc lại. Ở đây mình sẽ dùng thuộc tính con của thuộc tính margin là margin-top và margin-bottom để thiết lập khoảng cách trên và dưới giữa các lớp nền mờ. Với code mình vừa viết ở trên, do chỉ có 2 lớp nền nên mình chỉ cần sử dụng một trong hai thuộc tính là margin-top hoặc margin-bottom mà thôi. Ví dụ, nếu mình muốn thiết lập khoảng cách bằng cách sử dụng lớp nền mờ đầu tiên, thì mình sẽ thêm thuộc tính margin-bottom (khoảng cách tính từ mép nền bên dưới ra bên ngoài) vào code của lớp nền mờ này. Mình không dùng margin-top (khoảng cách tính từ mép nền bên trên ra bên ngoài) vì khoảng cách này đã được thiết lập bởi thuộc tính padding của code nền ảnh rồi. Lúc này, code của mình sẽ có dạng như sau:

<div id="NEN-ANH" style="background: url('https://wptutbyserahwang.files.wordpress.com/2019/09/58.jpg'); padding: 2%; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">

<div id="NEN-MO" style="margin-bottom: 20px; background: rgba(255,255,255,0.888); padding: 3%;">CODE NỘI DUNG BÀI VIẾT</div>

<div id="NEN-MO" style="background: rgba(255,255,255,0.888); padding: 3%;">CODE NỘI DUNG BÀI VIẾT</div>

</div>

Kết quả:

CODE NỘI DUNG BÀI VIẾT

CODE NỘI DUNG BÀI VIẾT

Tương tự, nếu như mình muốn thiết lập khoảng cách bằng cách sử dụng lớp nền mờ thứ 2 (cũng là lớp nền mờ cuối cùng) thì mình sẽ dùng thuộc tính margin-top chứ không dùng margin-bottom. Lúc này, code của mình sẽ có dạng như sau:

<div id="NEN-ANH" style="background: url('https://wptutbyserahwang.files.wordpress.com/2019/09/58.jpg'); padding: 2%; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">

<div id="NEN-MO" style="background: rgba(255,255,255,0.888); padding: 3%;">CODE NỘI DUNG BÀI VIẾT</div>

<div id="NEN-MO" style="margin-top: 40px; background: rgba(255,255,255,0.888); padding: 3%;">CODE NỘI DUNG BÀI VIẾT</div>

</div>

Kết quả:

CODE NỘI DUNG BÀI VIẾT

CODE NỘI DUNG BÀI VIẾT

Từ ví dụ trên, chúng ta rút ra một điều là nếu trong code có từ 3 lớp nền mờ trở lên thì sẽ không cần dùng thuộc tính margin cho lớp nền mờ đầu tiên và lớp nền mờ cuối cùng. Lý do là chúng ta đã thiết lập margin-top và margin-bottom cho các lớp nền mờ ở giữa rồi, thế nên không cần thiết phải thiết lập margin cho lớp nền mờ đầu tiên và cuối cùng nữa. Chúng ta sẽ viết thuộc tính margin cho các lớp nền mờ ở giữa này theo 2 giá trị (mình đã giải thích cách viết ở trang 2 rồi), các bạn có thể xem ví dụ với 4 lớp nền mờ sau đây:

<div id="NEN-ANH" style="background: url('https://wptutbyserahwang.files.wordpress.com/2019/09/58.jpg'); padding: 2%; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">

<div id="NEN-MO" style="background: rgba(255,255,255,0.888); padding: 3%;">CODE NỘI DUNG BÀI VIẾT</div>

<div id="NEN-MO" style="margin: 15px 0; background: rgba(255,255,255,0.888); padding: 3%;">CODE NỘI DUNG BÀI VIẾT</div>

<div id="NEN-MO" style="margin: 15px 0; background: rgba(255,255,255,0.888); padding: 3%;">CODE NỘI DUNG BÀI VIẾT</div>

<div id="NEN-MO" style="background: rgba(255,255,255,0.888); padding: 3%;">CODE NỘI DUNG BÀI VIẾT</div>

</div>

Kết quả:

CODE NỘI DUNG BÀI VIẾT

CODE NỘI DUNG BÀI VIẾT

CODE NỘI DUNG BÀI VIẾT

CODE NỘI DUNG BÀI VIẾT

Xong rồi Hướng dẫn viết kiểu khung viền số 3 kết thúc tại đây Các bạn có thể bấm sang Trang 6 của bài này để xem một số hình ảnh dạng pattern và ảnh động mà mình đã sưu tầm để dùng làm hình nền cho code khung viền nhé

VUI LÒNG KHÔNG SAO CHÉP BÀI VIẾT NÀY! CẢM ƠN CÁC BẠN!

Nguồn bài viết: https://wptutbyserahwang.wordpress.com/

---

Trang:123456

---

Pages: 1 2 3 4 5 6