Топ 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, сделано описание к применению модалей плагина на страницах сайта, предоставлено демо использования окон.



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

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



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

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



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

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




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

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



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

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



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

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



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

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



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

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



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

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



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

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



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

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



Accordion Bootstrap

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



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

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



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

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



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

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



Флеш фон

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



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

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



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

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



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

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



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

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




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

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



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

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



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

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



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

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




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

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



алерея - Json Data & Bootstrap

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



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

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



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

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




DevOOPS

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



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

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



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

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



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

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



nth-child - css3

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



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

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



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

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



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

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



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

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



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

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



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

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



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

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



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

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




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

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



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

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



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

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



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

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




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

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



text-shadow - css3

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



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

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



Стили для bootstrap - Cyborg

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



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

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



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

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



content / CSS3

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



Иконки  - Flaticon Feather

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



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

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



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

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



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

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



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

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



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

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




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

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



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

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




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

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



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

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



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

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



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

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



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

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




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

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



Стили для bootstrap - Slate

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




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

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



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

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



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

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



Стили для bootstrap - Spacelab

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



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

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



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

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



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

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



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

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



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

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



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

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




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

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



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

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