НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP ЯК ЗРОБИТИ W3.CSS JQUERY XML JAVA GO БІЛЬШЕ 🔍 ◑ КНИГИ ДОВІДНИКИ ВПРАВИ

CSS Підручник

CSS СТАРТ CSS Інтро CSS Синтаксис CSS Селектори CSS Як підключити CSS Коментарі CSS Кольори
Кольори RGB HEX HSL
CSS Фони
Background Колір Background Зображення Background Повторення Background Прикріплення Background Shorthand
CSS Межі
Межі Ширина межі Колір межі Сторони межі Border Shorthand Закруглені межі
CSS Поля
Поля Згортання полів
CSS Внутрішній відступ CSS Висота/Ширина CSS Блочна модель CSS Контур
Контур Ширина контура Колір контура Outline Shorthand Outline Offset
CSS Текст
Text Колір Text Вирівнювання Text Оформлення Text Трансформація Text Інтервал Text Тінь
CSS Шрифти
Сімейство шрифту Веб-безпечні шрифти Резервні шрифти Стиль шрифту Розмір шрифту Google-шрифти Поєднання шрифтів Font Shorthand
CSS Іконки CSS Посилання CSS Списки CSS Таблиці
Межі таблиці Розмір таблиці Вирівнювання в таблиці Стиль таблиці Адаптивність таблиці
CSS Display CSS Max-Width CSS Position CSS Z-index CSS Overflow CSS Float
Float Clear Float Приклади
CSS Inline-Block CSS Вирівнювання CSS Комбінатори CSS Псевдо-класи CSS Псевдо-елементи CSS Непрозорість CSS Панель навігації
Панель навігації Вертикальний навбар Горизонтальний навбар
CSS Випадаючі списки CSS Галерея зображень CSS Спрайти зображень CSS Селектори атрибутів CSS Форми CSS Лічильники CSS Макет веб-сайту CSS Одиниці CSS Специфічності CSS !important CSS Математичні функції

CSS Розширений

CSS Закруглені кути CSS Межі зображень CSS Фони CSS Кольори CSS Кольори. Ключові слова CSS Градієнти
Лінійні градієнти Радіальні градієнти Конічні градієнти
CSS Тіні
Ефекти тіні Тінь блоку
CSS Ефекти тексту CSS Веб-шрифти CSS 2D Трансформації CSS 3D Трансформації CSS Переходи CSS Анімації CSS Підказки CSS Стилі зображень CSS Image Reflection CSS Підгонка об'єкту CSS object-position CSS Masking CSS Кнопки CSS Нумерація сторінок CSS Кілька стовпців CSS Користувальницький інтерфейс CSS Змінні
Функція var() Перевизначення змінних Змінні та JavaScript Змінні в медіа-запитах
CSS Розміри блоків CSS Медіа-запити CSS Приклади медіа-запитів CSS Flexbox
CSS Flexbox CSS Flex Контейнер CSS Flex Елементи CSS Flex Адаптивність

CSS Адаптивний

RWD Інтро RWD Область перегляду RWD Вигляд сітки RWD Медіа-запити RWD Зображення RWD Відео RWD Фреймворки RWD Шаблони

CSS Grid (Сітка)

Grid Інтро Grid Контейнер Grid Елементи

CSS SASS

Підручник

CSS Приклади

CSS Шаблони CSS Приклади CSS Сніпети CSS Вікторина CSS Вправи CSS Сертифікат

CSS Довідники

CSS Довідник CSS Селектори CSS Функції CSS Довідник аудіо CSS Безпечні веб-шрифти CSS Анімація CSS Одиниці CSS PX-EM Конвертер CSS Кольори CSS Значення кольору CSS Значення за замовчуванням CSS Підтримка браузерами

CSS3. Уроки W3Schools для початківців українською мовою

En

CSS Приклади

❮ Prev Next ❯

CSS Синтаксис

CSS Синтаксис

CSS Пояснення синтаксису

CSS Селектори

The element selector The id selector The class selector (for all elements) The class selector (for only <p> elements) An HTML element that refer to two classes The universal selector Grouping selectors

CSS Пояснення селекторів

CSS Як зробити / Де зробити

External CSS Internal CSS Inline CSS Multiple style sheets Cascading order

CSS Пояснення Як зробити

CSS Коментарі

Single-line comment Multi-line comment

CSS Пояснення коментарів

CSS Кольори

Set the background color of an element Set the text color Set the border color Set different color values Set RGB values Set HEX values Set HSL values

CSS Пояснення кольорів

CSS Фони

Set the background color of a page Set the background color of different elements Set an image as the background of a page How to repeat a background image only horizontally How to position a background image A fixed background image (this image will not scroll with the rest of the page) All the background properties in one declaration Advanced background example

CSS Пояснення властивостей background

CSS Межі

Set the width of the four borders Set the width of the top border Set the width of the bottom border Set the width of the left border Set the width of the right border Set the style of the four borders Set the style of the top border Set the style of the bottom border Set the style of the left border Set the style of the right border Set the color of the four borders Set the color of the top border Set the color of the bottom border Set the color of the left border Set the color of the right border All the border properties in one declaration Add rounded borders to an element Set different borders on each side All the top border properties in one declaration All the bottom border properties in one declaration All the left border properties in one declaration All the right border properties in one declaration

CSS Пояснення властивостей border

CSS Края

Specify different margins for each side of an element Use shorthand margin property with four values Use shorthand margin property with three values Use shorthand margin property with two values Use shorthand margin property with one value Set margin to auto to center the element within its container Let the left margin be inherited from the parent element Margin collapse

Пояснення властивостей margin

CSS Відступи

Specify different padding for each side of an element Use shorthand padding property with four values Use shorthand padding property with three values Use shorthand padding property with two values Use shorthand padding property with one value Padding and element width (without box-sizing) Padding and element width (with box-sizing) Set padding-left of an element Set padding-right of an element Set padding-top of an element Set padding-bottom of an element

CSS Пояснення властивостей padding

CSS Height/Width

Set the height and width of an element Set max-width of an element Set the height and width of different elements Set the height and width of an image using percent Set min-width and max-width of an element Set min-height and max-height of an element

CSS Пояснення властивостей height/width (висота/ширина)

CSS Box Model

Demonstrating the box model Specify an element with a total width of 250px

CSS Пояснення box model

CSS Контур

Draw a line around an element (outline) Set the style of an outline Set the color of an outline Set the width of an outline Use the shorthand outline property Add space between an outline and the edge/border of an element

CSS Пояснення властивостей outline

CSS Текст

Set the text color of different elements Align the text Remove the line under links Decorate the text Control the letters in a text Indent text Specify the space between characters Specify the space between lines Set the text direction of an element Increase the white space between words Specify a text shadow for an element Disable text wrapping inside an element Vertical alignment of an image inside text

CSS Пояснення властивостей тексту

CSS Шрифти

Set the font of a text Set the size of the font Set the size of the font in px Set the size of the font in em Set the size of the font in percent and em Set the style of the font Set the variant of the font Set the boldness of the font All the font properties in one declaration

Пояснення властивостей шрифту

CSS Іконки

Font Awesome icons Bootstrap icons Google icons

CSS Пояснення іконок

CSS Посилання

Add different colors to visited/unvisited links Use of text-decoration on links Specify a background color for links Add other styles to hyperlinks Different types of cursors Advanced - Create link boxes Advanced - Create link boxes with borders

CSS Пояснення властивостей посилань

CSS Списки

All the different list item markers in lists Set an image as the list-item marker Position the list-item marker Remove default list settings All list properties in one declaration Style lists with colors Full-width bordered list

CSS Пояснення властивостей списків

CSS Таблиці

Specify a black border for table, th, and td elements Use of border-collapse Single border around the table Specify the width and height of a table Set the horizontal alignment of content (text-align) Set the vertical alignment of content (vertical-align) Specify the padding for th and td elements Horizontal dividers Hoverable table Striped tables Specify the color of the table borders Set the position of the table caption Responsive Table Create a fancy table

CSS Пояснення властивостей таблиці

CSS Display

How to hide an element (visibility:hidden) How to not display an element (display:none) How to display a block-level element as an inline element How to display an inline element as a block-level element How to to use CSS together with JavaScript to show hidden content

CSS Пояснення властивостей display

CSS Позиціонування

Position an element relative to the browser window Position an element relative to its normal position Position an element with an absolute value Sticky positioning Overlapping elements Set the shape of an element Set the top edge of an image using a pixel value Set the bottom edge of an image using a pixel value Set the left edge of an image using a pixel value Set the right edge of an image using a pixel value Position image text (top left corner) Position image text (top right corner) Position image text (bottom left corner) Position image text (bottom right corner) Position image text (centered)

CSS Пояснення властивостей позиціонування

CSS Overflow

Using overflow: visible - The overflow is not clipped. It renders outside the element's box. Using overflow: hidden - The overflow is clipped, and the rest of the content is hidden. Using overflow: scroll - The overflow is clipped, but a scrollbar is added to see the rest of the content. Using overflow: auto - If overflow is clipped, a scrollbar should be added to see the rest of the content. Using overflow-x and overflow-y.

CSS Пояснення властивостей overflow

CSS Floating

A simple use of the float property An image with border and margins that floats to the right in a paragraph An image with a caption that floats to the right Let the first letter of a paragraph float to the left Turning off float (using the clear property) Turning off float (using the "clearfix" hack) Create floating boxes Create side-by-side images Create equal-height boxes (with flexbox) Creating a horizontal menu Create a web layout example

CSS Пояснення властивостей float

CSS Inline-block

Show the differences between inline, inline-block and block Using inline-block to create navigation links

CSS Пояснення inline-block

CSS Елементи вирівнювання

Center aligning with margin Center aligning text Center an image Left/Right aligning with position Left/Right aligning with position - Crossbrowser solution Left/Right aligning with float Left/Right aligning with float - Crossbrowser solution Center vertically with padding Center vertically and horizontally Center vertically with line-height Center vertically and horizontally with position

CSS Пояснення властивостей вирівнювання

CSS Комбінатори

Descendant selector Child selector Adjacent Sibling selector General Sibling selector

CSS Поясненн комбінаторів

CSS Псевдо-класи

Add different colors to a hyperlink Add other styles to hyperlinks Use of :focus :first-child - match the first p element :first-child - match the first i element in all p elements :first-child - Match all i elements in all first child p elements Use of :lang

CSS Пояснення псевдо-класів

CSS Псевдо-елементи

Make the first letter special in a text Make the first line special in a text Make the first letter and first line special Use :before to insert some content before an element Use :after to insert some content after an element

CSS Пояснення псевдо-елементів

CSS Непрозорість

Creating transparent images Creating transparent images - mouseover effect Reversed mouseover effect for transparent images Transparent box/div Transparent box/div with RGBA values Creating a transparent box with text on a background image

CSS Пояснення непрозорості зображення

CSS Навігаційні панелі

Fully styled vertical navigation bar Fully styled horizontal navigation bar Full-height fixed vertical navigation bar Fixed horizontal navigation bar Sticky navigation bar (does not work in IE or Edge 15 and earlier) Responsive top navigation Responsive side navigation

CSS Пояснення навігаційних панелей

CSS Dropdown

Dropdown text Dropdown menu Right-aligned dropdown menu Dropdown image Dropdown navigation bar

CSS Пояснення dropdown

CSS Галерея зображень

Image gallery Responsive Image gallery

CSS Пояснення галереї зображень

CSS Спрайти зображень

An image sprite An image sprite - a navigation list An image sprite with hover effect

CSS Пояснення спрайтів зображень

CSS Селектори атрибутів

Selects all <a> elements with a target attribute Selects all <a> elements with a target='_blank' attribute Selects all elements with a title attribute that contains a space-separated list of words, one of which is "flower"Selects all elements with a class attribute value that begins with "top" (must be whole word) Selects all elements with a class attribute value that begins with "top" (must not be whole word) Selects all elements with a class attribute value that ends with "test" Selects all elements with a class attribute value that contains "te"

CSS Пояснення селекторів атрибутів

CSS Форми

Full-width input field Padded input field Bordered input field Bottom bordered input field Colored input fields Focused input fields Focused input fields 2 Input with icon/image Animated search input Styling textareas Styling select menus Styling input buttons Responsive form

CSS Пояснення форм

CSS Лічильники

Create a counter Nested counters 1 Nested counters 2

CSS Пояснення лічильників

CSS Макет сайту

Simple, responsive website layout A website example

CSS Пояснення макету сайту

CSS Заокруглені кути

Add rounded corners to elements Round each corner separately Create elliptical corners

CSS Пояснення округлених кутів

CSS Межі зображень

Create an image border around an element, using the round keyword Create an image border around an element, using the stretch keyword Image border - Different slice values

CSS Пояснення межі зображень

CSS Фони

Add multiple background images for an element Specify the size of a background image Scale a background image using "contain" and "cover" Define sizes of multiple background images Full-size background image (completely fill the content area) Use background-origin to specify where the background image is positioned Use background-clip to specify the painting area of the background

CSS Пояснення фонів

CSS Градієнти

Linear Gradient - top to bottom Linear Gradient - left to right Linear Gradient - diagonal Linear Gradient - with a specified angle Linear Gradient - with multiple color stops Linear Gradient - color of a rainbow + text Linear Gradient - with transparency Linear Gradient - a repeating linear gradient Radial Gradient - evenly spaced color stops Radial Gradient - differently spaced color stops Radial Gradient - set shape Radial Gradient - different size keywords Radial Gradient - a repeating radial gradient

CSS Пояснення градієнтів

CSS Ефекти тіні

Simple shadow effect Add a color to the shadow Add a blur effect to the shadow White text with black shadow A red neon glow shadow A red and blue neon glow shadow White text with black, blue, and darkblue shadow Add a simple box-shadow to an element Add color to box-shadow Add color and blur effect to box-shadow Create paper-like cards (text) Create paper-like cards (polaroid images)

CSS Пояснення ефектів тіні

CSS Ефекти тексту

Specify how hidden, overflowed content should be signaled to the user How to display the overflowed content when hover over the element Allow long words to be able to be broken and wrap onto the next line Specify line breaking rules

CSS Пояснення ефектів тексту

CSS Веб-шрифти

Use your "own" fonts in @font-face rule Use your "own" fonts in @font-face rule (bold)

CSS Пояснення веб-шрифтів

CSS 2D Трансформації

translate() - move an element from its current position rotate() - rotate an element clockwise rotate() - rotate an element counter-clockwise scale() - increase an element scale() - decrease an element skewX() - skews an element along the X-axis skewY() - skews an element along the Y-axis skew() - skews an element along the X and Y-axis matrix() - rotate, scale, move, and skew an element

CSS Пояснення 2D трансформацій

CSS 3D Трансформації

rotateX() - rotate an element around its X-axis at a given degree rotateY() - rotate an element around its Y-axis at a given degree rotateZ() - rotate an element around its Z-axis at a given degree

CSS Пояснення 3D трансформацій

CSS Переходи

Transition - change width of an element Transition - change width and height of an element Specify different speed curves for a transition Specify a delay for a transition effect Add a transformation to a transition effect Specify all transition properties in one shorthand property

CSS Пояснення переходів

CSS Анімації

Bind an animation to an element Animation - change background-color of an element Animation - change background-color and position of an element Delay an animation Run animation 3 times before it stops Run animation for ever Run animation in reverse direction Run animation in alternate cycles Speed curves for animations Animation shorthand property

CSS Пояснення анімацій

CSS Підказки

Right tooltip Left tooltip Top tooltip Bottom tooltip Tooltip with arrow Animated tooltip

CSS Пояснення підказок

CSS Стилізація зображень

Rounded image Circled image Thumbnail image Thumbnail image as link Responsive image Image text (top left corner) Image text (top right corner) Image text (bottom left corner) Image text (bottom right corner) Image text (centered) Polaroid images Grayscale image filter Advanced - Image Modal with CSS and JavaScript

CSS Пояснення стилізації зображень

CSS Відображення зображення

Create reflection below the image Create reflection to the right of the image Create a gap between the image and the reflection Create a fade-out effect on the reflection

CSS Пояснення відображення зображення

CSS Object-fit

Use object-fit: cover Use object-fit: contain Use object-fit: fill Use object-fit: none Use object-fit: scale-down All object-fit property values in one example

CSS Пояснення object-fit

CSS Object-position

Position the image so that the great old building is in center Position the image so that the famous Eiffel Tower is in center

CSS Пояснення object-position

CSS Кнопки

Basic CSS buttons Button colors Button sizes Rounded buttons Colored button borders Hoverable buttons Shadow buttons Disabled buttons Button width Button groups Bordered button group Animated Button (Hover Effect) Animated Button (Ripple Effect) Animated Button (Pressed Effect)

CSS Пояснення кнопок

CSS Пагінація

Simple pagination Active and hoverable pagination Rounded active and hoverable pagination Hoverable transition effect Bordered pagination Rounded bordered pagination Pagination with space between links Pagination size Pagination with space between links Centered pagination Breadcrumbs

CSS Пояснення пагінації

CSS Кілька стовпців

Create multiple columns Specify the gap between columns Specify the style of the rule between columns Specify the width of the rule between columns Specify the color of the rule between columns Specify the width, style and color of the rule between columns Specify how many columns an element should span across Specify a suggested, optimal width for the columns

CSS Пояснення кілька стовпців

CSS Користувацький інтерфейс

Let a user resize the width of an element Let a user resize the height of an element Let a user resize both the width and height of an element Add space between an outline and the border of an element

CSS Пояснення користувацький інтерфейс

CSS Змінні

Using the var() function Using the var() function to insert several custom property values

CSS Пояснення змінних

CSS Розмір блоку

Width of elements without box-sizing Width of elements with box-sizing Form elements + box-sizing

CSS Пояснення розміру блоку

CSS Flexbox

Flexbox with three flex items Flexbox with three flex items - rtl direction flex-direction - row-reverse flex-direction - column flex-direction - column-reverse justify-content - flex-end justify-content - center justify-content - space-between justify-content - space-around align-items - stretch align-items - flex-start align-items - flex-end align-items - center align-items - baseline flex-wrap - nowrap flex-wrap - wrap flex-wrap - wrap-reverse align-content - center Order the flex items Margin-right:auto; Margin:auto; = perfect centering align-self on flex items Specify the length of the flex item, relative to the rest of the flex items Create a responsive image gallery with flexbox Create a responsive website with flexbox

CSS Пояснення flexbox

CSS Медіа-запити

Change the background-color to lightgreen if the viewport is 480px wide or wider Show a menu that will float to the left of the page if the viewport is 480px wide or wider

CSS Пояснення медіа-запитів

CSS Медіа-запити - Більше прикладів

Set different background colors depending on screen width Responsive navigation menu Responsive columns using float Responsive columns using flexbox Hide elements with media queries Responsive font size Responsive image gallery Responsive website Change layout of a page depending on the orientation of the browser Min width to max width

CSS media queries examples explained

CSS Адаптивний веб-дизайн

Responsive grid view Add breakpoints for desktops, laptops and phones Typical breakpoints Responsive image Responsive video Responsive framework: W3.CSS Responsive framework: Bootstrap

CSS Пояснення адаптивного веб-дизайну

CSS Grid (Сітка)

Grid layout Grid elements Grid column gaps Grid lines Grid container Grid items

CSS Пояснення grid (сітки)

❮ Prev Next ❯