Архив материалов

CSS кнопка с эффектом скольжения вниз

Tue, 19 May 2020 15:03:42 GMT

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

Адаптивная CSS таблица карт, с эффектом наведения

Sun, 17 May 2020 11:07:55 GMT

Это очень простая и понятная программа, понятная даже новичкам. Адаптивная CSS таблица карт, с эффектом наведения имеет привлекательный внешний вид, вы можете использовать ее на своем веб-сайте. Мы можем создавать программы такого типа благодаря силе CSS3. Эта программа, на мой взгляд, является хорошим дизайном интерфейса.

Адаптивный темный шаблон Music для uCoz

Sun, 10 May 2020 10:30:16 GMT

Представляем вашему вниманию темный, адаптивный музыкальный шаблон Music, для сайтов на бесплатном конструкторе uCoz. Данный шаблон был адаптирован с cms Dle (автор Dle версии Redissx), а автор адаптации под uCoz - администратор сайта nk-cs "na3uTuB4uk". Дизайн выполнен в темных тонах, с интересными анимациями.

Адаптивный светлый шаблон Music для uCoz

Sun, 10 May 2020 10:23:44 GMT

Представляем вашему вниманию светлый, адаптивный музыкальный шаблон Music, для сайтов на бесплатном конструкторе uCoz. Данный шаблон был адаптирован с cms Dle (автор Dle версии Redissx), а автор адаптации под uCoz - администратор сайта nk-cs "na3uTuB4uk". Дизайн выполнен в светлых тонах, с интересными анимациями.

Креативная страница с ошибкой 404, с адаптацией на чистом CSS

Sat, 09 May 2020 08:07:16 GMT

Представляем вашему вниманию креативную страницу с ошибкой 404. Данная страница полностью адаптированна под планшеты и смартфоны. Сделана она с помощью CSS стилей и HTML кода.

Адаптивный шаблон под кинопортал для uCoz

Wed, 06 May 2020 15:43:42 GMT

В сегодняшнем материале, мы бы хотели предложить для вас, красивый, адаптивный шаблон под кинопортал, для сайтов в системе uCoz. Данный шаблон был адаптирован с CMS DLE. Шаблон сделан в светлых тонах, с оттенками синего цвета. В архиве есть все, что нужно для установки данного шаблона. Так же вы можете взглянуть на демонстрацию шаблона, в видео которое расположено чуть ниже.

Простой лайтбокс ( Lightbox ) с использованием CSS и HTML

Tue, 05 May 2020 08:40:04 GMT

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

Анимационная кнопка, с использованием CSS и HTML

Sun, 03 May 2020 12:41:32 GMT

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

Квадратные иконки для форума на сайт в системе uCoz + PSD исходник

Sat, 02 May 2020 13:12:48 GMT

Сегодня, я хотел бы поделится с вами квадратными иконками для форума, на сайт в системе uCoz. Иконки простые, и отлично подойдут как под темный, так и под светлый дизайн форума. Размер каждой иконки 30px на 30px (30x30), формата gif. Ранее я уже выкладывал иконки для форума, но они там круглые и сделаны в стиле минимализма, а тут иконки сделаны с градиентом. Так же в архиве вы найдется PSD исходник, где сможете изменить их под себя, с помощью программы PhotoShop.

Адаптивная Цитата (Quote) в форме круга с использованием CSS и HTML

Sat, 02 May 2020 09:09:09 GMT

Всем привет. В сегодняшнем материале мы бы хотели предоставить для вас адаптивную цитату (quote) в форме круга. Данная цитата сделана из чистого CSS, с использованием HTML. Она представляет из себя круг, оранжевого цвета, с белым текстом внутри и со скобкой в виде двух перевернутых запятых слева верху круга.

Кнопка вверх uPTop, с использованием HTML, CSS и JavaScript

Thu, 30 Apr 2020 08:35:18 GMT

Сегодня мы делимся кнопкой вверх uPTop. По сути, вся программа основана на команде JavaScript scrollTop. И кнопка полностью стилизована в CSS. Это довольно хорошая функция и сэкономить несколько секунд. Теперь нам не нужно прокручиваться вверх, чтобы добраться до верхней части веб-страницы, достаточно одного нажатия на кнопку, и все готово.

4 CSS эффекта Text-Shadow ( Elegant, Deep, Insert, Retro )

Wed, 29 Apr 2020 06:15:20 GMT

Сегодня мы делимся 4 CSS эффектами Text-Shadow, это - Elegant ( eshadow ), Deep ( dshadow ), Insert ( ishadow ), Retro ( rshadow ). Как мы уже говорили, эти множественные эффекты основаны на разных цветах и в разных позициях.

Генератор случайных цветов на JavaScript

Mon, 27 Apr 2020 07:45:11 GMT

Возможно, вы видели автоматически меняющийся цветовой эффект на некоторых элементах веб-страниц. Эта программа называется автоматическим генератором цветов. Это очень полезная программа, чтобы понять силу JavaScript. По сути, эта программа использует для запуска jQuery, это популярная библиотека javascript. Каждый раз, когда вы нажимаете, будет меняться цвет и показывать цветовой код. Это полноценная динамическая программа.

Анимированная форма входа на чистом CSS

Mon, 27 Apr 2020 06:47:18 GMT

Вы, наверное видели форму входа в систему на многих web-сайтах. Некоторые очень простые и многие другие являются анимированными формами. Итак, сегодня мы делимся простым исходным кодом анимированной формы входа.

Пользовательский стиль переключателя ( radio ), использующий только CSS

Fri, 24 Apr 2020 09:11:53 GMT

Вы, наверное, видели радио-кнопки. Если вы не знаете, что такое переключатели, вы должны были видеть пустое поле круга, на вопрос с несколькими вариантами ответов. Теперь вы можете изменить расположение или стиль переключателей. Но теперь вопрос в том, как мы можем изменить стиль этих кнопок. Да, вы можете сделать это легко, если увидите этот пост. Потому что сегодня я делюсь решением этой проблемы. Итак, сегодня мы делимся пользовательским стилем переключателя ( radio ), использующий только CSS.

Капча ( Captcha ) для вашего сайта, с использованием jQuery, JavaScript. CSS и HTML

Tue, 21 Apr 2020 12:14:10 GMT

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

Анимация при наведение на текст с использованием CSS, HTML и JS

Sun, 19 Apr 2020 07:54:14 GMT

В сегодняшнем материале, мы бы хотели предложить для вас, текст с анимацией при наведении на него. Данный материал сделан из CSS стилей, HTML и JS кодов. Текст можно использовать в виде логотипа на сайта, или переделать под ссылки в том или ином месте. Смысл самого текста, это - плавная анимация со сменой цвета, при наведении на него. Все цвета, размеры, шрифты можно изменить в CSS стилях.

Адаптивная форма обратной связи на CSS, HTML и JS

Thu, 16 Apr 2020 16:37:09 GMT

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

Адаптивное 3D Flip меню с использованием CSS и HTML

Tue, 14 Apr 2020 16:13:31 GMT

В данном материале мы бы хотели предложить для вас адаптивное 3D flip меню с подкатегориями. Меню сделана на чистом CSS и не будет сильно нагружать ваш сайт. Это меню будет так же красиво и удобно выглядит как с компьютера, так и со смартфона, так как оно адаптивное. Оно сделано в темных тонах, но вы легко сможете изменить цветовую гамму под сайт, если хоть немного понимаете в стилях CSS.

Бесплатный набор иконок в стиле Line, в форматах AI, SVG и PNG

Sun, 12 Apr 2020 12:32:49 GMT

Этот бесплатный набор иконок в стиле line, поставляется с 100 различными иконками. Архив включает в себя векторные файлы формата AI и SVG, а также иконки с размерами 32px и 64px в формате PNG, которые вы можете загрузить на любой сайт. Мы предоставили их только в одном цвете, но вы можете использовать форматы AI и SVG, чтобы полностью настроить их с помощью любого программного обеспечения для векторного редактирования, например такого как Adobe Photoshop.

Форма входа на чистом CSS с анимационной кнопкой

Sun, 12 Apr 2020 09:12:32 GMT

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

Адаптивное горизонтальное меню на CSS, HTML и JS

Thu, 09 Apr 2020 17:08:30 GMT

Здравствуйте. В сегодняшнем материале мы бы хотели предложить вам не плохое, удобное и то же время адаптивное горизонтальное меню, с использованием CSS стилей, HTML и JavaScript (JS).

Навигация в стиле Flat, с использованием CSS и HTML

Tue, 07 Apr 2020 16:18:35 GMT

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

Подчеркивание ссылок с эффектов развернутости на чистом CSS

Sun, 05 Apr 2020 12:43:19 GMT

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

Простая страница технических работ для uCoz

Sat, 04 Apr 2020 15:11:30 GMT

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

Выпадающие иконки социальных сетей на чистом CSS

Fri, 03 Apr 2020 08:40:28 GMT

В данном материале мы бы хотели с вами поделится выпадающими иконками социальных сетей, они сделаны с использованием CSS и HTML кодов, с подключением библиотеки Font-Awesome. В нашем примере мы используем пять социальных сетей, таких как - Facebook, Twetter, Insatgram, ВКонтакте и Одноклассники, но вы сможете изменить их под себя, для этого нужно будет заменить в HTML коде иконку из библиотеки Font-Awesome. Цветовая гамма иконок - это бежевый (#f3be81) и темно-серый (#393939) цвет, изменить их под себя можно в CSS стиле.

Адаптивная галерея изображений, с использованием CSS, HTML и JS

Thu, 02 Apr 2020 07:49:42 GMT

По сути, галерея представляет собой витрину изображений на веб-сайтах, где пользователи могут видеть все изображения. В основном, есть 8 маленьких блоков для миниатюр и большой блок для отображения выбранного или активного изображения. Существует макет сетки, где 8 маленьких изображений размещены снизу, для предварительного просмотра, а большое изображение размещено над полями предварительного просмотра. Вы можете просто выбрать изображение, щелкнув по нему, и выбранное изображение будет отображаться в поле большой сетки.

Креативная страница с ошибкой 404, на HTML, CSS и JavaScript

Sun, 29 Mar 2020 12:42:31 GMT

В этом материале мы собираемся поделиться с вами страницей с ошибкой 404 с использованием HTML, CSS и JavaScript. Когда вы нажимаете на несуществующую ссылку на любом веб-сайте, там отображается одна страница с именем Ошибка 404. По сути, код 404 определяет ошибку, поэтому она называется ошибкой 404. Я думаю, что вы уже видели страницы ошибки на любом веб-сайте.

Движущаяся текстовая CSS маска с JavaScript

Sun, 29 Mar 2020 08:19:20 GMT

Сегодня мы с вами делимся движущейся текстовой CSS маской с JavaScript. Там мы использовали jQuery для простоты работы и экономии времени и как мы знаем, jQuery - это библиотека JavaScript, поэтому мы поместили это в категорию JS. Мы думаем, что эта программа будет полезна для вас, и вы сможете использовать это на своем сайте, чтобы добавить немного стиля.

Фиксированное верхнее меню (Header) с использованием CSS, HTML и JS

Sat, 28 Mar 2020 11:38:03 GMT

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

Всплывающая форма обратной связи с чистым и минимальным дизайном

Sat, 28 Mar 2020 09:29:42 GMT

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

Скрипт выбора цвета, с функцией копирования в буфер обмена

Tue, 24 Mar 2020 07:25:25 GMT

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

Боковая фиксированная панель социальных иконок на CSS

Sun, 22 Mar 2020 11:50:05 GMT

Сегодня мы научимся создавать боковую панель социальных иконок, с фиксированной позицией. В основном, это боковая панель или боковой элемент в левом среднем положении, и есть некоторые иконки социальных сетей, такие как Facebook, Twitter, Instagram, Pinterest, Tumblr, ВКонтакте и Одноклассники. Все иконки по умолчанию серого цвета, но при наведении они становятся с оригинальным цветом и появится всплывающая подсказка для информирования о том, какая это сеть.

Круглое CSS меню с иконками Awesome

Sun, 22 Mar 2020 09:24:09 GMT

Может быть, вы видели круглое меню раньше, в настоящее время некоторые сайты используют этот тип меню. Люди, которые хотят сделать свой сайт красивым и привлекательным, всегда используют разные элементы. Теперь вопрос в том, как мы можем также создать круглое меню? Увидев этот пост, вы сможете его создать. Потому что мы предоставляем решение вашей потребности. Мы делимся с вами круглым меню с иконками, на чистом HTML и CSS.

Адаптивная авторская CSS карта темно-серого цвета

Sat, 21 Mar 2020 13:49:14 GMT

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

CSS кнопки с эффектом наведения и фокусировки

Sat, 21 Mar 2020 10:00:41 GMT

Создаем кнопки с эффектом наведения и фокусировки. Наведите курсор мыши на кнопку, чтобы увидеть эффект при наведении, и сфокусироваться на кнопках, нажав Tab, чтобы увидеть эффект фокусировки.

Плавающие иконки социальных сетей, с использованием CSS и HTML

Thu, 19 Mar 2020 15:53:28 GMT

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

5 эффектов границ (border) перехода при наведении, на чистом CSS

Wed, 18 Mar 2020 15:32:02 GMT

Сегодня мы научимся создавать некоторые виды анимации при наведении границ (border) с использованием HTML и CSS. Другими словами, мы создадим некоторую анимацию при наведении, которая влияет на границы элементов. Если вы новичок, то вы без проблем, поймете код.

Делаем свою полосу прокрутки (ScrollBar) для своего сайта

Mon, 16 Mar 2020 18:07:30 GMT

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

Адаптивное меню navbar с использованием CSS, HTML и JS

Sun, 15 Mar 2020 12:06:27 GMT

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

Bootstrap таблица цен U5 для Хостинга на чистом CSS

Sat, 14 Mar 2020 12:04:50 GMT

Таблица цен U5 для Хостинга - это современная адаптивная сборка ценовых таблиц с платформой Bootstrap 4.
Прост в реализации, просто скопируйте HTML и ссылку на файл CSS. JavaScript не требуется! Вы можете легко редактировать, изменять и настраивать её под себя.

Полноэкранный слайдер карусель на Bootstrap с использованием HTML, CSS и JS

Sat, 14 Mar 2020 09:09:55 GMT

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

Адаптивный слайдер карусель отзывов Owl из CSS, HTML и JS

Fri, 13 Mar 2020 18:05:47 GMT

Итак, сегодня мы делимся слайдером Swipe Testimonial с Owl Carousel. Там мы использовали bootstrap для создания адаптивного макета и owl carousel для создания слайдера. Карусель owl - это плагин jQuery, а jQuery - библиотека JavaScript, поэтому мы можем назвать эту программу на основе JS. Вы можете использовать эту программу для создания слайдера контента на вашем сайте.

Набор простых социальных иконок Social U5 с использованием HTML и CSS

Wed, 11 Mar 2020 19:01:05 GMT

Вот некоторые аккуратные социальные иконки под названием Social U5. Этот набор содержит набор значков серого цвета для ВКонтакте (VK), Одноклассники (Ok), Facebook, Twitter, Instagram, Youtube. В Social U5 добавлена легко удаляемая рамка, благодаря которой значки выглядят более компактными, и их будет намного легче интегрировать в дизайн, но вы всегда можете удалить рамку и использовать значки по своему усмотрению - в меню навигации нижнего колонтитула или заголовка, или непосредственно в ваших областях контента.

Раздвигающаяся кнопка скачать на чистом CSS для uCoz

Tue, 10 Mar 2020 19:52:25 GMT

Представляем вашему внимаю неплохую раздвигающуюся кнопку Скачать, с использованием стилей CSS и кода HTML для сайтов системы uCoz. Кнопка будет раскрываться при наведении курсора, и вы можете добавлять любые заголовки, которые вам нравятся, в расширяющуюся часть, но в моем примере я поставил код размера архива. Вы также можете изменить скорость перехода в секунду, хотите ли вы чтоб кнопка расширялась быстрее или медленнее. Так же в стилях CSS вы легко сможете изменить цветовую гамму кнопки под свой дизайн сайта.

Бесплатная PSD шапка для Vlog канала на YouTube

Mon, 09 Mar 2020 12:37:07 GMT

Бесплатная PSD шапка для Vlog, на ваш YouTube канал. Разрешение: 2560 × 1140 пикселей, цветовой режим RGB. Включены социальные иконки, полностью многослойные и редактируемые (цвет, текст и изображения) смарт-объекты. Папка со шрифтом семейства Roboto так же находится в нашем архиве. Все легко изменить под себя, в программе PhotoShop.

Навигация с помощью подпунктов с использованием CSS-переходов и анимации

Mon, 09 Mar 2020 10:15:01 GMT

Итак, сегодня мы делимся с вами анимированным навигационным меню с под элементами. Там мы использовали HTML для создания макета, CSS для стилей и JavaScript для работы. Нет jQuery или каких-либо других библиотек JS, вы можете назвать это чистой HTML, CSS, JS-программой. Я думаю, что это крутая и уникальная навигационная анимация, пригодится для вас и вашего сайта.

Иконки для форума в стиле минимализм на сайт в системе uCoz + PSD исходник

Sun, 08 Mar 2020 13:26:12 GMT

Хочу представить для вашего форума иконки в стиле минимализм, плюс к ним в файле идет PSD исходник, для редактирования цвета и всего остального (вам понадобится программа PhotoShop).

Адаптивный вид материалов каталога файлов в 3 колонки для uCoz

Sat, 07 Mar 2020 14:20:08 GMT

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

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

Sat, 07 Mar 2020 10:12:27 GMT

Предлагаем вашему вниманию радужный прожектор для текста, с использованием стилей CSS и HTML кода. Данный текст может хорошо подойти под логотип или под другие нужды вашего сайта.