I want my footer to be at the bottom of the page with the following code:
body:not(.theme-preset-active) footer#colophon {
padding-left: 15px;
padding-right: 15px;
position: absolute;
bottom: 0px;
width: 100%;
color: #191919;
background-color: transparent;
font-size: 100%;
}
But it ends up in the middle of the content.
I have tried with position:fixed like this:
body:not(.theme-preset-active) footer#colophon {
padding-left: 15px;
padding-right: 15px;
position: fixed;
bottom: 0px;
width: 100%;
color: #191919;
background-color: transparent;
font-size: 100%;
}
But the it wont cooperate with my scrollbar, it jumps a little bit left when the scrollbar appears. Code for scrollbar if that also can be a solution:
::-webkit-scrollbar {
width: 14px;
height: 18px;
}
::-webkit-scrollbar-thumb {
height: 6px;
border: 4px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
-webkit-border-radius: 7px;
background-color: rgba(65, 65, 65, 0.99);
-webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
}
::-webkit-scrollbar-button {
width: 0;
height: 0;
display: none;
}
::-webkit-scrollbar-corner {
background-color: transparent;
}
html{
position: relative;
overflow-x: hidden;
margin-right: calc(-1 * (100vw - 100%));
background-color: transparent;
}
All help appreciated.
The webpage
/ R
position: fixed is what you should use, but you can also add the following:
body {
--footer-height: 100px;
min-height: 100vh; /* never use height, because you want the page to expand */
padding-bottom: var(--footer-height); /* to avoid footer being on top of relative elements within body */
}
footer {
height: var(--footer-height);
}
I'm not sure what you mean with "it jumps a little bit left when the scrollbar appears" because you don't have anything on the page that fold out and therefor resizes the height of it. So either the scrollbar is there to begin with, or it's not.
Anways, min-height is your friend if you still want the footer to be have a absolute positioning.
If you look at this two pictures, my footer jumps left when the scrollbar appears, if it have the position: fixed.
Thanks for your answer!
/
Related
I have a div and I am trying to add a transparent border to it with a box-shadow such that the transparent border shows the box-shadow underneath and not the div's background color.
Here is a JSFiddle I created to showcase my problem: https://jsfiddle.net/143k7myj/.
body {
background-color: #f8f8f8;
}
div {
width: 489px;
height: 169px;
background-color: #46aae3;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);
border-radius: 3px;
border: 10px solid transparent;
/* background-clip: content-box; */
}
div:hover {
border-color: white;
}
<div></div>
As you can see, when I hover over the div, the border shows with it's white color. If I don't hover over it, it show's the 'transparent' border. However, it show's the div's background colour underneath and not the box-shadow of the div that I want to achieve.
One of my attempts was to use background-clip: content-box, however, then the transparent border shows the solid background-colour of the body.
How can I have achieve a transparent border such that the box-shadow of the div is shown underneath the transparent border and not the background color of the div. Thank you.
You can achieve with Pseudo-element :before
body {
background-color: #eee;
}
div {
width: 489px;
height: 169px;
background-color: #46aae3;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.10);
border-radius: 3px;
position: relative;
/* background-clip: content-box; */margin-top: 30px;margin-left: 30px;
}
div:before {
content: "";
border: 10px solid #fff;
position: absolute;
left: -10px;
top: -10px;
right: -10px;
bottom: -10px;
opacity: 0;
border-radius: 3px;
}
div:hover:before {
opacity: 1;
}
<div></div>
Edit:
You may achieve it with pseudo element using some workaround:
body {
background-color: #ddd;
margin: 0;
padding: 10px;
}
div {
/* change the border width here */
--border-width: 10px;
width: 489px;
height: 169px;
background-color: #46aae3;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);
border-radius: 3px;
margin: var(--border-width);
position: relative;
}
div::before {
content: '';
display: block;
width: calc(100% + var(--border-width) * 2);
height: calc(100% + var(--border-width) * 2);
margin: calc(var(--border-width) * -1);
position: absolute;
border-radius: inherit;
}
div:hover {
box-shadow: 0px 4px 15px transparent;
}
div:hover::before {
background-color: white;
z-index: -1;
}
<div></div>
Is it possible to use CSS to reproduce the shadow under the device of the below image?
The following CSS and different variants don't work:
filter: drop-shadow(rgba(22, 22, 22, 0.25) 0px 12px 15px);
The problem is concentrating the shadow under the device and flattening it. The CSS above cannot make the shadow appear as if it's projected on the ground.
Codepen: https://codepen.io/Crashalot/pen/MWYzoJV
A pseudo element is better suited to get this done, see below example:
.object {
margin: 20px;
width: 70px;
height: 140px;
position: relative;
border-style: solid;
background: #E6E6FA;
}
.object:before {
content:"";
z-index: -1;
position: absolute;
bottom: -50%;
width: inherit;
height: inherit;
border-radius: 40%;
background: rgba(0,0,0,.55);
transform: scaleX(1.3) scaleY(0.12);
filter: blur(5px);
}
<div class="object"></div>
Alternatively, you can use box-shadow:
.object {
margin: 20px;
width: 70px;
height: 140px;
position: relative;
border-style: solid;
background: #E6E6FA;
/* This is .shadow-lg from tailwindCSS */
/* See https://tailwindcss.com/docs/box-shadow/ */
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
<div class="object"></div>
I would like to create this page (see image) with css shadow. Is this possible? So to have the page peel css box shadow bottom left and right and the shadow left and right?
You can do this with pseudo elements :before and :after. Creating two new areas which have their own box-shadows and placing them where required you can create the illusion of the shadow getting bigger as the page goes down.
body {
background: lightgrey;
}
div {
background: white;
margin: 40px auto;
height: 500px;
width: 300px;
position: relative;
padding: 10px;
}
div:before,
div:after {
height: 97%;
z-index: -10;
position: absolute;
content: "";
bottom: 15px;
left: 8px;
width: 30%;
top: 2%;
max-width: 300px;
background: transparent;
box-shadow: -10px 0px 5px rgba(0, 0, 0, 0.3);
transform: rotate(1deg);
}
div:after {
transform: rotate(-1deg);
right: 8px;
left: auto;
box-shadow: 10px 0px 5px rgba(0, 0, 0, 0.3);
}
<div>
test
</div>
An alternative is using CSS transforms to change the perspective of a single :before pseudo element.
This was done by Harry **
body {
background: lightgrey;
}
div {
background: white;
margin: 40px auto;
height: 500px;
width: 300px;
position: relative;
padding: 10px;
box-shadow: 10px 0px 5px -10px gray, -10px 0px 5px -10px gray;
}
div:after {
content: '';
position: absolute;
bottom: 10px;
left: 0px;
height: 50%;
width: 100%;
transform-origin: 50% 100%;
transform: perspective(100px) rotateX(1deg);
box-shadow: 5px 0px 10px gray, -5px 0px 10px gray;
z-index: -1;
}
<div></div>
CSS :before & :after
I use a :before and :after pseudoelements to create a custom-shaped shadow on my text card. I use css like this (jsFiddle):
.card {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
width: 310px;
height: 310px;
text-align: center;
color: black;
padding-top: 35px;
border: 1px solid black;
}
.card h1 {
font-size: 15px;
font-weight: bold;
line-height: 17px;
font-style: italic;
margin: 0;
}
.card .text {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
margin: 8px auto;
padding: 15px 10px;
font-size: 13px;
text-align: left;
line-height: 14px;
height: 170px;
width: 280px;
background: white;
border-radius: 5px;
position: relative;
color: #222222;
}
.card .text:before,
.card .text:after {
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
content: "";
display: block;
position: absolute;
z-index: -1;
top: 50%;
bottom: 0;
left: 40px;
right: 40px;
border-radius: 100px/10px;
}
.card .text:after {
-webkit-transform: skew(8deg) rotate(3deg);
-moz-transform: skew(8deg) rotate(3deg);
transform: skew(8deg) rotate(3deg);
right: 10px; left: auto;
}
So far so good. Problems start, when i add some background to my .card element, for example background: #0aabff (jsFiddle #2). Notice, pseudo-elements shadow around .text disappeared.
I tried solving this by adding z-index to my .text element, but then, instead of being behind my .text element, my :before, :after are displayed before it, despite having a z-index: -1; property (jsFiddle #3).
This makes little sense to me, and i still don't know how to solve this kind of problem. Perhaps, there is some kind of workaround, or another way to get the kind of shadow i need (original idea is the courtesy of css-tricks.com);
You can add a z-index lower than -1 to your card class.
.card {
z-index:-2;
position:relative;
}
This is because your z-index of your pseudo-elements is lower than the default z-index value of card. By default is the background transparent and you may see the shadow. When you add a background-color then this is positioned above your pseudo-elements.
See http://jsfiddle.net/71thws1a/3/
The problem lies in the stacking of css as mentioned by #Doodlebunch
I have a fixed header and footer and when I added an element such as a ribbon for a div header part of the ribbon spills into the header but not the footer.
The element in question can be found at:
http://mikesbaum.com/plan9alehouse/index.html
Here is the header/nav CSS:
header {
position: fixed;
top:0px;
left:0px;
width: 100%;
height: auto;
padding: 0px;
border-bottom: 4px solid #291e13;
background:url(../../img/dark_wood_texture.jpg);
background-color:#FFF;
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}
nav {
list-style:none;
text-align:center;
font-family: Conv_goudy_bookletter_1911-webfont;
font-weight:bold;
}
nav li {
display: inline;
}
nav a {
display: inline-block;
padding: 10px;
}
and the ribbon:
.ribbon {
font-size: 16px !important;
/* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */
width: 50%;
position: relative;
background: #ba89b6;
color: #fff;
text-align: center;
padding: 1em 2em; /* Adjust to suit */
margin: 2em auto 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
}
.ribbon:before, .ribbon:after {
content: "";
position: absolute;
display: block;
bottom: -1em;
border: 1.5em solid #986794;
z-index: -1;
}
.ribbon:before {
left: -2em;
border-right-width: 1.5em;
border-left-color: transparent;
}
.ribbon:after {
right: -2em;
border-left-width: 1.5em;
border-right-color: transparent;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
content: "";
position: absolute;
display: block;
border-style: solid;
border-color: #804f7c transparent transparent transparent;
bottom: -1em;
}
.ribbon .ribbon-content:before {
left: 0;
border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
right: 0;
border-width: 1em 1em 0 0;
}
I found the ribbon tutorial at: http://css-tricks.com/snippets/css/ribbon/ but still cannot figure out a solution.
You need to add z-index:1 to your header to avoid the ribbon to flow above of it:
header {
// your css
z-index:1;
}