How can i fit my website to screen and get rid of scrollbar? I tried these codes but it didn't help. It just hided scrollbar, didn't help to fit my website to screen.
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
Please help me
website: www.ubuz.net
Edit : You need to use media screen to make your website fits in all devices ie; responsive.
You have set the position relative in this class. set it to fixed.
.demoDark{
position:fixed; /*Set it to fixed*/
width:100%;
height: 100%; /*semicolon missing*/
color:#eee;
margin-top:3.7em;
padding-top:3.7em;
background:#23334e url('../img/footer.png');
-webkit-box-shadow:0 -1px rgba(255,255,255,.4),0 0 50px rgba(33,49,75,.55),inset 0 4px 2px -3px rgba(0,0,0,1);
-moz-box-shadow:0 -1px rgba(255,255,255,.4),0 0 50px rgba(33,49,75,.55),inset 0 4px 2px -3px rgba(0,0,0,1);
-ms-box-shadow:0 -1px rgba(255,255,255,.4),0 0 50px rgba(33,49,75,.55),inset 0 4px 2px -3px rgba(0,0,0,1);
-o-box-shadow:0 -1px rgba(255,255,255,.4),0 0 50px rgba(33,49,75,.55),inset 0 4px 2px -3px rgba(0,0,0,1);
box-shadow:0 -1px rgba(255,255,255,.4),0 0 50px rgba(33,49,75,.55),inset 0 4px 2px -3px rgba(0,0,0,1);
}
Add these style on your bottom div (class="alt")
position: fixed;
bottom: 0;
left: 0;
background-color: transparent;
Try to reduce the padding bottom value like this to get desired result:
.demoDark {
background-size: cover;
margin: 0 !important;
padding-bottom: 1.7em !important; /*reduced padding value here */
}
This is for wide screen only. You need to create responsive layout for hiding scroll bar from all screens. you can search and lot of articles available for creating responsive web sites.
All the best!
Related
This question already has answers here:
Creating a CSS3 box-shadow on all sides but one
(10 answers)
Closed 3 years ago.
I use my CSS page below. He applies a box-shadow on the 4 sides.
I want it to be applied only to the right, bottom and left.
How to apply box-shadow only on 3 sides ?
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.22);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.22);
-ms-box-shadow: 0 0 10px rgba(0,0,0,0.22);
-o-box-shadow: 0 0 10px rgba(0,0,0,0.22);
box-shadow: 0 0 10px rgba(0,0,0,0.22);
You can always do something like:
.shadow-box {
background-color: #ddd;
margin: 0px auto;
padding: 10px;
width: 220px;
box-shadow: 0px 8px 10px gray,
-10px 8px 15px gray, 10px 8px 15px gray;
}
<div class="shadow-box">Box with shadows</div>
box-shadow supports only X & Y offset, but you can achieve box-shadow to 3 directions, by providing appropriate value to the offsets.
Tip : In chrome via inspect element you can easily get the exact values and preview that before using it.
Please refer to snippet below.
#boxShadow {
display: block;
margin: auto;
height: 300px;
width: 300px;
background: #cdcdcd;
box-shadow: 0px 5px 8px 0px #3fab83;
}
<br><div id="boxShadow">
</div>
How can I make a shadow effect like the one below with pure CSS?
I am new to CSS.
The following is what I have tried so far, but I am unable to come close to what I want. Please advise how I can make it look like the shadow in the image? Thanks!
box-shadow: 1px 1px 5px #999999 inset
This is the closest I could get : Demo. I think it's actually not bad.
It combines a black shadow and a white one on top of it.
.yourclass{
background-color: #fff;
box-shadow: -15px 0px 60px 25px #ffffff inset,
5px 0px 10px -5px #000000 inset;
}
Browsers' shadows smoothing might differ. I'm using chrome so you might want to tweek the values to get a cross-browser visual effect...
Read the CSS Tricks article about box-shadows to get how they're used.
For two shadows (both sides) you need 4 shadows (demo) :
Result:
.yourclass{
background-color: #fff;
box-shadow: 0px 100px 50px -40px #ffffff inset,
0px -100px 50px -40px #ffffff inset,
-5px 0px 10px -5px rgba(0,0,0,0.5) inset,
5px 0px 10px -5px rgba(0,0,0,0.5) inset;
}
Beware, browsers' shadows rendering/smoothing can differ a lot. I'm using chrome so you might want to tweek the values to get a cross-browser visual effect...
For more info on css shadows, read this article from CSS Tricks
What you want is basically the opposite of a page curl shadow. Take a look at this tutorial - you should be able to easily adapt it.
Here is an example: jsFiddle
div {
position: relative;
width: 250px;
height: 150px;
margin: 100px auto;
border: 1px solid black;
background-color: white;
}
div:after {
position: absolute;
height: 80%;
width: 10px;
content: " ";
right: 0px;
top: 10%;
background: transparent;
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.3);
z-index: -1;
}
We insert a pseudo-element, position it below our div and have it cast a shadow. This way, you have control over the shadows height and position.
This is my CSS code:
.thzPartsHeader, .thzPartsContainer {
border:1px solid #0080ff;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow:0 0 6px #0080ff, 0 0 20px #292929 inset;
-moz-box-shadow:0 0 6px #0080ff, 0 0 20px #292929 inset;
box-shadow:0 0 6px #0080ff, 0 0 20px #292929 inset;
padding: 5px 20px 5px 20px;
margin:auto;
font-family:georgia;
font-size: 12px;
color:#ffffff;
background-color:#000000;
}
This is HTML code:
<fieldset class="thzPartsContainer">
<legend class="thzPartsHeader"><b>Code Will Appear Below</b></legend>
<textarea class="textArea" id="txtarea" name="codearea"></textarea>
</fieldset>
This is how it appears in Google Chrome (This is exactly what I want):
But this is how it appears in Firefox (no reputation to post images :o ):
(source: googledrive.com)
It appears as if the shadows are displaced and margin:auto property is not working in firefox. What is the fix for both of them? please help.
http://jsfiddle.net/f2ndc/
The shadow part of your question is a duplicate of
Box shadow CSS with a <fieldset>. Firefox vs Chrome
Not the best solution as you will have to have a fixed height and width for the <legend> but adding this could work
.thzPartsHeader{
position: absolute;
top: -9px;
left: 50%;
margin-left: -75px;
}
.thzPartsContainer{
padding-top: 9px;
position: relative;
}
fiddle: http://jsfiddle.net/FBca7/2/
I want to style all of the images on my website to have box-shadows and padding of 10px, so that text isn't smooshed up against them. However, when I assign any padding to "img" with CSS, the box-shadow is drawn at the edge of the padding, leaving a 10px blank space around the image.
#content img {
-moz-box-shadow: 0 0 5px 2px #282a2d;
-webkit-box-shadow: 0 0 5px 2px #282a2d;
padding:10px
}
This particular image is floated left within the paragraph. here is an example of my problem -
Any ideas?
EDIT: I do not want the padding. I just want the box-shadow, and then space, so that text doesn't mash up right next to the box-shadow. Turns out what I wanted was margin, not padding. Silly mistake.
use margin in addition to padding
#content img {
box-shadow: 0 0 5px 2px #282a2d;
padding: 10px;
margin-right: 10px;
}
Give the background of the same color
#content img {
-moz-box-shadow: 0 0 5px 2px #282a2d;
-webkit-box-shadow: 0 0 5px 2px #282a2d;
background: #282a2d;
padding:10px;
}
Demo
UPDATE:
As mentioned in comment, OP seems to be OK without padding too. So, I will just complete my answer.
#content img {
-moz-box-shadow: 0 0 5px 2px #282a2d;
-webkit-box-shadow: 0 0 5px 2px #282a2d;
margin:10px
}
#zellio's answer didn't work for me, so I solved it by adding two elements.
<div class="with-padding>
<div class=with-shadow>
...
</div>
</div>
.with-padding {
padding = 10px;
}
.with-shadow {
box-shadow: 0 0 5px 2px #282a2d;
}
This question already has answers here:
Creating a CSS3 box-shadow on all sides but one
(10 answers)
Closed 3 years ago.
I want to have box-shadow on three sides of a div (except top side). How could I do that?
Here's a JS Fiddle for you, it only uses one single div to work.
#shadowBox {
background-color: #ddd;
margin: 0px auto;
padding: 10px;
width: 220px;
box-shadow: 0px 8px 10px gray,
-10px 8px 15px gray, 10px 8px 15px gray;
}
You set a shadow on the bottom, bottom left, and bottom right. With soft shadows it gets a bit tricky but it is doable. It just needs a bit of guesswork to decrease the middle shadow's blur radius, so that it looks seamless and not too dark when it overlaps with the side shadows.
If you are looking for something like Google material design shadows:
.shadow1 {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.shadow2 {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.shadow3 {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.shadow4 {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.shadow5 {
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
Source: https://medium.com/#Florian/freebie-google-material-design-shadow-helper-2a0501295a2d#.wyvbmcq10
Here's an example of the negative Y value suggested by #Vigrond
box-shadow: 0px -8px 10px 0px rgba(0,0,0,0.15);
I like #Chris C answer but I think, we do not need the first line of code. This is shorter and gives the same effect:
box-shadow: -10px 8px 15px lightgray, /*left and bottom*/
10px 8px 15px lightgray; /*right and bottom*/
#note{
position: absolute;
top: 20px; left: 30px;
width:100px; height: 100px;
background-color: #eee;
box-shadow: -10px 8px 15px lightgray,
10px 8px 15px lightgray;
}
<div id="note"></div>
If you have a solid background color, then you can accomplish this by using a combination of background-color and z-index. The trick is to give the element with box-shadow and its previous sibling positioning, then give the previous sibling a background color and set it to have a higher z-index so that it's stacked on top of the element with box-shadow, in effect covering its top shadow.
You can see a demo here: http://codepen.io/thdoan/pen/vNvpKv
If there's no immediate previous sibling to work with, then you can also use a pseudo-element such as :before or :after: http://codepen.io/thdoan/pen/ojJEMj
For translucent shadows with hard corners (i.e. no blur radius) I used this:
.shadow-no-top {
position: relative;
box-shadow: -5px 0 0 0 rgba(0,0,0,.2), 5px 0 0 0 rgba(0,0,0,.2);
}
.shadow-no-top:before {
content: "";
position: absolute;
top: 100%;
left: -5px;
right: -5px;
bottom: -5px;
background-color: rgba(0,0,0,.2);
}
This uses a shadow for the left and right parts and adds the :after pseudo content as the bottom shadow. This avoids overlaps which make the shadow darker or missing corners.
However, this does require the background of the element to be solid.