CSS- make bottom element fade into element above it

Instead of having elements divided by a straight line, make them fade into each other with bottom element having these settings:

Top element also needs to have same overlay color (can mess around with the opacity to match both elements)

.stats-sec {
background-color: #2E2F3A;
opacity: .99; //so shadow blends in with the background color
box-shadow: 0 -15px 10px #2E2F3A; //so only top edge is blurred
height: 100px;
}

Comments

Post a Comment

Popular posts from this blog

Code Wars: Data Reverse (6 kyu)

Link to code challenge Code efficiency: Loops through string once (from the end) and with one new variable. String splicing- consider its efficiency? Try not to manipulate data when looping for efficiency. function dataReverse(data) { let arr = []; while (data.length) { arr.push(...data.splice(data.length - 8, data.length)); } return arr; }
Read more

Code Wars: longest_palindrome (6 kyu)

Link to code challenge Find the length of the longest substring in the given string s that is the same in reverse. As an example, if the input was “I like racecars that go fast”, the substring (racecar) length would be 7. If the length of the input string is 0, the return value must be 0. //Loop thru string and find longest substring that is also a palindrome //Efficiency- start with longest length first (each "outer" loop still looping to shorter //strings but done prior to "inner" loops which have longer strings- can be more efficient?) longestPalindrome=function(s){ if (s === "") return 0; else if (s.length === 1) return 1; let mainPointer = s.length; let subPointer = 0; let largest = 0; while (subPointer = 0) { //refactored- instead of pushing to new array let newString = s.slice(subPointer, mainPointer); //can this be refactored by comparing the two endpoints of the string but longer code? if ( newStr...
Read more

Code Wars: Find the odd int

https://www.codewars.com/kata/54da5a58ea159efa38000836/train/javascript Given an array, find the int that appears an odd number of times. There will always be only one integer that appears an odd number of times. function findOdd(A) {   let arr = A.sort((a,b) => a - b);   let counter = 1;     if (arr.length === 1) return arr[0];     for (let i = 0; i < arr.length - 1; i++) {         if (arr[i] === arr[i + 1]) {       counter++;     }     else if (arr[i] !== arr[i + 1]) {             if (counter % 2 !== 0) {         return arr[i];       }       // if it turns out to be last number in array with a count of 1 (since for loop doesnt get to it)       else if (i + 1 === arr.length - 1) {         return arr[i + 1];       }       count...
Read more