We can overwrite SVG fill color via CSS like below and also target different elements like <path> polygon circle etc. svg:hover { fill: #fce57e; } svg:hover path { fill: #fce57e; } svg:hover plygon { fill: #fce57e; } svg:hover circle { fill: #fce57e; }
Tag: CSS
display:flex and flex values in css
In CSS, the display: flex property is used to create a flex container, and it enables a flex context for its direct children display: flex; The display: flex; property is applied to a container element to enable the Flexbox layout. It establishes a flex container and turns its direct children into flex items. … Continue reading display:flex and flex values in css
Wrapped ribbon on product images
Using CSS we can display wrapped ribbon type badge on the product images. <div class=”facets-item-cell-grid”> <div class=”ribbon ribbon-top-left”><span>On Sale</span></div> </div> CSS .facets-item-cell-grid { position: relative; } .ribbon-top-left { top: -10px; left: -10px; } .facets-item-cell-table .ribbon-top-left { left: -15px; } .facets-item-cell-grid .ribbon-top-left { left: -13px; } .ribbon-top-left::before, .ribbon-top-left::after {… Continue reading Wrapped ribbon on product images
CSS Units – When to Use rem, em, px, and More
CSS units allow you to measure and specify different property values. You use them to modify CSS properties such as margins, padding, height, and width to make them compatible with devices of all screen sizes. CSS units have two basic types: Absolute units Relative units Absolute units are fixed and do not depend on the… Continue reading CSS Units – When to Use rem, em, px, and More
What’s the difference between display:inline-flex and display:flex?
Display:flex apply flex layout to the flex items or children of the container only. So, the container itself stays a block level element and thus takes up the entire width of the screen. This causes every flex container to move to a new line on the screen. Display:inline-flex apply flex layout to the flex items or children… Continue reading What’s the difference between display:inline-flex and display:flex?
You don’t need JavaScript for that
The rule of least power It’s one of the core principles of web development and it means that you should Choose the least powerful language suitable for a given purpose. On the web this means preferring HTML over CSS, and then CSS over JS. JS is the most versatile language out of the three because you’re… Continue reading You don’t need JavaScript for that
Scroll snap feature
It makes the scrolling experience much smoother and it is very easy to implement. .my-element { scroll-snap-type: mandatory; scroll-snap-points-x: repeat(50px, 100px); } This code will create an element that snaps to every 50px on the x-axis and every 100px on the y-axis. Scroll snap align: The new scroll-snap-align property allows you to control how an… Continue reading Scroll snap feature
Flexbox Grid for Images
To achieve a grid layout with two contents in one row, and if there’s an odd number of contents, the odd one should be displayed in the center, you can use CSS Flexbox. This code uses Flexbox to create a responsive grid layout with two items in each row
How to give a hover effect with a slow fading effect to images in the UI
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:
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