Топ 100 лучших материалов адаптивного дизайна · aTmpl

Сделайте адаптивный дизайн своего сайта ещё более привлекательным и функциональным, предоставляем топ 100 материалов на эту тему.

Адаптивные таблицы Bootstrap 3

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



Адаптивные кнопки bootstrap 3

Подробное описание настройки, и примеры применения адаптивных кнопок плагина bootstrap 3 на сайте, кнопки подстраиваются под разные любые размеры дисплеев включая планшеты и мобильные телефоны.



Эффекты появления

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



Адаптивные формы фреймворка bootstr

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



Cлайдер Bootstrap - aTmpl Effect

Адаптивный слайдер на основе плагина Bootstrap, добавлено 12 анимированных эффектов смены изображений, Вы можете посмотреть демо примеры работы слайдера и скачать бесплатно.



Генератор вёрстки bootstrap

При помощи генератора Вы сможете быстро сделать адаптивную вёрстку для bootstrap, и получить готовый код HTML или LESS, это удобный онлайн инструмент значительно сокращающий время.



Приложение VT View Source

Используя бесплатное приложение VT View Source Вы сможете открыть исходный код страницы сайта в устройствах типа планшета или мобильного телефона с системой Андроид.



Скрипт калькулятора стоимости

Варианты скриптов для использования калькулятора стоимости и изменения цены при выборе, используются теги <select>, <option>, <input type="text"> и <input type="checkbox"> Вы можете скачать скрипт бесплатно.



Affix Bootstrap 3

Эффект Affix фиксирует блок навигации по странице при скроллинге, для работы эффекта требуется подключение фреймворка Bootstrap 3, описаны основные параметры применения дополненные демо.



Модальные окна bootstrap 3

Модальные окна фреймворка Bootstrap 3, сделано описание к применению модалей плагина на страницах сайта, предоставлено демо использования окон.



Скролл эффекты ani.js & animate.css

Эффекты скроллинга при прокрутке страницы вверх и вниз, используется мощный плагин ani.js работающий на эффектах анимации CSS - Animate.css, описание подключение, настройка и демо использования.



Применение атрибута role в HTML

Использовано подробное описание всех значений role в HTML документе, узнайте что это за атрибут, зачем его надо применять для элементов вёрстки сайта и как правильно определить место установки.



Индикатор для загрузки страницы

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




Проверка сайта на адаптивность

Предоставляем Вам окунутся в тему тестирования сайта на адаптивность, предлагаем проверить его онлайн, в браузерах Mozilla Firefox и Google Chrome на способность работать в любых разрешениях дисплеев.



Адаптивный аудиоплеер

Стильный адаптивный аудиоплеер HTML5 ► jQuery ► CSS3 изменяет свои размеры в зависимости от размеров экрана, актуален как для обычных мониторов, так и для дисплеев планшетов и мобильных телефонов.



Движение фона при скроллинге

При скроллинге страницы её фон будет перемещаться относительно контента, для работы эффекта требуется подключенная библиотека jQuery.



Бесплатные иконки - Font Awesome

Набор бесплатных иконок Font Awesome для сайта, в комплект версии 4.2.0 входит 661 иконка различных тематик, все иконки можно скачать бесплатно одним файлом и установить на свой сайт.



Адаптивное меню на CSS aTmplMenuCss

Адаптивное меню с красивым эффектом перехода работающее на свойствах CSS, лёгкое в установке и с минимальным набором настроек, подойдёт для мониторов и дисплеев мобильных устройств.



Адаптивный слайдер ResponsiveSlides

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



Адаптивный видеоплеер CSSplay-er

Адаптивный видеоплеер для сайта CSSplay-er подстраивается под любое разрешение больших экранов и дисплеев мобильных устройств, поддерживает плейлист и работает во всех известных браузерах.



@media картинка свойства css

Правило @media поможет сделать дизайн элементов адаптивным к изменению размера дисплеев и мониторов, описаны основные возможности свойства CSS, приведены примеры применения для устройств Retina.



Разделитель в виде полоски с ромбом

Разделитель в виде полоски с геометрической фигурой в виде ромба по центру, рисунок получен при использовании свойств css и тега <hr>, элемент разделителя обладает адаптивными свойствами.



Адаптивный слайдер - Juicy Slider

Адаптивный слайдер Juicy Slider способен занимать всю видимую область экрана, обладает красивыми эффектами переходов, работает при подключенной библиотеке jQuery и плагина jQuery-UI.



Accordion Bootstrap

Адаптивный элемент Accordion работающий при подключенном фреймворке Bootstrap, сделано описание по настройке и использованию аккордиона на страницах сайта.



Флеш фон

Как сделать флеш фон для сайта, есть простой способ расширить flash - swf на весь экран и сделать чтобы всё остальное находилось над ним, без использования скриптов.



Похожие материалы - Скрипт для uCoz

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



Стили для атрибута - range

Вы можете изменить дизайн стилей ползунков атрибута range используемого в теге input, предоставлены несколько вариантов изменения стандартного вида style for type="range".



Проверить микроразметку

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



Адаптивная галерея CSS 3D Transform

Адаптивная галерея, для работы используется только CSS свойства, добавлен красивый эффект трансформации с отбрасываемой тенью, требуется наличие подключенного фреймворка bootstrap.



Открыть ссылку в фрейме

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



Генератор цветов

Адаптивный элемент генерирующий код цветов hsl, hsla, rgb, rgba, hex с демонстрацией, дополнительно Вы можете добавить генератор цветов на свой сайт даже если он не адаптивный.




алерея - Json Data & Bootstrap

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



Набор иконок - Et Line

Набор из 100 иконок Et Line для установки и использования на сайте, иконки бесплатные, описан способ подключения, в материале добавлен генератор теней иконок для улучшения дизайна.




Адаптивные панели - Bootstrap 3

Компонент фреймворка bootstrap 3 в виде адаптивных панелей, сделано подробное описание используемым классам для элементов и приведены примеры их реального использования.



Адаптивная галерея в модальном окне

Адаптивная галерея для сайта Lightbox которая загружается в модальном окне, для примера используется возможность применения с плагином Bootstrap, сделано описание по установке и настройке плюс демо примеры.



Плавное появление из display:none

Элемент с исходным значением display:none будет плавно появляться через установленное время, при нажатии на ссылку или кнопку, а так же после загрузки страницы, требуется подключенная библиотека jQuery.



Прелоадер SVG - Вращающиеся полоски

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



Адаптивный калькулятор Bootstrap

Адаптивный калькулятор работающий при подключенном плагине bootstrap с приятным цветным дизайном для сайта, сделано описание по установке калькулятора на сайт дополненное демо примерами.



Скриншот адаптивной вёрстки RGS

Адаптивная вёрстка - Responsive Grid System создаёт интуитивный макет, который разделяется на столбцы, способный создавать 12, 16 и 24 горизонтальных колонок, располагающихся вертикально при переходе на малые разрешения.




Градиент - морская тельняшка

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



Адаптивные часы Bootstrap

Вы можете сделать на своём сайте адаптивные часы используя базовые классы плагина Bootstrap, в качестве скрипта часов применяется библиотека jQuery.



Металлический градиент

В качестве основного свойства CSS градиента является radial-gradient, создаётся рисунок металлического оттенка с выделяющимися точками и просветлением в центре.



Бесплатные иконки - Elusive Icons

Вы можете бесплатно скачать и подключить на своём сайте сразу 299 иконок Elusive Icons, в материале сделано описание как их правильно настроить и использовать.



DevOOPS

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



Микроразметка для сайта бухгалтера

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



Адаптивное меню aTmplMenuAnimation

Анимированное адаптивное меню в виде кнопки, при нажатии появляются пункты ссылок с красивым эффектом трансформации и анимации, подойдёт для любого сайта.



nth-child - css3

Подробное описание как применять свойства псевдоклассов CSS3 :nth-child, :nth-last-child, :nth-of-type и :nth-last-of-type, Вы сможете посмотреть примеры использования дополненные демо результатами.



Стили для браузеров

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




Эффект адаптивного меняющегося фона

Картинки или фото фона сайта будут плавно меняться, адаптивный эффект без дополнительных плагинов, используется только фреймворк jQuery, сделано описание по установке и демо примеры.



Cтили для кнопок bootstrap3

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



Прелоадер CSS - Пульсирующий круг

Индикатор - прелоадер выполненный только свойствами CSS, создаёт эффект пульсирующего круга, сделано описание как применять, добавлено демо прелоадера.



Снег для сайта скрипт jQuery

Скрипт падающего снега для установки на сайт, со снежинками и другими символами, можно сделать более 100000 фигур вместо снега и применить любой цвет, написано как устанавливать с демо примером.




Конвертировать - CSS - Sass - SCSS

Конвертация производится в двух видах, Sass и SCSS переделываются в CSS и CSS можно изменить на SCSS и Sass, дополнительно добавлены ссылки на Русскую документацию и репозиторий Syntactically Awesome Stylesheets.



Адаптивный аудиоплеер - Media Audio

Адаптивный аудиоплеер со скинами трёх расцветок, для работы требуется установленная библиотека jQuery, сделано описание как подключать и использовать, добавлено наглядное демо.



Конвертер цветов - RGB & HEX

Конвертируются цвета RGB и HEX, сам конвертер является адаптивным элементом и Вы можете установить его на свой сайт, подходит для Bootstrap.



ColorZilla узнать цвет картинки

Установив бесплатный плагин приложение ColorZilla в браузер Mozilla Firefox или Google Chrome, Вы сможете в любой момент узнать цвет на картинке которая находится на странице онлайн или у Вас на компьютере.



Галерея вращающийся 3D куб

Адаптивная галерея для сайта с установленным плагином bootstrap, картинки в галерее поворачиваются с 3D эффектом куба, создано описание по установке галереи и её настройке, а так же демо работы.



Стили для bootstrap - Cyborg

Вы можете изменить стандартный вид элементов плагина bootstrap, стиль Cyborg специально создан для сайтов с чёрным фоном.



Иконки  - Flaticon Feather

Набор из 10 бесплатных иконок в виде перьев которые можно подключить на любом сайте, сделано описание по использованию, иконки предоставлены в виде файлов разных типов включая шрифты.



Создание скриншотов - SSmaker

Бесплатная программа с помощью которой Вы сможете сделать скриншот страниц в интернете. Дополнительно можно сделать скриншот целиком всей страницы сайта по высоте.



Генератор всех символов HTML и CSS

Генератор всех HTML и CSS символов которые бывают, онлайн инструмент поможет подобрать нужный символ для сайта, соц сетей и игр.



Адаптивная CSS вёрстка - Milligram

CSS фреймворк адаптивной вёрстки, базовый набор необходимых стилей для компонентов, доступность в использовании на сайте.



Плавное пропадание элемента скрипт

Элемент пропадёт через установленное время, исчезнет совсем или потеряет прозрачность, требуется подключенный фреймворк jQuery, описаны варианты и демо примеры использования скрипта на сайте.



Микроразметка для сайта стоматолога

Готовая микроразметка для установки на сайт дантиста стоматолога, используется генератор микроразметки Dentist Microformat, нужно ввести свои данные и получить готовый код из 3 распространённых форматов.



Прелоадер CSS - Вращающийся бордюр

Индикатор - прелоадер в виде вращающегося бордюра сделан при использовании свойств css, сделано описание для использования дополненное демо.



content / CSS3

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



Градиент CSS - Тёмный 3D рельеф

Рельефный градиент тёмных тонов выполненный при использовании свойств CSS, обладает 3D эффектом изменения вида при разных положениях угла точки обозрения.



text-shadow - css3

Свойство CSS3 text-shadow создаёт эффект тени для текста, букв и цифр улучшая их естественный дизайн, в материале описаны способы и демо примеры применения теней на сайте.



Вывести данные из min и max

Скрипт получения и вывода данных минимального и максимального значения min="" и max="" тега <input>, предоставлены примеры для type="range", дополнительный пример для плагина Angular.



Новогодний пейзаж

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



Адаптивные часы цифровые

Адаптивные часы с цифровым дисплеем, Вы можете установить любой цвет и размер часов по своему желанию, сделано подробное описание по настройке и применению.



Текстура красного цвета

Красивая красная бесшовная текстура для использования в качестве фона для сайта или элементов страниц, размер 41 на 58 пикселей, вес 519 байт.



Стили для плагина bootstrap - Cosmo

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



Градиент CSS - Сетка

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



Градиент CSS - Тетрадка в линейку

Линейный градиент на свойствах CSS напоминающий своим видом тетрадку в линию, можно настроить параметры цвета и размеры линий, сделано описание и демо редактор для изменений.



Стили для bootstrap - Slate

Новые стили для компонентов плагина bootstrap, Slate элементы имеют оттенки серого, приятно подобраны цвета и фон страницы.




Готовый скрипт Canvas

Готовый скрипт Canvas создающий эффект серого фона из квадратиков который меняется при обновлении страницы или клику по ней, простота в установке и использовании на сайте.




Эффект округления при наведении

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



Слоёная тень Hsla Layer

Тень применяемая к тексту создана с использованием цвета hsla, отбрасывается слоями создавая красивый эффект, может быть применена к любым текстовым элементам.



Стили для bootstrap - Spacelab

Изменённый стиль компонентов плагина bootstrap для Вашего сайта, обновив стандартный файл bootstrap.css Вы получите вид элементов Spacelab.



Сделать HTML код нерабочим

При использовании HTML символов для демонстрации кода угловые скобки и другие знаки конвертируются и делают код нерабочим.




Логотип книжной полки bootstrap

Адаптивный элемент дизайна в виде книжной полки работающий при подключенном плагине bootstrap, сделано основное описание подкреплённое живыми примерами.




Бесшовная серая текстура

Красивая и качественная бесшовная серая текстура в формате GIF и Data URI, размеры текстуры 42 на 42 пикселя, распространяется бесплатно.



Бесшовная текстура - Pink Flowers

Красивая бесшовная текстура с розовыми цветами для применения в качестве фона для элементов на страницах сайта, размер 200X200, изображение PNG.



Серая текстура

Красивая и качественная текстура для фона элементов сайта в двух форматах, gif и data url, описание установки и демо применение на странице.




Тёмно красная текстура

Качественная бесплатная текстура тёмно красного тона, размер изображения 56 на 56 пикселей, форматы файла текстуры в виде GIF и Data URI.



Бесшовная текстура фона

Красивая тёмная бесшовная текстура фона для применения на сайте в формате PNG, размеры текстуры 607 X 510 px, вес изображения 120 Кб.



Прелоадер CSS - Батарейка

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



Тень текста CSS - Yummy

Красивая тень Yummy делает текст более привлекательным благодаря использованию свойств CSS и отдельно text-shadow, данный способ накладывает тень на текст через атрибут data-text.