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 4 of 8
How to create Directionally Lit 3D buttons using CSS?
Every part of your website is significant. Your website buttons are more than just decoration; they are crucial design elements that help tell a story about your business and direct people to your products or services. Although basic buttons are functional, you can go a step further and add fascinating effects, such as buttons that change colour when you hover over them, buttons with shadows, disabled buttons, or groups of buttons. CSS allows you to create visually appealing 3D buttons with directional lighting effects using properties like transform, box-shadow, and pseudo-elements. These buttons appear to have depth and respond ...
Read MoreExplain Dialogs in Materialize CSS
Materialize CSS dialogs (commonly known as toasts) are temporary notification messages that appear to provide feedback to users. They are lightweight, non-intrusive notifications that display important information and automatically dismiss after a specified duration. Syntax Materialize.toast(content, duration, classes, callback); Parameters ParameterDescription contentThe message text or HTML content to display durationDisplay time in milliseconds (e.g., 4000 for 4 seconds) classesOptional CSS classes for styling (e.g., 'rounded', 'red') callbackFunction to execute after toast is dismissed Setup Requirements Include the following CDN links in your HTML section to use Materialize CSS ...
Read More7 CSS Hacks Every Developer Should Know
CSS is an abbreviation for Cascading Style Sheets. It is used to make visually appealing websites. Using it would make the process of producing effective web pages easier. The design of a website is critical. It improves the aesthetics and overall quality of the website by promoting user interaction. While it is possible to create websites without CSS, styling is required since no user wants to interact with a boring, unattractive website. In this article, we have discussed 7 CSS hacks which every developer will need at some point of time during web designing. 1. Creating Responsive Images ...
Read MoreWhy does CSS work with fake elements?
CSS works with fake elements because modern browsers parse any unrecognized HTML tags directly into the DOM tree as generic elements. While these custom elements render without built-in functionality, CSS can still style them like any other HTML element. What are Fake Elements? Fake elements are custom HTML tags that aren't defined in the official HTML specification. Developers can create these elements with any name, though it's not recommended for production use. Modern browsers treat them as generic inline elements without semantic meaning. Example: Basic Fake Elements Here's how fake elements work in an HTML document ...
Read MoreHow to create a carousel with the help of CSS?
A carousel is a slideshow component that displays multiple images or content pieces in a rotating manner. Carousels are commonly used on websites to showcase featured content, products, or images while saving valuable screen space. In this article, we will learn how to create a responsive carousel using HTML and CSS with smooth transitions and interactive controls. Syntax .carousel-container { position: relative; overflow: hidden; } .carousel-wrapper { display: flex; animation: slide-animation duration infinite; } @keyframes slide-animation { ...
Read MoreHow to create Candle Animation effect using CSS?
The CSS candle animation effect creates a realistic flickering candle using pure CSS animations, transforms, and gradients. This effect combines multiple animated elements to simulate the flame's natural movement, glow, and color variations. Syntax @keyframes animationName { 0% { property: value; } 50% { property: value; } 100% { property: value; } } .element { animation: animationName duration timing-function iteration-count; filter: blur(value); box-shadow: inset values, outer values; } Key CSS ...
Read MoreHow can I vertically align an image in a section that extends across the entire web page?
Vertically aligning images in a full-width section is a common web development challenge. Whether you're centering a hero image or creating a vertical gallery, CSS provides several effective methods including flexbox, grid, and the vertical-align property. Syntax /* Method 1: Flexbox */ .container { display: flex; align-items: center; justify-content: center; } /* Method 2: CSS Grid */ .container { display: grid; place-items: center; } /* Method 3: vertical-align (for inline elements) */ img { ...
Read MoreHow to prevent text from occupying more than one line in CSS?
In web development, controlling text layout is essential for creating readable and visually appealing content. Sometimes you need to prevent text from wrapping to multiple lines, especially in navigation menus, buttons, or table cells where single-line text is preferred. Syntax selector { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } Understanding Text Overflow Text overflow occurs when content exceeds its container's dimensions. By default, text wraps to new lines, but you can control this behavior using CSS properties. Basic Overflow Example ...
Read MoreExplain Nesting and Grouping in CSS
Nesting and Grouping in CSS are powerful techniques that help developers write clean, maintainable, and efficient code. Nesting allows you to target child elements within parent elements, while grouping applies the same styles to multiple selectors at once. Syntax /* Nesting Syntax */ parent-selector child-selector { property: value; } /* Grouping Syntax */ selector1, selector2, selector3 { property: value; } Nesting in CSS The nesting property in CSS enables developers to nest one specific style rule within another, with the child rule's selector relative to the parent ...
Read MoreDifference between auto, 0 and no z-index
The CSS z-index property controls the stacking order of positioned elements on the z-axis (depth). Understanding the differences between auto, 0, and no z-index is crucial for proper element layering. Syntax selector { z-index: auto | integer | initial | inherit; } Z-Index Values ValueDescriptionBehavior autoDefault valueSame stacking level as parent, no new stacking context 0Integer valueCreates new stacking context at level 0 No z-indexProperty not specifiedBehaves like auto Positive integerNumbers like 1, 2, 3Higher values stack above lower values Negative integerNumbers like -1, -2, -3Stacks below elements with ...
Read More