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
CSS Articles
Page 93 of 130
How to style icon color, size, and shadow by using CSS
Icons are an essential part of any website or application, as they give us a quick and easy way for users to understand and interact with the content. However, using default icons can make a website look generic and unappealing. Using CSS, we can style icon color, size, and shadow to create a unique and visually appealing user experience. In this article, we will learn how to style icon color, size, and shadow using CSS. We will learn the different methods to style the icons in CSS. Different Methods to Style Icons in CSS Method 1: Using Font Awesome Icons ...
Read MoreWhat is CSS sprites and how to implement them on a page?
What are Sprites in CSS? In CSS, sprites are techniques used to which we can use to decrease the number of HTTP requests by the web browser. In this technique, we require to combine multiple images in a single image. After that, we can set the single image for every image element’s background and also required to set the position to show the particular image from the combined image. Here, we can combine the different images in a single image using the image editing tools such as Photoshop, paint, etc. After that, we can use that single image with different ...
Read MoreWhat is CSS Flexbox?
As a beginner developer, learning about CSS flexbox is important. It also helps to make the responsive web design easy by optimizing the spaces of the element. The CSS flexbox is a layout model that we can use to arrange the child items better. It also changes the flex items' dimensions if the flexbox's content is overflowing and tries to show all content of the web page. Terminology of CSS Flexbox In this section, we will learn about the basic terminology used while using the CSS flexbox layout. Flex container − It is an HTML element for which we ...
Read MoreWhat are the real world usage of CSS with SVG?
Developers use CSS to style the web page's content and represent it properly. It can be used to make any content attractive. The full form of the SVG is the scalable vector image. The SVG is one type of image like a jpg or png. The jpg or png are raster images created using the grids of the pixels. If we zoom in on the raster images, it starts getting blurry. The vector image is created using the mathematical functions which draw vectors and joins them to make a shape. As it is not a grid of pixels, it never ...
Read MoreVarious tricks for :before pseudo elements using position property in CSS
Generally, we add content to the web page using HTML and style the content using CSS. The CSS contains some pseudo-selectors, such as ‘:before’, and we can use it to add content to the web page before any HTML element. Sometimes, developers don’t want to put the content before the HTML element using the ‘:before’ selector, but they require to position the content. For example, if we use the ‘:before’ selector to add an icon before the text, we require space between the text and the icon. So, we need to change the icon's position using the CSS position property. ...
Read MoreLogical Properties in CSS
In CSS, logical properties allow developers to define the style based on the logical structure of the web page rather than the physical layout. It means we can apply the CSS according to the text direction or content flow. Mainly logical properties are used to set the HTML element's margin, padding, and border. It contains different variants of the margin, padding, and border property. Logical properties can be defined according to the block and inline dimensions. Block dimension − The block dimension represents the perpendicular direction of the content flow. For example, in English text direction is left ...
Read MoreLoading Text Animation Effect using CSS
Nowadays, the animation is the most powerful feature in the applications to attract more users, and it increases users' interest in exploring the application. In web applications, we can create animations using HTML and CSS. However, we can create animations using JavaScript, but it makes the website slower. In this tutorial, we will learn to load text animation using HTML and CSS. It is important to show loading text with animation while fetching data from API or loading web pages to make it more attractive. Example 1 In the example below, we created the ‘loader’ div and ‘loader-inner’ div element ...
Read MoreHow to specify order of classes using CSS?
Cascading Style Sheets (CSS) is a powerful component of web development which enables the developers to determine the visual appearance of their websites. In CSS, classes are used as selectors which enables us to apply several specific styles to an element. You can also use multiple classes for a particular element. However, when you apply multiple classes to an element, it is necessary to know how to specify the order of these classes in which they will be rendered to avoid discrepancies and unexpected results. In this article, we will discuss different methods to specify the order of classes ...
Read MoreHow to create Paradoxical effect using CSS?
The Paradoxical effect is a visual effect which is used to create optical illusion of any object, element or text that appears to move in a contradictory way. This effect can be used to add interesting and unique element to your web page. This can be easily created using HTML and CSS. In this article, we will discuss about the techniques and properties which is required for creating Paradoxical effect using CSS. We will start creating simple paradoxes using combination of two CSS properties simultaneously, and then dive into more advanced techniques which enables us to create complex paradoxical ...
Read MoreWhat is the use of star-preceded property in CSS?
In web development, CSS (Cascading Style Sheets) enables the developers to determine the visual appearance and layout of a website. However, since different web browsers have varying levels of support mechanism for CSS, it can result in inconsistency while rendering the web pages by the compiler. To overcome this compatibility issue, developers often opt for using CSS hacks to ensure that their web pages are displayed consistently across different browsers and devices. One such hack is the star-preceded property (also known as star property hack), which is used to target specific versions of Internet Explorer (IE) that have limited support ...
Read More