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/>
Related
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.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Can't get rid of this line anyway , here's the domain , please switch to browser mobile mode to open it . http://www.pocketsaver.co/index.php?route=mobile/home
You have a rogue h4 element floating over the top of your content.
.hotlists h4:before {
background-image: linear-gradient(to right, #ffffff 16%, #ababab 53%, #ffffff 83%);
content: "";
height: 1px;
position: absolute;
right: 0;
top: 50%;
width: 100%;
}
I'm not sure the result you were expecting but if you remove position, right and top it will sort itself into the DOM with everything else and stop floating over your content.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
On the website below there is a full background image, and on top of that image there is that grid/net that darkens that image, what is that, where do i find it, how do i create it? (ive searched the source code, couldn't find it, help me out)
http://www.art3d.ru/
Maybe a simple gradient overlay ?
html {
min-height:100%;
background:
linear-gradient(to left,transparent 50%, rgba(0,0,0,0.3) 50%),
linear-gradient(to bottom,transparent 50%, rgba(0,0,0,0.3)50%),url(http://lorempixel.com/640/480);
background-size:2px 4px, 4px 2px, cover;
}
html:hover {/* demo purpose */
background-size: 0% 0%,0% 0%, cover;
}
With the opacity attribute you can darken an image. You can implement it like this:
body {
background-image: url('path');
}
div {
opacity: 0.2;
}
I have set a body background image, and when you give the div opactiy, it should darken the image. It can be very useful sometimes.
I hope I answered your question.
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 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 8 years ago.
Improve this question
#woodwhite{position:absolute;left:1000px;width:345px;height:1400;top:0px;z-index:10;
background:-webkit-linear-gradient(-90deg, rgba(255,255,255,0),rgba(255,255,255,1));
background:-o-linear-gradient(-90deg, rgba(255,255,255,0),rgba(255,255,255,1));
background:-moz-linear-gradient(-90deg, rgba(255,255,255,0),rgba(255,255,255,1));
background:linear-gradient(-90deg, rgba(255,255,255,0),rgba(255,255,255,1));"}
These gradient codes which I got from w3 aren't working for all the browsers.
Any help would be appreciated. :)
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */