I found this picture on the internet and I would love to do this effect on my website.
I am trying to have a darker background, a lamp at the top like on the picture and a picture under it. But I want it to look like the light from the lamp is shining on a picture.
Is this possible to do?
You could use a few pseudo elements to create this effect, including a linear gradient and transforms:
Demo [hover image to see effect]
.light {
position: relative;
height: 300px;
width: 300px;
display: inline-block;
margin-top: 20px;
}
.light img {/*Image inside*/
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.light:before {/*creates the bulb*/
content: "";
position: absolute;
bottom: 100%;/*places above image*/
left: 50%;
height: 20px;
width: 100px;
border-radius: 50%;
background: lightgray;
transform: translateX(-50%);/*places in center of image*/
z-index: 10;/*places in front of image*/
border: 2px solid dimgray;/*borders add 3D effect to bulb*/
border-bottom: none;
border-top: 5px solid #222;
}
.light:after {/*creates the beam*/
content: "";
position: absolute;
transition: all 0.4s;
height: 0;
width: 100px;
top: -10px;
left: 50%;
transform: translateX(-50%) perspective(400px) rotateX(45deg);/*centers, makes as trapezium*/
transform-origin: top center;
background: linear-gradient(0deg, transparent, rgba(255, 255, 255, 0.8));/*adds fading light*/
z-index: 5;/*places in front of image, but behind bulb*/
}
.light:hover:after {/*demo only, add this to .light:after in production*/
height: 80%;
}
<div class="light">
<img src="http://lorempixel.com/300/300" />
</div>
Add opacity:0.9; or opacity:0.3; to your darker background image style..
Hope this help's...
You can use a transparent png image like #Eamonn said or use gradient and shadow in CSS like in sample below:
<style type="text/css">
.light {
width: 200px;
height: 200px;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-left-radius: 20%;
border-bottom-right-radius: 20%;
box-shadow: 0 20px 20px 5px #fff;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 1%, rgba(255,255,255,0.7) 66%, rgba(255,255,255,0.79) 76%, rgba(255,255,255,1) 99%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,0.7) 66%,rgba(255,255,255,0.79) 76%,rgba(255,255,255,1) 99%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,0.7) 66%,rgba(255,255,255,0.79) 76%,rgba(255,255,255,1) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
</style>
<div class="light"></div>
Related
I was looking at some 80's retro design, and came across some glowy stuff, including this one:
Can this be achieved with CSS ? I mean, create a line and do some box shadow. But I have to have more glow in the middle, and less in the sides, and I am not sure how this can be accomplished in just CSS ?
Thanks in advance.
Something like this?
:root {
--clr-inner: #fed9ff;
--clr-outer: #c727c9;
}
body {
background-color: black;
text-align: center;
}
.box {
display: inline-block;
position: relative;
width: 100%;
}
.box .line-outer {
background: var(--clr-outer);
border-radius: 50%;
box-shadow: 0px 0px 25px 10px var(--clr-outer);
filter: blur(1px);
height: 4px;
overflow: hidden;
position: absolute;
width: 100%;
}
.box .line-outer .line-inner {
background: var(--clr-inner);
border-radius: 50%;
box-shadow: 0px 0px 25px 15px var(--clr-inner);
filter: blur(1px);
height: 4px;
left: 30%;
position: absolute;
top: 0;
width: 40%;
}
<div class="box">
<div class="line-outer">
<div class="line-inner"></div>
</div>
</div>
What about using a radial gradient ?
(you can adjust parameters using : https://html-css-js.com/css/generator/gradient/)
#demo {
background: #FFFFFF;
background: -moz-radial-gradient(center, #FFFFFF 0%, #A42799 64%, #000000 100%);
background: -webkit-radial-gradient(center, #FFFFFF 0%, #A42799 64%, #000000 100%);
background: radial-gradient(ellipse at center, #FFFFFF 0%, #A42799 64%, #000000 100%);
height:50px;
width:100%
}
<div id="demo"></div>
In the mockup I have, the stripes have a gradient opacity effect from transparent to semi-transparent.
Currently, I have this:
How do I make it so that the white stripes have the transparency gradient?
Here is my current code.
body {
background: gray;
}
.bar {
height: 50px;
width: 100%;
background-image: linear-gradient(90deg, #FC0252 0%, #01Fdd9 100%);
border-radius: 100rem;
position: relative;
}
/** Stripes. */
.bar::before {
content: "";
position: absolute;
border-radius: 100rem;
height: 100%;
width: 100%;
background-size: 90px 100%;
background-image: linear-gradient(
120deg,
transparent,
transparent 40%,
white 40%,
white 60%,
transparent 60%
);
}
<div class="bar"></div>
You can add a mask layer on the pseudo-element:
body {
background: gray;
}
.bar {
height: 50px;
width: 100%;
background-image: linear-gradient(90deg, #FC0252 0%, #01Fdd9 100%);
border-radius: 100rem;
position: relative;
}
/** Stripes. */
.bar::before {
content: "";
position: absolute;
border-radius: 100rem;
height: 100%;
width: 100%;
background-size: 90px 100%;
background-image: linear-gradient( 120deg, transparent 40%, white 41% 60%, transparent 61%);
-webkit-mask:linear-gradient(white,transparent);
mask:linear-gradient(white,transparent);
}
<div class="bar"></div>
In case you need better browser support than masks provide, I'd do something with an additional container, but overall it's a funny looking progress bar, hope it's for a kids game or something.
body {
background: gray;
padding-top: 5rem;
}
.bar-container {
border-radius: 100rem;
overflow: hidden;
border: darkgray 2px solid;
box-shadow: 0 2px 8px rgba(0,0,0,.5);
background-image: linear-gradient(90deg, #FC0252 0%, #01Fdd9 100%);
}
.bar {
height: 50px;
width: 100%;
position: relative;
background-size: 90px 100%;
background-image: linear-gradient(
120deg,
transparent,
transparent 40%,
white 40%,
white 60%,
transparent 60%
);
}
.bar::before, .bar::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 50%;
}
.bar::before {
left: 0;
background: linear-gradient(45deg, rgba(252,2,82,1) 0%, rgba(0,0,0,0) 50%);
}
.bar::after {
right: 0;
background: linear-gradient(-45deg, rgba(1,253,217,1) 0%, rgba(0,0,0,0) 50%);
}
<div class="bar-container">
<div class="bar"></div>
</div>
I made a multicolor border :
https://codepen.io/Niavl/pen/vpmvmL
body {
background: #333;
}
.my-div {
text-align: center;
position: relative;
line-height: 100px;
background: #fff;
height: 100px;
width: 100%;
}
/*border bottom*/
.my-div:after {
background: linear-gradient(to right, transparent 45%, #87c846 45%, #87c846 60%, #e32b2d 60%, #e32b2d 70%, #ffc846 70%, #ffc846 95%, #847c6c 95%);
position: absolute;
content: '';
height: 20px;
right: 0;
left: 0;
bottom: -20px;
}
<div class="my-div">
hello
</div>
I use for that css linear-gradient.
It works but it is not clean especially on chrome: There is blur between 2 colors.
Any idea to make it cleaner ?
I have a large photo, such as http://www.bestwallpapersfan.com/wp-content/uploads/2014/05/1755137.jpg. I want to overlay text near its bottom.
To ensure that the text is readable, I want to use the Floor Blur approach described here: https://medium.com/#erikdkennedy/7-rules-for-creating-gorgeous-ui-part-2-430de537ba96#dc39-765a9789c924
I've learned how to do a simple Floor Fade to Black or a simple blur (both described here: https://css-tricks.com/design-considerations-text-images/).
But how do I combine the effects such that it's a gradual / gradient / progressive blur?
Thanks!
This is pretty close to what I was looking for and now just needs to be cleaned up to fix the funkiness with the h1, etc.
.container {
width: 400px;
height: 300px;
position: relative;
}
.gradient {
position: absolute;
width: 400px;
height: 300px;
margin: 20px;
background: linear-gradient( to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
opacity: 0.99;
z-index: 2;
}
.module {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skyscrapers.jpg);
background-attachment: fixed;
width: 400px;
height: 300px;
position: absolute;
overflow: hidden;
margin: 20px;
z-index: 1;
}
.module>header {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px 10px;
background: inherit;
background-attachment: fixed;
z-index: 3;
}
.module>header::before {
content: "";
position: absolute;
top: 0;
left: 30px;
width: 100%;
height: 100%;
background: inherit;
background-attachment: fixed;
-webkit-filter: blur(12px);
filter: blur(12px);
transform: scale(2) translateY(20px);
}
.module>header>h1 {
margin: 0;
color: white;
position: relative;
z-index: 4;
}
.title {
margin: 0;
color: white;
position: absolute;
z-index: 4;
}
* {
box-sizing: border-box;
}
<div class="container">
<div class="gradient">
</div>
<div class="module">
<header>
<h1>
Skyscraper
</h1>
</header>
</div>
<div class="title">
Skyscraper
</div>
</div>
You could use html5 canvas to draw that progressive gradient
White text annotation without a progressive gradient:
Annotation with a progressive gradient:
Example code and a Demo:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/annotateMe.jpg";
function start(){
cw=canvas.width=img.width;
ch=canvas.height=img.height;
ctx.drawImage(img,0,0);
var g=ctx.createLinearGradient(0,ch-100,0,ch);
g.addColorStop(0.00,'rgba(0,0,0,.1)');
g.addColorStop(1.00,'rgba(0,0,0,.75)');
ctx.fillStyle=g;
ctx.fillRect(0,ch-100,cw,100);
ctx.fillStyle='white';
ctx.font='24px verdana';
ctx.textAlign='center';
ctx.textBaseline='bottom';
ctx.fillText('Natural Beauty',cw/2,ch-5);
}
body{ background-color: ivory; }
#canvas{border:1px solid red;}
<canvas id="canvas" width=300 height=300></canvas>
You've complicated a bit too much, try this JSFiddle
HTML:
<div class="container">
<div id="header">
<h1>Skyscraper</h1>
</div>
</div>
CSS:
* {
margin:0;
padding:0;
}
.container {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skyscrapers.jpg);
}
.container,
#header {
width: 400px;
height: 300px;;
}
#header {
position:relative;
z-index:100;
}
h1 {
width:400px;
height:100px;
line-height:100px;
font-size:30px;
color:#ffffff;
position:absolute;
bottom:0;
left:0;
z-index:101;
text-align:center;
/* Gradient to h1 */
background: rgba(255,93,177,0);
background: -moz-linear-gradient(top, rgba(255,93,177,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,93,177,0)), color-stop(50%, rgba(0,0,0,0.5)), color-stop(100%, rgba(0,0,0,1)));
background: -webkit-linear-gradient(top, rgba(255,93,177,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,1) 100%);
background: -o-linear-gradient(top, rgba(255,93,177,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,1) 100%);
background: -ms-linear-gradient(top, rgba(255,93,177,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,1) 100%);
background: linear-gradient(to bottom, rgba(255,93,177,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5db1', endColorstr='#000000', GradientType=0 );
}
Here's an image I'd like to recreate with HTML/CSS:
The center gradient is easy enough, as are the two rings (a border around the center, and a div around that div that has its own border). The outside shadow on the left seems simple enough as well.
Here's my best approximation so far (with a matching fiddle):
<div id="youedge">
<div id="youlight" class="round border radialgradientbg">
</div>
</div>
#youedge {
border:30px solid #888;
border-radius:190px;
width:190px;height:190px;margin:50px;
box-shadow:-30px 0 0 #555;
}
#youlight { width:150px; height:150px; background-color:#2b0c0f; }
.round { border-radius:190px; }
.border { border:20px solid #777; }
body { background-color:#999; }
.radialgradientbg {
background: -moz-radial-gradient(center, ellipse cover, #4c1113 0%, #16040a 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#4c1113), color-stop(100%,#16040a)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #4c1113 0%,#16040a 100%); /* Chrome10+,Safari5.1+ */
}
What I can't figure out is the 3D lighting effects on the two gray borders around the center. Is there a way to accomplish this in CSS?
You could do it with a single element and using :before and :after along with linear-gradient and box-shadow..
The idea is to put two circles behind the main element with opposite linear gradient backgrounds..
.circle-3d {
position: relative;
width: 150px;
height: 150px;
background: black;
border-radius: 50%;
margin:2em;
}
.circle-3d:before {
position: absolute;
content: '';
left: -20px;
top: -20px;
bottom: -20px;
right: -20px;
background: linear-gradient(90deg, #666, #ccc);
border-radius: 50%;
z-index: -2;
box-shadow: -20px 0 10px -5px #000;
}
.circle-3d:after {
position: absolute;
left: -10px;
top: -10px;
bottom: -10px;
right: -10px;
background: linear-gradient(270deg, #222, #eee);
content: '';
border-radius: 50%;
z-index: -1;
}
<div class="circle-3d"></div>