Как превратить HTML в шедевры: 15 приемов CSS для новичков

Пройдите тест, узнайте какой профессии подходите

Сколько вам лет

До 18

От 18 до 24

От 25 до 34

От 35 до 44

От 45 до 49

От 50 до 54

Больше 55

Для кого эта статья:

Новички в веб-разработке
Студенты, интересующиеся изучением CSS и дизайна веб-страниц
Люди, стремящиеся улучшить навыки стилизации и оформления интерфейсов
Вы когда-нибудь пытались прочитать книгу, напечатанную одним шрифтом без абзацев и выделений? Или представьте себе приложение, где все кнопки выглядят одинаково — невозможно понять, какая из них удалит ваш аккаунт, а какая просто закроет окно! 😱 CSS — это именно тот инструмент, который превращает безликий HTML-скелет в привлекательный, интуитивно понятный интерфейс. Изучив всего 15 базовых приемов стилизации, вы удивитесь, насколько мощными станут ваши навыки веб-разработки.

Хотите быстро освоить не только CSS, но и все современные технологии веб-разработки? Обучение веб-разработке от Skypro — это интенсивное погружение в практику с первых дней. Вместо сухой теории вас ждут реальные проекты, где каждый пример стилизации, подобный тем, что мы разберем ниже, станет частью вашего профессионального арсенала. Уже через 3 месяца вы создадите своё первое полноценное веб-приложение!

Основы CSS-стилизации для новичков в веб-разработке

CSS (Cascading Style Sheets) — язык стилей, который определяет, как должны выглядеть HTML-элементы в браузере. Представьте, что HTML — это скелет сайта, а CSS — его кожа, одежда и макияж. 💄 Без CSS ваша страница выглядит как научная статья из 90-х — голый текст с минимальным форматированием.

Для подключения CSS к HTML-документу существует три способа:

Встроенный стиль — добавление атрибута style непосредственно к HTML-тегу
Внутренний стиль — размещение CSS в тегах <style> в разделе <head>
Внешний стиль — создание отдельного CSS-файла и его подключение через тег <link>

Последний вариант считается наиболее профессиональным, так как отделяет содержимое от представления и позволяет применять одни и те же стили к нескольким страницам.

Каждое CSS-правило состоит из селектора и блока объявлений:

Михаил Петров, старший фронтенд-разработчик Помню свой первый коммерческий проект — небольшой сайт для местной пекарни. Клиент хотел "что-нибудь красивое", но бюджет был минимальным. Я потратил часы на создание сложных анимаций и нестандартных эффектов, чтобы произвести впечатление. Результат? Сайт работал медленно, а на мобильных устройствах выглядел ужасно. Клиент был недоволен. После этого фиаско я начал с изучения базовых принципов — правильной типографики, сбалансированных цветовых схем и адаптивной верстки. Спустя месяц мы запустили новую версию с простым, но элегантным дизайном. Используя только базовые CSS-приемы, я создал сайт, который загружался быстро и отлично выглядел на всех устройствах. Продажи выросли на 30% в первый же месяц. Этот опыт научил меня главному: мастерство начинается с безупречного владения основами.

Селектор	Описание	Пример
Элемент	Выбирает все элементы определенного типа	`p { color: blue; }`
Класс	Выбирает элементы с определенным классом	`.highlight { background: yellow; }`
ID	Выбирает элемент с определенным ID	`#header { height: 80px; }`
Универсальный	Выбирает все элементы	`* { margin: 0; }`

Базовые приемы оформления текста и фона на веб-странице

Начнем с самого очевидного — форматирования текста. Грамотная типографика может превратить сайт с базовым дизайном в профессиональный продукт. 📝

Пример 1: Основное форматирование текста

HTML:

HTML

Скопировать код

<h1>Заголовок страницы</h1>
<p class="intro">Вводный текст с особым форматированием.</p>
<p>Обычный параграф текста для демонстрации стилей.</p>

CSS:

CSS

Скопировать код

h1 {
font-family: 'Helvetica', sans-serif;
color: #333333;
font-size: 32px;
text-align: center;
margin-bottom: 20px;
}

.intro {
font-weight: bold;
font-size: 18px;
line-height: 1.6;
color: #0066cc;
}

p {
font-family: 'Georgia', serif;
line-height: 1.5;
color: #444444;
margin-bottom: 15px;
}

Пример 2: Оформление фона страницы и блоков

HTML:

HTML

Скопировать код

<div class="container">
<div class="box">Блок с градиентным фоном</div>
<div class="box pattern">Блок с фоновым изображением</div>
</div>

CSS:

CSS

Скопировать код

body {
background-color: #f5f5f5;
margin: 0;
padding: 0;
}

.container {
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}

.box {
padding: 30px;
border-radius: 8px;
margin-bottom: 20px;
color: white;
text-align: center;
font-weight: bold;
}

.box:first-child {
background: linear-gradient(to right, #ff7e5f, #feb47b);
}

.box.pattern {
background-image: url('pattern.png');
background-repeat: repeat;
background-color: #3498db;
}

Пример 3: Создание теней и границ

HTML:

HTML

Скопировать код

<div class="card">
<h2>Карточка продукта</h2>
<p>Описание продукта с важной информацией.</p>
</div>

CSS:

CSS

Скопировать код

.card {
background-color: white;
border: 1px solid #dddddd;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

Стилизация кнопок, форм и навигационных элементов

Елена Сорокина, UI/UX дизайнер Работая над редизайном интернет-магазина одежды, я столкнулась с проблемой: конверсия в корзине была катастрофически низкой — всего 1.2%. Анализируя пользовательские сессии, заметила закономерность: многие посетители не могли найти кнопку "Добавить в корзину" или путались в навигации при оформлении заказа. Вместо кардинальной перестройки сайта я предложила простое решение — стилизацию ключевых элементов взаимодействия. Для кнопок "Добавить в корзину" мы использовали контрастный цвет с эффектом при наведении, а формы оформили с четкими границами и подсветкой активных полей. Меню навигации получило градиентное выделение активного раздела. Результат превзошел ожидания: конверсия выросла до 4.8% за первую неделю, а время, проведенное на странице оформления заказа, сократилось на 40%. Этот кейс убедительно доказывает, что иногда для значительного улучшения пользовательского опыта достаточно правильно настроенных CSS-стилей без сложных JavaScript-решений.

Пример 4: Стильные кнопки

HTML:

HTML

Скопировать код

<button class="btn primary">Основная кнопка</button>
<button class="btn secondary">Дополнительная</button>
<button class="btn danger">Удалить</button>

CSS:

CSS

Скопировать код

.btn {
padding: 10px 20px;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s;
font-weight: bold;
margin-right: 10px;
}

.btn.primary {
background-color: #4CAF50;
color: white;
}

.btn.secondary {
background-color: #f0f0f0;
color: #333333;
border: 1px solid #dddddd;
}

.btn.danger {
background-color: #f44336;
color: white;
}

.btn:hover {
opacity: 0.9;
transform: translateY(-2px);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

Пример 5: Форматирование форм

HTML:

HTML

Скопировать код

<form class="contact-form">
<div class="form-group">
<label for="name">Имя</label>
<input type="text" id="name" name="name" placeholder="Введите ваше имя">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Введите ваш email">
</div>
<div class="form-group">
<label for="message">Сообщение</label>
<textarea id="message" name="message" placeholder="Введите ваше сообщение"></textarea>
</div>
<button type="submit" class="btn primary">Отправить</button>
</form>

CSS:

CSS

Скопировать код

.contact-form {
max-width: 500px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.form-group {
margin-bottom: 20px;
}

label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #555555;
}

input, textarea {
width: 100%;
padding: 10px;
border: 1px solid #dddddd;
border-radius: 4px;
font-size: 16px;
transition: border-color 0.3s;
}

input:focus, textarea:focus {
outline: none;
border-color: #4CAF50;
box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
}

textarea {
min-height: 100px;
resize: vertical;
}

Пример 6: Навигационное меню

HTML:

HTML

Скопировать код

<nav class="main-nav">
<ul>
<li><a href="#" class="active">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Портфолио</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>

CSS:

CSS

Скопировать код

.main-nav {
background-color: #333333;
padding: 0 20px;
}

.main-nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}

.main-nav li {
position: relative;
}

.main-nav a {
color: white;
text-decoration: none;
display: block;
padding: 15px 20px;
transition: background-color 0.3s;
}

.main-nav a:hover, .main-nav a.active {
background-color: #555555;
}

.main-nav a.active::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background-color: #4CAF50;
}

Адаптивные элементы интерфейса через простые CSS-правила

Адаптивный дизайн необходим для обеспечения комфортного просмотра на различных устройствах — от десктопов до смартфонов. 📱 Создать базовую адаптивность можно без сложного JavaScript, используя только CSS.

Пример 7: Адаптивный контейнер с медиа-запросами

HTML:

HTML

Скопировать код

<div class="responsive-container">
<div class="content">Содержимое сайта</div>
<aside class="sidebar">Боковая панель</aside>
</div>

CSS:

CSS

Скопировать код

.responsive-container {
display: flex;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

.content {
flex: 3;
background-color: #ffffff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sidebar {
flex: 1;
margin-left: 20px;
background-color: #f0f0f0;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Адаптивность для планшетов */
@media (max-width: 768px) {
.responsive-container {
flex-direction: column;
}

.sidebar {
margin-left: 0;
margin-top: 20px;
}
}

/* Адаптивность для мобильных */
@media (max-width: 480px) {
.content, .sidebar {
padding: 15px;
}
}

Пример 8: Адаптивная галерея изображений

HTML:

HTML

Скопировать код

<div class="gallery">
<div class="gallery-item"><img src="image1.jpg" alt="Изображение 1"></div>
<div class="gallery-item"><img src="image2.jpg" alt="Изображение 2"></div>
<div class="gallery-item"><img src="image3.jpg" alt="Изображение 3"></div>
<div class="gallery-item"><img src="image4.jpg" alt="Изображение 4"></div>
<div class="gallery-item"><img src="image5.jpg" alt="Изображение 5"></div>
<div class="gallery-item"><img src="image6.jpg" alt="Изображение 6"></div>
</div>

CSS:

CSS

Скопировать код

.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 20px;
}

.gallery-item {
overflow: hidden;
border-radius: 8px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}

.gallery-item:hover {
transform: scale(1.03);
}

.gallery-item img {
width: 100%;
height: auto;
display: block;
transition: transform 0.5s;
}

.gallery-item:hover img {
transform: scale(1.1);
}

@media (max-width: 900px) {
.gallery {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 600px) {
.gallery {
grid-template-columns: 1fr;
}
}

Пример 9: Адаптивное модальное окно

HTML:

HTML

Скопировать код

<button class="modal-trigger">Открыть модальное окно</button>

<div class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<h2>Заголовок модального окна</h2>
<p>Содержимое модального окна. Здесь может быть любая информация.</p>
<button class="btn primary">Подтвердить</button>
</div>
</div>

CSS:

CSS

Скопировать код

.modal {
display: none; /* Скрыто по умолчанию */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
align-items: center;
justify-content: center;
}

.modal.active {
display: flex;
}

.modal-content {
background-color: white;
padding: 30px;
border-radius: 8px;
position: relative;
max-width: 500px;
width: 90%;
}

.close {
position: absolute;
top: 15px;
right: 20px;
font-size: 24px;
cursor: pointer;
color: #666666;
}

.modal-trigger {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}

@media (max-width: 480px) {
.modal-content {
padding: 20px;
}

.modal-content h2 {
font-size: 18px;
}
}

Практические решения для создания современных макетов

Современные макеты требуют более сложных CSS-структур, но даже начинающие разработчики могут создавать профессиональные layouts с помощью Flexbox и Grid. 🎨

Пример 10: Карточки товаров с Flexbox

HTML:

HTML

Скопировать код

<div class="products-container">
<div class="product-card">
<img src="product1.jpg" alt="Продукт 1">
<h3>Название продукта</h3>
<p class="price">$99.99</p>
<p class="description">Краткое описание продукта, его особенности и преимущества.</p>
<button class="btn primary">В корзину</button>
</div>
<!-- Повторите product-card для нескольких товаров -->
</div>

CSS:

CSS

Скопировать код

.products-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
justify-content: center;
}

.product-card {
flex: 0 1 300px;
background-color: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
display: flex;
flex-direction: column;
}

.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.product-card img {
width: 100%;
height: 200px;
object-fit: cover;
}

.product-card h3, .product-card p, .product-card button {
padding: 0 20px;
}

.product-card h3 {
margin-top: 15px;
color: #333333;
}

.product-card .price {
font-weight: bold;
color: #e63946;
font-size: 18px;
}

.product-card .description {
color: #666666;
font-size: 14px;
flex-grow: 1; /* Позволяет описанию занимать всё доступное пространство */
}

.product-card button {
margin: 15px 20px;
align-self: center;
width: calc(100% – 40px);
}

Макетная техника	Преимущества	Сложность для новичка	Лучшее применение
Flexbox	Одномерная компоновка, выравнивание, распределение пространства	Средняя	Навигационные меню, карточки товаров, центрирование
Grid	Двумерная компоновка, контроль строк и столбцов	Высокая	Сложные макеты, галереи, разделы страницы
Float	Простота использования, хорошая поддержка	Низкая	Обтекание изображений текстом, простые колонки
Позиционирование	Точный контроль расположения элементов	Средняя	Модальные окна, фиксированные элементы, наложения

Пример 11: Страница блога с CSS Grid

HTML:

HTML

Скопировать код

<div class="blog-layout">
<header class="blog-header">
<h1>Мой блог о веб-разработке</h1>
</header>

<main class="blog-main">
<article class="post">
<h2>Заголовок статьи</h2>
<p class="meta">Опубликовано: 12 января 2023</p>
<p>Текст статьи...</p>
<a href="#" class="read-more">Читать далее</a>
</article>
<!-- Повторите article для нескольких статей -->
</main>

<aside class="blog-sidebar">
<div class="widget">
<h3>Последние статьи</h3>
<ul>
<li><a href="#">Статья 1</a></li>
<li><a href="#">Статья 2</a></li>
<li><a href="#">Статья 3</a></li>
</ul>
</div>
</aside>

<footer class="blog-footer">
<p>&copy; 2023 Мой блог о веб-разработке</p>
</footer>
</div>

CSS:

CSS

Скопировать код

.blog-layout {
display: grid;
grid-template-areas:
"header header header"
"main main sidebar"
"footer footer footer";
grid-template-columns: 1fr 1fr 300px;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
max-width: 1200px;
margin: 0 auto;
gap: 20px;
}

.blog-header {
grid-area: header;
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
}

.blog-main {
grid-area: main;
padding: 20px;
}

.blog-sidebar {
grid-area: sidebar;
background-color: #f5f5f5;
padding: 20px;
border-radius: 5px;
}

.blog-footer {
grid-area: footer;
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}

.post {
background-color: white;
padding: 20px;
border-radius: 5px;
margin-bottom: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.post .meta {
color: #888;
font-size: 14px;
margin-bottom: 15px;
}

.read-more {
display: inline-block;
margin-top: 10px;
color: #3498db;
text-decoration: none;
font-weight: bold;
}

.widget h3 {
border-bottom: 2px solid #3498db;
padding-bottom: 5px;
margin-bottom: 10px;
}

.widget ul {
list-style-type: none;
padding: 0;
}

.widget li {
margin-bottom: 5px;
}

.widget a {
text-decoration: none;
color: #333;
}

/* Адаптивность */
@media (max-width: 768px) {
.blog-layout {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr;
}
}

Пример 12: Hero-секция для лендинга

HTML:

HTML

Скопировать код

<section class="hero">
<div class="hero-content">
<h1>Добро пожаловать на наш сайт</h1>
<p>Предоставляем качественные услуги по веб-разработке и дизайну.</p>
<div class="hero-buttons">
<a href="#" class="btn primary">Узнать больше</a>
<a href="#" class="btn secondary">Связаться с нами</a>
</div>
</div>
</section>

CSS:

CSS

Скопировать код

.hero {
height: 80vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('hero-bg.jpg');
background-size: cover;
background-position: center;
color: white;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}

.hero-content {
max-width: 800px;
padding: 0 20px;
}

.hero h1 {
font-size: 3.5rem;
margin-bottom: 20px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.hero p {
font-size: 1.5rem;
margin-bottom: 30px;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.hero-buttons {
display: flex;
gap: 15px;
justify-content: center;
}

.hero-buttons .btn {
padding: 12px 30px;
font-size: 1.1rem;
}

@media (max-width: 768px) {
.hero h1 {
font-size: 2.5rem;
}

.hero p {
font-size: 1.2rem;
}
}

@media (max-width: 480px) {
.hero-buttons {
flex-direction: column;
width: 100%;
}
}

Пример 13: Анимированный счетчик достижений

HTML:

HTML

Скопировать код

<div class="stats-container">
<div class="stat-item">
<div class="stat-icon">👥</div>
<div class="stat-number">5000+</div>
<div class="stat-label">Довольных клиентов</div>
</div>

<div class="stat-item">
<div class="stat-icon">🚀</div>
<div class="stat-number">300+</div>
<div class="stat-label">Завершенных проектов</div>
</div>

<div class="stat-item">
<div class="stat-icon">🏆</div>
<div class="stat-number">25+</div>
<div class="stat-label">Наград</div>
</div>

<div class="stat-item">
<div class="stat-icon">💼</div>
<div class="stat-number">10+</div>
<div class="stat-label">Лет опыта</div>
</div>
</div>

CSS:

CSS

Скопировать код

.stats-container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
background-color: #f8f8f8;
padding: 50px 20px;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.stat-item {
text-align: center;
padding: 20px;
margin: 10px;
min-width: 200px;
animation: fadeInUp 0.8s ease forwards;
opacity: 0;
}

.stat-item:nth-child(1) {
animation-delay: 0.1s;
}

.stat-item:nth-child(2) {
animation-delay: 0.3s;
}

.stat-item:nth-child(3) {
animation-delay: 0.5s;
}

.stat-item:nth-child(4) {
animation-delay: 0.7s;
}

.stat-icon {
font-size: 3rem;
margin-bottom: 15px;
}

.stat-number {
font-size: 2.5rem;
font-weight: bold;
color: #3498db;
margin-bottom: 5px;
}

.stat-label {
color: #555;
font-size: 1.1rem;
}

@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

Пример 14: Стильный аккордеон

HTML:

HTML

Скопировать код

<div class="accordion">
<div class="accordion-item">
<div class="accordion-header">Вопрос 1: Что такое HTML?</div>
<div class="accordion-content">
<p>HTML (HyperText Markup Language) — это стандартный язык разметки для создания веб-страниц и веб-приложений.</p>
</div>
</div>

<div class="accordion-item">
<div class="accordion-header">Вопрос 2: Что такое CSS?</div>
<div class="accordion-content">
<p>CSS (Cascading Style Sheets) — язык, который используется для описания внешнего вида HTML-документа.</p>
</div>
</div>

<div class="accordion-item">
<div class="accordion-header">Вопрос 3: Что такое JavaScript?</div>
<div class="accordion-content">
<p>JavaScript — мультипарадигменный язык программирования, который позволяет создавать интерактивные элементы на веб-страницах.</p>
</div>
</div>
</div>

CSS:

CSS

Скопировать код

.accordion {
max-width: 600px;
margin: 30px auto;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
}

.accordion-item {
border-bottom: 1px solid #e0e0e0;
}

.accordion-item:last-child {
border-bottom: none;
}

.accordion-header {
padding: 15px 20px;
background-color: #f5f5f5;
cursor: pointer;
font-weight: bold;
color: #333;
position: relative;
transition: background-color 0.3s;
}

.accordion-header:hover {
background-color: #e9e9e9;
}

.accordion-header::after {
content: '+';
position: absolute;
right: 20px;
font-size: 20px;
transition: transform 0.3s;
}

.accordion-item.active .accordion-header::after {
transform: rotate(45deg);
}

.accordion-content {
padding: 0;
height: 0;
overflow: hidden;
transition: all 0.3s ease;
background-color: white;
}

.accordion-item.active .accordion-content {
padding: 15px 20px;
height: auto;
}

Пример 15: Стилизованные вкладки (табы)

HTML:

HTML

Скопировать код

<div class="tabs-container">
<div class="tabs-nav">
<button class="tab-button active" data-tab="tab1">Вкладка 1</button>
<button class="tab-button" data-tab="tab2">Вкладка 2</button>
<button class="tab-button" data-tab="tab3">Вкладка 3</button>
</div>

<div class="tab-content active" id="tab1">
<h3>Содержимое первой вкладки</h3>
<p>Здесь находится текст и другие элементы первой вкладки.</p>
</div>

<div class="tab-content" id="tab2">
<h3>Содержимое второй вкладки</h3>
<p>Здесь находится текст и другие элементы второй вкладки.</p>
</div>

<div class="tab-content" id="tab3">
<h3>Содержимое третьей вкладки</h3>
<p>Здесь находится текст и другие элементы третьей вкладки.</p>
</div>
</div>

CSS:

CSS

Скопировать код

.tabs-container {
max-width: 700px;
margin: 30px auto;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
}

.tabs-nav {
display: flex;
background-color: #f0f0f0;
}

.tab-button {
flex: 1;
padding: 15px;
background: none;
border: none;
cursor: pointer;
font-size: 16px;
font-weight: 600;
color: #555;
transition: all 0.3s;
border-bottom: 3px solid transparent;
outline: none;
}

.tab-button:hover {
background-color: #e0e0e0;
}

.tab-button.active {
background-color: white;
color: #3498db;
border-bottom: 3px solid #3498db;
}

.tab-content {
display: none;
padding: 20px;
background-color: white;
}

.tab-content.active {
display: block;
animation: fadeIn 0.5s;
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

@media (max-width: 480px) {
.tabs-nav {
flex-direction: column;
}

.tab-button {
border-bottom: 1px solid #ddd;
border-left: 3px solid transparent;
}

.tab-button.active {
border-bottom: 1px solid #ddd;
border-left: 3px solid #3498db;
}
}

CSS — это язык возможностей, который позволяет вам воплотить любую дизайнерскую идею. Начните с этих 15 примеров как с фундамента, но не ограничивайтесь ими. Экспериментируйте, комбинируйте техники, создавайте собственные решения. Понимание основных принципов важнее запоминания конкретного синтаксиса — браузеры и стандарты постоянно развиваются, но понимание того, как работают селекторы, наследование и блочная модель, останется с вами надолго. Превратите CSS из набора загадочных правил в свой личный инструмент творчества.

Читайте также

Проверь как ты усвоил материалы статьи

Пройди тест и узнай насколько ты лучше других читателей

Что такое CSS?

1 / 5

Свежие материалы

Основные принципы работы HTTP

6 сентября 2024

Как проверить сайт на работоспособность: пошаговое руководство

6 сентября 2024

Инструменты для тестирования сайтов: обзор и сравнение

6 сентября 2024

Как превратить HTML в шедевры: 15 приемов CSS для новичков

Основы CSS-стилизации для новичков в веб-разработке

Базовые приемы оформления текста и фона на веб-странице

Стилизация кнопок, форм и навигационных элементов

Адаптивные элементы интерфейса через простые CSS-правила

Практические решения для создания современных макетов

Загрузка...