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 a Non-Rectangular Header using HTML & CSS
A non-rectangular header adds visual appeal to web pages by breaking away from traditional rectangular layouts. Using CSS's clip-path property, we can create custom shapes for headers that make our designs stand out. Syntax header { clip-path: polygon(coordinates); } Basic Approach To create a non-rectangular header, we use the following steps − Create a element with content Apply the clip-path CSS property with polygon coordinates Position content appropriately within the clipped area Example 1: Wavy Bottom Header Here's how to create a header with a ...
Read MoreCreate the Indian Flag using HTML and CSS
To create the Indian flag using HTML and CSS, we will need to have good understanding of CSS. Indian flag have three colors: saffron, white and green and Ashoka Chakra at the middle. In this article, we will be creating stepwise Indian flag. First making a pole then tricolor and then rotating Ashoka chakra all with the help of HTML and CSS only. Later we will be animating our flag with wave animation and flag movement. Basic Structure We will start by creating the basic HTML structure for our Indian flag − ...
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 MoreHow 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 More