background-color

Pen highlighter effect in css

by

for a hyper realistic pen highlighter! Play with the background gradients for the intensity and with text-shadow to give it a washed effect. span { padding: 0.6em 13.7px; line-height: 1.8em; font-size: 23px; font-family: -apple-system,BlinkMacSystemFont,”Segoe UI”,Roboto,”Helvetica Neue”,Arial; } span.highlight { font-weight: bolder; background: linear-gradient(104deg, rgba(130, 255, 173,0) 0.9%, rgba(130, 255, 173,1.25) 2.4%, rgba(130, 255, 173,0.5) 5.8%, … Read more

Border and background show up as different colors even when color values are same in CSS

by

You should specify background-clip: padding-box; (or content-box) because, by default, this property is set to border-box thus the background also covers the area under the borders. The effect you’re obtaining is actually due to an overlapped transparency (with a full-solid colour you wouldn’t notice the issue), so that’s the reason you’re seeing the border a … Read more

TD background color causing borders to disappear

by

I just came upon this problem myself, but I didn’t like the solution presented here, so I kept googling. I found this answer: https://stackoverflow.com/a/16337203/1156476 Here, a simple addition to the table cell fixes the borders: table td { border: 1px solid #000; border-collapse: collapse; margin: 0; padding: 4px; position: relative; background-clip: padding-box; /* Add this … Read more

I want to add a background color only to part of my div

by

Gradients DO NOT necessarily have a fade, that is a misconception, let’s say that you want your div to be 70% red (solid) starting from the top, your CSS will be. background-image: linear-gradient(top, red, red 70%, transparent 70%, transparent 100%) Two Methods: With Gradients: div{ width:200px; height:200px; margin:50px auto; border:4px solid rgb(50,50,50); background-image: linear-gradient(top, red, … Read more

CSS Inherit for unknown Background Color is Actually Transparent

by

Setting background-color: inherit does cause it to take the background colour of the parent element. The reason it is taking transparent is because the background colour of the parent (the li) is transparent (the default value). The only other element in your second JSFiddle which has a background colour set is #unknown_background, which is the … Read more

WPF Change Background color of a Combobox

by

Try this <Window.Resources> //Put this resourse n Window.Resources or UserControl.Resources <LinearGradientBrush x:Key=”NormalBrush” StartPoint=”0,0″ EndPoint=”0,1″> <GradientBrush.GradientStops> <GradientStopCollection> <GradientStop Color=”#FFDC3939″ Offset=”0.0″/> <GradientStop Color=”#FFE80E0E” Offset=”1.0″/> </GradientStopCollection> </GradientBrush.GradientStops> </LinearGradientBrush> <SolidColorBrush x:Key=”WindowBackgroundBrush” Color=”#FFFBE618″ /> <ControlTemplate x:Key=”ComboBoxToggleButton” TargetType=”ToggleButton”> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition Width=”20″ /> </Grid.ColumnDefinitions> <Border x:Name=”Border” Grid.ColumnSpan=”2″ CornerRadius=”2″ Background=”{StaticResource NormalBrush}” BorderThickness=”1″ /> <Border Grid.Column=”0″ CornerRadius=”2,0,0,2″ Margin=”1″ Background=”{StaticResource WindowBackgroundBrush}” BorderThickness=”0,0,1,0″ … Read more

How to use JavaScript to change div backgroundColor

by

var div = document.getElementById( ‘div_id’ ); div.onmouseover = function() { this.style.backgroundColor=”green”; var h2s = this.getElementsByTagName( ‘h2’ ); h2s[0].style.backgroundColor=”blue”; }; div.onmouseout = function() { this.style.backgroundColor=”transparent”; var h2s = this.getElementsByTagName( ‘h2’ ); h2s[0].style.backgroundColor=”transparent”; };

Multi-coloured circular div using background colours?

by

One solution is to use multiple background layer considering rotated linear-gradient. We can also rely on pseudo-element and some transparent colors. Then simply adjust the degrees, colors, opacity of colors and position of pseudo element to obtain any chart you want: .circle { margin: 20px; width: 200px; height: 200px; border-radius: 50%; background: linear-gradient(to right, rgba(255,0,0,0.5) … Read more