Программирование
Поиск терминов для 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.