I'm trying to build a circular region with a hidden panel that slides up inside of the circle. This seems to work perfectly on Firefox, however, with Chrome/Webkit there is no 'masking'. I'm assuming there's some sort of CSS trick to this but I've been banging my head against a wall thus far...
http://jsfiddle.net/HQDdR/1/
You could use radial gradients and then you wouldn't even need the container and the holder - DEMO.
Relevant CSS:
#top {
overflow: hidden;
width: 300px;
height: 300px;
border-radius: 50%;
}
#slider {
height: 600px;
background: radial-gradient(circle, gainsboro 70.71%, transparent 70.71%)
no-repeat 0 100%;
background-size: 300px 300px;
transition: .3s;
}
#top:hover #slider {
height: 300px;
}
I've animated the height of the slider, but you could also animate the background-position.
Related
I want to make divs which got backgrounds that have this 3d-effect while scrolling, that one can achieve with translateZ. In the end it should look like cutouts or windows and through them you can see the (background-)images.
edit: So, if you scroll through the page you can see those boxes/cutouts but the images inside them are moving slower while scrolling to create the effect that they are further away. end of edit
What I have in mind is to have one div for the cutout and then another div inside it for the background. So, i set it up and it didn't work. It turns out that the overflow: hidden; of the outer div somehow blocks the transform: translateZ(-5px) scale(1.05); of its child.
Here is what I have got so far:
body {
perspective: 100px;
transform-style: preserve-3d;
overflow-x: hidden;
overflow-y: scroll;
}
#artwork, #photos {
width: 800px;
padding: 0 50px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
}
.pic {
/*position: relative;*/
width: 200px;
height: 100px;
display: inline-block;
background: #aaa;
border-radius: 10px;
box-shadow: inset 0 10px 30px rgba(0,0,0,.3);
}
#artwork > * {
overflow: hidden;
}
.pic div {
position: absolute;
width: 200px;
height: 110px;
background: #660; /*couldn't put an image here*/
background-size: cover;
transform: translateZ(-5px) scale(1.05);
}
<section id="artwork">
<div class="pic"><div></div></div>
<div class="pic"><div></div></div>
<div class="pic"><div></div></div>
</section>
P.S.: I don't want to achieve the effect via JavaScript because it's not working smoothly on most computers.
edit n°2: my approaches so far:
- making extra tick borders to cover overlapping parts of the image divs; instead of using overflow: hidden >> parts are sometimes still overlapping on some screen sizes & it takes a lot of space
- creating a clip-path to use as overflow: hidden >> clip-paths also break the translateZ
- playing around with display and position on both outer and inner div >> only solutions without cutout
- Ztranslating the parent of the outer div further away and then bringing the outer div close again >> still blocked by the overflow: hidden;
I found a workaround, although it's a compromise because the border radius isn't working. I added thick borders in the background color to the outer divs and set the z-index of the inner divs to something negative.
body {
height: 200px;
perspective: 100px;
transform-style: preserve-3d;
overflow-x: hidden;
overflow-y: scroll;
}
#artwork {
width: 800px
padding: 0 50px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
}
.pic {
width: 200px;
height: 100px;
margin: -40px;
display: inline-block;
background: transparent;
border: 40px solid hsl(30, 50%, 90%);
box-shadow: inset 0 10px 30px rgba(0,0,0,.3);
}
.pic div {
position: absolute;
width: 200px;
height: 110px;
background: linear-gradient(135deg, rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%);
transform: translateZ(-5px) scale(1.05) translateY(-1vw);
z-index: -20;
}
#artwork div:nth-child(2) div, #photos div:nth-child(2) div {transform: translateZ(-5px) scale(1.05) translateX(-1.5vw) translateY(-1vw);}
#artwork div:nth-child(4) div, #photos div:nth-child(4) div {transform: translateZ(-5px) scale(1.05) translateX(1.5vw) translateY(-1vw);}
<br><br><br><br><br><br><br>
<section id="artwork">
<div class="pic"><div></div></div>
<div class="pic"><div></div></div>
<div class="pic"><div></div></div>
</section>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
that code snippet doesn't work here for some reason. For me however it works in the browser. It would be nice if someone could suggest another possible solution as this one works with only some screen sizes.
I'm trying to add a stylish "wave" element to the top of a div, however with my attempts, the svg moves from its position and leaves a gap when the browser resizes.
Here's a mockup of what it should look like:
CSS:
.wave {
position: absolute;
top: -72px;
}
.container {
background: #eee;
}
.col-1 {
height: 200px;
}
.col-2 {
position: relative;
background: #fff;
height: 100px;
width: 100%;
margin-top: 100px;
}
My other attempt was using background-image: url(wave.svg); in a :after selector, but same results.
Here's a codepen:
https://codepen.io/anon/pen/LmRyLK
How can I get the wave to keep put as is when it's resizing and when it's not?
Set your SVG as a background image on the element where you have your funky purple bit, you can stack the background images on each other, like so:
.purpleElement{
background: url("/path/to/asset/image.svg") bottom center no-repeat, purple;
background-size: 100%;
/*I've set a height here to replicate content*/
height: 70vh;
width: 100%;
}
I've forked off your codepen to show what will happen
I have a parent and child div the child div has a background image. On hover the image scales and there is a transition on the transform. This is working correctly in all browsers except Safari, it seems on hover the border radius is being removed and then added again. Can anyone suggest a fix for this.
HTML:
<div class="image-box">
<div class="image"></div>
</div>
CSS:
.image-box {
width: 300px;
overflow: hidden;
border-radius: 20px;
}
.image {
width: 300px;
height: 200px;
background: url("http://via.placeholder.com/340x282");
background-position: center;
transition: transform 1s ease;
}
.image:hover {
transform: scale(1.5);
}
https://codepen.io/liannaryan/pen/ZxbZZa
For anyone having the same issue the solution is.
.image-box {
width: 300px;
overflow: hidden;
border-radius: 20px;
-webkit-border-radius: $border-radius;
-webkit-mask-image: -webkit-radial-gradient(circle, white, white);
}
How could I achieve a background that looked similar to this image:
Only 3 colors, angled from the top corner out like a sunray.
Maybe sticking with a simple PNG or SVG background image would be a better approach.
The effect can be achieved with CSS using pseudo-elements and transforms and the below is a sample snippet. But I don't think using CSS is the correct option for this. It would be better to use a PNG image.
The snippet uses a couple of pseudo-elements with different background colors skewed at required angles to produce the three-color effect.
.bg {
position: relative;
height: 200px;
width: 400px;
padding: 4px;
background: orange;
overflow: hidden;
}
.bg:after,
.bg:before {
position: absolute;
content: '';
left: 0px;
height: 100%;
width: 100%;
transform-origin: right top;
}
.bg:before {
top: 0px;
background: red;
transform: skewY(-45deg);
}
.bg:after {
top: -100%;
background: yellow;
transform: skewY(-15deg);
}
span {
position: relative;
z-index: 2;
}
/* Just for demo */
.bg:hover {
height: 200px;
width: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="bg">
<span>Some content inside</span>
</div>
Angled linear-gradients also could be used but I don't think they are good for dynamic sized container elements as the angles need to be modified as the dimensions change to keep the appearance the same.
Below is a snippet using linear-gradient. Hover on the shape to see how a change of width and/or height affects it.
.bg {
position: relative;
height: 200px;
width: 400px;
background: linear-gradient(310deg, red 30%, transparent 30%), linear-gradient(340deg, transparent 58%, yellow 58%), orange;
overflow: hidden;
}
.bg:hover {
height: 200px;
width: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="bg">
<span>Some content inside</span>
</div>
SVG
This can be done with SVG.
I used three polygon shapes. This can be set to a background-image.
Or alternatively can be used inline so you can use css properties on it.
html, body {
margin: 0;
padding: 0;
}
.triple {
width: 250px;
height: 250px;
}
.triple:hover {
width: 500px;
height: 100px;
}
<svg class="triple" viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon fill="#dd2" points="0,0 100,0 0,60" />
<polygon fill="#bb2" points="0,60 100,0 30,100 0,100 " />
<polygon fill="#992" points="30,100 100,0 100,100" />
</svg>
Yes, it can be done with gradients, in a responsive way.
That is asuming that when the aspect ratio changes, you don't want to keep the angles, but the relative positions
The trick is to use simbolic names in the gradient direction, and then playing with the size and the position of the background-image
.test {
display: inline-block;
border: solid 1px black;
background-image: linear-gradient(to top left, tomato 50%, transparent 50%),
linear-gradient(to bottom right, lightgreen 50%, transparent 50%);
background-size: 60% 100%, 100% 50%;
background-repeat: no-repeat;
background-position: bottom right, top left;
}
#test1 {
width: 200px;
height: 100px;
}
#test2 {
width: 100px;
height: 100px;
}
#test3 {
width: 70px;
height: 100px;
}
<div class="test" id="test1"></div>
<div class="test" id="test2"></div>
<div class="test" id="test3"></div>
Use a 4-color GIF image. This will give you both cross-browser/platform compatibility as well as backward compatibility, and the size will be small with this type of image. If the colors are subtle as shown the "jaggies" will be camouflaged somewhat (or provide a larger size).
A good option is to use SVG which has good support in modern up-to-date browsers.
I'm looking for a way to create bent top and bottom borders like the div in this image. I've tried some ways mentioned here but it depends on using white divs with border-radius on top of the main div but as you can see in this image it should be transparent to display the background image.
This is possible using svg.
For responsiveness remove the svg's width and height attributes, add viewBox="0 0 400 150" then try changing #image's width and height, the svg will respond to its width and height.
Demo on Fiddle demonstrating responsive shape.
Browser support for this approach - This will work on all browsers but IE8.
body {
background: teal;
}
#image {
width: 600px;
height: 300px;
position: relative;
background: url(http://lorempixel.com/600/300);
}
svg {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="image">
<svg width="400" height="150">
<path opacity="0.6" fill="red" d="M0,10 Q0,0 10,0 Q195,40 390,0 Q400,0 400,10 Q390,75 400,140 Q400,150 390,150 Q195,100 10,150 Q0,150 0,140 Q10,75 0,10" />
</svg>
</div>
Another posibility, not using clipping but multiple backgrounds.
Technically less advanced than chipChocolate answer, just providing an alternative
.test {
position: absolute;
left: 50px;
top: 50px;
width: 400px;
height: 100px;
border-radius: 10px;
background-image: radial-gradient(circle at center -778px,
transparent 800px, rgba(255,0,0,0.4) 800px),
radial-gradient(circle at center 828px,
transparent 800px, rgba(255,0,0,0.4) 800px);
background-position: center top, center bottom;
background-size: 100% 50%, 100% 50%;
background-repeat: no-repeat;
}
Thw idea is to divide the element in 2 halves, and then set in each a radial gradient that matches the corners position. The final posiotion of the gradients adjusted by hand.
Can de done responsively also.
demo
body {
width: 100%;
height: 100%;
background: url(http://placekitten.com/g/600/300);
}
.test {
position: absolute;
left: 50px;
top: 50px;
width: 400px;
height: 100px;
border-radius: 10px;
background-image: radial-gradient(circle at center -778px,
transparent 800px, rgba(255,0,0,0.4) 801px),
radial-gradient(circle at center 828px,
transparent 800px, rgba(255,0,0,0.4) 801px);
background-position: center top, center bottom;
background-size: 100% 50%, 100% 50%;
background-repeat: no-repeat;
}
<div class="test"></div>
An other approach with one div, 2 pseudo elements , border-radius and box-shadows :
div {
width: 70%; height: 150px;
margin: 20px auto;
position: relative;
border-radius: 10px;
overflow: hidden;
opacity: 0.5;
}
div:before,div:after {
content: '';
position: absolute;
height: 100%; width: 300%;
left: -100%;
border-radius: 100%;
box-shadow: 0px 0px 0px 140px red;
}
div:before {top: -146px;}
div:after {bottom: -146px;}
body {background: url('http://lorempixel.com/output/people-q-c-640-480-1.jpg');background-size: cover;}
<div></div>
Actually doing this using the CSS would almost be impossible, and you would be good if you just try out a simple PNG image, created using Photoshop, Google Images etc, and create the image exactly of this size and then use it inside the website.
You can add the transparency to the image while creating it by using the Adobe UI tools for editing the image, or you can use the alpha filter in CSS to set the transparency effect to it to display the element that is residing behind it (the effect that you want).