Anyway to set css outline only show left and right ? Because I can't use border, I tried but it will make more bad outlook .
.test{
margin:10px;
padding:10px;
width:100px;
height:10px;
outline:10px solid #000;
}
<div class="test"></div>
You could possibly achieve this using two box shadows:
div {
margin: 10px;
padding: 10px;
width: 100px;
height: 10px;
box-shadow: -5px 0px 0px 0px black, 5px 0px 0px 0px black;
}
<div></div>
Related
I just want no border on the bottom of the box, or is it not possible? The reason I am using 'box-shadow:inset' instead of the regular border style because it does not alters my box size and shifts my box out of position.
.box {
width: 82px;
height: 56px;
box-shadow:inset 0px 0px 0px 5px #AC92C4;
border-radius: 5px 5px 0px 0px;
}
https://jsfiddle.net/dcaktwuz/
You wrote:
The reason I am using 'box-shadow:inset' instead of the regular border
style because it does not alters my box size and shifts my box out of
position.
You can still try to make a border (with border-bottom: none;) and add box-sizing: border-box, which will include the borders (and padding) in the overall width and height of the element.
You can shift shadows:
.box {
display: inline-block;
vertical-align: middle;
width: 82px;
height: 56px;
border-radius: 5px 5px 0px 0px;
border: 1px solid #ccc;
}
.shift1 {
box-shadow: inset 5px 5px 0px 5px #AC92C4;
}
.shift2 {
box-shadow: inset -5px 5px 0px 5px #AC92C4;
}
.shift1.shift2 {
box-shadow: inset 5px 5px 0px 5px #AC92C4, inset -5px 5px 0px 5px #AC92C4;
}
<div class="box shift1"></div> + <div class="box shift2"></div> =
<div class="box shift1 shift2"></div>
I am trying to build a staircase using only divs(boxes) and shadows but the third shadow goes over the anterior box.I need the shadow to remain there so its visible on the left side but the top side should be covered. How can i solve this? Using only css. Here it's my code. Thank you.
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
margin-top:20px;
margin-left:33px;
width: 200px;
height: 20px;
border:1px solid black;
background: #966F33;
box-shadow: -7px -7px 5px #888888;
transform: skewX(50deg);
}
#div2 {
width: 200px;
height: 50px;
margin-left:45px;
border:1px solid black;
background-color: #966F33;
box-shadow: -22px -10px 5px #888888;
}
#div3 {
margin-left:58px;
width: 200px;
height: 20px;
border:1px solid black;
background: #966F33;
transform: skewX(50deg);
box-shadow: -7px -15px 5px #888888;
}
#div4 {
width: 200px;
height: 50px;
margin-left:71px;
border:1px solid black;
background-color: #966F33;
box-shadow: -23px -17px 5px #888888;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>
Have you tried using z-index to set the stack order of your elements? http://www.w3schools.com/cssref/pr_pos_z-index.asp
You have to use z-index.
According to W3school
Note: z-index only works on positioned elements (position:absolute,
position:relative, or position:fixed).
Jsfiddle
Trying to get my divs to NOT move around when I change the size of my window.
Here's the CSS in question
#Main {
font-family: Arial;
}
#Intro{
width: 70%;
height: 1000px;
background: rgba(255, 250, 250, 0.5);
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 0px solid #000000;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
padding-top: 20px;
position: relative;
}
nav {
width: 15%
position: fixed;
float: left;
background: rgba(255, 250, 250, 0.5);
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 0px solid #000000;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
twitter {
width: 15%;
float: right;
background: rgba(255, 250, 250, 0.5);
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 0px solid #000000;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
Basically, I have three Divs inside my Main Div, that are overlapping when the screen size changes or resolution is smaller. I'm sure it's something stupid that I'm doing wrong, but here we are.
If I understand you correctly what you want to have is a column-layout?
<center>
<div id="Main">
<nav id="nav">Navigation goes here</nav>
<div id="twitter">Twitter goes here</div>
</div>
</center>
#main {
width: 100%;
}
#nav,
#twitter {
float: left;
color: #fff;
}
#nav {
width: 30%;
background: blue;
}
#twitter {
width: 70%;
background: green;
}
This example creates a two-column-layout with a navigation on the left and "Twitter" on the right. If you would like to have another column you would have to add it as a children to #main and change the width of the columns. (#nav, #twitter and your third)
If you want to change the size or the order for smaller screens you have to use media queries. What you could do is the following:
#media screen and (max-width: 600px) {
#nav,
#twitter {
float: none;
width: 100%;
}
}
Another thing I see in your HTML is that you tried to use as an element. This would be a Custom HTML element which won't work in every browser, especially not in older ones (without a polyfill/library like Polymer). You can read more about Custom HTML elements in this article on html5rocks: Custom elements. To keep things simple you should stick to the available HTML5 elements.
If I understand your problem correctly, then you don't want your divs to resize when you change your window screen. I suggest that you change your:
width: x%;
to:
width: xpx;
Or, if you want this solved AFTER the page is rendered then you might want to use the min-width attribute, that may be able to solve your problem.
min-width: xpx; or min-width: x%;
Could you show the HTML you are using? It might be that you are missing the meta viewport tag.
Another solution might be to use pixel values instead of percent (as Juan Carlos suggested) if you don't want the width to change:
#Main {
width: 800px;
}
As a side note I would recommend you to take a look at caniuse.com for prefixes. You don't need all of those prefixes for box-shadow and border-radius
Here's the rest of the code
Index:
<?php
echo "<center>";
echo "<div id='Main'>";
include("banner.php");
include("navbar.php");
include("twitter.php");
include("intro.php");
include("footer.php");
echo "</div>";
echo"</center>";
?>
Navbar
<?php
echo "<nav>
<table>
<tr>
<td>
<ul>
<li><a href= 'index.php' class='LinkHome'/></a></li>
<li><a href= 'products.php' class='LinkProduct'/></a></li>
<li><a href= 'fitch.php' class='LinkFitch'/></a></li>
<li><a href= 'argodealers.php' class='LinkArgo'/></a></li>
<li><a href= 'about.php' class='LinkAbout'/></a></li>
<li><a href= 'contact.php' class='LinkContact'/></a></li>
</ul>
</td>
</tr>
</table>
</nav>";
?>
Twitter
<?php
echo "
<twitter>
Twitter Stuff would go here
</twitter>";
?>
Messy, I know
Also, I had taken two of them out of Divs to see what would happen [edited CSS appropriately] - and this method had a better effect
Is it possible to add padding or margin around the scrollbar item or scrollbar-track? I've tried and can only get padding top/bottom. Adding padding to the UL has no effect on scrollbar. Negative margins on scrollbar have no effect. Ideas? JS Fiddle here.
::-webkit-scrollbar {
width: 12px;
margin:10px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
padding: 10px
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
You can see an example below, basically forget adding margin or padding there, just increase the width/height of scroll area, and decrease the width height of thumb/track.
Quoted from how to customise custom scroll?
body {
min-height: 1000px;
font-family: sans-serif;
}
div#container {
height: 200px;
width: 300px;
overflow: scroll;
border-radius: 5px;
margin: 10px;
border: 1px solid #AAAAAA;
}
div#content {
height: 1000px;
outline: none;
padding: 10px;
}
::-webkit-scrollbar {
width: 14px;
}
::-webkit-scrollbar-thumb {
border: 4px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
border-radius: 9999px;
background-color: #AAAAAA;
}
<div id="container">
<div id="content" contenteditable>
Click to type...
</div>
</div>
I created a margin-right effect using border-right on the scrollbar-thumb:
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
background: red;
border-right: 4px white solid;
background-clip: padding-box;
}
The scrollbar appears to have width 4px and margin-right 4px.
Here's a fiddle as well: https://jsfiddle.net/4kgvL93h/3/
You can add a margin to the scrollbar track;
#someID ::-webkit-scrollbar-track{
border-radius: 15px;
margin: 40px;
box-shadow: inset 7px 10px 12px #f0f0f0;
}
This solution make a real space between content and scrollbar (if a scrollable element doesn't have a transparent background). Useful for window scrollbars.
.scroll {overflow:auto;}
.scroll::-webkit-scrollbar {
width:16px;
height:16px;
background:inherit;
}
.scroll::-webkit-scrollbar-track:vertical {
border-right:8px solid rgba(0,0,0,.2);
}
.scroll::-webkit-scrollbar-thumb:vertical {
border-right:8px solid rgba(255,255,255,.2);
}
.scroll::-webkit-scrollbar-track:horizontal {
border-bottom:8px solid rgba(0,0,0,.2);
}
.scroll::-webkit-scrollbar-thumb:horizontal {
border-bottom:8px solid rgba(255,255,255,.2);
}
.scroll::-webkit-scrollbar-corner,
.scroll::-webkit-resizer {background:inherit;
border-right:8px solid rgba(255,255,255,.2); //optional
border-bottom:8px solid rgba(255,255,255,.2); //optional
}
Simply use the margin-block
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px F2F2F2;
border-radius: 0px;
margin-block: 15px;
}
#container{
height:400px;
background-color:white;
overflow-y:scroll;
border-radius:25px;
}
#content{
height:700px;
background-color:yellow;
padding:25px;
}
::-webkit-scrollbar{
width: 5px;
}
/* Track */
::-webkit-scrollbar-track{
box-shadow: inset 0 0 5px F2F2F2;
border-radius: 0px;
margin-block: 25px;
}
/* Handle */
::-webkit-scrollbar-thumb{
background: #8B8B8B;
border-radius: 27px;
border: 4px solid rgba(0, 0, 0, 0);
}
<div id="container">
<div id="content">
<br>
Click to type...
<br>
</div>
</div>
Another important attribute to add vertical or horizontal margin:
::-webkit-scrollbar-track {
margin: 0 30px;
}
With border-radius, neither box-shadow works properly nor does background-clip: padding-box.
I created a parent div on top of the div which needs scrolling. And fixed the height of parent div and put padding right in the child div. That worked well for my case.
<div class="parent h-10 overflow-scroll">
<div class="scroll child pr-2">
<!-- CONTENT -->
</div>
</div>
I'm trying to create a webpage with some tabs and I want the tabs that are not selected to "lie behind" the active tab. I've got different tabs with different appearances, one is plain square but the other is a trapezoid.
I've managed to create the shadow effect on the square tab by using
"-webkit-box-shadow: inset 0 -10px 30px -10px #555;"
but that doesn't work for the trapezoid.
This is a simplified example of my code:
HTML
<div id="first-tab">
</div>
<div id="second-tab">
</div>
<div id="main-content">
</div>
CSS
#first-tab {
position:relative;
float: left;
background-color: #ED3627;
-webkit-box-shadow: inset 0 -10px 30px -10px #555;
width: 100px;
height: 70px;
}
#second-tab {
position:relative;
float: left;
margin-left: 50px;
border-bottom: 70px solid #365F91;
border-right: 40px solid transparent;
height: 0;
width: 60px;
-webkit-box-shadow: inset 0 -10px 30px -10px #555; /* Doesn't work */
}
#main-content {
clear:both;
position:relative;
float: left;
height: 100px;
width: 250px;
background-color: #365F91;
}
JSFiddle: http://jsfiddle.net/Nx9ex/
Does anyone have any suggestions how I can fix this?
It only has to work for Chrome!
Thanks!
Not perfect, but can be a start:
demo
It didn't work because the second tab had really a height of 0px, and was in top of the trapezoid, the visible portion being the border.
I changed the method of creating a trapezoid, now it has all the space and the corner is hide setting there a transparent background:
#second-tab {
position:relative;
float: left;
margin-left: 50px;
background: linear-gradient(-114deg, transparent 30px, #365F91 31px);
height: 70px;
width: 100px;
-webkit-box-shadow: inset 0 -10px 30px -10px #555; /* Doesn't work */
}
The remaing problem is that the shadow is slightly visible in the transparent border