Swiperjs - хороший адаптивный слайдер / карусель с множеством настроек и хорошими примерами.

pic1


Категории: Web
Пометки: Слайдер, карусель, prettyphoto, slider ,Carousel

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

Ниже будет пример того, как такое можно сделать с использованием css grid.


Категории: Web, CSS
Пометки: Как сделать двухколончатую таблицу на css grid, css grid таблица

Перечень основных терминов и сборник примеров по технологии css grid.


Категории: Web, CSS

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

Ниже будет пример того, как это можно сделать с использованием css свойств flexbox.


Категории: Web, CSS, -Памятка-
Пометки: Как сделать двухколончатую таблицу на css flex css flex таблица, css flexbox

Красивая галерея Spotlight, думаю рассмотреть ее как замену устаревший и больше не обновляющейся prettyphoto

pic1

На полный экран:

pic1

pic1


Категории: Web
Пометки: prettyphoto

После выхода Font Awesome 5'ой версии, появление PRO, kit и т.д. стало сложно найти прямую ссылку на CDN шрифта. Оставлю тут памятку:

 
<link href="https://use.fontawesome.com/releases/v5.10.2/css/all.css" rel="stylesheet">

Проверка:

 
<i class="fas fa-check"></i>



Также SVG версия:

 
<script defer src="https://use.fontawesome.com/releases/v5.10.2/js/all.js"></script>


Категории: Web, HTML, CSS

Потребовалось заменять " на « и ».

Проблема именно в том, что четный и нечетные заменяются на разный символ, поэтому простым использованием функции str_replace проблемы не решить.


Категории: Web, PHP, regexp
Пометки: php замена двойных кавычек на амперсанд

pic1

Один из тех случаев ,в которых лучше один раз увидеть, чем много раз услышать.

По сути это неоновая ободка текста (text-shadow) и эффект мерцания через @keyframes


Категории: Web, CSS
Пометки: css Neon Glowing Text

Данный пример основан на css свойстве position: sticky; и так листать можно любые элементы.

Повороты (наклоны) изображений сделаны для визуального оформления и получающаяся куча результат нехитрых манипуляций, код ниже.

pic1


Категории: Web, HTML, CSS

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

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


Категории: Web, CSS, Сторонние сервисы
Пометки: css палетка цветов
Яндекс.Метрика