programming html css webdev html5 css3 tips

21 ценный фрагмент кода HTML и CSS для веб-разработчиков

24 марта 2023 г.

Веб-разработчики всегда ищут способы улучшить свой рабочий процесс и облегчить себе жизнь. В этой статье мы представим 21 полезный HTML & фрагменты кода CSS, которые помогут упростить повседневные задачи веб-разработки. Эти фрагменты кода практичны, экономят время и могут быть легко изменены в соответствии с вашими потребностями.

Откройте для себя коллекцию практических фрагментов кода

1. Адаптивное меню навигации

Отзывчивое меню навигации необходимо для удобного взаимодействия с пользователем на разных устройствах. Вот простой HTML & Фрагмент CSS для создания адаптивного меню навигации:

<nav class="navbar">
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#contact">Contact</a>
</nav>


.navbar {
  display: flex;
  justify-content: space-around;
  background-color: #333;
  padding: 1rem;
}

.navbar a {
  color: white;
  text-decoration: none;
  padding: 0.5rem;
}

.navbar a:hover {
  background-color: #ddd;
  color: black;
}

2. Сброс CSS

Применение сброса CSS может помочь обеспечить единообразие отображения вашего веб-сайта в разных браузерах. Вот простой фрагмент кода сброса CSS для начала:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

3. Центрировать элемент по вертикали и горизонтали

Используйте Flexbox, чтобы легко центрировать элемент как по вертикали, так и по горизонтали внутри его контейнера:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

4. Подсказка CSS

Создайте простую всплывающую подсказку, используя только HTML и CSS:

<span class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</span>


.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

5. Стильные пуговицы

Добавьте изюминку своим кнопкам с помощью этого простого фрагмента кода CSS:

.button {
  background-color: #4CAF50;
  border: none;
color: white;
text-align: center;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
padding: 10px 24px;
border-radius: 8px;
transition: background-color 0.3s;
}

.button:hover {
background-color: #45a049;
}

6. Плавная прокрутка вверх

Добавьте эффект плавной прокрутки для перехода к началу веб-страницы:

<a href="#top" class="scroll-to-top">Back to Top</a>


html {
  scroll-behavior: smooth;
}

.scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  text-decoration: none;
  background-color: #4CAF50;
  color: white;
  padding: 10px 15px;
  border-radius: 8px;
}

7. Галерея адаптивных изображений

Создайте адаптивную галерею изображений с помощью CSS Grid:

<div class="image-gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <img src="image4.jpg" alt="Image 4">
</div>


.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

.image-gallery img {
  width: 100%;
  height: auto;
}

8. Фиксированный заголовок таблицы

Сохраняйте заголовок таблицы неподвижным при прокрутке содержимого таблицы:

<table class="fixed-header">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <!-- Table Content -->
  </tbody>
</table>


.fixed-header {
  width: 100%;
  border-collapse: collapse;
}

.fixed-header thead {
  position: sticky;
  top: 0;
  background-color: #f1f1f1;
}

9. Полноэкранное фоновое изображение

Установите полноэкранное фоновое изображение для своей веб-страницы:

body {
  background-image: url('background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
}

10. Прилепленный нижний колонтитул

Сохраняйте нижний колонтитул внизу страницы, даже если содержимого недостаточно для заполнения области просмотра:

<div class="page-container">
<div class="content-wrap">
<!-- Your main content here -->
</div>
<footer>Footer content</footer>
</div>


.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content-wrap {
  flex: 1;
}

footer {
  background-color: #f1f1f1;
  padding: 1rem;
}

11. Макет карточки

Создайте современный макет карты для демонстрации контента с помощью Flexbox:

<div class="card">
  <img src="image.jpg" alt="Card image">
  <div class="card-content">
    <h3>Card Title</h3>
    <p>Card description.</p>
  </div>
</div>


.card {
  display: flex;
  flex-direction: column;
  width: 300px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.card img {
  width: 100%;
  height: auto;
}

.card-content {
  padding: 1rem;
}

12. Панировочные сухари

Создайте простую навигационную цепочку с помощью HTML и CSS:

<nav class="breadcrumbs">
  <a href="#home">Home</a> >
  <a href="#section1">Section 1</a> >
  <a href="#section2">Section 2</a>
</nav>


.breadcrumbs {
  padding: 1rem;
}

.breadcrumbs a {
  text-decoration: none;
  color: #3498db;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

13. Простой аккордеон

Создайте простой аккордеон с помощью HTML и CSS:

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Section 1 content.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Section 2 content.</p>
</div>


.accordion {
  cursor: pointer;
  width: 100%;
  text-align: left;
  outline: none;
  transition: 0.4s;
}

.panel {
  display: none;
  overflow: hidden;
  transition: max-height 0.2s;
}

14. Простая нумерация страниц

Создайте простую навигацию по страницам с помощью HTML и CSS:

<nav class="pagination"><a href="#prev">« Prev</a>
<a href="#1">1</a>
<a href="#2">2</a>
<a href="#3">3</a>
<a href="#4">4</a>
<a href="#next">Next »</a>
</nav>


.pagination {
  display: inline-block;
  padding: 1rem;
}

.pagination a {
  color: #3498db;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
}

.pagination a:hover {
  background-color: #f1f1f1;
}

.pagination a.active {
  background-color: #3498db;
  color: white;
  border: 1px solid #3498db;
}

15. Встраивание адаптивного видео

Создайте встраиваемое адаптивное видео с помощью HTML и CSS:

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/your_video_id" frameborder="0" allowfullscreen></iframe>
</div>


.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

16. Загрузчик CSS

Создайте простой загрузчик CSS для своего веб-сайта:

<div class="loader"></div>


.loader {
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid #3498db;
  width: 60px;
  height: 60px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

17. Эффект параллаксной прокрутки

Добавьте на свою веб-страницу простой эффект прокрутки параллакса:

<div class="parallax"></div>


.parallax {
  background-image: url("your-image.jpg");
  min-height: 500px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

18. Сетка Flexbox

Создайте простую сетку Flexbox для своего веб-сайта:

<div class="row">
  <div class="col">Column 1</div>
  <div class="col">Column 2</div><div class="col">Column 3</div>
</div>


.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

.col {
  flex: 1;
  padding-left: 15px;
  padding-right: 15px;
}

19. Анимированный индикатор прокрутки

Создайте анимированный индикатор прокрутки, чтобы показывать пользователям, как далеко они прокрутили:

<div class="progress-container">
  <div class="progress-bar"></div>
</div>


.progress-container {
  width: 100%;
  height: 8px;
  background-color: #f3f3f3;
  position: fixed;
  top: 0;
}

.progress-bar {
  height: 8px;
  background-color: #3498db;
  width: 0%;
}

20. Эффекты фильтров CSS

Примените эффекты фильтров CSS к своим изображениям:

<img src="your-image.jpg" alt="Your Image" class="filter">


.filter {
  filter: grayscale(100%);
}

21. Интеграция со шрифтами Google

Интегрируйте шрифты Google на свой веб-сайт:

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">


body {
  font-family: 'Roboto', sans-serif;
}

Эти 21 полезный фрагмент кода HTML и CSS могут помочь вам улучшить ваши проекты веб-разработки и оптимизировать рабочий процесс. Держите их под рукой для удобства и не стесняйтесь изменять и адаптировать под свои нужды.

Также опубликовано здесь. р>

Оригинал