प्रोग्रामिंग
Header, button, spacing, hover और responsive बदलावों को नाम देने के लिए खोज योग्य संदर्भ।
63 परिणाम
पेज संरचना
Header
The top area of a page, usually holding the site title, navigation, theme controls, language controls, and menu button.
Changing header padding, height, border, or position changes how tall and fixed the top area feels.
A taller header can reduce the visible content area, especially on mobile.
headerpaddingheightpositionborder-bottomMake the mobile header title smaller while keeping the header height the same.
पेज संरचना
Footer
The bottom area of a page, often used for links, legal text, contact information, or small navigation.
Footer padding and border changes affect the amount of breathing room and the separation from the content above.
footerpaddingborder-topmargin-topAdd more top padding to the footer so it does not feel attached to the content.
पेज संरचना
Section
A large content area that groups related content such as a hero, tools list, reference cards, or article block.
Section padding changes the vertical rhythm of the page. Background changes make the section feel separate.
sectionpadding-blockborder-topbackgroundReduce the vertical padding of the tools section on mobile.
पेज संरचना
Container
An inner wrapper that keeps page content from stretching too wide on large screens.
Increasing max-width makes content wider. Increasing side padding keeps content away from screen edges.
max-widthmargin-inlinepadding-inlineMake the main container a little narrower on desktop.
पेज संरचना
Card
A framed block that presents one repeated item, such as a tool, reference entry, or result.
Card padding, border, radius, and shadow control how dense or prominent each item feels.
borderborder-radiuspaddingbackgroundbox-shadowMake the reference cards more compact by reducing their padding.
पेज संरचना
Panel
A framed working area, usually holding controls, inputs, settings, or output.
Panel spacing and layout changes affect how easy repeated tool use feels.
borderbackgroundpaddingdisplayAlign the panel controls in one row on desktop and stack them on mobile.
पेज संरचना
Navigation
A group of links or buttons used to move between major pages or categories.
Gap, alignment, and visibility rules change how the navigation behaves on desktop and mobile.
navdisplaygapalign-itemsHide the navigation links on small screens and keep the menu button visible.
पेज संरचना
Menu
A list of links or actions that opens from a button.
Position, width, and z-index decide where the menu opens and whether it appears above other content.
If the menu is placed in normal document flow, it can push the whole page down.
positionrighttopz-indexwidthMake the menu open as a floating panel aligned to the right.
पेज संरचना
Sidebar
A vertical area at the left or right side of the page, often used for navigation or filters.
Sidebar width and responsive rules decide whether it stays visible, collapses, or moves below content.
asidewidthpositiongrid-template-columnsMove the filter sidebar below the content on mobile.
पेज संरचना
Hero
The first large section of a page that introduces the main purpose or action.
Hero padding, title size, and layout affect the first impression and how much content fits in the first viewport.
paddingbackgroundmin-heightgridReduce the hero title size on mobile so the action buttons stay visible.
स्पेसिंग और आकार
Padding
Space inside an element, between the border and the content.
Increasing padding-top adds more space above the content inside the element.
More padding usually increases the visible size of the element.
paddingpadding-toppadding-rightpadding-bottompadding-leftIncrease the top padding of the header slightly.
स्पेसिंग और आकार
Margin
Space outside an element, between it and neighboring elements.
Increasing margin-bottom pushes the next element farther down.
marginmargin-topmargin-rightmargin-bottommargin-leftAdd more margin between the hero section and the tools list.
स्पेसिंग और आकार
Gap
The space between items inside a flex or grid layout.
Increasing gap spreads sibling items apart without adding extra space around the whole group.
gaprow-gapcolumn-gapReduce the gap between the theme button, language button, and menu button.
स्पेसिंग और आकार
Width
The horizontal size of an element.
A fixed width keeps the element stable. max-width lets it shrink on small screens.
widthmin-widthmax-widthMake the menu panel width match its longest item.
स्पेसिंग और आकार
Height
The vertical size of an element.
Fixed height can keep a header stable. max-height with overflow can keep dropdowns from becoming too tall.
heightmin-heightmax-heightKeep the header height stable while making the title smaller.
स्पेसिंग और आकार
Max width
The largest width an element is allowed to reach.
Lowering max-width makes text lines shorter and panels narrower on large screens.
max-widthwidthSet a max-width on the dropdown so it does not cover too much of the page.
स्पेसिंग और आकार
Top / Right / Bottom / Left
Position offsets used with positioned elements.
right: 0 aligns a floating panel to the right edge of its positioned parent.
toprightbottomleftinsetAlign the open menu panel to the right side of the header controls.
टेक्स्ट
Font size
The size of text.
Reducing font-size helps long labels fit in tight spaces such as mobile headers.
font-sizetext-smtext-lgMake the mobile site title smaller but keep it on one line.
टेक्स्ट
Font weight
How thick or bold the text appears.
Increasing font-weight makes labels more prominent without changing their size.
font-weightfont-boldfont-semiboldMake the category labels a little bolder.
टेक्स्ट
Line height
The vertical space each line of text occupies.
Increasing line-height makes paragraphs easier to read. Reducing it makes compact UI labels tighter.
line-heightleadingIncrease the paragraph line-height in the hero description.
टेक्स्ट
Letter spacing
The space between individual letters.
Small positive spacing can help uppercase labels feel clearer. Too much spacing can make Korean text awkward.
letter-spacingtrackingRemove negative letter spacing from compact buttons.
टेक्स्ट
Text align
The horizontal alignment of text inside its container.
Right-aligned menu text can make a floating menu feel attached to the right edge.
text-alignRight-align the menu item text inside the menu panel.
टेक्स्ट
Wrap / No wrap
Whether long text can move to the next line or must stay on one line.
No-wrap keeps a header stable, while wrapping can show more text but usually increases height.
white-spaceword-breakoverflow-wrapKeep the mobile title on one line and truncate the overflow.
टेक्स्ट
Truncate / Ellipsis
A way to cut off overflowing single-line text and show dots.
Truncation prevents layout breakage when labels are longer than expected.
overflowtext-overflowwhite-spaceTruncate the site title on very small screens.
रंग और पृष्ठभूमि
Color
The color of text or icons.
Changing color affects readability and visual priority.
colorMake the selected language text visible in dark mode.
रंग और पृष्ठभूमि
Background
The color or image behind an element's content.
Background changes can separate panels, highlight active states, or improve contrast.
backgroundbackground-colorUse a darker background for the selected language item in dark mode.
रंग और पृष्ठभूमि
Opacity
How transparent an element is.
Lower opacity makes elements quieter, but it can reduce readability.
opacityrgbacolor-mixMake disabled controls look dimmer without making the text unreadable.
रंग और पृष्ठभूमि
Gradient
A smooth transition between two or more colors.
Subtle gradients can add depth, but strong gradients can make tools feel less practical.
linear-gradientradial-gradientbackground-imageKeep the hero background subtle and avoid a strong gradient.
रंग और पृष्ठभूमि
Accent color
A repeated highlight color used for labels, active states, or important actions.
Changing the accent color changes the page's visual identity and emphasis.
colorbackgroundborder-coloraccent-colorUse the same green accent for category labels and active chips.
रंग और पृष्ठभूमि
Contrast
The difference between foreground and background colors.
Higher contrast improves readability, especially in dark mode and on mobile screens.
colorbackground-colorIncrease the contrast of dropdown items in dark mode.
बॉर्डर और आकार
Border
A line around an element.
Border width and color control how strongly a box or button is separated from the background.
borderborder-colorborder-widthborder-styleMake the menu panel border slightly darker in dark mode.
बॉर्डर और आकार
Border radius
How rounded the corners of a box or button are.
A small radius feels practical and compact. A large radius feels softer and more playful.
border-radiusKeep cards at an 8px border radius.
बॉर्डर और आकार
Box shadow
A shadow around an element that makes it feel raised above the page.
Stronger shadows make floating menus or modals feel layered. Too much shadow can feel heavy.
box-shadowAdd a subtle shadow to the floating menu panel.
बॉर्डर और आकार
Outline
A line shown around an element, often when it is focused by keyboard navigation.
A clear outline helps keyboard users know which control is active.
outlineoutline-offset:focus-visibleKeep a visible focus outline on icon buttons.
बॉर्डर और आकार
Divider
A line used to separate sections or groups.
A divider can make category boundaries clearer without adding much visual weight.
border-topborder-bottomhrAdd subtle dividers between menu categories.
लेआउट और स्थिति
Display
The basic layout mode of an element.
display: none hides an element. flex and grid arrange child items.
displaydisplay: nonedisplay: flexdisplay: gridHide the desktop navigation on mobile screens.
लेआउट और स्थिति
Flex
A layout method for arranging items in a row or column.
flex-direction: column stacks items vertically. flex-wrap allows items to move to the next line.
display: flexflex-directionflex-wrapgapKeep the header controls in a flex row.
लेआउट और स्थिति
Grid
A layout method for arranging content in rows and columns.
Changing grid columns controls how many cards appear per row.
display: gridgrid-template-columnsgrid-columngapShow four tool cards per row on wide desktop screens.
लेआउट और स्थिति
Align items
How items are aligned on the cross axis inside flex or grid.
align-items: center vertically centers controls in a header row.
align-itemsplace-itemsVertically center the title and header buttons.
लेआउट और स्थिति
Justify content
How items are distributed on the main axis inside flex or grid.
justify-content: space-between pushes groups to opposite sides.
justify-contentjustify-itemsmargin-left: autoKeep the title on the left and controls on the right.
लेआउट और स्थिति
Position
How an element is placed in relation to the page or another element.
position: absolute lets a dropdown float without pushing the page layout down.
positionrelativeabsolutefixedstickyMake the menu panel absolute so it does not push the page down.
लेआउट और स्थिति
Z-index
The stacking order of positioned elements.
A higher z-index can place dropdowns above page content.
z-index only works predictably when positioning and stacking contexts are considered.
z-indexpositionRaise the language dropdown above the menu panel.
लेआउट और स्थिति
Overflow
What happens when content is larger than its container.
overflow-y: auto allows a long menu to scroll instead of extending beyond the screen.
overflowoverflow-xoverflow-ymax-heightMake long dropdown menus scroll inside a max-height.
रेस्पॉन्सिव
Breakpoint
A screen width where the layout changes.
Changing a breakpoint decides whether tablets behave more like mobile or desktop.
@mediasmmdlgxlTreat tablets as desktop for the top navigation.
रेस्पॉन्सिव
Mobile
Styles intended for small phone-sized screens.
Mobile styles often reduce font size, stack columns, and keep controls touch-friendly.
@mediamax-widthsmOn mobile, stack the cards in one column.
रेस्पॉन्सिव
Desktop
Styles intended for wider laptop or desktop screens.
Desktop styles can use more columns, horizontal navigation, and wider content containers.
@mediamin-widthlgxlOn desktop, keep the category navigation visible in the header.
रेस्पॉन्सिव
Viewport
The visible area of the browser or device screen.
Viewport units make sizes relative to the visible screen.
vwvh100vw100vhLimit the menu width to the viewport so it does not overflow on phones.
रेस्पॉन्सिव
Responsive
A design that adjusts to different screen sizes.
Responsive rules can make the same component horizontal on desktop and vertical on mobile.
@mediaclampmin()max()Make the controls responsive without changing their order.
इंटरैक्शन अवस्थाएँ
Hover
The state when a mouse pointer is over an element.
Hover styles can change background, text color, border, or shadow to show that an item is interactive.
Touch devices do not have reliable hover behavior, so important actions should also work by click or tap.
:hoverbackgroundcolortransitionAdd a background color change when hovering over menu items.
इंटरैक्शन अवस्थाएँ
Active
The short state while a button or link is being pressed.
Active styles can make buttons feel tactile with a small color or position change.
:activetransformbackgroundAdd a slight pressed effect to toolbar buttons.
इंटरैक्शन अवस्थाएँ
Focus
The state when an input, button, or link is currently selected for keyboard or typing.
Focus styles make keyboard navigation visible and accessible.
:focus:focus-visibleoutlineMake the search input focus ring match the accent color.
इंटरैक्शन अवस्थाएँ
Disabled
A state where a control is visible but cannot be used.
Disabled styles often reduce contrast and remove pointer interaction.
:disabledopacitycursorpointer-eventsMake disabled buttons visibly inactive but still readable.
इंटरैक्शन अवस्थाएँ
Selected
The state of the currently chosen item in a list, tab group, or menu.
Selected styles usually need stronger background or text color than normal items.
aria-currentdata-statebackgroundcolorMake the selected category chip clearly different from the others.
इंटरैक्शन अवस्थाएँ
Open / Closed
Whether a dropdown, menu, or accordion panel is currently visible.
Open and closed states need clear indicators such as plus/minus icons or arrow rotation.
aria-expandeddisplayheightvisibilityKeep all menu categories closed by default.
UI घटक
Button
A control that performs an action when clicked or tapped.
Button padding, border, color, and states determine how easy and important it feels.
buttonpaddingborderbackgroundcursorMake the primary action button more prominent than the secondary button.
UI घटक
Icon button
A button represented mainly by an icon instead of text.
Stable width and height prevent icon buttons from shifting as states change.
buttonwidthheightaria-labeldisplay: gridKeep the menu icon button square and aligned with the language button.
UI घटक
Dropdown
A floating list that appears after pressing a button or select control.
Dropdown position, width, max-height, and z-index control placement and layering.
positiontoprightz-indexbox-shadowWhen the language dropdown opens, close the site menu.
UI घटक
Accordion
A section that can be opened or closed to show or hide its content.
Accordions make long menus shorter by keeping categories closed until needed.
aria-expandedheightdisplayoverflowAdd open and close behavior to each menu category.
UI घटक
Tabs
A control for switching between related views without leaving the page.
Selected tab styling must clearly show which view is active.
role=tablistdisplayborderbackgroundMake the active tab background darker than inactive tabs.
UI घटक
Modal
A focused overlay panel that appears above the page.
Modal width, backdrop, and z-index control how strongly it interrupts the page.
dialogposition: fixedinsetz-indexbackdropCenter the modal and keep it narrower than the viewport.
UI घटक
Tooltip
A small hint shown near a control, often on hover or focus.
Tooltips help explain icon-only buttons without adding permanent text.
positiontitlearia-describedbyz-indexAdd a tooltip that labels the menu icon button.
UI घटक
Input
A field where the user types text or values.
Input padding, border, placeholder color, and focus style affect comfort and clarity.
inputborderpaddingplaceholder:focusMake the search input full width and easier to tap on mobile.
UI घटक
Badge / Chip
A small rounded label or filter control.
Chip size, radius, and active color affect how scannable filters feel.
border-radiuspaddingbackgroundfont-sizeMake active category chips visually stronger.