is it possible to color a grayscale background image using css3?
It is for an icon. I want it to be blue.
input[name=email] { background-image: url(/static/images/icons/glyphicons_010_envelope.png); background-size: 16px auto; background-position: 8px 7px; }
One posibility is to overlay a blue + alpha color on the image.
And one posibility to do this would be:
.base {
width: 200px;
height: 200px;
background: linear-gradient(45deg, black, white, black);
}
#shadow {
box-shadow: 0px 0px 3000px 0 rgba(0,0,255,0.5) inset;
}
To avoid looking for a black & white image, I have set a gradient in base.
Then, in shadow, I create an inset shadow of a huge size, and blue with alpha 0.5
demo
In the demo, you can see the base image, and the same image tinted in blue.
Explanation
The box shadow is set as inset, so that it is inside the box, around the border. If the size would be too small, you would see the center of the box without shadow.
And, since the color is blue with an alpha, it is somewhat transparent and you can see the background thru it.
Related
I'm trying to make a gradient that, for branding purposes, must be (1) at a specific angle, and (2) the top of it must be inset by a specific amount:
The rest of the proportions don't matter. I created this gradient like this:
background: linear-gradient(75deg, white 0%, black 30%, blue 30%, white 100%);
This only produces the correct top inset at specific client area height/widths. At other sizes, offset can be different:
Again, for branding reasons, this is unacceptable. That top of that slope must be inset by a specific amount.
I tried use a pixel value for the inset, e.g.
background: linear-gradient(75deg, white 0%, black 125px, blue 30%, white 100%);
This works... for the bottom of the slope. The bottom will be offset by 125px at any shape/size:
I'd like to do the same thing but have the top offset fixed to 125px.
You can approximate it using pseudo element and rotation. You consider a straight gradient (90deg) then you rotate it by adjusting the transform-origin to have the distance you want on the top:
.box {
height:300px;
position:relative;
overflow:hidden;
}
.box:before {
content:"";
position:absolute;
/* a random big value for top bottom and left*/
top:-500px;
bottom:-500px;
right:0;
left:-500px;
/**/
/* in the below 625px = 125px + 500px and adjust the 350px to get close to the gradient you wnat*/
background: linear-gradient(90deg, white 350px , black 625px, blue 0, white);
transform:rotate(-15deg);
transform-origin:625px 500px;
}
<div class="box">
</div>
This is gradient: linear-gradient(to bottom right, #294A77, #8986A5);
and $dot-color: #606685;
And i tried : https://codetea.com/a-simple-technique-to-create-a-dot-pattern-or-dot-grid-background/ but unsuccessful.
For dots, maybe a radial-gradient() would be more what ou look for .
background-blend-mode can also help to hide some of your dots and then blend colors with the main gradient from left to right drawing your background.
here is an example you could inspire yourself from :
html {/*for demo it can be here any block level html tag */
height: 100%;
/* your groups of dots */
background:
linear-gradient( /* background color fading left to right , to blend with every others gradient bg */
to left,
#8382a2,
#2f4e79),
repeating-linear-gradient( /* horizontal white lines hidding a row of dots */
to bottom,
transparent 0,
transparent 32px,
white 32px,
white 40px,
transparent 40px
),
repeating-linear-gradient( /* vertical lines hidding a col of dots */
to right,
transparent 0,
transparent 32px,
white 32px,
white 40px,
transparent 40px
),
radial-gradient( /* dot repeated via background-size */
circle at 5px 5px,
#2f4e79 1px,
transparent 2px,
transparent 8px
)
0 0 / 8px 8px /*position + / background-size here */;
background-blend-mode:
multiply, /* only blend the first layer to keep dots hidden */
normal,
normal,
normal;
/* end dot group */
}
size and colors are yours to update .
Codepen to play with : https://codepen.io/gc-nomade/pen/Yzwowpg
See also :
https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient
https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient
https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode
I've got this CSS snippet:
https://jsfiddle.net/puw3wv1n/3/
Looks like this
1 = Main background of <html> (not important, not just for info)
2 = is just a background image about 5x5px with color
3(left) = is images/bg_l.png (shadow has alpha)
3(right) = is images/bg_r.png (shadow has no alpa, background is white
.body_wrapper {
background-color:transparent !important;
margin-top: 0px !important;
border: 5px solid transparent !important;
background-image: url(images/bg_l.png), url(images/bg_r.png), url(images/bg_bg.png) !important;
background-position: left, right, top left !important;
background-repeat: repeat-y, repeat-y,repeat !important;
/*background-size: initial,initial,cover !important; */
background-origin: content-box, content-box, content-box !important;
}
I want that "2" left and right actually get transparent but in between the "3"'s should stay. so that the shadow of 3 applies to the <html> background (1)
I have tried it with a transparent border, so that I can use background-origin to start the background-image "3" at the border with border-box and the background image "2" should then start in the center (inside the border) with the padding of the border(5px)
But it does not work when I set
background-origin: border-box, border-box, content-box !important;
Here is a more usefull image:
The overstanding color should get transparent but the color inside should stay.
Update:
Here is a fiddle I've made for that https://jsfiddle.net/puw3wv1n/3/
That was not so easy but I've found away todo that.
I've added
background-clip: border-box,border-box, padding-box !important;
background-origin: border-box, border-box, padding-box !important;
and got it to work
I'm trying to implement a diagonal CSS3 gradient that goes from black in the upper left corner to dark gray in the bottom right corner.
Something like:
body {
background: -webkit-linear-gradient(left top, black, darkgray 80%, gray);
}
Instead of it being shown as I intended, it just repeats over and over every couple lines down the page horizontally. What am I doing wrong?
The body has no height; you're only seeing the background from the 8px of top/bottom margin (which is always transparent).
If you want your gradient to fill the viewport, set a height of 100% on both <html> & <body>
html, body {
height: 100%;
}
body {
background: linear-gradient(orange, red, yellow);
margin: 0;
}
http://jsfiddle.net/JUtuJ/1/
I have a table, in the Table header (TH) I have a background with CSS:
.gridView th
{
padding-top: 1px;
background-image: url('/Images/Design/New/mitte-tb_02.gif');
background-repeat: repeat-x;
background-position: 0px 0px;
color: #FFFFFF;
border: 1px solid Gray;
text-align: center;
}
Now I will right an left from the border 1px space between border and background.
I try all, but it seems useless.
any ideas?
You can achieve this by setting border-collapse on the table to separate and the background colour of the table to Gray. Then set the border of the cells to the colour that you want between the gray border and the background image. See this example: http://jsfiddle.net/NMx5M/
You can put inner div in th element and set background for it with with margin: 0 1px;. An example (I replaced image with color for simplicity).
If I understand you correctly:
By the nature of "background", the image will fill as much of the space as the image size permits (especially if it repeats).
You could force a border using cellspacing or a white border for a visual impression.
Alternatively you will want to make the background image exactly 1px too small around the edges, and position the background absolutely to give the ~impression~ of the gap.
edit
you can perhaps do something like this
.foo {
background: url(bg.jpg) repeat-x;
display:block;
width:99%;
height:99%;
}
<th style="padding:1px;" scope="col"><span class="foo">Foo Bar</span></th>
b