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 97 of 130
Snowfall Animation Effect using CSS
We can create an animation using HTML and CSS. When we add animation to the webpage, it improves the UX of the application. We can create various animations using the CSS keyframes property and use it using the ‘animation’ CSS property. In this tutorial, we will learn to create a snowfall animation effect using CSS. Syntax Users can follow the syntax below to create a snowfall animation effect using CSS. .snow{ animation: snow 7s linear infinite; } .snow:nth-child(2) { left: 20%; animation-delay: 1s; } In the above syntax, ...
Read MoreHow to Make Scrollbar Custom Arrows Work on Mobile Devices?
You may have noticed websites with distinctive scrollbars that give them a unique feel and appearance since custom scrollbars are becoming more and more common. A custom scrollbar can simply be implemented in a few different ways. The easiest method will be used in this article, which is CSS. We employ CSS to enhance the visual appeal of web pages in our applications. Using CSS, we can now change how the scrollbar looks. Let’s see how to make scrollbar custom arrows work on mobile devices. Making scrollbar custom arrows work on mobile devices Back in the day, scrollbars on websites ...
Read MoreHow to Make a Shape Like On Image in Pure CSS?
We can avoid having everything in our designs look like a box by using clipping in CSS. You can design a clip path and the shape you want to display on the webpage by utilizing a variety of basic shapes or an SVG. Web page elements are all defined inside of a rectangular box. But that doesn't mean that everything must have a box-like appearance. Using the CSS clip-path property, you can remove specific portions of an image or other element to produce eye-catching effects. Let’s dive into the article for getting better understanding on making a shape like on ...
Read MoreHow to Get this Text-Wrapping Effect With HTML/CSS?
Utilizing the CSS word-wrap property, large words are broken up and wrapped onto the following line. When an unbreakable string exceeds the length of the contained box, this feature is utilized to avoid overflow. This attribute specifies where a word should break when it becomes too long for the container, preventing overflow. When the content goes above the boundary of the container, it specifies how the words should be broken. Syntax Following is the syntax for text-wrapping word-wrap: normal | break-word | initial l inherit ; For getting better understanding on how to get this text-wrapping effect with HTML/CSS, ...
Read MoreDifference between CSS and JavaScript
A website is developed using HTML. HTML is the backbone and provides the skeleton for the website. But using HTML alone, we can’t create our desired website. Cascade styling sheets is another language that adds another layer to the website. It applies formatting to the website, changes the layout of the website and makes the website appear beautiful. JavaScript is a programming language that makes a website functionable. It adds animations, pop up screens and a lot more to interact with the user. What is CSS? CSS stands for Cascading Style Sheets. CSS is a language which is used ...
Read MoreWhich table property specifies the width that should appear between table cells in CSS?
In HTML, a table contains columns and rows. The table cells don’t contain the space between two cells by default. If we add some space between table cells, it can improve the UI of the table. In CSS, the ‘border-spacing’ property adds the space between the table space. Also, we need to use the ‘border-collapse’ CSS property with the ‘separate’ value while using the ‘border-spacing’ CSS property. Syntax Users can follow the syntax below to use the ‘border-spacing’ CSS property to add spaces between the table cells. table { border-collapse: separate; border-spacing: 3rem; ...
Read MoreWhich property specifies the width of a border in CSS?
In CSS, the ‘border’ property is used to apply the border to any HTML element, such as div. Also, we can set the different styles for the border, color, width, etc. In this tutorial, we will learn different approaches to set the width of the border of the element. Also, we will learn to set the width of different sides of the element. Use the border-width CSS property to set the width of the border The ‘border-width’ CSS property is used to define the width of the border. Users can pass the four values to set the width ...
Read MoreWhich property specifies the distance between nearest border edges of marker box and principal box?
In CSS, the ‘marker-offset’ CSS property is used to specify the distance between the nearest border edges of marker box and principal box. In CSS, the marker is a pseudoelement that refers to the bullet points of the lists. Here, we will learn to set the distance between the nearest border edges of marker box and principal box. Syntax Users can follow the syntax below to set the distance between the nearest border edges of the marker box and the principle box. marker-offset: value; Example In the example below, we have created an unordered list of different programming ...
Read MoreWhich property is used to underline, overline, and strikethrough text using CSS?
In CSS, the ‘text-decoration’ property is used to underline, overline, and strikethrough the text. Underlining the text means drawing a line below the text, and overlining the text means drawing a line above the text. Striking through the text means drawing a line on the text to show text is erased. In this tutorial, we will learn to use the different values of the text-decoration CSS property to style text differently. Syntax text-decoration: style decoration color thickness; Values Style – It represents the style of the decorated line, such as solid, dotted, wavy, etc. Decoration - ...
Read MoreWhich property is used as shorthand to specify a number of other font properties in CSS?
Developers can customize the font of the webpage using various CSS properties. For example, the ‘font-size’ property is used to specify the font size, and the ‘font-weight’ CSS property is used to specify the font weight of the text. Furthermore, there are lots of other CSS properties which we can use to customize the fonts. The ‘font’ CSS property can be used as a shorthand of all properties to customize the font. Syntax Users can follow the syntax below to use the ‘font’ shorthand CSS property to customize the web page's font. font: font-style font-weight font-size/line-height font-family; Values ...
Read More