I came across this page of a themed website that has form field labels with triangles on one side:
http://www.openblackbelt.com/app/index.php?action=profile
A triangle technique is a nice accent to break up the monotony of forms without the usual rounded border or some other getting-over-used approach.
The only problem is, I can't seem to actually determine how the triangular accenting is done. I don't see any use of :before or :after, and there is only one html element <label> involved as far as I can tell. Can anyone do a breakdown of how to perform this technique on my own?
It's nothing but a small div positioned relative containing absolute positioned div using CSS Triangles. I've made a demo from scratch, you can check this out.
Demo
div {
height: 30px;
width: 200px;
background: #f00;
position: relative;
}
div span {
height: 0;
width: 0;
display: block;
position: absolute;
right: -30px;
border-bottom: 30px solid #f00;
border-right: 30px solid transparent;
}
If you want to save an element, you can use :after pseudo(won't work in IE), you can try this
Demo
div {
height: 30px;
width: 200px;
background: #f00;
position: relative;
}
div:after {
height: 0;
width: 0;
display: block;
position: absolute;
right: -30px;
content: " ";
border-bottom: 30px solid #f00;
border-right: 30px solid transparent;
}
No span tag required here.
Explanation: I am just using an absolute position element with a height and width set to 0 and am using borders around the element, making one a transparent, thus creating that triangle shape. And than I use right to position it correctly.
They do it by giving it a border-bottom:24px; and border-right:24px; by positioning the div absolute
#feitla is on the right path, #Kzqai specific what you asked for is achieved as below:
CSS:
.contact-form label {
border-right: 24px;
}
HTML:
<label for="openbb_username">Enter your email address</label>
Related
I have seen many websites with the following design for their form:
How do you accomplish the vertical tick at the left end of the line? Is it a pseudo element, or some border hack, or am I completely missing something simple?
You can achieve this by using a ::before pseudo element. Just enclosed your textbox in a div and make its height 50% or as much less as you want. You will also have to use top to bring the div down by same amount of height you reduced. padding is essential to display the div at exactly left of textbox.
Here is the code and JSfiddle demo
HTML:
<div>
<input type="text" id="t1" placeholder="Your Name">
</div>
CSS:
#t1{
position: relative;
display: inline-block;
border:0;
border-bottom: 2px solid blue;
text-align: right;
}
div{
display: inline-block;
position: relative;
padding-left: 0.15em;
}
div::before {
content: '';
border-left: 2px solid blue;
position: absolute;
height: 50%;
left: 0;
top: 50%;
}
I'm trying to create a body border for my site that has a gap near the top for the logo, yet is completely closed at the bottom. I can only seem to do one or the other.
Here is what I am looking for, Body Border example:
Here's the approach I've been taking. A simple body wrapper with before/after psuedo elements.
HTML
<html>
<body>
<div class="borderWrap>
<header> Logo resides here </header>
<main> content goes here </main>
</div>
</body>
</html>
CSS
.borderWrap{position: relative; }
.borderWrap:after, .borderWrap:before {
border: 0.125em solid ;
bottom: 20px;
content: '';
position: absolute;
top: 35px;
width: 40.5%;
bottom: -50px;
}
.borderWrap:after {
border-left: none;
right: 40px;
}
.borderWrap:before {
border-right: none;
left: 40px;
}
This gives me a dynamic border as I need, but it still leaves a gap at the bottom. How do I go about closing it? Should I use a different method alltogether?
I've taken a different approach of just applying a regular border to 'borderWrap' and centering the header within it, then applying a negative top margin and a solid white background.
https://jsfiddle.net/partypete25/xvhb4kuf/
.borderWrap {
position: relative;
margin:35px auto 20px;
width:81%;
border: 0.125em solid;
}
header {
width:80px;
background:#fff;
margin:-20px auto 0;
}
Here is one way of doing it using pseudo-elements.
You can control the width of the white-gap using calc(50% + 40px) for example, where 40px is the half-width of the desired gap width, using
this value for the left and right offsets for the absolute positioned pseudo elements.
You could simplify things by simply using a percentage value for the offsets in case you don't want to use the CSS calc function.
The advantage of this approach is that if you have any background colors or images, they will show through the gap in the top border.
In my example, I illustrate how to create the border. How you will use it in your layout will depend on how you build your page, but the approach is the same.
.borderWrap {
position: relative;
height: 400px;
border: 2px solid black;
border-top-width: 0;
}
.borderWrap:before, .borderWrap:after {
content: '\A0';
border-top: 2px solid blue;
position: absolute;
top: 0;
}
.borderWrap:before {
left: 0;
right: calc(50% + 40px);
}
.borderWrap:after {
right: 0;
left: calc(50% + 40px);
}
<div class="borderWrap"></div>
I try to create heading like this...
Title --------------------
This line with a custom image background
HTML :
<h2>Title</h2>
CSS :
h2 {background:url('line.png') repeat-x 15px 10px;}
Result :
Live : http://jsfiddle.net/5G2aq/
I try to repeat this image with X-axis and add some padding into the left.
But it doesnt work, 15px doenst work... or what ?
PS :Try to do with a single element <h2>, not :after or full-long image
Any trick ?
Do it like this, use :after pseudo with content: ""; and be sure you use display: block;, now we use position: absolute; and assign position: relative; to the container element. Last but not the least we use overflow: hidden; so that we don't get dirty scroll.
Demo
h2 {
position: relative;
overflow: hidden;
}
h2:after {
position: absolute;
height: 2px;
content: "";
display: block;
width: 100%;
top: 50%;
left: 60px;
background:url(http://oi39.tinypic.com/m7t8xw.jpg) repeat-x;
}
Coming to your solution, you are using repeat-x, so you won't see the background-position changing on the x axis as the image is repeating, if you want to go for this approach, you shouldn't repeat.
Even better approach
Demo 2 OR Demo 3 (Using your image)
<div><span>Hello</span></div>
div {
border-top: 1px solid #000;
margin: 20px;
position: relative;
}
div span {
display: block;
position: absolute;
top: -12px;
background: #fff;
padding-right: 10px;
}
The above way will be title width independent, I would've chosen this way
Note: You can replace div with h2
Is there anyway I can vertical-align text to appear above the border-top like I can below the border-bottom when the height is set to height:0px;?
HTML:
<ul id="experiment" style="background: #FFDD00;">
<li id="test1"><span class="v-align-bot">Chocolate</span></li>
<li id="test2"><span class="v-align-top">Potato</span></li>
</ul>
CSS:
#test1 {
height: 0px;
border-bottom: 50px solid #648291; /*grey*/
}
#test2 {
height: 0px;
border-top: 50px solid #FA8723; /*orange*/
}
.v-align-bot {
vertical-align: -50px;
}
.v-align-top {
vertical-align: 50px;
}
The Chocolate easily aligns below the border-bottom. The Potato does align above the li but the border-top follows(?) it as well.
TL;DR: Is there anyway I can make the BUTTONs in this fiddle below align properly?
http://jsfiddle.net/jLYhg/
Weird wishes eh ;) for doing this, actually the border of an element renders outside the element, so there's no straight way of doing this, but still if you want to get the text vertically middle on the borders, than you need to change couple of things in your markup as well as your CSS.
First of all wrap the words using a simple span tag, than use the below rules in your CSS
Demo
.v-align-bot span {
position: absolute;
top: 15px;
}
.v-align-top span {
position: absolute;
top: -35px;
}
Also make sure you use position: relative; on the below id's else they will flow out in the wild.
#test1 {
height: 0px;
border-bottom: 50px solid #648291; /*grey*/
position: relative;
}
#test2 {
height: 0px;
border-top: 50px solid #FA8723; /*orange*/
position: relative;
}
I want to achieve something like this:
The width of the element is 100%. I will use only the centered corner and combine with border-top:
.element {
border-top: solid 1px #ccc ;
background: url('../images/arrow.png') no-repeat center top;
}
But the border stays inside the arrow. I tried up image background -1px to hide the border but it didn't work. How do I do this?
I solved it with an extra container:
HTML:
<div class="first"><div class="second"></div></div>
CSS:
.first {
border-bottom: 5px solid #000;
width:100px;
height:100px;
background-size: 20%;
background-position:50% 105%;
box-sizing: border-box;
}
.second {
width:100%;
height:104px;
background: url(https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcROusF7rh7H4mWpr8wQIllxWPAHHIShRyG62xp3qy2O4Av_NmNV) no-repeat;
background-size: 20%;
background-position:50% 100%;
}
jsfiddle: http://jsfiddle.net/AKpLT/
Interesting issue. Here's one contrived solution using the :before selector to absolute position the image over the border. See this jsfiddle for a working example. The relevant code is as follows:
div {
border: 1px solid red; /* For demo purposes it's red */
position: relative;
}
div:before {
content: url('http://i.stack.imgur.com/P3zMs.png');
position: absolute;
top: -1px;
width: 100%;
text-align: center;
line-height: 1px;
}
Here's a screenshot of the result:
Edit: the browser compatability for the :before selector tells us it's only supported in IE8 and higher. It's even worse though, because as far as I can tell the content: url(...) construct nor the background-image of a :before pseudo-element doesn't seem to work even in IE9. Fortunately, this should fall under graceful degredation...
If you're already creating the image just make the entire thing your background image in the shape you want it. Make it long enough so it can adjust to whatever reasonable length element you might want to put it in.
Like Mash I'd use another element for the background, but unlike Mask I'd use the CSS :before or :after pseudo elements:
<h2>Heading</h2>
h2 {
border-top: 1px solid #ccc;
position: relative;
}
h2:after {
background: url(IMAGE);
content: " ";
display: block;
width: WIDTH-OF-IMAGE;
height: HEIGHT-OF-IMAGE;
position: absolute;
left: 50%;
top: -1px;
margin-left: -WIDTH-OF-IMAGE/2;
}