Украшательство сайта-портфолио. Почему бы и нет?

Однажды на вопрос журналиста о достоинствах новой операционной системы для Мака, Стив Джобс ответил: «Мы сделали кнопочки на экране такими хорошенькими, что вам захочется их лизнуть».

Если ещё не знаете, то один из наших девизов: «Сделай настолько просто, насколько это возможно, но не проще». Эту цитату приписывают Альберту Эйнштейну, спасибо ему! Мы придумали и развиваем самый простой в мире конструктор сайтов-портфолио для фотографов и художников.

Прежде чем пуститься в это увлекательное путешествие, было испробовано не менее пары десятков популярных конструкторов сайтов-портфолио, после чего стало понятно – даже самые простые из них слишком сложны для вечно занятых нас.

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

Конечно, как и операционная система Стива Джобса, наша система тоже сложнее, чем выглядит – непростые умные алгоритмы управляют ей 24/7, просто их не видно. Например, когда загружаете фото, специально обученный скрипт оценивает его вес и размер – задача скрипта, понять, какие механизмы обработки изображения задействовать для обработки перед записью в Базу данных. Если изображение больше чем 2500 пикселей по длинной стороне, то скрипт уменьшит его до этого размера, добавит резкости, которая теряется при уменьшении, и сохранит в Базу в качестве исходного. Затем скрипт создаст четыре копии разного размера для разных экранов, включая планшеты и смартфоны – ведь нецелесообразно забивать трафик смартфона огромными картинками.

Готов долго рассказывать о внутреннем устройстве конструктора, но не уверен, что вам это интересно. А здесь хотел рассказать про кнопки 🤓

Итак, кнопки.

В конструкторе нет  настроек для модификации кнопок. Их на сайте пока всего две – в форме обратной связи на странице «Контакты» и в форме подписки на анонсы блога. Если вдруг вам захочется изменить внешний кнопок, то это несложно сделать с помощью переопределения CSS.

Для примера публикую стиль трехмерной голубой кнопки к шаблону «Магнум». Она как живая 😄

Перейдите на страницу «Дизайн» и в левом столбце пункт «Переопределение CSS», кликните по нему и скопируйте этот код в открывшееся справа окно. Сохраните результат.

Копируйте всё содержание внутри серого поля.

/* ------------------- Синяя объёмная кнопка --------------------- */

/*Неактивная кнопка. Например в форме подписки на блог эта кнопка серого цвета до тех пор, пока в поле email не появится адрес, похожий на email.*/

.subscribeOverlay .subscribeForm.disabled input[type="submit"] {
background: #E0E0E0;
box-shadow:none;
}
/*Правило выравнивает кнопку по центру всплывающей формы для подписки*/
.subscribeOverlay .subscribeForm input[type="submit"] {
display: block;
}
/*Правило выравнивает кнопку на странице обратной связи*/
#subscribe input[type="submit"] {
display: inline-flex;
}

/*Кнопка Normal — сообщает, что кнопка интерактивна и включена.*/

 .subscribeOverlay .subscribeForm input[type="submit"], #subscribe input[type="submit"] {
  align-items: center;
  appearance: none;
  background-image: radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%);
  background: radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%);
  border: 0;
  border-radius: 6px;
  box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  height: 48px;
  justify-content: center;
  line-height: 1;
  list-style: none;
  overflow: hidden;
  padding-left: 16px;
  padding-right: 16px;
  position: relative;
  text-align: left;
  text-decoration: none;
  transition: box-shadow .15s,transform .15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow,transform;
  font-size: 18px;
opacity: 100%;
}

/*Кнопка Hover — сообщает, когда пользователь навел курсор на кнопку.*/

.subscribeForm input[type="submit"]:hover, #subscribe input[type="submit"]:hover {
  box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
  transform: translateY(-2px);
background-image: radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%);
}

/*Кнопка Active — Активное или нажатое состояние сообщает о том, что пользователь нажал на кнопку.*/

.subscribeForm input[type="submit"]:active, #subscribe input[type="submit"]:active {
  box-shadow: #3c4fe0 0 3px 7px inset;
  transform: translateY(2px);
background-image: radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%);
}

Вот ещё одна простая и изящная коралловая кнопочка для вашего любимого сайта-портфолио. Тоже для шаблона «Магнум»:

Копируйте всё содержание внутри серого поля. Не забудьте сохранить результат.

/* ------------------- Коралловая кнопка --------------------- */


/*Неактивная кнопка. Например в форме подписки на блог эта кнопка серого цвета до тех пор, пока в поле email не появится адрес, похожий на email.*/

.subscribeOverlay .subscribeForm.disabled input[type="submit"] {
background: #E0E0E0;
border:none;
box-shadow:none;
color:#ffffff;
display: block;
} 
/*Правило выравнивает кнопку по центру всплывающей формы для подписки*/
.subscribeOverlay .subscribeForm input[type="submit"] {
display: block;
}
/*Правило выравнивает кнопку на странице обратной связи*/
#subscribe input[type="submit"] {
display: inline-flex;
}

/*Кнопка Normal — сообщает, что кнопка интерактивна и включена.*/

.subscribeOverlay .subscribeForm input[type="submit"], #subscribe input[type="submit"] {
  background: #FF4742;
  opacity: 100%;
  border: 1px solid #FF4742;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 4px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  /*display: inline-flex;*/
  font-family: nunito,roboto,proxima-nova,"proxima nova",sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
  min-height: 40px;
  outline: 0;
  padding: 12px 14px;
  text-align: center;
  text-rendering: geometricprecision;
  text-transform: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
}

/*Кнопка Hover — сообщает, когда пользователь навел курсор на кнопку. Active — активное или нажатое состояние сообщает о том, что пользователь нажал на кнопку.*/

.subscribeForm input[type="submit"]:hover, #subscribe input[type="submit"]:hover,
.subscribeForm input[type="submit"]:active, #subscribe input[type="submit"]:active {
  background-color: initial;
  background-position: 0 0;
  color: #FF4742;
}

.subscribeForm input[type="submit"]:active,#subscribe input[type="submit"]:active {
  opacity: .5;
}

Платформа Portfolio.Photographer.ru служит фотографам и художникам для создания сайтов-портфолио и размещения их в Интернете. Если у вас нет ни времени, ни опыта для создания сайта, но вы хотите его иметь, то эта платформа для вас 😉

Начните создавать свой сайт прямо сейчас!

Ваш Андрей Безукладников