I applied custom css on my checkbox but now it is showing two..
When I just apply the custom css to the previous one it doesn't apply them.
Can anyone help fixing it?
.treejs-checkbox {
width: 25px;
height: 25px;
justify-content: center;
align-items: center;
position: relative;
border-radius: 100px;
background-color: #FFF;
border: 2px solid #00EA90;
box-shadow: 0px 0px 0px 0px #00EA90 inset;
transition: all 0.15s cubic-bezier(0, 1.05, 0.72, 1.07);
}
<li>
<span class="treejs-checkbox"></span>
<span class="treejs-label">Teams</span>
</li>
It just shows double checkboxes.
There was already existing CSS and I inspected and just changed the existing ones.
.treejs .treejs-checkbox::before {
width: 18px;
height: 18px;
justify-content: center;
align-items: center;
position: relative;
border-radius: 100px;
background-color: #FFF;
border: 2px solid #00EA90;
box-shadow: 0px 0px 0px 0px #00EA90 inset;
transition: all 0.15s cubic-bezier(0, 1.05, 0.72, 1.07);
}
I used psuedo to change them. :)
Related
.color-palette {
border-top: 2px solid lightgrey;
max-height: 32vh;
z-index: 1;
background: rgba(0, 0, 0, 0.75);
width: 90vw;
bottom: 2.75rem;
border-radius: 10px;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-end;
padding: 0.75rem 0.5rem;
position: absolute;
overflow-y: auto;
overflow-x: hidden;
box-shadow: 0px 5px 10px black;
animation-name: zoomIn;
animation-duration: 0.5s;
}
button {
font-family: inherit;
font-size: 0.8rem;
line-height: 0.9;
width: 3.75rem;
height: 3.75rem;
margin: 0.45rem 0.3rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.5s;
border: none;
outline: none;
text-decoration: none;
text-align: center;
text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.3);
box-shadow: inset 0px 1px 0px grey, 0px 3px 0px 0px lightgrey,
0px 8px 5px #999;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
font-family: "Comic Neue", cursive;
width: 8.5rem;
font-size: 1rem;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 500;
bottom: 110%;
left: 35%;
margin-left: -60px;
}
span {
display: none;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
display: block;
}
<div class="color-palette">
<button class="tooltip">
<span class="tooltiptext">Cannot duplicate</span>
</button>
</div>
I got the tooltip code from https://www.w3schools.com/css/css_tooltip.asp.
I tried the answer here: CSS tooltip getting cut off
And have applied overflow: visible on my color-palette instead of overflow-y: auto; overflow-x: hidden; but this happened:
Yes, the tooltip worked, but my buttons were already outside the div (.color-palette).
I want this to work without removing the bottom arrow of the tooltip, without moving the tooltip downwards, without increasing the div to make the tooltip fit inside. All I want is to make the tooltip overlap. What to do?
Try changing value from 110 to 95 in the class:
.tooltip .tooltiptext {
bottom: 95%;
}
Update:
change top value in class
.tooltip .tooltiptext::after {
top: 100%;
}
Try this fiddle: https://jsfiddle.net/ecxobpg3/38/
I have a div that I've got that's circular using border-radius: 50% what I also want to achieve is mimicking something I've already seen implemented on hover.
spacing between the border and the div.
I've tried adding padding: 5px to the hover but it doesn't create a border that's not on the div.
Code
#sub-section .content .icon-div {
background-color: rgba(204, 202, 202, 0.25);
border-radius: 50%;
width: 90px;
height: 90px;
margin-right: auto;
margin-left: auto;
text-align: center;
padding-top: 13%;
margin-bottom: 2em;
transition: all ease .3s;
}
#sub-section .content .icon-div:hover {
border: 1px solid #f6653c;
background-color: #f6653c;
padding: 5px;
transition: all ease .3s;
}
Here's a quick example using an inset box-shadow, as it's less likely to mess with your layout than animating padding:
(Bare in mind, it's not true transparency, the white inner circle is a set colour, which may or may not fit your need)
#example{
display: block;
width: 100px;
height: 100px;
color: #FFF;
text-align: center;
line-height: 100px;
background-color: #f6653c;
border: 2px solid #f6653c;
border-radius: 50%;
box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,1);
transition: box-shadow 0.2s linear;
}
#example:hover{
box-shadow: inset 0px 0px 0px 5px rgba(255,255,255,1);
}
<div id="example">Hover me</div>
You could use a radial gradient:
div {
width: 120px;
height: 120px;
border-radius:50%;
border:1px solid #FA532A;
}
.simple-radial {
background: radial-gradient(#FA532A 54px, rgba(204, 202, 202, 0.25) 2px, white 4px);
}
<div class="simple-radial"></div>
I need to create button like this
You can see a rounded borders on center of sides. I'm tried to do it with after and before classes, but it was tricky. Which solution is the cleanest? Also I'm done on dev resizeble button and it'll be better if this can be done as one figure, without absolute positioning or smth like that
body {
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
}
button {
text-transform: uppercase;
background-color: #F9EFCA;
border: none;
padding: 20px 100px;
cursor: pointer;
letter-spacing: 1px;
border-bottom: 10px solid #ae9e5c !important;
box-shadow: inset 0 -1px 1px 0 rgba(0, 0, 0, .12), 0 10px 20px -5px rgba(0, 0, 0, .25);
font-size: 50px;
transition: .2s all;
position: relative;
border-radius: 10px;
}
button:hover,
button:active {
transition: .2s all;
border-bottom: none !important;
}
button:before,
button:after {
content: '';
position: absolute;
top: 9%;
bottom: 0;
height: 91%;
background: #F9EFCA;
width: 10px;
border-radius: 100%;
}
button:before {
left: -4px;
}
button:after {
right: -4px;
}
button:active:before,
button:active:after,
button:hover:before,
button:hover:after {
top: 9%;
bottom: 0;
height: 82%;
}
<button>Call me</button>
Codepen example
create a new button class and try this in your CSS:
.button_costum
{
margin: 10px auto;
font-size: 2.0rem;
padding: 1.25rem 2.5rem;
display: block;
background-color: // choose what you want
border: 1px solid transparent;
color: // choose what you want
font-weight: 300;
-webkit-border-radius: 3px;
border-radius: 20px; // in your case it shout be 25 or 30
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
try using the property on button
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
This would help you target the button corners without distorting the shape of the button itself.
I have a div with the style as so:
.oval {
width: 100%;
height: 30%;
border-radius: 250px;
font-weight: bold;
line-height: 2em;
font-size: 1em;
color: #fff;
text-align: center;
}
And also a background color.
I want to add a shadow to this circle.
Is that possible?
I'm seeing conflicting information, with people saying that's inside the image, so you can't apply any styles to it, and other people suggesting that a style like that exists or there is a way to do it.
You can use the box-shadow property:
.oval {
width: 100%;
height: 30%;
border-radius: 250px;
font-weight: bold;
line-height: 2em;
font-size: 1em;
text-align: center;
box-shadow:0 0 2px 2px #999;
}
<div class="oval">text</div>
I think you are looking for box shadow:
-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 255, 0.67);
-moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 255, 0.67);
box-shadow: 0px 0px 30px 0px rgba(0, 0, 255, 0.67);
This link explains it: http://www.w3schools.com/cssref/css3_pr_box-shadow.aspAnd this link lets you experiment with it: http://www.cssmatic.com/box-shadow
Use box-shadow property:
.oval {
width: 150px;
height: 150px;
border-radius: 150px;
font-weight: bold;
font-size: 1em;
color: #fff;
text-align: center;
display: block;
background-color: red;
box-shadow: 3px 3px 3px #aaa;
}
<div class="oval"></div>
Box Shadow!
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
.circle {
width: 150px;
height: 150px;
background-color: yellow;
border-radius: 50%;
box-shadow: 5px 5px 5px #BC7046;
position: absolute;
top: 10px;
left: 10px;
}
.circle2{
box-shadow: -6px -6px 6px #BCAE46;
}
#square {
border-radius: 5px;
width: 170px;
height: 170px;
background-color: #D0DA72;
position: relative;
}
<div id=square>
<div class=circle></div>
<div class='circle circle2'></div>
</div>
On my site I have links with a box shadow that appears when hovering. You can see it on http://www.lorteau.fr . That works just fine on Chrome, Opera and Firefox. IE however clips the top of it.
Chrome, Opera, Firefox:
IE:
HTML defining the links and all the containers around it:
<body>
<div class="main m-scene" id="page">
<div id="menu">
<a class="menu_link" id="wphone_link" href="wphone.html">Windows Phone</a>
<a class="menu_link" id="wmetro_link" href="wmetro.html">Windows Metro</a>
<a class="menu_link" id="wdesktop_link" href="wdesktop.html">Windows Desktop</a>
<a class="menu_link" id="linux_link" href="linux.html">Linux</a>
<a class="menu_link" id="other_link" href="other.html">Other</a>
</div>
</div>
</body>
CSS3 defining the hovering effect and the containers around it:
.html
{
background-color: #464646;
}
body
{
margin: 0;
}
#page
{
width: 900px;
min-width: 800px;
min-height: 100%;
-pie-box-shadow: 0px 0px 3px 1px #FFFFFF;
-moz-box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 0.5);
-webkit-box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 0.5);
box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 0.5);
background-image: none;
border-width: 1px;
border-style: solid;
border-color: #000000;
background-color: #3C3C3C;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
padding: 7px 5px 6px 32px;
}
#menu
{
height: 57px;
display: block;
width: 85%;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
text-align: center;
}
.menu_link, .menu_link:hover
{
font-family: 'Electrolize', Arial, sans-serif;
font-size: 18px;
text-align: left;
color: white;
display: inline;
text-decoration: none;
border-style: solid;
border-width: 1px;
border-color: #777777;
border-radius: 5px;
background-color: #777777;
padding: 5px;
margin-right: 5px;
-webkit-transition: 250ms linear 0s;
-moz-transition: 250ms linear 0s;
-o-transition: 250ms linear 0s;
transition: 250ms linear 0s;
}
.menu_link:hover
{
color: #FFBE5B;
box-shadow: 0px 0px 5px 5px rgba(255, 190, 91, 0.5);
}
.menu_link:active
{
color: #FFBE5B;
}
.m-scene .scene_element
{
animation-duration: 0.25s;
-webkit-animation-duration: 0.25s;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
transition-timing-function: ease-out;
}
I tried all the padding, margin and height combinations I could think of but that didn't change anything. Would some have an idea as to what I could modify so that the shadow isn't clipped on any browser?
Pff never mind. Removed "margin-top: 5px;" from #menu and added "padding-top: 15px;" and that did it.
Spelling out the question clearly always helps!