I written multiple borders using pseudo elements way of CSS-tricks.
<span class="something">
label: <span id="count">20</span>
</span>
CSS style is like this:
.something {
background-color: #B3B3B3;
padding: 10px;
position: relative;
border: 2px solid #000;
}
.something:before {
content: " ";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 2px solid #FF6666;
}
It looks good. but if I changed count, it cause change width and inner border isn't changed like this:
You can see this demo at jsfiddle.
How can I fix it?
do you really need flexible width of element .something? if the element .something would have fixed width, the problem would be solved:
.something {
display: block;
width: 200px;
background-color: #B3B3B3;
padding: 10px;
position: relative;
border: 2px solid #000;
}
HOWEVER
if you need flexible width, you should redraw the .something:before element after you increase the .something width. i updated jsfiddle for that - check it out.
the <div id="container"> is added only because jsFiddle does not support $(document) modifications.
Related
Basically I am trying to create a hexagonal shape, which would have a circle inside it and the extra parts of the circle should be hidden.
Demo: https://codepen.io/AskSaikatSinha/pen/jwXNPJ?editors=1100
My HTML:
<div class="container">
<div class="radius-rect"></div>
<div class="hex">
<div id="hexagon" >
<div class="semi-cir" ></div>
</div>
</div>
</div>
My CSS:
#hexagon {
width: 100px;
height: 55px;
background: #0088CD;
position: absolute;
border-top: 1px solid #0088CD;
border-bottom: 1px solid #0088CD;
border-radius: 2px;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #0088CD;
border-radius: 2px;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid #0088CD;
border-radius: 2px;
}
.semi-cir{
position: relative;
left: 10px;
background-color:#00A9F1;
height:100px;
width:100px;
-webkit-border-radius:75px;
-moz-border-radius:75px;
z-index: 1;
overflow: hidden;
}
The overflow: hidden does not have any effects.
Try to give background color as same as it is given to 'semi-cir'.
same trick is applied on link provided by you : https://codepen.io/AskSaikatSinha/pen/jwXNPJ?editors=1100
#hexagon {
width: 100px;
height: 55px;
background: #0088CD;
position: absolute;
top:50px;
left:50px;
border-top: 1px solid #0088CD;
border-bottom: 1px solid #0088CD;
border-radius: 2px;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #0088CD;
border-radius: 2px;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid #0088CD;
border-radius: 2px;
}
.semi-cir{
position: relative;
left: 10px;
background-color:#00A9F1;
height:100px;
width:100px;
-webkit-border-radius:75px;
-moz-border-radius:75px;
z-index: 1;
overflow: hidden;
}
.radius-rect{
height:200px;
background:#00a9f1;
}
<div class="container">
<div class="radius-rect"></div>
<div class="hex">
<div id="hexagon" >
<div class="semi-cir" ></div>
</div>
</div>
</div>
See the definition of the overflow property by MDN:
The overflow CSS property specifies whether to clip content, show scrollbars, or display overflowing content when it is too large for its block-level container.
(...)
hidden: Content is clipped if necessary to fit the content box. No scrollbars are provided.
The content of the element is clipped. Properties like background, border are part of the elements so are not clipped. You would have to apply overflow: hidden on the parent (#hexagon) to hide what is exceeding of the childreen (.semi-cir).
However, I do not know what you are thing to render precisely. If you simply want a "semi-circle" like the class name suggest, you can wrap your full circle in a parent with overflow just big enough to hide one of its half.
If you make like the circle is inside the hexagon with a non-linear separation, you can stack several of the "circles parts" described above.
But all of this is definitively over-engineered, and overflow is not the right property for that. You can take a look at the clip and clip-path properties that were made for this usecase.
The clip CSS property defines what portion of an element is visible. The clip property applies only to absolutely positioned elements, that is elements with position:absolute or position:fixed.
-- https://developer.mozilla.org/en/docs/Web/CSS/clip
The clip-path CSS property prevents a portion of an element from getting displayed by defining a clipping region to be displayed i.e, only a specific region of the element is displayed. The clipping region is a path specified as a URL referencing an inline or external SVG, or shape method such as circle(). The clip-path property replaces the now deprecated clip property.
-- https://developer.mozilla.org/en/docs/Web/CSS/clip-path
Here are some great article about it:
https://css-tricks.com/clipping-masking-css/
https://www.html5rocks.com/en/tutorials/masking/adobe/
However, be careful of the browser support. clip is deprecated and clip-path is not supported by IE and Edge.
I want to create something like this.
I'm realy tired, cuz i can create only line with similar width like heading. I have to create "smaller" line then heading. Tried done it with ::before, but it doesn't work for me. Is there any possible way to create it.
<h1>Some heading here</h1>
http://jsfiddle.net/53zxor2k/
h1 {
display: inline-block;
position: relative;
}
h1::after {
content: '';
position: absolute;
left: 10%;
display: inline-block;
height: 1em;
width: 70%;
border-bottom: 1px solid;
margin-top: 5px;
}
Change the width to how long you would like it to be, and the "left" to where the line is located, and increase the "margin-top" to make it farther away from the text.
http://jsfiddle.net/53zxor2k/1/
h1 {
position: relative;
text-align: center
}
h1:before{
content: '';
position: absolute;
left: 50%;
bottom: -6px;
width: 130px;
height: 2px;
background: red;
transform:translateX(-65px) /* width/2 */
}
<h1>some heading here</h1>
<h1>some <span style="border-bottom: 2px solid red;">heading</span> here</h1>
You can simply put a border under a specific word if that is what you are attempting to do.
i want to draw something like this in html.is that possible in html that i can label the rectangle ? i think may be by using <hr> ?
at the moment i have just draw a rectangle
here is the code
<div style="width:150px;height:80px;border:1px solid #000;">This is a rectangle!</div>
how can i draw lines around it and then label it
You can construct the lines and labels with pseudo elements and data attributes using just 2 elements
FIDDLE
Markup:
<div data-label1="a" data-label2="b">
<span data-label3="c">XYZ Pty Ltd</span>
</div>
CSS
div
{
width:150px;
height:80px;
border:1px solid #000;
font-size: 25px;
text-align:center;
margin: 100px;
position: relative;
background: #fff;
}
span
{
padding: 10px 20px;
display: inline-block;
}
div:before, div:after
{
content: attr(data-label1);
position:absolute;
left: -50px;
top: 40px;
width: 50px;
height: 1px;
z-index: -1;
background: #000;
text-align:left;
font-size: 18px;
}
div:after
{
content: attr(data-label2);
right:-50px;
left: auto;
text-align: right;
}
span:after
{
content: attr(data-label3);
position:absolute;
left:0;right:0;
margin: auto;
padding-top:100px;
top:20px;
font-size: 18px;
width: 1px;
height: 0;
z-index: -1;
background: #000;
}
This code will give you the output you want but this is a kind of hard coding.
<div style="display:inline-block; position:relative;top:20px;">a</div>
<div class="hLine" style="width:150px;height:1px;background:#000;display:inline-block;position:relative;top:20px;"></div>
<div style="width:150px;height:80px;border:1px solid #000;display:inline-block;position:relative;left:-5px;">This is a rectangle!</div>
<div class="hLine" style="width:150px;height:1px;background:#000;display:inline-block;position:relative;top:20px;left:-10px;"></div>
<div style="display:inline-block; position:relative;top:20px;">b</div>
<div class="vLine"style="height:40px;width:1px;background:#000;position:relative;left:230px;"></div>
<div style="position:relative;left:230px;">c</div>
For line segments don’t use
<hr>
because its width is dependent on the width of the parent container. So in order to set its width you need to introduce a div to restrict its width. so instead of creating two elements. create the line with just div by keeping its height:0px, and width: desired width. you got your horizontal line segment. If you want a vertical line then keep width zero and height the desired amount.
Hope this helps you out.
You can do using normal HTML and css or using HTML5 Canvas,I am giving you with html and css
http://jsbin.com/IlArOTE/1/edit
how is it possible to do that, compatible, good looking and responsive ? I think to make the H2 box with a background, but it make a lot of problem interacting with the background... it's a lot of png. I prefer a way to do it with pure css, padding, margin etc
full resolution image (too see texture)
This can be done with any semantically appropriate element of your choice, without having to set a background color.
http://cssdeck.com/labs/n2z0icvf
<h1>Technique</h1>
h1 {
overflow: hidden;
padding-left: 2em;
}
h1:before,
h1:after {
content: " ";
display: inline-block;
border-bottom: 2px solid;
position: relative;
vertical-align: middle;
width: 50%;
}
h1:before {
right: 0.5em;
margin-left: -50%;
}
h1:after {
left: 0.5em;
margin-right: -50%;
width: 100%;
}
Working fiddle: http://jsfiddle.net/58JCY/
HTML:
<fieldset>
<legend>LEVE TECHNIQUE</legend>
</fieldset>
CSS:
fieldset {
border:none;
border-top: 1px solid #999;
}
legend {
padding: 0 5px;
}
I have the following 4 divs with the CSS below. The problem is, the border on the red span draws over the others. How can I avoid this? I tried adding margins to spanRed, even negative margins, neither of which worked.
http://jsfiddle.net/eh9rM/
Bonus points This doesn't work in IE (8,9 tested) at all... only the blue div shows up. :)
<div id="spanBlue"></div>
<div id="spanGreen"></div>
<div id="spanOrange"></div>
<div id="spanRed"></div>
#spanBlue {position: fixed;
top: 0px; left: 0px;
height: 100%;
width: 10%;
background-color: #4D9DB8;
border-right: 10px solid #045B6F;
z-index: 1;}
#spanGreen {position: fixed;
top: 0px; left: 0px;
height: 10%;
width: 100%;
background-color: #A4AC79;
border-bottom: 10px solid #34655F;
z-index: 1;}
#spanOrange {position: fixed;
top: 0px; left: 0px;
height: 10%;
width: 10%;
background-color: #FA9D26;
border-right: 10px solid #045B6F;
z-index: 2;}
#spanRed {position: fixed;
bottom: 0px; right: 0px;
height: 90%;
width: 90%;
background-color: WHITE;
margin-top: 20px;
margin-left: 20px;
border-top: 10px solid #B52024;
border-left: 10px solid #B52024;
z-index: 3;}
You have two options:
Add div { box-sizing: border-box }. This switches the elements to the 'traditional' model, where borders and paddings are included in the width (supported from IE8+)
Use the Flexible Box model (IE10+)
Add the borders as pseudo-elements (IE8+)
Using pseudo-elements (remove the border from #spanRed):
#spanRed:after {
content:' ';
display:block;
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
border:4px solid red;
}
Bear in mind that using position:fixed as the basis for a layout is very fragile.
edit: if you need IE7 support, add the extra element via JS:
$('#spanRed').append('<span class="after" />')
Then reference it in the CSS. Be aware that you have to repeat the whole style, you can't use both selectors together otherwise IE7 ignores the rule.
Or, since these are all "useless" elements anyway, just add it to the HTML:
<div id="spanRed">
<span class="inner"></span>
</div>
Here's your code using that: http://jsfiddle.net/eh9rM/2/