I'm trying to skew one single corner of my div background as shown at the green checkmark in the image below:
In CSS3 I'm however unable to achieve that, skewing completely skews every corner. I just want to skew the bottom right corner to the left (say 25px) and maintain the perspective (as shown in the image above).
background-image: url('http://rtjansen.nl/images/stackoverflow.png');
-webkit-transform: skew(-45deg);
Fiddle: http://jsfiddle.net/3eX5j/
My code is:
div {
width: 300px;
height:80px;
margin-left:40px;
background-image: url('http://rtjansen.nl/images/stackoverflow.png');
-webkit-transform: skew(-45deg);
}
All you need to do is to think in 3d:
div {
width: 300px;
height:80px;
margin-left:40px;
background-image: url('http://rtjansen.nl/images/stackoverflow.png');
-webkit-transform: perspective(100px) rotateX(-25deg);
-webkit-transform-origin: left center;
-moz-transform: perspective(100px) rotateX(-25deg);
-moz-transform-origin: left center;
}
fiddle
explanation: you are rotating the element towards you in the upper part. But, the perspective (handled though the transform origin, it's a function !) makes the left hand rotation not to translate in an horizontal movement.
See how can be controlled what is the final size
fiddle with multiple options
Related
I've been in the process of making a customise-able tooltip for Vue using SCSS, allowing a developer to specify the colour and placement of the tooltip, which is constructed from a pair of ::before and ::after pseudo-elements in a button element of variable size. The ::before acts as the tooltip's arrow, and the ::after the tooltip content.
There's four placements I want to make possible: top, bottom, left and right. The following two groups of classes apply to the top and bottom positions:
.tooltip-placement-top, .triangle-placement-top {
left: 50%;
transform: translate(-50%, 0);
}
.tooltip-placement-top {
bottom: calc(100% + 10px); // 3. 100% here is parent height, key point
}
.triangle-placement-top {
bottom: calc(100%); // 4. no need add 5px, because transparent border also takes place
border-top-color: var(--tooltip-border-color);
}
.tooltip-placement-bottom, .triangle-placement-bottom {
left: 50%;
transform: translate(-50%, 0);
}
.tooltip-placement-bottom {
top: calc(100% + 10px); // 3. 100% here is parent height, key point
}
.triangle-placement-bottom {
top: calc(100%);
border-bottom-color: var(--tooltip-border-color);
}
and these result in a centred tooltip above and below the button like so:
The next stage is to position the left and right hand tooltip classes to sit aligned with the horizontal centre of the button, but conforming to the left or right edge of the button rather than the top and bottom, as seen here:
Both the button and tooltip are likely to appear as different sizes depending on their context of use, so unfortunately this needs to be a scalable solution (i.e. increasing the size of either button or tooltip won't cause them to fall out of alignment). My current attempts to adapt the code has made the tooltip appear at 100% of its own width right of the button, which as you can imagine looked terrible.
Sorry I don't have screen-caps to share, but I hope the drawings make it clear what I'm trying to achieve! If you need any additional code then I can supply it, but the question was getting quite bulky as it is.
Sorted it!
Here's what I have for my right and left classes:
.tooltip-placement-left, .triangle-placement-left {
top: 50%;
}
.tooltip-placement-left {
right: 100%;
transform-origin: right;
transform: translate(-12px, -50%);
}
.triangle-placement-left {
right: 100%;
transform: translate(8.3px, -50%);
}
.tooltip-placement-right, .triangle-placement-right {
top: 50%;
}
.tooltip-placement-right {
left: 100%;
transform-origin: left;
transform: translate(12px, -50%);
}
.triangle-placement-right {
left: 100%;
transform: translate(-8.3px, -50%);
}
the exact distances in pixels depend on the dimensions of your tooltip arrow, but this is what worked for me. Hope it helps someone else!
I am trying to achieve a CSS animation which scrolls a repeating background image infinitely. To make the scrolling as smooth as possible, I want the animation to cycle at a point when the image is in the exact same position it was when it started. And in order to make the animation look good regardless of any particular user's viewport size, I will be using an SVG graphic and I would like the background-size property to be set to 100% or the cover keyword.
My specified parameters do not work as expected. However, any other background-size value I choose does.
Why does my scrolling animation not work when background-size is 100%?
For a working example, see this code pen or use the following code:
HTML
<div id="element">
<h1>Scroll endlessly I say!</h1>
</div>
CSS
#keyframes scroll {
0% { background-position: 0% center; }
100% { background-position: 100% center; }
}
#element{
padding: 10px;
color: white;
background: black;
text-shadow: 0 0 4px black;
animation: scroll 8s linear infinite;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/3/30/Vector-based_example.svg");
background-repeat: repeat;
/* Works:
========================= */
background-size: 50%;
/*background-size: 20%;*/
/*background-size: 200%;*/
/*background-size: 100px;*/
/*background-size: 10rem;*/
/* Does NOT work:
========================= */
/*background-size: 100%;*/
}
Although I could use another solution like this one by CSS-Tricks, I like mine better because it is more efficient, since I do not have use a large, redundant graphic.
As per the w3c spec:
'background-position'
percentage
A percentage X aligns the point X% across (for horizontal) or down (for vertical) the image with the point X% across (for horizontal) or down (for vertical) the element's padding box. For example, with a value pair of '0% 0%',the upper left corner of the image is aligned with the upper left corner of the padding box. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of the padding box. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding box.
This means that the percentage that you set in the background-position specifies which point of the image should match with the same point in the element.
BUT when the size of the container and the image are equals, all the points of the image match the point of the container, any percentage in the background-position has the same result (that is, the image fitting the container, centered). So, then the background won't move !
If you watch the animation, the image scrolls based upon the right edge of the image(svg), from the starting point (background-size) to 100%, or until the right edge of the image reaches the right edge of the container. Then the animation repeats.
If the starting point of the animation is 100% (or cover) you are placing the right edge of the image at the right edge of the container. So, the animation is visibly non-existent. Basically, the image is repeating in the same position.
This is a bit difficult to see based upon the image you are using. But if you use an image with a clear right and left edge, you can see it easier:
http://codepen.io/anon/pen/wMpYjN?editors=110
Watch the right edge of the image.
It appears it won't work using percent (as vals so nicely answered), and I can't yet say why.
If to change to pixel it does work though, as you can see in this sample, so in combination with media query one might be able to "fill" the width anyway.
#keyframes scroll {
0% { background-position: 0px center; }
100% { background-position: 600px center; }
}
#element{
width: 600px;
padding: 10px;
color: white;
text-shadow: 0 0 4px black;
animation: scroll 8s linear infinite;
background: black url("https://upload.wikimedia.org/wikipedia/commons/3/30/Vector-based_example.svg") left center repeat;
background-size: 600px;
}
<div id="element">
<h1>Scroll endlessly I say!</h1>
</div>
As a workaround, which will do exactly what a percentage would do with the original set up, you could use pseudo element.
Set the pseudo to 200% width, the background size to 50% and background repeat to repeat, and it will make the visible part equal to 100% of your original image, and then animate its left value.
(and IMHO, it will be better than the one by CSS-Tricks, efficient and without the need of large, redundant graphics)
#keyframes scroll {
0% { left: -100%; }
100% { left: 0%; }
}
#element{
position: relative;
padding: 10px;
color: white;
background: black;
text-shadow: 0 0 4px black;
overflow: hidden;
}
#element:before {
content: " ";
position: absolute;
top: 0;
height: 100%;
width: 200%;
animation: scroll 8s linear infinite;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/3/30/Vector-based_example.svg");
background-position: left center;
background-repeat: repeat;
background-size: 50%;
z-index: 1;
}
h1 {
position: relative;
z-index: 2;
}
<div id="element">
<h1>Scroll endlessly I say!</h1>
</div>
Your animation won't work when background size is 100% because of background-repeat: repeat; property which cause your image to repeat it self, as your image size is 100% image actually repeats it self, we are just unable to see it. You may check it if you set your background size to 98%.
Because you are attempting to reposition the background image based on a distance between 2 points that are in the same place.
From the specification:
A percentage X aligns the point X% across (for horizontal) or down (for vertical) the image with the point X% across (for horizontal) or down (for vertical) the element's padding box.
This means that to decide where to position a background image:
A point the percent you defined across or down the element is picked.
A point the percent you defined across or down the image is picked.
The image is moved, relative to the point picked on it, to the point picked on the element.
Let's take for example an arbitrary situation where you want to position a background image inside of an element. There are two broad situations which exist:
the image and the element are the same size, or
the image and the element are a different size.
In the former situation, it does not matter what percentage you chose. The distance between a point that percent from the edge of the image will be exactly the same as the distance between a point that percent from the edge of the element because they are both the same size (X% of Y is X% of Y). That means that no noticeable repositioning can be done because moving an image to where it already is is just like not moving it at all.
In the latter situation, however, the distance between a point X% from the edge of the image will always be different than the distance between a point X% from the edge of the element, so a move can be made.
I made a page consisting of several sections with different background colors and a transparent background image with noise (transparent "PNG file"). At the top of each section I placed a triangular shaped div with the color of the section above. I would also like to add the noise image to the triangles but I can't figure out how.
I've tried the border-image attribute in "CSS" but that just erases the whole triangular shape for some reason..
I would be grateful if you could help me out. "This" is the site I'm working on.
You can use a rotated pseudo element :
Generic solution:
FIDDLE
HTML:
<div></div>
CSS:
div {
width:200px;
height:200px;
overflow:hidden;
}
div:before {
content:"";
display:block;
width:70%;
height:70%;
background-image: url(/*Path to your image*/);
transform: rotate(-45deg);
transform-origin:0 0;
-ms-transform: rotate(-45deg);
-ms-transform-origin:0 0;
-webkit-transform: rotate(-45deg);
-webkit-transform-origin:0 0;
}
EDIT: Your use case
In your use case, you can consider just rotating .arrow-down by 45deg and set overflow:hidden; on the sections. (you also need to remove the existing borders on .arrow-down and give it desired dimensions)
I have some images which scroll nicely in a keyframes
#-webkit-keyframes headImage /* Safari and Chrome */
{
0% {background:url(../images/homeBackground1.jpg) no-repeat left top #D8E3E9;}
10% {background:url(../images/homeBackground2.jpg) no-repeat left top #D8E3E9;}
30% {background:url(../images/homeBackground3.jpg) no-repeat left top #D8E3E9;}
50% {background:url(../images/homeBackground4.jpg) no-repeat left top #D8E3E9;}
70% {background:url(../images/homeBackground5.jpg) no-repeat left top #D8E3E9;}
90% {background:url(../images/homeBackground1.jpg) no-repeat left top #D8E3E9;}
}
However I want to make one of these images a clickable link, so for example i want homeBackground1.jpg to link to google.co.uk when it is visible but the others wont link anywhere when they are on display.
is there a way of doing this ?
Thanks
To expand a bit on this ,
the code to insert it into html is simply a
<section id="journey"> </section>
and CSS
#journey {
height:400px;
/* border-bottom: 5px solid #E64097;
border-top: 5px solid #E64097;*/
background: url(../images/homeBackground1.jpg) no-repeat left top #D8E3E9;
-moz-animation:headImage 60s infinite; /* Firefox */
-webkit-animation:headImage 60s infinite; /* Safari and Chrome */
}
You need to create a sprite. So all of your images are joined in one large image but the user only can only see part of the image.
Then you just change the background-position using the key frames.
Here is a good JSFIDDLE DEMO
In the CSS you can use from, to or % as a time scale if you know the number of key frames that you need to use.
I have one problem regarding rotating the <div> in html page. I have used -
-moz-transform: rotate(90deg)
But this property is rotating the <div> along some axis.(couldnt get that). But i want to rotate the <div> along its bottom side.(here, my div is a square-box). Is it possible?
Thanks.
sounds like transform-origin is what you're looking for.
The transform-origin CSS property lets you modify the origin for transformations of an element. For example, the transform-origin of the rotate() function is the centre of rotation. (This property is applied by first translating the element by the negated value of the property, then applying the element's transform, then translating by the property value.)
so you should end up with something like this:
transform: rotate(90deg);
transform-origin: center bottom;
/*transform-origin: 50% 100%; alternative using percentages */
you can use this properties
transform: rotate(90deg);
transform-origin: center bottom;
You can give X% and Y% as tranform-origin
For example this will gone rotate div along bottom-left corner
transform: rotate(-10deg);
transform-origin: 0% 100%;
This one gone rotate along top right corner
transform: rotate(-10deg);
transform-origin: 100% 0%;
This one gone rotate along bottom right corner
transform: rotate(-10deg);
transform-origin: 100% 100%;
and so on ...by default its 50%,50%
transform: rotate(-10deg);
transform-origin: 50% 50%;