Programmierung
Eine durchsuchbare Referenz für Header, Buttons, Abstände, Hover-Zustände und responsive Änderungen.
63 Treffer
Seitenstruktur
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.
Seitenstruktur
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.
Seitenstruktur
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.
Seitenstruktur
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.
Seitenstruktur
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.
Seitenstruktur
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.
Seitenstruktur
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.
Seitenstruktur
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.
Seitenstruktur
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.
Seitenstruktur
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.
Abstand und Größe
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.
Abstand und Größe
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.
Abstand und Größe
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.
Abstand und Größe
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.
Abstand und Größe
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.
Abstand und Größe
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.
Abstand und Größe
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.
Text
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.
Text
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.
Text
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.
Text
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
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.
Text
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.
Text
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.
Farbe und Hintergrund
Color
The color of text or icons.
Changing color affects readability and visual priority.
colorMake the selected language text visible in dark mode.
Farbe und Hintergrund
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.
Farbe und Hintergrund
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.
Farbe und Hintergrund
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.
Farbe und Hintergrund
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.
Farbe und Hintergrund
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.
Rahmen und Form
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.
Rahmen und Form
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.
Rahmen und Form
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.
Rahmen und Form
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.
Rahmen und Form
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.
Layout und Position
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.
Layout und Position
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.
Layout und Position
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.
Layout und Position
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.
Layout und Position
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.
Layout und Position
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.
Layout und Position
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.
Layout und Position
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.
Responsiv
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.
Responsiv
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.
Responsiv
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.
Responsiv
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.
Responsiv
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.
Interaktionszustände
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.
Interaktionszustände
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.
Interaktionszustände
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.
Interaktionszustände
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.
Interaktionszustände
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.
Interaktionszustände
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-Komponenten
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-Komponenten
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-Komponenten
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-Komponenten
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-Komponenten
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-Komponenten
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-Komponenten
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-Komponenten
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-Komponenten
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.