CSS의 비율에 따라 색상을 더 밝게 또는 더 어둡게 동적으로 변경
우리는 사이트에 큰 애플리케이션을 가지고 있고 몇 개의 링크가 있는데, 예를 들어 이 사이트의 파란색 링크와 같은 파란색입니다.이제 좀 더 밝은 색으로 다른 링크를 만들고 싶습니다.분명히 CSS 파일에 헥스 코드를 추가하면 간단히 할 수 있지만, 우리 사이트는 사용자가 맞춤형 프로필/사이트(트위터와 같은)에 어떤 색상을 원하는지 결정할 수 있습니다.
그래서, 제 질문은, 색을 백분율로 줄일 수 있을까요?
다음 코드가 CSS라고 가정해 보겠습니다.
a {
color: blue;
}
a.lighter {
color: -50%; /* obviously not correct way, but just an idea */
}
오어
a.lighter {
color: blue -50%; /* again not correct, but another example of setting color and then reducing it */
}
색을 몇 퍼센트 줄일 수 있는 방법이 있습니까?
모든 최신 브라우저에서 CSS 필터로 이 작업을 수행할 수 있습니다(caniuse 호환성 표 참조).
.button {
color: #ff0000;
}
/* note: 100% is baseline so 85% is slightly darker,
20% would be significantly darker */
.button:hover {
filter: brightness(85%);
}<button class="button">Foo lorem ipsum</button>사용할 수 있는 다양한 필터에 대한 CSS 트릭의 자세한 내용은 다음과 같습니다. https://css-tricks.com/almanac/properties/f/filter/
모든 최신 브라우저는 100%를 사용했습니다.filter2020년 1월부터의 지원안드로이드용 UC 브라우저(Chrome 대신 80달러짜리 전화기)도 지원합니다.
a {
/* a nice, modern blue for links */
color: #118bee;
}
a:active {
/* Darken on click by 15% (down to 85%) */
filter: brightness(0.85);
}
또한 2017년 10월 이후 대부분의 브라우저에서 지원되는 CSS 변수를 사용하여 동적으로 제어할 수 있습니다(QQ 제외).
:root {
--color: #118bee;
--hover-brightness: 1.2;
}
a {
color: var(--color);
}
a:active {
/* Darken on click */
filter: brightness(var(--hover-brightness));
}
내 프로젝트가 아니라 현대 CSS가 얼마나 훌륭할 수 있는지 보여주는 실제 예를 찾기에 좋은 프로젝트입니다. MVP.css.
원답
Sass 또는 Less를 사용할 수 있는 스택을 사용하는 경우 다음 기능을 사용할 수 있습니다.
$linkcolour: #0000FF;
a {
color: $linkcolour;
}
a.lighter {
color: lighten($linkcolour, 50%);
}
또 있습니다.darken똑같이 하지만 반대 방향으로 말입니다
배경을 빛나게 하는 "투명도"가 있습니다.
opacity: 0.5;
이게 무슨 뜻인지는 잘 모르겠어요"색상 줄이기"를 정의합니다. 투명하게 만듭니까?아니면 흰색 추가?
작성 당시 발견한 색상 조작을 위한 최적의 순수 CSS 구현은 다음과 같습니다.
CSS 변수를 사용하여 색상을 HEX/RGB 형식 대신 HSL로 정의한 다음 다음calc()그들을 조종하기 위해서 입니다.
기본적인 예는 다음과 같습니다.
:root {
--link-color-h: 211;
--link-color-s: 100%;
--link-color-l: 50%;
--link-color-hsl: var(--link-color-h), var(--link-color-s), var(--link-color-l);
--link-color: hsl(var(--link-color-hsl));
--link-color-10: hsla(var(--link-color-hsl), .1);
--link-color-20: hsla(var(--link-color-hsl), .2);
--link-color-30: hsla(var(--link-color-hsl), .3);
--link-color-40: hsla(var(--link-color-hsl), .4);
--link-color-50: hsla(var(--link-color-hsl), .5);
--link-color-60: hsla(var(--link-color-hsl), .6);
--link-color-70: hsla(var(--link-color-hsl), .7);
--link-color-80: hsla(var(--link-color-hsl), .8);
--link-color-90: hsla(var(--link-color-hsl), .9);
--link-color-warm: hsl(calc(var(--link-color-h) + 80), var(--link-color-s), var(--link-color-l));
--link-color-cold: hsl(calc(var(--link-color-h) - 80), var(--link-color-s), var(--link-color-l));
--link-color-low: hsl(var(--link-color-h), calc(var(--link-color-s) / 2), var(--link-color-l));
--link-color-lowest: hsl(var(--link-color-h), calc(var(--link-color-s) / 4), var(--link-color-l));
--link-color-light: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) / .9));
--link-color-dark: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) * .9));
}
.flex {
display: flex;
}
.flex > div {
flex: 1;
height: calc(100vw / 10);
}<h3>Color Manipulation (alpha)</h3>
<div class="flex">
<div style="background-color: var(--link-color-10)"></div>
<div style="background-color: var(--link-color-20)"></div>
<div style="background-color: var(--link-color-30)"></div>
<div style="background-color: var(--link-color-40)"></div>
<div style="background-color: var(--link-color-50)"></div>
<div style="background-color: var(--link-color-60)"></div>
<div style="background-color: var(--link-color-70)"></div>
<div style="background-color: var(--link-color-80)"></div>
<div style="background-color: var(--link-color-90)"></div>
<div style="background-color: var(--link-color)"></div>
</div>
<h3>Color Manipulation (Hue)</h3>
<div class="flex">
<div style="background-color: var(--link-color-warm)"></div>
<div style="background-color: var(--link-color)"></div>
<div style="background-color: var(--link-color-cold)"></div>
</div>
<h3>Color Manipulation (Saturation)</h3>
<div class="flex">
<div style="background-color: var(--link-color)"></div>
<div style="background-color: var(--link-color-low)"></div>
<div style="background-color: var(--link-color-lowest)"></div>
</div>
<h3>Color Manipulation (Lightness)</h3>
<div class="flex">
<div style="background-color: var(--link-color-light)"></div>
<div style="background-color: var(--link-color)"></div>
<div style="background-color: var(--link-color-dark)"></div>
</div>또한 루트 변수라는 기본적인 CSS 변수 지원을 제공하기 위해 CSS 프레임워크(아직 초기 단계)를 만들었습니다.
HSL 색상은 답을 제공하며, HSL 색상 값은 hsl(hue [0,255], 채도%, 밝기%)로 지정됩니다.
HSL은 IE9+, Firefox, Chrome, Safari 및 Opera 10+에서 지원됩니다.
a
{
color:hsl(240,65%,50%);
}
a.lighter
{
color:hsl(240,65%,75%);
}
을 합니다.filter순수 CSS 속성입니다.의 상세한 설명을 위하여filter부동산 기능은 이 멋진 기사를 읽었습니다.
저도 당신과 같은 문제가 있었는데, 그것을 사용해서 고쳤습니다.brightness의 기능을filter속성:
.my-class {
background-color: #18d176;
filter: brightness(90%);
}
이것은 오래된 질문이지만, 대부분의 답은 전처리기나 자바스크립트를 사용하여 작동해야 하거나, 요소의 색상뿐만 아니라 그 안에 포함된 요소의 색상에도 영향을 미칩니다.저는 같은 작업을 수행하는 일종의 복잡한 CSS 전용 방식을 추가할 것입니다.아마 앞으로는 CSS 기능이 더 발전하면서 더 쉽게 할 수 있을 것입니다.
이 아이디어는 다음을 사용하는 것을 기반으로 합니다.
- RGB 색상이므로 빨간색, 녹색 및 파란색에 대해 별도의 값이 있습니다.
- CSS 변수, 색상 값과 어둠을 저장합니다.
-
calc기능, 변경사항 적용.
기본적으로 어두움은 1(100% 일반 색상)이 되며, 0과 1 사이의 숫자를 곱하면 색이 더 어두워집니다.예를 들어 각 값에 0.85를 곱하면 색이 15% 더 어둡게 됩니다(100% - 15% = 85% = 0.85).
예를 들어, 세 개의 클래스를 만들었습니다..dark,.darker,그리고..darkest원래 색상을 각각 25%, 50%, 75% 어둡게 합니다.
html {
--clarity: 1;
}
div {
display: inline-block;
height: 100px;
width: 100px;
line-height: 100px;
color: white;
text-align: center;
font-family: arial, sans-serif;
font-size: 20px;
background: rgba(
calc(var(--r) * var(--clarity)),
calc(var(--g) * var(--clarity)),
calc(var(--b) * var(--clarity))
);
}
.dark { --clarity: 0.75; }
.darker { --clarity: 0.50; }
.darkest { --clarity: 0.25; }
.red {
--r: 255;
--g: 0;
--b: 0;
}
.purple {
--r: 205;
--g: 30;
--b: 205;
}<div class="red">0%</div>
<div class="red dark">25%</div>
<div class="red darker">50%</div>
<div class="red darkest">75%</div>
<br/><br/>
<div class="purple">0%</div>
<div class="purple dark">25%</div>
<div class="purple darker">50%</div>
<div class="purple darkest">75%</div>LESS에서는 다음 변수를 사용합니다.
@primary-color: #999;
@primary-color-lighter: lighten(@primary-color, 20%);
이렇게 하면 첫 번째 변수가 사용되고 20%(또는 다른 백분율)만큼 가벼워집니다.이 예에서 밝은 색은 다음과 같습니다.#ccc
좀 더 진한 색상을 원하신다면,rgba불투명도가 낮은 검은색:
rgba(0, 0, 0, 0.3);
가벼운 경우 흰색:
rgba(255, 255, 255, 0.3);
만약 당신이 http://compass-style.org/, 을 ass-based css 프레임워크로 사용하기로 결정한다면, 그것은 매우 유용합니다.darken()그리고.lighten()sass 함수는 동적으로 css를 생성합니다.매우 깨끗합니다.
@import compass/utilities
$link_color: #bb8f8f
a
color: $link_color
a:visited
color: $link_color
a:hover
color: darken($link_color,10)
생성하다
a {
color: #bb8f8f;
}
a:visited {
color: #bb8f8f;
}
a:hover {
color: #a86f6f;
}
변경만 필요한 경우background컬러, 이것은 미래를 대비한 훌륭한 접근법입니다 - 사용하기linear-gradient메소드 온background이미지!
아래 예를 확인해 보십시오.
document
.getElementById('colorpicker')
.addEventListener('change', function(event) {
document
.documentElement
.style.setProperty('--color', event.target.value);
});span {
display: inline-block;
border-radius: 20px;
height: 40px;
width: 40px;
vertical-align: middle;
}
.red {
background-color: red;
}
.red-darker {
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.25),
rgba(0, 0, 0, 0.25)
) red;
}
:root {
--color: lime;
}
.dynamic-color {
background-color: var(--color);
}
.dynamic-color-darker {
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.25),
rgba(0, 0, 0, 0.25)
) var(--color);
}<table>
<tr>
<td><strong>Static Color</strong></td>
<td><span class="red"></span></td>
<td><span class="red-darker"></span></td>
</tr>
<tr>
<td><strong>Dynamic Color</strong></td>
<td><span class="dynamic-color"></span></td>
<td><span class="dynamic-color-darker"></span></td>
</tr>
</table>
<br/>
Change the dynamic color: <input id="colorpicker" value="#00ff00" type="color"/>크레딧: https://css-tricks.com/css-custom-properties-theming/
제가 알기로는 CSS에서 이걸 할 수 있는 방법이 없습니다.
하지만 약간의 서버측 논리는 당신이 제안하는 대로 쉽게 할 수 있다고 생각합니다.CSS 스타일시트는 일반적으로 정적 자산이지만 서버 측 코드에 의해 동적으로 생성되지 못할 이유는 없습니다.서버측 스크립트는 다음과 같습니다.
- URL 매개 변수를 확인하여 사용자를 결정하고 따라서 사용자가 선택한 색상을 결정합니다.CSS를 캐시할 수 있도록 세션 변수가 아닌 URL 매개 변수를 사용합니다.
- 색상을 빨간색, 녹색 및 파란색 구성 요소로 구분합니다.
- 세 성분을 각각 설정된 양만큼 증가시킵니다.이것으로 실험해보고 원하는 결과를 얻습니다.
- 새 색상을 통합한 CSS 생성
이 CSS 생성 페이지에 대한 링크는 다음과 같습니다.
<link rel="stylesheet" href="http://yoursite.com/custom.ashx?user=1231">
.css 확장자를 사용하지 않는 경우 MIME 유형을 올바르게 설정하여 브라우저가 파일을 CSS로 해석할 수 있도록 해야 합니다.
(색을 밝게 하려면 RGB 값을 각각 올려야 함)
약간의 자바스크립트를 이용하여 rgb()를 이용하여 더 어둡고 밝은 색을 계산할 수 있습니다.
Fiddle : 별로 좋지는 않지만, 단지 예를 들어보기 위한 것입니다.
기본적으로 색상을 설정하고 10개의 간격을 두고 RGB의 양이 같은 20개의 색상을 선택하는 것입니다.
for (var i=-10; i < $('.row:eq(0) .block').length/2 ; i++) {
var r = 91;
var g = 192;
var b = 222;
$('.row:eq(1) .block:eq('+(i+10)+')').css('background' , color(r+(i*10),g+(i*10),b+ (i*10)) );
};
직접적으로는 안해, 안했어.그러나 colorschemedesigner.com 같은 사이트를 사용하면 기본 색상을 제공한 다음 기본 색상의 다양한 범위에 대한 16진수 및 RGB 코드를 제공할 수 있습니다.
사이트의 색상 구성표를 찾으면 색상에 대한 16진수 코드를 입력하고 스타일시트 상단의 주석 섹션에 이름을 지정합니다.
다른 색상표 생성기는 다음과 같습니다.
- http://www.colorschemer.com/online.html
- http://colorschemegenerator.com/
- http://www.cssjuice.com/25-popular-color-scheme-and-palette-generators/
이전 브라우저 호환성을 위해 강제로 사용해야 하는 경우 Collor를 사용하여 유사한 색 변형을 자동으로 선택할 수 있습니다.
예제(색상: #a9dB4):
RGBa('a'는 알파 투명도)를 사용할 수 있지만 아직 널리 지원되지는 않습니다.하지만 그렇게 될 것이므로 지금 바로 사용하고 폴백을 추가할 수 있습니다.
a:link {
color: rgb(0,0,255);
}
a:link.lighter {
color: rgb(128,128,255); /* This gets applied only in browsers that don't apply the rgba line */
}
a:link.lighter { /* This comes after the previous line, so has priority in supporting browsers */
color: rgba(0,0,255,0.5); /* last value is transparency */
}
저는 LESS나 SASS를 요구하지 않고 raw CSS3와 SVG를 사용하여 답변을 추가합니다.
기본적으로 글로벌 호버 효과를 위해 10%, 25%, 50% 더 밝거나 더 어둡게 색상을 만드는 경우 다음과 같은 SVG 데이터 호출을 생성할 수 있습니다.
:root{
--lighten-bg: url('data:image/svg+xml;utf8,<svg version="1.1" id="cssLighten" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"><rect opacity="0.2" fill="white" width="50" height="50"/></svg>') !important;
--darken-bg: url('data:image/svg+xml;utf8,<svg version="1.1" id="cssDarken" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"><rect opacity="0.2" fill="black" width="50" height="50"/></svg>') !important;
}
.myButton{
color: white;
background-color:blue;
}
.myButton:hover{
background-image: var(--lighten-bg);
}
어떤 이유에서인지는 모르겠지만 SVG에서는 "채움" 속성에 16진수 값을 입력할 수 없지만 "흰색"과 "검은색"은 제 요구를 충족시킵니다.
생각할 거리:이미지를 사용해도 괜찮으시다면 배경 이미지로 50% 투명한 PNG를 사용하시면 됩니다.화려하고 싶었으면 배경 이미지로 PHP 스크립트를 불러와 HEX와 OPACITY 값을 전달하고 위의 SVG 코드를 뱉어내도록 하세요.
아래 코드는 색상을 어둡게 하는 데 사용됩니다. 호버에서 50%만 변경하면 됩니다.
.button {
display: inline-block;
background-color: green;
}
.button:hover {
background-image: linear-gradient(rgb(0 0 0/50%) 0 0);
}
시도:
a {
color: hsl(240, 100%, 50%);
}
a:hover {
color: hsl(240, 100%, 70%);
}
이 모든 것을 종합해보면, 순수하게 DIV와 CSS로 이루어진 테이블 솔루션, 시도해보세요 ;) 브라우저는 RGBA 색상을 지원해야 하지만..
<head>
<style>
.colored-div-table {
display: table;
table-layout: fixed;
}
.colored-div-table #col {
display: table-column;
}
.colored-div-table #col:nth-child(odd) {
}
.colored-div-table #col:nth-child(even) {
}
.colored-div-table #col:nth-child(1){
background-color: lightblue;
width: 50px !important;
}
.colored-div-table #col:nth-child(2){
background-color: lightyellow;
width: 200px !important;
}
.colored-div-table #col:nth-child(3){
background-color: lightcyan;
width: 50px !important;
}
.colored-div-table #row {
display: table-row;
}
.colored-div-table #row div {
display: table-cell;
}
.colored-div-table #row div:nth-child(1) {
}
.colored-div-table #row div:nth-child(2) {
}
.colored-div-table #row div:nth-child(3) {
}
.colored-div-table #row:nth-child(odd) {
background-color: rgba(0,0,0,0.1)
}
.colored-div-table #row:nth-child(even) {
}
</style>
</head>
<body>
<div id="divtable" class="colored-div-table">
<div id="col"></div>
<div id="col"></div>
<div id="col"></div>
<div id="row">
<div>First Line</div><div>FL C2</div><div>FL C3></div>
</div>
<div id="row">
<div>Second Line</div><div>SL C2</div><div>SL C3></div>
</div>
<div id="row">
<div>Third Line</div><div>TL C2</div><div>TL C3></div>
</div>
<div id="row">
<div>Forth Line</div><div>FL C2</div><div>FL C3></div>
</div>
<div id="row">
<div>Fifth Line</div><div>FL C2</div><div>FL C3></div>
</div>
<div id="row">
<div>Sixth Line</div><div>SL C2</div><div>SL C3></div>
</div>
<div id="row">
<div>Seventh Line</div><div>SL C2</div><div>SL C3></div>
</div>
<div id="row">
<div>Eight Line</div><div>EL C2</div><div>EL C3></div>
</div>
<div id="row">
<div>Nineth Line</div><div>NL C2</div><div>NL C3></div>
</div>
<div id="row">
<div>Tenth Line</div><div>TL C2</div><div>TL C3></div>
</div>
</div>
</body>
늦었다는 것을 알지만, 다른 답변에서 말했지만 명확한 예시가 없는 것처럼, 당신은 당신의 버튼에 포장지를 사용하고 argba 색 기능 불투명도 수준을 변경할 수 있습니다.
여기 펜이 있습니다.
https://codepen.io/aronkof/pen/WzGmjR
#wrapper {
width: 50vw;
height: 50vh;
background-color: #AAA;
margin: 20px auto;
border-radius: 5px;
display: grid;
place-items: center;
}
.btn-wrap {
background-color: #000;
display: inline-block;
}
button {
transition: all 0.6s linear;
background-color: rgba(0, 255, 0, 1);
border: none;
outline: none;
color: #fff;
padding: 50px;
font-weight: 700;
font-size: 2em;
}
button:hover {
background-color: rgba(0, 255, 0, .5);
}<div id="wrapper">
<div class="btn-wrap">
<button class="btn">HEY!</buutton>
</div>
</div>(2013년) 한 시대에 뒤떨어진 간단한 대답은 색상 위에 50% 투명한 흰색 PNG를 사용하는 것이었습니다.
div {
background-color:red;
}
div:hover {
background-image:url('lighten.png');
}
여기서 light.png는 투명도가 50%인 흰색 채우기의 PNG입니다.
오늘날 이것을 할 수 있는 훨씬 더 좋은 방법들이 있습니다.이제 댓글을 그만 달았으면 좋겠습니다.
Ctford의 답변에 대한 제 의견을 보시기 바랍니다.
RGB 구성요소를 각각 가져다가 0xff를 더하고 2로 나누는 것이 색을 밝게 하는 가장 쉬운 방법이라고 생각합니다.원하는 정확한 결과가 나오지 않으면 0xff에서 현재 값을 곱한 값과 일정한 값을 뺀 값을 다시 현재 값에 더합니다.예를 들어 1/3을 흰색으로 이동하려면 (0xff - current)/3+current를 사용합니다.
어떤 결과가 나왔는지 확인하려면 그걸 가지고 놀아야 합니다.저는 이 간단한 공식으로 어두운 색을 잘 바래게 할 수 있을 정도로 큰 요인이 밝은 색을 완전히 하얗게 만드는 반면 밝은 색을 조금만 밝게 할 수 있을 정도로 작은 요인이 어두운 색을 충분히 밝게 하지 못하게 할 수도 있다고 걱정할 것입니다.
그래도 정해진 걸음 수보다는 거리의 일부를 흰색으로 가는 것이 더 유망하다고 생각합니다.
이 서버 쪽을 할 수 있는 PHP 클래스를 찾았습니다.저는 더 가벼워지거나 더 어두워질 필요가 있는 모든 것에 대해 인라인 CSS 컬러 스타일을 출력할 뿐입니다.잘 되네요.
http://www.barelyfitz.com/projects/csscolor/
(수업에서는 PEAR을 사용하여 오류를 던집니다만, 색상을 수정하기 위해 PEAR을 포함하고 싶지 않아서 PEAR 참조를 모두 제거했습니다.)
정적 메소드를 사용하여 정적 클래스로 변환하여 새로운 객체를 생성하지 않고도 직접 "lighten" & "darken" 함수를 호출할 수 있습니다.
샘플 사용량:
$original_color = 'E58D8D';
$lighter_color = Css::lighten($original_color, .7);
$darker_color = Css::darken($original_color, .7);
그color-mix()기능은 CSS 컬러 모듈 레벨 5 사양에 곧 추가될 예정입니다.두 가지 이상의 색상을 지정된 비율로 함께 혼합하는 것이 주된 목적입니다.지원을 확인합니다.
:root {
--primary-color: #FF9900;
--primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%);
--primary-color-light: color-mix(in srgb, var(--primary-color), white 20%);
}
.button {
background: var(--primary-color);
}
.button:hover {
background: var(--primary-color-dark);
}
언급URL : https://stackoverflow.com/questions/1625681/dynamically-change-color-to-lighter-or-darker-by-percentage-css
'programing' 카테고리의 다른 글
| 맨 왼쪽 테이블의 모든 행에 대해 맨 오른쪽 테이블에서 하나의 행만 반환 (0) | 2023.10.24 |
|---|---|
| 문자열 비교 시 악센트가 있는 문자 무시 (0) | 2023.10.24 |
| Visual Studio에서 디버깅하는 동안 Chrome 브라우저가 .css 파일을 강제로 다시 로드하도록 하는 방법은 무엇입니까? (0) | 2023.10.24 |
| 워드프레스 MYSQL 오류 (0) | 2023.10.24 |
| MySQL 보기만 볼 수 있고 다른 보기는 볼 수 없는 권한을 사용자에게 부여합니다. (0) | 2023.10.24 |