Gagan BNgagan-bn.hashnode.dev·Sep 4, 2024Understanding the @property Variable in CSSWe all know about variables in CSS, which are similar to JavaScript variables in that they store values. However, do you know the downside of CSS variables? It’s the inheritance nature of CSS variables. While inheritance has its advantages, it also c...css property variable
Mohammad Sarabim-sarabi.hashnode.dev·Aug 22, 2024How to Switch Your Website to Dark Mode Using CSS and JavaScriptIntroduction Dark mode is a display setting that uses a dark background with light text and elements. It has gained popularity because it looks good and offers several practical benefits. The benefits of dark mode include: Reduced Eye Strain: Dark m...11 likesdark mode
Nweze Emmanuelxpensiveuch.hashnode.dev·Jul 8, 2024CSS Variables: Enhancing Code MaintainabilityOutline Introduction Brief overview of CSS variables Importance of code maintainability in web development Purpose of the article What are CSS Variables? Definition and syntax Differences between CSS variables and preprocessor variables (e.g...Web Design
Emil Krautmannecodersdev.hashnode.dev·Apr 27, 2024Unleash the Power of CSS VariablesIn the ever-evolving world of web development, CSS (Cascading Style Sheets) has been a constant companion, providing developers with the means to style and enhance the visual appearance of websites. However, with the introduction of CSS variables, a ...CSS
brian treesebriantreese.hashnode.dev·Nov 24, 2023Alpha Transparency in CSS Custom PropertiesCustom properties have been a pretty big deal for us who use CSS regularly. Many of us are probably starting to use them quite a bit, especially as part of a color or theming system. They really work great for this. But what about when we need alpha ...rgba color function
Eva Chenim1010ioio.hashnode.dev·Sep 24, 2023#09 原生的 Css 變數,基本與進階應用↓ 今日學習重點 ↓ 了解如何設定 CSS 變數,並且使用它們 CSS 變數(CSS Variables)可以讓人在整個網站的樣式中輕鬆重複使用相同的值,更輕鬆地調整網站的外觀,同時保持一致性。以往 CSS 要使用變數必須透過 Sass (SCSS) 或 Less 等預處理器才能實現,但現在有了原生的 CSS 變數,已開始廣泛運用在網頁上了。 今天,就讓我們來了解如何使用 CSS 變數吧! 基礎知識 定義變數 在CSS中,可以使用--前綴來定義變數。而上一篇有提過 :root 選擇器,指...48 readsSuper Easy CSS,極度簡單:寫出好的 CSS,從零開始前端生涯CSS
Lavanya Cheemakurthylavanyacheemakurthy.hashnode.dev·Aug 30, 2023A way of dynamic usage of CSS variables along with Context API in ReactIn this article, we will cover, how to set CSS variable values from JSX and how to use Context API so that nested child will be able to change the same variable values. Assume we have to set the background color as three different colors based on one...64 readsReact
Mba-Atanga Judejudemba.hashnode.dev·Jun 12, 2023CSS Variables: The Secret Weapon for Easy and Less Redundant Styling!Have you ever been styling your webpage and noticed you need the same: background-color font settings (size, color, family) margin and padding settings For many different elements? And you become bored by the numerous times you have to specify t...22 likes·91 readsHTML5
Matt Lawrencehtmlallthethings.hashnode.dev·Nov 22, 2022CSS Variables – What Are They & How to Use ThemWhat Is a CSS Variable? CSS custom properties are often referred to as CSS variables. They allow you to set and store values within them for use throughout your stylesheet(s). For example, you could have a primary-color variable that is set to the he...34 likes·245 readsCSS
Stavros Ioannidisistavros.dev·Nov 13, 2022How to make simple slideshow using cool CSS and JS featuresHello. Today I'm making a simple slideshow using cool CSS and JS features. I'm gonna be using: CSS variables CSS transformations CSS functions CSS grid JS Proxy The HTML <div class="slideshow"> <div class="slides-container"> <div class="slid...2 likes·426 readsjavascript proxy