HTML и CSS

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

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

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

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


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

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

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

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

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

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

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


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

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

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

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


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

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

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

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


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

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

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

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



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

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

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

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


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

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

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

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

Читать дальше
HTML и CSS 1825    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 5831    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 556    0 0