my question looks a little bit crazy but, can i make such a thing as the shown below in this picture,
am thinking of too many possibilities
i am 100% aware that i can do :
<div id="TheContenaire">
<div><div> <!--this is where i can put a background image or a gradient style using css-->
<div></div> <!--the same thing with this div-->
</div>
but can i do this with just one div (TheContainer) and apply two backgrounds for it using css sprites and just one image ?
put it on top, then again on bottom and rotate it
or any other manipulation
If you use linear-gradient then there is no need for layered elements: http://jsfiddle.net/e8gyb/
To layer something without another element use :after
div {
position: relative;
}
div:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
A good article on gradients: http://css-tricks.com/css3-gradients/
Some more demos: http://css-tricks.com/examples/CSS3Gradient/
Edit: that will work on IE10+, for IE6-9 you will need to use :after with this: CSS gradient, transparent colors in IE?
HTML
<div></div>
An inset shadow option:
div {
height: 500px;
width: 500px;
box-shadow: inset 0 4em 7em -4em #000000,
inset 0 -4em 7em -4em black;
}
DEMO
Or with background-image and gradient:
div:before {
content: "";
position: absolute;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
top: 0%;
min-width: 100%;
min-height: 3em;
}
div:after {
content: "";
position: absolute;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(#000));
top: 100%;
min-width: 100%;
min-height: 3em;
}
DEMO
Obviously you'll have to use whichever vendor prefixes are required for your implementation.
Related
I've seen people make designs like this for their website. As you can see those two low opacity blue lights, one at the top right and the other at the bottom left. I am wondering how are they making this in HTML and CSS? I can make PNG out of this, but is there a way that can be done with HTML and CSS? I think it would load faster than a PNG file. Thank you in advance. :)
I tried using this code.
HTML:
<body>
<div></div>
</body>
CSS:
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
div {
width: 100%;
height: 100%;
background-color: #191b1f;
}
div::after,
div::before {
content: "";
display: inline-block;
position: absolute;
background: hsl(199, 56%, 18%);
width: 300px;
height: 300px;
border-radius: 50%;
filter: blur(70px);
mix-blend-mode: lighten;
}
div::before {
top: 0;
right: 0;
transform: translate(50%, -50%);
}
div::after {
top: 50%;
left: 0px;
transform: translateX(-50%);
}
/*With gradient background*/
div {
background: radial-gradient(
circle closest-corner at center 125px,
hsl(199, 56%, 18%),
#191b1f 70%
)
no-repeat;
}
Result:
For this method, the normally used styling is the backdrop filter method. By using that, you can create a frosted glass effect in CSS. First you should create a main div and then a sub div which we should create the backdrop effect. The method which I follows is:
Find a picture with similarity to the background.
Then reduce the brightness of the background image using filter: brightness(48%); and then I use the backdrop-filter: blur(5); to the sub div.
This is the exact same method which I was following for the past few months.
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
I want to create a diagonal background image as seen in the attached image. I can create a diagonal line using linear-gradient however as I have two different angles this didn't work.
Using Linear Gradients:
This can be done using multiple background images and positioning them accordingly. In the snippet below I've used 3 different layers - one for the top angle (a triangle which is transparent for 50% and is colored for the rest), one for the middle which is essentially nothing but a solid colored rectangle, this is created using linear gradients as it is easier to control the dimensions of an image and finally one for the bottom angle (same approach as the top one but this has a different height and so different angle.)
The output is also responsive as you can see by hovering the element in the below snippet. In the 2nd div, I've set different colors for each image so that you can see how it is formed.
div {
height: 300px;
width: 100%;
background: linear-gradient(to bottom right, transparent 50%, lightblue 51%), linear-gradient(lightblue, lightblue), linear-gradient(to top right, transparent 50%, lightblue 51%);
background-size: 100% 30px, 100% calc(100% - 130px), 100% 100px;
background-position: top left, left 30px, bottom left;
background-repeat: no-repeat;
transition: all 1s ease; /* just for demo */
}
/* just for demo */
div {
margin-bottom: 10px;
}
div:hover {
height: 400px;
}
div:nth-of-type(2) {
background: linear-gradient(to bottom right, transparent 50%, lightblue 51%), linear-gradient(lightpink, lightpink), linear-gradient(to top right, transparent 50%, lightgreen 51%);
background-size: 100% 30px, 100% calc(100% - 130px), 100% 100px;
background-position: top left, left 30px, bottom left;
background-repeat: no-repeat;
}
<div></div>
<div></div>
Using SVG: recommended
This is the approach that I generally recommend and is the best. It involves creating the shape using SVG and then placing it absolutely behind the div element.
div {
position: relative;
height: 300px;
width: 100%;
}
svg {
position: absolute;
height: 100%;
width: 100%;
}
polygon {
fill: lightblue;
}
<div>
<svg viewBox='0 0 300 100' preserveAspectRatio='none'>
<polygon points='0,10 300,0 300,100 0,75z' />
</svg>
</div>
Using Clip-path:
Another approach that can be used is to position a pseudo-element behind the main div and then set a clip-path in the required shape to this pseudo-element.
Note: This snippet will currently work only in WebKit powered browsers. Firefox would need the clip-path to be created via SVG element whereas IE doesn't support it all.
div {
position: relative;
height: 300px;
width: 100%;
}
div:before {
position: absolute;
content: '';
height: 100%;
width: 100%;
background: lightblue;
-webkit-clip-path: polygon(0% 5%, 100% 0%, 100% 100%, 0% 75%);
clip-path: polygon(0% 5%, 100% 0%, 100% 100%, 0% 75%);
}
<div></div>
CSS Perspective
You can use a CSS Perspective Transform to create the shape you want.
div {
margin-top: 25px;
width: 500px;
height: 150px;
transform: perspective( 800px ) rotateY( -25deg );
background: blue;
}
<div></div>
CSS Tricks Docs
Perspective - CSS | MDN
You can apply perspective to the parent container of the rotated div to give it 3-dimensional depth from the front of the viewport.
N.B. For the difference between transform: perspective(value) and perspective: value, see the CSS Tricks Almanac entry on perspective:
Important: Please note the perspective property doesn't affect how the element is rendered; it simply enables a 3D-space for children
elements. This is the main difference between the transform: perspective() function and the perspective property. The first
gives element depth while the latter creates a 3D-space shared by all
its transformed children.
After applying a 3-dimensional depth to the parent container using perspective, you can then apply rotateY to the div you want to rotate.
Working Example:
section {
position: relative;
width: 600px;
perspective: 800px;
transform: translateX(-60px);
}
div:nth-of-type(1) {
position: absolute;
top:30px;
left: 0;
width: 100%;
height: 100px;
background-color: rgb(235,250,255);
transform: rotateY(320deg);
}
div:nth-of-type(2) {
position: absolute;
top: 0;
left: 220px;
width: 120px;
height: 140px;
background-color: rgb(103,201,236);
box-shadow: 6px 6px 6px rgba(127,127,127,0.5);
}
div:nth-of-type(3) {
position: absolute;
top: 24px;
left: 340px;
width: 120px;
height: 140px;
background-color: rgb(255,255,255);
box-shadow: 6px 6px 6px rgba(127,127,127,0.5);
}
<section>
<div></div>
<div></div>
<div></div>
</section>
I am trying to convert PSD into HTML using CSS.
I have a plain rectangle like this :
Now a oval shape glow element : ( As in PSD )
Because of this if you look at only rectangle , With a glow at top it looks like below :
How to achieve the same ? Any lead is appreciated :)
Using Radial Gradients:
You can sort of achieve that by placing a radial-gradient image on top of your rectangle with the solid color. The positioning and size of the gradient may need to be modified to suit your needs.
The radial-gradient that I had used is very similar to the one in your PSD image. That is is starts from a bluish color and then gradually moves to transparent. This gradient is then positioned such that its center point is at 75% width of the parent and a distance that is 25% of the parent's height above it.
div {
height: 200px;
width: 400px;
background-color: rgb(17, 45, 67);
background-image: radial-gradient(ellipse at 75% -25%, rgb(14, 102, 150) 0%, transparent 50%);
background-size: 100% 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div></div>
The main thing to worry with using radial-gradient is the relatively poor browser support.
Using Box Shadow:
Below is a slightly different approach using a pseudo-element and box-shadow. The box-shadow has a very high spread radius which produces a glow like effect.
This has better browser support than radial-gradient (even as low as IE8) but box-shadow cannot take values in percentage and hence this solution wouldn't be very useful for dynamic sized containers.
div {
position: relative;
width: 1280px;
height: 480px;
background-color: rgb(17, 45, 67);
overflow: hidden;
}
div:after {
position: absolute;
content: '';
right: 150px;
top: -250px;
height: 250px;
width: 300px;
border-radius: 50%;
background: rgb(14, 102, 150);
box-shadow: 25px 25px 150px 250px rgba(14, 102, 150, 0.5);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div></div>
The only way I can see is to use a pseudo element and put a gradient background on it. I've made this quickly to show you but it does not reproduce exactly your image :
.rectangle {
position: relative;
width: 300px;
height: 100px;
background-color: #112D43;
}
.rectangle:after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 40px;
background: radial-gradient(ellipse at center, #094567 0%, rgba(0, 0, 0, 0) 50%);
}
<div class="rectangle"></div>
Objective
I want a color overlay on this header element. How can I do this with CSS?
Code
#header {
/* Original url */
/*background: url(../img/bg.jpg) 0 0 no-repeat fixed;*/
background: url(https://fakeimg.pl/250x100/) 0 0 no-repeat fixed;
height: 100%;
overflow: hidden;
color: #FFFFFF
}
<header id="header">
<div class="row">
<div class="col-xs-12">
...
</div>
</div>
</header>
You should use rgba for overlaying your element with photos.rgba is a way to declare a color in CSS that includes alpha transparency support. you can use .row as an overlayer like this:
#header {
background: url(../img/bg.jpg) 0 0 no-repeat fixed;
height: 100%;
overflow: hidden;
color: #FFFFFF
}
.row{
background: rgba(39,62,84,0.82);
overflow: hidden;
height: 100%;
z-index: 2;
}
You can do that in one line of CSS.
background: linear-gradient(to top, #3204fdba, #9907facc), url(https://picsum.photos/1280/853/?random=1) no-repeat top center;
You can also modify the opacity of a color by hovering over it in VS Code and clicking on it to make it a hex color. It can be shortened to (#3204fde6, #9907fae6) instead of the rgba (rgba(48, 3, 252, 0.902), rgba(153, 7, 250, 0.902).
header {
height: 100vh;
width: 100%;
color: white;
font: bold 6.5em/2em monospace;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to top, #3204fdba, #9907facc), url(https://picsum.photos/1280/853/?random=1) no-repeat top center;
}
<header>Hello World</header>
See here CodePen
You may use negative superthick semi-transparent border...
.red {
outline: 100px solid rgba(255, 0, 0, 0.5) !important;
outline-offset: -100px;
overflow: hidden;
position: relative;
height: 200px;
width: 200px;
}
<div class="red">Anything can be red.</div>
<h1>Or even image...</h1>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" class="red"/>
This solution requires you to know exact sizes of covered object.
You could use the hue-rotate function in the filter property. It's quite an obscure measurement though, you'd need to know how many degrees round the colour wheel you need to move in order to arrive at your desired hue, for example:
header {
filter: hue-rotate(90deg);
}
Once you'd found the correct hue, you could combine the brightness and either grayscale or saturate functions to find the correct shade, for example:
header {
filter: hue-rotate(90deg) brightness(10%) grayscale(10%);
}
The filter property has a vendor prefix in Webkit, so the final code would be:
header {
-webkit-filter: hue-rotate(90deg) brightness(10%) grayscale(10%);
filter: hue-rotate(90deg) brightness(10%) grayscale(10%);
}
Here's a creative idea using box-shadow:
#header {
background-image: url("apple.jpg");
box-shadow: inset 0 0 99999px rgba(0, 120, 255, 0.5);
}
What's happening
The background sets the background for your element.
The box-shadow is the important bit. It basically sets a really big shadow on the inside of the element, on top of the background, that is semi-transparent
To add an overlay, you can use the CSS background-blend-mode property something like this:
#header {
background: url("img/image.jpg") 0 0 no-repeat fixed;
height: 100%;
overflow: hidden;
background-color: hsl(206, 27%, 38%);
background-blend-mode: multiply;
}
#header.overlay {
background-color: SlateGray;
position:relative;
width: 100%;
height: 100%;
-webkit-opacity: 20%;
opacity: 0.20;
z-index: 2;
}
Something like this. Just add the overlay class to the header, obviously.
Use mutple backgorund on the element, and use a linear-gradient as your color overlay by declaring both start and end color-stops as the same value.
Note that layers in a multi-background declaration are read much like they are rendered, top-to-bottom, so put your overlay first, then your bg image:
#header {
background:
linear-gradient(to bottom, rgba(100, 100, 0, 0.5), rgba(100, 100, 0, 0.5)),
url(../img/bg.jpg) 0 0 no-repeat fixed;
height: 100%;
overflow: hidden;
color: #FFFFFF
}
You can also add an additional class with such settings. Overlay will not overlap content and no additional tag is needed
.overlay {
position: relative;
z-index: 0;
}
.overlay::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: red;
opacity: .6;
/* !!! */
z-index: -1;
}
https://codepen.io/zeroox003/pen/yLYbpOB
If you don't mind using absolute positioning, you can position your background image, and then add an overlay using opacity.
div {
width:50px;
height:50px;
background: url('http://images1.wikia.nocookie.net/__cb20120626155442/adventuretimewithfinnandjake/images/6/67/Link.gif');
position:absolute;
left:0;
top:0;
}
.overlay {
background:red;
opacity:.5;
}
See here: http://jsfiddle.net/4yh9L/
In helpshift, they used the class home-page as
HTML
<div class="page home-page">...</div>
CSS
.home-page {
background: transparent url("../images/backgrounds/image-overlay.png") repeat 0 0;
background: rgba(39,62,84,0.82);
overflow: hidden;
height: 100%;
z-index: 2;
}
you can try similar like this
If you want to just add a class to add the overlay:
span {
padding: 5px;
}
.green {
background-color: green;
color: #FFF;
}
.overlayed {
position: relative;
}
.overlayed::before {
content: ' ';
z-index: 1;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #00000080;
}
.stand-out {
position: relative;
z-index: 2;
}
<span class="green overlayed">with overlay</span>
<span class="green">without overlay</span>
<br>
<br>
<span class="green overlayed">
<span class="stand-out">I stand out</span>
</span>
Important: the element you put the overlayed class on needs to have a position set. If it doesn't, the ::before element will take the size of some other parent element. In my example I've set the position to "relative" via the .overlayed rule, but in your use case you might need "absolute" or some other value.
Also, make sure that the z-index of the overlayed class is higher than the ones of the eventual child elements of the container, unless you actually want for those to "stand out" and not be overlayed (as with the span with the stand-out class, in my snippet).
given a div that is 500px wide, is there a way to fill the background with 2 different colors using css? I know it can be done with a background image, but just wondering if it can be done with bg color.
eg :
You can't set multiple background colors, but you could set something like:
div.twocolorish {
background-color: green;
border-left: 20px solid red;
}
As long as you don't need text to go over the part in red then this would take care of you in one div.
I ended up with this solution using linear gradients:
.dualcol-test {
background: linear-gradient(to right, green 0%, green 80%, red 80%, red 100%);
}
<div class="dualcol-test"> This div has a green and red background <br><br><br> </div>
You can achieve 2 colors in 1 div by using pseudo-element :before
HTML:
<div class="twocolordiv"></div>
CSS:
.twocolordiv {
position: relative;
z-index: 9;
background: green;
width:500px;
height:100px;
}
.twocolordiv:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
right: 20%;
bottom: 0;
left: 0;
background: red;
}
You can use linear-gradient background to do this
background: linear-gradient(90deg, green 50%,red 50%);
No, you can only set one background-color. However, you could split your container into two and set a different backgorund-color for each one.
This question got me thinking about how CSS3 would approach this problem.. and frankly the specification has me confused. That said, a couple of features that are creeping through the cracks: background-size and linear-gradient.
<style type="text/css">
#ji { width: 500px; height: 300px;
background:
-moz-linear-gradient(green, green) 0px 0px no-repeat,
-moz-linear-gradient(red, red) 200px 50px no-repeat,
-moz-linear-gradient(blue, blue) 0px 250px no-repeat,
-moz-linear-gradient(gray, gray) 300px 125px no-repeat;
-moz-background-size: 450px 50px, 50px 200px, 250px 250px, 50px 250px;
}
</style>
<div id="ji">
</div>
Give this a go :)
I'm sure there are better approaches to this problem, but it does demonstrate that we'll be afforded greater flexibility with CSS backgrounds (one day).
Edit: Forgot to mention that this will only work in Firefox, though there are Webkit equivalents for linear-gradient and background size
Using the :before css attribute allows you to 'fill' a div with the two colours.
.myDiv {
position: relative; /*Parent MUST be relative*/
z-index: 9;
background: green;
/*Set width/height of the div in 'parent'*/
width: 100px;
height: 100px;
}
.myDiv:before {
content: "";
position: absolute; /*set 'child' to be absolute*/
z-index: -1; /*Make this lower so text appears in front*/
/*You can choose to align it left, right, top or bottom here*/
top: 0;
right: 0;
bottom: 60%;
left: 0;
background: red;
}
<div class="myDiv">this is my div with multiple colours. It work's with text too!</div>
An easily edited sample can be seen LIVE DEMO
Using background-image / repeat-y is the easiest solution - however, maybe you want to change colours or widths or something with Javascript.
Here's a way to do this which allows text everywhere.
http://jsfiddle.net/WQ8CG/
HTML:
<div id="container"><div class="offset">text</div></div>
CSS:
#container {
background: #ccc;
border-right: 40px solid #aaa
}
.offset {
margin-right: -40px;
zoom: 1; /* to fix IE7 and IE6 */
position: relative /* to fix IE6 */
}
Better late then never. Thought this might help:
The htmls
<div id="content">
<div id="left"></div>
<div id="right"></div>
</div>
The csss
#content { background-color: #F1EBD9; }
#left { float: left; width: 14em; }
#right { margin-left: 14em; background-color: #FFF; }
You can view this # http://alexandergutierrez.info/stretch-background-color-in-a-two-col-layout
You could you inset box shadow, and change the shadow to whatever colour you required.
CSS
-moz-box-shadow: inset 50px 0px 0px 0px rgba(156, 244, 255, 1);
-webkit-box-shadow: inset 50px 0px 0px 0px rgba(156, 244, 255, 1);
box-shadow: inset 50px 0px 0px 0px rgba(156, 244, 255, 1);