I've the following problem: I want headlines with background and a box-shadow. Now, as firefox is not rendering transform rotate like a charm, I'm looking for an alternative.
h2 {
padding: 1rem 2rem;
display: inline-block;
color: #FFF;
background-color: #006AB3;
transform: translateZ(1px) rotate(-3deg);
transform-origin: 50% 50%;
margin-bottom: rem-calc(50px);
outline: 1px solid transparent;
z-index:1;
&:after{
content: "";
width: 100%;
height: 100%;
position: absolute;
background: rgba(0,0,0,.3);
right:-10px;
bottom:-10px;
outline: 1px solid transparent;
z-index: -1;
}
}
https://jsfiddle.net/gw64ove4/
Why is the pseudo after Element not stacked behind the headline? Are there any other workarounds for anti aliasing when using box-shadow on a rotated element?
Thanks
Try adding a span in H2 tag:
<h2>
<span>TEXT</span>
</h2>
and CSS for span like this:
span {display: block; position: relative; z-index: 10;}
https://jsfiddle.net/zLna2xLa/
Also you can try using -moz- prefixes
EG::
-moz-transform: translateZ(1px) rotate(-3deg);
-moz-transform-origin: 50% 50%;
Related
I'm trying to rotate my shadow only, but I rotate my object with it. How do I only rotate the shadow
text-shadow: 20px 20px 1px red;
transform: rotate(180deg);
}
You can't rotate text-shadow directly but you can use below method to get your expected result.
Using this method now you can also apply other CSS to your text shadow text. For that you have to get same content text in title also.
.text-rotate {
position: relative;
line-height: initial;
font-size: 30px;
}
.text-rotate:after {
content: attr(title);
text-shadow: 0px 0px 1px red;
position: absolute;
transform: rotate(180deg);
color: transparent;
top: 100%;
left: 0px;
}
<div title="Test Text" class="text-rotate">Test Text</div>
I have a hover animation on a link. A line is drawn below the text. It's 2px in height. the problem is that it starts with one height and continues with another height.
Why is it doing that? It does not need to calculate anything because 2px is a fixed number.
How can I get around it?
The animated GIF is taken in Chrome.
:root {
--cp-500: #c53e3a;
--cp-700: #8d1d2d;
--cp-800: #721228;
}
.action a {
background: linear-gradient(45deg, var(--cp-500), var(--cp-800));
color: #fff;
border-radius: 100vh;
padding: .5rem 2rem;
display: inline-block;
border: 1px solid var(--cp-700);
transition: box-shadow 150ms ease-in;
box-shadow: 0 1.25rem 1rem -1rem var(--cp-800);
z-index: 1;
text-decoration: none;
position: relative;
}
.action a:hover {
box-shadow: 0 1rem 1rem -1rem var(--cp-800);
background: var(--cp-700);
}
.action a:before {
content: '';
position: absolute;
bottom: .5rem;
left: 2rem;
width: calc(100% - 4rem);
height: 2px;
background: var(--cp-500);
transform: scaleX(0);
transform-origin: top right;
transition: transform 1000ms ease-in;
z-index: -1;
}
.action a:hover:before {
transform-origin: top left;
transform: scaleX(1);
}
<div class="action">
Test
</div>
I was also able to reproduce your issue. As AlexioVay mentioned above, you should add a scaleY also. But it's not enough, you should set the scaleY to be almost the same as scaleX. Now the line has the same height from the start till the end. See this code: https://jsfiddle.net/q236tmuk/30/
I added the following change to your css:
.action a:hover:before {
transform-origin: top left;
transform: scaleX(1) scaleY(0.99);
}
The following scenario will also work well:
.action a:hover:before {
transform-origin: top left;
transform: scaleX(1) scaleY(1.01);
}
On hover the line height is the same from the start till the end. Don't use the same value for scaleX and scaleY, because that way the height will change after the transform event. It's a browser issue. The only solution is to use a small different value for scaleY.
You mentioned that this behaviour occurs when your browser size is 125%. I could also reproduce this behaviour and tested a lot, including attributes like height and max-height which didn't affect anything.
It seems that scaleX is the main issue and because you use an increased browser size, this behaviour is only visible in this specific browser size (or a bigger browser size than 125%). So it may also behave like this at 100%, but can't be seen since 2px is too small to see it with the human eye is my guess.
Therefore I have also added scaleY(1.2) to transform: on .action a:hover:before which prevents this jittery behaviour.
:root {
--cp-500: #c53e3a;
--cp-700: #8d1d2d;
--cp-800: #721228;
}
.action a {
background: linear-gradient(45deg, var(--cp-500), var(--cp-800));
color: #fff;
border-radius: 100vh;
padding: .5rem 2rem;
display: inline-block;
border: 1px solid var(--cp-700);
transition: box-shadow 150ms ease-in;
box-shadow: 0 1.25rem 1rem -1rem var(--cp-800);
z-index: 1;
text-decoration: none;
position: relative;
}
.action a:hover {
box-shadow: 0 1rem 1rem -1rem var(--cp-800);
background: var(--cp-700);
}
.action a:before {
content: '';
position: absolute;
bottom: .5rem;
left: 2rem;
width: calc(100% - 4rem);
height: 2px;
background: var(--cp-500);
transform: scaleX(0);
transform-origin: top right;
transition: transform 1000ms ease-in;
z-index: -1;
}
.action a:hover:before {
transform-origin: top left;
transform: scaleX(1) scaleY(1.2);
}
<div class="action">
Test
</div>
I need to style a horizontal line <hr> like the picture attached. Is there any way to do this with pure css that would also work in IE8?
EDIT: Sorry, I missed your IE8 requirement...this probably won't work there. I apologize. I don't have access to it to check.
You can use the :before and create a box, rotate it, apply some border, absolutely position it and voila, there you have it:
http://jsfiddle.net/v7y1bp9s/1/
HTML:
<div class="container">
<hr class="line"></hr>
</div>
CSS:
.container {
float: left;
width: 100%;
height: 50px;
background-color: #1978a4;
line-height: 50px;
}
hr.line {
border-color: #fff;
position: relative;
}
hr.line:before {
content: '';
height: 10px;
width: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
left: 50px;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
background-color: #1978a4;
top: -5px;
}
I want to create an html element, e.g. a div, which is styled as follows:
semi-transparent background-color
rounded borders on all edges
left side of the div draws a straight line
right side of the div draws a skewed line
I'd like to create this in CSS only and wonder if this is possible. So far I came up with two different approaches which have their own drawbacks and are not fully sufficient. You can have a look at those in this fiddle:
https://jsfiddle.net/n4tecna3/
.one-side-skew-1,
.one-side-skew-2 {
font-size: 20px;
padding: 2%;
background-color: rgba(220, 50, 255, 0.6);
position: relative;
display: block;
border-radius: 4px;
z-index: 2;
color: #ffffff;
margin-top: 30px;
}
.one-side-skew-2 {
border-top-right-radius: 0px;
}
.one-side-skew-1:after {
height: 100%;
width: 20%;
position: absolute;
top: 0;
left: 85%;
display: inline-block;
content: "";
background-color: rgba(220, 50, 255, 0.6);
-moz-transform: skewX(-10deg);
-webkit-transform: skewX(-10deg);
-ms-transform: skewX(-10deg);
-o-transform: skewX(-10deg);
transform: skewX(-10deg);
z-index: -1;
border-radius: 4px;
}
.one-side-skew-2:after {
border-top: 1em solid rgba(220, 50, 255, 0.6);
border-left: 0.25em solid rgba(220, 50, 255, 0.6);
border-right: 0.25em solid transparent;
border-bottom: 1em solid transparent;
border-top-right-radius: 4px;
left: 100%;
display: inline-block;
position: absolute;
content: "";
top: 0;
}
.container {
width: 500px;
}
<div class="container">
<div class="one-side-skew-1">
<span class="inner-text">One Side Skew With Pseudo Element Skewed</span>
</div>
<div class="one-side-skew-2">
<span class="inner-text">One Side Skew With Pseudo Element Border</span>
</div>
</div>
Approach 1 .one-side-skew-1 uses a div element with round borders and a skewed, round-bordered pseudo element to create a one-side skewed element in sum. This works great as long as the background-color is solid. For semi-transparent backgrounds you will see an ugly color overlap where the element and its pseudo-element meet.
Approach 2 .one-side-skew2 uses a div element with a pseudo behind it that consists of borders only. It's somewhat hacky but gets close to my desired result. Still, the right does not look nearly as smooth as in the first approach.
Does someone else have a good solution for this problem in CSS only? Or will I have to use a fallback solution with a semi-transparent background-image to solve this?
You can use a pseudo element for all the background and hide the overflowing parts with the overflow property on the element.
This will prevent element and pseudo element background overlapping and allow semi transparent backgrounds:
div {
position: relative;
width: 250px;
font-size: 20px;
border-radius: 4px;
overflow: hidden;
color: #fff;
padding: 1% 2%;
}
div:before {
content: '';
position: absolute;
top: 0; right: 0;
width: 100%; height: 100%;
background: rgba(220, 50, 255, 0.6);
-webkit-transform-origin:100% 0;
-ms-transform-origin:100% 0;
transform-origin: 100% 0;
-webkit-transform: skewX(-10deg);
-ms-transform: skewX(-10deg);
transform: skewX(-10deg);
border-radius: 4px 4px 6px;
z-index: -1;
}
/** FOR THE DEMO **/body {background: url('http://lorempixel.com/output/people-q-g-640-480-3.jpg');background-size: cover;}
<div>content</div>
I want to achieve the right arrow effect using css3, i tried a bunch of times already but no luck.
http://jsfiddle.net/ffCDw/
.menu li {
list-style-type: none;
display:inline;
}
.menu li a {
padding: 0 20px;
background: green;
color: #fff;
}
I had the same problem and the approach with the borders wasn't quite satisfying enough for me, especially if you want to use :hover...
HTML
I put a span inside the div, this is for the arrow only.
<div class="arrow">
I am the first arrow
<span></span>
<div>
CSS
span get's position:absolute;
Here the span:after is positioned and transformed (-45deg), so it points to the right.
And finally, by putting span overflow:hidden, there is only the part left visible that points to the right...
span {
content: "";
position: absolute;
top: 0;
right: -1.625em;
width: 2em;
height: 2.5em;
overflow: hidden;
z-index: 10;
}
span:after {
content: "";
position: absolute;
top: -3px;
left: -1em;
width: 2em;
height: 2.5em;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
border: 1px solid #777;
background: #60bee7;
}
I hope this is understandable. The only thing left is to style your div and span:after and if you want define the :hover states aswell on these elements.
Please note not to give the span any background-color
And here is a working example:
http://jsfiddle.net/marczking/PyKFT/
If you want to add an arrow to the right edge of these elements:
Updated fiddle
We're using CSS to add a triangle element after your anchor tag with this block:
.menu li a:after{
height:0;
width: 0;
top: 0;
left: 100%;
position:absolute;
content: ' ';
border-left: solid 5px green;
border-top: solid 9px transparent;
border-bottom: solid 9px transparent;
}
And then increasing the left margin of your li elements to account for the additional space these take up. You can play with the length of the triangle by increasing the pixel size of the border-left property, but be sure to increase the margin of the li accordingly.