I could really use your help.
I have an inner div which needs to extend past an outer div...that part isn't a problem. My issue is, I need help making the outer div clip where the inner div is extending. Problem is, they both need to be transparent.
Please see the below image to understand what I'm trying to achieve.
inner and outer div image
Here is what I have so far:
CSS:
.infoBoxOuter {
border: 10px solid #ffffff;
padding: 50px;
width: 300px;
}
.infoBoxInner {
width: 350px;
}
HTML:
<div class="infoBoxOuter">
<div class="infoBoxInner">
<h1 class="white">Lorem Ipsum dolor</h1>
</div>
</div>
Any help is greatly appreciated. Thanks.
Since you need transparency, I think you are basically looking at one of two possibilities:
Use an SVG for the border shape with the cutout on the side
Generate the top, left, and bottom borders one way or another (most easily with a border on .infoBoxOuter) and then use a pseudo element or two to create the right side with the gap.
Below is an example of approach #2. You could either do the top-right line as one pseudo element and the bottom-right line as another one, or you can do what I've done below and use a gradient to go between white and transparent.
You can adjust the numbers as needed for your situation. I just tried to get something roughly similar to your example image to get you an idea of how this works.
html, body {
height: 100%;
}
body {
background: linear-gradient(to bottom, midnightblue, steelblue);
}
.infoBoxOuter {
color: white;
border-top: 10px solid #ffffff;
border-left: 10px solid #ffffff;
border-bottom: 10px solid #ffffff;
padding: 50px;
width: 150px;
box-sizing: border-box;
position: relative;
}
.infoBoxOuter::after {
content: '';
display: block;
background: linear-gradient(to bottom, white, white 25px, transparent 25px, transparent 140px, white 140px, white);
width: 10px;
height: 100%;
position: absolute;
top: 0;
right: 0;
}
.infoBoxInner {
width: 350px;
box-sizing: border-box;
}
<div class="infoBoxOuter">
<div class="infoBoxInner">
<h1 class="white">Lorem Ipsum dolor</h1>
</div>
</div>
Related
I have that little css which draws a circle and fills it till half using backgrounds. Both containing div's have the same size but the lower one's background is still visible.
Shouldn't the div.bg cover the div.fill? So the upper half of the cirlce should be completely black? (there is a thin white line)
body {
background: black;
}
#asd {
height: 35px;
width: 35px;
border-radius: 35px;
overflow: hidden;
position: relative;
}
span {
color: red;
text-align: center;
font-size: 10px;
line-height: 35px;
position: absolute;
height: 100%;
width: 100%;
z-index: 3;
}
#asd div {
height: 100%;
width: 100%;
position: absolute;
}
div.bg {
background: white;
z-index: 1;
}
div.fill {
background: black;
height: 50% !important;
z-index: 2;
}
<div id="asd">
<span>lorem</span>
<div class="bg"></div>
<div class="fill"></div>
</div>
This is due to anti aliasing, and colour addition.
First, the browser paints a perfectly white circle:
The white circle is behind the black circle, and to make the edges look smooth, the edge pixels are blended slightly. This is called anti-aliasing or supersampling.
Now the background circle has been anti-aliased, we're left with a perfect white circle surrounded by a grey outline. The exact shade of grey is decided by the browser, but usually this decision is made by interpolating between the background and foreground colours. Let's assume this creates 50% black/white.
The next step is to create a black circle over the top of the white circle, and this will be anti-aliased in exactly the same way. This is where the problem occurs, as an incorrect assumption is made by the browser.
The black circle, exactly the same size as the white circle, is blended into the background to look smooth. Because there are already 50% black/white pixels surrounding the white circle, the black is added to these using the same algorithm, creating 25% black/white.
This is simply a limitation/design choice of the individual browsers, and some would argue that it is indeed correct behaviour. As you've found, or will find, in web design there are many ways to skin a cat, so my advice would be to look for an alternative solution rather than hack this exact problem.
General rule of thumb: try not to include extra markup to achieve visual style. One can usually achieve everything with just CSS. Keep in mind background gradients, pseudo-elements and borders and most visuals are in reach.
As a head start, I would not suggest using two div elements for this styling. Instead, I would use the background property of the white circle to describe the visual effect you are looking for.
Specifically: background: linear-gradient(to bottom, black 50%, white 50%);
body {
background: black;
}
#asd {
height: 35px;
width: 35px;
border-radius: 35px;
overflow: hidden;
position: relative;
}
span {
color: red;
text-align: center;
font-size: 10px;
line-height: 35px;
position: absolute;
height: 100%;
width: 100%;
z-index: 3;
}
#asd div {
height: 100%;
width: 100%;
position: absolute;
}
div.bg {
background: linear-gradient(to bottom, black 50%, white 50%);
z-index: 1;
}
<div id="asd">
<span>lorem</span>
<div class="bg"></div>
</div>
I think you're referring to the jagged edges around your circle, which I think is a rendering artifact caused anti-aliassing.
The border-radius on the elements get sharpened so-to-speak by anti-aliassing, which renders differently coloured pixels around the element to smoothen out hard edges (please correct me if this is wrong, I'm no expert on this). Normally this is behaviour is fine, but in your case it cases artifacts.
Have a look at my snippet below. The result is the same, but uses a background gradient to achieve it.
body {
background: black;
}
.circle {
width: 35px;
height: 35px;
line-height: 35px;
font-size: 11px;
border-radius: 50%;
color: red;
text-align: center;
background: linear-gradient(0deg, white 50%, black 50%);
}
<div class="circle">
lorem
</div>
This question already has answers here:
div with triangle at the bottom with background image
(3 answers)
Closed 1 year ago.
Hi guys I'm wondering how to make this in HTML and CSS. I know the obvious way is to make a triangular shape image in the bottom but it feels wrong. Is it possible to do it in HTML and CSS?
Edit: This is a Photoshop Design Mockup and I already said I have one solution but it feels wrong just wanted to know if somebody has another possible solution.
I'd go with clip-path to achieve something like this.
.clipped {
clip-path: polygon(100% 0%, 100% 70%, 50% 90%, 50% 90%, 0 70%, 0 0);
}
img {
max-width: 100%;
width: 100%;
}
<div class="clipped">
<img src="https://loremflickr.com/1280/720">
</div>
There's this great tool to easily generate the clip-path params:
https://bennettfeely.com/clippy/
I can't explain this at all without drawing it for you. Here is how you do it maybe someone else can fill in the blanks.
Instead of thinking about how to get a background image inside of the triangle make your background image hang lower than you need it to and put two black triangles on the top of the row bellow the image. That way it provides the illusion that your background is hanging below, when in reality you are just hiding most of it.
.arrow-up {
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid black;
}
<div class="arrow-up"></div>
#JordiNebot answer is where I think we'd like to eventually land, but clip-path hasn't been completely included yet. If you want to make sure it runs well everywhere, I would do something along the lines of the following. Create two triangles built from the middle out-ward well beyond what you would expect to need, then place them in absolute position at the bottom middle of the div containing the image.
It's considerably more work, but it will work better across all platforms.
.main {
position: relative;
overflow: hidden;
width: 100%;
}
.leftArrow {
position: absolute;
width: 0;
right: 50%;
height: 0;
bottom: 4px;
border-right: 500px solid transparent;
border-bottom: 100px solid black;
}
.rightArrow {
position: absolute;
left: 50%;
bottom: 4px;
width: 0;
height: 0;
border-left: 500px solid transparent;
border-bottom: 100px solid black;
}
img {
max-width: 100%;
width: 100%;
}
<div class="main">
<img src="https://loremflickr.com/1280/720">
<div class="leftArrow"></div>
<div class="rightArrow"></div>
</div>
I have a round image (a .png file) which is transparent in the middle. I need to make the background inside the image a solid color. To do this, I made the background solid, and then put border-radius:50%, but this creates an ugly small white line. Is there anyway to get rid of this, or would I have to manually color the image in an image editor?
div {
width: 500px;
height: 500px;
background: black;
}
div img {
margin: 100px;
max-width: 50%;
background: white;
border-radius: 50%;
}
<div>
<img src="http://i.imgur.com/sDU7Lhz.png">
</div>
Fiddle here: https://jsfiddle.net/h3nwkoe1/
The problem is not with the image. The image is a transparent one and has no background to it at all. The problem is caused by the background: white and the border-radius: 50% added to the image element. It is due to the anti-aliasing pixel in browsers and is the same issue described in this thread.
The solution would be to use some method to fill the background partially to the element and not fully (that is, just enough to cover till the black circle that is already present on the image). Since the img tag cannot have pseudo-elements (atleast it won't work cross-browser), the best option is to use a radial-gradient for the background like in the below snippet.
Note: The thick green border is only for demo and can be removed without any side effect.
div {
width: 500px;
height: 500px;
background: black;
}
div img {
margin: 100px;
max-width: 50%;
background: radial-gradient(circle at center, white 60%, transparent 61%);
border-radius: 50%;
overflow: hidden;
border: 4px solid green;
}
<div>
<img src="http://i.imgur.com/sDU7Lhz.png">
</div>
I totally agree with Harry's explanation.
Another workaround could be to enclose the image in a div slightly smaller than the image (like 1px on each side), so that the circle formed using border-radius is smaller than the external black circle on the image.
It is a bit messier than the solution proposed by Harry. But it could be an alternative to gradient.
div#black {
width:500px;
height:500px;
background:black;
border: solid black 1px;
box-sizing: border-box;
}
div#circle {
margin: 100px;
width: 250px;
height: 250px;
background: white;
border-radius: 50%;
text-align: center;
}
div#circle img {
width: 252px;
height: 252px;
margin-left: -1px;
margin-top: -1px;
}
<div id="black">
<div id="circle">
<img src="http://i.imgur.com/sDU7Lhz.png">
</div>
</div>
I am trying to make a css styling for a harvey ball with an image inside, but so far I haven't figure out a way to do it right. This is what I have now:
.three {width: 43px;
border-radius: 100%;
border-style: solid;
border-width: 4px;
border-left-color: #dadad9;
border-top-color: #009ee3;
border-right-color: #009ee3;
border-bottom-color: #009ee3;
width:40px;
height:40px;
}
.lead-name {
font-size: 16px;
font-family:Symantec Sans;
color:#424242;
font-weight: 600;
margin-bottom:0px;
}
.lead-title {
font-size: 14px;
font-family:Symantec Sans;
color:#424242;
margin-top: -3px;
margin-bottom: 10px;
}
<div class="lead-designer">
<img class="three" src="http://orig09.deviantart.net/09e7/f/2008/159/0/1/side_profile_vector_by_sruphil.png"/>
<div style="display:inline-block; margin-bottom:0px; margin-top:5px;">
<p class="lead-name">Designer Name</p>
<p class="lead-title">Messaging PO</p>
</div>
</div>
https://jsfiddle.net/yiluka/dtauydrz/
What I want is something like
As you can see, I want the circle to be divided straight and have part of the image grey scaled.
I have a lot of them and I really want to do it in code instead of photoshop to save some labor.
You can also do it using the pseudo element ::after - https://jsfiddle.net/dtauydrz/3/
The HTML:
<div class="image-container">
<img class="three" src="http://orig09.deviantart.net/09e7/f/2008/159/0/1/side_profile_vector_by_sruphil.png"/>
</div>
<div style="display:inline-block; margin-bottom:0px; margin-top:5px;">
<p class="lead-name">Designer Name</p>
<p class="lead-title">Messaging PO</p>
</div>
The CSS:
.three {
border-radius: 100%;
border-left-color: #dadad9;
border-top-color: #009ee3;
border-right-color: #009ee3;
border-bottom-color: #009ee3;
width:40px;
height:40px;
border-style: solid;
border-width: 4px;
border-color: #dadad9;
}
.image-container::after{
content: "";
display:block;
position: absolute;
margin-top: -52px;
background-color: #009ee3;
-moz-border-radius: 25px 0 0 0;
border-radius: 25px 0 0 0;
width: 25px;
height: 25px;
opacity: 0.5;
}
After an hour of messing with it, I finally finished my solution.
TL;DR
JSFiddle Demo
JSFiddle Demo with a kitten(pick this one)
JSFiddle Demo with the unhappy king of all kittens(Actually this one is amazing)
This solution, after being implemented, renders this(minus, of course, the amazing hand-drawn circle):
This solution doesn't require square images, playing with the background-image placement, and is quite easy to implement.
Let's get started!
First of all, we take your nice <img> HTML element, and replace it with this monstrosity of HTML(It really isn't that bad):
<div class="image-wrapper">
<img class="main" src="http://orig09.deviantart.net/09e7/f/2008/159/0/1/side_profile_vector_by_sruphil.png">
<div class="grayscale">
<img class="gray" src="http://orig09.deviantart.net/09e7/f/2008/159/0/1/side_profile_vector_by_sruphil.png">
</div>
</div>
Now for a little explanation. We use two different image elements so we can gray-scale one of them. We do not use a background image, since this requires a massive amount of changes if you want to make the icon bigger, or the images are different sizes.
.image-wrapper is the container div, the elements inside are positioned relative to it. It's CSS is stupid simple:
.image-wrapper {
position: relative;
}
(If you can't understand that CSS, go read HTML5 and CSS3 for dummies. That's how I started with css... #destroying_my_reputation)
.main is, of course, the main image in color. It's CSS is a little mor complicated, but still very basic:
.main {
width: 100px;
border-radius: 100%;
border: 5px solid #dadad9;
}
The width can be changed to whatever you want, if you do change the width, make sure you also change the width of the .gray image. border-radius:100% makes a circle, and border obviously adds a border.
Now on to the more complicated CSS(It's all pretty simple)!
.grayscale is the div used to hold the gray-scale image. If you know CSS, you can probably tell what is happening.
.grayscale {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
height: 50px;
width: 50px;
border-radius: 100% 0 0 0;
background: #009ee3;
padding-top: 5px;
padding-left: 5px;
}
The div is positioned absolute at the top-left corner of .image-wrapper. Anything overflowing it is hidden. It's top-left corner is given a border-radius of 100%, making it into the quarter-circle shape. Instead of a border, we change it's background color, and add a padding. This is because if we use a border, it is added to all sides, messing up the desired shape.
And then the .gray img:
.gray {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
width: 100px;
border-radius: 50% 0 0 0;
}
Simple, the image is changed to gray-scale using the grayscale() CSS filter. Make sure the width is the same as .main. And a border radius to add the round effect.
That's a wrap!
And here is the long awaited demo, with all the code
I just created a div that has the shape of a quarter circle
.quarter-circle-top-left {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 50%;
background: rgba(0, 0, 0, 0.4);
border-radius: 100px 0 0 0;
-moz-border-radius: 100px 0 0 0;
-webkit-border-radius: 100px 0 0 0;
border-left: 4px solid #009ee3;
border-top: 4px solid #009ee3;
}
And absolutely positioned that div on top of your image. It's got a transparent gray background and a top and left border with your blue. Both are now contained within an wrapper div so that the quarter circle would have something to be relative to.
Here's where the quarter circle css came from: http://1stwebmagazine.com/css-quarter-circle (I changed the class names because they seemed backwards to me).
And here's the updated fiddle: https://jsfiddle.net/ingridly/dtauydrz/1/
UPDATE:
I incorporated the idea from the other answers of filling another element with the image and grayscale-ing that, and now I think this answer does everything:
https://jsfiddle.net/ingridly/dtauydrz/6/
I have a small png with a transparent area I want to act as the bottom-right hand corner of a solid color div, but I can't seem to come up with an elegant way of doing this with css.
my current css:
div.example {
border-radius: 9px;
background-color: #fff;
background-image: url(bottom-right-corner-peel.png);
background-repeat: no-repeat;
background-position: right bottom;
}
The problem with the above code is that the background color of the div (#fff) shows through the transparent part of the png, ruining the effect. I can think of a couple extremely hacky approaches to fix this (for example - creating another div (or using ::after) to put an element below div in question, and use some tricks to make that work, but there must be a better way, right?
View the [revised] Demo:
http://jsbin.com/abacey/8/
Here is a solution to your problem: http://jsfiddle.net/promatik/uZFpZ/
I've added a #content-bottom next to #content:
<div id="content">
<h1>Corner Peel Demo</h1>
</div>
<div id="content-bottom">
<div id="content-space"></div>
<div id="content-corner"></div>
</div>
And added this in CSS:
div#content{
...
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
div#content-bottom {
height: 30px;
position: relative;
}
div#content-space {
height: 27px;
border-bottom-left-radius: 9px;
background-color: #fff;
margin-right: 42px;
}
div#content-corner {
position: absolute;
top: 0px;
right: 0px;
height: 27px;
width: 42px;
background-color: transparent;
background-image: url(data:image/png;base64,...');
}
My Ideas is to use the png to cover up the entire corner of the div.
Lets assume your png is 40x40px and the upper left part is white while the lower part is transparent.
You can use
border-bottom-right-radius: 40px;
to "cut off" the corner of the div. Therefore you have the background image visible. Now you lay your png over it to cover up the ugly round corner.
http://jsfiddle.net/Xd8CD/
(needs a better png...)