Начинаем улучшать наш сайт!
Классная стилизация чекбоксов, которая придаст изюминку твоему сайту.
Кастомизация займет не более 10 минут времени.
#HTML_CSS

Коллекция CSS прелоадеров

Креативная коллекция крутящихся прелоадеров, анимированных при помощи CSS3. Каждый «волчок» коллекции состоит всего из одного блока с классом .loader и текстом «Loading…». Текст задан для экранных читалок и обратной совместимости со старыми версиями браузеров, не поддерживающих CSS3.

Всем прелоадерам задан размер шрифта font-size в px (пиксели), а все другие размеры в em (относительная величина, зависящая от размера шрифта текущего элемента). Это сделано для того, чтобы можно было легко изменить размер всего прелоадера, оперируя только размером шрифта.

Установка очень проста, просто перейдите на сайт и выберите, что Вам понравилось и нажмите под прелоадером на ссылку "View Source". Откроется код для копирования на свой сайт,

#HTML_CSS

Способ центрировать и обрезать миниатюры с помощью CSS

Если у вас на сайте блоки под изображения квадратного типа, а сами картинки неправильного размера, то вы при помощи этого трюка можете легко это исправить

Техника использует преобразования CSS3, поэтому она работает во всех современных браузерах, включая IE9 и выше.

Пример разметки HTML
<div class="thumbnail">
<img src="landscape-img.jpg" alt="Image" />
</div>
<div class="thumbnail">
<img src="portrait-img.jpg" class="portrait" alt="Image" />
</div>

Пример CSS свойств для этой разметки:
.thumbnail {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
.thumbnail img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.thumbnail img.portrait {
width: 100%;
height: auto;
}

Вот и весь процесс, если что то не понятно, обсуждаем в нашем чате!

#HTML_CSS

Крутые кнопки для сайта на чистом CSS.

Такие кнопки придадут вашему сайту изюминку. А эффекты на кнопках позволят оживить сайт и улучшить общий взгляд на продукт.

#HTML_CSS

Стилизация radio кнопок для сайта

Чтобы Ваш сайт был круче конкурентов, всегда необходимо вносить какие то новшества. Как вариант, можете стилизовать радио кнопки с помощью CSS всего в 2 шага.

#HTML_CSS

Вложенные ссылки в HTML.

Как известно, в спецификации HTML чётко указано, что вложенных ссылок нет и быть не может. Но разработчик интерфейсов в Яндексе предложил простой и вполне рабочий вариант решения данной проблемы.

Парсер браузера просто сломает ваш код, если он будет такого типа.
<a href="#post">
  Название поста
<a href="#category">Категория</a>
</a>

Решение проблемы
Чтобы пофиксить данное стандартное поведение браузера (который следует указаниям спецификации), достаточно вложенную ссылку обернуть в тег <object />

<a href="#post">
  Название поста
  <object>
    <a href="#category">Категория</a>
  </object>
</a>

#HTML_CSS

Анимированный прелоадер для сайта на чистом CSS.

Страница любого сайта или веб-приложения не загружается мгновенно. На загрузку и отображение страницы необходимо некоторое время. При этом страница при её загрузке может видоизменяться. Обычно это происходит при загрузке стилей, шрифтов, картинок. Чтобы этот не привлекательный момент скрыть от пользователя, можно на время загрузки страницы отобразить пользователю какой-нибудь анимированный прелоадер. А после того, как страница полностью загрузится его убрать. Основная цель прелоадера — это улучшить впечатление пользователя о сайте.

#HTML_CSS

AOS — это современная библиотека, которая способна менять позиции элементов при скролле. Богатый функционал, есть возможность создавать свои анимации.

Инструкция по установке и настройке AOS
Рассмотрим на примере подключения через CDN

Шаг 1.
Подключить перед закрывающим тегом </head> CSS файл
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

Перед закрывающим тегом </body> подключить JS файл
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

Шаг 2.
Выполнить инициализацию библиотеки. Перед закрывающим тегом </body> добавить
<script>
AOS.init();
</script>

Шаг 3.
Добавляем анимацию для нашего блока. Просто добавьте к блоку data-атрибут c названием анимации
<div data-aos="fade-up-right"></div>

#JS #HTML_CSS

Анимированный скролл на чистом CSS

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

#HTML_CSS

Анимированная страница 404 ошибки на чистом CSS.

Одной из самых распространенных проблем, с которыми сталкиваются посетители различных сайтов является ошибка 404 Not Found. Если говорить простым языком, то он означает, что страницы с таким адресом не существует. В этом уроке мы рассмотрим как стилизовать страницу с 404 ошибкой.

#HTML_CSS

Во время разработки мобильной версии для iOS устройств в Safari браузере, многие сталкиваются со следующей проблемой: на всех полях формы input, textarea присутствует внутренняя тень, а так же иногда закругление.

Решение на CSS
Внизу указан CSS стиль, который убирает закругления и тень у полей в WebKit браузерах.
input:not([type=checkbox]):not([type=radio]),textarea, select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

Важно знать
Обратите внимание, что указано
input:not([type=checkbox]):not([type=radio])

Это означает исключить инпуты типа checkbox и radio. Почему? Если вы пропишите тот же самый стиль для этим типов (radio, checkbox), то у вас пропадет точка в radio и галочка в checkbox.

#HTML_CSS

Вращающийся блок на чистом CSS

В данном уроке мы рассмотрим реализацию крутой анимации для вращения вложенных блоков друг в друга с некоторой задержкой по времени. Такую фичу можно реализовать для preloader на Вашем проекте.

#HTML_CSS