.demo-div{
margin:auto;
width:50%;
border: 1px solid #d6f5f5;
background: #f6f6f6;
padding: 20px 5px 20px 5px;
min-height: 500px;
}
.demo-div .demo-div-content{
padding: 0px !important;
}
.demo-div-inner{
background: white;
min-height: 70px;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
padding: 30px;
transform:translateX(30%);
}
<div class="demo-div ">
<div class="demo-div-content">
<div class="demo-div-inner">swipe me out</div> </div>
</div>
When i apply translate to inner div , it comes on top of parent div.
But i want is that it should stay within parent on applying tranform.
Also i have event listener on demo-div-inner , so setting it z-index of parent div i.e. demo-div as -1 , stopped event listener from firing.
Add Another attributes margin-right at your demo-div-inner class.
.demo-div{
margin:auto;
width:50%;
border: 1px solid #d6f5f5;
background: #f6f6f6;
padding: 20px 5px 20px 5px;
min-height: 500px;
}
.demo-div .demo-div-content{
padding: 0px !important;
}
.demo-div-inner{
background: white;
min-height: 70px;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
padding: 30px;
margin-right: 66px;
transform:translateX(30%);
}
<div class="demo-div">
<div class="demo-div-content">
<div class="demo-div-inner">swipe me out</div>
</div>
</div>
Related
I have parent div and four child divs. the parent element is a container and child elements are buttons. I set the CSS property of the button to increase its border-width when I hover on it. the actual problem is whenever the button increases its border-width; the entire webpage moving. how can I make the webpage stable?
#theme-options-wrapper {
display: flex;
justify-content: center;
}
.theme-button {
height: 30px;
width: 30px;
border-radius: 50%;
background-color: black;
margin: 5px;
cursor: pointer;
border: 2px solid #000000;
-webkit-box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69);
-moz-box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69);
box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69);
}
.theme-button:hover {
border-width: 5px;
}
#light-mode {
background-color: #ffff;
}
#blue-mode {
background-color: #192734;
}
#green-mode {
background-color: #78866b;
}
#purple-mode {
background-color: #7e4c74;
}
<div id="theme-options-wrapper">
<div data-mode="light" id="light-mode" class="theme-button"></div>
<div data-mode="green" id="green-mode" class="theme-button"></div>
<div data-mode="purple" id="purple-mode" class="theme-button"></div>
<div data-mode="blue" id="blue-mode" class="theme-button"></div>
</div>
here the page URL link
https://nanthu0123.github.io/portfolio/
image of buttons (child elements)
buttons-img
here the source code
https://github.com/nanthu0123/portfolio
hey, add box-sizing: border-box; property to your .theme-button class.
UPDATE:
also if you want make your button larger add transform: scale(1.3); to your pseudo class (.theme-button:hover)
One option is to simply not use the border to draw the border, instead use the box-shadow property, which can take a comma-separated list of box-shadow definitions; below I've added a 2-pixel 'fake border' after the definition of the original box-shadow:
box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69), 0 0 0 2px #000;
And, within the :hover pseudo-class expanded that 2-pixel size to 5-pixels:
box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69), 0 0 0 5px #000;
As the box-shadow doesn't take space in the document it won't force elements to reflow (though obviously a repaint is required to show the changed shadow).
#theme-options-wrapper {
display: flex;
justify-content: center;
}
.theme-button {
height: 30px;
width: 30px;
border-radius: 50%;
background-color: black;
margin: 5px;
cursor: pointer;
box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69), 0 0 0 2px #000;
}
.theme-button:hover {
box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69), 0 0 0 5px #000;
}
#light-mode {
background-color: #ffff;
}
#blue-mode {
background-color: #192734;
}
#green-mode {
background-color: #78866b;
}
#purple-mode {
background-color: #7e4c74;
}
<div id="theme-options-wrapper">
<div data-mode="light" id="light-mode" class="theme-button"></div>
<div data-mode="green" id="green-mode" class="theme-button"></div>
<div data-mode="purple" id="purple-mode" class="theme-button"></div>
<div data-mode="blue" id="blue-mode" class="theme-button"></div>
</div>
This can also be transitioned/animated – the colour, length or both – if required, with a single line:
transition: box-shadow 0.2s linear;
#theme-options-wrapper {
display: flex;
justify-content: center;
}
.theme-button {
height: 30px;
width: 30px;
border-radius: 50%;
background-color: black;
margin: 5px;
cursor: pointer;
box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69), 0 0 0 2px #000;
transition: box-shadow 0.2s linear;
}
.theme-button:hover {
box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69), 0 0 0 5px #000;
}
#light-mode {
background-color: #ffff;
}
#blue-mode {
background-color: #192734;
}
#green-mode {
background-color: #78866b;
}
#purple-mode {
background-color: #7e4c74;
}
<div id="theme-options-wrapper">
<div data-mode="light" id="light-mode" class="theme-button"></div>
<div data-mode="green" id="green-mode" class="theme-button"></div>
<div data-mode="purple" id="purple-mode" class="theme-button"></div>
<div data-mode="blue" id="blue-mode" class="theme-button"></div>
</div>
Reference:
box-shadow.
transition.
I have a simple scrollbar stylesheet that changes the scrollbar's appearance in Webkit based browsers. Here's the code:
::-webkit-scrollbar {
width: 14px;
height: 14px;
background-color: white;
-webkit-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1);
box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-button {
background-color: rgba(0, 0, 0, 0.25);
}
::-webkit-scrollbar-thumb {
height: 50px;
background-color: rgba(0, 0, 0, 0.25);
border: 4px solid white;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.4);
}
::-webkit-resizer {
background-color: rgba(0, 0, 0, 0.25);
}
<div style="height: 5000px;">
<br /><br />
<div style="margin: auto; width: 100px; height: 500px; overflow-y: scroll; border: 1px solid black;">
<div style="height: 1000px; padding: 24px;">
<div>Some content</div>
</div>
</div>
</div>
As you can see, the scrollbar within the black box has the box shadow on the left side. However, the one on the body does not, even though it is the same styles being applied to both. Why does this happen?
Just use the inset option in box-shadow for scroll bar shadows
::-webkit-scrollbar {
width: 14px;
height: 14px;
background-color: white;
-webkit-box-shadow: inset 0 0 6px black
}
::-webkit-scrollbar-button {
background-color: rgba(0, 0, 0, 0.25);
}
::-webkit-scrollbar-thumb {
height: 50px;
background-color: rgba(0, 0, 0, 0.25);
border: 4px solid white;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.4);
}
::-webkit-resizer {
background-color: rgba(0, 0, 0, 0.25);
}
html{
background-color:white;
height:100%;
}
<div style="height: 5000px;">
<br /><br />
<div style="margin: auto; width: 100px; height: 500px; overflow-y: scroll; border: 1px solid black;">
<div style="height: 1000px; padding: 24px;">
<div>Some content</div>
</div>
</div>
</div>
I want to have multiple linear gradients or opacity on the same image.
Here is what I have so far:
HTML:
<body>
<div class="container">
<div class="inner-container">
<div class="left-section"></div>
<div class="right-section"></div>
</div>
</div>
</body>
CSS:
*{
margin: 0;
padding: 0;
}
body{
background-color: #333;
}
.container{
width: 1050px;
height: 750px;
background-image:
linear-gradient(
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)
),
url(http://www.newyorker.com/wp-content/uploads/2015/12/Veix-Goodbye-New-York-Color-1200.jpg)
;
margin: 0 auto;
-webkit-box-shadow: -2px 1px 37px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -2px 1px 37px 0px rgba(0,0,0,0.75);
box-shadow: -2px 1px 37px 0px rgba(0,0,0,0.75);
margin-top: 50px;
}
.inner-container{
width: 75%;
height: 75%;
border: 1px solid white;
margin: 0 auto;
margin-bottom: 50px;
border-radius: 5px;
background-image:
linear-gradient(
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0)
),
url(http://www.newyorker.com/wp-content/uploads/2015/12/Veix-Goodbye-New-York-Color-1200.jpg);
}
From the CSS, I am calling the same image in both containers. However doing this makes the layout look weird because the image isn't consistent between the outside and inner containers. How can I use the same image to achieve the affect in the image?
Add background-position: center top to both your container and inner-container and they will line up.
I have a feeling I have my stacking contexts messed up, but I cannot get this working.
I have several divs, for which z-index is working correctly, however, one child is not cooperating.
My HTML looks something like this:
....
<div id="filters">
<div class="filter"></div>
<div class="filter"></div>
<div class="filter"></div>
<div class="filter"></div>
<div class="filter"></div>
<div class="set">
<img src="Cat.png">
<div class="drop">
<img src="Hammer.png">
<img src="Cat.png">
<img src="Bat.png">
</div>
</div>
</div>
....
My CSS looks something like this:
#filters {
width: 256px;
height: 32px;
text-align: center;
background: linear-gradient(#147380, #0c454d);
padding: 0px 0px;
margin-bottom: 16px;
border: 1px solid #c8c998;
border-radius: 6px;
box-shadow: 0px 0px 0px 1px #504e20, inset 0px 0px 0px 1px #504e20;
position: relative;
z-index: 1;
}
.filter {
height: 22px;
width: 22px;
border-radius: 28px;
border: 2px solid #7b7651;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75), inset 0px 3px 3px rgba(255, 255, 255, 0.25), inset 0px -3px 3px rgba(0, 0, 0, 0.25);
margin: 3px 3px;
display: inline-block;
position: relative;
z-index: 4;
}
.set {
height: 22px;
width: 20px;
border-radius: 0px 28px 28px 0px;
border: 2px solid #7b7651;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75), inset 0px 3px 3px rgba(255, 255, 255, 0.25), inset 0px -3px 3px rgba(0, 0, 0, 0.25);
margin: 3px 0px;
margin-left: -19px;
padding: 0px 8px 0px 15px;
background: #e16006;
display: inline-block;
position: relative;
z-index: 3;
}
.drop {
position: relative;
z-index: 2;
width: 20px;
padding: 8px 4px 2px 4px;
top: 2px;
left: -6px;
border-radius: 0px 0px 7px 7px;
border: 2px solid #7b7651;
border-top: 0px;
background: #d55801;
}
What I am trying to do is to get the .drop behind the .set, which is behind the filter but all of them are ontop of .filters. With my code, everything is displayed properly except that .drop is ontop of .set.
Sorry to say that this is not possible. A child element cannot have a lower z-index than the parent element.
More on that topic
//text code
body{
padding:0;
margin:0;
}
#filters {
width: 256px;
height: 32px;
text-align: center;
background: linear-gradient(#147380, #0c454d);
margin-bottom: 16px;
border: 1px solid #c8c998;
border-radius: 6px;
box-shadow: 0px 0px 0px 1px #504e20, inset 0px 0px 0px 1px #504e20;
position: relative;
}
.filter {
height: 22px;
width: 22px;
border-radius: 28px;
border: 2px solid #7b7651;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75), inset 0px 3px 3px rgba(255, 255, 255, 0.25), inset 0px -3px 3px rgba(0, 0, 0, 0.25);
margin: 3px 3px;
display: inline-block;
position: relative;
border:1px solid gold;
}
.set {
height: 22px;
width: 20px;
border-radius: 0px 28px 28px 0px;
border: 2px solid #7b7651;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75), inset 0px 3px 3px rgba(255, 255, 255, 0.25), inset 0px -3px 3px rgba(0, 0, 0, 0.25);
margin: 3px 0px;
margin-left: -19px;
padding: 0px 8px 0px 15px;
background: #e16006;
display: inline-block;
border:1px solid black;
}
.drop {
position: relative;
width: 20px;
padding: 8px 4px 2px 4px;
border-radius: 0px 0px 7px 7px;
border: 2px solid #7b7651;
border-top: 0px;
background: #d55801;
border:1px solid cyan;
margin-top:-138px;
position: absolute;
right:21px;
transition:all 0.5s linear;
z-index:-1;
}
#filters .set:hover .drop{
margin-top:0px;
transition:all 0.5s linear;
}
Hello i am trying to spawn boxes side by side i dont know what to do i have tried
using Float:left; but that also didnt work
here is my css code
<style>
div.heh
{
width:550px;
height:200px;
border:1px solid black;
background-color: #f5f5f5;
border: .5px solid #e3e3e3;
border-radius: 1px;
padding: 19px;
margin-bottom: 5px;
min-height: 10px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-align:left
float:left;
}
div.hehh
{
width:550px;
height:200px;
border:1px solid black;
background-color: #f5f5f5;
border: .5px solid #e3e3e3;
border-radius: 1px;
padding: 19px;
margin-bottom: 5px;
min-height: 10px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-align:right
float:right;
}
</style>
<!------- here is the HTML Structure ----->
<div class="heh" align="left">
<h3>SteamRep:<button type="button" class="btn btn-default" >Normal</button><br>
View Backpack<br>
View TF2Outpost
</h3>
</div>
<div class="hehh">
<h3>Positive Reputation:<font color="green">100</font><br>
Negative Reputation:<font color="red">1</font></br>
Total Raffles Participated:<font color="green">12</font><br>
Warnings Received:<font color="red">0</font><br>
</h3>
</div>
In the above code the boxes would spawn below each other i dont know what is going wrong i have searched elsewhere also didnt find much resources here is the image
This Css method will also help you to make responsive Web site and reduce code redundancy in css.
Html
<div class="heh" align="left">
<h3>SteamRep:<button type="button" class="btn btn-default" >Normal</button><br>
View Backpack<br>
View TF2Outpost
</h3>
</div>
<div class="heh last">
<h3>Positive Reputation:<font color="green">100</font><br>
Negative Reputation:<font color="red">1</font></br>
Total Raffles Participated:<font color="green">12</font><br>
Warnings Received:<font color="red">0</font><br>
</h3>
</div>
Css
div.heh
{
float:left;
width:42%;
height:200px;
border:1px solid black;
background-color: #f5f5f5;
border: 5px solid #e3e3e3;
border-radius: 1px;
padding: 19px;
margin-bottom: 5px;
min-height: 10px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-align:left
float:left;
margin-right:5px;
}
.heh.last{margin:0 !important;}
float:left; is the way to go, but I assume they don't fit next to each other in their parent container. Consequently, they want to be next to each other, but since that is impossible, they will display beneath each other.
So you need to make the parent container wider, or the child divs smaller.
reduce the width for both div and use width:200px;
it will be working
Just add display:inline-block to two div css classes
Each div size is 550px so if screen size is above 1100px only display side by side
CSS
div.heh
{
width:550px;
height:200px;
border:1px solid black;
background-color: #f5f5f5;
border: .5px solid #e3e3e3;
border-radius: 1px;
padding: 19px;
margin-bottom: 5px;
min-height: 10px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-align:left;
float:left;
display:inline-block
}
div.hehh
{
width:550px;
height:200px;
border:1px solid black;
background-color: #f5f5f5;
border: .5px solid #e3e3e3;
border-radius: 1px;
padding: 19px;
margin-bottom: 5px;
min-height: 10px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-align:right;
float:right;
display:inline-block
}
Fiddle