Problem
Is there any way to make a Bootstrap 3.2 sign glyph to have a white background? It is being displayed on a coloured background. I've got an example on bootply but it has a white trim that is annoying.
CSS
.glyph-white-background {
background-color:#FFFFFF;
border-radius: 50%;
}
I had a play with the bootply and there may well be better ways of doing this but for now I sorted it by placing an inner span inside the glyphicon element and positioning it so that its border does not overlap the parents.
<div class="header">
<span class="glyphicon glyphicon-exclamation-sign glyph-background">
<span class="inner"></span>
</span>
</div>
The CSS positions the inner to provide the red background for the icon only.
.header {
background-color:#3AA3CB;
font-size: x-large;
}
.glyph-background {
position:relative;
border-radius:50%;
color:#fff;
z-index:2;
}
.inner {
position:absolute;
top:2px;
left:2px;
right:2px;
bottom:2px;
border-radius:50%;
background-color:red;
z-index:-1;
}
Bootply
I followed #Duroth 's advice and it works just fine.
HTML
<span class="not-available-icon"><i class="fa fa-exclamation"></i> </span>
CSS
.not-available-icon {
background-color: #9D5A5B;
display: inline-block;
height: 25px;
width: 25px;
color: white;
border-radius: 50%;
font-size: 16px;
padding-left: 10px;
}
JS Fiddle Here
You can use any color in :
.glyph-white-background {
background-color: red;//Say red
border-radius: 50%;
}
You should specify white color for class .glyph-red
.glyph-red {
color: white;
}
See the screenshot:
http://www.bootply.com/IRTWifeP2u
I consider this absolute overkill for what you're trying to accomplish, but at least it seems to work.
Using a gradient editor, I generated an image with a radial gradient that drops from 100% to 0% opacity at around 67% / 68%, making the image fully transparent just before it hits the edge of the icon.
The following CSS should work for just about every circle icon:
.glyph-white-background {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2NyUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2OCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 67%, rgba(255,255,255,0) 68%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(67%,rgba(255,255,255,1)), color-stop(68%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 67%,rgba(255,255,255,0) 68%,rgba(255,255,255,0) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 67%,rgba(255,255,255,0) 68%,rgba(255,255,255,0) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 67%,rgba(255,255,255,0) 68%,rgba(255,255,255,0) 100%);
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 67%,rgba(255,255,255,0) 68%,rgba(255,255,255,0) 100%);
}
Ofcourse, do mind your cross-browser compatibility.
Related
I would like to keep a CSS3 arrow on the same horizontal plane as some text. In other words, I would like all this to stay on the same horizontal plane ...
<div style="display:block">
<div id="downArrow" class="downArrow arrow"></div>
- 1.5780377548310014 / -0.01013426671732404 %
</div>
I thought "display:block" would do the trick but apparently not -- https://jsfiddle.net/6m7vegwc/ . Only problem is the CSS for the arrow requires an "after"
.downArrow:after {
background: linear-gradient(120deg, transparent 63%, #fff 63%),
linear-gradient(-120deg, transparent 63%, #fff 63%),
linear-gradient(to top, #ccc, #000);
}
and I think this is throwing things off. Anyway, how can I keep my arrow on the same horizontal plane as the text?
The simplest fix would be to make them all display inline-block.
#oneDayChange > div {
display: inline-block;
vertical-align: middle;
}
.arrow {
display: inline-block;
vertical-align: middle;
}
.arrow:after {
height: 50px;
width: 50px;
display: inline-block;
content: '';
}
.upArrow:after {
background: linear-gradient(60deg, transparent 63%, #fff 63%), linear-gradient(-60deg, transparent 63%, #fff 63%), linear-gradient(to bottom, #ccc, #000);
}
.downArrow:after {
background: linear-gradient(120deg, transparent 63%, #fff 63%), linear-gradient(-120deg, transparent 63%, #fff 63%), linear-gradient(to top, #ccc, #000);
}
<div id="oneDayChange">
One day change
<div>
<div id="downArrow" class="downArrow arrow"></div>
- 1.5780377548310014 / -0.01013426671732404 %
</div>
</div>
I believe you are looking for display:inline alternatively use a instead of a as inline is its normal state.
Here is a guide that explains it in full https://www.w3schools.com/css/css_display_visibility.asp
What you are looking for is display: inline but you could simplify your example by just swapping the <div>s against <span>s because <span> tags are by default display: inline
If you want to have everything more steady and centered, you can also use display: flex which takes it's children and spreads them horizontally and stretches them vertically by default.
#oneDayChange {
display: flex;
justify-content: flex-start; /* align to the left */
align-items: center; /* center content vertically */
}
.arrow:after {
height:50px;
width:50px;
display: inline-block;
content:'';
}
.upArrow:after {
background: linear-gradient(60deg, transparent 63%, #fff 63%),
linear-gradient(-60deg, transparent 63%, #fff 63%),
linear-gradient(to bottom, #ccc, #000);
}
.downArrow:after {
background: linear-gradient(120deg, transparent 63%, #fff 63%),
linear-gradient(-120deg, transparent 63%, #fff 63%),
linear-gradient(to top, #ccc, #000);
}
<div id="oneDayChange">
One day change
<span id="downArrow" class="downArrow arrow"></span>
- 1.5780377548310014 / -0.01013426671732404 %
</div>
This can be done with display: flex
<div id="oneDayChange">
...
<div style="display:flex; flex-direction: row;">
...
</div>
Read more about flexbox (one of the better css innovations in recent years) here
I want to put a div between two different backgrounds.
It looks something like below image:
As you can see, the div placed in between two background, white and blue.
How can I achieve this?
You can use position:absolute and a negative margin-top on the div you want in the middle
Check this
You can use below code by applying to that div. In this code you can use two different colors to background that you want.
background: linear-gradient(bottom, #FFFFFF 50%, #008ED3 50%);
background: -o-linear-gradient(bottom, #FFFFFF 50%, #008ED3 50%);
background: -moz-linear-gradient(bottom, #FFFFFF 50%, #008ED3 50%);
background: -webkit-linear-gradient(bottom, #FFFFFF 50%, #008ED3 50%);
background: -ms-linear-gradient(bottom, #FFFFFF 50%, #008ED3 50%);
In above code do not remove any single line, because each line is for browser compatibility, each line code is for different browsers.
You can position your white div so that it stacks on top of the divs with blue and white background.
https://jsfiddle.net/z6ohochn/
#blue {
background: blue;
width:100%;
height:60px;
}
#white {
width:80%;a
height:50px;
background:white;
z-index:2;
position:relative;
top:-80px;
left:10%;
border-radius:5px;
}
#gray {
background: gray;
width:100%;
height:60px;
}
I have a png graphic that I'm using as a button and when the user hovers over the image, I would like to have a color gradient appear over just the button image. Everything I'm finding is working for background images.
My html looks like this:
<img id="connectionRight_img" class="btn" src="imgs/trailEnd_turnRight.png" alt="Right Arrow"/>
And now I'm wondering what needs to go inside the css to accomplish the color change upon hover:
.btn:hover: {
??
}
Any suggestions would be appreciated.
You need to wrap your img with an inline or inline-block element and add a pseudo element to that wrap that only displays on hover
FIDDLE: http://jsfiddle.net/xz7xy8dg/
CSS:
.wrap {
position:relative;
display:inline-block;
}
.wrap::after {
position:absolute;
height: 100%;
width:100%;
top:0;
left:0;
background: -moz-linear-gradient(top, rgba(0,255,0,1) 0%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,255,0,1)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(top, rgba(0,255,0,1) 0%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(top, rgba(0,255,0,1) 0%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(top, rgba(0,255,0,1) 0%,rgba(255,255,255,0) 100%);
background: linear-gradient(to bottom, rgba(0,255,0,1) 0%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff00', endColorstr='#00ffffff',GradientType=0 );
display:none;
content: ' ';
}
.wrap:hover::after {
display:block;
}
HTML:
<div class="wrap">
<img id="connectionRight_img" class="btn" src="imgs/trailEnd_turnRight.png" alt="Right Arrow"/>
</div>
This works fine for me. Still recommend not to use image as background if possible. It will slowdown the performance.
<style>
button.mylink { border-width:0px; text-align:center; width : 60px; height : 20; display: inline-block; background-image : url(imgs/trailEnd_turnRight.png); text-decoration:none }
button.mylink:hover { background-image : url(imgs/trailEnd_turnRight_hover.png) }
</style>
<button class="mylink" href="#">abc</button>
I don't want to use an image for this. I want to create a line which from transparent towards solid with css. Can I? with css3 or html5 as like this;
Like this: http://codepen.io/richbradshaw/pen/uexaG
.blurred-line {
height:30px;
width:600px;
margin:0 auto;
-moz-background-image: linear-gradient(to right, transparent 0%, black 100%);
background-image: linear-gradient(to right, transparent 0%, black 100%);
border-radius:15px;
-webkit-filter:blur(1px);
}
Which renders like:
Despite what most people seem to think, that gradient syntax is the real syntax, and works in Firefox 10+, Chrome 26+, IE10+ and Safari 6 (or 7?)+.
Including all the ancient gradient stuff is a waste of time, unless you are planning to support browsers that don't exist (e.g. Chrome 10, Firefox 3.6).
I suggest you to use a horizontal linear gradient with border radius, something like:
border-radius:50px;
background:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
See this jsfiddle or the snippet below for more details.
.rounded {
height:50px;
width:80%;
border-radius:50px;
background: -webkit-gradient(linear, 100% 0, 0 0, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
background: -webkit-linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
background: -moz-linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
background: -o-linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
}
<div class="rounded"></div>
There is a gradient generator that i like a lot since it gives crossBrowser solution called "Ultimate CSS Gradient Generator".
Use rgba format
/* webkit example */
background-image: -webkit-gradient(
linear, left top, left bottom, from(rgba(50,50,50,0.8)),
to(rgba(80,80,80,0.2)), color-stop(.5,#333333)
)
An example: http://nicolahibbert.com/css3-alpha-transparent-gradients/
Duplicate: CSS3 Transparency + Gradient
This tool might be helpful too: http://www.colorzilla.com/gradient-editor/
As you said "from transparent towards solid", this should be what you want:
HTML
<div class="container">
<div class="gradient">
</div>
</div>
CSS
div.container {
width: 500px;
height: 30px;
/*background-color: #791;*/ /*uncomment this property to see the transparency effect*/
padding: 10px;
}
div.gradient {
width: 100%;
height: 100%;
background-image: linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,1)); /* use vendor specific property if the standard one does not work */
border-radius: 25px;
}
You can do this with CSS3, and if you want it to look just like the image you provided, you can use some transparency and border-radius. I always found this link helpful:
I have two divs with same background color. How can I set the width of background?
Expected result:
Here is HTML:
<div>
<span>100% width of background</span>
</div>
<div>
<span>75% width of background</span>
</div>
What I tried to do using CSS:
div {
background-color: #fc0;
margin: 2px;
}
div:last-child {
background-size: 75%;
}
jsFiddle, of course.
Is it posible to do this exept of setting width of a div?
You can use background gradients with hard stops. Here I'm using custom properties on each element to dynamically set the length value. The CSS rule uses a partial attribute selector to look for the custom property in the style attribute.
div {
background-color: #fc0;
margin: 2px;
}
div[style*="--bg-length"] {
background: linear-gradient(
to right,
#fc0 var(--bg-length), /* the end of the colored segment */
transparent var(--bg-length) /* the start of the transparent segment */
);
}
<div><span>100% width of background</span></div>
<div style="--bg-length: 300px"><span>60% width of background</span></div>
<div style="--bg-length: 85%"><span>85% width of background</span></div>
<div style="--bg-length: 70vw"><span>85% width of background</span></div>
You can't do it with a simple background-color, but you can do it with a CSS gradient.
background-color is always treated as a single plain colour for the entire element, but gradients are treated as images, and can be sized. You can also do other things with gradients, such as layering multiple gradients, which can't be done with a simple background-color.
I would use a 1px image as background something like background: url(1px.png) repeat-y; then you can set background-size:75%; as it's image now. Making life easier and less/simple code as well.
you can use gradient:
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY5JSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxZTU3OTkiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgba(30,87,153,1) 0%, rgba(30,87,153,1) 69%, rgba(30,87,153,0) 70%, rgba(30,87,153,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(30,87,153,1)), color-stop(69%,rgba(30,87,153,1)), color-stop(70%,rgba(30,87,153,0)), color-stop(100%,rgba(30,87,153,0)));
background: -webkit-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(30,87,153,1) 69%,rgba(30,87,153,0) 70%,rgba(30,87,153,0) 100%);
background: -o-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(30,87,153,1) 69%,rgba(30,87,153,0) 70%,rgba(30,87,153,0) 100%);
background: -ms-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(30,87,153,1) 69%,rgba(30,87,153,0) 70%,rgba(30,87,153,0) 100%);
background: linear-gradient(to right, rgba(30,87,153,1) 0%,rgba(30,87,153,1) 69%,rgba(30,87,153,0) 70%,rgba(30,87,153,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#001e5799',GradientType=1 );
CSS gradient generator
jsfiddle
You should change your CSS to :
div {
background-color: #fc0;
margin: 2px;
}
div:last-child {
background-image: -webkit-linear-gradient(left, #fc0, #fc0 75%, transparent 75%, transparent 100%)
}