HTML и CSS

Анимированный фон с плавающими облаками

Анимированный фон с плавающими облаками

Представляю вам анимированный фон с плавно движущимися облаками. Динамику облакам придает CSS3-анимация. JS скрипты не используются. Создание анимации начинается с установки ключевых кадров правила @keyframes. Правило @keyframes содержит имя анимации элемента.

HTML разметка фона


Читать дальше
HTML и CSS 1232    0 0

Красивое оформление 404 страницы

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

404
Читать дальше
HTML и CSS 1170    0 0

Вертикальное hover hide меню для сайта на HTML и CSS

Вертикальное меню hover hide для сайта на HTML и CSS

Вы можете воспользоваться готовым вертикальным меню для сайта на HTML и CSS, которое можно разместить, например, в сайдбаре. Меню раскрывается, если навести на него мышкой.


Читать дальше
HTML и CSS 981    0 0

Стилизация Input File

Стилизация Input File

Эта статья поможет изменить вид поля для отправки данных input[type=file], который по умолчанию довольно невзрачный. Ниже приведены 3 примера оформления input file


Читать дальше
HTML и CSS 4282    0 +1

Стилизация checkbox и radio

Стилизация checkbox и radio

В этой статье мы научимся менять внешний вид checkbox или radio-кнопок без использования JavaScript. Ниже приведены примеры, которые можно в живую опробовать. Чтобы перенести примеры на свой сайт достаточно скопировать HTML разметку и CSS стилизацию.


Читать дальше
HTML и CSS 3884    1 0

Учим HTML5 Canvas за 30 минут

Сегодня будет легкий, но классный урок. Мы познакомимся с HTML 5 Canvas.

С помощью Canvas Вы сможете создавать интересные эффекты на странице, разрабатывать игры и полезные графические инструменты. При этом всем работа с HTML 5 Canvas осуществляется посредством языка программирования JavaScript, но там все очень просто. Его поддержка радует во всех смыслах, так как Canvas поддерживается практически везде, даже на старых версиях Internet Explorer.



Читать дальше
HTML и CSS 989    0 0

Красивые заголовки ▶ подборка

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

Анимация для заголовка


Читать дальше
HTML и CSS 3322    0 0

Прелоадер для сайта ▶ как сделать?

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

прелоадер Ждущий посетитель

Читать дальше
HTML и CSS 2223    0 0

Красивые CSS3 кнопки с анимацией и hover эффектами

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

Вжух кнопище

Подключение HTML:

Вжух кнопище

Подключение css:

#body_button{
  background: #000;
  height: 300px;
  margin: 0;
  padding: 0;
  color: #ddf;
  background-color: #112;
  text-align: center;
  padding-top: 12vh;
}
.button_hola,
.button_hola::before,
.button_hola::after,
.button_hola span,
.button_hola span::before,
.button_hola span::after
{
  transition: all ease .5s;
}

.button_hola{
  position: relative;
  display: inline-block;
  padding: 0.3em;
  margin: 1em;
  border: solid 1px;
  text-transform: uppercase;
  cursor: pointer;
}

.button_hola:hover
{
  box-shadow: 0 0 5em .5em rgba(50,50,150,0.5);
}

.button_hola span
{
  display: inline-block;
  width: 100%;
  padding: 0.6em 2em;
}

.button_hola:hover span
{
  background-color: #fff;
  color: #112;
}

.button_hola::before,
.button_hola::after,
.button_hola span::before,
.button_hola span::after
{
  content: '';
  position: absolute;
  border: 1px;
}

.button_hola::before,
.button_hola span::before
{
  border-style: solid none;  
}

.button_hola::before,
.button_hola span::after{      
  left: 0;
  top: -0.4em;
  width: 100%; 
  height: calc(100% + 0.8em);
}

.button_hola::after,
.button_hola span::after
{
  border-style: none solid;   
}

.button_hola::after,
.button_hola span::before
{
  top: 0;
  left: -0.4em;
  height: 100%;
  width: calc(100% + 0.8em); 
}

.button_hola:hover::after,
.button_hola:hover span::after
{
  transform: scaleY(0);
}

.button_hola:hover::before,
.button_hola:hover span::before
{
  transform: scaleX(0);
}

.button_hola:hover span::after,
.button_hola:hover span::before
{
  opacity: 0;
}

Читать дальше
HTML и CSS 7779    0 +2

Как скрыть элементы в Bootstrap | Классы .hidden и .visible

Bootstrap 3 содержит адаптивные (служебные) классы, которые позволяют управлять видимостью отображения элементов в зависимости от типа устройства.

Phones (<768px) Tablets (≥ 768px) Desktops (≥ 992px) Desktops (≥ 1200px)
.visible-xs-? Видимый Скрытый Скрытый Скрытый
.visible-sm-? Скрытый Видимый Скрытый Скрытый
.visible-md-? Скрытый Скрытый Видимый Скрытый
.visible-lg-? Скрытый Скрытый Скрытый Видимый

Читать дальше
HTML и CSS 637    0 0

Блог программиста

Продвижение сайтов

Современные шаблоны для сайтов на русском

Последние комментарии

Михаил Шилов 30 апреля 2019, 23:45
Стилизация checkbox и radio 1
Андрей Карманов 08 марта 2019, 08:05
Пишем на SQL без SQL: основы по RedBean PHP 13
Леонид Кобяшев 26 декабря 2018, 20:20
Обратный таймер на JavaScript 1
Алексей Власов 16 октября 2018, 14:27
Универсальный и очень простой PHP парсер 10
Алексей Власов 13 октября 2018, 18:57
Бесконечное сохранение ресурсов в MODX 2