Рубрика «css» - 150

в 8:02, , рубрики: css, custom form elements, html, веб-дизайн, Веб-разработка, метки: , ,

Вместо вступления

Всем доброго времени суток!

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

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

Уверен, что на большая часть специалистов на Хабре, применяют схожие методы, для тех же, кто использует js-библиотеки, вроде Uniform, надеюсь будет полезной эта статья.

Поехали!

Итак, сразу поставим цель: оформить чекбоксы и радио-кнопки, чтобы внешне они были похожи на js-магию Uniform, но сделать это максимально простым, нативным по отношению в HTML и CSS способом, а также избежать применения лишних тегов, сохраняя семантику. Как-то так.
Читать полностью »

в 19:19, , рубрики: css, css3, interface, веб-дизайн, Веб-разработка, меню

image

В этом уроке мы будем использовать чистый CSS3 для создания навигационного меню, которое вы можете найти у Impressionist UI by Vladimir Kudinov.

ДЕМО
Исходные файлы

Читать полностью »

в 9:03, , рубрики: css, css3, html5, jquery, Веб-разработка

image

В этом уроке мы будем создавать видео плеер от импрессиониста UI Vladimir Kudinov. Мы будем использовать CSS3 для моделирования и "MediaElement.js" для функциональности. MediaElement.js это HTML5 аудио и видео плеер, который не работает на старых браузерах с использованием Flash и Silverlight, который имитирует MediaElement HTML5 API.

ДЕМО
Исходные файлы

Читать полностью »

в 0:10, , рубрики: css, html, адаптивная вёрстка, веб-дизайн

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

Самые простые техники адаптивной верстки
Читать полностью »

в 18:32, , рубрики: css, drop down menu, javascript, Веб-разработка

Этот урок расскажет вам о создании музыкального выпадающего меню (HTML5 + CSS3). Это меню имеет css3 эффекты анимации. Мы также использовали элементы аудио HTML5 для того, чтобы добавить музыку в это меню. Если вы готовы, тогда начнем.

Финальный результат

image

ДЕМО
Исходные файлы

Читать полностью »

в 19:04, , рубрики: css, веб-дизайн, Веб-разработка, отступы, типографика

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

image

Я постоянно просматриваю веб-сайты и удивляюсь, почему дизайнеры вставляют элементы внутри текста, не делая отступа. Почему бы не разделять эти элементы?
Читать полностью »

в 19:18, , рубрики: css, css3, tutorial, веб-дизайн, Веб-разработка

image

Демо
Исходные файлы

Урок о том, как создать эффект наложения, при том чтобы показывались некоторые детали объекта или изображения. Используем только CSS комбинацию: проверка псевдо-класса с одноуровневыми элементами.

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

в 4:41, , рубрики: css, Google Chrome, html, safari, web inspector, webkit, веб-дизайн, Веб-разработка, метки: , , , , ,

Это цикл статей о Web Inspector. Я постараюсь максимально подробно описать его возможности.
В первой серии мы залезем в настройки, посмотрим, что умеет консоль и поиграемся с панелью «Elements».

Так как Web-Inspector не переведен на Русский, я буду сохранять оригинальные названия.

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

в 10:46, , рубрики: css, html5, javascript, scroll, Юзабилити в IT, метки: , , ,

В 2011 году очень модно было (по-моему, эта мода пошла от Фейсбука) делать у себя на сайтах «бесконечный скроллинг»: это когда пользователь крутит-крутит колесом мыши, и всё новые результаты поиска подгружаются Аяксом внизу страницы, превращая обычный скроллинг в бесконечный и вызывая у столкнувшегося с этим в первый раз пользователя «когнитивный диссонанс».

Также недавно я видел на этом сайте статью, в которой автор выражал своё недовольство «бесконечным скроллингом» и призывал использовать старую добрую «паджинацию».
Читать полностью »

в 19:38, , рубрики: css, javascript, Веб-разработка, метки: ,

Очень часто требуется динамически подключить внешний скрипт и запустить из него какую нибудь функцию.
Но вот отследить загрузку самого скрипта не всегда просто.
Я обычно избавляюсь от проблем с подключением так:

Вначале подключаю библиотеку

<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>

А вот собственно и сам код:

<script type="text/javascript">
$$i({
	attribute: {//устанавливаю атрибуты
		'type':'text/javascript',
		'src':'http://nagon.net/js/NRMSLib.js'
	},
	onready:function() {//действие по окончании подключения скрипта
		modules.sound.start();//запускаю метод из подключенного скрипта
	}
});
</script>

Иногда требуется динамически подключить не скрипт, а стиль CSS
Читать полностью »

1...1020...149150151...158
Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js