I have the following code that sets a dotted/spotted bottom border on 'h1' tags.
The full code can be found at moorparksdevon.uk
h1 {
padding: 0 0 7px 0;
margin: 0 0 10px 0;
display:table;
background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 3px 1px;
background-repeat: repeat-x;
}
However... I don't appear to have consistent results in the slightest. Am I missing something here?
Safari Mac - Lots of dots working (https://i.stack.imgur.com/MAHgm.jpg)
Firefox Mac - Some dots working (https://i.stack.imgur.com/mzRTM.png)
Chrome Mac - No dots at all (https://i.stack.imgur.com/5sYfL.jpg)
You can just use CSS border-bottom to set a dotted border.
jsfiddle: https://jsfiddle.net/mmkctq59/
Related
I have panel which I colored blue if this panel is being selected (clicked on it). Additionally, I add a small sign (.png image) to that panel, which indicates that the selected panel has been already selected before.
So if the user sees for example 10 panels and 4 of them have this small sign, he knows that he has already clicked on those panels before. This work fine so far. The problem is now that I can't display the small sign and make the panel blue at the same time.
I set the panel to blue with the css background: #6DB3F2; and the background image with background-image: url('images/checked.png'). But it seems that the background color is above the image so you cannot see the sign.
Is it therefore possible to set z-indexes for the background color and the background image?
You need to use the full property name for each:
background-color: #6DB3F2;
background-image: url('images/checked.png');
Or, you can use the background shorthand and specify it all in one line:
background: url('images/checked.png'), #6DB3F2;
For me this solution didn't work out:
background-color: #6DB3F2;
background-image: url('images/checked.png');
But instead it worked the other way:
<div class="block">
<span>
...
</span>
</div>
the css:
.block{
background-image: url('img.jpg') no-repeat;
position: relative;
}
.block::before{
background-color: rgba(0, 0, 0, 0.37);
content: '';
display: block;
height: 100%;
position: absolute;
width: 100%;
}
Based on MDN Web Docs you can set multiple background using shorthand background property or individual properties except for background-color. In your case, you can do a trick using linear-gradient like this:
background-image: url('images/checked.png'), linear-gradient(to right, #6DB3F2, #6DB3F2);
The first item (image) in the parameter will be put on top. The second item (color background) will be put underneath the first. You can also set other properties individually. For example, to set the image size and position.
background-size: 30px 30px;
background-position: bottom right;
background-repeat: no-repeat;
Benefit of this method is you can implement it for other cases easily, for example, you want to make the blue color overlaying the image with certain opacity.
background-image: linear-gradient(to right, rgba(109, 179, 242, .6), rgba(109, 179, 242, .6)), url('images/checked.png');
background-size: cover, contain;
background-position: center, right bottom;
background-repeat: no-repeat, no-repeat;
Individual property parameters are set respectively. Because the image is put underneath the color overlay, its property parameters are also placed after color overlay parameters.
And if you want Generate a Black Shadow in the background, you can use
the following:
background:linear-gradient( rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url("logo/header-background.png");
You can also use short trick to use image and color both like this :-
body {
background:#000 url('images/checked.png');
}
really interesting problem, haven't seen it yet. this code works fine for me. tested it in chrome and IE9
<html>
<head>
<style>
body{
background-image: url('img.jpg');
background-color: #6DB3F2;
}
</style>
</head>
<body>
</body>
</html>
The next syntax can be used as well.
background: <background-color>
url('../assets/icons/my-icon.svg')
<background-position-x background-position-y>
<background-repeat>;
It allows you combining background-color, background-image, background-position and background-repeat properties.
Example
background: #696969 url('../assets/icons/my-icon.svg') center center no-repeat;
This actually works for me:
background-color: #6DB3F2;
background-image: url('images/checked.png');
You can also drop a solid shadow and set the background image:
background-image: url('images/checked.png');
box-shadow: inset 0 0 100% #6DB3F2;
If the first option is not working for some reason and you don't want to use the box shadow you can always use a pseudo element for the image without any extra HTML:
.btn{
position: relative;
background-color: #6DB3F2;
}
.btn:before{
content: "";
display: block;
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
background-image: url('images/checked.png');
}
Here is how I styled my colored buttons with an icon in the background
I used "background-color" property for the color and "background" property for the image.
<style>
.btn {
display: inline-block;
line-height: 1em;
padding: .1em .3em .15em 2em
border-radius: .2em;
border: 1px solid #d8d8d8;
background-color: #cccccc;
}
.thumb-up {
background: url('/icons/thumb-up.png') no-repeat 3px center;
}
.thumb-down {
background: url('/icons/thumb-down.png') no-repeat 3px center;
}
</style>
<span class="btn thumb-up">Thumb up</span>
<span class="btn thumb-down">Thumb down</span>
Assuming you want an icon on the right (or left) then this should work best:
.show-hide-button::after {
content:"";
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
background-size: 1em;
width: 1em;
height: 1em;
background-position: 0 2px;
margin-left: .5em;
}
.show-hide-button.shown::after {
background-image: url(img/eye.svg);
}
You could also do background-size: contain;, but that should be mostly the same. the background-position will depened on your image.
Then you can easily do an alternative state on hover:
.show-hide-button.shown:hover::after {
background-image: url(img/eye-no.svg);
}
You can try with box shadow: inset
.second_info_block {
background: url('imageURL');
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.4);
}
<li style="background-color: #ffffff;"><img border="0" style="border-radius:5px;background: url(images/picture.jpg') 50% 50% no-repeat;width:150px;height:80px;" src="images/clearpixel.gif"/></li>
Other Sample Box Center Image and Background Color
1.First clearpixel fix image area
2.style center image area box
3.li background or div color style
body
{
background-image:url('image/img2.jpg');
margin: 0px;
padding: 0px;
}
Im still making a reponsive menu, with scroll controls. I added a gradient on my menu, but I want to, that gradient goes in front of my links and hide them behind it. There's is JSFiddle, you can test it.
There you can see my gradient CSS on my menu
#page .page-nav {
background: white -webkit-linear-gradient(left, transparent 50px, red);
background-size: 40% 100%;
background-repeat: no-repeat;
background-position: right;
}
Any solutions, how to do that?
As far as I know,
You can do it with vendor prefixes and it's not supported in IE (even IE 11)
Unless someone here knows a better way to implement it, I would advise against this.
body {
background: #111;
width: 50%;
margin: 0 auto;
font-size: 50px
}
.page-nav {
background: linear-gradient(to right, #900, #999);
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
<body>
<p class="page-nav">Sample Sample</p>
</body>
I'd like to simulate a drop shadow effect using border-image and linear-gradient (for scroll performance reasons, I am not using the native box-shadow effect).
As can be seen in the example below and in the fiddle, my attempted approach involves using border-image for the gradient, border-image-outset to move the shadow outside the content box, and border-width to show only the bottom edge.
Admittedly, I don't understand border-image so well, particularly when it comes to using it with linear-gradients. Through trial and error, I achieved what seemed to be a satisfactory result. But as it turns out, when the width of the div is short enough, the "shadow" disappears entirely.
What can I do to achieve a drop shadow like in the top box, but one that works regardless of the box size? Your help with this is really appreciated!
.box
{
/* the "shadow" */
border-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 10%, rgba(0,0,0,0) 100%) 100 repeat;
border-image-outset: 0px 0px 6px 0px;
border-width: 0px 0px 6px 0px;
border-style: solid;
/* other stuff */
font-family: sans-serif;
font-size: 20px;
color: #FEFEFE;
background: #007277;
margin: 10px 0px;
float: left;
clear: left;
padding: 50px;
}
<div class="box">
Here's longer text, where the "shadow" appears how I want it to.
</div>
<div class="box">
Short
</div>
For the short border to work you need to change the
100 repeat;
to
0 0 100 0 repeat;
.box
{
/* the "shadow" */
border-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 10%, rgba(0,0,0,0) 100%) 0 0 100 0 repeat;
border-image-outset: 0px 0px 6px 0px;
border-width: 0px 0px 6px 0px;
border-style: solid;
/* other stuff */
font-family: sans-serif;
font-size: 20px;
color: #FEFEFE;
background: #007277;
margin: 10px 0px;
float: left;
clear: left;
padding: 50px;
}
<div class="box">
Here's longer text, where the "shadow" appears how I want it to.
</div>
<div class="box">
Short
</div>
This link may help you a little on your border imaging https://css-tricks.com/understanding-border-image/
I made a CSS class that applies a gradient and rounded corners to a span element to act as a button. It seems to work in most browsers that I've tested, but IE9 is giving me some issues. As the class is now the rounded corners aren't working correctly. However if you look very close it seems like there are rounded corners underneath a layer that is not rounded (I think that's the best way to explain how it looks, forgive me if that doesn't make sense)
Anyway, by trial and error I messed with the class until I found that removing the 'display:inline-block;' property allows for the rounded corners to be displayed correctly, but as a result the gradient no longer works. Any ideas?
http://jsfiddle.net/jessikwa/wcgzkkgr/
The HTML:
<span class="action_button">Button</span>
The CSS:
.action_button
{
color: #FFFFFF;
font-size: 12px;
font-family: arial;
cursor: pointer;
text-decoration: none;
padding: 3px 5px;
display: inline-block;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
border: 1px solid #f7a03b;
webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: #8b8b8b 0px 1px 4px;
-moz-box-shadow: #8b8b8b 0px 1px 4px;
box-shadow: #8b8b8b 0px 1px 4px;
background-color: #efbb7f;
background-image: -webkit-gradient(linear, left top, left bottom, from(#efbb7f), to(#f88600));
background-image: -webkit-linear-gradient(top, #efbb7f, #f88600);
background-image: -moz-linear-gradient(top, #efbb7f, #f88600);
background-image: -ms-linear-gradient(top, #efbb7f, #f88600);
background-image: -o-linear-gradient(top, #efbb7f, #f88600);
background-image: linear-gradient(to bottom, #efbb7f, #f88600);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#efbb7f, endColorstr=#f88600);
}
Update: Further reading of other posts in StackOverflow gets me a bit closer, but still not quite right.
IE9 border-radius and background gradient bleeding
This post's answer suggestions using an image, which I would prefer to avoid. Another proposed answer of the thread puts a wrapper around the button with "overflow:hidden;", but this doesn't seem to be quite right, either.
http://jsfiddle.net/uu19uqg4/
you have forgot the "-" near webkit-border-radius
try this :
-webkit-border-radius: 3px;
this link can be usefull
Add the following in the head of the page.
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=8,IE=9" />
This will disable the compatibility mode in IE9. If it's due to compatibility issue then it will be solved.
I want to style a select and it works almost perfectly but on google chrome behvior is different and I fixed that with -webkit-appearance: none; but this delete also select arrow.
I try to set an arrow for my select but it is not visible in chrome because I use multiple backgrounds. What can I do to set that arrow on chrome.
select{
width:120px;
margin:10px;
background:url(http://s14.postimage.org/jls6v1ywt/select_background.png),
url(http://s13.postimage.org/edsg65ss3/select_arrow.jpg);
background-position: center center,100% 53%;
background-repeat: repeat-x, no-repeat;
border:1px solid #DDDBD7;
-webkit-appearance: none;
}
check my example:
http://jsfiddle.net/DCjYA/359/
Swap the order of the backgrounds, so that the "arrow" background is on top.
http://dev.w3.org/csswg/css3-background/#layering
The first image in the list is the layer closest to the user, the next one is painted behind the first, and so on. The background color, if present, is painted below all of the other layers.
See: http://jsfiddle.net/thirtydot/DCjYA/361/
background: url(http://s13.postimage.org/edsg65ss3/select_arrow.jpg), url(http://s14.postimage.org/jls6v1ywt/select_background.png);
background-position: 100% 53%, center center;
background-repeat: no-repeat, repeat-x;
select {
padding:9px;
margin: 0;
border-radius:4px;
-webkit-box-shadow:
0 0px 0 #ccc,
0 0px #fff inset;
background: url('http://i45.tinypic.com/309nb74.png') no-repeat right, -moz-linear-gradient(top, #FBFBFB 0%, #E9E9E9 100%);
background: url('http://i45.tinypic.com/309nb74.png') no-repeat right, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBFBFB), color-stop(100%,#E9E9E9));
color:black;
border:none;
outline:none;
display: inline-block;
-webkit-appearance:none;
cursor:pointer;
border: 1px solid #ccc;
}
This piece of code will fix your problem. Just change the padding and use local images or color codes a/c to your need. or use this to generate the code for you.
See: JS fiddle for background gradient and down arrow