W3.CSS Примеры

W3.CSS Цвета

Background Colors Text Colors Hover Colors

W3.CSS Контейнеры

Containers Containers with color Container header using <div> Container header using <header> Container footer using <div> Container footer using <footer> Container <article> and <section> Container with <div> elements Container with semantic elements Container padding Container with headers and paragraphs

Объяснение примеров

W3.CSS Границы

Borders Colored borders Rounded borders Thick borders Hoverable borders

Объяснение примеров

W3.CSS Панели

Panels Panel notes Panel quotes Panel alerts Panel cards Panel round Hide/close a panel Show/Open a panel

Объяснение примеров

W3.CSS Карточки (открытки)

Cards Colored cards Card content Photo cards Hoverable cards Avatar card with buttons Avatar card with full-width button Card Widgets

Объяснение примеров

W3.CSS Шрифты

Headings Font-size classes Override the W3.CSS defaults Change the default page font How to use a font class How to use external fonts External google font: lobster Font effects Font effects 2

Объяснение примеров

W3.CSS Текст

Text alignment Center elements Wide text Text shadow Text opacity Text special effects

Объяснение примеров

W3.CSS Округлость

Round classes Circle class Text inside a circle Circle inside a circle Circle inside a circle 2

Объяснение примеров

W3.CSS Внутренний отступ / Padding

Padding number classes Padding size classes

Объяснение примеров

W3.CSS Внешний отступ / Margin

Margin on all sides Margin top Margin bottom Margin left Margin right Margin sections

Объяснение примеров

W3.CSS Отображение / Display

Display container Display container with padding Display container for image Displaying a flag Floating classes Hide and show classes Toggle hide and show

Объяснение примеров

W3.CSS Кнопки

Buttons Button colors Hover colors Button shapes Button sizes Button borders Buttons with text effects Buttons with wide text effects Padded buttons Left and right buttons Full-width buttons Disabled buttons Button groups on the same line Button bars Buttons with ripple effects

Объяснение примеров

W3.CSS Примечания

Notes Grey with rounded borders Pale blue with left and right bar Pale red with left bar Pale yellow with border Pale green with border and bottom bar Yellow with top and bottom bar

Объяснение примеров

W3.CSS Цитаты

Quotes Large quotes Blockquotes Custom quotes 1 Custom quotes 2 Custom quotes 3 Black quote Quotes as cards Quotes as cards 2

Объяснение примеров

W3.CSS Оповещения

Basic alerts Closable alerts Rounded alerts Alert cards

Объяснение примеров

W3.CSS Таблицы

Объяснение примеров

W3.CSS Списки

Basic list Bordered list List header List card Centered list Colored list Colored list item
Hoverable list (grey color)
Specific hoverable list color
Closable list
Padded list
Avatar list
Tiny list Small list Large list xLarge list xxLarge list xxxLarge list Jumbo list

Объяснение примеров

W3.CSS Изображения

Rounded image Circled image Bordered image Image card Image text Responsive image Responsive image with max width Image opacity Image grayscale Image sepia Image hover effects Image opacity off Photo Album

Объяснение примеров

W3.CSS Вводы

Top labels Bottom labels Input cards Colored labels Bordered inputs Rounded borders Borderless input Colored inputs Hoverable inputs Animated inputs Checkboxes Radio buttons Select menu Bordered select menu Form elements in a three-column grid Two-column layout with labels

Объяснение примеров

W3.CSS Значки

Badges Colored Badges Badges in buttons Badges in lists I Badges in lists II Badges in tables Large badges UTF-8 badges

Объяснение примеров

W3.CSS Бирки, ярлыки и знаки

Tags and labels Colored tags Large tags Tags as letters Tags in a row Tag as a sign Road signs Large signs Large signs 2 Rounded signs Rotated tags Spinning tags

Объяснение примеров

W3.CSS Иконки

Font awesome icons Google material design icons Bootstrap icons

Объяснение примеров

W3.CSS Адаптивность

The w3-half class The w3-third class The w3-twothird class The w3-quarter class The w3-threequarter class Nested rows (w3-half inside w3-half) Columns using w3-rest Columns using percent The w3-content class Difference between w3-row and w3-row-padding

Объяснение примеров

W3.CSS Анимация

Top animation Bottom animation Left animation Right animation Fading animation Fading infinite animation Zoom animation Spin animation Fade all

Объяснение примеров

W3.CSS Выпадающие элементы

Hoverable dropdown menu Hoverable dropdown Dropdown in navbar Clickable dropdown menu Image dropdown Card dropdown Animated dropdown Right-aligned dropdown

Объяснение примеров

W3.CSS Аккордеоны

Basic accordion Accordion buttons Active accordion Accordion width Accordion links Accordion card with lists Accordion and dropdown in sidebar Animated accordion

Объяснение примеров

W3.CSS Навигация

Basic navigation Colored bar Bordered bar Active link in bar Hoverable bar links Right-aligned links Bar font-size Bar padding Bar width Bar icons Bar with input Bar with dropdown Bar with an active dropdown and icon Bar with clickable dropdown Top bar Bottom bar Collapsible bar

Объяснение примеров

W3.CSS Сайдбары

Basic sidebar (always displayed) Collapsible sidebar Sidebar hiding a part of the page content Sidebar hiding all page content Sidebar shift content to the right Sidebar color Bordered sidebar Bottom bordered sidebar (dividers) Sidebar card Hoverable sidebar links (background color) Hoverable sidebar links (text color) Sidebar size Sidebar with icons (icon bar) Sidebar with dropdown Sidebar with accordion Animated sidebar Sidebar with overlay effect Sidebar with content

Объяснение примеров

W3.CSS Вкладки

Basic tab Active/current tab Vertical tab Animated tab content Tabbed image gallery Tabs in a grid

Объяснение примеров

W3.CSS Пагинация

Basic pagination Pagination arrows Active pagination link Pagination hover color Pagination size Bordered pagination Rounded bordered pagination Centered pagination Next/previous pagination arrows Pagination menu

Объяснение примеров

W3.CSS Прогресс-бары

Basic progress bar Progress bar width Progress bar sizes Progress bar colors Rounded progress bars Progress bar labels Dynamic progress bar Dynamic progress bar with centered label Dynamic progress bar with left-aligned label Dynamic progress bar with label placed outside

Объяснение примеров

W3.CSS Слайд-шоу

Manual slideshow with images Automatic slideshow with images Automatic HTML slides Slideshow captions Slideshow indicators with numbers and prev/next buttons Slideshow indicators with icons and bullets Images as indicators Animated slides Automatic slideshow with infinite fading

Объяснение примеров

W3.CSS Модальные окна

Basic modal (dialog box/popup window) Modal with containers Modal card Animated modal Fade in modal Modal image Modal image gallery Modal login form Modal tab How to close the modal Modal lightbox (modal image gallery)

Объяснение примеров

W3.CSS Всплывающие подсказки

Inline tooltip text Inline tooltip tag Tooltip text before a hoverable image Tooltip text after a hoverable image Absolute tooltip Colored tooltip Rounded tooltip Small tooltip Large tooltip

Объяснение примеров

W3.CSS Адаптивная сетка

Fluid grid demonstration Two equal columns Two unequal columns Three equal columns Three unequal columns Six equal columns Mixed: Mobile and Laptops Mixed: Mobile, Tablets and Laptops Difference between w3-row and w3-row-padding Columns using w3-rest Columns using percent

Объяснение примеров

W3.CSS Код

Displaying examples Displaying code Displaying colored HTML Displaying colored CSS Displaying colored JavaScript code Displaying inline code (w3-codespan)

Объяснение примеров

W3.CSS Фильтры

Filter Tables Filter Lists Filter Dropdowns (click) Filter Dropdowns (hover)

Объяснение примеров

❮ Prev Next ❯

HTML и CSS

XML

JavaScript

Программирование

Серверная сторона

Веб-строительство

XML

HTML

CSS

JavaScript

Программирование

Серверная сторона

XML

Наборы символов

Упражнения

Викторины

Сертификаты

W3.CSS Учебник

W3.CSS Цвета

Примеры

Справочники

W3.CSS Примеры

W3.CSS Цвета

W3.CSS Контейнеры

W3.CSS Границы

W3.CSS Панели

W3.CSS Карточки (открытки)

W3.CSS Шрифты

W3.CSS Текст

W3.CSS Округлость

W3.CSS Внутренний отступ / Padding

W3.CSS Внешний отступ / Margin

W3.CSS Отображение / Display

W3.CSS Кнопки

W3.CSS Примечания

W3.CSS Цитаты

W3.CSS Оповещения

W3.CSS Таблицы

W3.CSS Списки

W3.CSS Изображения

W3.CSS Вводы

W3.CSS Значки

W3.CSS Бирки, ярлыки и знаки

W3.CSS Иконки

W3.CSS Адаптивность

W3.CSS Анимация

W3.CSS Выпадающие элементы

W3.CSS Аккордеоны

W3.CSS Навигация

W3.CSS Сайдбары

W3.CSS Вкладки

W3.CSS Пагинация

W3.CSS Прогресс-бары

W3.CSS Слайд-шоу

W3.CSS Модальные окна

W3.CSS Всплывающие подсказки

W3.CSS Адаптивная сетка

W3.CSS Код

W3.CSS Фильтры

ПАЛИТРА ЦВЕТОВ

КАК СДЕЛАТЬ

Ваше предложение:

Спасибо за Вашу помощь!

Топ Учебники

Топ Справочники

Топ Примеры

Веб Сертификаты