Tag: CSS

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