Ok so say i'm using the follow setup for my divs:
.background will contain an image.
.overlay will have a semitransparent white background for the overlay
.inner would effectively mask out a rectangle the size of the div? So that the background is transparent and cuts through the overlay div.
<div class="background">
<div class="overlay">
<div class="inner">
</div>
</div>
</div>
Is this possible with just css?
Looks like you can achieve that adding a thick border with some opacity (Fiddle). The border widths will determine size of rectangle desired:
<div class="background">
<div class="inner">
</div>
</div>
and CSS:
html, body {
height: 100%;
width: 100%;
}
.background {
width: 100%;
height: 100%;
background: url('http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg');
}
.inner {
width: 100%;
height: 100%;
border-top: 130px solid rgba(255, 255, 255, 0.5);
border-bottom: 130px solid rgba(255, 255, 255, 0.5);
border-left: 100px solid rgba(255, 255, 255, 0.5);
border-right: 100px solid rgba(255, 255, 255, 0.5);
box-sizing: border-box;
}
YES, if you use a PNG image for the masking. It is possible to clip the background div using it's children. What you would need to do it use a PNG with transparent area in the middle or where ever you want.
While you can't mask complex shapes, you can mask simple shapes like a cube or their rounded edges.
Just use:
overflow-x
or
overflow-y
or
overflow
Which according to an inspect of Google Chrome, can be set to:
auto, hidden, inherit, initial, overlay, revert, scroll, unset, or visible
Although, I find that:
inherit, initial, revert, unset and visible
do not provide a mask in most cases.
Finally, if you want to mask on a curve, simply set a border-radius property.
Remember, in a border-radius, you can use:
1 value: A; all corners
2 values: A, B; A=Top-Left & Bottom-Right B=Top-Right & Bottom-Left
3 values: A, B, C; A=Top-Left B=Top-Right & Bottom-Left C=Bottom-Right
4 values: A, B, C, D; A=Top-Left B=Top-Right C=Bottom-Right D=Bottom-Left
-tested in Google Chrome Version 96.0.4664.45 (Official Build) (64-bit) with HTML and CSS on the date of this posting.
Short answer is - no, you could not clip div by it's children.
But you can solve your problem without clipping. As I understand, you just need white border around inner div. You may use border or box-shadow. Also you can create such border with 4 divs on each side
Related
I have an <img> for which I want to highlight a certain area as shown below:
I'm trying to figure out a way to create the following effect using just CSS and no JS. I was originally thinking of using an inset border-box, but I need to be able to use percentages for both the location (e.g. top left of the highlighted area is 50% in from left and 80% down from right) and size of box and it appears that border-box can only take px values. I could use JS to keep resizing everything if the image size changes, but I don't want to do that.
Any ideas?
You can create one div element with img inside. And then use pseudo-element on div that will have large box-shadow, and you can position pseudo-element using position-absolute
div {
position: relative;
overflow: hidden;
display: inline-block;
}
div:after {
content: '';
position: absolute;
bottom: 5%;
left: 20%;
width: 40%;
height: 50%;
box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.6);
}
<div><img src="https://s-media-cache-ak0.pinimg.com/736x/ff/00/5e/ff005e0fa600c51c5e36f6059bbe6053.jpg"></div>
Maybe try creating 4 boxes positioned all sides of the image overlapping as much as you need. Set the boxes color to black with a transparency, and adjust the sizes of them how you like. These boxes would sit ontop of the original image.
I have this code for my border:
border: 1px solid #CCC;
Is it possible to have some similar CSS where the border has a width but it's not visible. In other words if there's a blue background then that would show right through the border?
A margin occupies space and is transparent. The space a margin occupies is on the outside of the element, so it takes the background color of the parent element. If you want it to be space with the same background color as the element you are modifying, you would want to use padding.
This is a great resource that shows you what you will probably want:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
Yes, it's entirely possible.
Normally, a transparent border would show the background color of the element beneath it.
This can be overcome by restricting the background to the "box" holding the padding & content using background-clip:padding-box (or optionally content-box which would clip the background to the content area only).
Then you can add a boxshadow (for instance) which will sit outside the transparent border.
body {
background: linear-gradient(to bottom, orange, pink);
}
div {
width: 200px;
height: 200px;
box-sizing: border-box;
background: rebeccapurple;
margin: 2em auto;
border: 10px solid transparent;
box-shadow: 0 0 5px 5px green;
background-clip: padding-box;
}
<div></div>
You can just set the border-color to transparent
Yes it is possible to have transparent border. Just use rgba color defination like so:
border: 10px solid rgba(50,50,50,.5);
The last value 0.5 goes from 0 to 1 and is a opacity (or alpha) value for the color
Working example (see how the border transparency changes on hover): jsFiddle
I have div border with inner rounded corners that I want to replace with an image. The image will have opacity, gradient and other Photoshop effects applied to it.
I also want to have the inner div's background colour to see through so that the image of the body is visible. Basically I am after a transparent background in the .inner div.
JSFiddle: http://jsfiddle.net/EN2XZ/2/
This is my HTML:
<body>
<div class="outer">
<div class="inner">
....
....
</div>
</div>
</body>
CSS:
body {
background-image:url('image-url');
background-size:cover;
background-repeat:no-repeat;
padding:50px;
}
.outer {
background-color:#000;
padding:10px;
}
.inner {
border-radius:10px;
background-color:#fff;
padding:5px 15px;
color:#0000ff;
}
Am not clear about the image requirement description you gave
To get a transparent background give background color in rgba
Rewrite the inner class as
.inner {
border-radius:10px;
background-color:rgba(0,0,0,0.2);
padding:5px 15px;
color:#0000ff;
}
where the rgba last parameter is the opacity
Currently, .inner can not be transparent to body because .outer is the next layer behind it, and is solid black, so .inner would be transparent to black.
You could remove .outer or set background-color: transparent; on it, then set .inner to background-color: rgba(255, 255, 255, .7);
However that leaves no border. You could add a simple black border with rounded edge by adding it to the .inner class: border: 1px solid #000;
If you are set on having the outer black box have no radius, and inner have a radius, and have fancy effects, then you can certainly just use an image as you originally intended.
In Photoshop, make sure your image has some transparency, and save it as a PNG-24 with transparency enabled. The PNG-24 format allows for each pixel to carry over its alpha value.
I want to create triangle as shown in image.
Does someone know how to achieve the effect?
Here is a fiddle that should solve your problem. I used :before and :after on a container to place two squares over the container with borders to create the arrows. You can mess with the border colors and widths to get the arrows how you want them (just remember the inside borders have to be the same weight to make an symmetrical triangle).
http://jsfiddle.net/56gur0x4/1/
.hero {
background: url(http://d.pr/i/eqn9+);
height: 200px;
position: relative;
}
.hero:before, .hero:after {
box-sizing: border-box;
content: " ";
position: absolute;
top:0;
display: block;
width: 50%;
height: 100%;
border: 30px solid orange;
border-bottom-color: pink;
}
.hero:before {
left: 0;
border-right: 20px solid transparent;
border-left: 0;
}
.hero:after {
right: 0;
border-left: 20px solid transparent;
border-right: 0;
}
With newer browsers, you can use the clip-path CSS property. This is much less hacky, but you'll need a fallback for IE/Edge and older browsers.
Example
<div class="triangle"></div>
<style>
.triangle {
width: 400px;
height: 400px;
background-color: blue;
clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
</style>
Triangle shape clip mask using CSS to clip image so that background appear.
You can achieve this kind of masking using clip property of CSS With SVG.
HTML
<svg width="0" height="0">
<clipPath id="clipping1" clipPathUnits="objectBoundingBox">
<polygon points="0 0, 0 1, 100 0, .6 0, .5 .2, .4 0">
</clipPath>
</svg>
<img class="clip-animation" alt="" src="http://c1.staticflickr.com/9/8449/7966887330_ddc8018682_h.jpg">
CSS
.clip-animation {clip-path: url(#clipping1);-webkit-clip-path: url(#clipping1); margin:100px; width:500px;}
body{ background-color:#CCCCCC;}
I have mask with an image tag you can also use this with div element or any other tag.
Check a working demo here.
http://jsfiddle.net/VijayDhanvai/495rpzdb/
Imagine the area with photo is split down the middle into two squares, with the photo as a background.
Now imagine you give those squares very thick top and bottom borders with colours corresponding to the areas above and below the photo.
Now imagine you also give them a very thick border for each of their adjacent sides (the left square has a right border, the right square has a left border), but this time, you make the border transparent.
You will see that where the top/bottom borders and the side borders meet, there is a diagonal edge between them where the colour changes to transparent. This leaves a transparent triangle in the adjacent corners where the background shows through.
I have two nested items in HTML and I want to give the wrraping one opacity 0.8 and the one inside it opacity 1.
I think I understand why it does not work, but, how can I mimick that effect?
Here is a simplified HTML that shows the problem, I want the green square to be solid.
<div style='background-color:red;
width: 500px;
height: 500px;
border: 1px solid black;
position: absolute;
top:0;
left:0;
opacity:0.8'>
<div style='width:150px; height:150px; background-color:green; opacity:1'>
Some content
</div>
</div>
If you use the rgba CSS property instead of the opacity property you can achieve this:
<div style='background-color:rgba(0, 255, 0, 0.8) ;width: 500px; height: 500px; border: 1px solid black; position: absolute; top: 0; left: 0'>
<div style='position: relative; width: 150px; height: 150px; background-color: rgba(0, 0, 255, 1);'>aaaaaaaaa<br>aaaaaaaaa<br></div>
</div>
Demo: http://jsfiddle.net/ScHgC/
you could always embrace progressive enhancement and use rgba on your background-colors
// this will only affect the div it's applied to and not it's contents
background-color: rgba(0,0,0,0.8)
Using CSS2
I fiddled a demo for you that illustrates a key concept:
http://jsfiddle.net/audetwebdesign/pN69F/
You can start by adding a wrapper div to position your two enclosed div's, outer and inner. The outer comes before the inner, which means that the inner will sit over the outer (unless you adjust the z-index values).
You can set the opacity to the outer div and that will allow any background text or image to be partly visible. Set the opacity of the inner div to 1.0 to get fully saturated coloring.
I think most browsers support opacity, but check out http://www.quirksmode.org/css/opacity.html for vendor-specific CSS properties to handle IE quirks.