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
Tag: CSS
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
Setting Scroll Bar Thumb width using CSS
Sometimes, there might be situation arrises where we have to setup or adjust the scroll bar thumb width for making it user friendly. But we cannot directly change the width of this by using css infact we can adjust the border width so that this makes an illusion that the width is very small. Here… Continue reading Setting Scroll Bar Thumb width using CSS
Enhancing Button Interaction with Tab Navigation
In web development, providing a smooth and intuitive user experience is essential. When users navigate through a web page using the tab key, it’s beneficial to provide visual cues to indicate which element currently has focus. Solution: This can be achieved by adding a hover effect to buttons when they receive focus during tab navigation.… Continue reading Enhancing Button Interaction with Tab Navigation