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;
}
Related
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>
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 want to put my background image in the center and repeat only the last left pixelcolumn to the left and the same for the right and the last pixelrow down.
so that if you zoom out you see this
-------------- repeat last pixel of the right of the picture to the right
| |
| |
--------------
^
|
here repeat to the left the first pixels to the left
and below the picture the lowest row of pixels repeat down.
i hope you understand what i mean...
minke
This pen illustrates how this is possible now with border-image, which had very poor support at the time this question was asked, but is supported on the latest version of all the major browsers: (IE11+, Firefox 15+, Chrome 16+, Safari 6+)
Basically, you use background-image to render the 'full' image, positioning it centered using background-position.
#container {
height: 100vh;
width: 100%;
margin: 0 auto;
padding: 0 20%;
box-sizing: border-box;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/44521/light_minimalistic_soft_shading_gradient_background_1024x768_58884.jpg);
background-size: 61% 100%;
background-position: center 0;
background-repeat: no-repeat;
}
Then, you can use border-image for the repeated edges. Note the use of border-image-slice to grab only 1px of the edges on the sides.
#container {
border-width: 0 20% 0 20%;
border-image-source: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/44521/light_minimalistic_soft_shading_gradient_background_1024x768_58884.jpg);
border-image-slice: 2;
border-image-width: 2 20%;
border-image-repeat: stretch;
border-image-outset: 2px;
}
Live example on CodePen
Have a look at the link below.
Position a CSS background image x pixels from the right?
This is not the exact solution you are looking for, but it could have the same effect on SOME images you are looking for:
.bg {
background:url(../images/image.jpg),url(../images/image.jpg);
background-repeat: no-repeat, repeat;
background-position: 0px 0px;
background-position-x: center;
background-size: 1914px 100% , 1px 100%; // 1914px is the width of the image
}
Take a 1px-wide slice of the image and save it. This is the code I used for a sticky footer with a 196px-wide left portion, and a repeating 1px-wide right section:
footer {
background-image: url('../../images/footer-left.png'), url('../../images/footer-right.png');
background-repeat: no-repeat, repeat-x;
background-size: 196px 175px;
bottom: 0;
color: white;
height: 175px;
left: 0;
margin-bottom: 0;
padding-top: 75px;
position: fixed;
text-align: center;
width: 100%;
}
I have a background image set up through CSS.
html {
background-image: url('../img/cello.jpg');
background-attachment: fixed;
background-size: 100%;
}
I plan on having a different background image for different pages of the website: so it's important that text is legible over it. Right now I've got a translucent black background to my #main content box in the middle like this in order to ensure legibility:
#main {
background: rgba(0, 0, 0, 0.5);
}
What I really want to do, though, is to have that kind of translucent background over the entire background image, because the black box looks a bit clunky. I've tried making a <div id=#tint> which includes the whole HTML document and giving rgba(0, 0, 0, 0.5) to #tint, but that doesn't work at all--I can either get nothing to change or I can get the entire background to become a simple grey with no background image visible at all. Is this simply not possible?
Use background-blend-mode for a simple tint
You can use the background-blend-mode css property:
.box {
width: 300px;
height: 300px;
background-size: cover;
background-image: url('https://placehold.co/300');
}
.background-tint {
background-color: rgba(200,100,0,.5);
background-blend-mode: multiply;
}
<div class="box background-tint"></div>
Place it on any element with a background image and you're good to go.
The property is well supported in modern browsers NOT including IE 11. For non supporting browsers you can use a polyfill.
Working demo
Other Options
Use filter for a complex tint
You can use the filter css property:
.box {
width: 300px; height: 300px;
background-size: cover;
background-image: url('https://placehold.co/300');
}
.background-tint {
filter: sepia(100%) saturate(200%) brightness(70%) hue-rotate(330deg);
}
<div class="box background-tint"></div>
Place it on any element with a background image and you're good to go.
In order to change the color change the hue-rotate value.
The property is well supported in modern browsers NOT including IE 11.
Working demo
Use a flat linear-gradient and a multiple background overlay
.background-tint {
background-image:
linear-gradient( rgba(0,0,0,.5), rgba(0,0,0,.5) ),
url('http://placehold.it/420')
}
I think this is the most widely used technique but it has the downside of being hardcoded i.e. you can't just take a class, stick it on an element and make a tint.
You could make this into a less or sass mixin, something like:
less
.background-tint(#tint-color, #image-url) {
background-image:
linear-gradient( #tint-color, #tint-color ),
url( #image-url )
}
sass
#mixin background-tint($tint_color, $image_url) {
background-image:
linear-gradient( $tint_color, $tint_color ),
url( $image_url )
}
Working demo
Use a transparent background
This method has the advantage of working on most browsers and is just a nice class you add to any element.
The downside is that if you have anything else inside of that element you will have to wrap it in a div with some kind of positioning position: relative would work best.
Example:
.box {
width: 300px; height: 300px;
background-size: cover;
background-image: url('http://placehold.it/300');
color: #facebc;
}
.background-tint { position: relative; }
.background-tint::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
margin: auto;
}
.u-relative { position: relative; z-index: 1; }
<div class="box background-tint">
<div class="u-relative">300 x 300</div>
</div>
Working Demo
I think you need to create an overlay element (potentially div) which has the sought translucent background. Something like:
.overlay {
z-index: 1;
height: 100%;
width: 100%;
position: fixed;
overflow: auto;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, 0.7); /*can be anything, of course*/
}
And of course, a little demo: little link.
This worked great for me:
https://css-tricks.com/tinted-images-multiple-backgrounds/
.tinted-image {
background:
/* top, transparent red, faked with gradient */
linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
),
/* bottom, image */
url(image.jpg);
}
And building on another answer, you can do this with existing colors in less like:
linear-gradient(
fade(#brand-primary, 50%),
fade(#brand-primary, 50%)
),
It would be the overlay property
https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#blendingoverlay
But it's a draft. Don't rely on it
Try opacity:
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
This is the simplest solution to the problem in my opinion.
.parent-div{
background-color : desired-color
}
#image-id{
opacity: dersired_value%
}
To increase readibity background-color: black and opacity percentages of range 50 to 60% seem to work nicely.
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%;
}