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
CSS Articles
Page 25 of 130
Shake 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 MoreShimmer Effect using CSS
To create shimmer effect using CSS, we will be using CSS animations and linear-gradient properties. Shimmer effect is an animation effect used in many webpages while loading the web page. In this article we are having a layout of a box having two other child boxes, our task is to create a shimmer effect using CSS. Syntax .shimmer-element { background: linear-gradient(to right, transparent 20%, rgba(255, 255, 255, 0.5) 50%, transparent 80%); animation: shimmer duration timing-function iteration-count; } @keyframes shimmer { from { transform: ...
Read MoreResize image proportionally with CSS
To make a responsive design of the application, we also require to make an image responsive. If images are not responsive, overflow occurs in the app, and it looks worst. So, we also require to increase or decrease the images' dimensions proportional to the parent element's dimensions. Here, we will learn various ways to resize images proportionally with CSS. Syntax Users can follow the syntax below to resize the image proportionally using the 'width' CSS property. img { width: 100%; height: auto; } In the above syntax, ...
Read MoreHow to load CSS files using JavaScript?
Loading CSS files dynamically using JavaScript allows you to change page themes, implement dark/light mode toggles, or conditionally load styles based on user preferences. This technique is useful when you need to switch between different stylesheets without page refresh. Syntax /* Create link element */ const link = document.createElement("link"); link.href = "path/to/stylesheet.css"; link.rel = "stylesheet"; link.type = "text/css"; /* Append to head */ document.head.appendChild(link); Example 1: Loading CSS on Window Load This example demonstrates loading a CSS file automatically when the page finishes loading − ...
Read More