Cannot remove gradient - css

I'm trying to remove gradient overriding this:
-webkit-linear-gradient(right,#1a5cce, #00c7ce 85%);
background: -moz-linear-gradient(right,#1a5cce, #00c7ce 85%);
background: -o-linear-gradient(right,#1a5cce, #00c7ce 85%);
background: linear-gradient(right,#1a5cce, #00c7ce 85%);
I tried with:
background: -webkit-linear-gradient(none);
background: -moz-linear-gradient(none);
background: -o-linear-gradient(none);
background: linear-gradient(none);
I'm not a css expert, what I want to do is remove completely the gradient, is this possible?

Just set background: initial.
All CSS properties allow initial value to revert their value to initial state. Use this property what you don't want to bother about particular property defaults.
Also you can use background: none for background property.

Gradient background reset that you'll need to set background: none #color;
Example:
.your-class {
background: none #157FCC;
color: #FFFFFF;
}

Related

Change css value using Angular

In my project I'm using a "ngb-progressbar" element to draw a progress-bar.
To manually set the css for this bar I'm using this piece of code:
::ng-deep div.bg-success.progress-bar{
background: linear-gradient(90deg, rgba(54,166,5,1) 0%, rgb(219, 238, 52) 100%) !important;
background-size: 100% !important;
background-repeat: no-repeat !important;
}
In my TS code I need to set nynamically the value of background-size attribute and to do this I'm looking for a method to access to the element with "::ng-deep".
Removing "::ng-deep" changes have no effect.
Any idea to access my element style via TS code by using ::ng-deep ?
Use the following HTML
<div class="container" [class.someStyle]="yourCondition">
<ngb-progressbar></ngb-progressbar>
</div>
So that you can use the following SCSS
.container {
&.someStyle {
::ng-deep div.bg-success.progress-bar {
// Your new style
}
}
::ng-deep div.bg-success.progress-bar {
background: linear-gradient(90deg, rgba(54,166,5,1) 0%, rgb(219, 238, 52) 100%) !important;
background-size: 100% !important;
background-repeat: no-repeat !important;
}
}
This is the cleanest solution at your disposal. The other solution involves manually changing the HTML with the help of vanillaJS or maybe the Renderer2, which are kind of meh.

style specific tooltip popup in foundation

Hi I use a lot of tooltips in my website, and I recently want to add a tooltip in the footer, the website has white skin so tooltips in the body are black backround but the footer has black background so I need the tooltip to has a white background, but only the tooltip that is placed in the footer.
I tried to look for a class where I can style separately but I could not find it.
<span data-tooltip aria-haspopup="true" class="has-tip tip-top tip-footer" title="Llámanos al (+57)(7)440342">Preguntas?</span>
This is the tooltip and the generated popup is
<span data-selector="tooltip-i672cwnm0" id="tooltip-i672cwnm0" class="tooltip tip-top" role="tooltip" style="visibility: visible; display: none; width: auto; top: 387.375px; bottom: auto; left: 865px; right: auto;">Llámanos al (+57)(7)440342<span class="nub"></span></span>
I cannot select it by id because the id dinamic so it changes and I also cant select it by .tip-top as I have tip-tops in all the website so it would change all those.
any idea? how to pass a custom class to the popup?
I have just edited the CSS, in my app.css file, using this...
.tooltip{background:#000;color:#FFF}
.tooltip>.nub{border-color:transparent transparent #FFF transparent}
.tooltip.opened{border-bottom:dotted 1px #FFF !important;color:#FFF !important}
.tap-to-close{color:#FFF}
.tooltip>.nub{border-color:transparent transparent #FFF transparent}
.tooltip.tip-top>.nub{border-color:#FFF transparent transparent transparent}
.tooltip.tip-left>.nub{border-color:transparent transparent transparent #FFF}
.tooltip.tip-right>.nub{border-color:transparent #FFF transparent transparent}
If you have an id or class assigned to your footer try adding that before the code to style the tool-tip just in that section of the site. i.e.
#yourid .tooltip>.nub{border-color:transparent transparent #000 transparent;left:0.9375rem}
or
.yourclass .tooltip>.nub{border-color:transparent transparent #000 transparent;left:0.9375rem}
Play around with these settings to get what you want. The .nub is the triangle. Hope this helps?
Cheers
G
This has changed for Foundation 6.6.3. After spending some time trying to get this, because the tool tip doesn't stay visible. I was able to get to style the triangle(nub) with this:
.tooltip.top:before {
border-color: $yourColor transparent transparent;
}
.tooltip.bottom:before {
border-color: transparent transparent $yourColor;
}
.tooltip.right:before {
border-color: transparent $yourColor transparent;
}
.tooltip.left:before {
border-color: transparent transparent transparent $yourColor;
}
I was using sass with some variables so mine looked like this:
.tooltip {
background: $tooltip-background !important;
width: auto !important;
max-width: 80vw !important;
&.top:before {
border-color: $tooltip-background transparent transparent !important;
}
&.bottom:before {
border-color: transparent transparent $tooltip-background !important;
}
&.right:before {
border-color: transparent $tooltip-background transparent !important
}
&.left:before {
border-color: transparent transparent transparent $tooltip-background !important;
}
}
The !importants are not good practice but in the situation I was in with this, they were necessary.

Bootstrap 3 submenu parent highlight

Submenus were removed in Bootstrap 3. I added them back using this example/code:
http://bootply.com/71520
The issue is the parent menu item does not stay highlighted as we hover over the submenu. How can this be accomplished? This used to work in bootstrap 2:
http://getbootstrap.com/2.3.2/components.html#dropdowns
I tried looking all over the CSS and couldn't find this.
You need to add a new style to .dropdown-submenu:hover > a. Note, I copied the CSS from the existing styles on the a:hover.
.dropdown-submenu:hover > a {
color: #fff;
text-decoration: none;
background-color: #357ebd;
background-image: -webkit-gradient(linear,left 0,left 100%,from(#428bca),to(#357ebd));
background-image: -webkit-linear-gradient(top,#428bca,0%,#357ebd,100%);
background-image: -moz-linear-gradient(top,#428bca 0,#357ebd 100%);
background-image: linear-gradient(to bottom,#428bca 0,#357ebd 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca',endColorstr='#ff357ebd',GradientType=0);
}
http://bootply.com/96695

How do I make a div transparent on a white body background?

The background-color of my body is #ffffff. And I have a div that I need is colored but it needs to be transparent or see through. Is it possible to do this using CSS3 or do I have to use images to achieve this?
body {
background-color: #ffffff;
}
.box {
background-color: #999999;
background-image: linear-gradient(to top, #999999 0%, #444444 100%) !important;
opacity: 0.7;
}
Update:
If you go here: http://pinesframework.org/pnotify/#demos-simple and look for the demo for Transparent Success you can see how the pop-up looks see through on a white background. I need to do something like that without using an image as they are using one.
It sounds like you want an alpha transparent background color. If that's the case, you can use RGBA colors, rather than a solid hex value and an opacity property. This way, only the background will have transparency, not the content.
In your case it would be:
.box {
background-color: rgba(255,0,0,0.7);
}
You can also specify a fallback color to browsers that don't support RGBA (IE 8 and older), or create a PNG image with the color fill you want. My vote is toward progressive enhancement, and just specify an alternate color for browsers that don't understand RGBA:
.box {
background-color: #ff4c4c;
background-color: rgba(255,0,0,0.7);
}
UPDATED: Per your comment below, this question appears to be a duplicate of CSS - Opaque text on low opacity div?.
You need to change the opacity of the background instead of the element:
.box {
rgba(255,0,0,0.6);
}
Or, since you are using a gradient, I would use this:
Ultimate CSS Gradient Generator
It will allow you to do semi-transparent backgrounds with a gradient.

How can I get IE Filter & CSS Transparent Background to display together?

I am trying to get a transparent PNG & Gradient to display at the same in IE. Right now, the filter dominates over the background image. If I take out the filter, the PNG does display. Ideally, I would like the PNG to be on top of the gradient.
CSS:
.defaultSelection {
border: 1px solid #bbb; color: #222222; outline: 0 none;
background: url('/img/dropdown-arrow.png') right center no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#e9e9e9', endColorstr='#ffffff' )
}
HTML:
<li class="defaultSelection">Current Selection</li>
Good news: This is possible with IE (despite what others have said). But it does need a little hack called CSS3Pie.
CSS3Pie is a hack for IE which allows it to support a variety of CSS3 features using ordinary CSS, rather than those horrible filter styles.
See here for its supported features: http://css3pie.com/documentation/supported-css3-features/
You'll note that this includes the ability to specify a background with an image and a gradient:
As described on the page linked above, simply specify your CSS with -pie-background in addition to the normal background style, and also with the Pie behavior style to run the Pie script.
#myElement {
background: url(bg-image.png) no-repeat #CCC; /*non-CSS3 browsers will use this*/
background: url(bg-image.png) no-repeat, -moz-linear-gradient(#CCC, #EEE); /*gecko*/
background: url(bg-image.png) no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*webkit*/
background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*future CSS3 browsers*/
-pie-background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*PIE*/
behavior: url(PIE.htc);
}
Behind the scenes, CSS3Pie creates a VML element, and layers it with the real element to achieve the desired effects (VML is a vector graphics language which is supported by IE6 and up). But you don't need to know any of this, as Pie goes to some lengths to make itself completely transparent to the developer and to the user. It does have some bugs and known issues, but overall it's a very very good tool for pulling older versions of IE up to some sort of parity with more modern browsers.
Have you tried using the gradient on the li and then applying the image on an element within the li?
<li class="defaultSelection">Current Selection<span class='bg'> </span></li>
.defaultSelection {
border: 1px solid #bbb; color: #222222; outline: 0 none;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#e9e9e9', endColorstr='#ffffff' )
}
.defaultSelection .bg{
display:inline-block;
width: 10px;
height:10px;
background: transparent url('/img/dropdown-arrow.png') right center no-repeat;
}
This is not possible with IE as a filter gradient is essentially another background image (it takes its place.) Try reversing the order to have the filter first and the bg image last in the CSS selector, you'll most likely see the image.
Your best bet is to go with layering, or make on PNG that has both the image and transparency.

Resources