Архив метки: html5

Колонки в CSS3

Использование колонок в CSS3.

Для того чтобы текст в элементе стал много колоночным необходимо через стили в CSS прописать одно из свойств: column-width или column-count в значение, отличное от auto. 

Есть 2 возможности при создания колонок.

1 способ — указать количество колонок.

К примеру для создания текста из 2-х колонок, нужно выставить след свойство в стилях

#Col_Count{
-webkit-column-count: 2;
}

получиться так

2 Колонки

2 способ — указать ширину колонок

Пример укажем ширину колонок 80px, при общей длине блока 400px

#Col_width{
width:400px;
-webkit-column-width: 80px;
}

получиться так

Колонки

Видно что хотя общая ширина 400 и мы указали ширину 1 колонки 80, всего колонок не 5 (400/80=5) а 4. Это связано с тем что есть еще межколночные интервалы.

Посмотреть пример

Скачать пример

Всплывающие подсказки с помощью CSS3

Анимация всплывающих подсказок с помощью CSS3

Создадим анимацию всплывающих подсказок (tooltip) вот такого вида

Всплывающие подсказки с анимацией

Шаг 1

Покажем наши картинки, для которых нужны всплывающие подсказки.

Код html

<div class="tt-wrapper"> 
 <a href=""><img src="img/class-mage.png"><span>Маг</span></a>
 <a href=""><img src="img/class-priest.png"><span>Монах</span></a> 
 <a href=""><img src="img/class-warrior.png"><span>Воин</span></a> 
 <a href=""><img src="img/class-scout.png"><span >Разведчик</span></a>
</div>

Шаг 2

Создаем стили
Для начала создадим стиль для общего div
код css

.tt-wrapper{
	padding: 0;
	width: 800px;
	margin-top:150px;
    margin-left:25%;
	text-align:center;
}

Затем создадим стили для подсказок

.tt-wrapper a span{
    width: 100px;
	height: auto;
	line-height: 20px;
	padding: 10px;
	margin-left:-123px;
    font-family: 'Alegreya SC', Georgia, serif;
    font-weight: 400;
    font-style: Bolder;
    font-size: 14px;
    color: #004A7F;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
	text-decoration:none;
    text-align: center;
    border: 2px solid #fff;
    background: rgba(255,255,255,0.3);
    text-indent: 0px;
    border-radius: 15px;
    position: absolute;
    pointer-events: none;
	bottom: 570px;
	opacity: 0;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;

}
.tt-wrapper  a span:before,
.tt-wrapper  a span:after{
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    margin-left: -9px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(0,0,0,0.1);
}
a {
text-decoration:none;
}
.tt-wrapper  a span:after{
    bottom: -14px;
    margin-left: -10px;
    border-top: 10px solid #fff;
}

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

.tt-wrapper a:hover span{
    opacity: 0.9;
    bottom: 600px;
	text-decoration:none;
}

Работающий пример подсказок — DEMO

Показ видео на сайте с помощью HTML5

Показ видео осуществляется с помощью HTML5 тега <video> </video>
Общий вид

<video src="video.mp4" controls="controls">

Параметры

  • autoplay=»autoplay» – видео воспроизводится сразу после загрузки страницы.
  • autobuffer=»autobuffer» – видео воспроизводится уже в момент загрузки страницы.
  • controls=»controls» – показать панель управления видеоплеером.
  • loop=»loop» – по окончанию, видео проигрывается снова.
  • src=»url» – путь к источнику видео.
  • type=»video/ogg» – определяет формат видео.
  • height=»» – высота видеоплеера.
  • width=»» – ширина видеоплеера.

Пример для проигрывания видеофайла на сайте с помощью HTML5

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
</head>
<body>
<video src="video.mp4" controls="controls">
Ваш браузер не поддерживает теги HTML5 для видео.Необходимо обновить браузер!
</video>
</body>
</html>

Для нормального воспроизведения видео во всех браузерах можно добавить несколько источников видео в разных форматах для воспроизведения (Ogg, MPEG4, WebM).Для этого используется тег <source> внутри тэга <video>. Браузер будет использовать первый поддерживаемый им формат.

Пример для проигрывания видео файла с несколькими источниками на сайте с помощью HTML5

<video controls="controls">
  <source src="video.mp4" type="video/ogg" />
  <source src="video.ogv" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
Ваш браузер не поддерживает теги HTML5 для видео.Необходимо обновить браузер!
</video>

Фоновая музыка или звук на сайте с HTML5

Фоновый звук или музыка c помощью HTML 5

Аудиопотоком в HTML5 управляет тег <audio>

Пример

<audio src="music.ogg" controls="controls">

Параметры

  • autoplay=»autoplay» определяет воспроизведение музыкального файла сразу же после загрузки страницы.
  • autobuffer=»autobuffer»используется в паре с autoplay=»autoplay» – определяет воспроизведение музыкального файла уже в момент загрузки страницы.
  • src=»url» – путь к звуковому файлу.
  • controls=»controls» показывает панель управления плеером.

Пример для создания фоновой музыки на сайте

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
</head>
<body>
<audio src="music.mp3" autoplay="autoplay">
Ваш браузер не поддерживает теги audio. Необходимо обновить браузер!
</audio>
</body>
</html>

Всплывающие подсказки (тултипы) с помощью CSS

Создание простых всплывающих подсказок («тултипов»)

В данном методе не будет использоваться JavaScript, лишь CSS3 и HTML5.

Этот способ сгодится тем, кому нужны небольшие всплывающие подсказки — «тултипчики».

tooltip Всплывающая подсказка

Сам элемент зададим так

наведи на меня!

В CSS необходимо прописать следующий код

.tooltip {
    border-bottom: 1px dotted #0077AA;
    cursor: help;
}

.tooltip::after {
    background: rgba(0, 0, 0, 0.8);
    border-radius: 8px 8px 8px 0px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    color: #FFF;
    content: attr(data-tooltip); /*содержимое всплывающей подсказки */
    margin-top: -24px;
    opacity: 0; /* Наш элемент прозрачен... */
    padding: 3px 7px;
    position: absolute;
    visibility: hidden; /* ...и скрыт. */

    transition: all 0.4s ease-in-out; /*Добавить плавности по вкусу */
}

.tooltip:hover::after {
    opacity: 1; /* Показываем его */
    visibility: visible;
}

Берется некий элемент (В нашем случае span), добавляем к нему атрибут с текстом, который будет показан и берём псевдоэлемент ::after. В content этого псевдоэлемента мы, пользуясь замечательнейшим свойством attr(), присваиваем нашей всплывающей подсказке текст и потом по :hover показываем его.

Остальные свойства понятны по комментариям в коде.