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 462 of 652
Which property specifies the distance between nearest border edges of marker box and principal box?
The CSS marker-offset property specifies the distance between the nearest border edges of the marker box and the principal box. The marker refers to the bullet points or numbers in lists. However, it's important to note that this property was deprecated and removed from CSS specifications due to limited browser support. Important: The marker-offset property is obsolete and no longer supported in modern browsers. For similar functionality, use padding-left or margin-left on list items instead. Syntax selector { marker-offset: value; } Example 1: Unordered List with Marker Offset ...
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 crossed out or 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: decoration-line decoration-style decoration-color decoration-thickness; Possible Values PropertyValuesDescription decoration-lineunderline, overline, line-throughType of decoration decoration-stylesolid, dotted, dashed, ...
Read MoreWhich property is used as shorthand to specify a number of other font properties in CSS?
The CSS font property serves as a shorthand for specifying multiple font-related properties in a single declaration. Instead of writing separate properties for font-style, font-weight, font-size, line-height, and font-family, you can combine them all using the font property. Syntax selector { font: font-style font-weight font-size/line-height font-family; } Values PropertyDescriptionExample Values font-styleSpecifies the style of the fontnormal, italic, oblique font-weightSpecifies the weight (boldness) of the fontnormal, bold, 100-900 font-sizeSpecifies the size of the fontpx, em, rem, % line-heightSpecifies the line height (optional)normal, numbers, px, em font-familySpecifies the font familyArial, serif, ...
Read MoreShake a Button on Hover using HTML and CSS
To shake a button on hover using HTML and CSS, we should have basic understanding of CSS animations and keyframes. We will be understanding how to utilize CSS animation and keyframes to apply shaking effect to a button on hovering. Syntax .button:hover { animation: shake-name duration timing-function iteration-count; } @keyframes shake-name { 0%, 100% { transform: transform-function(start-value); } 50% { transform: transform-function(end-value); } } Method 1: Rotational Shake Effect The following example creates a button that shakes by rotating left and ...
Read MoreHow to remove border from Iframe using CSS?
To remove border from iframe using CSS can be useful when you don't want unwanted borders when integrating content from other sources on your webpage like YouTube videos, other webpages, etc. An iframe is an inline frame that allows us to embed another document within the current HTML document. In this article, we will discuss various approaches to remove borders from iframes using CSS. We have an iframe window which displays the content of other webpages in our HTML document. Our task is to remove the border around the iframe window. Syntax iframe { ...
Read MoreProgramming a slideshow with HTML and CSS
Programming a slideshow using HTML and CSS, we should have a basic understanding of HTML and CSS animations. Slideshow displays a series of content in a sequential manner with smooth transitions. In this article, we will discuss how to create a slideshow using HTML and CSS without using JavaScript. We are having a set of div elements having textual content or images as slides. Our task is to program a slideshow using HTML and CSS. Basic Syntax /* Container for the slideshow */ .slideshow-container { overflow: hidden; width: ...
Read MoreReduce the size of an icon during the animation
It is important to add animations to icons or images to improve the UX of the application. In this tutorial, we will learn to add animation to the icons. Also, we will learn to reduce or increase the size of the icon during the animation. We will use the transform: scale() property to change the dimensions of the icon during the animation. Syntax img { animation: icon 5s infinite; } @keyframes icon { 0% {transform: scale(1);} 100% {transform: scale(0.6);} } In the above syntax, ...
Read MoreWildcard Selectors (*, ^ and $) in CSS for classes
CSS wildcard selectors allow us to select HTML elements containing a particular substring in the value of attributes like class, id, or other attributes. They are useful when applying styles to multiple elements having a common pattern in their attributes. In this article, we will learn about three types of wildcard selectors − Contains (*=) wildcard selector Starts with (^=) wildcard selector Ends with ($=) wildcard selector Syntax /* Contains wildcard */ [attribute*="value"] { /* styles */ } /* Starts ...
Read MoreWhy to put “_” in front of filename in SCSS?
In SCSS, placing an underscore (_) at the beginning of a filename creates a partial file. This tells the SCSS compiler to ignore the file during compilation, preventing it from generating a separate CSS file. Partials are designed to be imported into other SCSS files. When to Use Underscore Prefix Use the underscore prefix when creating SCSS files that contain − Variables and mixins Reusable CSS components Files meant to be imported, not compiled independently For example, _variables.scss and _mixins.scss are partials, while main.scss is a regular file that gets compiled. Example 1: ...
Read MoreWhy does SASS cache folder is created?
SASS (Syntactically Awesome Style Sheets) is a CSS preprocessor that allows developers to write more powerful and organized stylesheets using features like variables, nesting, mixins, and functions. When SASS compiles SCSS files to CSS, it automatically creates a cache folder to optimize the compilation process. What is SASS? SASS is a preprocessor that compiles SCSS (Sassy CSS) files into standard CSS. SCSS extends CSS with advanced features like variables, nested rules, functions, and mixins, making stylesheets more maintainable and reducing code repetition. What is a Cache Folder? A cache folder is a directory where SASS stores ...
Read More