I have problem with remove opacity with my modal:
code (line 174): https://github.com/robokonk/tailwind-opacity/blob/b407b9c1c9e0787c241b33086c60ba6a579a0ca1/src/components/Header.tsx#L174
live version:https://melodic-florentine-ff2a5b.netlify.app/
image (problems): https://i.imgur.com/Fovposz.png
How I can remove from this modal opacity? And why actuall method is not working? I added absolute and z-...?
Related
I was trying yo use Ng-bootstrap 'ngbPopover' feature but it wasn't working. The popover would not appear after clicking the button. After hours of debugging I finally found the cause of my problems.
It was the css transform property in the parent component.
After research I have come to the understanding that the transform property does indeed affect the css position property of child elements (see: stacking context), and it seems that for the case of the ng-bootsrap pop-over it makes the component not work as it should.
To overcome this I added position: relative in the css of pop-over button container and it worked.
in fullPage.js when setting options for normal scrolling, for example:
autoScrolling: false,
easingcss3: 'cubic-bezier(0.175, 0.885, 0.320, 1.275)'
and scroll by an anchor link the defined css easing will not work.
Instead it is a linear/ease transition.
Is this a bug or simply not possible? Any ideas?
JSFiddle
and scroll by an anchor link the defined css easing will not work. Instead it is a linear/ease transition.
When using autoScrolling:false fullpage.js is not using css3 to scroll but the jQuery scrollTop property. As it is just scrolling a normal site with a scroll bar.
Use the easing option instead.
In the following demonstration, I am trying to apply bouncing animation to three elements, a div, p-tag and a-tag , its not working for the a-tag.
Any clues what might be wrong ?
link:
http://codepen.io/SauravTom/pen/Jougx
Set display:block or display:inline-blockon the a tag.
You can't use margins or scaling on inline elements.
Here's an updated example:
http://codepen.io/anon/pen/odiuz
Description
I'm trying to make a div look like it's growing from where it is. To do this I'm changing the position from relative to fixed which makes the first transition start from top:0, left:0 instead of the element's current top/left. How can I fix this to use the elements current offsets?
JS Fiddle
http://jsfiddle.net/ZjWkD/
Note: After the first click, the code works exactly how I want it to. The very first click is the problem.
Hello and thanks for the fiddle,
It looks like when you first set the css here, you had transitions on your target-div which was messing things up a bit, in addition to setting your initial position inside the click function.
$(this).css({
position:'fixed',
top:$(this).offset().top,
left:$(this).offset().left
});
Setting the position of the target-div before the click function fires will position the div correctly, and applying the css without the animations on it will ensure that the target-div is in the right spot when the document loads (if you keep the animations on that target-div, even if you apply the starting css in $(document).ready it will load the page and run the animation rather than having the div start there).
I used a separate class for the animation and applied it only after the initial positioning was set (see .test class in fiddle below).
http://jsfiddle.net/Jag96/wdh4N/
I have a div element to which I set opacity: 0.7; in the CSS file because I would like the text inside it to be opaque. I display some images inside this div, but the images appear with the inherited opacity property. The result are opaque images.
Is it possible to give a CSS property to the images not to inherit the opacity of the div that contains them? If not, how can I avoid having the images opaque?
Thanks.
If you're using opacity to allow the text to have partial transparency, then simply set the color of the element:
#elemId {
color: rgba(0,0,0,0.7);
}
This lets you avoid adjusting the opacity property, and should work in all browsers that support the opacity property, too.
Only way is with positioning. Here is a great article from CSS Tricks: http://css-tricks.com/non-transparent-elements-inside-transparent-elements/
Use position: relative; and a top value to make elements over one another.
If you are just trying to make a background transparent then you can use the rgba() value in your background.
Edit:
Here is a crazy idea. You could use PHP GD to render a image with a gray backround(making transparent) with white text that you want to display in the correct position. Then use a mask-box-image or mask-image CSS property and set it to the rendered image.
If of course your content is not dynamic then you could make the image in Photoshop/whatever program.
Anti-aliasing would not be the same from the browser to the GD render but is the best hack if you do not want to use positioning.
Add the following code in your css
z-index:111
it works.