CSS: Làm việc với Liên kết và Hình ảnh – liên kết hình ảnh trong css

Trọng tâm của thiết kế web là các thẻ neo và thẻ hình ảnh. Làm thế nào để làm việc và thao tác với hình ảnh và liên kết HTML?

Bạn đang xem : liên kết hình ảnh trong css

Trọng tâm của thiết kế web là các thẻ liên kết và thẻ hình ảnh. Làm thế nào để làm việc và thao tác với hình ảnh và liên kết HTML? Câu hỏi này là hợp thời giữa các nhà phát triển front-end.

Thẻ neo rất quan trọng đối với thiết kế web. Chúng mang lại ý nghĩa cho từ World Wide Web . Chúng là các liên kết kết nối các trang web theo cấu trúc giống như mạng nhện, cho phép người dùng di chuyển liên tục giữa các trang của các trang web khác nhau và trong các trang của cùng một trang web.
Hình ảnh trang web làm tăng thêm vẻ đẹp và tính thẩm mỹ cho mọi trang web dụng cụ. Các nhà thiết kế sử dụng chúng trong tiêu đề, danh sách, ảnh hồ sơ, mô tả và phòng trưng bày. Một bức ảnh nói lên hàng nghìn từ và điều này cũng hợp lệ trong Thương mại điện tử . Khi thương mại trực tuyến bùng nổ, hình ảnh đã trở thành thành phần quan trọng trong việc quảng bá sản phẩm và khi thu hút nhiều khách truy cập hơn.

Thẻ neo (& lt; a & gt;)

Thẻ ký tự liên kết được viết là & lt; a & gt; trong HTML. Các liên kết HTML còn được gọi là siêu liên kết. & Lt; a & gt; đáng chú ý là khác với văn bản bình thường. Theo mặc định, nó được gạch chân, có màu xanh lam và khi di chuột qua nó, con trỏ sẽ chuyển thành bàn tay nhỏ. Bạn có thể tạo kiểu cho các thẻ cố định bằng cách sử dụng CSS theo nhiều cách khác nhau.
Một thuộc tính thiết yếu của & lt; a & gt; là href, đặt đích liên kết. & Lt; a & gt; , với thuộc tính href là tiêu chuẩn mặc định để viết siêu liên kết trong HTML.

Cú pháp

Cú pháp cơ bản để viết siêu liên kết trong HTML là,

  & lt; a href = "https://www.codecoda.com/en" & gt; Truy cập Codecoda & lt; / a & gt;  

Theo cú pháp, văn bản trong trích dẫn href là đích của liên kết, trong khi văn bản giữa & lt; a & gt; & lt; / a & gt; là văn bản mà người đọc nhìn thấy. Một độc giả muốn truy cập Codecoda để biết thêm thông tin sẽ thấy ‘Truy cập Codecoda’, nhưng không phải là liên kết thực sự đến Codecoda. Và khi người dùng nhấp vào Truy cập CodeCoda, họ sẽ đến trang chủ của CodeCoda. Bất kỳ liên kết nào khác đều có thể thay thế liên kết https://www.codecoda.com/en theo điểm đến mong muốn.
Bạn có thể đặt & lt; a & gt; trong phần body head của tài liệu. Phần đầu xác định liên kết đến các tài nguyên bên ngoài như phông chữ Google, CSS bên ngoài và Javascript bên ngoài.

Các loại liên kết

Liên kết tuyệt đối

Các liên kết tuyệt đối là các liên kết trỏ đến một đường dẫn cụ thể. Chúng luôn bắt đầu bằng một tên giao thức. Liên kết tuyệt đối chủ yếu được sử dụng để xác định các trang web khác trong internet. Liên kết – https://www.codecoda.com/vi là một liên kết tuyệt đối. Nó đề cập đến một trang web cụ thể trên internet và nó bắt đầu bằng giao thức HTTPS.

Liên kết tương đối

Các liên kết tương đối là các liên kết được tham chiếu trong một thư mục / thư mục đang hoạt động. Đường dẫn tệp thường liên quan đến trang hiện tại. Đường dẫn tệp tương đối thường được chỉ định khi liên kết đến các trang trong một trang web. Nó không cần giao thức hoặc địa chỉ, chỉ cần tên tệp.

  & lt; a href = "aboutus.html" & gt; Giới thiệu về chúng tôi & lt; / a & gt;
& lt;! - Trong trường hợp này, tệp aboutus.html nằm trong cùng thư mục với tài liệu đang làm việc. - & gt;  

Đường dẫn tệp cũng có thể bao gồm các thư mục nằm ngoài thư mục đang hoạt động.

  & lt; a href = "/ Nhân viên / Nhân viên.html" & gt; Nhân viên & lt; / a & gt;  

Các liên kết tương đối vẫn được giữ nguyên – trên máy làm việc và máy chủ web nếu được tải lên. Chúng cũng cần được giám sát chặt chẽ. Nếu đường dẫn tệp thay đổi, URL sẽ trở nên vô hiệu.

Neo trong trang

Bạn đã bao giờ thấy các trang có liên kết hoặc nút ‘chuyển đến đầu trang’ ở dưới cùng chưa? Và khi bạn nhấp vào nó, bạn sẽ đưa bạn đến đầu trang hoặc tài liệu đó? Hoặc một tài liệu web dài được phân đoạn bằng ‘mục lục’ trong đó mỗi mục là một liên kết đến các phần khác nhau trong cùng một trang. Kiểu liên kết này được gọi là neo trong trang vì chúng xảy ra trong cùng một trang web.
Để có kiểu liên kết này trong một trang web, trước tiên bạn phải đặt vị trí mà người dùng sẽ đi. Bạn có thể đạt được điều này thông qua thuộc tính “name”. Tên đã xác định sẽ được tham chiếu bởi thuộc tính href có dấu thăng. Đây là một bản demo.

 & lt; html & gt;
  & lt; body & gt;
    & lt; h1 & gt; Mục lục & lt; / h1 & gt;
    & lt; p & gt; & lt; a href = "# links" & gt; Liên kết HTML & lt; / a & gt; & lt; / p & gt;
    & lt; p & gt; & lt; a href = "# hình ảnh" & gt; Hình ảnh HTML & lt; / a & gt; & lt; / p & gt;

    & lt; h1 & gt; NỘI DUNG CHÍNH & lt; / h1 & gt;
 
    & lt; h2 & gt; & lt; a name = "links" & gt; & lt; / a & gt; HTML LINKS & lt; / h2 & gt;
    & lt; p & gt; Chèn Văn bản Dài vào đây ....... & lt; / p & gt;
 
    & lt; h2 & gt; & lt; a name = "links" & gt; & lt; / a & gt; HTML IMAGES & lt; / h2 & gt;
    & lt; p & gt; Chèn Văn bản Dài vào đây ....... & lt; / p & gt;
  & lt; / body & gt;
& lt; / html & gt;  

Đặc điểm của liên kết

Theo mặc định, tất cả các liên kết đều được gạch chân.

  • Một liên kết không được truy cập có màu xanh lam.
  • Một liên kết đã truy cập có màu tím.
  • Một liên kết đang hoạt động có màu đỏ.
  • Các liên kết không chỉ là văn bản. Chúng có thể là hình ảnh, nút hoặc các phần tử HTML khác.
  • Trong khi viết mã, bạn nên để trống các liên kết giả hoặc thêm dấu thăng giữa các dấu ngoặc kép. Thao tác này cho phép phần tử có thể nhấp được nhưng liên kết không đi đến đâu.
  & lt; a href = "" & gt; Liên kết giả & lt; / a & gt;
& lt; a href = "#" & gt; Liên kết giả 2 & lt; / a & gt;  

Trạng thái liên kết (Lớp giả)

Các liên kết là động và xảy ra ở các trạng thái riêng lẻ. Các lớp giả liên kết cho phép các nhà phát triển tạo kiểu cho các trạng thái khác nhau của một liên kết trong CSS. Các liên kết HTML có năm trạng thái hoạt động chính – liên kết, hoạt động, di chuột, đã truy cập và tiêu điểm. Bạn có thể tạo kiểu cho cả năm thứ này cùng một lúc cho một liên kết.
Trạng thái : link là trạng thái mặc định của liên kết, trong khi : active biểu thị liên kết hiện được chọn. Trạng thái : hover xảy ra khi chuột ở trên liên kết. Trạng thái : đã truy cập là một liên kết đã được nhấp vào. Trạng thái : tiêu điểm xảy ra khi người dùng tập trung vào một liên kết.
Bạn có thể đính kèm các kiểu khác nhau cho các trạng thái này. Đây là mã thay đổi màu văn bản khi mỗi trạng thái xảy ra.

  a: link {
  màu: # 000000;
  văn bản-trang trí: không có;
}
a: đã thăm {
   màu: #bbffcd;
}
a: di chuột {
  màu: # ffcc99;
}
a: hoạt động {
  màu: # f2f2f2;
}
tập trung {
   màu: # b1b1b1;
}
 
  & lt; html & gt;
  & lt; a href = "https://www.codecoda.com/blog/en" & gt; Truy cập blog của chúng tôi & lt; / a & gt;
& lt; / html & gt;  

Các lớp giả của & lt; a & gt; thẻ theo một đơn đặt hàng. : link đứng trước : đã truy cập theo sau là : di chuột : hoạt động . Nếu một lớp giả bị bỏ qua, lớp giả kế tiếp sẽ theo sau ngay lập tức.
Giống như các phần tử HTML khác, & lt; a & gt; thẻ có thể có các lớp và id gắn liền với chúng.

Xem Thêm  Cách in đậm, in nghiêng và định dạng văn bản trong HTML - cách in đậm văn bản html

Các loại liên kết phổ biến

  • Liên kết mặc định – Đây là kiểu liên kết mặc định của liên kết tương đối hoặc liên kết tuyệt đối:
      & lt; a href = "contactus.html" & gt; Liên hệ với chúng tôi & lt; / a & gt;  
  • Liên kết hình ảnh – Loại liên kết này làm cho hình ảnh có thể nhấp được. Thẻ neo bao quanh thẻ hình ảnh.
      & lt; a href = "https://www.codecoda.com/blog/en" & gt;
      & lt; img src = "codaheaderimage.jpg" alt = "hình ảnh tiêu đề" / & gt;
    & lt; / a & gt;  
  • Liên kết Nút – Liên kết này làm cho một nút có thể nhấp được. Nếu thẻ nút nằm bên trong & lt; a & gt; , sau đó toàn bộ nút trở nên có thể nhấp được. Nếu thẻ & lt; a & gt; nằm bên trong thẻ nút, thì chỉ văn bản bên trong thẻ mới có thể nhấp được.
      & lt; button & gt; & lt; a href = "https://www.google.com" & gt; Nhấp vào Tôi & lt; / a & gt; & lt; / button & gt; & lt;! - only văn bản trong nút có thể nhấp được - & gt;  
      & lt; a href = "https://www.google.com" & gt; & lt; button & gt; Nhấp vào Đây & lt; / button & gt; & lt; / a & gt; & lt;! - toàn bộ nút có thể nhấp được - & gt;  
  • Điều hướng – Đây là cách sử dụng liên kết cho điều hướng và menu. Thông thường, bạn có thể đính kèm thẻ neo vào danh sách và tạo kiểu cho nó theo sở thích của mình.
      & lt; nav & gt;
      & lt; ul & gt;
        & lt; li & gt; & lt; a href = "#" & gt; Trang chủ & lt; / a & gt; & lt; / li & gt;
        & lt; li & gt; & lt; a href = "#" & gt; Blog & lt; / a & gt; & lt; / li & gt;
        & lt; li & gt; & lt; a href = "#" & gt; Liên hệ với Chúng tôi & lt; / a & gt; & lt; / li & gt;
        & lt; li & gt; & lt; a href = "#" & gt; Giới thiệu & lt; / a & gt; & lt; / li & gt;
      & lt; / ul & gt;
    & lt; / nav & gt;  
      / * CSS * /
    li {
      display: inline-block;
      đệm: 2px;
    }
    ul {
      list-style-type: none;
      lề: 0;
      đệm: 0;
    }
    một {
      phông chữ: 18px;
      màu: hạt dẻ;
      văn bản-trang trí: không có;
    }
    a: di chuột {
      màu đỏ;
      text-decoration: gạch chân;
    }  

    Đoạn mã trên sẽ tạo một menu điều hướng thanh trên cùng đơn giản, tuyệt vời cho một trang web.

Xem Thêm  Dự án học máy đầu tiên của bạn bằng Python từng bước - python và học máy

HÌNH ẢNH & lt; img & gt;

Chúng tôi không thể nhấn mạnh quá mức tầm quan trọng của hình ảnh trên một trang web. Khi sự phát triển web ngày càng tiến bộ, nhu cầu về hình ảnh tốt, được tối ưu hóa cao, đáp ứng cũng tăng lên.
Thẻ hình ảnh được viết là & lt; img & gt; trong HTML. Nó có hai thuộc tính quan trọng, src và alt. Src chỉ định đường dẫn đến hình ảnh, trong khi alt chỉ định văn bản thay thế cho hình ảnh. Nội dung mô tả ngắn gọn về hình ảnh nếu vì bất kỳ lý do gì, hình ảnh không tải được.
Các thuộc tính khác của hình ảnh bao gồm srcset , width , height longdesc . Các thuộc tính như chiều rộng và chiều cao có thể được viết thẳng hàng bằng & lt; img & gt; hoặc được chỉ định sau trong CSS.

Hình nền

Hình nền đặt hình ảnh làm nền cho một phần tử được chỉ định. Hình nền khá phổ biến trong thiết kế web và các nhà thiết kế web thường sử dụng chúng trong tiêu đề vì chúng giúp dễ dàng viết văn bản trên đó.
Theo mặc định, hình nền lặp lại theo cả chiều dọc và chiều ngang. Bạn có thể giải quyết vấn đề này bằng cách sử dụng thuộc tính không lặp lại .
Trong CSS, thuộc tính nền được đặt bằng giá trị URL. Đường dẫn URL có thể là tương đối hoặc tuyệt đối. Hình nền có thể được điều chỉnh, định vị và sử dụng các thuộc tính nền khác.
Đoạn mã sau sẽ tạo hình nền với lớp phủ văn bản được đặt ở giữa hình ảnh.

  & lt; div class = "header-image" & gt;
  & lt; div class = "header-text" & gt;
    & lt; h1 & gt; TechBuddies & lt; / h1 & gt;
    & lt; h4 & gt; Chúng tôi yêu thích công nghệ & lt; / h4 & gt;
  & lt; / div & gt;
& lt; / div & gt;  
 . header-image {
  background-image: url ("https://www.talkwalker.com/images/2020/blog-headers/image-analysis.png");
  màu nền: #fbfcfb;
  chiều cao: 500px;
  background-position: trung tâm;
  background-repeat: không lặp lại;
  background-size: bìa;
}
.header-text {
  text-align: center;
  vị trí: tuyệt đối;
  top: 50%;
  trái: 50%;
  biến đổi: dịch (-50%, -50%);
  màu trắng;
}  

Hình ảnh đáp ứng

Hình ảnh đáp ứng là hình ảnh tự động điều chỉnh để vừa với kích thước của màn hình hiển thị. Có vẻ hơi đau đầu khi cố gắng tạo các truy vấn phương tiện khác nhau cho các kích thước màn hình khác, nhưng hình ảnh đáp ứng tương đối dễ xác định.

  img {
  chiều rộng: 100%;
}  

Đặt thuộc tính chiều rộng hoặc chiều rộng tối đa thành 100% sẽ tự động làm cho hình ảnh phản hồi nhanh, cho phép hình ảnh lấp đầy bất kỳ kích thước phần tử nào.

Hình ảnh được Căn giữa

Việc cố gắng xử lý căn chỉnh và khả năng phản hồi có thể khá phức tạp. Mặc định căn giữa một mục sử dụng text-align: center, nhưng điều này không phải lúc nào cũng hoạt động, đặc biệt là khi các thuộc tính hiển thị khác chống lại nó.
Để căn giữa một hình ảnh theo chiều ngang, bạn cũng có thể đặt lề cho giá trị tự động.

  img {
  margin: 0 auto;
}  

Flexbox cung cấp một cách căn giữa hình ảnh mạnh mẽ hơn. Để căn giữa hình ảnh theo chiều ngang, dọc theo trục x, hãy sử dụng

  img {
  justify-content: trung tâm;
}  

Để căn giữa hình ảnh theo chiều dọc, hãy sử dụng

  img {
  align-các mục: trung tâm;
}  

Bạn có thể sử dụng một trong hai cách này để căn giữa hình ảnh theo cả chiều ngang và chiều dọc một cách hoàn hảo.

Hình ảnh làm tròn

Hình ảnh được làm tròn là sự tán thưởng cho các hình ảnh hồ sơ. Để làm cho hình ảnh được làm tròn, hãy đặt bán kính đường viền của nó thành 50%. Nó sẽ cung cấp cho tất cả các cạnh viền đều được làm tròn bằng nhau.

  img {
  bán kính biên giới: 50%;
}  

Hình và Chú thích

Hình ảnh hoạt động với thẻ HTML, & lt; hình & gt; và & lt; figcaption & gt ;. Thẻ hình đại diện cho nội dung độc lập bao gồm hình ảnh, biểu đồ, hình minh họa, v.v. Hình mô tả là mô tả của thẻ hình. Hình ảnh được đặt trong phần tử figure và được mô tả bằng hình tượng nhỏ có thể tạo ra một thư viện đẹp với các ghi chú.

Xem Thêm  Phạm vi trong Java - phạm vi trong java là gì

THU GỌN HÌNH ẢNH CÓ HÌNH VÀ HÌNH ẢNH

  div {
  hiển thị: lưới;
  lưới-mẫu-cột: 1fr 1fr 1fr;
}
nhân vật {
  border: 1px #cccccc solid;
  đệm: 4px;
  margin: tự động;
}
mô tả {
  màu đen;
  font-style: nghiêng;
  đệm: 2px;
  text-align: center;
}  
 & lt; div & gt;
  & lt; hình & gt;
    & lt; img src = "https://images.unsplash.com/photo-1495562569060-2eec283d3391?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt = "Trulli" style = "width: 100%" & gt;
    & lt; figcaption & gt; Puglia, Ý & lt; / figcaption & gt;
  & lt; / hình & gt;
  & lt; hình & gt;
    & lt; img src = "https://images.unsplash.com/photo-1486591913781-4bee9ed65bfe?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt = "Paris "style =" width: 100% "& gt;
    & lt; figcaption & gt; Paris, France & lt; / figcaption & gt;
  & lt; / hình & gt;
  & lt; hình & gt;
    & lt; img src = "https://images.unsplash.com/photo-1484503369601-c5f45a1bf914?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500 "&q=crop&w=500" alt = "spain" style = "width: 100%" & gt;
    & lt; figcaption & gt; Madrid, Spain & lt; / figcaption & gt;
  & lt; / hình & gt;
  & lt; hình & gt;
    & lt; img src = "https://images.unsplash.com/photo-1504019347908-b45f9b0b8dd5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&q=500 "&fit=crop&q=500" alt = "Đảo" style = "width: 100%" & gt;
    & lt; figcaption & gt; Trogir, Croatia & lt; / figcaption & gt;
  & lt; / hình & gt;
  & lt; hình & gt;
    & lt; img src = "https://images.unsplash.com/photo-1509840841025-9088ba78a826?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt = "Thổ Nhĩ Kỳ" style = "width: 100%" & gt;
    & lt; figcaption & gt; Istanbul, Thổ Nhĩ Kỳ & lt; / figcaption & gt;
  & lt; / hình & gt;
  & lt; hình & gt;
    & lt; img src = "https://images.unsplash.com/photo-1512753360435-329c4535a9a7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt = "Rome" style = "width: 100%" & gt;
    & lt; figcaption & gt; Rome, Italy & lt; / figcaption & gt;
  & lt; / hình & gt;
& lt; / div & gt;  

ĐẦU RA

Tín dụng hình ảnh: Unsplash.com

KẾT LUẬN

Ngày nay hầu như không có bất kỳ trang web nào không có bất kỳ liên kết hoặc hình ảnh nào. Chúng cần thiết để ảnh hưởng đến người dùng web, nhưng chúng quan trọng đối với các công cụ tìm kiếm và SEO. Việc sử dụng cẩn thận hai yếu tố HTML này sẽ nâng cao mức độ liên quan và uy tín của một trang web. Học cách sử dụng phương tiện trong thiết kế web một cách hiệu quả là yêu cầu cơ bản đối với bất kỳ dự án web nào.


Xem thêm những thông tin liên quan đến chủ đề liên kết hình ảnh trong css

Cách tạo hình dạng trong CSS

  • Tác giả: Kim Minh
  • Ngày đăng: 2021-05-22
  • Đánh giá: 4 ⭐ ( 2639 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách tạo hình dạng trong CSS
    shape css html
    CSS cung cấp một số thuộc tính để vẽ hình học hoặc những hình dạng đặc biệt. Trong video này, tui chia sẻ đến anh em cách sử dụng thuộc tính clip-path để dựng hình trong CSS. Mọi người cùng theo dõi nhé. Tui cảm ơn.
    Code Editor: VS Code
    Source Code:

    https://github.com/kimminhtuts/html-css-lessons/tree/master/shape

    Music: https://www.bensound.com
    ———————-

    Facebook: https://www.facebook.com/kimminhtuts

    ———————-

    Playlist URLs:

    1. How To:
    https://www.youtube.com/playlist?list=PLEqDXVCpfmwsZzi8WWoX5uJc9eyJtsRh1

    2. Loading Effect:
    https://www.youtube.com/playlist?list=PLEqDXVCpfmwtkYGzTywhTlPMMeI451cSx

    3. Button Effect:
    https://www.youtube.com/playlist?list=PLEqDXVCpfmwubNPvLJBBgeL8Oni7Oma1-

    4. Image Slideshow:
    https://www.youtube.com/playlist?list=PLEqDXVCpfmwsPWCa9qTwADJ_p0qU8F-_Z

    5. Card Effect:
    https://www.youtube.com/playlist?list=PLEqDXVCpfmwuNBQ5Va0z3kJrP30OPAjw-

    6. Text Effect:
    https://www.youtube.com/playlist?list=PLEqDXVCpfmwuRGwZpWcr08HZ7UxPH9Vtq

Tìm hiểu về liên kết trong CSS nhanh chóng

  • Tác giả: giuseart.com
  • Đánh giá: 5 ⭐ ( 1140 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Một thành phần rất quan trọng trong mọi website, đó chính là liên kết css. Cũng như một đối tượng văn bản thông thường, chúng ta hoàn toàn có thể áp dụng…

[RWD Bài 4] Responsive hình ảnh (image) với HTML CSS

  • Tác giả: hocban.vn
  • Đánh giá: 4 ⭐ ( 4604 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này chúng ta đi tìm hiểu về responsive hình ảnh (image) với HTML CSS trong Responsive Web Design.

Cách tạo liên kết bằng hình ảnh di chuột trong CSS đơn giản

  • Tác giả: www.webhostingsecretrevealed.net
  • Đánh giá: 5 ⭐ ( 7972 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Vấn đề mất các liên kết hình ảnh, css, javascript khi rewrite url

  • Tác giả: thietkewebsite24h.com
  • Đánh giá: 5 ⭐ ( 3400 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đây là một lỗi cơ bản, mà rất nhiều người gặp phải khi sử dụng kỹ thuật rewrite url, nguyên nhân chính là do thói quen…

Các liên kết trong CSS

  • Tác giả: www.codelean.vn
  • Đánh giá: 5 ⭐ ( 4282 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: CodeLean.vn là nơi chia sẻ kiến thức của những người học, làm và dạy trong lĩnh vực công nghệ thông tin.

Tạo Gallery ảnh với CSS Grid (Cùng với hiệu ứng Blur và tương tác Media Query)

  • Tác giả: webdesign.tutsplus.com
  • Đánh giá: 3 ⭐ ( 8756 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài hướng dẫn này, chúng ta sẽ lấy một loạt các liên kết hình thumbnail và biến chúng thành một Responsive Gallery với CSS Grid đi kèm với hiệu ứng mờ. Chúng ta cũng sẽ sử dụng một thủ…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình