Insert space at position in border line - javascript

I'm displaying a horizontal line using css :
.horizontalLineBottom {
border-bottom:solid #6E6A6B;
border-width:1px;
}
Can I space be insterted a specific position on this line ?
So
______________________________________________
becomes
______________________________ ___

Another solution using border-width:
.line {
width: 20px;
height: 1px;
padding: 0;
border-width: 0 100px 0 150px;
border-style: solid;
border-color: red;
}
http://jsfiddle.net/dfsq/Uttxy/1/

:after or :before psuedo class can help you. Like in this Fiddle:
div {
width:100px;
height:100px;
border:1px solid #000;
margin:50px;
background:yellow;
position:relative;
}
div:after {
content: '';
height:60px;
width:1px;
position:absolute;
top:20px;
left:-1px;
background:yellow;
}

No with border in a block (just a border for a block).
You can add a background-image, if it fits your needs.

You cannot achieve this directly through CSS.
I would suggest 2 solutions
1 ) you can use _ character and make it look like a line and insert space where ever you want and give color attribute through CSS.
2) Use two elements, with first element having some width and some margin-right.
The margin right will give you the required space

You could use a background gradient on the element: http://jsfiddle.net/q652t/
Then you could create as many as you like
.line {
margin: 10px;
height: 1px;
width: 400px;
background: -webkit-linear-gradient(
left, gray 10%, white 10%, white 40%,
gray 40%, gray 60%,
white 60%, white 80%,
red 80%, red 100%);
}

You can't do it directly, but with a small workaround using a pseudo element. The trick is to create a small overlay with the same background color as the background underneath your element.
.verticalLineBottom {
position: relative;
border-bottom: 1px solid #6E6A6B;
}
.verticalLineBottom:after {
content: "";
position: absolute;
right: 20px;
bottom: -1px;
width: 100px;
height: 1px;
background: #fff;
}
Example: http://jsfiddle.net/zxdS7/
Unfortunately, it does not work if the background behind your element has a pattern.

I created this code for you, this fakes the result you're looking for.
.stopped-line {
/* basic styles here */
width: 100px; /* this is mandatory */
position: relative;
}
.stopped-line:before {
position: absolute;
bottom: 0;
display: block;
width: 70%; /* width in percentage of the line */
content: " ";
height: 1px; /* thickness of the line */
background: #000; /* color of the line */
}
.stopped-line:after {
position: absolute;
bottom: 0;
left: 80%; /* Where should the second line start? */
display: block;
width: 20%; /* width in percentage of the line */
content: " ";
height: 1px; /* thickness of the line */
background: #000; /* color of the line */
}
JSBin: click

Related

Font Awesome with Half Style CSS

I'm wondering if anyone can help me / If this is even possible.
I'm trying to half style (using halfstyle.js) the youtube font-awesome icon so that the icon is like the youtube logo (bottom half red, top half white)
I'd like to do this on hover, but I can't even seem to get this going for just as default.
JSFiddle
body {
background: rgba(0,0,0,.4);
}
.fa {
font-size: 10em;
color: white;
}
.fa-youtube {}
.halfStyle {
position:relative;
display:inline-block;
font-size:80px; /* or any font size will work */
color: transparent; /* hide the base character */
overflow:hidden;
white-space: pre; /* to preserve the spaces from collapsing */
}
.halfStyle:before { /* creates the top part */
display:block;
z-index:2;
position:absolute;
top:0;
height: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #f00; /* for demo purposes */
text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}
.halfStyle:after { /* creates the bottom part */
display:block;
position:absolute;
z-index:1;
top:0;
height: 100%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #000; /* for demo purposes */
text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}
<i class="fa fa-youtube textToHalfStyle"></i>
You cannot do that for FontAwesome i.fa icons because, already HalfStyle is based on the ::after and ::before pseudo elements. Also, FontAwesome uses :after for this. You need to create another element and give :hover option for achieving this.
Snippet
$(function () {
$(".textToHalfStyle").each(function () {
$(this).parent().append('<div class="cloned"></div>');
$(".cloned").append($(this).clone());
});
});
body {
background: rgba(0,0,0,.4);
font-size: 160px;
}
.fa {
color: #fff;
}
.cloned {
opacity: 0;
position: absolute;
display: block;
z-index: 1;
left: 8px;
top: 76px;
height: 0.65em;
overflow: hidden;
}
.cloned .fa {
position: relative;
top: -68px;
color: #f00;
}
.fa:hover ~ .cloned,
.cloned:hover {
opacity: 1;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<i class="fa fa-youtube textToHalfStyle"></i>

How to create vertical line using the css code in the given link?

Here is the link to another question on stackoverflow.
Css code to create horizontal line
I love the line created.
Here is the code I am using for horizontal lines on my site:
hr.fancy-line {
border: 0;
height: 5px;
}
hr.fancy-line:before {
top: -0.5em;
height: 1em;
}
hr.fancy-line:after {
content:'';
height: 0.5em;
top: 1px;
}
hr.fancy-line:before, hr.fancy-line:after {
content: '';
position: absolute;
width: 100%;
}
hr.fancy-line, hr.fancy-line:before {
background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 75%);
}
body, hr.fancy-line:after {
background: #f4f4f4;
}
-Some Text-
<hr class="fancy-line"></hr>
Now I want to know: how to modify this code so I would be able to create vertical lines. Here is the link where I have used the above code to create horizontal lines: Horizontal lines used
I styled the element with a narrow width and a tall height.
However, making a vertical line out of an <hr> seems non-semantic, so you might want to use a <span> or some other element.
body {
background: #f4f4f4;
}
hr.fancy-line {
border: 0;
height: 180px;
width: 5px;
margin: 0 auto;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
}
<hr class="fancy-line"></hr>
The way you implement the lines depends on the context in which you're using them. For example, if lines will be separating elements on the page, you might want to create them as pseudo-elements, like below:
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
position: relative;
display: inline-block;
width: 180px;
height: 180px;
background-color: #CCC;
}
ul li:not(:last-child) {
margin: 0 1em 0 0;
}
ul li:not(:last-child):after {
content: "";
position: absolute;
left: 100%;
margin-left: .5em;
height: 100%;
width: 4px;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
}
<ul>
<li></li>
<li></li>
<li></li>
</ul>
The reason you see a horizontal line is that that's how visaul web browsers treats <hr> (horizontal ruler) elements. That's how the HTML specification define this element.
There is no <vr> element or equivalent in HTML, so you'd have to workout something entirely different for that.
You can create a left or right border for a div that surrounds everything within your body (or have the height of the element set to 100%).
You can rotate the hr 90 degrees like this:
hr.fancy-line {
transform: rotate(90deg);
}
hr.fancy-line {
border: 0;
height: 5px;
}
hr.fancy-line:before {
top: -0.5em;
height: 1em;
}
hr.fancy-line:after {
content:'';
height: 0.5em;
top: 1px;
}
hr.fancy-line:before, hr.fancy-line:after {
content: '';
position: absolute;
width: 100%;
}
hr.fancy-line, hr.fancy-line:before {
background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 75%);
}
hr.fancy-line {
transform: rotate(90deg);
}
body, hr.fancy-line:after {
background: #f4f4f4;
}
-Some Text-
<hr class="fancy-line"></hr>
You have three options if you want to make a hr vertical.
If you need to support old browsers:
hr {
display: inline-block;
}
If you only need to support new browsers use:
hr {
transform: rotate(90deg);
}
Set a small width and large height:
hr {
width: 5px;
height: 200px;
}
Thanks to #showdev and #Cayce K.
I have now what I was looking for.
Let me put the code here for anyone who wants to do something similar in the future.
body {
background: #f4f4f4;
}
hr.fancy-line {
border: 0;
margin: 0 auto;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
}
<hr class="fancy-line" style="height: 100px; width: 5px;"></hr>
I have moved height and width to the html line, so I would insert vertical lines of different height and width on different pages.
Thanks to all others who contributed. This was literally my first question up on stackoverflow. Delighted by the response. Cheers

Position background image - x from top and x from bottom

http://jsfiddle.net/sXLg7/1/
I am trying to place the background image such that there is 50px space left at the top and bottom of the div.
I can position background image easily 50px below top by this property
background-position: 0 50px;
But, how do i also position this background image so that there is 50px space lefft at the bottom
I tried this
background-position: 0 50px 0 50px;
but this doesn't seem to work. I assumed it would accept 4 parameters for positioning it from 4 directions.
Any ideas?
Try the background-clip property instead :
padding-top:50px;
padding-bottom:50px;
background-clip: content-box;
See this Fiddle : http://jsfiddle.net/A5u8j/
Unfortunately, I do not believe this is possible. Depending on what it's being used for, you might be able to use two divs, with the inner div having the background image and a top & bottom margin of 50px;
try adding this two properties
background-size: 500px 400px;
background-position: 0 50px;
You can't do this with background position; however, you could hack something together using a pseudo-element.
http://jsfiddle.net/sXLg7/3/
Here is the updated CSS:
.test {
border: 2px solid red;
height: 500px;
width: 500px;
position: relative;
}
.test:before {
content: '';
z-index: -1;
background-image: url("http://www.reallyslick.com/pictures/helios.jpg");
background-repeat: no-repeat;
position: absolute;
top: 50px; left: 0; right: 0; bottom: 50px;
}
You can use CSS background-size, although browser support is somewhat limited.
.test {
border: 2px solid red;
background-image: url("http://www.reallyslick.com/pictures/helios.jpg");
background-position: 0 50px;
background-size:100% 400px;
height: 500px;
width: 500px;
background-repeat: no-repeat;
}
Working Example
Alternate Method
Alternately, you can use two nested elements. The outer has padding set on the top and bottom to so that the inner won't reach the top/bottom.
I've used CSS box-sizing so that the padding is accounted for in the height. Note that support for this is also somewhat limited.
Working Example
Alternatively, you can subtract the padding from the height of the outer element.
Working Example
Heres one way todo it. Place an image with absolute positioning, and a negative z-index. Places it behind any content in your test div.
http://jsfiddle.net/sXLg7/8/
html
<div class="test">
Text on top of background.
<img src="http://www.reallyslick.com/pictures/helios.jpg" class="background"/>
</div>
and the css
.test {
border: 2px solid red;
height: 500px;
width: 500px;
overflow: hidden;
position: relative;
color: #fff;
}
.test .background {
position: absolute;
bottom: 50px;
left: 0;
z-index: -1;
}
You could put a 50px border on the element.
http://jsfiddle.net/sXLg7/10/
html
<div class="test"></div>
css
.test {
outline: 2px solid red;
border: 50px solid transparent;
background-image: url("http://www.reallyslick.com/pictures/helios.jpg");
background-position: center;
background-size: auto 100%;
height: 500px;
width: 500px;
background-repeat: no-repeat;
box-sizing: border-box;
}
why not just add a 50px margin? like this:
.test {
border: 2px solid red;
background-image: url("http://www.reallyslick.com/pictures/helios.jpg");
height: 500px;
width: 500px;
background-repeat: no-repeat;
margin:50px;
}
http://jsfiddle.net/4Dmkv/

Element (background-image) opacity, but no border opacity

I know how to do border opacity, how to do background image opacity, but I would like to have an element without border opacity, having backround-image opacity on. I don't want to modify image in image editor, so I am looking for opacity set by CSS. Possible?
In my CSS below I want to modify "disabled" status with sharp no-opacity border. Please advice...
Example of use: this fiddle
button style:
div.button, div.button:hover
{
background: none;
border: 2px solid #6C7B8B;
border-radius: 8px;
clear: none;
color: transparent;
cursor: pointer;
display: inline-block;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
float: none;
height: 24px;
margin-bottom: 0px;
margin-left: 3px;
margin-right: 0px;
margin-top: 7px;
opacity: 1;
-moz-opacity: 1;
outline: none;
overflow: hidden;
padding: none;
vertical-align: top;
width: 24px;
}
click effect:
div.button:active
{
left: 1px;
position: relative;
top: 1px;
}
extra style for status DISABLED:
div.disabled, div.disabled:hover
{
cursor: default;
filter: alpha(opacity=50);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
opacity: 0.50;
-moz-opacity: 0.50;
}
div.disabled:active
{
left: 0px;
position: relative;
top: 0px;
}
extra style for status ON:
div.on, div.on:hover
{
border: 2px solid #007FFF;
}
You're just in the same situation as CSS: set background image with opacity? - you want to have a transparent background, but non-transparent content (to whom the border counts).
So as in CSS3 there is nothing such a background-image-opacity, you can only build a transparent image or position two elements over each other, the lower containing the image (as suggested by the answers there).
But in your case it would be enough to shade the image. This could for example been done by using transparent image from the beginning, but change the underlaying background-color. Or you'd use
<div class="button" title="Zoom!"><img src="icon.gif" alt="glasses" /></div>
with
div.button.disabled img { opacity: .5; }
which makes more sense semantically, too. You should get away from those inline styles.
(updated fiddle)
You could dim the background image through semi transparent pseudo-element placed on top of the button, but not the border:
div.button {
...
position: relative;
}
div.disabled:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
background: rgba(255,255,255,0.7);
border-radius: 6px;
}
Please note that I suggest this just because I like challenges, I still think Bergi's answer is the "right way" of doing it.
http://jsfiddle.net/NECyg/

'Stretching' a div to the edge of a browser

I'm trying to achieve a fixed width centred layout with headings that 'stretch' to the edge of the users browser. Like this...
Any ideas how I can achieve this?
This works splendidly. It could use some refinements, but the idea is quite solid.
Live Demo (edit)
CSS:
html, body {
margin: 0;
padding: 0;
border: 0;
overflow-x: hidden
}
body {
background: #eee
}
#container {
width: 80%;
margin: 0 auto;
background: #bbb;
}
#menu {
overflow: auto
}
#menu li {
float: left;
width: 40px;
margin: 5px;
height: 24px;
background: #fff
}
h1, h1 span, h2, h2 span {
padding: 3px 0;
height: 25px;
}
h1, h2 {
position: relative;
margin: 9px 0
}
h1 span, h2.left span {
display: block;
position: absolute;
width: 100%;
left: -100%;
top: 0
}
h2.right span {
display: block;
position: absolute;
width: 102%;
left: 100%;
top: 0
}
h1 {
background: red;
width: 80%
}
h1 span {
background: blue /* blue for demonstration purposes */
}
h2.left {
background: red;
width: 30%;
float: left
}
h2.left span {
background: blue /* blue for demonstration purposes */
}
h2.right {
background: red;
width: 30%;
float: right
}
h2.right span {
background: blue /* blue for demonstration purposes */
}
#content {
clear: both
}
HTML:
<div id="container">
<h1><span></span>Heading</h1>
<h2 class="left"><span></span>Sub-heading</h2>
<h2 class="right">Sub-heading<span></span></h2>
<div id="content">
Hi!
</div>
</div>
Maybe you could use an illusion to accomplish this? You can try having a blue bar with width = 100% sit behind all of your page content, such that it is only exposed to the right of the blue "sub-heading" section, but always reaches the right edge. You just have to make sure you eclipse the rest of it (anything to the left of the blue "sub-heading" element).
if you want be fixed in the window you can use position:fixed otherwise position:absolute. Then with left:0 and right:0 you position them in the left or right side. Using top you can set the offset from top.
Demo: http://jsbin.com/awoke3
Perhaps this would work?
<h1 id="mainHeader">Heading</h1>
#mainHeader {
float:left;
clear:both;
width:800px;
background-color:#ff0000;
color:#fff;
}
Here is my attempt using JavaScript, maintaining a fixed width center: Demo
Otherwise, I don't think what you want is possible using pure CSS, but I could be mistaken.

Categories