I want to clip image from left and right side with some degree of angle. i have used crip css. but in that i am able to clip in 90 degree only
img
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}
is it possible to clip image by 30 degre or more on left and right side.
You can use a css mask, with an image of a rectangle, or with some gradient which looks like a rectangle.
But the more performant way would be to use a wrapping Div, and simply rotate the image inside the div using transform while giving overflow:hidden to your div. something like that http://jsfiddle.net/gK3XL/
img {
-webkit-transform : rotate(45deg);
margin: -30px;
}
div {
-webkit-transform : rotate(-45deg);
width: 100px;
height: 100px;
overflow: hidden;
}
What about matrix transforms?
HTML:
<div class="container">
<img src="http://dwnloadwallpapers.com/wp-content/uploads/2014/05/Final-Fantasy-Rikku.jpg">
</div>
CSS:
body {
background: black;
}
.container {
width: 540px;
margin: 0 auto;
overflow: hidden;
transform: matrix(1, 0, 0.6, 1, 0, 0);
}
.container img {
transform: matrix(1, 0, -0.6, 1, 0, 0);
}
http://codepen.io/raiden-dev/pen/fnjHb?editors=110
Related
I am trying to recreate this:
But I have not been able to do so. I tried with adding a :before on the img but that doesnt work. How would you go on about making this. It has to be responsive in the way that the background doesnt get bigger than the image.
SEO is not important so background-image or whatever is fine with me too.
WRITTEN IN SCSS - CHANGE IN HTML IS OK
UPDATED CODE TO ROB's ANSWER
This is the code I have so far
.imgbox {
padding: 5%;
position: relative;
height: auto;
.backdrop {
position: relative;
min-width: 100px;
min-height: 100px;
div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
background: rgb(208, 0, 0);
background: linear-gradient(
90deg,
rgba(208, 0, 0, 1) 0%,
rgba(149, 0, 0, 1) 100%
);
}
transform: translateX(-5px) translateY(5px);
}
.img {
width: 100%;
height: auto;
transform: translateX(5px) translateY(-5px);
}
}
<div className="imgbox">
<div className="backdrop">
<div></div>
</div>
<img
className="img"
src={'https://source.unsplash.com/400x250'}
alt="test"
>
</div>
It's simple with a box shadow.
The paddings in the parent are there to prevent it from cropping the shadow.
.imgbox {
padding: 0 0 30px 30px;
}
.imgbox .img {
display: inline-block;
box-shadow: -30px 30px 0 rgb(208, 0, 0);
}
<div class="imgbox">
<img
class="img"
src='https://source.unsplash.com/400x250'
alt="test"
/>
</div>
Very easy to get the gradient with a pseudo-element:
.image-container::after {
content:'';
position: absolute;
z-index:-1;
bottom:-24px;
left:-24px;
width:100%;
height:100%;
background: linear-gradient(red, firebrick);
}
You can change the gradient and offset using background, left and bottom respectively. I'm not sure if there is a second gradient as well, to the top right? If so, you pair this with a ::before to get a second background, and play around the with z-index to get the ordering correct.
Just remember - for an absolute positioned pseudo element to work, you'll need to set position:relative on the parent container, and content:'';
Codepen here.
I am currently working on an "overlay pop up", which appears when I click a certain button.
It works quite well, however I struggle with the opacity
My main overlay div appears over the whole site and I gave it an opacity, so that you can see slightly the page in the background.
Over the overlay I put a content div, which shows the actual content (in that case a password changing request).
Anyway, I don't want the content box being transparent, but no matter what I try (z-index:10, opacity:1, position:relative etc.) it doesn't work.
It is still transparent, because I set up the opacity in the overlay div.
Here is the code:
CSS:
.changePasswordOverlay
{
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color:#fafafa;
opacity: 0.9;
overflow-y: hidden;
transition: 1s;
}
.passwordOverlayContent {
margin-left:40%;
margin-top:15%;
font-family:'source_sans_proregular';
font-size:15px;
position:relative;
}
HTML:
<div class="changePasswordOverlay">
<div class='passwordOverlayContent'>
.
.
.
</div>
</div>
you need to use rgba in background instead of opacity, because opacity has inheritance properties therefore children will get opacity as well
Note that rgba, stands for Red/Green/Blue/Alpha. and that's the alpha value that will work as your "opacity" value. The greater the alpha value the more opaque will be.
.changePasswordOverlay {
height: 100%; /* changed for demo */
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, .5);
overflow-y: hidden;
transition: 1s;
}
.passwordOverlayContent {
margin-left: 40%;
margin-top: 15%;
font-family: 'source_sans_proregular';
font-size: 15px;
position: relative;
color:white /* demo */
}
<div class="changePasswordOverlay">
<div class='passwordOverlayContent'>
text
</div>
</div>
Opacity applied the div and its children so .passwordOverlayContent will also have the same opacity, use background rgba instead of opacity
background-color: rgba(0, 0, 0, .9);
changed class :
.changePasswordOverlay
{
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, .9);
overflow-y: hidden;
transition: 1s;
}
move the passwordOverlayContent container after changePasswordOverlay (instead of inside), and change your css to position:fixed to make it "opacity independant"
I have two right triangle images that I want to put together like this (solid colors only for example):
I can think of a couple of ways to do this:
Divs with background images, and positioning them on top of each
other
A similar approach to the above, but with images instead of divs
The problem comes from the fact that I want to be able to hover (and click) on each individual triangle and have it change it's state (such as change color on hover).
Both of my above solutions create the problem where one is on top of the other, and I cannot click or hover over the other. I was thinking of doing this with CSS shapes, but those usually involve borders and I don't know of a way to overlay the image on those.
I need to be able to accomplish this with just CSS and HTML, and ideally without an image map.
Is this what you want?
Edit: I didn't notice there was another answer with similar approach, had the answer window opened for awhile, sorry.
.container {
width: 100px;
height: 100px;
overflow: hidden;
position: relative;
}
.triangle {
position: absolute;
width: 100px;
height: 100px;
top: 0;
left: 0;
overflow: hidden;
}
.triangle:hover {
border: 1px solid red;
}
.top_right {
transform: skewX(45deg);
transform-origin: 0 0;
}
.top_right img{
transform: skewX(-45deg);
transform-origin: 0 0;
}
.bottom_left {
transform: skewX(45deg);
transform-origin: 0 100%;
}
.bottom_left img{
transform: skewX(-45deg);
transform-origin: 0 100%;
}
<div class="container">
<div class="triangle top_right">
<img src="http://www.avatarsdb.com/avatars/spongebob_happy.jpg">
</div>
<div class="triangle bottom_left">
<img src="http://www.avatarsdb.com/avatars/say_cheese.jpg">
</div>
</div>
Another option is to use css skew:
your html:
<div class="img-container">
<img src="http://www.natureasia.com/common/img/splash/thailand.jpg" />
</div>
<div class="img-container">
<img src="http://www.worddive.com/blog/wp-content/uploads/2014/06/nature-and-environment-course.jpg"/>
</div>
The css:
.img-container, .img-container img { width: 100%; height: 100%; }
.img-container {
overflow: hidden;
position: absolute;
transform: skewX(-68deg);
}
.img-container:first-child {
left: -.25em;
transform-origin: 100% 0;
}
.img-container:last-child {
right: -.25em;
transform-origin: 0 100%;
}
.img-container img {
transform: skewX(68deg);
transform-origin: inherit;
}
It will probably work better with square images, however you can play around with the skew until it looks right.
Check out this Fiddle or rotating the other way
Again, not 100% sure on browser compatibility tho. If you need to guarantee that all browsers render properly you might be best of using images.
I have the following CSS transforms and I am trying to understand the relationship between them so I can figure out how to compensate for one of them.
Here is my code:
.background {
height: 720px;
position: absolute;
width: 1280px;
background-color: rgb(205, 163, 163);
}
.text {
transform: matrix(0, 1, -1, 0, 700, 206.66071428571);
width: 306px;
position: absolute;
height: 120px;
font-size: 120px;
color: rgb(255, 0, 0);
}
.top-left {
transform-origin: top left;
}
.center-center {
transform-origin: center center 0px;
}
<div>
<div class="background"></div>
<div class="top-left text">
<p>TEXT</p>
</div>
<div class="center-center text">
<p>TEXT</p>
</div>
</div>
transforms-origin: center center;
and
transform-origin: top left;
Are the CSS properties in question.
You will see two pieces of text, both with the same properties, except for their transform-origin.
I am trying to understand why the text with the "center center" origin is being placed where it is. I would assume the central point of its "bounding box" would be at the same spot of the top left corner of the bounding box of the other piece of text?
I am looking to figure out the relationship between the two so I can potentially shift the text with the "center center" origin to be in place of the other text.
To make it easier to understand, I have changed your matrix for an aproximate composite transform. You have a translate and a rotate 90 deg. And I have reduced the translate amount so that it fits more easily in the snippet. But the math remains unchanged.
Now notice that the center of transforms (wait for the animation to take place) are not where you might expect, the divs are not in the same place than the ps. I have added a border to the div so that it is easier to see.
About the translation involved, you are rotating around the center of the div. or around the top left corner. The distance between those points is half the width of the div, and half the height:
153px 60px
Now, when you rotate that 90deg, the equivalent translation is the sum and the rest of those values:
213px 93px
Hover on the snippet to see those values applied, and the 2 ps aligned
.background {
height: 99%;
position: absolute;
width: 100%;
background-color: rgb(205, 163, 163);
}
.text {
transform: translate(300px, 100px) rotate(90deg);
width: 306px;
position: absolute;
height: 120px;
font-size: 120px;
color: rgb(255, 0, 0);
border: solid 1px black;
animation: show 4s infinite;
}
.top-left {
transform-origin: top left;
}
.center-center {
transform-origin: center center 0px;
}
#keyframes show {
0% { transform: translate(300px, 100px) rotate(90deg);}
5% { transform: translate(300px, 100px) rotate(90deg);}
100% { transform: translate(300px, 100px) rotate(0deg);}
}
body:hover .text {
animation: none;
}
body:hover .center-center p {
transform: translate(93px, 213px);
}
p {transition: 1s; }
<div>
<div class="background"></div>
<div class="top-left text">
<p>TEXT</p>
</div>
<div class="center-center text">
<p>TEXT</p>
</div>
</div>
To understand that in the general case. Changing the transform origin is equivalent, in a mathematical sense, to do a translate (from one origin to the other), apply the transform, and do the inverse of the translate.
This translate, since you are moving from center center to top left, is half the width, half the height.
when you apply to this value the matrix, the uniform terms are negligible, and you end with x2 = x1 * a00 + y1 * a01 and y2 = x1 * a10 + y1 * a11.
The final movement is that last calculus minus the first translate. Just check that my original answer is the special case for the matrix provided in your question
The transform-origin property allows you to change the position of transformed elements.
2D transformations can change the x- and y-axis of an element. 3D transformations can also change the z-axis of an element.
to better understnad. Here is the live demo from W3schools.com :http://www.w3schools.com/cssref/trycss3_transform-origin_inuse.htm
Example CSS with browser prefixes.
CSS
div {
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin: 20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
-webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */
transform: rotate(45deg);
transform-origin: 20% 40%;
}
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;
}