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 Chandu yadav
Page 18 of 81
How can I add video to site background in HTML 5?
HTML5's element allows you to create stunning background videos that automatically play and loop behind your content. This technique is commonly used for modern, engaging websites. HTML Structure The basic HTML structure requires a video element with specific attributes for background functionality: #myVideo { position: fixed; right: 0; ...
Read MoreSet heights and widths of forms with Bootstrap
Bootstrap provides classes to control form element heights and widths. Use .input-lg, .input-sm for height sizing, and grid classes like .col-lg-* for width control. Height Sizing Classes Bootstrap offers three height sizes for form controls: .input-lg - Large height input Default - Standard height (no class needed) .input-sm - Small height input Width Control with Grid System Use Bootstrap's grid classes to control form element widths. Wrap inputs in .row and use column classes like .col-lg-2, .col-lg-3, etc. Example Here's how to implement different form sizes: ...
Read MoreFlexbox and vertical scroll in a full-height app using newer Flexbox API with HTML
The flex property is a shorthand for the flex-grow, flex-shrink, and flex-basis properties. The flex property sets the flexible length on flexible items. When creating full-height applications with scrollable content areas, proper flexbox configuration is essential. Basic Flexbox Scroll Setup To create a scrollable flex item that takes up remaining space, use flex: 1 1 auto with overflow-y: auto: #container { display: flex; flex-direction: column; height: 100vh; } #container article { flex: 1 1 auto; ...
Read MoreCSS top property with Animation
The CSS top property specifies the vertical position of a positioned element. When combined with CSS animations, you can create smooth movement effects by animating changes to the top value over time. Syntax selector { top: value; animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { percentage { top: value; } } Example: Animating Top Property The following example demonstrates how to animate the top property to create a ...
Read MoreAnimate CSS padding-left property
The CSS padding-left property can be animated to create smooth transitions that change the left padding of an element over time. This creates a visual effect where content moves horizontally as the padding increases or decreases. Syntax selector { animation: animation-name duration timing-function; } @keyframes animation-name { from { padding-left: initial-value; } to { padding-left: final-value; } } Example The following example animates the padding-left property from 0px to 50px and back − ...
Read MorePerform Animation on CSS min-width
The CSS min-width property can be animated to create dynamic width transitions. This property sets the minimum width of an element, and when animated, it smoothly transitions between different minimum width values. Syntax selector { animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { percentage { min-width: value; } } Example: Animating min-width Property The following example demonstrates how to animate the min-width property using CSS keyframes − ...
Read MoreWrap the flex items in reverse order with CSS
Use the flex-wrap property with wrap-reverse value to wrap flex items in reverse order. This means that when flex items exceed the container's width and need to wrap, they will wrap in the opposite direction compared to the normal wrap behavior. Syntax selector { flex-wrap: wrap-reverse; } Example The following example demonstrates how wrap-reverse wraps flex items in reverse order − .mycontainer { display: flex; ...
Read MorePerform Animation on border-right-width property
The CSS border-right-width property can be animated to create smooth transitions of the right border thickness. This creates engaging visual effects where the border grows or shrinks over time. Syntax selector { animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { from { border-right-width: initial-value; } to { border-right-width: final-value; } } Example The following example demonstrates animating the border-right-width from 15px to 25px − .animated-border { ...
Read MoreAnimated background with CSS
CSS animated backgrounds allow you to create dynamic visual effects by changing background properties over time. The @keyframes rule defines the animation sequence, while the animation property applies it to elements. Syntax @keyframes animation-name { from { background: initial-state; } to { background: final-state; } } selector { animation: animation-name duration timing-function iteration-count; } Example: Color Transition Animation The following example demonstrates a smooth background color transition that cycles through different colors − ...
Read MoreUsage of CSS grid-auto-rows property
The CSS grid-auto-rows property sets the default height for grid rows that are created automatically (implicitly) when grid items don't fit in the explicitly defined rows. This property is essential for controlling the sizing of rows in CSS Grid layouts. Syntax selector { grid-auto-rows: value; } Possible Values ValueDescription lengthFixed size in px, em, rem, etc. %Percentage of the grid container's height min-contentMinimum size needed to fit content max-contentMaximum size needed for content autoSize based on content (default) frFraction of available space Example: Fixed Row Height ...
Read More