В 993 раз. Должен ли дизайнер верстать и программировать? | by Айдар Шакиров | Aug, 2020

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

СКАЧАТЬ

 Envato Elements "width =" 119 "height =" 13 "/> </div>
</div>
<p></a>
</div>
<p> <img style=

Создание

Создайте пустой HTML-документ и назовите его index.html . Добавьте базовый скелет HTML. Если вы используете Visual Studio Code, все, что вам нужно сделать, это ввести «!» и нажмите Enter. У вас получится вот это.

 


   
   
    Документ 


  


В этой демонстрации используется шрифт «Noto Sans». Давайте встроим этот шрифт из Google Fonts. Добавьте эту ссылку CDN под тегом заголовка, чтобы встроить обычный и курсивный стили этого шрифта.

 

Создайте свою таблицу стилей и назовите ее style.css . Свяжите таблицу стилей со своим HTML-документом под ссылкой Google fonts CDN, используя

 

Я загрузил три портретных изображения с Pexels и обрезал их квадратной формы для этой демонстрации. Вы можете добавить свой собственный. Назовите их testimonial1.jpg testimonial2.jpg и testimonial3.jpg .

Создание простого скроллера

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

HTML

Добавьте эту разметку в тег тела в свой HTML-файл:

 
Пункт 1
Пункт 2
Пункт 3

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

CSS

В style.css начните с некоторых общих стилей для всех элементов:

 * {
   маржа: 0;
   отступ: 0;
   размер коробки: рамка-рамка;
}

Добавьте эти стили к элементу body :

 body {
   семейство шрифтов: «Noto Sans», без засечек;
   размер шрифта: 1em;
   цвет: # 4A5568;
}

Ограничьте ширину обертки отзывов примерно до 800 пикселей и отцентрируйте ее.

 .testimonials {
   максимальная ширина: 800 пикселей;
   маржа: авто;
}

Добавьте эти базовые стили, чтобы увидеть, как работает скроллер.

 .scroller {
   переполнение-x: прокрутка;
   дисплей: гибкий;
}
.пункт {
   минимальная ширина: 100%;
   минимальная высота: 200 пикселей; /* Начать с */
   цвет фона: # EDF2F7; / * Для демонстрации * /
}

Здесь вы можете увидеть такую ​​секцию горизонтальной прокрутки.

 начало карусели - горизонтальная секция прокрутки "width =" 1024 "height =" 266 "class =" alignnone size-large wp-image-155303 "/> </p>
<h3> Привязка прокрутки </h3>
<p> С помощью привязки прокрутки CSS можно принудительно установить положение прокрутки (плавное перемещение в принудительное положение), как только пользователь прекращает прокрутку. Это работает за счет применения двух основных свойств — <code> scroll-snap-type </code> и <code> scroll-snap-align </code>. </p>
<p> Свойство <strong> scroll-snap-type </strong> применяется к родительскому контейнеру <strong> </strong> (в нашем случае это div <code> scroller </code>). Он принимает два аргумента — направление привязки (<code> x | y | both </code>) и поведение привязки (<code> обязательное | близость </code>). Нам нужно использовать <code> x </code> для направления, потому что мы прокручиваем горизонтально. Для поведения <code> обязательный </code> означает, что браузер должен привязаться к позиции, в то время как <code> близость </code> менее строгий. Мы будем использовать <code> обязательный </code>. </p>
<p> Свойство <strong> scroll-snap-align </strong> применяется к дочерним элементам. Он определяет точку привязки. Требуется один или два аргумента для направления <code> x </code> или / и <code> y </code> (<code> none | start | end | center </code>). В нашем случае это свойство может иметь любое значение, кроме <code> none </code>потому что наши элементы составляют 100% ширины родительского контейнера. Вы можете подробнее ознакомиться с концепцией CSS Scroll Snap здесь. </p>
<p> Добавьте эти свойства в divs </code> scroller </code> и <code> item </code>. </p>
<pre class= .scroller { / * Здесь существующие стили * / scroll-snap-type: x обязательный; } .пункт { / * Здесь существующие стили * / прокрутка-привязка-выравнивание: центр; }

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

Добавление содержания

Давайте добавим содержание к элементам.

HTML

 
 Элиз

Eu rebum molestie per. Нет nostrud imperdiet abhorreant qui, hinc incorrupte vix ad. Vel id aliquip oblique. Primis feugait сидеть, грубый илуд удобный дуэт шт. Graece tempor eripuit sed в.

Элиз
 Джон

Vitae pericula maluisset ut mei, pro eleifend gubergren eu. Et his brute graeci. Affert ponderum ei vel, dolorum accumsan ea имеет. Sea oblique salutatus ei, simul lucilius pri et. Errem melius temporibus ut eos

Джон
 Imani

Ne est virtute indexum, quaeque vituperata cum ut. Te nisl quaeque pri. Vix ex autem latine, mel ne nobis scaevola, ei est dolor utinam commune. Pri unum doctus in, cu primis pertinax eos.

Imani

CSS

Пора его украсить.

 .testimonials {
   / * Здесь существующие стили * /
   отступ: 15 пикселей;
   выравнивание текста: центр;
}
.пункт {
   / * Здесь существующие стили * /
   цвет фона: белый; / * Измените значение на белый * /
   нижнее поле: 10 пикселей;
   отступ: 0 50 пикселей;
}
.item img {
   маржа: 15 пикселей авто-60 пикселей;
   ширина: 120 пикселей;
   высота: 120 пикселей;
   граница: сплошная 4px #ffffff;
   радиус границы: 60 пикселей;
   box-shadow: 0 4px 6px -1px rgba (0, 0, 0, 0,1);
   z-индекс: 2;
}
.открытка {
   цвет фона: rgb (237, 242, 247);
   отступ: 80 пикселей 40 пикселей 40 пикселей;
   радиус границы: 10 пикселей;
   box-shadow: 0 4px 6px -1px rgba (0, 0, 0, 0,1);
   z-индекс: 1;
}
.card p {
   стиль шрифта: курсив;
   высота строки: 1,6;
}
.card span {
   дисплей: блок;
   маржа сверху: 20 пикселей;
   цвет: бирюзовый;
   font-weight: жирный;
   межбуквенный интервал: 0,05 мкм;
   преобразование текста: прописные буквы;
}

Наша карусель обрела форму. Единственное, что пока не решено, — это функция навигации.

Добавление навигации

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

HTML

Добавьте эти две строки сразу после div scroller но внутри рекомендательного div :

  & Lt; 
 & триазол 

CSS

Добавьте в свою таблицу стилей для размещения и оформления кнопок навигации:

 .testimonials {
   / * Здесь существующие стили * /
   положение: относительное;
}
.testimonials .btn {
   позиция: абсолютная;
   верх: 50%;
   маржа сверху: 20 пикселей;
   высота: 30 пикселей;
   ширина: 30 пикселей;
   радиус границы: 15 пикселей;
   цвет фона: rgba (95, 106, 117, 0,3);
   z-индекс: 1;
   высота строки: 30 пикселей;
   выравнивание текста: центр;
   цвет белый;
   font-weight: жирный;
}
.testimonials .btn: hover {
   цвет фона: rgba (95, 106, 117, 0,5);
   курсор: указатель;
}
.testimonials .btn.next {
   справа: 15 пикселей;
}
.testimonials .btn.prev {
   слева: 15 пикселей;
}

JavaScript

Нам нужен JavaScript, чтобы кнопки работали. Добавьте этот сценарий перед закрытием тега body .

 

В приведенном выше коде мы добавили обработчики событий click к кнопкам prev и next . Функциональность перехода к предыдущему или следующему элементу достигается с помощью метода scrollBy . Ознакомьтесь с синтаксисом и примерами метода element.scrollBy .

Вариант поведения : «гладкий» дает эффект плавного скольжения. Обратите внимание, что этот эффект не поддерживается в IE 11 и некоторых более старых версиях других браузеров.

Создание цикла

При желании вы можете сделать этот цикл карусели — нажатие кнопки «Далее» для последнего элемента заставляет карусель начинаться с начала и аналогичное поведение для кнопки «предыдущая», изменив методы в сценарии на следующие:

 function scrollToNextItem () {
   если (scroller.scrollLeft <(scroller.scrollWidth - itemWidth))
       // Позиция прокрутки не в начале последнего элемента
       scroller.scrollBy ({left: itemWidth, вверху: 0, поведение: 'гладкое'});
   еще
       // Достигнут последний элемент. Вернитесь к первому элементу, установив положение прокрутки на 0
       scroller.scrollTo ({слева: 0, сверху: 0, поведение: «гладко»});
}
function scrollToPrevItem () {
   если (scroller.scrollLeft! = 0)
       // Позиция прокрутки не в начале первого элемента
       scroller.scrollBy ({left: -itemWidth, верх: 0, поведение: 'гладкий'});
   еще
       // Это первый элемент. Перейти к последнему элементу, установив положение прокрутки на ширину скроллера
       scroller.scrollTo ({left: scroller.scrollWidth, вверху: 0, поведение: 'гладкое'});
}

Делаем его полностью адаптивным

То, что у нас есть сейчас, уже реагирует. За исключением того, что для ширины браузера меньше 480 пикселей карта становится слишком узкой и длинной. Итак, давайте уменьшим отступ для элемента и карточки для этой ширины с помощью медиа-запросов.

Добавьте это в свою таблицу стилей:

@media screen и (max-width: 480px) {
.item {
padding: 0 30px;
}
.card {
padding: 80px 30px 30px;
]}
}

Вот оно! Вы успешно создали адаптивную карусель для раздела отзывов с наименьшим количеством JavaScript, а также узнали о новых свойствах scroll-snap в CSS. Вы можете изменить эту карусель в соответствии со своими потребностями. Попробуйте использовать эту карусель для изображений различной ширины и посмотрите, как она себя ведет.

Здесь вы можете скачать полный исходный код.

Загрузить исходный код

Это сообщение может содержать партнерские ссылки. Смотрите наше раскрытие партнерских ссылок здесь .

создайте реалистичный макет за одну минуту / Полезное / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY

После того, как вы закончили свой сайт, вам необходимо подумать о его презентации клиентам. Многие люди используют шаблоны макетов PSD для демонстрации проектов в реалистичной среде. Но что, если вы не знаете, как лучше это сделать, да и время поджимает? Для такого случая есть решение. Вы можете создавать макеты самостоятельно без Photoshop или других дополнительных…

«Сны и кошмары» Марко Оггиана оживают для выставки в реальном мире — Новости

Мы большие поклонники лондонской галереи Pocko, созданной одноименным креативным агентством. Здесь проходила одна из лучших художественных выставок прошлого года, выставка Саймона Ландрейна Я не понимаю коллекция скриншотов и рисунков тушью дерзкого французского иллюстратора, которые мы исследовали в видео очерк и интервью. Перенесемся в (своего рода) Великобританию после блокировки в 2020 году, и галерея Pocko представляет…

Скачать бесплатные переключатели (Toggle Switch) для сайта и не только

Привет, друзья! Представляю вам сегодня отличные переключатели (Toggle Switch) для использования на сайте. Конечно же тут всё бесплатно и очень просто скачать! Так что надеюсь вам понравятся исходники. Рекомендую: Невероятные и бесплатные эффекты для изображений при наведении, ссылок и не только Скачать красивые и бесплатные таймеры обратного отсчёта для сайта Скачать бесплатные переключатели сайта в…

Сэкономьте снова в школе на дешевых школьных принадлежностях, iPad и многом другом

Сентябрь означает возвращение в школу для детей по всему миру — даже если для многих «школа» будет их гостиной, так что они будут Мне нужны дешевые школьные принадлежности, когда звонит класс. Независимо от того, будут ли они работать дома или посещать занятия, мы хорошо представляем, какие это будут материалы. Будь то прочный ноутбук, дешевый iPad,…

Программное обеспечение для студентов: лучшее бесплатное и платное программное обеспечение для студентов в 2020 году

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

Рен и Стимпи возвращаются в «новом» формате — Новости

По Персонал цифрового искусства | 05 августа 2020 г. 1990-е вернулись в моду, поскольку Comedy Central объявляет о «переосмыслении» культового хита The Ren & Stimpy Show. К перезагрузке присоединились недавно объявленные Бивис и Батт-Хед Майка Джаджа и Дарьи побочный продукт Джоди с платформой, нацеленной на «удвоение анимации, ориентированной на взрослых» в эпоху стриминга. Nickelodeon выпустил…

Что такое дизайн-системы и почему их используют

Дизайн-системы можно найти везде и практически во всем. Они находятся в операционной системе вашего смартфона, ноутбука, который вы используете для работы, и даже на посещаемых вами веб-сайтах. Но что такое дизайн-система? Что в нее входит? Зачем их использовать? Мы собираемся ответить на эти вопросы в данной статье, более подробно рассмотрев дизайн-системы, а также их важность.…

Цвета: как видят пользователи с дальтонизмом и цветовой слабостью

При создании графиков и диаграмм не обойтись без использования разных цветов. Мы в Datawrapper уже много писали о цвете. В процессе работы очень легко забыть тех пользователях, которые не могут различать цвета так же хорошо, как и вы (особенно если вы лично с ними не знакомы). Нужно ли о них вообще беспокоиться? На этот вопрос не так легко ответить. Количество читателей с дальтонизмом (цветовой слепотой) разнится в зависимости от местности, возраста, пола и типа слепоты.…