Dùng CSS sửa HTML, dùng JS sửa CSS, kí sinh Google Form, dùng CSS tạo vẻ tinh tế

(hình minh họa này nói về CSS làm hiệu ứng 3D ở phần cuối)

Dùng CSS để "sửa" nội dung HTML

Ngoài nguyên nhân là muốn chơi nổi thì lí do phải dùng code CSS để tác động vào HTML là khi bạn không được truy cập vào file HTML hoặc file HTML rất nhùng nhằng, khó sửa hoặc dễ gây hậu quả khác. Ví dụ như khi bạn dùng plugin đẻ ra giao diện nhưng nó chỉ khuyến khích và cho phép bạn dùng custom csschẳng hạn.

Có thể bạn chưa gặp ca này bao giờ nhưng hãy ghi chú lại nhé, sau này chắc chắn sẽ có ích, vì nó sẽ rất hữu hiệu và đỡ phải đi mò mẫm mất công.

Trước tiên, tìm hiểu ::after là gì

Bản chất của ::after là tạo ra một đứa con út của chủ thể.
p::after có nghĩa là đứa con cuối cùng của <p>
Chứ không phải là thành phần đứng sau<p> đâu nhé

Ví dụ, trong file HTML:

<p> Tôi là </p>

trong file CSS:

p::after{
  content: 'Mòe'
}

thì trên màn hình sản phẩm ta sẽ có dòng chữ

Tôi là Mòe

Lệnh content áp chữ Mòe vào thành phần có tên p::after, thành phần p::after này nằm bên trong <p> và là đứa con cuối cùng của <p>. Nó đứng cuối cùng. Chứ nó không nằm sau hay ở phía ngoài <p>

Ngoài ra có thể áp hình ảnh vào như sau

content: url(paste địa chỉ ảnh vào đây không cần ngoặc kép)

Chêm thì xài ::after, còn xóa thì sao

Có 2 cách:

display: none
hoặc
color: transparent

Lưu ý

Dùng CSS để "sửa" HTML chỉ có thể đánh lừa được mắt người nhưng không qua mặt được máy đọc và các công cụ crawl... Đối với máy thì nội dung web của bạn vẫn sẽ như trong file HTML cũ thôi, SEO siếc vẫn sẽ sử dụng file HTML thôi nhé. Vậy nên chỉ sử dụng biện pháp này khi nội dung cần sửa không mấy quan trọng và mang tính làm màu là chính.

Dùng Javascript để sửa CSS

Trừ body là có thể tác động luôn bằng việc gõ 1 dòng vào file javascript

document.body.style.thứcầnchỉnh = "giá trị";

ví dụ như sau

document.body.style.backgroundColor = "red";

Còn lại các thành phần khác trong trang chỉ bị thay đổi khi có gì đó kích hoạt, ví dụ như onClick, bên trong function là:

document.getElementById("tênid").style.thứcầnchỉnh = "giátrị";

VD:

<p id="p"> Là lá la la </p>
<button onClick="doimauchu()"> NHẤN ĐÂY </button>

function doimauchu(){
  document.getElementById("p").style.color = "pink";
  document.getElementById("p").style.fontFamily = "Times New Roman";
  document.getElementById("p").style.fontSize = "50px";
}

Test nghịch thử:

Lưu ý là mấy cái trong CSS viết kiểu gạch ngang thì trong JS chuyển qua kiểu camelCase, nội dung chữ thì giữ nguyên

font-size thành fontSize
font-family thành fontFamily
v...v...

Lưu ý

Khi F5 lại trang thì mọi định dạng lại trở về như cũ như trong file CSS thôi  Vậy nên trò này chủ yếu dùng để tạo hiệu ứng khi tương tác chứ không dùng để design hay format.

Thông form mình vào backend của Google Form

Khi bạn chưa có server để lưu trữ form của khách gửi, nhưng vẫn muốn chức năng này cho web tĩnh của mình, thì có thể dùng biện pháp ký sinh trên Google Form. Khách gửi bằng form trên web của mình, nhưng thông tin lại bay đến form trên google form (cũng của mình -____-)

Bước 1/3: Tạo form html

<form>
  <input type="text" placeholder="nickname" required>
  <input type="text" placeholder="link fb">
  <input type="text" placeholder="điều muốn gửi gắm" required>
</form>

Bước 2/3: Tạo form trên google

Đi tới https://docs.google.com/forms

Đặt cái tên cho dễ nhớ sau này có nhiều form còn phân biệt

Nhập tên trường vào rồi nhấn dấu cộng để thêm các trường tiếp theo

Nhập xong nhấn hình con mắt để mở chế độ xem với tư cách khách rồi copy cái url lúc đó

Bước 3/3: Thông giữa 2 form

lấy cái url ở trên paste vào attribute action của thẻ <form> trong file html ban nãy. Lưu ý chỗ viewformthì xóa đi và thay thế bằng formResponse?embedded=true. Cái chuỗi này cho phép mình submit google form từ một cửa sổ khác. Nếu ai quên ko copy cái này thì cứ mỗi lần muốn Gởi form sẽ bị redirect đến trang google form rồi nhấn nút Gởi ở đó thay vì nút Gởi của mình.

<form action="https://docs.google.com/forms/d/e/1FAIpQLSfza57-CPqpBBuLb9nYKjGLpiZP2-Wigh2KNGedfJepLtU8kw/formResponse?embedded=true">

Nhấn F12 để inspect rồi dò dẫm đến từng input field để cóp cái name=entry rồi paste vào các thẻ <input> tương ứng

Các bước tiếp theo nếu ai muốn nhanh và không cần hiểu thì trực tiếp fork cái pen này, chỉ việc sửa action và name entry là thành của bạn:

Ai muốn hiểu thì đọc tiếp.

Như bình thường thì khi gửi xong form nó sẽ thông báo thành công như này

Vậy thì chả lộ hết.

Để giấu đi mọi dấu vết của google form, ta paste cái này vào trong thẻ form

target="frametanghinh"

Paste cái này vào dưới thẻ form

<iframe name="frametanghinh" style="display: none;"></iframe>

Chúng ta đang lợi dụng chức năng target có sẵn. Các lựa chọn phổ biến là như sau:

• target="_blank" thì cái thông báo thành công đó sẽ bật ra ỏ cửa sổ mới
• target="_self" (mặc định) thì sẽ hiện ỏ chính cửa sổ hiện tại (vậy còn dở hơi hơn cái blank ở trên vì nó đóng mất nội dung trang web html của chúng ta)
• target="tên một cái iframe nào đó ta tự tạo": nhét cái thông báo vào một iframe tự chế, đặt ỏ đâu tùy ý không quan trọng vì chúng ta ẩn cmn đi rồi. Hahaha. Bằng display:none ấy

Tuy nhiên không có thông báo thành công thì cũng dở vì người dùng không biết form được gửi đi hay chưa. Vậy ta sẽ tạo một thông báo fake... Hiện ra sau khi người dùng nhấn button Gởi. Thêm dòng sau vào dưới cái frametanghinh lúc nãy:

<p id="thanhcong" style="display:none"> Tâm hự của bạn đã được gửi đi! Refresh trang để gởi tâm hự khác. </p>

Ban đầu dòng thông báo đó bị display:none nhưng khi form được submit thì 1 function được kích hoạt để dòng thông báo được display:block. Thêm cái này vào file javascript:

function khiguidi(){
document.getElementById("thanhcong").style.display = "block";  
}

Thêm cái sau vào trong thẻ <form>:

onsubmit="khiguidi()"

Lưu ý là Chúng ta dùng onsubmit cho form chứ không dùng onclick cho cái nút Gửi. Bởi vì ngay cả khi khách không nhập gì họ vẫn có thể click nút gửi ầm ầm và ta không muốn thông báo thành công hiện ra chỉ vì như vậy. Nhưng onsubmit thì khác, một form chỉ được submit đi khi các input required (bắt buộc) phải được điền vào.

Dùng CSS để tạo vẻ tinh tế cho web

Tạo chiều sâu kiểu bóng đổ

Ngoài màu sắc ra thì chiều sâu cũng rất quan trọng trong trang web. Gần như mọi thứ đều có thể áp dụng box-shadow để trở nên đẹp hơn tức khắc mà không cần suy nghĩ nhiều.

Mình thấy là các website và app hiện nay sử dụng trò này khá nhiều, như ngày xưa thì để mọi thứ nổi bật và đỡ nhàm chán hơn người ta thường viền cho nó một cái border

Nhưng trông nó hơi cùi, hơn nữa quá nhiều border trong trang sẽ rất nặng nề, khô cứng. Vì vậy để nổi bật chúng ta thay vì border hãy xài box-shadow

box-shadow: a b c d e
Trong đó:

• a là mã màu
• b là độ lệch sang phải
• c là độ lệch xuống dưới
• d là độ lan tỏa của khoảng màu
• e là biên độ

Cái khoản mã màu thì dễ, mình khuyến nghị là không phải nghĩ nhiều, cứ phang cái màu này:

rgba(0,0,0,0.3) chỗ 0.3 tăng dần khi nền đậm dần

Đây là màu xám nhạt nhưng có độ trong (transparent) để màu nền lộ ra một chút. Tại sao lại phải lộ màu nền?

Ở hình trên là nền trắng thì việc sử dụng màu không trong suốt và màu có độ trong suốt gần như không có khác biệt. Cả hai đều ổn. Nhưng khi màu nền đổi màu:

Thì màu xám "không trong" trông rất lạc quẻ.

• độ lệch sang phải và độ lệch xuống dưới thì tính bằng px. Cái này các bạn cứ chỉnh tòe loe khi nào thấy hợp với khung cảnh thì dừng lại. Chú ý mọi thứ trong trang phải "đổ bóng" về một hướng nhất định thôi 
• độ lan tỏa và biên độ thì mình thấy khá khó hiểu nhưng nó cũng tính bằng px và mình cũng thường chỉnh tới lui cho đến khi hợp nhãn.

Cái hình "after" trên mình sử dụng:

box-shadow: rgba(0,0,0,0.3) 0px 5px 30px 0px;

Tạo chiều sâu lõm vào

Cú pháp giống cái trên nhưng thêm chữ inset

box-shadow: inset rgba(0,0,0,0.4) 2px 2px 20px 0px;

Tạo độ "3D" cho mặt phẳng bằng gradient

Dùng hai màu gần giống nhau để cho gradient (chuyển màu dần dần) sẽ tạo hiệu ứng như là đang phản chiếu ánh sáng, khiến vật thể có vẻ "3D"

Cú pháp rất đơn giản

background: linear-gradient(to bottom right, màu 1, màu 2)

chỗ to bottom right không bắt buộc, có thể thay bằng các giá trị khác như: to right (màu kéo từ trái qua phải), to left, không ghi gì (mặc định màu kéo từ trên xuống dưới), chỗ linear-gradient có thể thay bằng radial-gradient (màu tỏa theo hình tròn) và chỗ màu 1 màu 2 thực ra là thêm bao nhiêu màu cũng được (cầu vồng 7 sắc @@) nhưng mình thấy cũng nhảm nhảm, không xài nhiều lắm nên khỏi cần quan tâm. Bởi vì phải chiếu lệch lệch nó mới tự nhiên và đẹp nhất.

Chú ý: Nếu bạn chưa biết kết hợp màu sắc, thì chọn giải pháp an toàn là chọn hai màu gần giống nhaunhưng có độ đậm nhạt khác nhau, đảm bảo auto đẹp. Ví dụ xanh đậm với xanh nhạt, hồng đậm với hồng nhạt, vàng với cam, xanh lá với xanh nước biển... Không nên kết hợp quá random, nhất là với những màu có sắc độ mạnh

Viết chữ lên background màu mè

Khi bạn muốn có cái background màu mè, thì chữ viết trên đó trở nên hơi khó đọc và gây cảm giác sến sẩm. Để khắc phục điều này, ta cho chữ một background thứ hai màu trắng hoặc màu hơi trong trong. Cái này tùy thị hiếu, nhưng mình thấy là xu hướng hiện nay khoái cái màu hơi trong trong kia vì nó cho lọt một phần của background lên cho ảo diệu. Dù màu trắng hẳn là dễ đọc nhất nhưng có thể che lấp mất đồ họa hoặc quá nhiều ô nền trắng làm trang có thể hơi cứng.
Cái background trong trong kia chính là:

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

với chỉ số cuối có thể dao động trong khoảng từ 0 đến 1. Càng lớn thì càng trắng rõ.

Hiệu ứng phát sáng "từ bên trong"

Khi trỏ vào nút ở trên nó sẽ sáng lên.
Trick này khá đơn giản, ban đầu cho nó cái box-shadow màu xám trong rồi khi hover cho box-shadow màu trắng trong. Kèm với là nâng màu background lên xíu.
Cái này chỉ đẹp khi ở nền tối (vì trời sáng rồi thì phát sáng nữa sao nổi )

a{  
  background: rgba(255,255,255,0.4);
  box-shadow: rgba(0,0,0,0.3) 2px 2px 20px 0px;
 }

a:hover{ 
  background:rgba(255,255,255,0.5);
  box-shadow: rgba(255,255,255,0.3) 2px 2px 20px 0px;
}