Mặc dù xu hướng thiết kế thay đổi hàng năm, bạn có thể tin tưởng vào việc sử dụng các hiệu ứng bóng chủ yếu như bóng hộp và bóng đổ để đóng góp tích cực vào tính thẩm mỹ của trang web. Bạn có thể sử dụng bóng đổ để tạo ra các hiệu ứng dễ chịu, kết xuất đẹp mắt mà không bị sến.
Chúng ta hãy xem xét kỹ hơn thuộc tính drop-shadow của CSS .
drop-shadow () là một hiệu ứng CSS hiển thị bóng xung quanh hình dạng của một đối tượng được chỉ định. Đây là cú pháp để áp dụng CSS drop-shadow .
Syntax: filter: drop-shadow(offset-x offset-y blur-radius color);
Có một loạt các chức năng bộ lọc bao gồm làm mờ () , độ sáng () và đổ bóng () .
offset-x xác định khoảng cách ngang và offset-y xác định khoảng cách dọc. Lưu ý rằng các giá trị âm đặt bóng ở bên trái ( offset-x ) và phía trên ( offset-y ) đối tượng.
Hai tham số cuối cùng là tùy chọn. Bạn có thể chỉ định bán kính mờ của bóng dưới dạng chiều dài. Theo mặc định, nó được đặt thành 0. Bạn không thể có bán kính làm mờ âm.
Màu của bóng đổ được chỉ định như. Nếu bạn chưa chỉ định một màu, nó sẽ tuân theo giá trị của thuộc tính màu .
Bạn có thể đã biết rằng box-shadow thực hiện công việc khá tốt. Vì vậy, bạn có thể nghĩ, tại sao chúng ta cần bóng đổ ? Có rất nhiều trường hợp trong đó hàm drop-shadow () là một cứu cánh. Chúng ta hãy xem xét một vài trong số chúng:
Không giống như bóng đổ hình hộp , bạn có thể thêm bóng đổ vào các hình dạng không phải hình chữ nhật. Ví dụ: chúng ta có SVG hoặc PNG trong suốt có hình dạng không phải hình chữ nhật — ví dụ như một ngôi sao. Ở đây, việc thêm bóng tương ứng với chính đối tượng có thể được hoàn thành với bóng hộp hoặc bóng đổ . Hãy xem xét cả hai tình huống:
HTML
CSS
.star-img img { display: inline-block; height: 15em; width: 25em; } .box-shadow { color: red; box-shadow: 0.60em 0.60em 0.2em; } .drop-shadow { filter: drop-shadow(0.60em 0.60em 0.2em); }
Đầu ra :
Khi so sánh cả hai hiệu ứng, rõ ràng là một bóng hộp tạo ra một bóng hình chữ nhật; nó cũng không quan trọng cho dù hình ảnh trong suốt hay đã có nền. Mặt khác, drop-shadow cho phép bạn tạo một bóng đổ phù hợp với hình dạng của chính hình ảnh.
Các yếu tố hạn chế là hàm drop-shadow () chấp nhận tất cả các tham số kiểu ngoại trừ từ khóa inset và tham số spread .
Có một số trường hợp khi bạn có thể cần xây dựng các thành phần bằng cách chồng chéo các phần tử nhất định. Nếu bạn đang sử dụng box-shadow , bạn sẽ phải đối mặt với vấn đề cố gắng tạo bóng theo đúng cách. Đây là cách nó hoạt động khi nhóm một hình ảnh và một thành phần văn bản:
HTML
Live in the moment
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas porro quo nam odit, non debitis, facilis eligendi ea labore obcaecati ut quia asperiores. Modi, corrupti commodi quisquam ex numquam incidunt.
CSS cơ bản
body { padding: 5em 1em; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } h2 { font-size: 2rem; } p { font-size: 0.8rem; } .parent-container { display: flex; flex-direction: column; height: 17rem; width: 50em; } .image-container img { width: 15em; position: absolute; z-index: 1; top: 2em; left: 1.5em; } .text-container { color: rgb(255, 236, 236); background-color: rgb(141 0 35); width: 30rem; padding: 3rem; align-self: flex-end; position: relative; }
Bây giờ, áp dụng box-shadow và drop-shadow để thấy sự khác biệt.
.drop-shadow { filter: drop-shadow(0.4rem 0.4rem 0.45rem rgba(0, 0, 30, 0.5)); } .box, .box img { box-shadow: 0.4rem 0.4rem 0.45rem rgba(0, 0, 30, 0.3); }
Đầu ra:
Như bạn có thể thấy, bóng hộp được áp dụng trên từng phần tử riêng lẻ trong khi bóng đổ nhóm cả hai và áp dụng bóng đổ.
Bạn có thể sử dụng thuộc tính clip-path để cắt một vùng nhất định xác định phần nào của hình ảnh hoặc phần tử sẽ được hiển thị. Bộ lọc đổ bóng cho phép chúng tôi tạo bóng đổ trên phần tử được cắt bớt bằng cách áp dụng nó cho phần tử gốc của phần tử đó:
HTML
CSS
.parent-container { filter: drop-shadow(0rem 0rem 1.5rem maroon); } .clipped-element { width: 50em; height: 50em; margin: 0 auto; background-image: url(smiling-girl.jpg); clip-path: circle(50%); background-size: cover; background-repeat: no-repeat; }
Đầu ra:
Chúng tôi đã cắt bớt 50% hình ảnh bằng một đường tròn. Do đó, bộ lọc đổ bóng chỉ được áp dụng cho phần có thể nhìn thấy của hình ảnh. Thật tuyệt vời phải không?
Như chúng ta đã thảo luận ở trên, drop-shadow không hỗ trợ tham số spread . Điều này có nghĩa là sẽ không thể tạo hiệu ứng phác thảo bằng cách sử dụng hàm drop-shadow () vì nó bị giết ở mọi nơi. Ngoài ra, nó ám hiệu ứng bóng khác nhau từ các hộp bóng và text-shadow (với các thông số tương tự). Bạn có thể cảm thấy rằng sự khác biệt giữa box-shadow và drop-shadow phụ thuộc vào CSS Box Model . Một người làm theo nó trong khi người kia thì không. Đây là một ví dụ:
HTML
Every MUO article will bring you one step closer.
Every MUO article will bring you one step closer.
Every MUO article will bring you one step closer.
CSS cơ bản
body { padding: 5em 1em; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } .parent-container { width: 72rem; } p { font-size: 3em; font-style: bold; }
Áp dụng hiệu ứng đổ bóng
.drop-shadow { filter: drop-shadow(0.5em 0.5em 0.1em #555); } .box-shadow { box-shadow: 0.5em 0.5em 0.1em #555; } .text-shadow { text-shadow: 0.5em 0.5em 0.1em #555; }
Đầu ra:
Bạn có thể thấy rằng box-shadow tạo ra bóng nặng hơn, tối hơn so với text-shadow và drop-shadow . Ngoài ra, có một chút khác biệt về vị trí của bóng giữa bóng văn bản và bóng đổ . Tuy nhiên, bạn có thể thích các hiệu ứng đổ bóng khác nhau tùy theo yêu cầu của mình.
Hàm drop-shadow () được hỗ trợ trong tất cả các trình duyệt hiện đại ngoại trừ các trình duyệt cũ hơn như Internet Explorer. Mặc dù nó không phải là điều gì đó sẽ cản trở nghiêm trọng đến trải nghiệm người dùng, nhưng bạn có thể thêm truy vấn tính năng với dự phòng bóng hộp .
Sự phổ biến của box-shadow là khá rõ ràng vì có vô số trường hợp sử dụng. Tuy nhiên, hàm drop-shadow () không được sử dụng nhiều. Chúng tôi hy vọng rằng bạn sẽ thử nghiệm các hiệu ứng đổ bóng khác nhau và cố gắng triển khai bóng đổ trong các dự án tương lai của mình.
Các lớp giả thêm một loạt chức năng hoàn toàn mới vào CSS và kho phát triển web cá nhân của bạn. Tìm hiểu thêm về chúng để trở thành nhà phát triển web thành thạo và hiệu quả hơn.
Trong khi bạn có thể sử dụng máy tính đồ họa trên máy tính của mình, trình thông dịch ngôn ngữ lập trình Python có thể đóng vai trò như một máy tính bàn. Đó là một trò đùa chạy phổ biến trong cộng đồng Python mà nó đã được đề cập trong hướng dẫn chính thức. Đây là cách bạn có thể sử dụng Python làm máy tính.
Là một lập trình viên, bạn nên chấp nhận những thách thức để tồn tại và xây dựng một số kỳ quan trong lĩnh vực phát triển hoặc lập trình. Do đó, nếu bạn đang muốn học một ngôn ngữ lập trình nâng cao để nâng cao kỹ năng nghề nghiệp của mình, thì Java là một trong những triển vọng tốt nhất.
Học một ngôn ngữ lập trình mới như Python sẽ trở nên dễ dàng nếu bạn có một lộ trình toàn diện nêu chi tiết những khái niệm nào cần học khi mới bắt đầu và cách tiến bộ hơn nữa để đạt được cột mốc quan trọng tiếp theo. Ngay cả những lập trình viên trung cấp cũng nên thường xuyên học lại những kiến thức cơ bản của họ để xây dựng nền tảng vững chắc cho bản thân.
Ngày nay, việc xây dựng một trang web hoặc ứng dụng điều chỉnh giao diện người dùng của nó tùy thuộc vào trình duyệt hoặc thiết bị. Có hai cách tiếp cận để đạt được mục tiêu này. Đầu tiên liên quan đến việc tạo các phiên bản khác nhau của trang web hoặc ứng dụng của bạn cho các thiết bị khác nhau. Nhưng nó không hiệu quả và có thể dẫn đến các lỗi không thể đoán trước.
Làm việc với các con số là một phần không thể thiếu trong lập trình. Mọi ngôn ngữ lập trình đều cung cấp hỗ trợ để thao tác với các con số theo nhiều cách khác nhau. Trong bài viết này, bạn sẽ học cách tìm tổng số chữ số trong một số nguyên bằng cách sử dụng các phương pháp lặp lại, dựa trên nhật ký và dựa trên chuỗi.
Vùng chứa rất có lợi cho việc phát triển, triển khai và quản lý phần mềm trong môi trường ảo. Docker hữu ích trong quá trình container hóa, nhưng nó không phải là nền tảng duy nhất xung quanh. Nếu bạn đang tìm kiếm một số lựa chọn thay thế cho Docker, không cần tìm đâu xa. Danh sách này giới thiệu một số lựa chọn thay thế Docker hiệu quả và giàu tính năng để sử dụng trong dự án tiếp theo của bạn.
SQL so với NoSQL: Cơ sở dữ liệu tốt nhất cho dự án tiếp theo của bạn là gì?
Nhúng các dịch vụ của bên thứ ba vào các bài đăng WordPress của bạn là một cách thú vị để thu hút sự quan tâm của khách truy cập. Nội dung được nhúng cũng cung cấp các dấu hiệu trực quan giúp quét dễ dàng hơn. WordPress đã làm cho việc thêm loại nội dung này trở nên dễ dàng.
Node.js là một môi trường thời gian chạy JavaScript cho phép bạn chạy JavaScript bên ngoài trình duyệt web, làm cho nó trở thành một lựa chọn phổ biến để phát triển tất cả các loại ứng dụng. Một phần của sự phổ biến của nó là do có rất nhiều gói NPM để giúp nhà phát triển dễ dàng trải nghiệm.
Solidity là ngôn ngữ lập trình được sử dụng bởi các hợp đồng thông minh trên chuỗi khối Ethereum. Nó là một ngôn ngữ lập trình hướng đối tượng, được định kiểu tĩnh.
Huy hiệu GitHub có thể tăng cường khả năng đọc của kho lưu trữ bằng cách cung cấp cho người dùng một cách nhanh chóng để nắm bắt các chỉ số về kho lưu trữ. Các huy hiệu có thể được nhúng vào README.md của bạn để làm rõ tầm quan trọng và sự cần thiết của dự án của bạn đối với các nhà phát triển khác. Kết quả là, độc giả có được ý tưởng thực sự nhanh chóng về kho lưu trữ bằng cách kiểm tra các huy hiệu đính kèm.
Ngày lễ kỷ niệm quốc tế là một cách tốt đẹp để công nhận các vấn đề xã hội, ngày lịch sử và sự nghiệp tương ứng. Ngày Quốc tế Lập trình viên tôn vinh vai trò của các lập trình viên trong việc cải thiện cuộc sống hàng ngày. Thế giới văn minh mà chúng ta đang sống là sản phẩm của quá trình làm việc chăm chỉ của các lập trình viên.
Cho dù là truy vấn cơ sở dữ liệu hay kết quả của các phép toán, phương pháp định dạng chuỗi Python cung cấp một cách năng động và hấp dẫn hơn để trình bày kết quả cho người dùng.
Đầu năm nay, Microsoft đã phát hành phiên bản xem trước của Visual Studio 2022 vào thế giới lập trình hoang dã. Đây là một tin tốt! Đó là một IDE cực kỳ phổ biến, nhưng do phải điều chỉnh hoặc thậm chí có thể là một cuộc đại tu, với tốc độ thay đổi trong hệ sinh thái DevOps mà nó đang phát triển mạnh.
Số liệu phần mềm là các thước đo được sử dụng để định lượng các khía cạnh khác nhau của phần mềm của bạn. Những khía cạnh này có thể bao gồm từ chi phí, chất lượng và hiệu quả của nhóm phát triển.
Là người dùng Windows, có lẽ bạn đã ít nhất một lần bắt gặp từ .NET Framework. Khung phần mềm do Microsoft phát triển cho phép bạn xây dựng và chạy các chương trình C #, C ++, F # và Visual Basic. Phiên bản .NET mới nhất là 4.8, nhưng máy tính của bạn có thể cần phiên bản .NET cũ hơn (như .NET 3.5) để chạy một số ứng dụng.
Nếu bạn là một nhà phát triển Python, bạn có thể hưởng lợi rất nhiều từ mảng các khung công tác có sẵn. Trong khi một số khuôn khổ phù hợp nhất với các hệ sinh thái lớn, những khuôn khổ khác chuyên phục vụ các mục tiêu phát triển cụ thể. Đọc tiếp để tìm hiểu các tính năng cơ bản, cách sử dụng và sự khác biệt giữa hai khung Python: Flask và CherryPy.
Nhiều lập trình viên thích giải quyết các vấn đề toán học phức tạp bằng cách sử dụng mã. Nó giúp rèn luyện trí óc và cải thiện kỹ năng giải quyết vấn đề. Trong bài viết này, bạn sẽ học cách tìm các hình vuông và hình khối hoàn hảo có n chữ số nhỏ nhất và lớn nhất bằng Python, C ++ và JavaScript. Mỗi ví dụ cũng chứa đầu ra mẫu cho một số giá trị khác nhau.
Việc chạy Python từ thiết bị đầu cuối thường không thể tránh khỏi. Tuy nhiên, nếu bạn mới cài đặt Python trên Windows 10 lần đầu tiên, thì việc chạy Python qua Windows Terminal chỉ có thể thực hiện được nếu nó được thêm vào biến môi trường Windows PATH.
Câu lệnh if là động lực của lập trình logic. Do đó, việc nắm bắt tốt hơn về Pythons nếu là một bổ sung đáng kể cho kỹ năng lập trình Python của bạn.
Trong khi bạn có thể sử dụng máy tính đồ họa trên máy tính của mình, trình thông dịch ngôn ngữ lập trình Python có thể đóng vai trò như một máy tính bàn. Đó là một trò đùa chạy phổ biến trong cộng đồng Python mà nó đã được đề cập trong hướng dẫn chính thức. Đây là cách bạn có thể sử dụng Python làm máy tính.
Là một lập trình viên, bạn nên chấp nhận những thách thức để tồn tại và xây dựng một số kỳ quan trong lĩnh vực phát triển hoặc lập trình. Do đó, nếu bạn đang muốn học một ngôn ngữ lập trình nâng cao để nâng cao kỹ năng nghề nghiệp của mình, thì Java là một trong những triển vọng tốt nhất.
Học một ngôn ngữ lập trình mới như Python sẽ trở nên dễ dàng nếu bạn có một lộ trình toàn diện nêu chi tiết những khái niệm nào cần học khi mới bắt đầu và cách tiến bộ hơn nữa để đạt được cột mốc quan trọng tiếp theo. Ngay cả những lập trình viên trung cấp cũng nên thường xuyên học lại những kiến thức cơ bản của họ để xây dựng nền tảng vững chắc cho bản thân.
Ngày nay, việc xây dựng một trang web hoặc ứng dụng điều chỉnh giao diện người dùng của nó tùy thuộc vào trình duyệt hoặc thiết bị. Có hai cách tiếp cận để đạt được mục tiêu này. Đầu tiên liên quan đến việc tạo các phiên bản khác nhau của trang web hoặc ứng dụng của bạn cho các thiết bị khác nhau. Nhưng nó không hiệu quả và có thể dẫn đến các lỗi không thể đoán trước.
Làm việc với các con số là một phần không thể thiếu trong lập trình. Mọi ngôn ngữ lập trình đều cung cấp hỗ trợ để thao tác với các con số theo nhiều cách khác nhau. Trong bài viết này, bạn sẽ học cách tìm tổng số chữ số trong một số nguyên bằng cách sử dụng các phương pháp lặp lại, dựa trên nhật ký và dựa trên chuỗi.
Vùng chứa rất có lợi cho việc phát triển, triển khai và quản lý phần mềm trong môi trường ảo. Docker hữu ích trong quá trình container hóa, nhưng nó không phải là nền tảng duy nhất xung quanh. Nếu bạn đang tìm kiếm một số lựa chọn thay thế cho Docker, không cần tìm đâu xa. Danh sách này giới thiệu một số lựa chọn thay thế Docker hiệu quả và giàu tính năng để sử dụng trong dự án tiếp theo của bạn.
SQL so với NoSQL: Cơ sở dữ liệu tốt nhất cho dự án tiếp theo của bạn là gì?
Nhúng các dịch vụ của bên thứ ba vào các bài đăng WordPress của bạn là một cách thú vị để thu hút sự quan tâm của khách truy cập. Nội dung được nhúng cũng cung cấp các dấu hiệu trực quan giúp quét dễ dàng hơn. WordPress đã làm cho việc thêm loại nội dung này trở nên dễ dàng.
Node.js là một môi trường thời gian chạy JavaScript cho phép bạn chạy JavaScript bên ngoài trình duyệt web, làm cho nó trở thành một lựa chọn phổ biến để phát triển tất cả các loại ứng dụng. Một phần của sự phổ biến của nó là do có rất nhiều gói NPM để giúp nhà phát triển dễ dàng trải nghiệm.
Solidity là ngôn ngữ lập trình được sử dụng bởi các hợp đồng thông minh trên chuỗi khối Ethereum. Nó là một ngôn ngữ lập trình hướng đối tượng, được định kiểu tĩnh.
