Css snippet in html

Базовые стили и полезные CSS-сниппеты

В этой статье собраны полезные и «правильные» стили и сниппеты, которые помогут ускорить процесс разработки сайта, а также оптимизировать верстку.

1. Базовая HTML5 конструкция

Основной код любой страницы, которому многие разработчики уделяют недостаточно внимания. Подключены jQuery 1.8.2 и HTML5shiv для корректного отображения в старых браузерах.

2. Сброс стандартных стилей браузеров

один и тот же код в разных браузерах может отображаться по-разному. Сброс стилей поможет избежать таких проблем.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video < margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: none; >html < height: 101%; >/* always display scrollbars */ body < font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, Verdana, sans-serif; >article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section < display: block; >ol, ul < list-style: none; >blockquote, q < quotes: none; >blockquote:before, blockquote:after, q:before, q:after < content: ''; content: none; >strong < font-weight: bold; >input < outline: none; >table < border-collapse: collapse; border-spacing: 0; >img < border: 0; max-width: 100%; >a < text-decoration: none; >a:hover

3. CSS3 градиенты

Представленный ниже код поможет кроссбраузерно отображать CSS-градиенты. Добавляется в нужный селектор, можно использовать rgba() для прозрачности.

background-color: #000; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#000'); background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#000)); background-image: -webkit-linear-gradient(top, #bbb, #000); background-image: -moz-linear-gradient(top, #bbb, #000); background-image: -ms-linear-gradient(top, #bbb, #000); background-image: -o-linear-gradient(top, #bbb, #000); background-image: linear-gradient(top, #bbb, #000); 

4. CSS3 Transform

Не очень популярное свойство из-за проблем в старых браузерах. Однако достаточно перспективное. Можно делать всплывающие подсказки или фигуры.

-webkit-transform: perspective(250) rotateX(45deg); -moz-transform: perspective(250) rotateX(45deg); -ms-transform: perspective(250) rotateX(45deg); -o-transform: perspective(250) rotateX(45deg); transform: perspective(250) rotateX(45deg); 

5. Свой @font-face

Позволяет добавить собственные шрифты на страницу. Для конвертации в различные форматы полезно использовать сервис Font2Web.

6. Мета-теги адаптивной верстки

Важные мета-теги для корректной работы адаптивного макета

7. HTML5-медиа

Конструкция подгрузки нескольких форматов видео и аудио для универсальной работы медиа-контента (убрать пробел в «s ource»)

8. Классы для упрощения верстки

Следующие сниппеты помогут сократить синтаксис при верстке. Техника широко применяется в различных CSS-фреймворках. Например управление свойством float:

.float-left /* Or whatever name you like */ < float: left; >.float-right /* Or whatever name you like */

Или отображением элементов:

9. Сниппеты дизайна

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

10. Сниппеты разработки

Сниппеты, помогающие более грамотно организовать верстку сайта. Вот очень простой пример, который позволяет правильно считать ширину какого-нибудь блока:

Еще один полезный инструмент — это clearfix, помогающий избавиться от несоответствий отображения элементов верстки в разных браузерах:

.clearfix:before, .clearfix:after < content: " "; display: table; >.clearfix:after < clear: both; >/* IE6/7 support */ .clearfix

Слишком длинные URL могут ломать верстку страницы. Чтобы избежать этого, можно применять следующий сниппет (подробнее на css-tricks.com), не работает в Opera и IE ниже восьмой версии:

Переносы текста в теге pre:

11. Подготовка страницы для печати

Перевод контента в черно-белые цвета, отображение подчеркивания у ссылок, отображение URL рядом в скобках:

@media print < * < background: none !important; color: black !important; box-shadow: none !important; text-shadow: none !important; /* Images, vectors and such */ filter: Gray(); /* IE4-8: depreciated */ filter: url('desaturate.svg#grayscale'); /* SVG version for IE10, Firefox, Safari 5 and Opera */ -webkit-filter: grayscale(100%); /* Chrome + Safari 6 */ -moz-filter: grayscale(100%); /* Future proof */ -ms-filter: grayscale(100%); /* Future proof */ -o-filter: grayscale(100%); /* Future proof */ filter: grayscale(100%); /* Future proof or polyfilled */ >a < text-decoration: underline; >a[href]:after < content: " (" attr(href) ")"; >a[href="#"], a[href="javascript:"] < content: ""; >> 

Источник

CSS Snippets

Have you ever seen a cool feature on a website and thought «How do they do that»?

We have collected a bunch of CSS snippets that you can use in your projects, for free:

Image Text Blocks

Alert Buttons

Loaders

Top Navigation

Animated Search Form

Hover Dropdowns

Fixed Sidebar

How To — Snippets Library

For more snippets, you can visit our How To section, that include hundreds of code snippets for HTML, CSS and JavaScript.

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

12 простых HTML-сниппетов вместо сложных библиотек

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Незнание базовых технологий может привести к раздуванию кода, навредить производительности и добавить лишний уровень сложности в проект.

В этой статье мы рассмотрим несколько вещей, которые вы можете сделать на чистом HTML плюс немного CSS (если хотите, чтобы красиво выглядело).

Я использовал здесь одни из самых полезных тегов и атрибутов. Обратите на них внимание и используйте в своем следующем проекте. Также я создал 12 отдельных пенов, чтобы вы могли поиграть с примерами.

Пипетка для выбора цвета

У разработчиков часто возникает необходимость в пипетке — чтобы можно было выбрать цвет из спектра.

Для создания пипетки можно воспользоваться . А вот создание подобного функционала с нуля отнимет у вас много времени.

Цитата

При написании статей может возникнуть желание выделить свои любимые цитаты.

Это можно сделать при помощи тега . Добавьте собственные стили, и получите красивый элемент, выделяющийся на фоне остального текста.

Аудиоплеер

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

Видеоплеер

На сайтах также часто используется видео. Опять же, нельзя просто включить ссылку на видеофайл в свой HTML-код и рассчитывать, что видео станет проигрываться.

Для воспроизведения видео применяется встроенный тег .

Аккордеон

Иногда вам может быть нужно спрятать часть контента и дать возможность пользователю открывать его самостоятельно. Такая необходимость может возникнуть, например, чтобы сэкономить место в зоне просмотра.

Это можно сделать при помощи чистого HTML, а именно — тега .

Выбор даты

Работа с датами — одна из наиболее частых причин, по которым разработчики начинают подыскивать внешнюю библиотеку.

HTML предоставляет тег . Он обеспечит вам возможность выбирать дату при помощи кликов. Интерфейс получится довольно приятный.

Ползунок

Ползунок — распространенный компонент для получения пользовательского инпута в определенном числовом диапазоне.

Чтобы получить полностью функциональный ползунок, используйте . При этом можно установить минимальное, максимальное и текущее значение.

Редактор контента

Для редактирования контента не обязательно использовать поля input или textarea и устанавливать дефолтные значения для них.

Вместо этого можно использовать атрибут contenteditable . Таким образом можно сделать редактируемым контент div (например).

Тег picture

Для улучшения производительности и UI/UX вы можете захотеть отображать на странице разные картинки в зависимости от размеров экранов.

Вместо использования дефолтного тега , определения зоны просмотра и создания метода для переключения между картинками, можно просто использовать встроенный тег .

Индикатор выполнения

Тег позволяет вывести на экран прогресс выполнения задачи.

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

Выпадающий список

Бывает, нужно получить от пользователя input путем выбора из нескольких доступных вариантов. Вместо того чтобы перечислять все доступные опции на экране, можно поместить их в выпадающий список.

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

Контекстное окно — подсказка

Если вам нужно дать подробное описание чего-либо, можно добавить всплывающее окно. В HTML предусмотрена такая функция: нужно использовать атрибут title .

Итак, мы рассмотрели функциональные элементы HTML, которые можно использовать при работе с текстом, аудио, изображениями и видео.

Когда вам в следующий раз потребуется какой-то функционал, сперва проверьте, не реализован ли он в самом HTML.

Источник