This design is created in photoshop and I'm trying to convert to html and css.
I have a background image (with the green lights), an overlay with reduced opacity and some text with an icon positioned at the center. How can I attain the effect shown below in html and css?
you could apply a border-radius to the inner element and a box-shadow like so:
Codepen Demo
div {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: url(...) no-repeat;
background-size: cover;
}
p {
border-radius: 50%;
/* add responsive behaviour */
height : 60vw;
width : 60vw;
/* but limit its max-height/width */
max-height : 400px;
max-width : 400px;
/* apply a gray shadow outside */
box-shadow : 0 0 0 50vmax rgba(255,255,255, .4);
}
50vmax is a shadow spread wide enough and middle alignment can be done e.g. via flexbox positioning. Just adjust the alpha value of the shadow (or the color) as you prefer.
Final result
Check here!
Basically you can create a transparent round shape with a big white (or black) border!
background: transparent;
border-radius: 50%;
border: 1000px solid rgba(0, 0, 0, 0.5);
JSFiddle
.container {
height:400px;
width:400px;
position:relative;
overflow:hidden;
}
.overlay {
top:50%;
left:50%;
margin-top:-500px;
margin-left:-500px;
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
background-color: transparent;
border-style: solid;
box-sizing: content-box;
z-index:999;
pointer-events:none;
border: 400px solid rgba(0,0,0,.9);
}
<div class="container">
<div class="overlay"></div>
</div>
Related
How can we add a black shadow to a background image, shadow starting at opacity 1 and gradually decreasing to opacity 0, on all 4 sides of the image? (At least 50 pixels worth of "decreasing shadow opacity". box-shadow offers only a small amount of shadow in which the opacity goes down gradually.)
I've tried playing around with mask-image, for example: -webkit-mask-image: -webkit-gradient(linear, left 85%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
This creates the desired shadow but only at the bottom of the image, not sure if this could be used to create it on the other 3 sides.
Edit: The shadow should be inside (I believe inset if box-shadow)
The goal of this will be to make our users' cover photos look good on our website's black background, even if they have brighter photos. The shadow inside the image should help the image blend in with the site's black background.
Something like this?
html,
body {
height: 100%;
}
div {
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
.inner {
width: 200px;
height: 200px;
background-image: url(http://via.placeholder.com/200x200);
background-size: cover;
background-position: center center;
box-shadow: 0px 0px 40px 5px #000000;
}
<div>
<div class="inner"></div>
</div>
Wait, wait....a voice is telling me the background of the page is a dark, dark, color. The shadow should be on the inside of the element, start from the darkest of darks and fade into the image, like this...
html,
body {
height: 100%;
background-color: #000000;
}
div {
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
.inner {
width: 200px;
height: 200px;
background-image: url(http://via.placeholder.com/200x200);
background-size: cover;
background-position: center center;
box-shadow: 0px 0px 40px 20px #000000 inset;
}
<div>
<div class="inner"></div>
</div>
What's that? Whoa, hold up... I'm sensing the box-shadow should go super, super deep... like this:
html,
body {
height: 100%;
background-color: #000000;
}
div {
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
.inner {
width: 200px;
height: 200px;
background-image: url(http://via.placeholder.com/200x200);
background-size: cover;
background-position: center center;
box-shadow: 0px 0px 70px 50px #000000 inset;
}
<div>
<div class="inner"></div>
</div>
;)
Sounds like the mind-reading is still off. So here's a final example using a linear-gradient.
html,
body {
height: 100%;
background-color: #000000;
}
div {
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
.inner {
width: 200px;
height: 200px;
background-image: radial-gradient(circle at center, rgba(0,0,0, 0.1) 0%, #000000 70%, #000000 100%), url(http://via.placeholder.com/200x200);
background-size: cover, cover;
background-position: center center, center center;
}
<div>
<div class="inner"></div>
</div>
A possibility is to use the CSS3 box-shadow property with the inset marker. This will pop a shadow inside a container or element (similar to what is sometimes called a vignette in image editors) which adheres to the element's proportions, so it might not be what you're after.
Ex. HTML
<div id="container"></div>
Ex. CSS
#container {
width:100px;
height:100px;
background-image:url(path/to/image.jpg);
background-size:cover;
-webkit-box-shadow:inset 0 0 50px #000000;
box-shadow:inset 0 0 50px #000000;
}
Playing with the vertical and horizontal offset values (here set at 0) may produce more effective results, for example something like this ...
width: 200px;
height: 200px;
box-shadow: inset 0 100px 50px -25px #000000;
... will give the impression of a vertical gradient, top-2-bottom, dark-2-light.
As always, there's a great explanation of the box-shadow property over # CSS-Tricks.
Hope that helped. :)
I'm trying to recreate these arrows in CSS for a website I'm redesigning to be responsive. These two guys were done with static images but I'd like them to be pure CSS.
This is a sprite that was used for mouseover replacement. The bottom is the mouseover state. The background behind the arrow needs to be transparent.
I thought it would be a simple div with a p or heading tag inside:
<div class="arrow_box">
<p>UTILITIES</p>
</div>
I've searched for examples everywhere and everything I've tried to modify never lets me seem to have full control of the width and height of the element. The width (with the arrow) is 114px. The height (of a single state) would be 29px.
I've played with this for the better part of an hour trying to get it properly sized but nothing seems to work. http://codepen.io/anon/pen/bpBGQL My lack of knowledge on how this works is partially to blame.
So the trick, here, is being able to control the height correctly. Here, I've got the text in a span with a line-height : 0, and padding:15px. Now, we have precisely 30px of height, and can use an ::after pseudo element to fabricate the arrow. The width will be set by the text content, but can be defined with an explicit width rule, as well.
<div class="arrow"><span>text</span></div>
.arrow{
display:inline-block;
height:auto;
background-color:orange;
}
.arrow span{
display:inline-block;
line-height:0;
padding:15px;
color:white;
}
.arrow::after{
width: 0;
height: 0;
position: absolute;
right:0
top: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid orange;
content: "";
}
Add whatever colors / hover states you require. You can see some basic rules in the working fiddle.
Fiddle
You can do this with :after pseudo element. You can change color of pseudo element on hover state like this .arrow_box:hover:after
* {
box-sizing: border-box;
}
p {
margin: 0;
padding-left: 10px;
}
.arrow_box {
background: #627680;
display: block;
color: white;
position: relative;
height: 30px;
line-height: 30px;
width: 114px;
transition: all 0.3s ease-in;
}
.arrow_box:after {
content: '';
height: 0;
width: 0;
position: absolute;
top: 0;
right:0;
transform: translateX(100%);
border-bottom: 15px solid transparent;
border-top: 15px solid transparent;
border-left: 20px solid #627680;
border-right: 15px solid transparent;
transition: all 0.3s ease-in;
}
.arrow_box:hover {
background: #2A92C2;
}
.arrow_box:hover:after {
border-left: 20px solid #2A92C2;
}
<div class="arrow_box">
<p>UTILITIES</p>
</div>
did you consider gradient backgrounds ?
body {
background: linear-gradient(45deg, gray, lightgray, gray, lightgray, gray, lightgray, gray, lightgray, gray, lightgray, gray, lightgray);
/* demo purpose only */
}
.arrow {
text-transform: uppercase;
/* optionnal */
padding: 3px 1.5em 3px 0.5em;
color: white;
background: linear-gradient(225deg, transparent 0.6em, #627680 0.6em) top no-repeat, linear-gradient(-45deg, transparent 0.6em, #627680 0.6em) bottom no-repeat;
background-size: 100% 50%;
/* each gradient draws half of the arrow */
}
.arrow:hover {
/* update gradient color */
background: linear-gradient(225deg, transparent 0.6em, #2A92C2 0.6em) top no-repeat, linear-gradient(-45deg, transparent 0.6em, #2A92C2 0.6em) bottom no-repeat;
background-size: 100% 50%;
}
<span class="arrow"> Utilities</span> <span class="arrow"> testing</span>
You may also want to take a look at Responsive Arrow Breadcrumb Navigation for breadcrumbs and imbricated arrows or Create dynamic arrow-like shape with CSS
Does this pen provide what you need?
http://codepen.io/anon/pen/dMOPmV (may require some pixel pushing to get it perfect)
It just required adjusting:
border-width: 27px;
margin-top: -35px;
and adding a hover state for the main element and before element.
I'm trying to create a circle with CSS, which looks exactly like on the following picture:
...with only one div:
<div class="myCircle"></div>
and by using only CSS definitions. No SVG, WebGL, DirectX, [...] allowed.
I've tried to draw a full circle and fading half of it with another div, and it does work, but I'm looking for a more elegant alternative.
You could use border-top-left-radius and border-top-right-radius properties to round the corners on the box according to the box's height (and added borders).
Then add a border to top/right/left sides of the box to achieve the effect.
Here you go:
.half-circle {
width: 200px;
height: 100px; /* as the half of the width */
background-color: gold;
border-top-left-radius: 110px; /* 100px of height + 10px of border */
border-top-right-radius: 110px; /* 100px of height + 10px of border */
border: 10px solid gray;
border-bottom: 0;
}
WORKING DEMO.
Alternatively, you could add box-sizing: border-box to the box in order to calculate the width/height of the box including borders and padding.
.half-circle {
width: 200px;
height: 100px; /* as the half of the width */
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border: 10px solid gray;
border-bottom: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
UPDATED DEMO. (Demo without background color)
I had a similar issue not long time ago and this was how I solved it
.rotated-half-circle {
/* Create the circle */
width: 40px;
height: 40px;
border: 10px solid black;
border-radius: 50%;
/* Halve the circle */
border-bottom-color: transparent;
border-left-color: transparent;
/* Rotate the circle */
transform: rotate(-45deg);
}
<div class="rotated-half-circle"></div>
Below is a minimal code to achieve the effect.
This also works responsively since the border-radius is in percentage.
.semi-circle{
width: 200px;
height: 100px;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
border: 10px solid #000;
border-bottom: 0;
}
<div class="semi-circle"></div>
I use a percentage method to achieve
border: 3px solid rgb(1, 1, 1);
border-top-left-radius: 100% 200%;
border-top-right-radius: 100% 200%;
Add a border to the semi-circle and remove the border-bottom
#semi-ring{
height: 100px;
/* width = 2* height */
width: 200px;
border: 30px solid black;
/* border-radius = height + border */
border-radius: 130px 130px 0 0;
border-bottom: transparent;
}
<div id="semi-ring"></div>
An idea using gradient:
.box {
width: 200px;
aspect-ratio: 2;
border-radius: 999px 999px 0 0;
background: radial-gradient(50% 100% at bottom,#0000 80%,red 80.5%);
}
<div class="box"></div>
I need to create a solid color inset border. This is the bit of CSS I'm using:
border: 10px inset rgba(51,153,0,0.65);
Unfortunately that creates a 3D ridged border (ignore the squares and dark description box)
You could use box-shadow, possibly:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 10px #0f0;
}
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 10px #0f0;
}
<div id="something"></div>
This has the advantage that it will overlay the background-image of the div, but it is, of course, blurred (as you'd expect from the box-shadow property). To build up the density of the shadow you can add additional shadows of course:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}
<div id="something"></div>
Edited because I realised that I'm an idiot, and forgot to offer the simplest solution first, which is using an otherwise-empty child element to apply the borders over the background:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
padding: 0;
position: relative;
}
#something div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 10px solid rgba(0, 255, 0, 0.6);
}
<div id="something">
<div></div>
</div>
Edited after #CoryDanielson's comment, below:
jsfiddle.net/dPcDu/2 you can add a 4th px parameter for the box-shadow that does the spread and will more easily reflect his images.
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.5);
}
<div id="something"></div>
I would recomnend using box-sizing.
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
#bar{
border: 10px solid green;
}
To produce a border inset within an element the only solution I've found (and I've tried all the suggestions in this thread to no avail) is to use a pseudo-element such as :before
E.g.
.has-inset-border:before {
content: " "; /* to ensure it displays */
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
border: 4px dashed red;
pointer-events: none; /* user can't click on it */
}
The box-sizing property won't work, as the border always ends up outside everything.
The box-shadow options has the dual disadvantages of not really working and not being supported as widely (and costing more CPU cycles to render, if you care).
It's an old trick, but I still find the easiest way to do this is to use outline-offset with a negative value (example below uses -6px). Here's a fiddle of it—I've made the outer border red and the outline white to differentiate the two:
.outline-offset {
width:300px;
height:200px;
background:#333c4b;
border:2px solid red;
outline:2px #fff solid;
outline-offset:-6px;
}
<div class="outline-offset"></div>
If you want to make sure the border is on the inside of your element, you can use
box-sizing:border-box;
this will place the following border on the inside of the element:
border: 10px solid black;
(similar result you'd get using the additonal parameter inset on box-shadow, but instead this one is for the real border and you can still use your shadow for something else.)
Note to another answer above: as soon as you use any inset on box-shadow of a certain element, you are limited to a maximum of 2 box-shadows on that element and would require a wrapper div for further shadowing.
Both solutions should as well get you rid of the undesired 3D effects.
Also note both solutions are stackable (see the example I've added in 2018)
.example-border {
width:100px;
height:100px;
border:40px solid blue;
box-sizing:border-box;
float:left;
}
.example-shadow {
width:100px;
height:100px;
float:left;
margin-left:20px;
box-shadow:0 0 0 40px green inset;
}
.example-combined {
width:100px;
height:100px;
float:left;
margin-left:20px;
border:20px solid orange;
box-sizing:border-box;
box-shadow:0 0 0 20px red inset;
}
<div class="example-border"></div>
<div class="example-shadow"></div>
<div class="example-combined"></div>
I don't know what you are comparing to.
But a super simple way to have a border look inset when compared to other non-bordered items is to add a border: ?px solid transparent; to whatever items do not have a border.
It will make the bordered item look inset.
http://jsfiddle.net/cmunns/cgrtd/
Simple SCSS solution with pseudo-elements
Live demo: https://codepen.io/vlasterx/pen/xaMgag
// Change border size here
$border-width: 5px;
.element-with-border {
display: flex;
height: 100px;
width: 100%;
position: relative;
background-color: #f2f2f2;
box-sizing: border-box;
// Use pseudo-element to create inset border
&:before {
position: absolute;
content: ' ';
display: flex;
border: $border-width solid black;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: $border-width solid black;
// Important: We must deduct border size from width and height
width: calc(100% - $border-width);
height: calc(100% - $border-width);
}
}
<div class="element-with-border">
Lorem ipsum dolor sit amet
</div>
You can do this:
.thing {
border: 2px solid transparent;
}
.thing:hover {
border: 2px solid green;
}
If box-sizing is not an option, another way to do this is just to make it a child of the sized element.
Demo
CSS
.box {
width: 100px;
height: 100px;
display: inline-block;
margin-right: 5px;
}
.border {
border: 1px solid;
display: block;
}
.medium { border-width: 10px; }
.large { border-width: 25px; }
HTML
<div class="box">
<div class="border small">A</div>
</div>
<div class="box">
<div class="border medium">B</div>
</div>
<div class="box">
<div class="border large">C</div>
</div>
I know this is three years old, but thought it might be helpful to someone.
The concept is to use the :after (or :before) selector to position a border within the parent element.
.container{
position:relative; /*Position must be set to something*/
}
.container:after{
position:relative;
top: 0;
content:"";
left:0;
height: 100%; /*Set pixel height and width if not defined in parent element*/
width: 100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
border:1px solid #000; /*set your border style*/
}
You may use background-clip: border-box;
Example:
.example {
padding: 2em;
border: 10px solid rgba(51,153,0,0.65);
background-clip: border-box;
background-color: yellow;
}
<div class="example">Example with background-clip: border-box;</div>
So I was trying to have a border appear on hover but it moved the entire bottom bar of the main menu which didn't look all that good I fixed it with the following:
#top-menu .menu-item a:hover {
border-bottom:4px solid #ec1c24;
padding-bottom:14px !important;
}
#top-menu .menu-item a {
padding-bottom:18px !important;
}
I hope this will help someone out there.
Simpler + better | img tag | z-index | link image | "alt" attribute
I figured out a method where you do not need to use the image as a background image but use the img HTML tag inside the div, and using z-index of the div as a negative value.
Advantages:
The image can now become a link to a lightbox or to another page
The img:hover style can now change image itself, for example:
black/white to color, low to high opacity, and much more.
Animations of image are possible The image is more accessible because
of the alt tag you can use.
For SEO the alt tag is important for keywords
#borders {
margin: 10px auto;
width: 300px;
height: 300px;
position:relative;
box-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.5);
}
img {
position:absolute;
top:0;
bottom:0;
left:0;
right: 0;
z-index: -1;
}
<div id="borders">
<img src="https://i.stack.imgur.com/RL5UH.png">
</div>
http://jsfiddle.net/XjsWZ/
I'm trying to get the white box itself to have rounded corners in addition to its transparent gray border using CSS3. Is this possible?
html:
<div class="outer"><div class="inner"></div></div>
css:
.outer{
width: 300px;
height: 300px;
border: solid 10px;
border-radius: 5px;
border-color: rgba(0, 0, 0, 0.5);
}
.inner{
border-radius 5px;
}
Bonus question:
What's with those black squares in the corners on Chrome?
EDIT: I found a discussion of the black squares: Weird border opacity behavior in Webkit?
http://jsfiddle.net/XjsWZ/3/ maybe?
** edit **
I prefer JamWaffles':
.outer{
width: 290px;
height: 290px;
border: solid 10px;
border-radius: 15px;
border-color: rgba(0, 0, 0, 0.5);
background-clip:padding-box;
background-color:white;
padding: 5px;
}
Or if you want different looking corners there's a variant of Jedidiah's:
.outer{
width: 300px;
height: 300px;
background-clip:padding-box;
background-color: rgba(0,0,0,0.5);
border: solid 10px rgba(0,0,0,0.5);
border-radius: 10px; /*if you reduce this below 9 you will get black squares in the corners, as of Chrome 14.0.835.163 m*/
}
.inner{
border-radius: 5px;
background-color: white;
height: 100%;
}
JamWaffles answer is cleaner but if you did want to achieve this with the nested div tags and a translucent border you could set a background colour on the outer div to match the border colour, you would also need to set background-clip: padding-box; so that the border and background do not overlap.
Example:
http://jsfiddle.net/XjsWZ/7/
css:
.outer{
width: 300px;
height: 300px;
background-clip:padding-box;
background-color: rgba(0,0,0,0.5);
border: solid 10px rgba(0,0,0,0.5);
border-radius: 5px;
}
.inner{
border-radius: 5px;
background-color: white;
display:block;
width: 100%;
height: 100%;
}
html:
<div class="outer"><div class="inner"></div></div>
This will change the look of the box a bit, but if the border radius is greater than the width of the border, you'll get inner rounded corners too.
Example here. I've removed the inner div as it's not needed for the example, as I have made the assumption you're nesting only to achieve the rounded effect.
In relation to the black squares in the corners, I don't get any at all with Chromium 12. You could try using a normal hex colour instead of an RGBA one. For your current colour, it's #808080, although I do appreciate the need for translucency; this is for a Facebox-style popup?
http://jsfiddle.net/XjsWZ/10/
It seems like this would be a good solution although it technically doesn't use a border, it maintains the correct alpha value while getting rid of the black squares in webkit:
css:
.outer{
width: 300px;
height: 300px;
background-clip:padding-box;
background-color: rgba(0,0,0,0.5);
border: solid 10px rgba(0,0,0,0.5);
border-radius: 5px;
}
.inner{
border-radius: 5px;
background-color: white;
display: block;
width: 280px;
height: 280px;
position: relative;
top: 10px;
left: 10px;
}
html:
<div class="outer"><div class="inner"></div></div>