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
Articles by Jaisshree
Page 8 of 10
Creating a 5 Star Skills Rating Bar using CSS
A 5-star skill rating bar is an essential element for any portfolio website in showcasing ratings and achievements. The rating bar is responsive and can be used on various devices. Here, we have used radio buttons to create an interactive rating system. Syntax .rating { font-size: 0; direction: rtl; } .rating input { display: none; } .rating label:hover, .rating label:hover ~ label, .rating input:checked ~ label { color: #f90; } Algorithm Create an HTML document ...
Read MoreCreate Horizontal Scrollable Sections in CSS
A horizontal scrollable section is a popular web design pattern used to showcase content that extends beyond the width of the viewport. This design pattern allows users to scroll horizontally, providing a unique and engaging way to display large images, galleries, timelines, maps, and other content. Syntax .container { overflow-x: auto; white-space: nowrap; } .section { display: inline-block; width: 100vw; vertical-align: top; } Key Properties PropertyValuePurpose overflow-xauto or scrollEnables horizontal scrolling white-spacenowrapPrevents ...
Read MoreCreate Horizontal Scroll Snap Using HTML and CSS
To create a horizontal scroll snap, we use the CSS scroll-snap-type property to produce the snap effect. The properties scroll-snap-type and scroll-snap-align specify the type of snap behavior and the alignment of the snap points, respectively. Syntax /* Container */ .container { scroll-snap-type: x mandatory; overflow-x: scroll; } /* Items */ .item { scroll-snap-align: start | center | end; } Key Properties PropertyValueDescription scroll-snap-typex mandatoryEnables mandatory horizontal scrolling snap scroll-snap-alignstartAligns snap points to the start of each section overflow-xscrollEnables horizontal ...
Read MoreHow to create a Gradient Shadow using CSS ?
The CSS gradient shadow effect creates stunning visual shadows using color gradients instead of traditional solid shadows. This technique combines the ::after pseudo-element with CSS gradient functions and filter properties to create eye-catching shadows that enhance UI design. Syntax .element::after { content: ""; position: absolute; inset: -0.5rem; background: linear-gradient(direction, color1, color2, ...); /* or */ background: radial-gradient(color1, color2, ...); filter: blur(value); z-index: -1; } ...
Read MoreHow to Create Dark Theme using Slider in CSS?
Dark themes have grown in popularity recently since they can lessen eye fatigue and make it easier to watch display screens for extended periods of time. This article will discuss how to use CSS and JavaScript to create an interactive slider that toggles between light and dark themes. A CSS slider, commonly referred to as a range slider, is a user interface component that enables users to choose a value within a range by sliding a handle along a track. They are frequently employed in settings panels and web forms for theme switching. Syntax input[type="range"] { ...
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 More