CSS
if parent has input that is checked
in a todo list, I wanted to cross out or strikethrough all children if the input was checked
<li class="task-list-item">
<input type="checkbox" disabled checked>
front page with growing sprout garden. flowers are clickable graph view?
</li>
li.task-list-item:has(input:checked){
opacity: .6;
text-decoration:line-through;
}
Centered header label with horizontal line on sides
[link](https://iqcode.com/code/css/css-technique-for-a-horizontal-line-with-icons-in-the-middle#:~:text=CSS technique for a horizontal line with icons,line-through%3B } View another examples Add Own solution)
check out the graph
and Table of Contents
labels in this screenshot
with the power of :before
& :after
you too can make this stylish "strike through" effect
p.icon-label{
color: #5e5e5e;
font-size: 1rem;
overflow: hidden;
text-align: center;
&:before,
&:after {
background-color: #5e5e5e;
content: "-";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
&:before {
right: 0.5em;
margin-left: -50%;
}
&:after {
left: 0.5em;
margin-right: -50%;
}
}
disable interaction and or click through element
very useful when hiding a top layer UI element with opacity = 0
pointer-events: none;
hide scrollbar on hover
[link](https://iqcode.com/code/css/hover-show-scrollbar-css#:~:text=hover show scrollbar css CPP div { height%3A,overflow%3A hidden%3B } div%3Ahover { overflow-y%3A scroll%3B })
div {
height: 100px;
width: 50%;
margin: 0 auto;
overflow: hidden;
}
div:hover {
overflow-y: scroll;
}
Fix word wrap indentation in list elements
CSS - Indenting the second line of LI (List Items) - Silva Web Designs
ul {
list-style: none;
width: 200px;
text-indent: -20px; /* MATCH key property */
margin-left: 20px; /* MATCH key property */
}
li { margin-bottom: 10px; }
Custom Scrollbar
How To Create a Custom Scrollbar (w3schools.com)
/* width */
::-webkit-scrollbar { width: 20px; }
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}
Code Pen Inspiration
- link
- link
- link
- link
- link
- Pure CSS 3D Synthesizer (mousedown for rotation) (codepen.io)%20(codepen.io))
Web Tools
how to really mask
Using CSS Masks to Create Jagged Edges | CSS-Tricks - CSS-Tricks
<div class="container">
<img src="...">
</div>
.container{
background-color: blue;
}
img {
mask-image: linear-gradient(
to bottom right,
white,
white 50%,
transparent 50%,
transparent),
linear-gradient(
to top,
transparent 30px,
black 30px,
white);
mask-size: 30px 30px, 100% 100%;
mask-repeat: repeat-x;
mask-position: left bottom;
display: block;
margin-bottom: 0.5em;
}