The paragraph is green. Why?

I came across this sort of “CSS riddle” recently.

It goes something like this.

Given this CSS definition,

body {
  max-width: 28em;
  margin: auto;
  padding: 1em;
}

html {
  --color: green;
}

body {
  color: yellow;
}

p {
  --color: inherit;
  color: red;
  color: var(--color, blue);
}

what would be the color of the <p> element?

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut. Integer quis massa ut lacus viverra pharetra in eu lacus. Aliquam tempus odio adipiscing diam pellentesque rhoncus. Curabitur a bibendum est. Mauris vehicula cursus risus id luctus. Curabitur accumsan venenatis nibh, non egestas ipsum vulputate ac. Vivamus consectetur dolor sit amet enim aliquet eu scelerisque ipsum hendrerit. Donec lobortis suscipit vestibulum. Nullam luctus pellentesque risus in ullamcorper. Nam neque nunc, mattis vitae ornare ut, feugiat a erat. Ut tempus iaculis augue vel pellentesque.</p>

Source: https://codepen.io/shshaw/pen/wvJmOOq

ANSWER

The output color is Green. As if the title wasn’t a giveaway.

Try it out yourself too.

Here is an explanation: https://twitter.com/SelenIT2/status/1400832345016606722

Quoting from that Tweet:

It does inherit it. But then the color gets overridden with the inherited value of the *custom property* named `–color`, which doesn’t know anything about the actual `color` property and gets independently inherited all the way down from `html`

Can’t copy text from webpage?

Sometimes I come upon a website that I cannot copy text from a HTML web page. Simply cannot click and highlight the lines I try to select for copying. I thought that my browser/mouse was not working. But I go to other sites, I am able to highlight/copy normally. They must’ve done something on that page probably to prevent content from being lifted of the page easily?

Why is this and how do they do it? Is this a javascript in the page that prevents me from copying?

ANSWER

Could be a script on the webpage. I’m certain that can be done or already been done through Javascript before.

I know that the same effect can be achieved via CSS alone. It is easier, cleaner and does not add to another Javascript messing up or slowing down a site. I prefer this method over the other.

Below are the CSS lines that does what you want. Different ones for different browsers. It is vendor specific for some, but does the same exact thing.

   user-select: none; /* Supported by Chrome, Firefox & Opera */
  -moz-user-select: none; /* Firefox (older) */
  -ms-user-select: none; /* Edge */
  -khtml-user-select: none; /* Konqueror */
  -webkit-touch-callout: none; /* Safari for iOS */
  -webkit-user-select: none; /* Safari for Mac */

Try it out. You can make it for entire page/site.

* {
     /* CSS lines go here */
}

Or you can make it so only targeted content will have it using Class or ID selectors.

#text-no-select {
     /* ID selector -  CSS lines go here */
}

.text-no-select {
     /* Class selector -  CSS lines go here */
}

Be aware this does not totally prevent anyone from copying content on a website. There are many other ways to go around this or even with a Javascript impementation. It is a minor roadblock.

Unique clipping mask inward of a div

I’m trying to determine how to add a unique kind of clipping mask that doesn’t appear to be in clippy. I’ve created a basic demo below which kind of resembles what I’m trying to achieve:

#test {
  width: 300px;
  height: 300px;
  background: pink;
  position: relative;
}

#circle {
  border-radius: 50%;
  background: white;
  width: 100px;
  height: 300px;
  position: absolute;
  left: 85%;
  top: 0;
}
<div id='test'>
<div id='circle'>

</div>
</div>

Essentially I’m trying to get a mask on the left of a div, so in this demo I’ve just created a circle and placed it over it to demonstrate what I’m trying to achieve.

Does anyone have any actual workaround for this? Thanks for the help

JS Fiddle: https://jsfiddle.net/mo823e4c/

Go to Source
Author: user8758206

How to have a sliding animation from the bottom to the top with CSS?

I’ve spent the past hour trying to find a way to get a sliding animation from bottom to top using only CSS. It’s supposed to be a test tube with fluid filling it. (This is what I want it to look like), however during the animation it overflows around the edges at the bottom and doesn’t sit flush (like this).

HTML & CSS:

.testTube #border {
  width: 40px;
  height: 150px;
  margin-top: 15px;
  background-color: white;
  border: 2px solid black;
  border-radius: 5px 5px 25px 25px;
  position: absolute;
}

.testTube #fluidLeft {
  width: 20px;
  height: 100px;
  margin-left: 2px;
  background-color: #ff007f;
  border-radius: 0% 0% 0% 25px;
  position: absolute;
  animation-name: fluid;
  animation-direction: normal;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.testTube #fluidRight {
  width: 20px;
  height: 0px;
  margin-left: 22px;
  background-color: #ff1a8c;
  border-radius: 0% 0% 25px 0%;
  position: absolute;
  animation-name: fluid;
  animation-direction: normal;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes fluid {
  from {
    height: 0px;
    margin-top: 167px;
  }
  to {
    height: 100px;
    margin-top: 67px;
  }
}
<div class="testTube">
  <div id="border"></div>
  <div id="fluidLeft"></div>
  <div id="fluidRight"></div>
</div>

Go to Source
Author: Steven Jamieson