Generally, we use the box-shadow property to apply shadow around any box or container. The box shadow property in CSS by default applies the shadow outside around the boundaries of the container. But we can also use the box shadow property to set the shadow inside the container as well. Let us see how we can use the box shadow property to set the inner shadow to a container and make it look attractive. Syntax We can use the box shadow property with different number of values for different purposes as shown in the below syntax − box-shadow: x-offset ... Read More

Generally, the cursor on any browser window is of arrow type by default. But you can change the cursor style or type to any style of your choice for any kind of text. There are many cursor style options that are available in CSS that you can choose to style your cursor like pointer, zoom-in, zoom-out etc. You can also use any image or icon as a cursor style value to change the cursor style to an image. There is a cursor property provided by the CSS that we can use to style our cursor on browser using CSS. Let ... Read More

In general, we use JavaScript to set the dynamic content as counter for the content on the web page. But in this article, we are going to learn how we can set the content as counter using the CSS counter properties. It is possible to set content as counter by using the counter properties inside the before or after pseudo selectors. Let us now see the counter properties we can use to set the content as counter using CSS. The CSS counters are just like the variables in other languages. We can increment their values using CSS rules or properties. ... Read More

In general, the default position of an image is left aligned on the web page. But you can change the position of an image according to your needs and set the position of an image manually on the web page where you have to show that particular image. Let us now discuss about the ways of positioning an image on the webpage using CSS. There are two methods or approaches in general to position an image on the web page using CSS that are listed below − Using the float property of CSS Using the object-position property of CSS ... Read More

Padding in CSS is used to give some space around the content of the element. You can add the space around the any type of content that is contained by the element. The content can be direct text, or any other nested elements inside it. You can easily add the space you want to set between the content and the boundaries of the element. Padding is the inner space, that is set only around the content and between the boundaries and content of element. Let us see how you can add padding inside an element around its content using CSS. ... Read More

The padding property in CSS is used to set the inner space between the content and the boundaries of the container. The space defined using the padding property will be set around the content of the container not around the container itself. It will set the space inside the container not outside it. Let us see the different ways or methods of applying the padding around an element using CSS. There are two ways in which we can set padding around the content of an element using CSS as listed below − Using the individual padding property for each ... Read More

CSS can be used to make HTML hidden components visible when hovered over. This article will teach you how to reveal the hidden elements. Utilizing an adjacent sibling selector, we can use CSS to display any HTML element when the user hovers above the tag. When selecting an element that is close to or adjacent to a specific selector tag, the adjacent sibling selector is used. This combinator only chooses one tag that is adjacent to the target tag. Let's dive into the article for getting better understanding on displaying element on hovering over tag using CSS. ... Read More

The task we are going to perform in this article is to set the shadow color of a using CSS. Like every object we can observe has a shadow, we can also make any color a shadow for the element by using CSS. You have probably seen several special effects while browsing the majority of websites. Let's get a better understanding on creating a shadow color of using CSS further in this article. This can be done by using the box-shadow property. CSS box-shadow property In CSS, the box-shadow property is used to give an element's frames ... Read More

As its name suggests, CSS (Cascading Style Sheets) is a language that deals with how a website should see and feel. You can choose the fonts, colors, and page layouts, among other things. CSS and HTML are frequently compared to the design of a house and its foundation, respectively. The display of a document published in a markup language can be described using CSS (Cascading Style Sheets), a style sheet language. A style sheet is a set of guidelines that instructs a web browser on how to display an HTML or XML document. All HTML tags, including the body of ... Read More

You have probably seen several special effects while browsing the majority of websites, which may be viewed while your cursor is over various images. We are going to process same in this article. Such images could serve as a cards for our website. The task we are going to perform in this article was to apply glowing effect to the image using HTML and CSS. The task can be accomplished by using the box-shadow property. let's dive into the article to learn more about applying the glowing effect. Using box-shadow property The box-shadow property allows you to cast a drop ... Read More