Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Articles on Trending Technologies
Technical articles with clear explanations and examples
How to Create Text Reveal Effect for Buttons using HTML and CSS?
In this article, we will discuss the approach to creating text reveal effect for buttons using HTML and CSS. Buttons are the most important user interface component for any website. It is very important to design the buttons in a creatively unique way. The text reveal effect for a button is used when it is used to reveal some offer or exciting content for enhancing the user experience. The approach is to cover the button with a strip of the same dimension as of button and then moving it in any one direction on mouse hover. Syntax ...
Read MoreHow to Create Link Tooltip Using CSS3 and jQuery?
Link tooltips are an excellent way to display additional information when users hover over links. This article demonstrates three different approaches to creating tooltips using CSS3 and jQuery. Approaches We will explore the following methods − Using jQuery mouseenter and mouseleave functions Using jQuery UI tooltip() function Using pure CSS for tooltips Method 1: Using jQuery mouseenter and mouseleave Functions This approach uses jQuery event handlers to show and hide tooltips dynamically. The mouseenter event fires when the mouse enters an element, while mouseleave fires when it exits. Syntax $(selector).mouseenter(function() ...
Read MoreHow to Auto-Resize an Image to Fit a div Container using CSS?
To auto-resize an image to fit a div container, it ensures that the image is scaled properly without affecting its original aspect ratio. It helps in preventing the distortion of image and ensures that image fills the container without stretching or cropping. In this article we are having a div container and an image. Our task is to auto-resize image to fit the div container using CSS. Syntax /* Basic image resizing */ img { width: 100%; height: 100%; object-fit: cover | contain; } ...
Read MoreHow to display the file format of links using CSS?
While browsing through a web page, you come across various documents which can be downloaded. Sometimes, you need to download a document but in different file format. However, you may have a problem in finding the document of your desired file format because there are various links each containing different file formats. It can be .docx, .png, .txt, .pdf etc. Generally, file formats are not specified along with the links. So, we cannot know the type of file format just by looking the links. In this article, you will learn how to display the file format of links on ...
Read MoreDifference between CSS Grid and Bootstrap
The majority of the time, we will use CSS Grid in situations where we have strict requirements for the layout and want our content to flow on the page in accordance with those requirements. Bootstrap's grid system is based on the CSS Flexbox layout system, while the CSS Grid was influenced by print-based design. Bootstrap is a direct competitor to CSS Grid, and a significant comparison can be made between the two frameworks' respective grid layout systems. If we want to have control over the layout in either the row or column direction, then we should use the ...
Read MoreDifference Between HTML and CSS
In this post, we will understand the difference between HTML and CSS. HTML provides the structure and content of web pages, while CSS handles the visual styling and presentation. HTML HTML refers to Hyper Text Markup Language. It helps create web pages and applications − It helps define structure of web page. It is a markup language. It helps create static pages as well. It helps display data. HyperText helps define link between multiple web pages. Markup Language helps define text document using tags, which gives a structure to the web page. It has less backup ...
Read MoreRevealing Hidden Elements by CSS Animations
CSS animations allow us to reveal hidden elements with smooth transitions and effects. Elements can be hidden using the opacity: 0 property and revealed through hover interactions, creating engaging user experiences. Syntax selector { opacity: 0; /* Hide element */ transition: opacity duration; } selector:hover { opacity: 1; /* Reveal element */ animation: keyframe-name duration timing-function; } @keyframes keyframe-name { 0% { /* starting state */ } 100% { /* ending ...
Read MoreHow to Add CSS Rules to a Stylesheet with JavaScript?
The insertRule() method helps us add CSS rules to a stylesheet dynamically using JavaScript, while deleteRule() removes existing rules. These methods allow you to modify styles programmatically without editing the original CSS code. Syntax // Insert a rule stylesheet.insertRule(rule, index); // Delete a rule stylesheet.deleteRule(index); Method 1: Insert a CSS Rule To insert a rule at a defined position, use the insertRule() method. First, get the stylesheet using getElementById() and access its sheet property − body { ...
Read MoreAuto Grow a Textarea with JavaScript in CSS
Auto-growing textareas improve user experience by dynamically adjusting their height based on content length. This eliminates the need for scrollbars and provides a seamless typing experience. We can achieve this functionality using JavaScript to monitor content changes and CSS to control the visual appearance. Syntax textarea { resize: none; overflow: hidden; min-height: initial-height; } Method 1: Basic Auto-Growing Textarea This example demonstrates a simple auto-growing textarea that expands vertically as content is added − ...
Read MoreCreating a Page with Sidebar and Main Content Area using HTML & CSS
A webpage with a sidebar and main content area can be created using various CSS techniques. The most common approach is to create a layout where the sidebar takes up a fixed percentage of the width while the main content area fills the remaining space. Syntax .container { display: table; width: 100%; height: 100vh; } .sidebar { display: table-cell; width: percentage; } .main-content { display: table-cell; width: ...
Read More