Hello. My problem is that I would like .mylargeframe to strecth across the entire width of the browser.
CSS
.mylargeframe {
background: linear-gradient(top, #fff, #f8f8f8);
border: 1px solid #d0d2d5;
border-bottom: 1px solid #bebfc2;
border-radius: 4px;
margin: 0 0 20px 0;
padding: 20px;
width: 80%;
overflow: auto;
}
fieldset {
background:#ebeced;
border: none;
border-top: 1px solid #d0d2d5;
border-radius: 0 0 4px 4px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
margin: 5px 0 -20px -20px; padding: 18px 20px;
width: auto;
}
fieldset input {
margin: 0;
width: auto;
}
HTML
<html>
<div class="mylargeframe">
<fieldset>
test
</fieldset>
</div>
</html>
The problem is that it is not completely filled, but it is almost there. I am using Firefox and Chrome
Replace the width: auto; in fieldset with 100%.
fieldset
{
background:#ebeced;
border: none;
border-top: 1px solid #d0d2d5;
border-radius: 0 0 4px 4px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
margin: 5px 0 -20px -20px; padding: 18px 20px;
width: 100%;
}
Now, the fieldset will take up the width of its parent.
This way the fieldset will fill your div ;)
fieldset
{
width:100%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
You'll need the box sizing, otherwise the width will be 100% + margins
Related
I would like to have a Triple Border only one side of a rectangle Without using an Extra Html tag.The Code I have tried so far is Given Below.
Method#1
#element {
width: 100px;
height: 100px;
box-shadow: 0 0 0 3px #000, 0 0 0 6px #f00, 0 0 0 9px #000;
}
<div id="element"></div>
Method#2
#element {
width: 100px;
height: 100px;
border: 3px solid black; /* inner border */
box-shadow: 0px 0px 0px 15px black; /* outer 'border' */
outline: 12px solid green; /* fill */
margin-left: 30px;
margin-top: 30px;
}
<div id="element"></div>
But this can be only use in case if you need Triple Border on all Sides,Instead Of that I only needs the Triple Border on One side.Is it Possible?.Please Help me
Using this CSS Property
box-shadow: 5px 0px 0 0px #000, 10px 0px 0 0px #f00, 15px 0px 0px 0px #000;
#element {
width: 100px;
height: 100px;
box-shadow: 5px 0px 0 0px #000, 10px 0px 0 0px #f00, 15px 0px 0px 0px #000;
}
<div id="element"></div>
You can use before and after to achieve this.
#element {
width: 100px;
height: 100px;
border-right: 5px solid black; /* inner border */
/* box-shadow: 0px 0px 0px 15px black; */ /* outer 'border' */
/* outline: 12px solid green; */ /* fill */
margin-left: 30px;
margin-top: 30px;
}
.triple-right {
position: relative;
}
.triple-right:before, .triple-right:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 5px;
}
.triple-right:before {
background-color: green;
right: -10px;
}
.triple-right:after {
background-color: black;
right: -15px;
}
<div id="element" class="triple-right"></div>
Here is another idea using gradient:
#element {
width: 100px;
height: 100px;
background:
linear-gradient(#000,#000) right/ 5px 100%,
linear-gradient(red,red) right/ 10px 100%,
linear-gradient(blue,blue) right/ 15px 100%;
/*And so on if you want more border*/
background-repeat:no-repeat;
}
<div id="element"></div>
I am writing my CSS in JS using radium and thus, I can't use pseudo classes :after and :before (which would have been made the solution very simple). How should I create the border as show in the below diagram.
Here, grey border is the same color as the main background color, which is separated by white border.
So far my CSS looks like this
upload: {
position: "absolute",
left: "0",
top: "0",
overflow: "hidden",
width: "100%",
height: "100%",
borderRadius: "50%",
backgroundColor: "#ccdde5",
cursor: "pointer"
}
which will produce the output like this
Try using nested box-shadows:
.circle-border-2 {
border-radius: 50%;
width: 200px;
height: 200px;
margin: 10px;
background-color: #ccdde5;
box-shadow: 0 0 0 5px white,
0 0 0 10px #ccdde5;
}
<div class="circle-border-2"></div>
This approach even allows you to add multible borders:
.circle-unicorn {
border-radius: 50%;
width: 200px;
height: 200px;
margin: 50px;
background-color: white;
box-shadow: 0 0 0 5px #9932FF,
0 0 0 10px #B231FD,
0 0 0 15px #FF31EB,
0 0 0 20px #FF3291,
0 0 0 25px #FE3030,
0 0 0 30px #FE6031,
0 0 0 35px #FFC132,
0 0 0 40px #30FE5B,
0 0 0 45px #5230FF,
0 0 0 50px #3E25BF;
}
<div class="circle-unicorn"></div>
HaNdTriX's answer is a good one.
Another possible solution:
.circle-shadow-border {
border-radius: 50%;
width: 200px;
height: 200px;
background-color: gray;
box-shadow: 0px 0px 0px 5px white inset;
border: solid 5px gray;
margin: 20px;
}
<div class="circle-shadow-border"></div>
Or use background-clip: content-box;:
.circle-border-backclip {
border-radius: 50%;
width: 200px;
height: 200px;
background-color: gray;
margin: 20px;
border: solid 5px gray;
padding: 5px;
background-clip: content-box; /* support: IE9+ */
}
<div class="circle-border-backclip"></div>
for more information you could see https://css-tricks.com/snippets/css/multiple-borders/.
You can do this very easily, by simply adding an background color, padding and solid border.
I created a quick example: https://jsfiddle.net/o81rre69/
.upload {
border-radius: 50%;
padding: 5px;
height: 150px;
width: 150px;
background: #FFF;
border: 3px solid #BBB;
}
Hope it helps!
This is driving me nuts, I've seen it before but can't replicate it or find it or any resources for it. What I am doing is a vertical ribbon with a leather texture and a "stitched pattern". The way the stitches work is simple enough, inner divs with dashed borders, and even the ribbon shape is easy enough using the pseudo :after class, but combining the two is just not going to plan.
This is what I have for css that is working so far (it is all done with css minus the leather texture):
.wrapleather {
width:100px;
height:120px;
float: right;
margin-right:20px;
background-image : url("leather.png");
border-radius: 5px;
-webkit-box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
position:relative;
}
.wrapleather:after {
content: '';
display: block;
width: 0;
height: 105px;
position: absolute;
top: 0;
left: 0;
border-width: 0 50px 15px 50px;
border-style: solid;
border-color: transparent transparent #cdc0a8;
position:absolute;
top:0;
left:0;
}
.wrapleather .outside {
width:90px;
height:110px;
margin: 4px;
border-radius: 5px;
border: 1px dashed #aaa;
box-shadow: 0 0 0 1px #f5f5f5;
}
.wrapleather .inside {
width:90px;
height:110px;
border-radius: 5px;
}
<div class="wrapleather">
<div class="outside">
<div class="inside">
<p class="font">Leather</p>
</div>
</div>
</div>
Additionally the shadow is remaining in a "square" format and not taking the shape of everything. To clarify I am not asking anyone to debug or anything like that, I am simply asking for alternative or further methods to be shared that could achieve the desired results, css is still something I am in the process of learning so any advice or anything of that nature that you could give would be appreciated, and if you need any additional info please let me know. Thanks!
There is a way to do what you want with CSS only, but it won't work on all browsers. If you want the best browser support, you should probably use an image.
Here is a demo (you may have noticed I only use a single element, as you shouldn't introduce extra markup just for styling): http://jsfiddle.net/joshnh/eUje5/
HTML
<div class="ribbon"></div>
CSS
.ribbon {
background: #eee;
border-left: 1px dashed #aaa;
border-right: 1px dashed #aaa;
border-radius: 5px 5px 0 0;
box-shadow: 5px 0 0 #eee,
-5px 0 0 #eee;
height: 120px;
margin: 0 5px;
position: relative;
width: 90px;
-webkit-filter: drop-shadow(0 2px 5px hsla(0,0%,0%,.5));
}
.ribbon:after,
.ribbon:before {
border-top: 15px solid #eee;
content: '';
height: 0;
position: absolute;
top: 100%;
width: 0;
}
.ribbon:after {
border-left: 50px solid transparent;
right: -6px;
}
.ribbon:before {
border-right: 50px solid transparent;
left: -6px;
}
So, I wanted to make sure that I wasn't losing my mind and that this ribbon effect is actually possible on modern browsers without relying on webkit specific filters. So here it is for all those who come across this later.
You just need to be more diligent with how you model your box-shadows.
Note that when increasing the width, you'll need to subsequently decrease the angle at which you're rotating and skewing the :before and :after elements.
Example:
.ribbon {
background: #eee;
border-left: 1px dashed #aaa;
border-right: 1px dashed #aaa;
border-top: 1px dashed #aaa;
box-shadow: 5px 0 0 #eee,
-5px 0 0 #eee,
0 -5px 0 #eee,
5px -5px 0 #eee,
-5px -5px 0 #eee,
5px 1px 5px 5px #888;
height: 120px;
margin: 10px 5px 0 5px;
position: relative;
width: 90px;
z-index: 3;
}
.ribbon:after,
.ribbon:before {
content: '';
position: absolute;
top: calc(100% - 1px);
width: calc(50% + 1px);
border-bottom: 1px dashed #aaa;
}
.ribbon:after {
transform: rotateZ(20deg) skewX(20deg) translateY(-2px);
transform-origin: top right;
right: -1px;
height: 40px;
background-color: #eee;
border-right: 1px dashed #aaa;
box-shadow: 5px 0 0 #eee,
0 5px 0 #eee,
5px 5px 0 #eee,
15px 15px 5px -5px #888,
0 15px 5px -5px #888,
15px 0 5px -5px #888;
}
.ribbon:before {
transform: rotateZ(-20deg) skewX(-20deg);
transform-origin: top left;
left: -1px;
height: 40px;
background-color: #eee;
border-left: 1px dashed #aaa;
box-shadow: -5px 0 0 #eee,
0 5px 0 #eee,
5px 5px 0 #eee,
15px 15px 5px -5px #888,
0 15px 5px -5px #888;
}
<div class="ribbon"></div>
My css:
#main {
display: block;
top: 0px;
bottom: 0px;
height: auto;
margin-top: 55px;
max-width: 100%;
overflow: scroll;
position: absolute;
}
#content {
background-color: #fff;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #eee;
-moz-box-shadow: inset 0 0 5px #000;
-webkit-box-shadow: inset 0 0 5px #000;
box-shadow: inset 0 0 5px #000;
margin: 5px;
}
What i want:
What i get:
Red = absolute header
White = #main with "blue" scrollbars
Green = #content border with the text in it.
I guess it is quite easy to solve but i still couldnt manage after trying for ages :P
Updated/simplified jsfiddle:
http://jsfiddle.net/YAgW2/9/
Your CSS should be:
#main {
display: block;
top: 0px;
bottom: 0px;
height: auto;
margin-top: 55px;
max-width: auto;
overflow: scroll;
position: absolute;
}
#content {
background-color: #fff;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #eee;
-moz-box-shadow: inset 0 0 5px #000;
-webkit-box-shadow: inset 0 0 5px #000;
box-shadow: inset 0 0 5px #000;
margin: 5px;
width:auto;
}
Use the following CSS:
#main {
display: block;
top: 0px;
bottom: 0px;
height: auto;
margin-top: 55px;
max-width: 100%;
overflow: scroll;
position: absolute;
background-color: green;
}
#content {
white-space: nowrap;
padding: 5px;
color: white;
background-color: red;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #eee;
-moz-box-shadow: inset 0 0 5px #000;
-webkit-box-shadow: inset 0 0 5px #000;
box-shadow: inset 0 0 5px #000;
margin: 5px;
}
And the following HTML:
<div>
<div id="main">
</div>
<div id="content" style="position:absolute">
Try to extend this text
</div>
</div>
Could you not move #content outside of #main and position it where you want, i.e. on top of #main?
Adding float: left; to #content solves the display issue!
Basically, I need to make a header, styled like this:
Is there a full css way, or do I need to use background-images?
Yes, you can do it using only CSS, but it's not easy and the result is... well, ugly.
You might want to check this as well: CSS for inverted curved tabs
EDIT: I got a better idea today, check this http://dabblet.com/gist/2762234
The CSS is as follows:
h1 {
min-width: 150px;
height: 30px;
margin: 0;
/**border: solid 2px #979797;/**/
border-bottom: none;
border-radius: 8px 0 0 0;
box-shadow: -2px -2px 2px #a5a5b1;
display: inline-block;
position: relative;
background: linear-gradient(#e8e8ea, #f8f8fa);
}
h1:before {
/**top: -2px;/**/
/**/top: 0;/**/
right: -23px;
width: 30px;
height: 30px;
border-radius: 0 8px 0 0;
/**border: solid 2px #979797;/**/
border-left: none;
border-bottom: none;
box-shadow: 2px -2px 2px #a5a5b1;
/** outline: solid 1px red; /* uncomment this to check position */
transform: skewX(30deg);
position: absolute;
background: linear-gradient(#e8e8ea, #f8f8fa);
content: '';
}
h1:after {
right: -44px;
/**bottom: 0;/**/
/**/bottom: 2px;/**/
width: 16px;
height: 8px;
/**border: solid 2px #979797;/**/
border-top: none;
border-right: none;
border-radius: 0 0 0 8px;
box-shadow: inset 2px -2px 2px #a5a5b1, -4px 4px 2px #f8f8fa;
/** outline: solid 1px red; /* uncomment this to check position */
transform: skewX(30deg);
position: absolute;
content: '';
}
div {
min-height: 130px;
margin-top: -7px;
/**border: solid 2px #979797;/**/
border-radius: 0 8px 0 0;
box-shadow: -2px -2px 2px #a5a5b1, 2px -2px 2px #a5a5b1;
background: linear-gradient(#f8f8fa, #f6f6f8);
}
It can be made to look prettier, but that would require a fixed width for the heading and a pseudo-element on the div.
You can probably achieve this by using a couple of elements stacked over eachother.
I don't think that is something you would want for production, so my advice would be to go for the background image.