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 Users can follow the syntax below to reduce the size of an icon during the animation. img { animation: icon 5s infinite; } @keyframes icon { 0% {transform: scale(1);} ... Read More

CSS wildcard selectors allow us to select an HTML element containing the particular substring in the value of the particular attribute, such as classes, id or other attributes. It is useful when style is applied to multiple elements having a common pattern in their attributes. In this article, we will be learning about wildcard selectors in CSS and it's types which are mentioned below. Contains (*=) wildcard selector Starts with (^=) wildcard selector Ends with ($=) wildcard selector Contains (*=) wildcard selector CSS contains(*=) wildcard ... Read More

The SCSS allows developers to write CSS in a more structured way. Also, we can create multiple files for CSS while using the SCSS and import the required file in the main SCSS file. In this tutorial, we will see the objective to put ‘_’ before the filename in SCSS. When should we put ‘_’ in front of the filename in SCSS? Whenever we put the -_’ before the filename in the SCSS, the compiler ignores the file while compiling the SCSS. The file becomes partial if the filename starts with the ‘_’ character. For example, we have two ... Read More

What is SASS? The full form of the SASS is Syntactically Awesome Style Sheets. It is a preprocessor or compiler which we can use to compile the SCSS. Now, the question is that what is the SCSS? The SCSS allows developers to write CSS code in a better way as it contains the variables, nested rules, functions, etc., and similar advanced features. For example, we can use variables in SCSS, so we don’t need to write a single value multiple times but can access it using the variable name. Similarly, we can create functions in SCSS and stop ... Read More

In HTML 4, the and tags were included, but in HTML 5, only the tag exists as the tag is removed by developers. Why tag exists but not tag in the HTML 5 The tag was useful to make the font size bigger than the normal fonts. For example, if the default font size in the browser is small, the big tag makes it medium. The tag is used to make a font size smaller than the normal fonts. If the default font size is medium in the browser, the ... Read More

Developers can use JavaScritp or JQuery to manipulate the style of the HTML elements. For that, first, developers need to access the HTML elements using JQuery and then use various methods to set the style for selected HTML elements. Sometimes, we require to manage elements styles using JQuery. For example, when users click the button, we need to change the text's colour, image dimensions, etc. In this case, we can use the JQuery methods below to change the HTML elements' style. Use the CSS() method of JQuery to set styles on selected elements The first method is the css() ... Read More

In SASS, the directive is a special symbol that starts with the ‘@’ character. There are various kinds of directives that are used in the SCSS code, instructing the compiler to process the code in a particular way. In this tutorial, we will learn about the @error and @debug directives used to throw an error or debug the code, respectively. @error directive in SASS The error directive is represented like ‘@error’, and we can use it whenever we require to throw an error. For example, if some condition doesn’t meet, we require to throw an error. Syntax Users ... Read More

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. Steps to Create Shimmer Effect We will be following below mentioned steps to create shimmer effect using CSS. We are having two boxes wrapped inside a div container. The container class sets the dimension of ... Read More

While creating the responsive design for the application, it is also necessary to create a responsive card designs. Sometimes, developers require to add a hover effect on the card. So, when the user hovers over the card, it should change the style of the card. Here, we will learn to add a hover effect on the card and change the CSS whenever the user hovers over the card. Syntax Users can follow the syntax below to add the hover effect to the card. .card:hover { /* add css to set to element on hover */ ... Read More

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, we have set 100% width ... Read More