I try to rotate the text by using, text-transform with transition. In firefox browser a slight jerk get happened. Check the below link, by mouse overing the text, end of the rotation you can see the slight jerk, how to avoid this?
.rot_pos{
margin:100px auto;
text-align:center;
}
.rotate{
font-size:30pt;
font-weight:bold;
display:inline-block;
transform:rotate(0deg);
-moz-transition:1s;
transition:1s;
}
.rotate:hover{
transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
}
<div class="rot_pos">
<div class="rotate">Sample Text</div>
</div>
http://jsfiddle.net/es86wh1p/
Any other solution??
This happens only in firefox.
I had a small play with your code in js-fiddle, it almost appears to be a bug in firefox. A quick debugging tip for things like this is to enable borders and set different colors.
I was able to find a solution, but it is so incredibly hackey that this reminds me of the 90's and the fact that mozilla firefox rose from the ashes of the netscape codebase.
First I set a parent/child tag which "Should" have caused the text to rotate when the mouse entered the rot_pos div. This still caused the text to 'trap' when the mouse hit the box that was rotating ( when causing the mouse to leave quickly, you can test this by removing the padding from rot_pos )
Setting the Z-Order of rotate to -2 shows that the rotate:hover trigger is not being triggered when it is 'behind' another div. So the quick lazy fix would be to expand the size of rot_pos so it completely covers the rotating text.
Which leads me to:
http://jsfiddle.net/rwa1pq2v/
.rot_pos{
margin:100px auto;
text-align:center;
border: 1px solid black;
padding: 100px 20px 100px 20px;
}
.rot_pos > .rotate {
font-size:31pt;
font-weight:bold;
display:inline-block;
transform:rotate(0deg);
transition:1s;
border: 1px solid black;
background: green;
}
.rot_pos:hover > .rotate {
transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
}
.rotate {
z-index: -2;
}
.rotate:hover {
background: pink;
}
The issue with this is that the rotation is being triggered when the mouse enters the outer-area. So with the knowledge that a div which is "above" according to the z-order will prevent the trigger of the div below I dropped a further 2 div's over the top which can be seen as red and blue with a opacity of 0.5 in the example below:
http://jsfiddle.net/non45qy2/
With some lazy hand fiddling of sizes to ensure that they completely cover the trigger area we have my final solution..
To improve on this we could also drop a further 2 div's to cover up the 2 leftover white area's (and fix up the padding on the covered up areas) so you don't have to offset by such a large amount.
if it wasn't 1:40am I would be raising this issue as a bug with mozilla and hoping it gets fixed in the next release.
Related
I am designing a website theme in which I can only change the CSS, not the JavaScript or HTML source. There is a div element (not a link) that I want to show an APNG (like an animated GIF) background image when clicked. The problem is that the div doesn't remain active after the mouse button is up, so the animation doesn't usually get a chance to play through. Is there a way to prevent the background from going back to its normal state until after a delay?
I thought maybe a CSS #keyframe animation would work, but I'm not sure. The image is just an expanding gradient, so the image could be replaced with that (I think the image is easier because gradients aren't animatable either.
You can fake a click and keep the change 'active' by using a very long transition and adjusting the transition-delay on the initial and :active states.
.box {
width:100px;
height: 100px;
border: 1px solid grey;
margin: 1rem auto;
background-color: #f00;
transition-property: background-color;
transition-duration: 9999s;
}
/*.box:hover,*/
.box:active {
background-color: #00f;
transition-duration: 0;
transition-delay: 0s;
transition-timing-function: linear;
}
<div class="box"></div>
I've been searching but haven't found an answer for the specific problem I'm having.
I wanted to use sliding captions for the images on my art blog. The challenge was that I needed the container to adapt to variable image heights so I didn't have to go in and set it manually every time I post something new. What I have so far is really close to working but...
The div is 5 pixels bigger than the image, regardless of the image's height. I made the div background red so it's easy to see the overlap, but I just can't figure out where those 5 pixels are coming from.
I'm really new at this and changed all the css values I could think of and searched for other examples but I still couldn't get the overlap to go away. Any help would be awesome. I'm so close (I think) but I don't know what else to try. Here's most of the css with a jsfiddle link below:
/* variable container adapts to image size (plus 5 unwanted pixels) */
/* I made the background red so you can see where it's too big */
div#imgContainer {
min-width: 20px;
min-height: 20px;
display:inline-block;
background:red;
}
.postContainer {
position:relative;
overflow:hidden;
background: red;
}
.postContainer .postTextbox {
width:100%;
height:50px;
position:absolute;
bottom:0;
left:0;
margin-bottom:-15%;
margin-left:auto;
margin-right:auto;
opacity: 0;
border:0px;
background: black;
}
.postContainer:hover .postTextbox {
margin-bottom:0;
opacity: 1;
}
.postTextbox {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
http://jsfiddle.net/nun243j1/
Thanks again in advance!
It may be because of white-space between elements. Apply image {display: block;} for images to remove this problem.
I am trying to create a box with a jagged edge, that can actually be used as a HTML element should be, and can resize etc.
Finally got my head around border-image, got it looking nice, and then when I rotate it, it gets a gap between the border-image and the main fill:
I googled it, and found an answer on SO telling someone to set
-webkit-backface-visibility: hidden;
This cleared it up, but obviously only in webkit browsers.
I tried using -moz-backface-visibility as well, but it didn't clear the issue up in Firefox.
Any suggestions?
jsFiddle
e: I actually thought I may be able to fix it by setting a background color, and then setting the background-clip to padding-box, but honestly it just left me in the same position.
One trick that fixes the problem both in Webkit and FF is setting perspective (instead of backface visibility)
.box.one {
-webkit-transform: perspective(999px) rotate(1deg);
-moz-transform: rotate(1deg);
-ms-transform: rotate(1deg);
-o-transform: rotate(1deg);
transform: perspective(999px) rotate(1deg);
}
fiddle
Adding an after pseudo class with negative margin seems to fix the Firefox issue.
.rough:after {
content: "";
display: block;
margin: -1px;
height: 302px;
background: black;
}
Fiddle demo: http://jsfiddle.net/Wkk7W/3/
Note that the display:block seems to be an essential part of my hack/fix.
Update: Depending on your plans for content inside the div, that exact example might not suit. However, I think the concept could be tweaked depending on your requirements - e.g. using a 3px wide black border instead of a background fill, and using position:absolute to allow other text to be layered on top of the box.
Gonna answer myself, because this solution actually covers my needs of it being "as a html element should be, and can resize etc", even though I developed this solution from Grants answer.
http://jsfiddle.net/Wkk7W/6/
Set the element to position:absolute, then give it a pseudo element with:
content: "";
display: block;
position: absolute;
top: 0;
width: 102%;
margin: -1px 0 0 -1%;
height: 102%;
background: black;
z-index: -1;
This way it keeps the elements width and height, z-index: -1 to put it behind the text. It might not require the display:block, i didn't check.
There are still a few tiny gaps but they are basically impossible to cover and I am happy with it the way it is.
As you can see from the jsfiddle this animation flickers in webkit. It doesn't seem to matter if the animation is infinite or not. How can this be fixed? I have tried everything for hours. All the standard tricks don't seem to work on this example. Thanks for your time.
here is the code:
body {
background-color: #000;
}
#box {
width: 200px;
height: 200px;
top:20px;
left:20px;
position:absolute;
border: 1px solid red;
-webkit-animation: box 20s linear infinite normal;
}
#-webkit-keyframes box {
0% {-webkit-transform: translate(0,100px);}
50% {-webkit-transform: translate(100px,0);}
100% {-webkit-transform: translate(0,100px);}
}
EDIT: RCorrie was right, going into the color settings of my monitor and tweaking them solved the problem!
Thereason this happens is because the element is rendered at half pixel offset, to instead of having 1 pixel of 100% opacity, it'll be spread over 2 pixels both 50% opacity. It rapidly switches between 100% and 2x50% as it moves along, so that is what makes it flicker.
You could fix it by either making the line thicker, or speeding up your animation (the former being more effective at fixing it)
Ok, so in my page I am showing a background image with this css:
.heroarea {
background:url(/static/images/mrd_hero_01.jpg) no-repeat;
height:450px;
}
and the copy placed over it and the container the copy is in have these styles:
.main-panel {
position: absolute;
top: 130px;
left: 380px;
background: #fff;
width: 560px;
height: 340px;
padding: 30px 30px 20px 30px;
/* CSS3 standard */
opacity:0.5;
/* for IE */
filter:alpha(opacity=50);
}
.main-panel h1 {
background: transparent;
color:#39372f;
text-align: center;
/* CSS3 standard */
opacity:1;
/* for IE */
filter:alpha(opacity=100);
}
Generally, everything is as expected. That is, the image shows where I expect it to show. main-panel shows a white back ground with a transparent background. However, the text in the h1 tag is also transparent. I can see the image from underneath showing through. How can I make this so that the h1 tag content is not opaque?
Thanks!
Opacity applies to the element, not it's background.
You either need to use a translucent image, or an rgba background colour.
There is an explanation about how to do this in a backwards compatible way. (Disclosure: My site)
Use rgba and/or transparent png. Alternatively, move the content to a separate sibling div as the background:
<div id="parent">
<div id="opacity"></div>
<div id="child">text</div>
</div>
If you use transparency on a block element it makes the child element inside transparent as well.This is how css works ! I do not think there is any way to hack out of it. What you can do it to absolutely position h1 without making it a child or use a translucent image
It looks like your text is a child of .main-panel. It will take on 50% opacity. Even though you state the text is opacity 100% will only make it 100% of 50%. You will need to layer it outside of .main-panel and place it on top.
You have to move it outside of its .main-panel parent. There's no way to override the 50% opacity that's being applied there.
Alternatively, if you're only using 50% opacity to make the mrd_hero_01.jpg background image transparent, you could convert it to a .png with 50% opacity and then you wouldn't need to set the opacity on .main-panel.