Tag: CSS

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

To break a long word while creating an item label pdf using HTML and CSS.

To break a long word while creating an item label pdf using HTML and CSS. When table with nested table is created and added columns, the nested table columns data were overlapped with the parent table columns. And then nested table was removed and added just rows and columns in the table, the overlapping issue… Continue reading To break a long word while creating an item label pdf using HTML and CSS.

Change the display block : none to block and vice versa.

While designing a web page especially the header it is important to know to change the content to none to block and vice versa by using Java Script. It will be very helpful when we develop a responsive NavBar. The java script code used for this is as follows:- function toggleFunction() {       … Continue reading Change the display block : none to block and vice versa.

Change the color of the Png image to black in hover.

The color of the image that is inside a parent div can be changed into black using some CSS codes.  The icon images has to change to black while hovering on the parent div.  So we have to call the total div in CSS and make it hover  Then call the div along with the… Continue reading Change the color of the Png image to black in hover.

How to shrink a header on scroll with CSS and JavaScript.

Step 1) Add HTML: Create a header: Example Code: <div id=”header”>Header</div> Step 2) Add CSS: Style the header: Example Code: #header {   background-color: #f1f1f1; /* Grey background */   padding: 50px 10px; /* Some padding */   color: black;   text-align: center; /* Centered text */   font-size: 90px; /* Big font size */   font-weight: bold;   position: fixed; /* Fixed position – sit on top of… Continue reading How to shrink a header on scroll with CSS and JavaScript.

Project the image gallery to front(150%) without using extra images(while making responsive)

While we are making a site responsive, we can make too many alterations especially while making image gallery responsive. My requirement was to make each of the image project 150% to the front in small devices. One image should occupy the entire row and next image after the other. The cod used here to change… Continue reading Project the image gallery to front(150%) without using extra images(while making responsive)

How to add transition on hover with CSS

CSS transitions allows us to change property values smoothly (from one value to another), over a given duration. Animate an element with basic transition on hover In the example code given below, we will make the opacity of an element change when a user hovers or mouses over the element. Example Code: <!DOCTYPE html> <html… Continue reading How to add transition on hover with CSS