Found 1594 Articles for CSS

Design a Rotating card effect using HTML and CSS

Yaswanth Varma
Updated on 22-Jan-2024 11:42:20

608 Views

The effect on cards that will spin slightly when you move your mouse over them is known as rotating cards. Hovering over the cards will reveal any information, links, or images that are present on them. Let’s dive into the article where we are going to design a rotating card effect using HTML and CSS, in which we are going to use the HTML tag. Before we jump into the article, let’s have a quick look at the tag. HTML tag The tag is also known as the Division tag. HTML uses the tag to ... Read More

How to add a rounded border with CSS?

Yaswanth Varma
Updated on 22-Jan-2024 11:25:12

180 Views

Using CSS, we can build a visually appealing HTML document. Some elements or images may have rounded borders, which is something we might want to consider while building a web page. With this, we can use the CSS border-radius property. Because the rounded borders refer to security, and dependability—all of which improve user experience—we might refer to them as "friendly rectangles" a lot. Let’s dive into the article to learn more about adding a rounded border with CSS. Before that, we will have a quick look at the CSS border-radius property. CSS border-radius property An element's outer border edges can ... Read More

Design a Contact us Page using HTML and CSS

Yaswanth Varma
Updated on 19-Jan-2024 18:11:32

746 Views

It really doesn't make sense to have a contact form on a website without one, much like a burger without a bun. If your business is online, you must have a method for clients to get in touch with you. A "Contact Us" form is an online form that website users can use to submit messages or requests to the website's owners or operators. It provides customers with an easy way to get in touch with the company, organization, or person operating the website without requiring them to use means of contact like phone calls or emails. The data is ... Read More

How to add a specific color to an element using CSS?

Yaswanth Varma
Updated on 19-Jan-2024 17:04:11

211 Views

A basic way that people express themselves is via the use of color. Before they even have the manual skill to sketch, children play with color. Perhaps for this reason, when learning to create websites, people frequently wish to play with color as one of the initial elements. There are several ways to add color to your HTML elements using CSS to get the exact look you desire. You may manage the appearance of your HTML elements with CSS (Cascading Style Sheets), including their colors, fonts, sizes, and positions. Let’s look one by one on adding a specific color ... Read More

How is border-box different from content-box?

Yaswanth Varma
Updated on 19-Jan-2024 14:53:44

319 Views

A beautiful website can be created using the stylesheet language CSS (Cascading Style Sheets). Utilizing this will make the process of making web pages visually appealing simpler. You can use it to apply styles to web pages. When utilizing width or height, the CSS Box Sizing property gives us the option to select either the border-box or content-box property. CSS by default applies the specified width and height to the content inside. Let’s dive into the article to learn about the border-box that is different from content-box. CSS border-box property The width and height properties in this mode include content, ... Read More

How to use text as background using CSS?

Abhishek
Updated on 20-Nov-2023 18:36:34

1K+ Views

In general, we use text in foreground not as background because text is the most important thing for any website and organizing text on frontend with good visibility, readability and fonts to show the users is also important. But sometimes, you need to show the text as background for other text or HTML element with some content. In that case you can use the z-index property of CSS with different properties to show text as background. There are two different ways of using the z-index property with other properties and selectors to show text as background using CSS as listed ... Read More

How to use font-feature-settings property in CSS?

Abhishek
Updated on 20-Nov-2023 17:49:25

244 Views

The font-feature-settings property is used to control the advance typographic features in open type fonts. The advance typographic features like swashes, small caps and the ligatures can be controlled using the font-feature settings property of CSS. The font-feature-settings property is used by passing two different values as listed below − The first value is the property is used to define the open tyoe feature tags like: "smcp" (small caps), "swsh" (swash). It also has some global values like: "inherit", "initial", and "unset". The second value that is passed to this property will almost be in the form of binary ... Read More

How to use font-variant-settings property in CSS?

Abhishek
Updated on 20-Nov-2023 17:46:59

57 Views

CSS is a way of styling the web pages according to the consumer needs and the design you want. It provides a lot of properties to style our components or pages. The font-variant-settings is also one of those properties that is provided by CSS to style our web pages. The font-variant-settings property provides users a good and healthy low-level control over the fonts with different characteristics and properties. Using font-variant-settings property in CSS The font-variant-settings property can be used in three different ways by giving different types of values to it. The different ways of using this property are explained ... Read More

How to set the size of specific flex-item using CSS?

Abhishek
Updated on 20-Nov-2023 16:25:43

193 Views

In CSS, we can create our own flexbox using some flex properties provided by the CSS. The CSS flexbox is used to create the responsive layout for the mobile and other small screen devices to arrange the layout by adjusting their sizes for those screen sizes. To create a flexbox for the web page to manage items and their sizes, we are allowed to use the display: flex; property and then we can use the flex properties which are associated with this property to arrange the items according to the striking device width. Let us now discuss and understand the ... Read More

How to set the order of flexible items using CSS?

Abhishek
Updated on 20-Nov-2023 15:29:51

139 Views

Generally, all the HTML elements renders on the web page in the same order in which they are defined in the HTML document. But we can change the order of any element using the order property of CSS. We can use the order property on the elements which are defined inside a flexbox or an element that contains the display: flex; property. Once we used the display flex on the parent element, we can use the order property to change the order of the child flexible items using the order property. NOTE − Please make a note that the order ... Read More

Previous 1 ... 5 6 7 8 9 ... 160 Next
Advertisements