HTML и CSS

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

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

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


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

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

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

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


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

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

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

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


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

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

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

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



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

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

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

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


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

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

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

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

Читать дальше
HTML и CSS 0    223    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 0    1325    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 0    204    0 0

Адаптивный дизайн для сайта через @media

Адаптив для сайта через @media

Когда нужно сделать адаптив для сайта, то обычно я использую следующие разрешения мониторов:

@media(min-width:0px) and (max-width:320px) {
	/* совсем маленькие экраны андроидов */
}

@media(min-width:321px) and (max-width:480px) {
	/* популярные разрешения смартфонов уже более позднего поколения андроид */
}

@media(min-width:481px) and (max-width:768px) {
	/* телефоны в перевернутом состоянии и некоторые планшеты */
}

@media(min-width:769px) and (max-width:992px) {
	/* планшеты */
}

@media(min-width:993px) and (max-width:1200px) {
	/* экраны некоторых ноутбуков и некоторых планшетов */
}

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