Related
This question already has answers here:
Create a glossy light effect using CSS
(6 answers)
Closed last month.
I am trying to make a gradient like glow in a corner of a div like in a photo above ( color is not important )
I've tried:
<div style={{ background: `linear-gradient(#f79800,#03A678)` }}>
<Icon/>
</div>
.icon-wrapper {
background: linear-gradient(#f79800, #03A678);
display: inline-block;
padding: 8px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="icon-wrapper">
<i class="fa-solid fa-umbrella"></i>
</div>
Looks like you are trying to get a "glassy look" (to give you a keyword to search for).
edit , the right keyword is glossy (excuse my average english) - a duplicate that seems fine to your needs : Create a glossy light effect using CSS
You may then see if adding a translucide radial-gradient on top of the linear-gradient does the job.
possible example to tune:
.icon-wrapper {
background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.25) 40%, transparent 45%), linear-gradient(#f79800, #03A678);
display: inline-block;
padding: 8px;
border-radius:0.3em;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="icon-wrapper">
<i class="fa-solid fa-umbrella"></i>
</div>
Here is an example of how you might adjust the code to create a "glow" effect in the top right corner of the div:
Please try this :
<div style={{
background: `linear-gradient(135deg, #f79800, #03A678, #f79800)`,
background: `-webkit-linear-gradient(135deg, #f79800, #03A678, #f79800)`,
background: `-o-linear-gradient(135deg, #f79800, #03A678, #f79800)`,
background: `-moz-linear-gradient(135deg, #f79800, #03A678, #f79800)`
}}>
<Icon/>
</div>
I think :after pseudo could help you to have a transparent cover over your background so you can achieve your aims like that,
here you can find an example of what you aims to get.
i wish it helps
div {
height:150px;
width:150px;
background:radial-gradient(coral,lightpink);
border:3px solid lightgray;
border-radius:15px;
margin:auto;
text-align:center;
align-content:center;
display:flex;
align-items:center;
justify-content:center;
font-size:8rem;
font-weight:bold;
font-family:cursive;
}
div:after {
content:"";
height:140px;
width:140px;
position:absolute;
background:linear-gradient(45deg, white,lightgray);
opacity:0.1;
border-radius:15px;
margin:5px;
}
span {
color: lightgray;
text-shadow: 0 0 3px gray;
}
<div><span>©</span></div>
I have components that can be themed:
<div class="ComponentFoo theme-blue">
</div>
Components can be nested into one another.
I want a theme applied to a parent component propagate to all its children.
A naive implementation could look like this:
<div class="ComponentFoo theme-blue">
<div class="ComponentBar">
<div class="ComponentBaz">
</div>
</div>
<div class="ComponentBar">
</div>
<div class="ComponentBar">
</div>
</div>
.theme-blue.ComponentFoo,
.theme-blue .ComponentFoo {
background-color: blue;
}
.theme-blue.ComponentBar,
.theme-blue .ComponentBar {
color: white;
}
This works well for a simple case, but fails miserably when themes are nested:
<div class="ComponentFoo theme-red">
<div class="ComponentBar theme-blue">
<div class="ComponentBaz">
</div>
</div>
</div>
.theme-blue.ComponentBaz,
.theme-blue .ComponentBaz {
border-color: blue,
color: blue,
background-color: white;
}
.theme-red.ComponentBaz,
.theme-red .ComponentBaz {
border-color: red,
color: red,
background-color: white;
}
In this case, I expect ComponentBaz to assume the blue theme because the nearest themed parent is blue. But that's not what happens!
This is because both .theme-blue .ComponentBaz and .theme-red .ComponentBaz selectors match the Baz component. CSS does not care about the depth of nesting.
When both selectors match, it is the order of declarations in CSS code that matters: last one wins. 😫
I can imagine fixing this in the following ways:
Using extremely numerous and verbose selectors exploiting the > parent combinator and something to override CSS specifity, so that .theme-red > * wins over .theme-red > * > *, etc.
I don't like this solution because it would make CSS unreadable.
Use programming/templating to pass a parent's theme into all of its children:
<ComponentFoo #theme="red" as |theme|>
<ComponentBar #theme={{theme}}>
<ComponentBaz #theme="blue" as |theme2|>
<ComponentQuux #theme={{theme2}}/>
</ComponentBaz>
</ComponentBar>
</ComponentFoo>
I don't like this solution because it's also quite verbose and introduces too much coupling.
Simply apply the theme HTML class to each themable component explicitly.
This is what I'm doing, but I don't see it a solution. More like a workaround, a lesser of evils.
What are the more elegant ways of achieving this? I want a pure CSS solution that would let me use an HTML class on a parent, so that it applies styles to children and overrides grand-parents' styles.
Since CSS is very limited, we are using the Sass preprocessor. I wouldn't mind using a solution producing messy CSS if it is abstracted away very elegantly with Sass.
I think you are setting too many rules in your CSS.
Why don't you set the selector just for the themes, and leave inheritance do the job ?
.theme-blue {
border-color: blue;
color: blue;
background-color: white;
}
.theme-red {
border-color: red;
color: red;
background-color: white;
}
div {
border-width: 1px;
border-style: solid;
padding: 4px;
}
<div class="ComponentFoo theme-red">I am red
<div class="ComponentBar theme-blue">I am blue
<div class="ComponentBaz">I am nested
</div>
</div>
</div>
<div class="ComponentFoo theme-blue">I am blue
<div class="ComponentBar theme-red">I am red
<div class="ComponentBaz">I am nested
</div>
</div>
</div>
Alternative solution using CSS constants
.theme-blue {
--border-color: blue;
--color: blue;
--background-color: white;
}
.theme-red {
--border-color: red;
--color: red;
--background-color: white;
}
.ComponentFoo, .ComponentBar, .ComponentBaz {
border-color: var(--border-color);
color: var(--color);
background-color: var(--background-color);
}
.other {
border-color: black;
color: green;
background-color: silver;
}
div {
border-width: 1px;
border-style: solid;
padding: 4px;
}
<div class="ComponentFoo theme-red">I am red
<div class="ComponentBar theme-blue">I am blue
<div class="other">other
<div class="ComponentBaz">I am nested
</div>
</div>
</div>
</div>
<div class="ComponentFoo theme-blue">I am blue
<div class="ComponentBar theme-red">I am red
<div class="other">other
<div class="ComponentBaz">I am nested
</div>
</div>
</div>
</div>
Of course, you can add another class, "themable", and change the selector with .ComponentFoo .ComponentBar .ComponentBaz to ".themable"
How does this work:
In the theme-blue class you define values for CSS constants (some people call it CSS variables). This values are propagated following the cascading rules, so all the children and descendants will have the same values. But, as all the CSS inheritance, if a child redeclares this values, the children of the child will inherit the redeclared values.
All that is needed now is to set the standard CSS properties to this inherited values, that is done using the var() syntax
By going through your question, I think you want to select a child but not the grandchild. For that, in CSS we have > selector.
For example:
.test_class_1 > .test_class_2
Here it will select the child with class test_class_2 but it will not select the grandchild that is inside the test_class_2 div.
According to this, I modified your css a little bit:
.theme-blue>.ComponentBaz,
.theme-blue>.ComponentBaz {
border-color: blue;
color: blue;
background-color: white;
}
.theme-red>.ComponentBaz,
.theme-red>.ComponentBar {
border-color: red;
color: red;
background-color: white;
}
Here I added > which selects div with ComponentBaz as a class but not the div inside this div. I also replaced "," with ";" maybe that was just typo.
Here is the JSfiddle link: https://jsfiddle.net/o20dLy7k/
If you can limit css to theme background, component color and border then you're in luck.
Everything can be simplified to 2 colours - in my snippet the first drawing lblue and black - there are only 3 delicate situations and they all are delicate only because of visibility of the text:
theme light-blue + component light-blue (or black and black)
inherited light-blue theme + component light-blue
theme light-blue + inherited component light-blue
No more worries. Seriously, everything works as a charm and validator is green, has no comments.
The first drawing - 2 colors - a test of possible worries, the second ugly, but informative - a dozen colors in various combinations. I used ::before{ content: attr(class)} for content, so my css looks worse than usual.
I decided, that very, very complicated situations - as in the center of the drawing - did not deserve to have their text colour corrected (special treatment changed the legacy), too much code. If you wish, you can use something different than color and the problem will be gone.
Of course used colours must visible differ each to other.
function switcher(){
var element = document.getElementById("body");
if(element.classList){ element.classList.toggle("shadow");}
else{
var classes = element.className.split(" ");
var i = classes.indexOf("shadow");
if(i >= 0) classes.splice(i, 1);
else classes.push("shadow");
element.className = classes.join(" ");}}
body{ color: #000}
p, span, h1, h2, h3, h4, h5, h6, div::before{ background: #fff}
/* themes */
.shadow .black{ background: #000; color: #fff}
.black{ background: #000;}
.red{ background: #f00;}
.green{ background: #0d0;}
.blue{ background: #00f}
.white{ background: #fff}
.gold{ background: gold}
.purple{ background: purple}
.grey{ background: grey}
.teal{ background: teal}
.lblue{ background: #5ae}
/* components */
.Cblack{ border-color: black; color: black}
.Cred{ border-color: red; color: red}
.Cgreen{ border-color: green; color: green}
.Cblue{ border-color: blue; color: blue}
.Cwhite{ border-color: white; color: white}
.Cgold{ border-color: gold; color: gold}
.Cpurple{ border-color: purple; color: purple}
.Cteal{ border-color: teal; color: teal}
.Clblue{ border-color: #5ae; color: #5ae}
.Cwhite::before, .Cwhite>::before{ background: #aaa}
/* shadow */
.shadow .lblue .Clblue::before, .shadow .red .Cred::before, .shadow .green .Cgreen::before, .shadow .blue .Cblue::before, .shadow .white .Cwithe::before, .shadow .gold .Cgold::before, .shadow .purple .Cpurple::before, .shadow .grey .Cgrey::before, .shadow .teal .Cteal::before, .shadow .black .Cblack::before,
.shadow .Clblue .lblue::before, .shadow .Cred .red::before, .shadow .Cgreen .green::before, .shadow .Cblue .blue::before, .shadow .Cwhite .withe::before, .shadow .Cgold .gold::before, .shadow .Cpurple .purple::before, .shadow .Cgrey .grey::before, .shadow .Cteal .teal::before, .shadow .Cblack .black::before,
.shadow .lblue.Clblue::before, .shadow .red.Cred::before, .shadow .green.Cgreen::before, .shadow .blue.Cblue::before, .shadow .white.Cwhite::before, .shadow .gold.Cgold::before, .shadow .purple.Cpurple::before, .shadow .grey.Cgrey::before, .shadow .teal.Cteal::before, .shadow .black.Cblack::before{
border: 1px dotted black;
text-shadow: -1px 0 1px black, 0 1px 1px black, 1px 0 1px black, 0 -1px 1px black;}
.shadow .black .Cblack::before, .shadow .Cblack .black::before, .shadow .black.Cblack::before{
border: 1px dotted white;
text-shadow: -1px 0 1px white, 0 1px 1px white, 1px 0 1px white, 0 -1px 1px white}
.shadow ::before, .shadow p, .shadow span, .shadow h4{ background: 0}
/* for snippet only */
button{ position: fixed; top: 45vh; right: 0; background: #acf; border: 12px solid white; color: black; padding: 25px; border-radius: 50%; outline: 0}
div{ margin: 10px 8px; padding: 10px 8px; border: 3px solid transparent;}
div::before{ content: attr(class); border-radius: 8px}
p, span, h1, h2, h3, h4, h5, h6, div::before{ padding: 2px 8px;}
<body id="body" class="x">
<div class="lblue Clblue"><h4>h4</h4><p>paragraph</p><span>span</span>
<div class="Cblack">
<div class="black">
<div class="Cblack">
<div class="Clblue">
<div class="lblue">
<div class="Cblack"><h4>h4</h4><p>paragraph</p><span>span</span>
<div class="Clblue"><h4>h4</h4><p>paragraph</p><span>span</span></div>
<div class="black"><h4>h4</h4><p>paragraph</p><span>span</span>
</div></div></div></div></div></div></div></div>
<div class="red Cgold">
<div class="black">
<div class="black Cblack">
<div class="red Cblack">
<div class="green">
<div class="blue ">
<div class="white ">
</div></div></div>
<div class="gold ">
<div class="purple ">
<div class="grey Cred"><h4>h4</h4><p>paragraph</p><span>span</span>
<div class="teal ">
<div class="white Cwhite">
</div></div></div>
<div class="teal Cteal">
<div class="white Cwhite">
<div class="blue">
<div class="black Cteal">
<div class="grey Cred">
</div></div></div>
<div class="Cpurple"><h4>h4</h4><p>paragraph</p><span>span</span>
<div class="Cred"><h4>h4</h4><p>paragraph</p><span>span</span>
<div class="Cgold"><h4>h4</h4><p>paragraph</p><span>span</span>
</div></div></div>
<div class="green">
<div class="white Cgreen">
<div class="red Cred"><h4>h4</h4><p>paragraph</p><span>span</span>
<div class="Cwhite"><h4>h4</h4><p>paragraph</p><span>span</span>
</div></div></div>
</div></div></div>
</div></div></div>
</div></div></div>
<button onclick="switcher()"><b>switch</b></button></body>
suplement
If you can make sure, that text will always be served inside a tag, forget about shadows
p, span, h1, h2, h3, h4, h5, h6{ background: #fff}
If you can exclude too bright colours - this is it. If not... exceptions...
I added this to the snippet, with exception for .Cwhite::before
You need to be sure of what you mean. If you mean Themes in the traditional sense, these solutions will introduce a hard to find bug!. If more than one rule matches, then all properties not in common between the rules wll apply. For example, imagine a dark theme changing foreground and background and and neon theme changing foreground and color palette. The background (from dark) and the color palette (from neon) would apply regardless of order.
One solution is to regularize your themes such that each themes sets all properties set by any theme.
#wrapper {
padding: 20px;
background-image: url('http://s492610445.online.de/images/background.jpg')
}
#a {
padding: 25px;
background: #000;
opacity: 0.7;
}
h2 { font-family: sans-serif; color: #fff; margin: 5px 0; }
<div id="wrapper">
<h2>orig. Image</h2>
<img src="http://s492610445.online.de/cat/pizza.png" />
<div id="a">
<h2>Image in tag with 0.7 opacity</h2>
<img src="http://s492610445.online.de/cat/pizza.png" />
</div>
</div>
I'm confused about a css rule. I am making some adjustments on a page and I saw something, I have newer seen before. There is a PNG with black background, and when a parent tag has a black background too and has a opacity-value < 1 than the black parts of the PNG will become transparent too. How is this possible?
The child element inherits opacity from parent. So, any background image (and everything else) will become transparent in such case.
Opacity will effect every inner element.
By setting the containing <a> to have an opacity of 0.7, the contained <img> becomes transparent too. In fact it becomes transparent throughout the whole image, not just the black portions (although that's not immediately obvious).
If you want a transparent background, set the background colour to be transparent:
#wrapper {
padding: 20px;
background-image: url('http://s392610445.online.de/images/background.jpg')
}
#a {
padding: 25px;
background: rgba(0,0,0,0.7);
}
h2 { font-family: sans-serif; color: #fff; margin: 5px 0; }
<div id="wrapper">
<h2>orig. Image</h2>
<img src="http://s392610445.online.de/cat/pizza.png" />
<div id="a">
<h2>Image in tag with 0.7 opacity</h2>
<img src="http://s392610445.online.de/cat/pizza.png" />
</div>
</div>
EDIT Here is what your code looks like in Chrome for me:
I have problems with the placement of the button and the paragraph/text. They are placed in a staggered way. I want them to be placed on a straight horizontal line. You can see the problem on the image below.
Further more, I want the button to be placed right above the end of the "hr" line, the same way as the paragraph is placed above the left side of the line. Any idea for a solution?
Live Demo
HTML:
<!--Wrapper div-->
<div id="wrapper">
<!--Inbox list and button to add a card-->
<div id="inboxList" class="cellContainer">
<br style="line-height: 23px" />
<p class="paragraph">In-Box</p>
<!--Button to add a Card-->
<div id="btnAddCard" style="float: right;"><span
style="color: #10e20e; font-size:140%" >+</span> Add Card...</div>
<hr class="fancy-line" />
<br />
<!--Card div-->
<div id="userAddedCard"> <br/>
<div>
</div>
</div>
</div>
CSS:
#btnAddCard {
background: #ffffff;
padding: 0.7% 2% 1% 2%; /* Button padding */
font-size: 95%;
font-weight: bold;
display: inline;
text-decoration: none; /* Remove default underline style from hyperlink */
color: #888888;
border: 1px solid #cccccc;
border-radius: 7px; /* Full rounder corners */
font-family: Arial, sans-serif;
cursor: pointer;
vertical-align: bottom;
}
#btnAddCard {
background: rgb(255,255,255); /* Old browsers */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
}
.paragraph {
padding-left:7%;
display:inline;
font-family:cursive;
font:bolder;
font-size:larger;
}
hr.fancy-line {
height: 1.8px;
background-color: blueviolet;
width:85%;
}
Changing p.paragraph to <div.paragraph> and Adding margin-left:7% and removing the font-size of 140% from #btnAddCard seems to have fixed the problem
JSFiddle
Update:
I'd simply put the contents in a div, give it proper margin and highlight it's bottom border instead of the <hr> so that the children will align perfectly, something like this JSFiddle
Side note: please avoid using inline-styles and tags such as <br> <center> etc, it makes maintenance easier Why Use CSS # MDN
I am trying to change the background color of modal header of twitter bootstrap using following css code.
.modal-header
{
padding:9px 15px;
border-bottom:1px solid #eee;
background-color: #0480be;
}
.modal-header .close{margin-top:2px}
.modal-header h3{margin:0;line-height:30px}
But this code makes the corner of the modal header angular. Before using above code corners were round shaped. How can I get round shaped corner of modal header with the above background color ?? Thanks
You can use the css below, put this in your custom css to override the bootstrap css.
.modal-header {
padding:9px 15px;
border-bottom:1px solid #eee;
background-color: #0480be;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
So, I tried these other ways, but there was a VERY slight irritant and that was if you keep the modal-content border radius, in FF and Chrome, there is a slight bit of white trim showing along the borders, even if you use 5px on the modal-header border radius. (standard modal-content border radius is 6px, so 5px on the modal-header border top radius covers some white).
My solution:
.modal-body
{
background-color: #FFFFFF;
}
.modal-content
{
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
background-color: transparent;
}
.modal-footer
{
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-bottomleft: 6px;
-moz-border-radius-bottomright: 6px;
}
.modal-header
{
border-top-left-radius: 6px;
border-top-right-radius: 6px;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
}
!! CAVEAT !!
You must then set the background colors of the modal-header, modal-content, and modal-footer. This is not bad trade-off, because it allows you to do this:
<div class="modal-header bg-primary">
<div class="modal-body bgColorWhite">
<div class="modal-footer bg-info">
EDIT
Or even better:
<div class="modal-header alert-primary">
The corners are actually in .modal-content
So you may try this:
.modal-content {
background-color: #0480be;
}
.modal-body {
background-color: #fff;
}
If you change the color of the header or footer, the rounded corners will be drawn over.
All i needed was:
.modal-header{
background-color:#0f0;
}
.modal-content {
overflow:hidden;
}
overflow: hidden to keep the color inside the border-radius
I myself wondered how I could change the color of the modal-header.
In my solution to the problem I attempted to follow in the path of how my interpretation of the Bootstrap vision was. I added marker classes to tell what the modal dialog box does.
modal-success, modal-info, modal-warning and modal-error tells what they do and you don't trap your self by suddenly having a color you can't use in every situation if you change some of the modal classes in bootstrap. Of course if you make your own theme you should change them.
.modal-success {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dff0d8), to(#c8e5bc));
background-image: -webkit-linear-gradient(#dff0d8 0%, #c8e5bc 100%);
background-image: -moz-linear-gradient(#dff0d8 0%, #c8e5bc 100%);
background-image: -o-linear-gradient(#dff0d8 0%, #c8e5bc 100%);
background-image: linear-gradient(#dff0d8 0%, #c8e5bc 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
border-color: #b2dba1;
border-radius: 6px 6px 0 0;
}
In my solution I actually just copied the styling from alert-success in bootstrap and added the border-radius to keep the rounded corners.
A plunk demonstration of my solution to this problem
Add this class to your css file to override the bootstrap class.modal-header
.modal-header {
background:#0480be;
}
It's important try to never edit Bootstrap CSS, in order to be able to update from the repo and not loose the changes made or break something in futures releases.
A little late to the party, but here's another solution.
Simply adjusting the class of the modal to something like alert-danger does work, however it removes the top rounded corners of the modal.
A workaround is to give the element with modal-header an additional class of panel-heading, e.g.
<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header panel-heading"> <!-- change here -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Then, to change the heading color you can do something like (assuming you're using jQUery)
jQuery('.modal-content').addClass('panel-danger')
You can solve this by simply adding class to modal-header
<div class="modal-header bg-primary text-white">
All the other answersoverflow:hidden、alert-danger not work for me in Bootstrap 4,
but I found a simple solution in Bootstrap 4.
Since the white trim comes from modal-content, just add border-0 class to it and the white trim disappear.
Example:
https://codepen.io/eric1214/pen/BajLwzE?editors=1010