Hướng dẫn css zoom - thu phóng css
 Show Trong bài này, chúng ta sẽ tìm hiểu cách tạo hiệu ứng zoom và gradient trong css. Hai thuộc tính được sử dụng là transform:scale() và background-image: -webkit-linear-gradient(); Ngoài ra, thuộc tính box-size:border-box cũng được giới thiệu.
Video – Hiệu ứng zoom và gradientNội dung cần thực hiệnCó làm thì mới có ăn như ai đó từng nói - Vài dòng ngắn cho QUẢNG CÁO nhé Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn đăng ký và sử dụng hosting từ link trên, Góc Làm Web sẽ có một ít tiền để duy trì. Hướng dẫn chi tiết Các thuộc tính mới Hướng dẫn chi tiếtCác thuộc tính mớithuộc tính box-sizing: border-box. "Thăm ngàn, kẹp ngần nhưng vẫn không đủ chai ni (trả nợ)" nên dành vài dòng cho QUẢNG CÁO Các bạn cần hosting PHP - WordPress nhanh, rẻ và dễ sử dụng có thể chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn đăng ký hosting từ link quảng cáo, mình sẽ có một ít tiền để duy trì và "chai ni". Các thuộc tính đã hướng dẫnthuộc tính transform:scale(2) – hình sẽ p1hong to gấp đôi, thay đổi số bên trong để tùy chỉnh mức phóng to hay thu nhỏ. Các thuộc tính thường dùngbachground-image:-webkit-linear-gradient(left, red 0%, orange 50%, yellow 100%). Ý nghĩa: đổ màu từ trái sang phải, dạng linear – đường thẳng, chuyển dần từ đỏ, cam, vàng, tại các vị trí 0% 50% 100%. Có thể thay left bằng right, top,bottom hay thay bằng độ 135deg, 45deg. Các bạn thử nhé. Các thuộc tính mớiCác thuộc tính đã hướng dẫn Các thuộc tính thường dùng Các thuộc tính flexbox Các thuộc tính đã hướng dẫnCác thuộc tính thường dùngCác thuộc tính flexbox Các thuộc tính chia layer + Hiệu ứng phóng to hình khi trỏ chuột vào + Đổ màu gradient + Tạo khối có chiều rộng chiều cao là 300px, padding 5px các phía. Lưu ý, nếu để bình thường thì khối sẽ tự được rộng và cao thêm 10px như có thêm padding. Để khối có chiều cao không đổi là 300px khi có padding, có 2 cách. Một là giảm chiều rộng và chiều cao ban đầu. hai là dùng thuộc tính box-sizing: border-box. + Tạo hiệu ứng zoom hình ảnh (dùng cho thẻ img) bằng cách dùng thuộc tính transform:scale(2) – hình sẽ p1hong to gấp đôi, thay đổi số bên trong để tùy chỉnh mức phóng to hay thu nhỏ. + Tạo gradient theo công thức sau: bachground-image:-webkit-linear-gradient(left, red 0%, orange 50%, yellow 100%). Ý nghĩa: đổ màu từ trái sang phải, dạng linear – đường thẳng, chuyển dần từ đỏ, cam, vàng, tại các vị trí 0% 50% 100%. Có thể thay left bằng right, top,bottom hay thay bằng độ 135deg, 45deg. Các bạn thử nhé. + bachground-image:-webkit-linear-gradient(left, red 0%, orange 50%, yellow 100%), hiệu ứng đổ màu gradient + transform:scale(2), hiệu ứng zoom, phóng to thu nhỏ + box-sizing: border-box, cố định chiều rộng và chiều cao + transform: rotate(-45deg) để xoay khối div góc 45 độ + border-radius: 5px; bo tròn các góc của khối với bán kính 5px + background-size: cover, để hình luôn đầy 100% khối + background-attachment: fixed (cố đinh hình nền khi cuộn trang) + nth-child(3) để ghi đè css cho các đoạn giống nhau. + margin: auto, tự động canh biên + text-transform: uppercase, tự động viết hoa + box-shadow: 2px 2px 7px; tạo đổ bóng (các thông số lần lượt là đổ sang phải, bên dưới, độ rộng của bóng mờ) + transition: 0.4s; tùy chỉnh lại các hiệu ứng + float: left (right) dồn các khối + overflow: hidden + display: block, biến thẻ không xuống dòng thành khối để hiểu được thuộc tính margin + display: inline, biến thành các thẻ không xuống dòng + margin và padding, biên tính từ viền của khối ra ngoài, lề tính từ viền khối vào bên trong nội dung + border : viền, 1px (độ dày) black (màu) solid (loại nét) Các thuộc tính flexboxCác thuộc tính chia layer flex-direction : + Hiệu ứng phóng to hình khi trỏ chuột vào + Đổ màu gradient + Tạo khối có chiều rộng chiều cao là 300px, padding 5px các phía. Lưu ý, nếu để bình thường thì khối sẽ tự được rộng và cao thêm 10px như có thêm padding. Để khối có chiều cao không đổi là 300px khi có padding, có 2 cách. Một là giảm chiều rộng và chiều cao ban đầu. hai là dùng thuộc tính box-sizing: border-box. + Tạo hiệu ứng zoom hình ảnh (dùng cho thẻ img) bằng cách dùng thuộc tính transform:scale(2) – hình sẽ p1hong to gấp đôi, thay đổi số bên trong để tùy chỉnh mức phóng to hay thu nhỏ. + Tạo gradient theo công thức sau: bachground-image:-webkit-linear-gradient(left, red 0%, orange 50%, yellow 100%). Ý nghĩa: đổ màu từ trái sang phải, dạng linear – đường thẳng, chuyển dần từ đỏ, cam, vàng, tại các vị trí 0% 50% 100%. Có thể thay left bằng right, top,bottom hay thay bằng độ 135deg, 45deg. Các bạn thử nhé. + bachground-image:-webkit-linear-gradient(left, red 0%, orange 50%, yellow 100%), hiệu ứng đổ màu gradient + transform:scale(2), hiệu ứng zoom, phóng to thu nhỏ + box-sizing: border-box, cố định chiều rộng và chiều cao + transform: rotate(-45deg) để xoay khối div góc 45 độ + border-radius: 5px; bo tròn các góc của khối với bán kính 5px + background-size: cover, để hình luôn đầy 100% khối + background-attachment: fixed (cố đinh hình nền khi cuộn trang) + nth-child(3) để ghi đè css cho các đoạn giống nhau. + margin: auto, tự động canh biên + text-transform: uppercase, tự động viết hoa: canh chỉnh theo chiều dọc (khối bên ngoài phải có độ cao cố định) + box-shadow: 2px 2px 7px; tạo đổ bóng (các thông số lần lượt là đổ sang phải, bên dưới, độ rộng của bóng mờ) + transition: 0.4s; tùy chỉnh lại các hiệu ứng + float: left (right) dồn các khối + overflow: hidden + display: block, biến thẻ không xuống dòng thành khối để hiểu được thuộc tính margin Các thuộc tính chia layer+ Hiệu ứng phóng to hình khi trỏ chuột vào + Đổ màu gradient + Tạo khối có chiều rộng chiều cao là 300px, padding 5px các phía. Lưu ý, nếu để bình thường thì khối sẽ tự được rộng và cao thêm 10px như có thêm padding. Để khối có chiều cao không đổi là 300px khi có padding, có 2 cách. Một là giảm chiều rộng và chiều cao ban đầu. hai là dùng thuộc tính box-sizing: border-box. + Tạo hiệu ứng zoom hình ảnh (dùng cho thẻ img) bằng cách dùng thuộc tính transform:scale(2) – hình sẽ p1hong to gấp đôi, thay đổi số bên trong để tùy chỉnh mức phóng to hay thu nhỏ. + Tạo gradient theo công thức sau: bachground-image:-webkit-linear-gradient(left, red 0%, orange 50%, yellow 100%). Ý nghĩa: đổ màu từ trái sang phải, dạng linear – đường thẳng, chuyển dần từ đỏ, cam, vàng, tại các vị trí 0% 50% 100%. Có thể thay left bằng right, top,bottom hay thay bằng độ 135deg, 45deg. Các bạn thử nhé. + bachground-image:-webkit-linear-gradient(left, red 0%, orange 50%, yellow 100%), hiệu ứng đổ màu gradient + box-sizing: border-box, cố định chiều rộng và chiều cao + transform: rotate(-45deg) để xoay khối div góc 45 độDownload + border-radius: 5px; bo tròn các góc của khối với bán kính 5pxcomment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web. Liên hệ |
