Scenario: While hovering using the mouse above the image, the image needs to reduce its opacity and fade with a smooth transition. Solution We can add the following CSS property to that specific image class in the CSS file. Code:
Tag: CSS
How to remove the blue bar highlight while clicking on button or link
It’s a CSS default issue because sometimes we can see this issue in Mobile devices, and Ios devices, and even sometimes we have seen this issue on the desktop of both Mac and Windows. example of the issue Solution: Issue will be resolved
Flex-box and properties
The Flexbox Layout (Flexible Box) module aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”). The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and… Continue reading Flex-box and properties
How to animate scroll in safari browser by using css.
We need to use @keyframes animate {}, for compatibility with Safari 4.0-8.0 you need to use @-webkit-keyframes example {} together with the @keyframes animate {} Need to use @webkit-keyframes animate {} as well.
Padding and Margin
Padding The CSS padding properties are used to generate space around an element’s content, inside of any defined borders.CSS has properties for specifying the padding for each side of an element: padding-top padding-right padding-bottom padding-left All the padding properties can have the following values: length – specifies a padding in px, pt, cm, etc. % – specifies a padding… Continue reading Padding and Margin
How to resolve the hovering issue of the button in safari
In Safari the shorthand notation does not work need to give in separate property if we have given in shorthand notation Example: So this will not work Instead try writing in full form like this The issue will be resolved
Install and use PrimeFlex CSS utility library in Vue project.
Run the following command in your command line. Add provided code in main.js To use PrimeFlex classes, consider the font size need to be changed. ‘text-xs’ is a PrimeFlex property with font-size: .75rem;
How to fix the issue when the CSS text-overflow: ellipsis property isn’t working.
The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (…), or display a custom string. Both of the following properties are required for text-overflow: white-space: nowrap;overflow: hidden; text-overflow:ellipsis; only works when the following are true: 1) The element’s width must… Continue reading How to fix the issue when the CSS text-overflow: ellipsis property isn’t working.
How to remove the blue highlight of button on mobile?
When trying to create buttons, links or input fields using latest development technologies like next js, react and angular etc there might be some times a default background color may appear. This can cause bugs for the developed website since they create a different background color different from the mockup. As solution we can use… Continue reading How to remove the blue highlight of button on mobile?
Include JSON Lottie files in Next JS Project
Sometimes, there might be situation arises where we have to add JSON Lottie files in our project for improving UI and also making user friendly. We cannot directly use Lottie files in Next JS project instead we have to do the followings. Install lottie-react using npm i lottie-react –legacy-peer-deps Create a folder to add Lottie… Continue reading Include JSON Lottie files in Next JS Project