Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I want use Material Design dark theme guidelines (https://material.io/design/color/dark-theme.html) in HTML code, but i can't find info, how to overlay colors for get lighter colors (example: Dark gray (#121212) background and bit lighter panels).
I know that some JS frameworks support this, but i want use pure HTML/CSS.
How to make this?
I'm not sure if this is exactly what you're describing, but you can create an element with a background-color that has adjustable transparency using an RGBA color. IE to do a 50% translucent white overlay: background-color: rgba(255,255,255,0.5).
.container {
background-color: darkred;
height: 200px;
width: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.content {
background-color: rgba(255, 255, 255, 0.5);
height: 100px;
width: 100px;
}
<div class="container">
<div class="content">
test
</div>
</div>
You could also layer your colors using gradient background-images, which would let you do the layering in a single element. This lets you stack the colors:
.content {
height: 200px;
width: 200px;
background-image: linear-gradient(rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%), linear-gradient(darkred 0%, darkred 100%);
}
<div class="content">
test
</div>
Make sure to put the top layer first in the rule.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I was recently thinking about potentially interesting interface design ideas, and one idea that came to mind was a kind of futuristic looking box-based design in which elements would have thin and semi-transparent border lines with small opaque boxes at the corners.
The problem with that for me was thinking of a pure CSS solution for it because I didn't want to add any additional tags in the HTML, and through CSS I thought it would work with pseudo-classes but one element would only be able to have two (with :before and :after)
I'm grateful for any helpful ideas on how one could achieve such a design using only CSS if it's even possible. Thank you in advance.
I added an Image from the Movie "Oblivion". That is roughly how I imagined it.
Probably the best description is the part around "Tour Code_"
I know #c-smile has already answered your question, but you can achieve this without images using only CSS. Like so:
body{
background-color:black;
}
.dots {
width: 200px;
height: 200px;
background-color: transparent;
position: absolute;
left: 20px;
margin:10px;
border: solid 1px rgba(255, 255, 255, 0.5);
}
.dots:before, .dots:after {
content: "";
position: absolute;
top:-5px;
height: calc(100% + 10px);
width: 10px;
background-image: linear-gradient(rgba(255, 255, 255, 1) 5px, rgba(255, 255, 255, 1) 5px),linear-gradient(rgba(255, 255, 255, 1) 5px, rgba(255, 255, 255, 1) 5px);
background-size: 10px 10px;
background-position: top center, bottom center;
background-repeat: no-repeat;
}
.dots:before {
left: -5px;
}
.dots:after {
right: -5px;
}
<div class="dots"></div>
Granted it uses gradients so you may need to be careful with browser compatibility, but it's pure css as requested.
Check CSS border images samples here:
https://developer.mozilla.org/en-US/docs/Web/CSS/border-image
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I want to create background gradient as above in the image (Load more news) and I have to add border style also. Please provide your suggestion on this.
Use prefix on this
div{
width: 100vw;
height: 40px;
margin: 40px auto;
background-image: -webkit-linear-gradient(left, transparent, rgb(0, 255, 255), transparent);
background-image: linear-gradient(left, transparent, rgb(0, 255, 255), transparent)
}
<div/>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I need create a pattern background for one div, with fluid width. Like a background image. I would want if is possible make it only css3, and how to do.
Triangle: height: 27px Width: 46px
This can be achieved with a repeating background.
CSS
.pattern {
background-image: linear-gradient(319deg, black 16px, transparent 17px), linear-gradient(39deg, black 16px, transparent 17px);
background-size: 54px 23px;
background-repeat: repeat-x;
height: 100px;
}
You need 2 diferent backgrounds, one for each half of the triangle. The angle and size is the tricky part.
Browser requests: multiple background image, gradients.
I have set for the gradints only the last w3c syntax, you can make that work in older browsers using the prefixed versions
fiddle
This creates a triangle with the sizes u gave
width: 0px;
background-color:#423434;
height: 0px;
border-style: solid;
border-width: 27px 23px 0 23px;
border-color: #ffffff transparent transparent transparent;
Yes it is!
Html
<div id="leftTri"></div>
<div id="tri"></div>
<div id="rightTri"></div>
CSS
#leftTri{
width:0;
height:0;
border-bottom:27px solid green;
border-right:46px solid transparent;
float:left;
}
#tri{
width:0;
height:0;
border-bottom:27px solid green;
border-left:46px solid transparent;
border-right:46px solid transparent;
float:left;
}
#rightTri{
width:0;
height:0;
border-bottom:27px solid green;
border-left:46px solid transparent;
float:left;
}
Here is a link to a JSFiddle for you http://jsfiddle.net/Fdng8/2/
Yes it is. You can even use triangle generator here
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I am trying to create a website background similar to http://www.latlong.net/ but i'm not having any luck. Is this green and gray background one image or is that a green image at the top with a gray background?
I cannot find the css for the background to see what they have, it comes out all jumbled with alot of extra google maps css on it.
Can anyone see what they are doing to do the strip across the top and gray below?
Thanks!
Extracted from inspecting element with Chrome; You need:
body{
background-color: rgb(235, 237, 231); /* This is #EBEDE7*/
}
header{
background-color: rgb(215, 230, 184); /* this is #D7E6B8*/
}
Working fiddle: http://jsfiddle.net/shahverdy/NByX9/
How to find this?
Generally if you want to find out that how Html/Css of a webpage is working, the best way is to use some tools like Chrome Developer Tools instead of reading the Html/Css Files from source. There are some other tool in other browsers too.
In Chrome you need to right click on any element of the page and select inspect element.
You can find this out by using Chrome developer tools and inspecting the element:
https://developers.google.com/chrome-developer-tools/
Looks like they are styling the header element using a background color and bottom border and shadow.
header {
margin-bottom:10px;
background-color: #D7E6B8;
background: -moz-linear-gradient(center top , #F8F8F8, #D7E6B8) repeat scroll 0 0 transparent;
border-bottom: 1px solid #B5B09A;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
It is not an image but the background-color css attribute. You can do something like:
<header>My header</header>
with the CSS:
header { background-color: #D7E6B8 }
The body of your page can have css for the gray background:
body { background-color: #EBEDE7 }
There is no background image in that, all are css background colors and shadows.just try with the following,
header {
background: -moz-linear-gradient(center top , #F8F8F8, #D7E6B8) repeat scroll 0 0 transparent;
border-bottom: 1px solid #B5B09A;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
}
body {
background-color: #EBEDE7;
}
I think what you're referring to is the shadow. It's not gray, but black with a high transparency.
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2)
This is on <header>, which also has a solid green background-color (actually #D7E6B8).
Following classes are used in given page:
header {
background: -moz-linear-gradient(center top , #F8F8F8, #D7E6B8) repeat scroll 0 0 transparent;
border-bottom: 1px solid #B5B09A;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
}
body {
background-color: #EBEDE7;
}
I wish to create a white circle with fuzzy edges contained within a transparent div by using css gradients.
With the z-index higher than the body and absolute positioning I should be able to move this over any part of the page and "white-out" everything beneath the circle.
I have tried my favorite gradient generators, but they haven't worked.
<div id="circle"></div>
css
#circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}
Try using http://www.colorzilla.com/gradient-editor/.
Here's one I made using their tool: (Set the orientation to radial)
http://www.colorzilla.com/gradient-editor/#ffffff+24,ffffff+59&1+31,0+34;Custom
To make the edges more fuzzy, drag the second opacity stop further from the white - and vice versa.
try white background with box-shadow's inset property to create fuzzy edges. Although I don't get what fuzzy means to you. If you have a specific color in mind for the edges, I might be able to give you the code.
Used the gradient suggested by George Reith.
CSS
#white-circle {
background: radial-gradient(ellipse at center center , #FFFFFF 24%, #FFFFFF 31%, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0) 71%) repeat scroll 0 0 transparent;
height: 100px;
left: 150px;
position: absolute;
top: 0;
width: 100px;
z-index: 1;
}
Here is the outcome: http://jsbin.com/avipih/1
I guess that radial gradient is an overkill for such purpose. Here's much simplier solution with better browser support: http://cdpn.io/yrJji