Weird glitch on card hover - html

my problem is I used some effect to make the card float using transform(translate) and some shadow and it works just fine, but whenever I come near the edges which is the end of the card width/height, it starts to glitch out with the animation, I believe I know why this is happening but I'm not quite sure how to fix it.. thanks!

just wanted to mentioned that the solution to that kind problems is wrapping the floating item with a wrapper and put the hover action on that wrapper not on the component itself.
so for example:
.card:hover{
box-shadow: -10px 0 10px 0;
transform: translate(10px, 10px);
}
Should turn into this:
.card-wrapper:hover .card{
box-shadow: -10px 0 10px 0;
transform: translate(10px, 10px);
}

Related

Pixel jump on CSS Rotate animation

So I've been trying this form challenge involving using no JS for interactive elements and I decided to make it 'fancy'. On click, the form drops and the arrow rotates; however, you can notice a jump in the pixels. I've viewed the box model several times and all of the pixels add up - I have no idea where this jump comes from. The only way to stop it is to make the arrow absolute, but it still isn't making sense why exactly that's happening if there's no shift in the layout. Any ideas?
https://codepen.io/mtbroomell/pen/zeMYdb
.ins {
display: block;
text-shadow:
20px 0 0 rgba(255,0,0,.6),
-20px 0 0 rgba(0,255,0,.6),
0 20px 0 rgba(0,0,255,.6);
font-size: 200px;
line-height:1;
color: transparent;
transform: rotate(0deg);
transition: .5s;
}
.form-toggle:checked ~ .ins-wrap .ins {
text-shadow:
0 0 0 rgba(0,0,0,.5),
0 0 0 rgba(0,0,0,.5),
0 0 0 rgba(0,0,0,.5);
transition: .5s;
transform: rotate(90deg);
}
^^^ The above is some of the sample styling as I'm not allowed to post CodePen without code.
I'm going to preface this by saying it seems quite smooth to me on a 2017 Macbook Pro using Chrome 72.
That said, almost all CSS animation jankiness on basic transforms can be improved by tricking the browser into using the GPU thread to render the element instead of the CPU. You can do that by forcing a 3d transform.
.animatedElement {
transform: translateZ(0);
}
Flickers and jumps in Chrome and FF can often be fixed with backface-visibility and perspective. Remember to use browser prefixes or a build tool that adds them.
.animatedElement {
backface-visibility: hidden;
perspective: 1000;
}
On their own, these don't do anything visually but they trick the browser renderer into doing some additional calculations.
I'm not sure what the native frame rate for css animations is but it's not fast enough. In animation the minimum frame rate needed to create the illusion of seamless movement is 24 fps. Using a requestanimationframe() would bump it up to 60 but then you'd need JS. I found this article on medium about CSS smooth animations. Might help? https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108

Remove right side of box shadow

I have found lots of posts similar to what I am asking and have been working away at this for hours and finally decided I should probably seek some exterior advice :).
I am trying to shadow 3 sides of an div using box-shadow I want the right side to be shadowless but cannot figure it out there are lots of posts on how to un-shadow the top but after countless efforts i could not even apply this.
Update:
clip-path is now (2020) supported in all major browsers.
Original Answer:
If you're willing to use experimental technology with only partial support, you could use the clip path property.
This will provide you with exactly the effect I believe you are after: a normal box shadow on the top, left and bottom edges and clean cut-off on the right edge. A lot of other SO solutions to this issue result in shadows that "dissipate" as they near the edge that is to have no shadow.
In your case you would use clip-path: inset(px px px px); where the pixel values are calculated from the edge in question (see below).
#container {
box-shadow: 0 0 5px rgba(0,0,0,0.8);
clip-path: inset(-5px 0px -5px -5px);
}
This will clip the div in question at:
5 pixels above the top edge (to include the shadow)
0 pixels from the right edge (to hide the shadow)
5 pixels below the bottom edge (to include the shadow)
5 pixels outside of the left edge (to include the shadow)
Note that no commas are required between pixel values.
The size of the div can be flexible.
I think you have 2 options:
1) Set your shadow's horizontal alignment to the left (negative values).
box-shadow: -30px 0px 10px 10px #888888;
Although this way you won't have the same shadow size in the top and bottom.
2) Use a div inside a div and apply shadow to each one.
.div1
{
box-shadow: -30px 10px 20px 10px #888888;
}
.div2
{
box-shadow: -30px -10px 20px 10px #888888;
}
Then you'll have to ajust the size for the one you want.
Here, have a jsfiddle: http://jsfiddle.net/EwgKF/19/
Use :after pseudo element : http://jsfiddle.net/romiguelangel/YCh6F/
HTML
<ul>
<li>item</li>
<li class="hello">item with after element</li>
</ul>
CSS
li {
display: block;
position: relative;
-webkit-box-shadow: 0 0 2px 1px gray
}
.hello:after{
display: block;
background-color: #f3f5f6;
width: 20px;
height: 38px;
content: " ";
position: absolute;
top: 0;
right: -10px
}
try using this example hasn't right side border:
JsBin Demo
NONE of the above responses will work.
I am assuming you are using bootstrap or a library that has box-shadow in the default buttons. Here is the solution:
.your-btn-class {
box-shadow: none /* Removes the default box-shadow */
box-shadow: -0.1rem 0 0 0.2rem rgba(134, 142, 150, 0.5); /* Add your own */
}
(if you don't remove the initial box-shadow, then when you tried to remove the offset from the right, the left side will be double the size of the top and bottom. That's why you have to remove it. If you are not sure what the default colors of the box-shadow of the library you are using. Just go to the source code and find-out, not hard at all)
If you just need to add box-shadow to you button or input on all side except the right do:
.your-btn-class {
box-shadow: -0.1rem 0 0 0.2rem rgba(134, 142, 150, 0.5);
}

Inverted CSS properties to change to RTL

To change a web page CSS to be RTL from LTR I have to set or invert the following CSS properties:
body{direction:rtl}
any float:left should be float:right and Vice versa
any padding or margin regarding left or right should be reversed
In addition any images should be inverted horizontally.
My question is: are there any more CSS properties should be changed?
text-align, background-position, border positions, left and right positions, basically anything and everything that has a horizontal property.
If you would like to do it by hand, you may go through a list of css properties such as this one, but personally I would look at using one of the online tools to get started.
CSSJanus is usually pretty good, though I am sure there are more out there if you google it.
Best of luck.
Are you just trying to use right-to-left writing, or are you trying to mirror the webpage?
body {
transform: scaleX(-1);
-ms-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
}
This will produce a mirror image of the webpage, but everything still works as it should (links are clickable in their new positions, for instance)
Another few properties...
box-shadow and text-shadow
/* multiply the first value ( horizontal offset of the shadow) by -1 */
`box-shadow: 5px -5px 5px 5px #abc;`
becomes
box-shadow: -5px -5px 5px 5px #abc;
and
text-shadow: 2px 2px #FF0000;
becomes
text-shadow: -2px 2px #FF0000;
2: border-radius
You need to be careful with this one as changing the values to achieve rtl works differently here
border-radius:25px 0px 0 25px;
becomes
border-radius:0 25px 25px 0; (not border-radius:25px 25px 0 0;)
Also, here are a couple of tips:
Horizontal Positions as Percentages
If you have a style like:
.style
{
position: absolute;
top: 22%;
left: 32%;
...
}
the left property would become 100-32=68%
2. background-position: Horzontal Value in pixels - eg:
background-position: -34px -85px;
In such cases you will have to work this out manually. (See this article)
As a reference:
Here's a great article about about converting a website to rtl
actually, the entire website http://rtl-this.com deals with rtl issues so can find lots of useful stuff there
You may try;
body {
-ms-transform: scaleX(-1);
-moz-transform: scaleX(-1); /* Gecko */
-o-transform: scaleX(-1); /* Operah */
-webkit-transform: scaleX(-1); /* webkit */
transform: scaleX(-1); /* standard */
filter: FlipH; /* IE 6/7/8 */
}
This will make a mirror effect. Here is a Live Demo.
You may try rtl if you want to flow letters from right to left and may use just text-align: right if you want to float items to right.
If you want text to begin from the right, you may try;
body{
unicode-bidi:bidi-override;
direction:rtl;
float: right;
}
Here is the Live Demo;

Rotated Header CSS3

Hello trusty StackOverflow users,
I am creating a sample webpage and was wondering how to elongate a rotated header that extends off the page in css3. I can provide more code if necessary. I would show a picture of what i am looking for but haven't accumulated enough rep (Just got enough rep to show a picture)... Thanks for any help in advance!
Here is what i want:
'h4' is the header i'm trying to elongate and here is what i have it doing now:
h4 {
color: #fbff00;
background-color: #858585;
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
float:left;
text-align:center;
-webkit-box-shadow: 0px 0px 10px #d1cfd1;
-moz-box-shadow: 0px 0px 10px #d1cfd1;
box-shadow: 0px 0px 10px #d1cfd1;
}
-Nate
Does this come close to what you want?
The idea is:
Give the header an explicit pixel width (to manage its "size")
Give it a negative left margin to make it hug the left edge (amount dependent on width given)
Give it a positive left padding to let the text be positioned naturally (also dependent on width given)

Non-linear shadow in HTML design

I'm trying to create a shadow that is wider in the top like in the picture below. It does not have to be very cross-browser, recent Firefox and WebKit based browser will do just fine. Does anyone have any good ideas on how to do this?
I haven't yet tried this technique, but CSS3 includes the border-image property, as described here. Perhaps if you developed your own shadow, you might be able to set it as the border (or use a wrapper element with such a border).
You may want to try fiddling with box-shadow and the transform property’s skew function. Maybe place a transparent div with box-shadow beneath the content element, e.g.:
#shadow{
-webkit-transform: skewY(-10deg);
-moz-transform: skewY(-10deg);
-o-transform: skewY(-10deg);
transform: skewY(-10deg);
-webkit-box-shadow: 4px;
-moz-box-shadow: 4px;
-o-box-shadow: 4px;
box-shadow: 4px;
}
I just wrote about something similar.
photoshop or gimp, which u like