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
Front End Technology Articles
Page 459 of 652
How to design a modern sidebar menu using HTML and CSS?
When designing a website layout, a sidebar menu serves as a crucial navigation component positioned to the left or right of the main content area. This vertical column contains important links, widgets, and navigation elements that help users move between different sections of your website efficiently. A modern sidebar menu enhances user experience by providing quick access to various pages and sections. Let's explore how to create both static and interactive sidebar menus using HTML and CSS. Syntax .sidebar { position: fixed | relative; width: value; ...
Read MoreHow 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 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 MoreWhat is Progressive Rendering?
Progressive rendering is a web development technique that improves website loading speed by displaying content in chunks rather than waiting for the entire page to load. This approach significantly enhances user experience and can reduce visitor bounce rates. What is Progressive Rendering? Progressive rendering breaks down web page content into smaller, manageable pieces that load sequentially. Instead of waiting for all HTML, CSS, and JavaScript to download before showing anything, the browser displays content as it becomes available. Progressive rendering is a technique where developers structure their code to prioritize critical content first, allowing users to interact ...
Read MoreWhat is greater-than sign (>) selector in CSS?
In CSS, the greater-than sign (>) is used as a child combinator selector. It selects only the direct children of a parent element, not elements that are nested deeper in the hierarchy. Syntax parent > child { /* CSS styles */ } In the above syntax, parent is the parent element, and child is the direct child element. The styles are applied only to the direct children, not to grandchildren or deeper nested elements. Example 1: Basic Direct Child Selection The following example demonstrates how the > selector works ...
Read More