I am trying the simulate the same effect on the picture for an html page. Is it possible to accomplish this without using an image or JS? I know it can be done horizontally by adding border color top and bottom but I couldn't find a way to do it horizantally.
You can add a grey border-bottom to your element and overlap it partially with a red ::after pseudo-element:
h1 {
border-bottom: 2px solid #E5E5E5;
}
h1:after {
content: '';
display: block;
border-bottom: 2px solid #EC1C24;
margin-bottom: -2px;
max-width: 200px;
}
<h1>Haberler</h1>
.line {
background:gray;
position:relative;
height:2px;
}
.line:before {
content:'';
background:red;
width:30%;
height:2px;
position:absolute;
}
<div class="line">
hr {
margin: 0;
width: 100%;
height: 5px;
background-color: red;
border: 0;
}
hr:after {
content: '';
display: block;
border-bottom: 5px solid green;
max-width: 50%;
}
<hr/>
You can combine a few inline block elements with borders, but I'm not sure if it's worth it (instead of using an image):
div {
width: 120px;
height: 80px;
border-bottom: red 2px solid;
border-top: blue 2px solid;
display: inline-block;
}
#a {
width: 240px;
border-top: green 2px solid;
border-bottom: gray 2px solid
}
<div></div><div id="a"></div>
<table border="0" cellspacing="0" cellpadding="0" style="width:100%;">
<tr style="height:2px;">
<td style="width:10%;background-color:#003b67;"></td>
<td style="width:90%;background-color: #4cff00;"></td>
</tr>
</table>
An extension to #Thilina Dharmasena original post.
I used his implementation to create a progress bar with styled-components
<ProgressBar scroll='90%' />
const ProgressBar = styled.div`
background: #191923;
height: 4px;
position: relative;
&:before {
content: '';
background: #ffc107;
width: ${({ scroll }) => scroll};
height: 4px;
position: absolute;
}
`;
Related
I would like to add a white border over all my images in my content div using css. Images in the header and footer div areas should not be affected. how do I achieve this? See example image below. There are images of different sizes on the web pages.
See image:
You can do this without having an extra element or pseudo element:
http://cssdeck.com/labs/t6nd0h9p
img {
outline: 1px solid white;
outline-offset: -4px;
}
IE9&10 do not support the outline-offset property, but otherwise support is good: http://caniuse.com/#search=outline
Alternate solution that doesn't require knowing the dimensions of the image:
http://cssdeck.com/labs/aajakwnl
<div class="ie-container"><img src="http://placekitten.com/200/200" /></div>
div.ie-container {
display: inline-block;
position: relative;
}
div.ie-container:before {
display: block;
content: '';
position: absolute;
top: 4px;
right: 4px;
bottom: 4px;
left: 4px;
border: 1px solid white;
}
img {
vertical-align: middle; /* optional */
}
You could try this:
Html:
<div class="image">
<div class="innerdiv">
</div>
</div>
Css:
.image
{
width: 325px;
height: 239px;
background: url("https://i.picsum.photos/id/214/325/239.jpg?hmac=7XH4Bp-G9XhpuKz5vkgES71GyXKS3ytp-pXCt_zpzE4") 0 0 no-repeat;
background-size: cover;
padding: 10px;
}
.innerdiv
{
border: 1px solid white;
height:100%;
width: 100%;
}
jsFiddle
Hope this is what you meant :)
I solved this with box-shadow: inset and it works with IE11 and up. I wanted a border in the corners around the image but this examples have the border 10px inset. It requires a parent div with :before or :after element but handles it very well.
.image {
width: 100%;
height: auto;
}
.image__wrapper {
position: relative;
}
.image__wrapper:before {
content: '';
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
box-shadow: inset 0 0 0 3px red;
}
CodePen Demo
Whatever the div ID or class is you can simply add
#yourDivIDExample {
...
}
#yourDivIDExample img{
border:1px solid #ffffff;
}
This will create a border around the images in the div itself.. same works for classes or global rule also ..
img {
border:1px solid #ffffff;
}
You can do something like this DEMO
HTMl
<div class="imgborder">
<div class="in-imgborder">
</div>
</div>
CSS
.imgborder {
width: 300px;
height: 300px;
position: relative;
background: url(http://placekitten.com/300/300) no-repeat;
}
.in-imgborder {
width: 290px;
height: 290px;
position: absolute;
top: 4px;
left: 4px;
border: 1px solid red;
}
I am trying to display a few words inside of a CSS styled arrow. I have figured out how to create an arrow with CSS which works fine. however, when I place the arrow within <h2>, complete arrow is not being displayed.
The source code is as follows
HTML
<div style="background-color: yellow;">
<h2><span style="background: green;">This is what I want</span><span class="arrow-right"></span><span style="margin-left: 50px;">is this what you want?</span></h2>
</div>
STYLE
<style>
.arrow-right::after{
content: "";
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid green;
}
</style>
The output is as follows
The arrow pointer is not being displayed completely. Am I using the elements wrongly? I will need the div / h2 height to be bigger later, but at least that is not my concern right now since the arrow itself is not being displayed as desired.
Edit:
Sorry for my bad drawing. This sample below is what I want but of course the arrow would be lots nicer I just used paints to give it a quick draw.
Is this what you're looking for?
http://jsfiddle.net/61tc5em9/2/
HTML
<div id="container">
<div id="arrow">text text text</div>
<div id="content">text text text text</div>
</div>
CSS
#container {
height: 75px;
background-color: black;
position: relative;
white-space: nowrap;
}
#arrow {
width: 30%;
background-color: red;
text-align: center;
font-size: 1.5em;
line-height: 75px;
}
#arrow::after {
content: "";
border-top: 37px solid transparent;
border-bottom: 38px solid transparent;
border-left: 50px solid red;
position: absolute;
left: 30%;
}
#content {
color: yellow;
font-size: 1.5em;
position: absolute;
left: 50%;
top: 25px;
}
Hope this helps. Let me know if you need any changes.
You need font-size:0; for the arrow.
.arrow-right::after {
content: "";
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid green;
font-size: 0;
position: relative;
top: -8px;
}
span{
display: inline-block;
}
<div style="background-color: yellow;">
<h2><span style="background: green;">This is what I want</span><span class="arrow-right"></span><span style="margin-left: 50px;">is this what you want?</span></h2>
</div>
Recommendations for improving your code and make it more dynamic:
Use :after in the statement element itself (this way you will avoid
the extra code in html and you can position the arrow relative to the element).
Align it to the right using left: 100% (so it is always position to
the right regardless of the width of the arrow).
Use top: 50% and margin-top: -(height/2)px to center it vertically.
Just like this:
.wrapper {
padding: 2px 0;
background: yellow;
}
.statement {
position: relative;
background: green;
}
.statement:after {
content:"";
border-top: 15px solid transparent; /*change the border width to set the desired hieght of the arrow*/
border-bottom: 15px solid transparent;
border-left: 15px solid green; /*change the border width to set the desired width of the arrow*/
position: absolute;
left: 100%;
top: 50%;
margin-top: -15px; /*the element has height= 30px (border-top + border-bottom) to center it -height /2 */
}
h2{
margin: 0;
}
<div class="wrapper">
<h2>
<span class="statement">This is what I want</span>
<span style="margin-left: 50px;">is this what you want?</span>
</h2>
</div>
Note that in this way you have a more semantic code because you don't have dummy element in your html and if you want more statement it will put the arrow behind automatically like this:
.wrapper {
padding: 2px 0;
background: yellow;
margin-bottom: 10px;
}
.statement {
position: relative;
background: green;
}
.statement:after {
content:"";
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid green;
position: absolute;
left: 100%;
top: 50%;
margin-top: -15px; /*the element has height= 30px (border-top + border-bottom) to center it -height /2 */
}
h2{
margin: 0;
}
<div class="wrapper">
<h2>
<span class="statement">One statement</span>
<span style="margin-left: 50px;">Good</span>
<span class="statement">Two statement</span>
<span style="margin-left: 50px;">Great</span>
</h2>
</div>
<div class="wrapper">
<h2>
<span class="statement">Where is the arrow?</span>
<span style="margin-left: 50px;">Do not worry about it</span>
</h2>
</div>
So I got this fiddle: http://jsfiddle.net/69WVx/3/
I have also attached the code. Basically, I want test2 and test3 to be inline with one another. I also want the widths of test2 and test3 to be %, as it's for a mobile responsive button.
Can this be done the way I'm doing it? Or am I screwing this all up?
As you can see, the DIV's test2 and test3 collapse on top of one another, as opposed to being inline.
HTML:
<div class="test">
<div class="test1">
<div class="test2">ORANGE</div>
<div class="test3">APPLE</div>
</div>
</div>
CSS:
.test {
position: relative;
width: 300px;
height: 100px;
border: 1px solid #FF0000;
}
.test1 {
width: 90%;
height: 50%;
border: 1px solid;
position: relative;
}
.test2 {
width: 40%;
border: 1px solid #00FF00;
display: inline;
position: absolute;
}
.test3 {
width: 40%;
border: 1px solid;
display: inline;
position: absolute;
}
Try something like this , Trying my best to help .
Don't know if this is what you want. Fiddle
If you want to keep position absolute do the following
.test2 {
width: 40%;
border: 1px solid #00FF00;
display: inline-block;
position :absolute;
}
.test3 {
width: 40%;
border: 1px solid;
display: inline-block;
position :absolute;
margin-left:40%;
}
Or Even this will do
.test2 {
width: 40%;
border: 1px solid #00FF00;
display: inline-block;
}
.test3 {
width: 40%;
border: 1px solid;
display: inline-block;
}
Apply display: inline-block; for the inner blocks such as .test2 and .test3, so that you can achieve this..
Check this Fiddle...
CSS:
.test {
position: relative;
width: 300px;
height: 100px;
border: 1px solid #FF0000;
}
.test1 {
width: 90%;
height: 50%;
border: 1px solid;
position: relative;
}
.test2 {
width: 40%;
border: 1px solid #00FF00;
display: inline-block;
}
.test3 {
width: 40%;
border: 1px solid;
display: inline-block;
}
Try this:
Demo
Your mistake is:
1.You let .test2&.test3 position:absolute,this will cause them to be deleted from the normal flow.If you don't define the top,left,right,bottom of the elements,they will cover each other of course.However,you don't have the need to use "position" here.
2.Div should be displayed inline-block. Inline elements do not have width or height properties.So you can see though you let the divs width:40% ,it doesn't work. Let them display:inline-block;
Well here is what i tried i guess this is what u want ...
HTML :
<div class="test">
<div class="test1">
<div class="test2">ORANGE</div>
<div class="test3">APPLE</div>
</div>
</div>
CSS :
.test {
position: relative;
width: 300px;
height: 100px;
border: 1px solid #FF0000;
}
.test1 {
width: 90%;
height: 50%;
border: 1px solid;
position: relative;
}
.test2 {
width: 40%;
border: 1px solid #00FF00;
display: inline-block;
position: relative;
}
.test3 {
width: 40%;
border: 1px solid;
display: inline-block;
position: relative;
}
here is the fiddle ----> DEMO
Well the reason why it overlapped was because you have positioned it absolute ...... either give relative positioning or provide the positioning for an absolute layout in order to get what you wanted ....
The position:absolute properties in your CSS were causing both .test2 and .test3 to display on top of one another. Removing that property from both elements provides the inline appearance you're looking for.
Also, as Jc. points out below, the display properties should be set to inline-block instead of inline
.test2 {
width: 60%;
border: 1px solid #00FF00;
display: inline-block;
}
.test3 {
width: 30%;
border: 1px solid;
display: inline-block;
}
http://jsfiddle.net/69WVx/11/
Imagine (or if you can't imagine, watch) this piece of code:
<div class="block"></div>
<style>
.block {
width: 10px;
height: 10px;
display: block;
background-color: red;
border: 1px solid #000000;
border-bottom: 0;
}
</style>
Now look at the bottom line. This is my problem; I want the left and right border to be 1px longer (so the bottom border is the part between the left border and right border).
Is it possible to accomplish this??
This is a way to do it, since the box model does not support what you need, using only one div:
<div class="block"><div></div></div>
and the css:
.block {
width: 10px;
height: 10px;
border: 1px solid #000000;
border-bottom: 0;
padding-bottom: 1px;
}
.block div {
width: 10px;
height: 10px;
background-color: red;
}
This will extend the black border on the left and right side with 1px.
Try this :)
http://jsfiddle.net/z6ASC/
This is possible if you have two containers, one for the outside left/right borders, and one for the inside bottom-border. I've put together a demo showing this.
DEMO:
http://wecodesign.com/demos/stackoverflow-7074782.htm
<style type="text/css">
#borderOutside {
height: 200px;
width: 300px;
border:1px solid #900;
border-bottom: none;
padding-bottom: 5px; /*this is the gap at the bottom*/
}
#borderInside {
height: 100%;
border-bottom: 1px solid #900;
}
</style>
<div id="borderOutside">
<div id="borderInside"><!--Your Content--></div>
</div>
It can be done without adding any extraneous elements in your HTML via this strategy:
.block {
position: relative;
width: 10px;
height: 10px;
display: block;
background-color: red;
}
.block:before {
position: absolute;
content: '';
width: 10px;
height: 11px;
top: -1px;
left: -1px;
border: 1px solid #000;
border-bottom: none;
}
The pseudo element :before is only supported from IE8, but works in all other major browsers.
I am creating a vertical divider, that works fine. But the CSS is cumbersome.
The CSS is:
.headerDivider1 {
border-left:1px solid #38546d;height:80px;position:absolute;right:250px;top:10px;
}
.headerDivider2 {
border-left:1px solid #16222c;height:80px;position:absolute;right:249px;top:10px;
}
The HTML is:
<div class="headerDivider1"></div><div class="headerDivider2"></div>
The result is:
How could I tidy the HTML and CSS up?
.headerDivider {
border-left:1px solid #38546d;
border-right:1px solid #16222c;
height:80px;
position:absolute;
right:249px;
top:10px;
}
<div class="headerDivider"></div>
<div class="headerdivider"></div>
and
.headerdivider {
border-left: 1px solid #38546d;
background: #16222c;
width: 1px;
height: 80px;
position: absolute;
right: 250px;
top: 10px;
}
for vertical divider only
.divider {
border-left: 1px solid #000;
height: 100%;
}
I prefer using the after property for vertical divider using CSS because it's neither content nor a border.
.block {
position: relative; /* ADDED */
}
.block:after {
content: '';
position: absolute;
border-left: 1px solid black;
right: -10px;
height: 80%;
}
.block:last-child:after {
display: none; /* Hide the divider for the last block */
}