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
Articles by Shabaz Alam
Page 3 of 6
How to Rotate Container Background Image using CSS?
To rotate container background image using CSS is a powerful technique to enhance the visual presentation of a website. In this article, we will explore three different approaches to rotate container background images using CSS transform functions. We have a background image in a div container, and our task is to rotate the container background image using CSS. Syntax selector { transform: rotate(angle); /* or */ transform: matrix(a, b, c, d, tx, ty); /* or */ ...
Read MoreHow to Select Multiple Files using HTML Input Tag?
The HTML input tag is a powerful tool that allows developers to create dynamic web pages. One useful feature of the input tag is the ability to select multiple files at once using the multiple attribute. The input tag in HTML has various attributes that allow us to customize the behavior of the tag. The most commonly used attribute for file selection is the type attribute with a value of file. This attribute tells the browser that the input element is used for selecting files. Syntax In the above syntax − ...
Read MoreHow to select elements by data attribute using CSS?
CSS (Cascading Style Sheets) provides multiple ways to target and style specific HTML elements based on their attributes. One of the most useful and powerful methods to select elements is by using data attributes. Syntax [data-attribute] { /* Styles for elements that have the data attribute */ } [data-attribute="value"] { /* Styles for elements with specific data attribute value */ } What are Data Attributes? Data attributes are HTML attributes that provide additional information about an element. These attributes begin with the word "data-" followed ...
Read MoreHow to Rotate Image in HTML?
Images are an important part of the web page, and they need to be rotated sometimes to make them look better or fit on a web page. Image rotation in HTML is a relatively simple process that can be completed using CSS. The process of changing the orientation of an image from a specific angle is called image rotation. The CSS transform property is a common and easy way to rotate an image. This property is used to move, rotate, scale, and perform several kinds of transformations of elements. Syntax Following is the syntax to rotate image ...
Read MoreHow to Right-align flex item?
The CSS flexbox layout provides several methods to right-align flex items within a container. This is a common requirement in web design for creating navigation bars, button groups, and other interface elements where items need to be positioned on the right side. Syntax /* Method 1: Using justify-content */ .container { display: flex; justify-content: flex-end; } /* Method 2: Using margin-left auto */ .container { display: flex; } .right-item { margin-left: auto; } /* Method 3: Using align-self (for ...
Read MoreHow to rotate an element using CSS?
To rotate an element using CSS, you can use the transform property with various rotation functions. This provides a powerful way to enhance the visual presentation of your website elements. Syntax selector { transform: rotate(angle); /* or */ transform: matrix(a, b, c, d, tx, ty); /* or */ transform: rotate3d(x, y, z, angle); } Method 1: Using rotate() Function The rotate() function rotates an element around a fixed point on a two−dimensional plane. It ...
Read MoreHow to create linear gradient background using CSS?
Linear gradient background in CSS is a design technique used to create a smooth transition between two or more colors in a single element. It is defined using the CSS background-image property and the linear-gradient() function. Syntax selector { background: linear-gradient(direction, color1, color2, ...); } Linear Gradient Properties in CSS PropertyDescription directionSpecifies the direction of the gradient (to top, to right, 45deg, etc.) color-stopsColors used in the gradient and their position repeating-linear-gradientCreates a repeating gradient pattern background-sizeSpecifies the size of the gradient background background-positionSpecifies the position of the gradient ...
Read MoreHow to create gooey balls animation using HTML & CSS?
Gooey balls animation is a visually appealing effect created using HTML and CSS that makes circular elements appear smooth, flowing, and squishy − like balls made of goo. This animation style uses CSS keyframes to specify property values at different points in the animation timeline, creating engaging visual effects for websites. Syntax @keyframes animation-name { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } .element { animation: animation-name duration timing-function iteration-count; } ...
Read MoreHow to create button hover animation effect using CSS?
The hover animation effect in CSS refers to the change in appearance of an element when the mouse pointer is over it. We use CSS to create various animation effects on hover, such as scaling, fading, sliding, or rotating elements. Syntax selector:hover { property: value; transition: property duration ease-function; } Key Properties for Button Hover Animations transform − This property allows you to scale, rotate, or translate an element. opacity − This property sets the transparency level of an element, where 1 is fully visible ...
Read MoreHow to Play and Pause CSS Animations using CSS Custom Properties?
In CSS, animation is an effective way to add some visual flair to the website. However, sometimes we want to have more control over when and how these animations play. Here, we will explore how to play and pause CSS animations using CSS custom properties. Before we go ahead, we should know that CSS animations can be created using keyframes or by transitioning between two or more states. Syntax @keyframes animation-name { /* define the animation steps */ } selector { animation-play-state: running | paused; } ...
Read More