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

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

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

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



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

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



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

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



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

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



Cлайдер Bootstrap - aTmpl Effect

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



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

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



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

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



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

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



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

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



Affix Bootstrap 3

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



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

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



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

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




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

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



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

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



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

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



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

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



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

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



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

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



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

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



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

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



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

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



Accordion Bootstrap

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



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

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



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

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



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

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



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

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




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

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



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

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



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

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




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

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



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

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



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

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



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

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



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

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



Флеш фон

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



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

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



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

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



nth-child - css3

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



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

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



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

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



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

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



DevOOPS

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



алерея - Json Data & Bootstrap

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



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

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




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

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




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

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




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

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



Прелоадер Bounce

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



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

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



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

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



text-shadow - css3

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



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

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



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

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



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

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



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

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



content / CSS3

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



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

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



Добавить текст в textarea

Используя скрипт можно при нажатии на ссылку отправить нужный текст или текстовые символы в поле тегов <textarea> и <input> или нескольких полей, сделано описание для применения и демо примеры.



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

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



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

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



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

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



Иконки  - Flaticon Feather

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



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

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



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

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





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

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




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

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



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

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



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

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



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

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



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

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



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

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



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

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



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

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




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

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



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

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




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

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



Стили для bootstrap - Cyborg

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



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

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



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

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



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

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



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

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



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

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



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

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



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

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



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

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



Стили для bootstrap - Sandstone

Обновлённый стиль для элементов плагина bootstrap, в Sandstone изменены стандартные цвета и размеры компонентов, добавлен шрифт Roboto.



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

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



Стили для bootstrap - Slate

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



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

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