I've tried approaching this situation from multiple angles, but since I seem to be coming up short, I feel like getting a second perspective would help me.
This is probably a VERY simple question, but I for the life of me cannot figure it out, nor find an answer.
In short, I'm making a recreation website (basing it off an old flash site). There's an image that slides down and then gets cut off, and I have no clue how to do the cut off section.
Here is a photo illustrating that I've created a div with a 553x553px radius with an overflow:hidden tag but the image still appears outside the perimeters.
Here is the code for the divs and slide animation (it starts in the middle of the box then is suppose to slide down, cutting off half the image when it's finished):
.flex {
display: flex;
justify-content: center;
align-items: center;
height: 775px;
}
.ctr {
display: absolute;
justify-content: center;
align-items: center;
height: 553px;
width: 553px;
overflow: hidden;
}
#slide {
position: absolute;
bottom: 100px;
width: 552px;
height: 343px;
overflow: hidden;
background-image: url('Intro/3.png');
-webkit-animation: slide 1s forwards;
animation: slide 1s forwards;
animation-delay: 1s;
-webkit-animation-delay: 1s;
}
#-webkit-keyframes slide {
100% { bottom: 0; }
}
#keyframes slide {
100% { bottom: 0; }
}
I don't feel like these are important to the problem, but since they're in the code, just to cover all my basis, here they are:
.bg {
position: absolute;
width: 795px;
left: 50%
margin-left: -300px;
}
.center {
height: 585px;
position: absolute;
}
And here is the code itself:
<body style="background-color:#421111;">
<div class = "flex">
<img src="bg.png" class="center">
<div class = "ctr">
<p id = "slide"></p>
</div>
<img src="108.png" class="bg">
</div>
(Just for clarity, "bg.png" is the purple inside, 108.png is the frame outline)
This is what I'm trying to achieve, based off the old site.
I know my image isn't far down enough compared to the original site, but I'm trying to fix this issue first. In any case, I'm simply wracking my brain here, since I don't understand how I can create a cutoff. I thought using overflow:hidden; would work, but it doesn't seem to...
Thank you in advance!
It seems that the image you are trying to cut off is outside of the div with the class="ctr".
This should fix your problem:
<body style="background-color:#421111;">
<div class = "flex">
<div class = "ctr">
<img src="bg.png" class="center">
<p id = "slide"></p>
</div>
<img src="108.png" class="bg">
</div>
An alternative would be to use either clip-path or a mask but I really wouldn´t recommend this.
However if you use these (clip-path or mask), make sure to apply it directly to the image itself.
If that also doesn´t work e.g. you don´t have browser support for this, try and do it with an animation or transition. An Example:
<style>
[cut]{
transition: width 1s, height 1s;
width: 600px;
height: 600px;
}
[cut]:hover{
transition: width 1s, height 1s;
width: 553px;
height: 553px;
}
</style>
Related
I've created a div-circle in which I want to hold (1) an image and (2) three div-waves (see image). My solution is working on desktop with Chrome, Firefox, Microsoft Edge, Internet Explorer. However, on my iPhone, the overflow doesn't work at all, either in safari or chrome. Here's an image of the difference in result. The relevant HTML looks like this:
<div class="circleContainer">
<div class="wavesContainer">
<div class="wave1" />
<div class="wave1" />
<div class="wave1" />
</div>
<img />
</div>
And the relevant CSS code looks like this:
.circleContainer {
border-radius: 300px;
height: 200px;
width: 200px;
background-color: #232323;
overflow: hidden;
position: relative;
border: #404040 solid 4px;
background-image: URL("pathToBackgroundImage");
background-size: 300px;
background-position: -20px;
transition: .5s;
opacity: 1;
}
.wavesContainer {
transition: .5s;
opacity: 1;
}
.wave1,
.wave2,
.wave3 {
position: absolute;
bottom: 0;
left: 0;
width: 400px;
}
.circleContainer img {
height: 220px;
top: 28px;
left: 18px;
opacity: 1;
transition: .5s;
position: absolute;
}
NOTE: The HTML and CSS are simplified, but I think the code above is all that is necessary to solve this issue.
Here is the code if you want to see it for your self: https://github.com/rrudling/rudling-tech/tree/main/src/components/pages/HomePage/ImageAnimation and here is the live demo: https://rudling-tech.web.app/
I am pretty experienced with CSS and still nothing I've tried work, so you guys are my last hope. I appreciate all the help I can get!
I solved this with a rather brute-force solution. Namely to create a rectangular shape (the red one in this image) with a transparent circle cut, as seen in this thread. I could then hard code some of the z-indices such that the rectangle only hides what I want it to. I also added a new circle with a border (the green one in this image) so I could keep the border around the circle.
It wasn't the solution I was hoping for, but it fully solved my problem!
I have a container that contains a div inside it. By clicking on that div square, it begins moving and ends up being outside the container.
My problem is that this inner block is being trimmed out really harsh while going beyond the borderline. How could this transition be done more smoothly using CSS means? I want to get an effect when this square disappearing becomes gentle for the eyes.
Maybe I'm supposed to use some kind of an image mask for the main container or a fade effect for the square. I'm not exactly sure how to achieve that behaviour.
Thank you in advance!
Codepan sandbox
.borderline {
position: relative;
text-align: center;
vertical-align: middle;
line-height: 150px;
width: 400px;
height: 150px;
overflow: hidden;
}
.square {
position: absolute;
width: 150px;
height: 150px;
background-color: #0087ff;
}
.square:focus {
transform: translateX(500px);
transition: all 2s;
}
<div class='borderline'>
<div class='square' tabindex="1">Click me</div>
</div>
maybe you could add an animation to your css with opacity like:
.square:focus {
transform: translateX(500px);
transition: all 2s;
animation-name: example;
animation-duration: 1s;
}
#keyframes example {
0% {opacity:1}
50% {opacity:1}
100% {opacity:0}
}
https://codepen.io/anon/pen/rzppON
first of all... I am totally new so i apologize if i forgot some important stuff that helps you to answer my Question. I´ll give my best.
This is my Code:
HTML:
<div class="slider">
<figure>
<div>
<img src="a.jpg">
</div>
<div>
<img src="b.jpg">
</div>
<div>
<img src="c.jpg">
</div>
</figure>
</div>
And the CSS:
#media screen and (max-width: 550px) {
.slider figure div{
width: 20%;
float: left;
}
.slider figure img{
min-height: 100%;
min-width: 100%;
max-height: 100%;
max-width: 100%;
}
.slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
animation-name: slidy;
animation-iteration-count: infinite;
animation-duration: 15s;
}
#keyframes slidy{
0%{
left: 0%;
}
31%{
left: 0%;
}
35%{
left: -100%;
}
66%{
left: -100%;
}
70%{
left: -200%;
}
95%{
left: -200%;
}
100%{
left: 0;
}
}
}
The CSS Slider Code works just the way i want for "normal" Screen sizes like the iPad-Pro and PC-Screen.
Obviously when the Screen gets too small (a Phone for example) the Images are going to look ugly because i resize them with the Browser Window.
So when the Screen gets too small i want to cut the Image on the left AND right side (NOT resizing with the Browser Window) so one is able to see the center of the Image and not a warped picture.
I tried solving my Problem with transform but i couldn't get it done because everything i tried ruined the slider.
Do you guys have any other idea?
UPDATE:
If anybody has the same Problem i had... here´s my solution.
I used background pictures. So i was able to use
#media
for different screen sizes (i just used the same picture with different sizes) and
background-position:center;
so the image gets cropped from the left and right side.
Thanks again for all your help!
.slider figure img{
min-width: 50px !important;
}
.slider figure {
text-align:center !important;
over-flow:hidden !important;
}
In that media query you are setting the width of the image to be 100%; So it will be resized with browser window. You can remove that and also center the image by adding text-align: center; to the parent. However once the browser window becomes smaller than the img there will be an overflow scroll.
.slider figure div{
width: 20%;
float: left;
text-align: center;
}
.slider figure img{
}
If you want this overflow image to be centered at all times, that would involve some javascript.
Goal
I would like to create an animated polygon which has parts of it trimmed/cut/masked out so the layer/element/background under it can be seen like this:
I created an animation with CSS3 transform. It is a rotating block that looks like its bottom parts are trimmed down while moving. I would like the trimmed part to show what is actually behind/under the rotating block (so its background).
What I tried
Illusion solution
For single color backgrounds, you can just add a shape on top of the animation so it have the illusion of being cut off.
This obviously doesn't work with pictures:
Limited solution
If you need to cut off the sides in with a rectangular shape, you can do that by a parent element, but this has obvious limitations. How to do something like this but with an arbitrary polygon? Can you mask in CSS?
body {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVQYV2NMqL7ty4ADMIIkF7SqbsYmP+gkAbAbGgsk/ddhAAAAAElFTkSuQmCC);
}
.center {
width: 200px;
margin: 0 auto;
padding-top: 50px;
height: 100px;
overflow: hidden;
}
.block {
height: 100px;
width: 100px;
background-color: red;
z-index: -1;
transition: transform 1000s 0s linear;
margin-left: 50px;
}
#keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotate {
animation: rotating 2s linear infinite;
}
<div class="center">
<div class="block rotate"></div>
</div>
to trigger z-index, you need to reset position to either: relative, fixed or absolute.
DEMO
#mask {
height: 100px;
width: 100px;
background-color: white;
z-index: 1;
position:relative;/* to trigger z-index */
}
To look like last example, background-position can be efficient.
DEMO box cut off from background
basicly:
body {
background: url('http://takeinsocialmedia.com/wp-content/uploads/2014/02/cute-kitten-images-photos-0223204033.jpg') fixed;
background-size:100vw auto;
background-repeat: no-repeat;
}
#mask {
height: 100px;
width: 100px;
background:url('http://takeinsocialmedia.com/wp-content/uploads/2014/02/cute-kitten-images-photos-0223204033.jpg') fixed;
background-size:100vw auto;
z-index: 1;
position:relative;
}
Unfortunately, this won't work with background-size:cover; since body and #mask have different size. background-size will need to be set via javaScript onload and onresize for #mask.
Have you tried to make the white box invisible with bigger z-index than the red box ?
Here you go: http://jsfiddle.net/QxG74/2/
Cute kitting version: http://jsfiddle.net/DpfW7/1/
Give the center div a height of 100 pixels and set the overflow to hidden. This way the rotating square get's trimmed at the bottom.
#center {
width: 200px;
height: 100px;
overflow: hidden;
}
I though this would be quite easy to understand but i am having trouble getting to grips with it.....
I would like some text on the screen to be animated.
I would like the text to start on the far left within the wrapper, move left until the text has finished displaying and then move right again all within the defined wrapper size (a bit like a bounce effect).
I would like the overflow text to be hidden.
I would like this on a continuous loop.
I would like for this to display in all browsers correctly.
Here is where i have got to:
<style type="text/css">
#wrapper {
width: 450px;
height: 20px;
background-color: #FF0004;
}
.marquee {
overflow: hidden;
white-space: nowrap;
animation: marquee 3s linear infinite;
-webkit-marquee-style: alternate;
}
#keyframes marquee {
0% { text-indent: 0% }
100% { text-indent: -130% }
}
</style>
<div id="wrapper" class="marquee">marquee information marquee information marquee information marquee information</div>
</div>
Any help as ever would be greatly appreciated
Justin.
The code you posted in your question has some typos, I think. There's only one div which has both the wrapper ID and the marquee class.
Following is some code that I think achieves the desired effect. I don't think it'll work using the text-indent as you tried in your question because a percentage in a text-indent doesn't refer to the width of the containing element. I did it using position: relative and a fixed-width marquee element.
Here's a demo: http://codepen.io/Ghodmode/pen/tEDbk
You'll have to add the necessary browser prefixes. The demo relies on prefix-free for that.
HTML:
<div id="wrapper">
<div class="marquee">
<p>Marquee</p>
</div>
</div>
CSS:
#wrapper {
width: 450px;
background-color: #ff0004;
position: relative;
height: 20px;
line-height: 20px;
margin: 1em auto;
overflow: hidden;
}
div.marquee {
position: absolute;
width: 7em;
background-color: #bfb;
text-align: center;
animation-name: marquee;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
p {
margin: 0;
}
#keyframes marquee {
from {
left: 100%;
}
to {
left: -7em;
}
}
For starters, css3 marquee is only supported by webkit browsers at the moment. It would probably be better to use another method for cross-browser comparability such as javascript or jQuery.
Click Here for a great jQuery scroller.
If you still want to use css, here is the syntax for marquee:
-webkit-marquee: [direction] [increment] [repetition] [style] [speed];
You will also want to set overflow-x to -webkit-marquee:
overflow-x: -webkit-marquee;
Here is a version of your code that will work in webkit browsers such as chrome and safari:
<style>
.wrapper{
width: 450px;
height: 20px;
background-color: #FF0004;
}
.marquee{
white-space:nowrap;
-webkit-marquee: right small infinite alternate fast;
overflow-x: -webkit-marquee;
}
</style>
<div class="wrapper">
<div class="marquee">
marquee information marquee information marquee information marquee information marquee information marquee information marquee information
</div>
</div>