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
CSS Articles
Page 14 of 130
How to Create a Combined Child Selector in SASS?
Sass (Systematically Awesome Style Sheets) is a CSS preprocessor that extends CSS with powerful features like variables, nesting, mixins, and inheritance. One of Sass's most useful features is the ability to create nested selectors, including combined child selectors that target direct children of elements. Syntax parent { > child { property: value; } } What is a Child Selector? A child selector (>) targets only the direct children of a parent element, not deeper nested descendants. In CSS, ...
Read MoreHow to divide text into two column layout using HTML and CSS?
Creating a two-column text layout is a common web design requirement for displaying content side-by-side. This can be achieved using HTML div elements combined with CSS positioning properties like float or modern layout methods like flexbox. Syntax .column { width: 50%; float: left; } Properties Used The following CSS properties are commonly used for two-column layouts − width − Defines the width of each column (typically 50% or specific pixel values) float − Positions elements side-by-side (left/right) margin − Creates spacing around columns padding ...
Read MoreHow to dynamically create \'@-Keyframe\' CSS animations?
In CSS, the @keyframes rule specifies a sequence of styles that an element should go through during the animation. The @keyframes rule allows you to create dynamic animations by defining specific points (keyframes) in an animation timeline where certain CSS properties should have particular values. These styles are then applied to elements via the animation property, which sets the animation's duration, timing function, and other properties to create smooth transitions between keyframe states. Syntax @keyframes animation-name { 0% { /* CSS properties */ } 50% { /* CSS ...
Read MoreHow to design Meet the Team Page using HTML and CSS
In this article, we will learn how to design a "Meet the Team" page using HTML and CSS. The team page plays a very important role while creating websites for any business or organization. People from different countries connect with the business through team members. The team page is a great way to introduce the team that shows the members of the organization or company. Key Properties Used The following CSS properties are used in this example − text-align − Aligns text content to center, left, or right. background-color − Sets the background color of elements. ...
Read MoreCreating Browsers Window using HTML and CSS
A browser window is the graphical user interface (GUI) element of a web browser that displays web pages and web applications. It usually consists of a title bar, menu bar, address bar, navigation buttons, and content area. Syntax .container { border: 1px solid #ccc; border-radius: 5px; overflow: hidden; } .buttons { display: flex; } .minimize, .maximize, .close { width: 12px; height: 12px; border-radius: 50%; } ...
Read MoreCreating Border Animation using CSS
CSS border animations add visual appeal and interactivity to web elements by creating smooth transitions and movements around element borders. These animations can enhance user experience through hover effects, loading indicators, and attention-grabbing buttons. Syntax selector { border: width style color; animation: name duration timing-function iteration-count; transition: property duration timing-function; } Method 1: Hover Effect with Border Color Animation This example creates a pulsing border animation that changes to a gradient border on hover − ...
Read MoreCreating a Tabbed pills and Vertical pills navigation menu in Bootstrap
Bootstrap provides several options for creating navigation menus, including tabbed pills and vertical pills. These navigation components use Bootstrap's built-in classes to create stylish and functional menus that work well on all devices. Syntax /* Tabbed Pills Navigation */ .nav.nav-pills { /* Horizontal pill navigation */ } /* Vertical Pills Navigation */ .nav.nav-pills.flex-column { /* Vertical pill navigation */ } Method 1: Tabbed Pills Navigation Tabbed pills arrange navigation links horizontally, where each tab represents a different section. When a tab is clicked, the corresponding ...
Read MoreCreating Snackbar using HTML, CSS and Javascript
Snackbars are notification bars that appear at the bottom of a web page to display an important message, usually to confirm an action or provide feedback to the user. They are displayed on the screen for a few seconds and then disappear automatically. They are an essential element of user interface design and are widely used in web applications. Syntax A basic snackbar consists of HTML structure, CSS styling for positioning and animations, and JavaScript for show/hide functionality − .snackbar { visibility: hidden; position: fixed; ...
Read MoreCreating a skewed background using CSS
A skewed background is a design effect that creates a diagonal or angled appearance on the background of a web page or element. This effect can be achieved using CSS transforms to skew the container element, along with other CSS properties like background-color, gradients, and images to create the desired visual effect. Syntax /* Using transform */ .skewed-element { transform: skewY(angle); } /* Using clip-path */ .clipped-element { clip-path: polygon(coordinates); } Method 1: Using Transform Property The following example creates a skewed background using the ...
Read MoreHow to set the width of the bottom border animatable using CSS?
In CSS, the border-bottom-width property controls the thickness of an element's bottom border. You can create smooth animations by combining this property with CSS animations and keyframes to gradually change the border width over time. Syntax selector { animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { 0% { border-bottom-width: initial-width; } 100% { border-bottom-width: final-width; } } Example 1: Animating Div Bottom Border The following example demonstrates how to animate a div's bottom border width from 5px to 25px and ...
Read More