The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events. When this property is unspecified, the same characteristics of the visiblePainted value apply to SVG content. In addition to indicating that the element is not the target of pointer events, the value noneinstructs the pointer event to go “through” the element and …
How to add a gradient as a color in circular bar ?
I’m not sure if it’s the best solution but I use this with another component (antd progress bar): Create a Gradient component (something like this): Reference your id in your CSS. In your case, probably something like this: I’m using this Gradient component example with antd Progress component. I didn’t add any code to the …
Quill is a modern WYSIWYG editor built for compatibility and extensibility
Quickstart in jQuery The best way to get started is try a simple example. Quill is initialized with a DOM element to contain the editor. The contents of that element will become the initial contents of Quill. And that’s all there is to it! Next Steps The real magic of Quill comes in its flexibility …
Sass Color Generator
This is color generate site, which is convenient to use when we design UI/UX.http://scg.ar-ch.org/
A Complete Guide to Grid
CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system. You work with Grid Layout by applying CSS rules both to a parent element (which becomes the Grid Container) and to that …
Animate on Scroll
On the frontend design, we can implement the animation effect on scrolling using the following library. https://github.com/michalsnik/aos Currently most of the premium Shopify themes are embedding this library by default to use their awesome animation functionality. We can use this library to implement the scrolling effect on our any frontend projects.
Sorting images automatically in HTML, and implement the gallery module
In real website coding, we are facing some challenges to create the complex gallery module in HTML or on the WordPress landing page sites. Fortunately, there are already pre-built libraries we can use or refer on, so we don’t need to waste our time to re-build them from scratch. Here are some of the image …
Using custom fonts in CSS
On the frontend design, we are apparently facing image blurring issue when we try to use png or svg files as icons or logos. Especially the image blurring issue is happening when we scale the image size. To fix this issue and keep the high resolution of image, and also to improve the site loading …
Using sprites for multiple images in CSS
When we need to use several images in CSS, we can consider about using Sprites technology to improve the site loading speed. Using Sprites in CSS, we can decrease the number of images, which will be directly affect to the decrease the number of HTTP requests. Resources: https://css-tricks.com/css-sprites/ http://www.w3schools.com/css/css_image_sprites.asp https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS