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 2 of 8
How to Create Image Stack Illusion by using HTML and CSS?
Visual illusions are quite fascinating when it comes to web development. Using visual illusions in our websites attracts users since it can play with their minds. It tricks our brains into believing something which is actually not present. These illusions can be created using various techniques in CSS. One of most commonly used illusion is image stack illusion, which simply a delusion of depth. In this article, we will discuss steps involved in creating an image stack illusion by only using HTML and CSS. What is Image Stack Illusion? Image stack illusion is a visual delusion which is ...
Read MorePrimer CSS Truncate Expand on Hover or Focus
Text display is an essential factor in web designing which affects the user experience and the readability of your website. If your text is displayed properly in an organized manner, the users will easily understand it and hence, will be attracted to your website. However, sometimes, the text may be too long for a specified space in the webpage. To properly display that text, we use the truncate method. This method is offered by Primer CSS in which you can not only truncate your text but also expand it on hover or focus effect. In this article, we will discuss ...
Read MorePrimer CSS Truncate Custom Max Widths
In web development projects, developers face situations where they need to display text within a specified amount of space due to several reasons like client's demand, overall appearance, limited resources etc. The truncate property is an efficient feature in CSS which resolves this issue. It enables developers to display a single line text and truncate the overflowed text with an ellipsis. However, depending upon the situation the need of customizing the maximum width of the truncated text might arise. In this article, we will discuss how we can customize the maximum width using Primer CSS, a popular open-source CSS ...
Read MorePrimer CSS Typography Type Scale Utilities
Primer CSS is a CSS framework collectively developed by various GitHub contributors. One of its components is typography which enables developers to style the written content of websites. By applying these utility classes to HTML elements, we can easily customize the visual appearance of our applications. This article discusses the type scale utilities offered by Primer CSS and how to use them in webpages. What are Type Scale Utilities? Type scale utilities are a collection of properties that help create proper typography throughout your website. They consist of a series of pre-defined, built-in font sizes and line heights ...
Read MorePrimer CSS Typography Heading Utilities
Typography is an essential component during creation of websites and applications. It is primarily used to display majority of the content for the users. It determines the tone and mood of the content of your website. So, it is very likely that it affects the overall user experience. Headings in any website is the center of attraction for any user. So, it is very important that it looks perfectly fine to increase the readability of your website or application. In this article, we will use Primer CSS to create headings. Primer CSS Primer CSS is a versatile ...
Read MoreHow to align checkbox and its label on cross-browsers using CSS?
Aligning checkboxes with their labels consistently across different browsers can be challenging due to varying default styles. CSS provides several effective approaches to achieve proper alignment. In this article, we will explore three reliable methods to align checkboxes and labels for consistent cross-browser display. Syntax /* Method 1: Using vertical-align */ input[type="checkbox"] { vertical-align: middle; } /* Method 2: Using flexbox */ label { display: flex; align-items: center; } /* Method 3: Using grid */ .container { display: grid; ...
Read MoreDifference Between Revert and Unset Keyword in CSS
CSS is a powerful tool which enables developers to customize the appearance of websites according to their will. Since there are numerous features and properties provided by CSS, it is quite possible that developers use two keywords interchangeably in order to achieve a desired effect. So, it is important to know about such confusing keywords in detail to avoid further mistakes. Two such keywords are "revert" and "unset". These two may appear similar, but have noticeable differences for some properties for certain elements. Here, we will discuss about these keywords, how and when to use them, and differences between ...
Read MoreHow to set vertical space between the list of items using CSS?
In today's era of web design, creating visually attractive websites with proper layouts and organized content is a key task. One of the most commonly faced challenges is defining the proper space between elements to increase webpage readability. CSS enables developers to control the appearance of HTML elements, including proper spacing between them. In this article, we will discuss different methods for setting vertical space between list items using CSS. Syntax /* Common approaches for vertical spacing */ li { margin-bottom: value; /* Method 1: Margin */ ...
Read MoreDifference Between :first-child and :first-of-type selector in CSS
The :first-child and :first-of-type selectors are CSS pseudo-classes that help target specific elements within a parent container. While they may seem similar, they work very differently and understanding their distinction is crucial for precise element selection. The :first-child selector targets the very first child element of a parent, regardless of its element type. The :first-of-type selector targets the first element of a specific type within a parent container. Syntax /* :first-child selector */ element:first-child { property: value; } /* :first-of-type selector */ element:first-of-type { property: value; } ...
Read MoreHow to create responsive stacked card hover effect using CSS?
Card-style design is better than others in terms of functionality and aesthetics. To suit the needs of different screen sizes, the card design can assist users focus on specific content very easily, as well as enabling designers to put up the content reasonably and clearly throughout design. The card design is incredibly versatile and may be used for practically any purpose in any sector. In this article, we will use HTML and CSS to construct a responsive stacked cards hover effect. Syntax .card::before, .card::after { content: ""; position: ...
Read More