I've been working on a CSS3 stylesheet for a program. This is the current look of it:
As you can see, I like the design because it's very clean - but one thing that strikes me is that it's very flat.
/* REPORT */
.reportBox{
margin: 30px auto;
width: 60%;
height: 20%;
border-radius: 6px;
background-color: #FFFFFF;
padding: 10px 20px;
}
.reportBox li{
list-style:none;
}
.ulReport{
padding-left:0;
}
I want to create more of a separation/contrast between the content and background.
I was wondering how to make the the white square have more of a shadow or emboss effect/bevels look.
Example:
Could someone help show me an example of it using what I have? I'm assuming I have to mess with the borders and different shades from black to white.
Thank you!
Honestly, I like flat UI and a 1px border if it's needed for contrast, but in any case, you can achieve this effect with a double inset box-shadow like so:
.border {
box-shadow: inset 0.2em 0.2em 0.2em 0 rgba(255,255,255,0.5), inset -0.2em -0.2em 0.2em 0 rgba(0,0,0,0.5);
}
Demo: http://jsfiddle.net/96saR/
You can use the border:outset CSS rule:
button{
border:5px outset grey;
}
That works well but you have limited control on how the colors look. You can have complete control if you define each color:
button{
border-top:5px solid lightgrey;
border-bottom:5px solid grey;
border-left:5px solid lightgrey;
border-right:5px solid grey;
}
Either one works, outset is easier but defining all the colors gives you more control.
JSFiddle Example
Related
actually I am trying to make a dotted line with CSS I want it in circular form but I am getting it in square
The code I am using is
hr {border-style: none; border-top-style: dotted; border-color: grey; border-width: 6px; width: 5%; }
The result I am getting is
The result I want is
can anyone help me with that please.
The dotted keyword makes square "dots" in most browsers. You'll need to use a custom border image if you want to achieve the effect using the border property. You could also use a background image.
If you want to achieve a similar effect without an image, one approach would be to use multiple box shadows:
hr {
border: none;
width: 1rem;
height: 1rem;
background: lightgray;
border-radius: 1rem;
box-shadow:
-4rem 0 lightgray,
-2rem 0 lightgray,
2rem 0 lightgray,
4rem 0 lightgray;
}
<hr>
Use radial-gradient()
.hr {
height:20px;
background:radial-gradient(circle closest-side,grey 97%,transparent)
0 0/30px 100%; /* 20px + 10px of distance between circles */
}
<div class="hr"></div>
To avoid having partial circles:
.hr {
height:20px;
background:radial-gradient(circle closest-side,grey 97%,transparent)
0 0/30px 100% round;
}
<div class="hr"></div>
You have it right in your code. I simplified it a bit by setting border: none to undo the default border of <hr />. Then I set all of the top border's styles at once with border-top: dotted grey 15px:
hr {
width: 56%;
border: none;
border-top: dotted grey 15px;
}
<hr />
I try to create a handwritten looked underline to input.
With this complex border-radius, Chrome looks great. In Safari, however, these artifacts appear.
I tried to fix it with
-webkit-background-clip: padding-box;
from: https://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed
input {
border: none;
border-bottom: 2px solid;
border-radius: 130px 50px/4px 2px;
}
https://codepen.io/matzR/pen/dybpXgO
Safari: artefacts over the input
Safari seems to have some interesting decisions as far as figuring out the border color goes. Try zooming at this, for instance:
input {
border: 0.001px solid white;
border-bottom: 2px solid red;
border-radius: 130px 50px/4px 2px;
padding: 10px;
width: 300px;
}
I guess the linked workaround doesn't work because the border isn't inside the element?
But this is OK (codepen):
input {
border: 1px solid transparent;
border-bottom: 2px solid red;
border-radius: 130px 50px/4px 2px;
padding: 10px;
width: 300px;
}
<input>
My other considerations were using a SVG element for background and/or using border-image-slice to simulate the behaviour.
I have this CSS code for a textbox class and I'm on working on linux.
It's saved in a .css file and i'm using gedit. But the box-shadow property isn't recognized. All the others have that different font which shows a keyword or so. But not box-shadow. Any ideas please? It seems to work on windows when i use notepad++.
.textbox
{
background: white;
border: 1px solid #ffa853;
border-radius: 5px;
box-shadow: 0 0 5px 3px #00FFFF;
color: #666;
outline: none;
height:23px;
width: 275px;
}
You may be confusing box-shadow with text-shadow.
text-shadow applies to text, box applies to containers
I have made a small fiddle to demonstrate both
div {
width: 200px;
height: 300px;
background-color: #fff;
box-shadow: 10px 10px 5px grey;
}
p {
text-shadow: 1px 1px 2px black;
color: red;
font-size: 5em;
}
<div>
<p>
hello
</p>
</div>
if you are trying to adjust the appearance of an input (or a number of inputs)
a useful way of doing it is:
input[type="text"] {
/*your styles here*/
}
I want to style my own button. I've managed to get rid of the default style, but now I want to add a thin blue border around it, but don't know how. If I just get rid of the border: none, then the default style comes back, which is not what I want
This is my style.css:
input#hideshow{
margin: 0;
border: none;
border-radius: 20px;
padding: 2px 0px 2px 8px;
color: #4D7782;
font-size:18px;
background: #D3ECE5;
border-color: #7BC2E3; //not showing up though
width: 280px;
text-align: left;
}
You also need to specify border-style because it's default value is none demo.
But the easiest way is to use the border short hand and also specify
border-width:
border:1px solid #7BC2E3;
and remove border:none;
DEMO
CSS :
input#hideshow{
margin: 0;
border-radius: 20px;
padding: 2px 0px 2px 8px;
color: #4D7782;
font-size:18px;
background: #D3ECE5;
border:1px solid #7BC2E3;
width: 280px;
text-align: left;
}
U just specified the border color alone. U forget to specify border width
Demo
border: 2px solid #7BC2E3;
Your CSS works perfectly. But you don't want it to work this way. You set border to none so no border is displayed. You better should set to, for instance:
border: 1px solid #7BC2E3;
And remove the border-color line.
https://developer.mozilla.org/en-US/docs/Web/CSS/border
Try doing this:
input#hideshow{
margin: 0;
border:1px solid blue;
border-radius: 20px;
padding: 2px 0px 2px 8px;
color: #4D7782;
font-size:18px;
background: #D3ECE5;
border-color: #7BC2E3; //not showing up though
width: 280px;
text-align: left;
}
Hope this is what you want.
Try like this: Demo
border:1px solid #7BC2E3;
and remove
border:none from your code
I am trying use border inset with a light color for the inset, but, the colors chosen are simply not being shown correctly, this is the same in every browser
Here's the css - first box should have light inset border and second box slightly darker:
Here a fiddle: CSS inset border Fiddle
.box1 {
display: inline-block;
border: 4px inset #f7f7f7;
margin-top: 16px;
border-radius: 12px;
height: 34px;
background:#fff;
width:230px;
position:relative;
padding:10px;
}
.box2 {
display: inline-block;
border: 4px inset #cccccc;
margin-top: 16px;
border-radius: 12px;
height: 34px;
background:#f7f7f7;
width:230px;
position:relative;
padding:10px;
}
I've tried setting the border-color element separately but it makes no difference
Very odd behaviour?
This is how the inset border works in the spec (http://www.w3.org/TR/CSS2/box.html#border-style-properties). The bottom and right sides are lighter than the top and left; the latter two are the set color. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-style for all border options.