All geek questions in one place

Inherit color from parent and do color shading in CSS

Is there a way in CSS to accept the active color defined by the CSS class and either darken or lighten the color that will be used in another CSS class?

DEVELOPMENT SCENARIO:
We have a dialog that uses a CSS style that defines its color as a shade of gray. In dailog, we have buttons that use 2 different CSS styles that mimic the up button and button states.

Is it possible to use a CSS style style to use the color of the dialog, but it will be darkened or lit for the appearance of the button. The front of the button should be lighter than the main color of the dialog, and use lighter and darker colors for the borders that give the appearance of a three-dimensional button.

TASK:
If we change the color of the dialog, the buttons will also change without having to make any code changes to the 2 CSS styles that are used to display the up and down states for the button.


I suppose there is a way to do this in JavaScript, but is there a way in CSS to do this?

+3
source share
5 answers

opacity, , . ( CSS), . , () CSS , 50%:

.show-50 { -khtml-opacity:.50; -moz-opacity:.50; -ms-filter:"alpha(opacity=50)"; filter:alpha(opacity=50); opacity:.50; zoom:1; }

BTW, , Opacity, jQuery, . , CSS .:-) , "zoom: 1" , , "", IE. , .

PNG, , , . PNG-fix IE6.

, ( ):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <style type="text/css">
        .button { background-color:green; height:30px; width:100px; border: solid 1px red; color:#FFF; margin:20px; text-align:center;  }
        .buttonText { height:30px; width:100px;  color:#FFF; margin:20px; text-align:center;  }
        .show-50 { -khtml-opacity:.50; -moz-opacity:.50; -ms-filter:"alpha(opacity=50)"; filter:alpha(opacity=50); opacity:.50; zoom:1; } 
        .lighter { background-color:#CCCCCC; height:100%; width:100%; }
        .darker { background-color:#000000; height:100%; width:100%;}
        .whitetext {color:#fff; height:100%; width:100%; padding-top:6px;}
        .moveText {margin-top:-52px; color:#fff; padding-top:6px; z-index: 10; }
    </style>
</head>
<body>
 <div class="button"></div>
 <div class="buttonText moveText">Regular button</div>
 <div class="button"><div class="show-50 lighter"></div></div>
 <div class="buttonText moveText">Lighter button</div>
 <div class="button"><div class="show-50 darker"></div></div>
 <div class="buttonText moveText">Darker button</div>
</body>
</html>

IE8 ( ). FF Safari , , . , DIV, IE, , FF Safari. , , . , , , .

+3

LESS? :

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header { color: @light-blue; }

LESS , , , , ( JavaScript , ).

+1

css PHP . , , , . :

<?php
//adjust brightness by taking a value between -255 and 255
function brightness($color, $brightness){
   if(!$color) return false;
   $c = trim($color);
   $c = str_replace('#','', $c);
   $l = strlen($c) == 3 ? 1 : (strlen($c) == 6 ? 2 : false);

   if($l){
     $rgb[0] = hexdec(substr($c, 0,1*$l)) + $brightness;
     $rgb[1] = hexdec(substr($c, 1*$l,1*$l)) + $brightness;
     $rgb[2] = hexdec(substr($c, 2*$l,1*$l)) + $brightness;



    }else{
      return false;
    }

    $out = '#';
    for($i = 0; $i<3; $i++)
      $rgb[$i] = dechex(($rgb[$i] <= 0)?0:(($rgb[$i] >= 255)?255:$rgb[$i]));

    for($i = 0; $i<3; $i++)
      $out .= ((strlen($rgb[$i]) < 2)?'0':'').$rgb[$i];

   return $out;
}

// Color Setup
$myColor = "#3399CC";
$myLighterColor = brightness($myColor, "50");
$myDarkerColor = brightness($myColor, "-50");


// Include this if using a seperate style sheet
// header("Content-Type: text/css");
?>
<style type="text/css">
  body {
    background-color:<?=$myLighterColor;?>;
  }

  #div1 {
    background-color:<?=$myColor;?>;
    border: 1px solid <?=$myDarkerColor?>;
  }
</style>
0

CSS . SASS http://sass-lang.com, .

0

Or you can just use the background image. One black (this is enough with one pixel image) with an opacity set to twenty or something else, and one white is also set to about 20.

0
source

Source: https://habr.com/ru/post/1722808/

More articles:


All Articles