To removing border from iframe using CSS can be useful when you don't want unwanted border when you integrate content from other sources on your webpage like youtube video, another webpage etc. An iframe is an inline frame that allows us to embed another document within the current HTML document. In this article, we will be discussing various approaches to remove border from iframe using CSS. We are having an iframe window which display the content of other webpage in our HTML document. Our task is to remove the border around the iframe window. Approaches to Remove Border from Iframe ... Read More

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. Steps for Programming a Slideshow with HTML and CSS We will be following a two step process for programming a slideshow with HTML and CSS ... Read More

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 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