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 by Riya Kumari
Page 3 of 8
How to create Shooting Star Animation effect using CSS?
Shooting stars create a mesmerizing visual effect that simulates meteors streaking across a night sky. This CSS animation technique is perfect for creating engaging backgrounds, loading screens, or atmospheric effects on dark-themed websites. In this article, we will create a shooting star animation effect using CSS properties like transform, animation, :nth-child selectors, and ::before pseudo-elements to achieve realistic meteor trails. Syntax .shooting-star { animation: shoot duration timing-function iteration-count; transform: rotate(angle) translateX(distance); } @keyframes shoot { 0% { transform: rotate(angle) translateX(0); opacity: 1; } ...
Read MoreHow to eliminate close button from jQuery UI dialog box using CSS?
The CSS display: none property can be used to eliminate the close button from jQuery UI dialog boxes. This is useful when you want to force users to interact with the dialog content instead of simply closing it. Syntax .ui-dialog-titlebar-close { display: none; } jQuery UI Dialog Box Overview The jQuery UI dialog() method creates a modal dialog window that floats above the page content. By default, it includes a close button (×) in the title bar that allows users to close the dialog. Basic Dialog Syntax ...
Read MoreHow to eliminate blue borders around linked images using CSS?
When images are used as hyperlinks, older browsers may display a default blue border around them, similar to how hyperlinked text appears underlined in blue. This article explains how to eliminate these unwanted borders using CSS. Syntax a img { border: none; } What are Linked Images? Linked images are images wrapped inside anchor () tags to create clickable hyperlinks. In older browsers like Internet Explorer 6-8, these images automatically receive a blue border to indicate they are clickable links. Method 1: Removing Borders Completely The most common ...
Read MoreHow to create Pay Roll Management Webpage using JavaScript?
Nowadays, there are many companies and small-scale businesses rising and booming in the world. There are so many people working in these industries or firms. It has become a crucial task for the employer to manage the payment records of his employee. Thus, arises the need of proper payroll management system in every big or small firm. It is almost impossible for the employer to manually maintain the pay roll record of each and every employee in big firms. So, they need digital pay roll management system. In this article, we will discuss about how to create a pay ...
Read MoreHow to create Incoming Call Animation Effect using CSS?
The CSS animation property allows developers to create dynamic visual effects that enhance user experience. One popular effect is the incoming call animation, which simulates a ringing phone with pulsing shadows and vibration motion. In this article, we will create an incoming call animation effect using CSS animations and the box-shadow property to simulate the visual feedback of a ringing phone. Syntax .element { animation: name duration timing-function iteration-count; box-shadow: offset-x offset-y blur-radius spread-radius color; } @keyframes name { 0% { /* initial ...
Read MoreHow to make Google search bar like input box highlight on hover using CSS?
Creating a Google-like search bar with hover effects enhances user experience by providing visual feedback. The key is to combine the :hover pseudo-class with the box-shadow property to create an elegant highlighting effect when users interact with the input field. Syntax input:hover { box-shadow: horizontal vertical blur spread color; } Key CSS Properties The :hover Pseudo-class The :hover pseudo-class applies styles when a user hovers over an element with their mouse ? button { ...
Read MoreDesigning a Working Table fan using CSS?
CSS is a stylesheet language used to style HTML elements and create visually appealing websites. With CSS animations and transformations, we can create interactive elements like a working table fan that rotates continuously. In this article, we will create a working table fan using HTML and CSS. We'll use SVG elements to draw the fan blades and CSS animations to make them rotate. Syntax @keyframes animation-name { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .element { animation: animation-name duration ...
Read MoreWhat is web safe font and fallback fonts in CSS?
Websites require clear and beautiful typography to create a consistent aesthetic look and establish brand identity. Good typography keeps readers engaged and influences how they process content. When choosing fonts for websites, developers need to consider web safe fonts and fallback mechanisms to ensure proper display across all devices and browsers. What are Web Safe Fonts? Web safe fonts are fonts that are universally supported by all browsers and devices. These fonts ensure proper display even if they are not installed on the user's device, providing a consistent viewing experience across different platforms. Before web safe fonts, ...
Read MoreHow CSS work under the hood?
CSS (Cascading Style Sheets) is a style sheet language used to add visual effects to web pages. It describes the layout and display of HTML elements, allowing developers to manage multiple web pages simultaneously and implement custom properties that enhance appearance. Syntax selector { property: value; } Types of CSS CSS is classified into three main types − External CSS − Uses the element in the head section to connect external style sheets. Best for managing multiple pages simultaneously. Internal CSS − Defined within elements in ...
Read MoreHow block elements can be centered using CSS?
Centering block elements is a fundamental skill in CSS that helps create balanced and professional-looking layouts. Block elements naturally take up the full width of their container and start on a new line, making centering techniques essential for proper alignment. Syntax selector { margin: 0 auto; width: value; } What are Block Elements? Block elements are HTML elements that start on a new line and take up the full width of their container. Common block elements include , , −, , and . ...
Read More