? ??? calc() ?? ??? ??? ???? CSS ??? ?? (0 ?? 1? ??)?? ??? ??? ???? ??? ?????. ??? CSS? ?? ?? ??? ????? ??? ??? ???? ?????? ?????.

calc() ???? CSS? ?? ??

??? ????

??? ?? ( --j )? ???? ?? ?????. 1?? ????.

 -notj : calc (1- var (-j));

--j ? 0?? --notj 1????. --j ? 1?? --notj ? 0???.

??? ??

? ????? ?? ?? ???? ?? ? ??? True? ?????. ??? ?? ( --k ? --i )? ?? ????? ?????.

 -? : calc (var (-k) * var (-i));

??? --k ? --i ?? 1 ? ?? 1? ?????. ??? ??? 0???.

NAND ?? (NOT ?)

NAND? ?????.

 -nand : calc (1- var (-k) * var (-i));

?? ??

??? ??? ????? ????? OR ??? ?????. De Morgan? ?? ( not (A or B) = (not A) and (not B) )? ???? : ??? ??? ????.

 -?? : calc (1- (1- var (-k)) * (1- var (-i));

?? ?? (OR)

OR? ??? ????.

 -nor : calc ((1- var (-k)) * (1- var (-i));

XOR ?? (?? ??)

??? ??? ????? ????? XOR? ?????. ??? ?? ??? ???? ??? 0 ?? 1 ??? ???? ?? ?? ?????.

 -xor : calc ((var (-k)-var (-i)) * (var (-k)-var (-i));

?? ?? ????

?? ??? ??? ??? ??? ????

? ??? ? ? ????? ? ??? ???? ? ?? ??? ??? ?????.

HTML (????) :

<div class="advanced">
  
</div>
<input type="checkbox" id="toggle">

CSS :

 ? {
  -K : var (-Wide, 0); / * ?? ?? ??? */
  ????? : Flex;
  ??? ?? : var (-Wide, ??);
  @Media (min-width : 768px) {-wide : 1; } / * ??? ?? ???? ??? ?? * /
}

.??? {
  --i : var (-enabled, 0); / * ??? ?? */
  -NOTI : calc (1- var (-i));
  ?? : ?? (calc (1- var (-noti) * 0.9)) ??? (calc (1- var (-noti) * 0.7);
  ??? ??? : var (-enabled, none);
  ?? : calc (var (-??) * 20px) 0; / * ?? ?? */
  ?? : calc (var (-??) * 200px); / * ?? ?? */
  [id = '??'] : ?? ~ & { -inabled : 1; }
  -?? : calc (1- (1- var (-k)) * (1- var (-i)); / * ?? ?? */
}

??? ?? ?? ( --or ? 1) ?? ??? ??? ? --k ( --i is 1).

3D ??? ?? (??? ?)

??? 3D ??? ???? ? ?? ?? ??? ?? ????? ?? ?? ??? ?? ??? ?????. ????? ??? ?? ???? ?????. ?? ????? ?? ??? ???? ??? ??? ??? ??? ?????. ?? ??? ???? ?????. calc() ? ??? ?? (? XOR, NAND, NOR)? ???? ??? ?? ??? ?? ??? ??? ?????.

? ??? CSS ??? ??? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!