What I'm looking to achieve is each child having a diffrent color than the previous one (result would be gradient-like) by multiplying the color value with the child index.
Pseudo-code:
.parent > div:nth-child() {
background-color: rgb(index * 10, 255, 255);
}
As one of the solutions, you can assign values directly from JavaScript. But if you really want to manage this through CSS, then you can force the elements to set indexes using JS and CSS Variables and using calc() the necessary calculations in CSS rules.
Example below:
document.querySelectorAll('.parent > div').forEach((el, index) => el.style.setProperty('--custom-index', index));
.parent > div {
height: 50px;
width: calc(30px + 50px * (var(--custom-index) * 0.5));
margin-top: 5px;
background-color: rgb(calc(var(--custom-index) * 10), calc(var(--custom-index) * 40), calc(var(--custom-index) * 50));
}
<div class="parent">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
But if you delete or add elements, then in this case you will need to re-run the script provided in the JS example to recalculate.
NOTE: This answer does NOT use basic CSS, but rather shows an example of using a SASS #for loop to avoid handwriting each rule. If OP does not have GULP or another way to compile the SASS/SCSS, there are online compilers such as SassMeister or using CodePen, changing the settings on the CSS box to add a preprocessor:
And then viewing the compiled CSS:
#for $i from 1 to 12 {
.parent > div:nth-child( #{$i}) {
background-color: rgb($i * 20, 255, 255);
}
}
You can enter the total number of children as the last value (the 12 in this example. This will output:
.parent > div:nth-child(1) {
background-color: #14ffff;
}
.parent > div:nth-child(2) {
background-color: #28ffff;
}
.parent > div:nth-child(3) {
background-color: #3cffff;
}
.parent > div:nth-child(4) {
background-color: #50ffff;
}
.parent > div:nth-child(5) {
background-color: #64ffff;
}
.parent > div:nth-child(6) {
background-color: #78ffff;
}
.parent > div:nth-child(7) {
background-color: #8cffff;
}
.parent > div:nth-child(8) {
background-color: #a0ffff;
}
.parent > div:nth-child(9) {
background-color: #b4ffff;
}
.parent > div:nth-child(10) {
background-color: #c8ffff;
}
.parent > div:nth-child(11) {
background-color: #dcffff;
}
Related
I'm trying to assign different colors to similar items using an SCSS #for loop. Can I append the $i variable used in the #for loop to $color-?
<div>
<h1>Hello</h1>
<h1>World</h1>
<h1>Goodbye</h1>
</div>
$color-1: red;
$color-2: blue;
$color-3: yellow;
#for $i from 1 to 3 {
div>h1:nth-child(#{$i}) {
color: $color-{$i};
}
}
I don't know about dynamic variable names, but the standard way to achieve what you want is SCSS lists, over which you can iterate.
$colors-list: red blue yellow;
#each $current-color in $colors-list {
$i: index($colors-list, $current-color);
div>h1:nth-child(#{$i}) {
color: $current-color;
}
}
which compiles to
div > h1:nth-child(1) {
color: red;
}
div > h1:nth-child(2) {
color: blue;
}
div > h1:nth-child(3) {
color: yellow;
}
In an SCSS file, I've assigned a variable, $bgCol, to a shade of grey and I have six id selectors- each of whose background-color property is assigned to a multiple of the $bgCol. When I compile the SCSS file, I get an error message saying that the arithmetic computation operation (e.g. $bgCol * 1.5) is undefined.
The relevant html is:
<div class="container">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<div id="d6"></div>
</div>
The relevant sass code is (with error-producing line followed by a comment):
$bgCol: #111;
.container {
display:flex;
flex-wrap:wrap;
}
%abox {
width: 100px;
height: 100px;
background-color: $bgCol;
margin: 20px;
}
#d1 {
#extend abox;
background-color: $bgCol * 1.5; //this line produces the error on compilation; i imagine other id selectors with this multiplication computation would produce the same error
}
#d2 {
#extend abox;
background-color: $bgCol * 2.5;
}
#d3 {
#extend abox;
background-color: $bgCol * 3.5;
}
#d4 {
#extend abox;
background-color: $bgCol * 4.5;
}
#d5 {
#extend abox;
background-color: $bgCol * 5.5;
}
#d6 {
#extend abox;
background-color: $bgCol * 6.5;
}
The desired behavior is for each successive inner div to be a lighter shade of grey than the one before (i.e. the div w/ id 'd1' is the darkest, the div w/ id 'd2' is a bit lighter, and the div w/ id 'd6' is the lighest). How can I fix the error I get when compiling the SCSS file and get the desired color scheme?
You cannot simply do arithmetics on colors in SASS.
How about
#for $i from 1 through 6 {
#d#{$i} {
#extend abox;
background-color: scale-color($bgCol, $lightness: (($i + 0.5) * 10%));
}
}
This will expand into 6 selectors, from #d1 to #d6 each #extending the abox mixin and having a brighter background color as the ID increases.
Please note the differences between lighten and scale-color from the docs.
I wanna change the order of my elements (divs flex displayed) in mobile, the initial structure is already done but i found a difficulties to customize it to satisfy my needs in mobile, any help ?
The key issue here is that the flexbox order property, while powerful, can't turn a sibling element into a child element. Only javascript can do that.
Here is one approach that works using CSS flexbox and CSS #media queries but which employs javascript (rather than the flexbox order property) to move .div3 across the DOM, so that it becomes a child element of .child-container:
var narrowScreen = window.matchMedia("(max-width:600px)");
var screenIsNarrow = false;
var parentContainer = document.getElementsByClassName('parent-container')[0];
var childContainer = document.getElementsByClassName('child-container')[0];
var div1 = document.getElementsByClassName('div1')[0];
var div2 = document.getElementsByClassName('div2')[0];
var div3 = document.getElementsByClassName('div3')[0];
function checkScreenWidth() {
if ((narrowScreen.matches) && (screenIsNarrow === false)) {
childContainer.insertBefore(div3, div1);
childContainer.insertBefore(div2, div3);
screenIsNarrow = true;
}
else if ((!narrowScreen.matches) && (screenIsNarrow === true)) {
childContainer.insertBefore(div1, div2);
parentContainer.insertBefore(div3, childContainer);
parentContainer.insertBefore(childContainer, div3);
screenIsNarrow = false;
}
}
window.addEventListener('resize', checkScreenWidth, false);
window.addEventListener('load', checkScreenWidth, false);
.parent-container {
display: flex;
width: 90vw;
min-height: 200px;
font-size: 24px;
line-height: 200px;
text-align: center;
color: rgb(255, 255, 255);
}
.child-container {
display: flex;
flex: 1 0 74%;
padding: 24px 4vw;
margin-right: 1vw;
background-color: rgb(191,191,191);
}
.div1, .div2 {
flex: 1 1 45%;
margin: 3px 0.5vw;
background-color: rgb(83,83,83);
}
.div3 {
flex: 1 0 24%;
background-color: rgb(127,127,127);
}
#media only screen and (max-width:600px) {
.child-container {
display: inline-block;
}
.div1, .div2, .div3 {
margin: 6px;
}
}
<div class="parent-container">
<div class="child-container">
<div class="div1">One</div>
<div class="div2">Two</div>
</div>
<div class="div3">Three</div>
</div>
This question already has answers here:
White space around css3 scale
(12 answers)
Closed 7 years ago.
I have a little problem with scale transformation. I wish resize element, but when I do, my old size occupies the space, and the next element undergoes this old size. How to remove this constraints ?
HTML
<!-- White space with Scale -->
<div class="scale"></div>
<div class="scale"></div>
<!-- Whitout Scale -->
<div></div>
<div></div>
CSS
div:nth-of-type(even) { background: blue; }
div:nth-of-type(odd) { background: red; }
div {
width: 100px;
height: 100px;
}
.scale {
transform: scale(0.5);
transform-origin: top left;
}
JSFiddle: https://jsfiddle.net/c7d2s21y/
Thank you for your response.
var scaleTo = 0.5,
itemWidth = $('.scaleB').width(),
itemHeight = $('.scaleB').height()
;
function scaleThis(meausure) {
var output = meausure * scaleTo;
return output;
}
$('.scaleB').on({
'mouseover': function(event) {
$(this).css({
'width' : scaleThis(itemWidth) + 'px',
'height' : scaleThis(itemHeight) + 'px'
});
},
'mouseout': function(event) {
$(this).css({
'width' : itemWidth + 'px',
'height' : itemHeight + 'px'
});
}
});
.wrapper {
background-color: #cccccc;
}
.wrapper:after {
content: "normal";
}
.wrapperScale {
background-color: #dddddd;
}
.wrapperScale:after {
content: "wrapped";
}
.wrapper_jQuery:after {
content: "jQuery";
}
.wrapper div:nth-of-type(even),
.wrapperScale div:nth-of-type(even) {
background: blue;
}
.wrapper div:nth-of-type(odd),
.wrapperScale div:nth-of-type(odd) {
background: red;
}
.scale, .wrapperScale div, .scaleB {
width: 50px;
height: 50px;
}
.scale:hover, .wrapperScale:hover {
transform: scale(0.5);
transform-origin: top left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
<!-- White space with Scale -->
<div class="scale"></div>
<div class="scale"></div>
</div>
<!-- Whitout Scale -->
<div class="wrapper wrapperScale">
<div></div>
<div></div>
</div>
<!-- jQuery -->
<div class="wrapper wrapper_jQuery">
<div class="scaleB"></div>
<div class="scaleB"></div>
</div>
That's that CSS transformations actually do, it doesn't affect the surrounding elements, you can try to wrap the DIVs inside another element and apply the scaling to that element, but it will not affect other elements outside, just the contents, other than that, you will have to manipulate the actual sizes from your DIVs via java Script or a js library such as jQuery.
You try this code i hope work for you :
<style>
div:nth-of-type(even) { background: blue; }
div:nth-of-type(odd) { background: red; }
div {
width: 100px;
height: 100px;
}
.scale {
transform: scale(1);
transform-origin: top left;
}
</style>
How to properly declare the sass statement to produce the output css in comment ?
.formModal{
.modal-body{
.inputTextWrap{
/*
.modal-body > .inputTextWrap:first-child {
background:violet;
}
*/
}
}
}
Try this:
.formModal{
.modal-body{
.inputTextWrap{
#at-root .modal-body > .inputTextWrap:first-child{
background: violet; //Remember you need a space after the:
};
}
}
}
You can check stuff like this on sassmeister