Donate with
Categories
Money money money...
Could we help you? Please click the banners. We are young and desperately need the money
Donate with
82uymVXLkvVbB4c4JpTd1tYm1yj1cKPKR2wqmw3XF8YXKTmY7JrTriP4pVwp2EJYBnCFdXhLq4zfFA6ic7VAWCFX5wfQbCC
Created: December 11th 2024
Last updated: December 19th 2024
Categories: Common Web Development, CSS, IT Development
Author: Tim Fürer
Last updated: December 19th 2024
Categories: Common Web Development, CSS, IT Development
Author: Tim Fürer
CSS: How to use Colour Function to Change Colour Opacity
Donate with
82uymVXLkvVbB4c4JpTd1tYm1yj1cKPKR2wqmw3XF8YXKTmY7JrTriP4pVwp2EJYBnCFdXhLq4zfFA6ic7VAWCFX5wfQbCC
Using the new color() CSS function, you can modify a given colour (even from a CSS variable).
Color() is Baseline since May 2023.
Here's an example using color() to change a colour's (#a24a9d) opacity to 50%:
color(from #a24a9d srgb r g b / 50%)As mentioned, you can also use CSS variables:
color(from var(--some-color) srgb r g b / 50%)
Related Articles
December 20th 2024
Target other elements using :has()
December 19th 2024
JavaScript: How to Trigger Download through Code
December 6th 2024
Linting: Improve Website Code with ESLint and Stylelint
November 12th 2024
CSS: How to horizontally align child elements inside grid items
November 5th 2024
Laravel: How to Test SMTP Credentials
November 1st 2024
Alternative Approach to Responsive Tables using Container Queries
October 31st 2024
HTML: How to Format HTML
October 24th 2024
JavaScript: How to Only Allow Unique Values in Array
September 27th 2024
HTML: How to Prevent User Interaction with Inert and Alternatives
September 20th 2024
JavaScript: How to use Map; The Super-Powered Object/Dictionary
September 18th 2024
Creating Custom Blade Directives in Laravel
September 11th 2024
Control Browser Caching in Laravel
September 5th 2024
JavaScript: How to Convert Iterables to Arrays
August 3rd 2024
Exploring Container Queries: The Future of Responsive Web Design
August 2nd 2024
How to Use the :has() Selector in CSS
March 15th 2024
PHP: How to automatically generate IcoMoon HTML
February 28th 2024
WordPress: How to generate HTML class attribute with array of strings
February 16th 2024
WordPress: How to send alert on post create, delete, or permalink change
February 5th 2024
WordPress: How to preload fonts
January 24th 2024
WordPress: CSS/JavaScript Changes not Showing/Loading
January 19th 2024
WordPress: How to disable admin theme- and plugin editors
January 10th 2024
WordPress: How to hide admin pages for unprivileged users
January 5th 2024
PHP: How to serve file as response
December 18th 2023
WordPress: How to redirect to first child page
December 6th 2023
CSS: How to add text and custom elements with ::before and ::after
November 29th 2023
WordPress: How to generate breadcrumbs
November 21st 2023
PHP: How to find out client browser language
July 14th 2023
PHP: Funktion zum Vergleich von Verzeichnissen
July 13th 2023
PHP: Directory Comparison Function
June 20th 2023
JavaScript: Why use let/const over var
February 24th 2023
WordPress: Streamlined Database Export Plugin
July 6th 2022
MySQL Workbench: Re-sizing a Diagram
November 18th 2021
JavaScript Basics: Second Lesson
November 4th 2021
CSS Basics: Use calc() and var() to keep things flexible
September 24th 2021
JavaScript Basics: First Lesson
August 18th 2021
CSS: How to Use var()
August 18th 2021
How to install Laragon and create basic index.php
April 23rd 2021
WordPress: Change Post Type via Database, Quick and Easy
April 13th 2021
RegEx: Basic Introduction
April 12th 2021
CSS Basics: Selectors
April 8th 2021
CSS Basics: Short introduction
April 7th 2021
HTML Basics: Different ways to include JavaScript and CSS
March 31st 2021
HTML Basics: The HTML5 Scaffold
March 30th 2021
HTML Basics: Elements
March 23rd 2021
WordPress: Enqueuing Scripts and Styles
March 22nd 2021
WordPress: Get a Post
March 18th 2021
JavaScript and jQuery: Smooth Scroll to element on page
March 17th 2021
CSS and Bootstrap: Alternating Layout with Images to normal in Mobile (solved with display:grid)
March 10th 2021
WordPress: Create a basic Template
March 9th 2021
WordPress: Create a basic Theme
March 2nd 2021
WordPress: Make a Custom Taxonomy
February 26th 2021
WordPress: Add your own Shortcode
February 25th 2021
WordPress: jQuery is not working
February 19th 2021
MySQL with PhpMyAdmin: Create Databases and Tables
February 18th 2021
WordPress: Declare a Custom Post Type
February 16th 2021
WordPress and PhpMyAdmin: Migrate a Database
February 12th 2021
WordPress Plugin: Advanced Custom Fields short introduction
February 9th 2021
PhpStorm: Quick FTP configuration guide
February 5th 2021
WordPress: Basic installation with XAMPP
January 20th 2021
[HOW TO] Zammad Chat: How to embed zammad chat into webpage
January 13th 2021
CSS: Image resizing in flex-container made easy with object-fit
July 22nd 2019
How to develop triangle with borders in css
November 15th 2018
The solution for a bug where autocomplete="off" doesn't apply
June 18th 2015
WordPress Multisite Guide
January 27th 2015
How to Create CSS Circles
February 2nd 2013
Apply fading (or various) transition effects on HTML (image) buttons using CSS image sprites with a simple jQuery script
May 21st 2012
CSS HTML: Always show scrollbar on website
December 8th 2011
Add custom fonts to websites
This website was created and developed by LEXO - for more information see LEXO web development