I am styling a text element and I want to make a fancy corner. I have come up with this code as a solution.
.top-corner {
background:
linear-gradient(to left, black 6px, transparent 6px) 100% 0,
linear-gradient(to bottom, black 6px, transparent 6px) 100% 0;
background-repeat: no-repeat;
background-size: 40px 40px;
width: fit-content;
padding-right: 20px;
}
It looks good an I have no initial problem with it.
https://fwb.crazychickentech.com/test/
The problem occurs when I start changing the font size. What I really want to do is something like this.
background-size: "this in px" = that -> 50%; - So basically, I want the first value (top) to be what every the second value (right) is but in pixels (not a percentage because then it would be 50% of the width.
I have been reading as much as I can but I'm just not getting anywhere (or understanding it).
I did look at some jQuery, but if I am totally honest, that's not my strong point.
I was also thinking of making a second div or something beside it, but at this point I'm worried I may be making things more complex than they need to be and I'm not thinking clearly.
Any suggestions or thoughts would be greatly appreciated!
Thanks all,
Happy Coding!
Pseudo element can do this:
h1 {
position: relative;
padding: 0 10px;
display: table;
margin: auto;
}
h1::before,
h1::after {
content: "";
position: absolute;
top: 0;
right: 0;
height: 50%;
width: 5px;
background: red;
}
h1::after {
transform-origin: top left;
transform: translate(100%) rotate(90deg);
}
<h1>A title here</h1>
<h1 style="font-size:50px">A title here</h1>
<h1 style="font-size:100px">A title here</h1>
Related
I'm working on a presentation with ioslides (Rmarkdown). Since the corporate design rules for our university state that the logo should be on the right side (so the two faces look into the document) I'ld be happy if someone can help me with adjusting the ioslide theme via css or in the pandoc template.
The image and grey box should come in from the right side. I wasn't able to do that. All I could do was making the grey so long that is reaches the right side (which moves the logo as well cause it is relatively placed to the grey boxes right end as it seems to me).
Here is some CSS code I already found and experimented with:
.gdbar img {
width: 150px !important;
height: 150px !important;
margin: 8px 8px;
}
.gdbar {
width: 90% !important; # with 250px instead of 90% it produces the image posted below
height: 170px !important;
}
This is the code produced after kniting: https://box.hu-berlin.de/f/d3d9e907fcef41a0bbf1/
I don't understand where the gdbar code resides in the first place. Would be happy about a hint here as well.
Edit: I have now this CSS setup and am almost done. Only the logo should be shifted a little bit to the left.
.gdbar img {
width: 150px !important;
height: 150px !important;
margin: 8px 8px;
}
.gdbar {
width: 250px !important;
height: 170px !important;
}
aside.gdbar {
left: initial;
right: 0;
border-top-left-radius: 10px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 10px;
background-position: right;
}
Best regards, Simon
Your element has left: -1px property what makes sure it's always on the left. If you set left to initial:
aside.gdbar {
left: initial;
right: 0;
}
or you remove this left setting then your element will move to the right.
Take a look at this : http://jsfiddle.net/wjhnX/
I achieved it with this CSS :
background-image: radial-gradient(#CCC, #FFF), radial-gradient(#CCC, #FFF);
background-size: 2px 100%;
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
Is this possible to do but the simulated borders would be top and bottom, not left and right ?
Thanks ahead !
Do you want something like this?
Demo (Some breathing space for your content, I've used margin there, just make sure that it will apply to both, :before as well as :after, so if you want to separate, declare margin separately for each, p.s - I've made colors lil lighter)
/* Using only background gradients */
.one {
width: 400px;
padding: 20px 25px;
margin: 40px auto;
}
.one:before, .one:after {
content: "";
height: 1px;
/* I've removed the vendor prefixes, if you are looking to support older browsers
then refer to older version of this answer.
*/
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(147,147,147,1) 50%,rgba(0,0,0,0) 100%);
display: block;
margin-bottom: 10px;
margin-top: 10px;
}
Explanation:
I've used :before and :after pseudo having content: "", so it creates a block, you can say a virtual block inside the element... and which is further set to display: block, just make sure you use block there else margins and height will have no effect.. and last but not the least am using gradients with rgba to control the alpha/opacity of the gradient which will fade on both ends
you can make it with a seperator as well.
LIVE DEMO
.seperator
{
width: 400px;
height: 2px;
margin: 30px;
background-image: radial-gradient(#CCC, #FFF), radial-gradient(#CCC, #FFF);
background-position: 0, 100%, 0, 100%;
}
.one {
width: 400px;
height: 140px;
margin: auto;
}
Im looking for a way to recreate this button with CSS only.
I know about the triangle technique and I also know how to add a border to it, but unfortunately I don't know any way to recreate this button (without adding additional wrappers or using images).
The buttons I need this style on are <input["submit"]> and ordinary <a>'s.
With one element, you could do it using gradients and skewed pseudo-elements for a link:
demo
(you could actually do it using just gradients, but then a hover action won't be triggered on hover on the arrow shape itself, but on hover on the rectangular element containing it)
HTML:
<a class='boo' href='#'>click me</a>
Relevant CSS:
.boo {
display: inline-block;
position: relative;
padding: .5em 2em;
background:
linear-gradient(60deg, dodgerblue 50%, transparent 50%) 100% 0,
linear-gradient(-60deg, transparent 50%, dodgerblue 50%) 100% 100%,
linear-gradient(-90deg, transparent 1em, dodgerblue 1em);
background-repeat: no-repeat;
background-size: 1em 50%, 1em 50%, 100% 100%;
}
.boo:before, .boo:after {
position: absolute;
right: -.2em;
width: .5em; height: 50%;
background: dodgerblue;
content: '';
}
.boo:before {
top: 0;
transform: skewX(30deg);
}
.boo:after {
bottom: 0;
transform: skewX(-30deg);
}
EDIT:
If your background is a solid color, not an image or a gradient, you could do it in a much simpler way, without using gradients (which means that this second method also has the advantage of working in IE9).
demo #2
.boo {
display: inline-block;
position: relative;
padding: .5em 2em;
background: lightblue;
}
.boo:before, .boo:after {
position: absolute;
right: -.3em;
width: .5em; height: 50%;
box-shadow: -.2em 0 0 white;
background: inherit;
content: '';
}
.boo:before {
top: 0;
transform: skewX(30deg);
}
.boo:after {
bottom: 0;
transform: skewX(-30deg);
}
You should use a background image. Create a transparent png containing the arrow.
You would need two elements, the outer would contain the background image, the inner would contain the text, and a background color which is the same as the one on the arrow. Alternatively, you could use a second background image instead of a background color, for example if your button is not just a flat color.
The trick is to align the box containing the text with the background image.
If your arrow is 20px tall, your inner box could be e.g. 16px plus 2px padding on each side (search for box model if you would like to understand this better).
The outer element can have a right-margin set to the approximate width of the arrow image.
I hope this makes sense. The general technique is called sliding doors. I suggest reading the entire article if you have the time.
I can position a small background-image/icon 4 pixels from the center left of its container with:
background: url(...) no-repeat 4px 50%;
How can I position it 4 pixels from the right?
Depending on your situation and what browsers you want to support, this works (tested on IE7-8, Firefox):
background: url(...) no-repeat right 50%; border-right: 4px solid transparent;
Of course, if you are already putting a border on the right, this will not help you at all.
Added on edit: If the above doesn't work because your are using the border, and you don't care about IE7 (not sure we are quite at that point yet), and your "icon" width is known, then you could do:
.yourContainer {
position: relative;
}
.yourContainer:after {
content: ' ';
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 4px;
width: 10px; //icon width
z-index: -1; //makes it act sort of like a background
background: url(...) no-repeat right 50%;
}
CSS3 adds a new way to specify background-position:
background-position: right 10px top 50%;
Should position the background-image 10px from the right and vertically centered.
how about
background: url(...) no-repeat right 50%;
padding:0px;
padding-right:4px;
in the case you ever want a border
I'm afraid you can't as far as I know.
Popular tricks:
Adding a 4px transparent margin to the image and giving
it background-position: right
Adding a 4px margin-right to the element (works in some situations, doesn't in others)
Using jQuery to determine the element's weight and adjust the image position (yuck!)
You might want to use percentage:
table.dataTable thead .sorting_asc {
background: url("http://cdn.datatables.net/1.10.0/images/sort_asc.png") no-repeat 30% 50%;
}
table.dataTable thead .sorting_desc {
background: url("http://cdn.datatables.net/1.10.0/images/sort_desc.png") no-repeat 30% 50%;
}
table.dataTable thead .sorting {
background: url("http://cdn.datatables.net/1.10.0/images/sort_both.png") no-repeat 30% 50%;
}
I want the left border of my div to show only to the half of the div. The same I would like to do to my right border but is should be set from the bottom of the div to the middle of the div. How can I achieve it?
A sort-of similar but different approach to #Pekka's: use the :after pseudo-selector, like so:
.mybox {
position: relative;
padding: 10px 20px;
background-color: #EEEEEE;
}
.mybox:after {
content: '';
position: absolute;
bottom: 0px;
left: 25%;
width: 50%;
border-bottom: 1px solid #0000CC;
}
<div class="mybox">
Le content de box.
</div>
...and a jsFiddle for good measure.
Good question. It's not possible using the border property.
The only thing that comes to mind, if you can set your div's position to relative, is to use an absolutely positioned, 1 pixel wide div. Not thoroughly tested but this should work:
<div style='width: 1px; top: 0px; bottom: 50%; left: 0px;
background-color: blue; overflow: hidden'>
</div>
You'd do the same on the right hand side, replacing the left property by right.
Remember, the surrounding div needs to be position: relative for this to work. I'm not sure about whether the 50% height setting will work consistently throughout browsers - make sure you test it. You may have to resort to pixel measures if it doesn't.
2018: For modern browsers:
You can use border-image with gradients something like...
border-image: linear-gradient(to bottom, rgba(0,0,0,0) 25%,rgba(0,0,0,1) 25%,rgba(0,0,0,1) 75%,rgba(0,0,0,0) 75%);
border-image-slice: 1;
Demo: https://jsfiddle.net/hz8wp0L0/
Tool: Gradient Editor
Can I Use : border-image (IE11)
For those trying to implement Aleksandr Belugin's answer above using border-left, here it is:
.mybox {
position: relative;
padding: 10px 20px;
background-color: #EEEEEE;
}
.mybox:after {
content: '';
position: absolute;
left: 0px;
top: 25%;
height: 50%;
border-left: 1px solid #0000CC;
}
<div class="mybox">
Le content de box.
</div>
You can use:
line-height:50%; /*(or less, much less)*/
overflow:visible;
The text is visible, but the border color will be only at half of the div size.