Develop Reference

I want to create triangle using CSS and want to fill color inside it using inset How to do that??? Please Answer

I want to create triangle using CSS and want to fill color inside it using inset How to do that??? Please Answer....
*{
margin: 0;
padding: 0;
}
body{
background: linear-gradient(15deg, #00ffff, #004680);
background-position: cover;
background-repeat: no-repeat;
overflow: hidden;
width: 100vw;
height: 100vh;
}
.bubble{
position: absolute;
top: 40vh;
width: 150px;
height: 150px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 50%;
box-shadow: inset 0 0 10px #fff, inset -10px 10px 15px #020131,
inset 5px 5px 10px #960101, inset -5px 5px 20px #fff,
inset 15px -25px 20px #9224ed;
}
//I want to create triangle using CSS and want to fill color inside it using inset How to do //that??? Please Answer....
.bubble-two{
box-shadow: inset 0 0 10px #fff, inset -10px 10px 15px #06f3df,
inset 5px 5px 10px #f8e63e, inset -5px 5px 20px #fff,
inset 15px -25px 20px #ed24aa;
}
.bubble-three {
box-shadow: inset 0 0 10px #010631, inset -10px 10px 15px #1512f3,
inset 5px 5px 10px #f8e63e, inset -5px 5px 20px #fff,
inset 15px -25px 20px #33114e;
}
.bubble-four{
box-shadow: inset 0 0 10px #8b0101, inset -10px 10px 15px #f6f6fc,
inset 5px 5px 10px #81f733, inset -5px 5px 20px #fff,
inset 15px -25px 20px #0b0822;
}
.bubble-five{
box-shadow: inset 0 0 10px #fff, inset -10px 10px 15px #100dee,
inset 5px 5px 10px #f7a120, inset -5px 5px 20px #fff,
inset 15px -25px 20px #ed24c1;
}
.score-board{
background: #fff;
width: 300px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px 20px 0 0;
position: absolute;
bottom: 0;
left:calc(50% - 150px) ;
}
.loser {
display: none;
}
.winner {
display: none;
}
.main-game{
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
button.start-btn{
font-size: 20px;
border: none;
margin-top: 8px;
border-radius: 30px;
font-weight: bold;
height: 30px;
width: 5%;
margin: 8px auto;
}
.shadow{
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.6);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
position: relative;
}
.total-score{
background: #fff;
padding: 10px 100px 40px;
border-radius: 10px;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}
<div class="bubble bubble-one"></div>
I want to create triangle using CSS and want to fill color inside it using inset How to do that??? Please Answer....

The circle is formed by using border-radius of 50%.
If you remove that and instead put in a clip-path which has value of a polygon with 3 coordinates then you get a triangle, as in this snippet.
Obviously you will want to experiment with how the colors are placed and also what angle and size/ratios you want to apply to the various triangles.
* {
margin: 0;
padding: 0;
}
body {
background: linear-gradient(15deg, #00ffff, #004680);
background-position: cover;
background-repeat: no-repeat;
overflow: hidden;
width: 100vw;
height: 100vh;
}
.bubble {
position: absolute;
top: 40vh;
width: 150px;
height: 150px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
/*border-radius: 50%; */
box-shadow: inset 0 0 10px #fff, inset -10px 10px 15px #020131, inset 5px 5px 10px #960101, inset -5px 5px 20px #fff, inset 15px -25px 20px #9224ed;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.bubble-two {
box-shadow: inset 0 0 10px #fff, inset -10px 10px 15px #06f3df, inset 5px 5px 10px #f8e63e, inset -5px 5px 20px #fff, inset 15px -25px 20px #ed24aa;
}
.bubble-three {
box-shadow: inset 0 0 10px #010631, inset -10px 10px 15px #1512f3, inset 5px 5px 10px #f8e63e, inset -5px 5px 20px #fff, inset 15px -25px 20px #33114e;
}
.bubble-four {
box-shadow: inset 0 0 10px #8b0101, inset -10px 10px 15px #f6f6fc, inset 5px 5px 10px #81f733, inset -5px 5px 20px #fff, inset 15px -25px 20px #0b0822;
}
.bubble-five {
box-shadow: inset 0 0 10px #fff, inset -10px 10px 15px #100dee, inset 5px 5px 10px #f7a120, inset -5px 5px 20px #fff, inset 15px -25px 20px #ed24c1;
}
.score-board {
background: #fff;
width: 300px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px 20px 0 0;
position: absolute;
bottom: 0;
left: calc(50% - 150px);
}
.loser {
display: none;
}
.winner {
display: none;
}
.main-game {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
button.start-btn {
font-size: 20px;
border: none;
margin-top: 8px;
border-radius: 30px;
font-weight: bold;
height: 30px;
width: 5%;
margin: 8px auto;
}
.shadow {
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.6);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
position: relative;
}
.total-score {
background: #fff;
padding: 10px 100px 40px;
border-radius: 10px;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}
<div class="bubble bubble-one"></div>

How do i translate a tab css from tab 1 to tab 2?

How do i translate tab 1 Neumorphic css to tab 2 when I click on tab 2 like the example below like sliding from tab 1 to tab 2?
https://dribbble.com/shots/10805627-Neumorphic-Tab
import styled from 'styled-components';
const PostsTabWrapper = styled.div`
.react-tabs {
width: 100%;
font-size: 20px;
font-weight: 500;
#media (max-width: 768px) {
font-size: 16px;
}
}
.react-tabs__tab-list {
margin: 0 25px 20px 25px;
background: 3af740;
border-radius: 10px;
padding: 10px;
box-shadow:
inset 0 0 15px rgba(55, 84, 170,0),
inset 0 0 20px rgba(255, 255, 255,0),
7px 7px 15px rgba(55, 84, 170,.15),
-7px -7px 20px rgba(255, 255, 255,1),
inset 0px 0px 4px rgba(255, 255, 255,.2);
}
.react-tabs__tab {
display: inline-block;
position: relative;
list-style: none;
padding: 16px 24px;
cursor: pointer;
}
.react-tabs__tab--selected {
border-radius: 10px;
box-shadow:
inset 7px 7px 15px rgba(55, 84, 170,.15),
inset -7px -7px 20px rgba(255, 255, 255,1),
0px 0px 4px rgba(255, 255, 255,.2);
transition: 0.4s ease-in-out;
}
.react-tabs__tab--disabled {
// color: GrayText;
cursor: default;
}
.react-tabs__tab:focus {
// box-shadow: 0 0 5px hsl(208, 99%, 50%);
// border-color: hsl(208, 99%, 50%);
// outline: none;
}
.react-tabs__tab:focus:after {
content: "";
position: absolute;
height: 5px;
left: -4px;
right: -4px;
bottom: -5px;
// background: #fff;
}
.react-tabs__tab-panel {
display: none;
}
.react-tabs__tab-panel--selected {
display: block;
}
`;
export default PostsTabWrapper

check when you click on the input then you do translateX(distance)
for exemple :
input{
&.active {
background: #7395D2;
color: #7395D2;
#swipe{
transform: translateX(120px);
background: #C6CEF6;
}
}
}

How to change the color of a span tag dynamically?

I am trying to build a slider. The Slider has a range of between 0 and 30 jumping 10 steps each time, so: 0, 10, 20, 30. At each of these 4 levels I've placed an empty circle. Currently, whenever I click on a level on the slider, the relevant part of the slider is painted in the expected colour. For example, a click on level 10, means the slider is painted in the given colour from 0-10. What I'm now trying to do is, getting the circles within a clicked level to have the same colour too, for instance I click level 10, and get circles placed at 0 and 10 to have the same colour too. I have the following code, that I've so far worked on:
function sliderVal(range){
var nodes=document.getElementsByClassName("dot");
for (let i=0;i<nodes.length;i++){
nodes[i].style.backgroundColor = "#DADDe3";
}
for (let i=0;i<range;i++){
console.log(nodes[i].id)
nodes[i].style.backgroundColor = "#84b7e3";
}
}
input[type=range] {
width: 100%;
margin: 3.9px 0;
}
input[type="range"]:focus {
outline: none;
}
input[type="range"]{
-webkit-appearance: none;
-moz-apperance: none;
border-radius: 11px;
height: 11px;
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.15, #84b7e3),
color-stop(0.15, #DADDe3)
);
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
/*background-color: #E9E9E9;*/
/*border: 1px solid #CECECE;**/
box-shadow: 0px 0px 0.5px #000000, 0px 0.6px 1px #0d0d0d;
border: 0px solid #000000;
width: 20.035px;
border-radius: 50px;
background: #3072ac;
cursor: pointer;
margin-top: 0px;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 11px;
cursor: pointer;
box-shadow: 0.2px 0.2px 0px rgba(0, 0, 0, 0), 0px 0px 0.2px rgba(13, 13, 13, 0);
background: #DADDe3;
border-radius: 1.3px;
border: 0px solid #010101;
}
input[type="range"]::-moz-range-progress {
height: 11px;
background-color: #84b7e3;
}
input[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 0.5px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 18px;
width: 18px;
border-radius: 50px;
background: #3072ac;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 11px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #6fabde;
border: 0px solid #010101;
border-radius: 2.6px;
box-shadow: 0.2px 0.2px 0px rgba(0, 0, 0, 0), 0px 0px 0.2px rgba(13, 13, 13, 0);
}
input[type=range]::-ms-fill-upper {
background: #84b7e3;
border: 0px solid #010101;
border-radius: 2.6px;
box-shadow: 0.2px 0.2px 0px rgba(0, 0, 0, 0), 0px 0px 0.2px rgba(13, 13, 13, 0);
}
input[type=range]::-ms-thumb {
box-shadow: 0px 0px 0.5px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 18px;
width: 18px;
border-radius: 50px;
background: #3072ac;
cursor: pointer;
height: 11px;
}
input[type=range]:focus::-ms-fill-lower {
background: #84b7e3;
}
input[type=range]:focus::-ms-fill-upper {
background: #99c3e8;
}
.dot {
height: 20px;
width: 20px;
background-color: #DADDe3;
border-radius: 50%;
display: inline-block;
}
#slider1{
position:absolute;
top: 77%;
left: 0%;
}
#slider2{
position:absolute;
top: 77%;
left: 10%;
}
#slider3{
position:absolute;
top: 77%;
left: 20%;
}
#slider3{
position:absolute;
top: 77%;
left: 30%;
}
<div class="slidecontainer" style="position: relative">
<input style="position: absolute" type="range" min="0" max="30" value="0" step="10" class="slider" id="myRange" onClick="sliderVal('value/10')">
<span class="dot" id="slider1" ></span>
<span class="dot" id="slider2" ></span>
<span class="dot" id="slider3"></span>
<span class="dot" id="slider4" ></span>
</div>
Unfortunately my clicklistener in the js file is not doing its job and the circles don't change their colour. As you can see, to create circles I used an empty span tag. I am completely new to HTML/Javascript and have the feeling I could/should have used something other than the span tag for what I want. Is there a way to make these span tags change their background color by modifying the above code? or should I use something else (maybe a circle icon or something) for that purpose? I know this isn't an original question. But answers to similar questions I found at Change color of span tag depending on value and also w3schools at https://www.w3schools.com/js/js_htmldom_css.asp didn't really help so far. Any suggestions?

So you need to change the onClick to onchange notice all lowercase which is the html property name for the event handler and then pass the function with the value as this.value so you'll end up with:
<div class="slidecontainer" style="position: relative">
<input style="position: absolute" type="range" min="0" max="30" value="0" step="10" class="slider" id="myRange" onchange="sliderVal(this.value/10)">
<span class="dot" id="slider1" ></span>
<span class="dot" id="slider2" ></span>
<span class="dot" id="slider3"></span>
<span class="dot" id="slider4" ></span>
</div>
and js
function sliderVal(range){
var nodes=document.getElementsByClassName("dot");
for (let i=0;i<nodes.length;i++){
nodes[i].style.backgroundColor = "#DADDe3";
}
for (let i=0;i<range;i++){
console.log(nodes[i].id)
nodes[i].style.backgroundColor = "#84b7e3";
}
}
Working DEMO

Here is really working dynamic example with change on slide:
function sliderVal(range){
var nodes=document.getElementsByClassName("dot");
for (let i=0;i<nodes.length;i++){
nodes[i].style.backgroundColor = "#DADDe3";
}
for (let i=0;i<range;i++){
console.log(nodes[i].id)
nodes[i].style.backgroundColor = "#84b7e3";
}
}
input[type=range] {
width: 100%;
margin: 3.9px 0;
}
input[type="range"]:focus {
outline: none;
}
input[type="range"]{
-webkit-appearance: none;
-moz-apperance: none;
border-radius: 11px;
height: 11px;
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.15, #84b7e3),
color-stop(0.15, #DADDe3)
);
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
/*background-color: #E9E9E9;*/
/*border: 1px solid #CECECE;**/
box-shadow: 0px 0px 0.5px #000000, 0px 0.6px 1px #0d0d0d;
border: 0px solid #000000;
width: 20.035px;
border-radius: 50px;
background: #3072ac;
cursor: pointer;
margin-top: 0px;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 11px;
cursor: pointer;
box-shadow: 0.2px 0.2px 0px rgba(0, 0, 0, 0), 0px 0px 0.2px rgba(13, 13, 13, 0);
background: #DADDe3;
border-radius: 1.3px;
border: 0px solid #010101;
}
input[type="range"]::-moz-range-progress {
height: 11px;
background-color: #84b7e3;
}
input[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 0.5px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 18px;
width: 18px;
border-radius: 50px;
background: #3072ac;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 11px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #6fabde;
border: 0px solid #010101;
border-radius: 2.6px;
box-shadow: 0.2px 0.2px 0px rgba(0, 0, 0, 0), 0px 0px 0.2px rgba(13, 13, 13, 0);
}
input[type=range]::-ms-fill-upper {
background: #84b7e3;
border: 0px solid #010101;
border-radius: 2.6px;
box-shadow: 0.2px 0.2px 0px rgba(0, 0, 0, 0), 0px 0px 0.2px rgba(13, 13, 13, 0);
}
input[type=range]::-ms-thumb {
box-shadow: 0px 0px 0.5px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 18px;
width: 18px;
border-radius: 50px;
background: #3072ac;
cursor: pointer;
height: 11px;
}
input[type=range]:focus::-ms-fill-lower {
background: #84b7e3;
}
input[type=range]:focus::-ms-fill-upper {
background: #99c3e8;
}
.dot {
height: 20px;
width: 20px;
background-color: #DADDe3;
border-radius: 50%;
display: inline-block;
}
#slider1{
position:absolute;
top: 77%;
left: 0%;
}
#slider2{
position:absolute;
top: 77%;
left: 10%;
}
#slider3{
position:absolute;
top: 77%;
left: 20%;
}
#slider3{
position:absolute;
top: 77%;
left: 30%;
}
<div class="slidecontainer" style="position: relative">
<input style="position: absolute" type="range" min="0" max="30" value="0" step="10" class="slider" id="myRange" oninput="sliderVal(Math.trunc(this.value/10))" onchange="sliderVal(Math.trunc(this.value/10))">
<span class="dot" id="slider1" ></span>
<span class="dot" id="slider2" ></span>
<span class="dot" id="slider3"></span>
<span class="dot" id="slider4" ></span>
</div>

How to make parent element to be the size of the child element?

I have iframe inside div element:
<div id="toolbarArea" class="toolbarArea" data-Date="11/2016">
<img id="toolbarTitle" width="15px" height="15px" src="../stdicons/derem/threePoints.png">
<iframe id="frTools" style="width:94%%;height:90%%;top:0px; position: absolute;" name="tbFrame" src="/container/serol/chegsorc.aspx?LOCALE=en" frameBorder="0"></iframe>
</div>
.toolbarArea{
background-color:#ffffff;
width:450px;
position:relative;
z-index:100;
height:30px;
border: solid 1px #333;
-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
}
I get scroll on the div,
how to make parent element to be the size of the child element to prevent the sccroll appereance.

You can prevent the scroll appearance with this:
width: auto;
height: auto;
overflow: hidden;

You need to use one of float: left/right or display: inline/inline-block for parent to be same width as it's content
#toolbarArea {
background-color: #aaa;
position: relative;
display: inline-block;
border: solid 1px #333;
-webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
}
#toolbarTitle {
width: 15px;
height: 15px;
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
#frTools {
width:94%;
height:90%;
}
<div id="toolbarArea" class="toolbarArea" data-Date="11/2016">
<img id="toolbarTitle" src="../stdicons/derem/threePoints.png">
<iframe id="frTools" name="tbFrame" src="/container/serol/chegsorc.aspx?LOCALE=en"></iframe>
</div>
Please note that your iFrame css is not valid, as 94%% must be 94% and so on.

Removing the width and height from the class toolbarArea should do the trick :
.toolbarArea {
background-color: #ffffff;
position: relative;
z-index: 100;
border: solid 1px #333;
-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
}

I have a blinking box, how can I add a gradient to this or program it easier?

I was trying to figure out how to get a blinking box, and as I did not really find a solution on the net, I was fiddling around a bit.
I came up with the following, this works fine in general. My question is simply a) if there is an easier way to do this, and b) if I can program it in a way that it increases / decreases by gradient, instead of me having to program so many classes and stuff like that.
See this code in action: http://jsfiddle.net/ZUJ5b/7/
html
<div id="test" class="test">Hello</div>
jQuery
$(document).ready(function () {
setInterval(blink, 75);
});
function blink() {
if ($('#test').hasClass("test")) {
$("#test").removeClass('test').addClass('test1');
} else if($('#test').hasClass("test1")) {
$("#test").removeClass('test1').addClass('test2');
} else if($('#test').hasClass("test2")) {
$("#test").removeClass('test2').addClass('test3');
} else if($('#test').hasClass("test3")) {
$("#test").removeClass('test3').addClass('test5');
} else if($('#test').hasClass("test4")) {
$("#test").removeClass('test4').addClass('test5');
} else if($('#test').hasClass("test5")) {
$("#test").removeClass('test5').addClass('test6');
} else if($('#test').hasClass("test6")) {
$("#test").removeClass('test6').addClass('test7');
} else {
$("#test").removeClass('test7').addClass('test');
}
}
CSS
.test {
padding: 20px;
width: 100px;
border: 1px #ED0 outset;
box-shadow: 0px 0px 6px 1px #FE4;
-moz-box-shadow: 0px 0px 6px 1px #FE4;
-webkit-box-shadow: 0px 0px 6px 1px #FE4;
}
.test1 {
padding: 20px;
width: 100px;
border: 1px #EED000 outset;
box-shadow: 0px 0px 6px 1px #FFE544;
-moz-box-shadow: 0px 0px 6px 1px #FFE544;
-webkit-box-shadow: 0px 0px 6px 1px #FFE544;
}
.test2 {
padding: 20px;
width: 100px;
border: 1px #EEC300 outset;
box-shadow: 0px 0px 7px 2px #FFDD44;
-moz-box-shadow: 0px 0px 7px 2px #FFDD44;
-webkit-box-shadow: 0px 0px 7px 2px #FFDD44;
}
.test3 {
padding: 20px;
width: 100px;
border: 1px #EEB600 outset;
box-shadow: 0px 0px 7px 2px #FFD444;
-moz-box-shadow: 0px 0px 7px 2px #FFD444;
-webkit-box-shadow: 0px 0px 7px 2px #FFD444;
}
.test4 {
padding: 20px;
width: 100px;
border: 1px #EA0 outset;
box-shadow: 0px 0px 8px 3px #FFCC44;
-moz-box-shadow: 0px 0px 8px 3px #FFCC44;
-webkit-box-shadow: 0px 0px 8px 3px #FFCC44;
}
.test5 {
padding: 20px;
width: 100px;
border: 1px #EEB600 outset;
box-shadow: 0px 0px 7px 2px #FFD444;
-moz-box-shadow: 0px 0px 7px 2px #FFD444;
-webkit-box-shadow: 0px 0px 7px 2px #FFD444;
}
.test6 {
padding: 20px;
width: 100px;
border: 1px #EEC300 outset;
box-shadow: 0px 0px 7px 2px #FFDD44;
-moz-box-shadow: 0px 0px 7px 2px #FFDD44;
-webkit-box-shadow: 0px 0px 7px 2px #FFDD44;
}
.test7 {
padding: 20px;
width: 100px;
border: 1px #EED000 outset;
box-shadow: 0px 0px 6px 1px #FFE544;
-moz-box-shadow: 0px 0px 3px 1px #FFE544;
-webkit-box-shadow: 0px 0px 3px 1px #FFE544;
}

Wow! You're dedicated! There are much easier ways to animate with css. Check out CSS transitions (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions)

It is pretty easy with css transitions (but only for new versions of browser)
Here is demo fiddle
Just add a transition property to your css class and in that define on which property you want to put transition on (in your case border shadow) and also define for how much time you want to make the transition.
transition: box-shadow 1s;