So I am trying to setup the fadeout css3 hr tag, it works on JSFiddle but I can't solve it on my site.
My CSS class on site:
.about-sidebar{
margin: 25px 0;
height: 1px;
background: black;
background: -webkit-gradient(linear, 0 0, 100% 0, from(#1F1F1F), to(#FFD700), color-stop(50%, black));
}
HTML:
<hr class="about-sidebar" />
I have tried taking the class out of the HR tag and surrounding it with a div but doesn't solve.
Site: http://travisingram.net/ it is the "Welcome to my Blog" on the sidebar.
Jsfiddle working:
http://jsfiddle.net/ZTz7Q/1633/
The reason it wasn't working on your website was because the <hr> didn't contain the class with the gradient styling. Currently, you just have <hr> which should be changed to <hr class="line"> or whatever class you're using.
Aside from that, the linear-gradients needs some tweaking and cross browser prefix vendors for more support.
jsFiddle example
I don't know what colors you want.. but here is black to transparent.
.line {
margin: 25px 0;
height: 5px;
background: black;
background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.98) 2%, rgba(255,255,255,0) 90%);
background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0.98) 2%,rgba(255,255,255,0) 90%);
background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0.98) 2%,rgba(255,255,255,0) 90%);
}
Related
I'm trying to create a multiple color background to implement this:
And right now I managed to do this:
What I did:
Desired Background:
I'm trying to do it using gradients, but it seems that it's not possible to combine two gradients to do that. (It's possible to do other things, but not this).
Is there a way to implement this backgorund?
Thanks!
Try this (adjust the percentage and colors as your needs):
.yourdiv{
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 70%, #f1f1f1 70%, #f1f1f1 100%);
background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 70%,#f1f1f1 70%,#f1f1f1 100%);
background: linear-gradient(to bottom, #ffffff 0%,#ffffff 70%,#f1f1f1 70%,#f1f1f1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f1f1f1',GradientType=0 );
}
DEMO HERE
i am guessing u need the darker grey section in the desired output to be shown? if so i would suggest to divide it into sections and give individual background.
if u can post some code. i would be happy to help.
Okay, not sure if this is exactly what you want but this is how I'd do psd to css/html. See screen shot below.
Also a WORKING DEMO HERE
Just wrap the whole card in a div and apply a left border would do the trick.
border-left-width: 8px;
border-left-color: rgba(10, 255, 80, 0.75);
border-radius: 5px;
You may remove the box shadow if you don't want, just feel move active with it.
At the end, I managed to do it with this:
This for the GREEN part:
.assignment-item {
padding: 5px 5px 0px 10px !important;
margin:15px auto;
border-radius: 8px;
background: linear-gradient(to right, #4f8b2b 0%,#4f8b2b 2%,#ffffff 2%,#ffffff 100%, transparent) !important;
}
This for the GREY part:
.assignment-item:before{
position:absolute;
z-index:-1;
bottom:0;
left:2%;
width:100%;
height:25%;
content:"";
background-color:#f2f2f2;
}
Here is the result:
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.
What I am trying to do is I want to keep the top 50% of the html button to have a gradient say from #FFF to #BBB and the bottom 50% should remain in one color lets say #111. I can't figure out a way to do it, any help would be largely appreciated.
The code of my button is:
<button class="Button1" type="submit">Submit</button>
The css:
.Button1 {
background-image: linear-gradient(to bottom, #fff 0%, #bbb 50%, #111 50%);
}
This should do the trick in latest browsers. It's up to you to make it cross-browser compatible. (I personally like the Photoshop-esque interface of http://www.colorzilla.com/gradient-editor/)
Here is a sample from Bootstrap that should help you out with button gradients. This also covers most modern browsers.
.btn-info {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
background-color: #49afcd;
background-image: -moz-linear-gradient(top,#5bc0de,#2f96b4);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#5bc0de),to(#2f96b4));
background-image: -webkit-linear-gradient(top,#5bc0de,#2f96b4);
background-image: -o-linear-gradient(top,#5bc0de,#2f96b4);
background-image: linear-gradient(to bottom,#5bc0de,#2f96b4);
background-repeat: repeat-x;
border-color: #2f96b4 #2f96b4 #1f6377;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de',endColorstr='#ff2f96b4',GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
Hope that helps.(these are sort of teal, so you'll have to change that part)
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%)
}