I was testing rotation on div. I noticed that when i rotate div with CSS, it produces aliasing which looks awkward. Here is the Fiddle:
Fiddle
CSS:
.alaised {
width:200px;
height:200px;
border:2px solid green;
transform:rotate(-8deg);
-webkit-transform:rotate(-8deg);
-moz-transform:rotate(-8deg);
margin:50px;
}
In the fiddle, when div is rotated it is aliased and on hover when not rotated, anti-aliased.
How can I remove this behaviour? I tried searching on web and tried by adding shadows of small width with same color but shadow of it is also aliased.
Note: This Behaviour is not detected on higher resolution screens. But on 1024x768 and less which are the most common resolutions these days suffer from this.
just found an approach: http://jsfiddle.net/zGAvZ/1/ (tried on fx 18)
relevant CSS
.aliased {
width:200px;
height:200px;
margin:50px;
}
.aliased:after {
content: "";
display: block;
width: 100%;
height: 100%;
border:2px solid green;
transform:rotate(-8deg);
-webkit-transform:rotate(-8deg);
-moz-transform:rotate(-8deg);
}
.aliased:hover {
transform:rotate(8deg);
-webkit-transform:rotate(8deg);
-moz-transform:rotate(8deg);
}
The idea is to rotate the :after pseudoelement on normal state and make an opposite rotation on the element itself on hover. On Firefox 18 the square looks nice even after the hover state
Related
Demonstration Link: https://codepen.io/jodriscoll/pen/wRpQOw
I'm working on a "sidewards blind-like" animation behavior, where when a user hovers over an object (anchor), it expands the object (anchor) in width and creates a perception of showing more of the objects contain within (think of a clipping mask of sorts).
Initially the video/image object is styled in a way to prevent it from moving 1:1 with the "clipping mask" (anchor wrapping the video/image). Meaning, it is already offset to the position it should be when the user hovers over the anchor.
Both the image and the video are initially styled to fill the entirety of the anchor AND the gutter gaps; this helps when animating to create the perception that we're just showing more of the photo, no actually resizing it and causing it to move on screen (sorry, that might be confusing...):
left: -24px; // the width of each gutter gap
width: calc(100% + 48px); // fill the parent + fill the gutter gaps
When the user hovers over the anchor, the child elements change their CSS specs to:
left: 0; // stay flush with the anchor object
width: 100%; // fill the parent, which now includes the gutter gap(s)
Everything appears to work correctly when viewing the animation behaviors on Chrome / Safari / Firefox:
http://svg-gmmb-cis.pantheonsite.io/wp-content/uploads/2019/01/debugging_animations.mp4
Unfortunately, there is a slight hiccup on IE11/Edge:
http://svg-gmmb-cis.pantheonsite.io/wp-content/uploads/2019/01/IE_animation_bug.mp4
Questions and hopeful helpful insight towards reaching an answer:
After viewing the animation glitch, does IE11/Edge have issues with animating CSS measures using calc()?
Do I need to create a CSS animation with keyframes to remedy this hiccup in IE11/Edge?
Am I approaching this wrong and should be animating different properties?
You can do this easily with margin and avoid the use of calc.
Here is a simplified example:
.container {
border:1px solid;
padding: 0 24px;
height:100px;
}
.box {
height:100%;
background:red;
transition:.5s all;
}
.box:hover {
margin:0 -24px;
}
<div class="container">
<div class="box"></div>
</div>
Or like this:
.container {
border:1px solid;
margin: 0 24px;
height:100px;
}
.box {
height:100%;
background:red;
transition:.5s all;
}
.box:hover {
margin:0 -24px;
}
<div class="container">
<div class="box"></div>
</div>
I have two divs, the parent that has rounded corners, overflow:hidden and an inline background image, and a child div that is position:absolute with a background color and opacity.
At my normal screen size, the child DIV pretty much fills the parent DIV, but I can just make out a slight line of the parent DIV on the corners.
The bigger issue is that when I zoom in to the page, at some screen sizes the child DIV is considerably smaller than the parent DIV, which obviously looks awful.
Here is my code:
.parent-div {
height:350px;
border-radius:4px;
overflow:hidden;
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
position:relative;
}
.child-div {
position:absolute;
bottom:0;
left:0;
width:100%;
padding:15px;
text-align:left;
background-color:rgba(255,255,255,0.9);
}
I've googled this but can't find a solution that works. I have tried adding the border radius on the child DIV, but this doesn't work.
FYI - when not using border radius everything seems fine.
EDIT: I think I have kind of found the issue. I have another div around all of these with padding. When I get rid of this it works. When I change the padding size I can see that is causes the issue in the image above at various padding sizes.
EDIT2: Actually, I found that what was causing the issue was the overflow:hidden on the parent div. When removing this and just ensuring I had the border radius on the child div, everything worked as expected.
It's better if you provide a working fiddle, but I think that your problem is the meassure of .child-div. Try this:
.child-div {
box-sizing: border-box; /* here */
border-radius: 4px; /* to apply the same that the parent */
height: 100%; /* to make all height */
position:absolute;
bottom:0;
left:0;
width:100%;
padding:15px;
text-align:left;
background-color:rgba(255,255,255,0.9);
}
The code below link runs fine on Chrome, Firefox:
link
.enalt
{
display:table-row;
bottom:0;
position:absolute;
}
however the same code does not work properly in IE 10. What should I do?
Add height: 100%; to the tdiscell class. height: 100% takes up 100% of the element's parent. So it won't be tall enough if the parent isn't tall enough.
Full CSS for the element
.tdiscell
{
border:solid 2px #143357;
display : table-cell;
height: 100%; /* add this */
}
I want a border on the right hand side of a div.
I do:
<div class="span6" style="border-right: 2px solid #727272;">
the things is I'd like my border not to run to the top and bottom of the div. Maybe 5px from the top and 5px from the bottom. Or 90% of the height of the div. How do I do this?
Thanks
You can use a pseudo element to hold the border. The following would make the "border" be 90% of the height of the parent element:
http://cssdeck.com/labs/kyrvt8hf
div {
position: relative;
}
div:after {
display: block;
content: '';
position: absolute;
top: 5%;
bottom: 5%;
right: 0;
border-right: 2px solid red;
}
I could be wrong, but I don't believe there is any way to really make this happen that you would probably want to roll with. In fact, I thought of three "hacky" ways that might work, but all three can't get you to the desired state, assuming a variable height.
Assuming a fixed height, you could create a 2px wide by 90% div height image of the color you want, then set it as the background image of the div. Something like:
.span6 { background: #fff url(bgBorder.png) no-repeat right center; }
Update
A variation based on what Tyblitz said in the comments. This allows for dynamic height. I am still inclined to go with the :after option, as it keeps your DOM cleaner, but in case that is not possible:
http://jsfiddle.net/designingsean/bsbgX/1/
HTML:
<div class="span6">The content div<div class="border"></div></div>
CSS:
.span6 {
width:50%;
height:400px;
background-color:#ddd;
position:relative;
padding:10px;
}
.border {
width:2px;
background-color:#222;
position:absolute;
top:5%;
bottom:5%;
right:0;
}
Note that to make it a fixed distance (say, in pixels), just change the top and bottom from a percentage to the px you want. See http://jsfiddle.net/designingsean/bsbgX/2/ for the example.
This picture show's how border's work
You can either set margin to curtail the border or set padding to extend the border. Currently there is no option in CSS to target the border and make it bigger or smaller(not talking about width obviously). You can however use padding, margin, another div or pseudo element's to reach the desired effect.
I want to increase the size of some images when hovering over them.
Please have a look at the example below. It's the option Test (3rd image):
http://livingfunky.webresponsive.co.uk/index.php/curtains/hand-made-curtains/test-hand-made-curtain.html
.swatches-container .swatch-img,
.swatches-container .swatch-span {
margin:0 2px 2px 0;
}
.swatches-container .swatch-img {
border:1px solid #eee;
max-width:30px;
max-height:28px;
z-index: 0;
position: relative;
}
.swatches-container .swatch-img.current {
border:2px solid #333;
}
.swatches-container .swatch-span {}
.swatch-img:hover {
border:1px solid #eee;
max-width:60px;
max-height:46px;
left:10px;
cursor:pointer;
top: -20px;
left: -20px;
}
The problem I have is that when I hover over the third image, the div moves. How can I prevent this from happening?
Thanks
The deal is that you need to have your images positioned as absolute, so that the swatches-container is not resized if they get bigger.
Thus, you can put your images into a <div class="swatch-img-block"></div> which keep having the size of the little image, so the flow isn't modified by your growing image and your images will be absolute positioned relatively to these <div>
You can do this with this CSS:
.swatches-container .swatch-img-block
{
display:inline-block; /* displayed as inline elements */
position: relative; /* so the images can be positioned relatively to this */
width:30px; /* keeping the image size */
height:28px;
}
and by adding position:absolute in .swatch-img:hover{ }.
EDIT: looks like for compatibility issues, it is better to replace .swatch-img:hover selector by .swatch-img-block:hover .swatch-img. This way, the image is made bigger if the pointer is on the <div> containing the image (the space of the image when it is little). Also, it avoids problems with images moving out of the pointer.
Here is a working jsFiddle : LINK
you can set the img to absolute positionning when hovered, also the swatches-container have to be relatively positioned :
.swatches-container
{
position:relative;
}
.swatch-img:hover {
position:absolute;
}