How to check if an element is visible in JavaScript
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
In JavaScript, determining if a DOM element is visible is crucial for tasks like lazy-loading images, triggering animations, and enhancing accessibility. This article covers two main contexts for checking visibility: general visibility (whether the element is rendered and visible based on CSS properties) and viewport visibility (whether the element is visible within the user’s current view). We’ll also delve into the checkVisibility() method, including its options and limitations, and its browser support. Additionally, we’ll discuss how these techniques are applied in real-world components, such as carousels in popular UI frameworks.
How to change opacity on hover in CSS
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Changing the opacity of images on hover is a common effect used in web design to create dynamic and interactive user interfaces. This article will walk you through the process of using the opacity property in CSS to achieve this effect.
How to dynamically add, remove, and toggle CSS classes in React.js
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Managing CSS classes dynamically in a React application is a common requirement, especially when it comes to creating interactive components. This article will guide you through various techniques to add, remove, and toggle CSS classes in React.
How to Remove Underline from Link in CSS
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
When styling a web page, details matter, including how links appear. By default, browsers add an underline to hyperlinks, but with CSS, you can customize the appearance of these links. In this article, we’ll explore how to use the text-decoration property to remove the underline from links and ensure a consistent and accessible design across your website.
CSS Selector for Parent Element
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
CSS parent selector is a highly discussed topic within the developer community due to their absence in traditional CSS. Such a selector has been a long-standing desire among front-end developers. The concept revolves around styling a parent element based on the characteristics of its child elements and the overall HTML structure. Although CSS lacks a direct parent selector, introducing the :has() pseudo-class offers a solution to this limitation.
How to Center a Button in CSS
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Centering a button in CSS can be achieved using several methods. Here are some simple techniques to help you center a button horizontally and vertically on your web page. The following examples will guide you through the use of CSS centering techniques.
How to Hide Scrollbar with CSS
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
In modern web design, creating sleek, user-friendly interfaces often involves minimal visual clutter, which can include hiding scrollbars. This guide provides software developers with easy-to-understand instructions on using CSS to hide the scrollbar effectively, ensuring your applications look clean while remaining functional.