Адаптивная портфолио на css3 и html5. Отличное портфолио на HTML5. White - прекрасный шаблон одностраничника

" постепенно наполняется, и в названиях топиков становится трудно ориентироваться. Подумал, что лучше всего будет нумеровать подборки, если коллекция состоит из рандомных шаблонов, то есть не связана каким-либо смыслом или тематикой. Таким образом, сегодняшний топик получил название "Бесплатные на HTML5 и CSS3 . Подборка №1". Ранее я уже публиковал аналогичные коллекции , но отсчет пойдет именно от этой статьи.
Как вы знаете, я не любитель публиковать хлам. В первую очередь потому, что сам очень часто пользуюсь своими материалами. Вот и сегодня я сделал подборку из отборных, действительно крутых бесплатных адаптивных шаблонов . Все они адаптивные , то есть отлично работают на любых устройствах. Адаптивность - современный стандарт.
Итак. К вашему вниманию коллекция классных бесплатных шаблонов на html5 и css3.

RuddyRuddy - адаптивный html5 шаблон для Digital агентства или веб-студии , также подойдет для любого бизнес-сайта, выполнен в стиле Flat (). При прокрутке очень динамично и с различными css3 / jQuery эффектами появляются блоки.
Среди основных блоков - это последние статьи блога, перечень услуг, портфолио с фильтром работ, команда и блок контактной информации с картой.Wow PortfolioЯркий, адаптивный шаблон на Bootstrap 3 в красных тонах для создания портфолио фрилансера разработчика или дизайнера. Также подойдет корпоративного одностраничника студии веб-дизайна. В очень интересно сделано портфолио с эффектным hover эффектом.

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

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

AlphaАдаптивный шаблон под названием Alpha от известного разработчика html5 UP. Их работы часто фигурировали в моих предыдущих подборках. К вашему вниманию представлен их, относительно новый, адаптивный шаблон для создания корпоративного сайта или сайта визитки. Помимо главной, есть еще ряд сверстанных внутренних страниц.

CostamarУниверсальный многостраничный шаблон в плоском стиле на фреймворке Bootstrap. Разработчики позиционируют его как шаблон тематики «Путешествия», но, на самом деле, выглядит все очень универсально и простая, банальная замена картинок (Если у вас нет картинок, вы можете найти много отличных изображений на бесплатных фотостоках , о которых я писал в предыдущей статье) способна преобразить его в нужный для вас вид.

Сначала сделаем разметку нового документа HTML5. В разделе заголовка включим стиль страницы. Библиотека jQuery, плагин Quicksand и наш файл script.js будут включены перед закрывающимся тегом body:

index.html

Мое портфолио

Элемент HTML5 header содержит наш заголовок h1 (который оформлен как логотип). Элемент section содержит неупорядоченный список пунктов портфолио другие списки добавляются кодом jQuery)/ Элемент nav , оформленный как зеленая полоса, действует как фильтр содержания.

Неупорядоченный список #stage содержит пункты нашего портфолио. Каждый пункт имеет атрибут data , который определяет серию разделенных запятой меток. Позже, в коде jQuery, мы проходим циклом список, записываем метки и создаем категории, которые могут быть выбраны на зеленой полоске меню.

Вы можете поместить в список пунктов другие работы и использовать другие метки.

jQuery

Плагин Quicksand сравнивает два неупорядоченных списка, находит одинаковые элементы li в них, и анимирует процесс расстановки. Скрипт jQuery, который разбирается в данной части урока, проходит циклом по пунктам портфолио в списке #stage и создает новые (скрытые) неупорядоченные списки для каждой найденной метки. Данные списки затем будут использоваться для работы плагина Quicksand.

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

script.js - Часть 1

$(document).ready(function(){ var items = $("#stage li"), itemsByTags = {}; // Цикл по всем элементам li: items.each(function(i){ var elem = $(this), tags = elem.data("tags").split(","); // Добавляем атрибут data-id. Требуется плагином Quicksand: elem.attr("data-id",i); $.each(tags,function(key,value){ // Удаляем лишние пробелы: value = $.trim(value); if(!(value in itemsByTags)){ // Создаем пустой массив для пунктов: itemsByTags = ; } // Каждый пункт добавляется в один массив по метке: itemsByTags.push(elem); }); });

Каждая метка добавляется в объект itemsByTags как массив. Значит, itemsByTags["Веб дизайн"] будет содержать массив всех пунктов, которые имеют метку "Веб дизайн". Мы используем данный объект для создания скрытого неупорядоченного списка на странице для плагина Quicksand.

Создадим вспомогательные функции

script.js - Part 2

Function createList(text,items){ // Вспомогательная функция, которая получает текст кнопки меню и // массив пунктов li // Создаем пустой неупорядоченный список var ul = $("

",{ html: text, href:"#", data: {list:ul} }).appendTo("#filter"); }

Данная функция получает имя группы и массив с пунктами li как параметры. Затем она клонирует данные пункты в новый список ul и добавляет ссылку на зеленую полоску.

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

script.js - Часть 3

// Создаем опцию "Все" в меню: createList("Все",items); // Цикл по массивам в itemsByTags: $.each(itemsByTags,function(k,v){ createList(k,v); }); $("#filter a").live("click",function(e){ var link = $(this); link.addClass("active").siblings().removeClass("active"); // Используем плагин Quicksandдля анимации пунктов li. // Он использует data("list"), определённую нашей функцией createList: $("#stage").quicksand(link.data("list").find("li")); e.preventDefault(); }); $("#filter a:first").click();

CSS

Самая интересная часть стилей CSS - зеленая полоска #filter . Для нее используются псевдо-элементы:before / :after , чтобы создать привлекательные уголки по сторонам полоски. Так как они позиционируются абсолютно, то при изменении размеров полоски они выведутся там, где надо.

styles.css

#filter { background: url("../img/bar.png") repeat-x 0 -94px; display: block; height: 39px; margin: 55px auto; position: relative; width: 600px; text-align:center; -moz-box-shadow:0 4px 4px #000; -webkit-box-shadow:0 4px 4px #000; box-shadow:0 4px 4px #000; } #filter:before, #filter:after { background: url("../img/bar.png") no-repeat; height: 43px; position: absolute; top: 0; width: 78px; content: ""; -moz-box-shadow:0 2px 0 rgba(0,0,0,0.4); -webkit-box-shadow:0 2px 0 rgba(0,0,0,0.4); box-shadow:0 2px 0 rgba(0,0,0,0.4); } #filter:before { background-position: 0 -47px; left: -78px; } #filter:after { background-position: 0 0; right: -78px; } #filter a{ color: #FFFFFF; display: inline-block; height: 39px; line-height: 37px; padding: 0 15px; text-shadow:1px 1px 1px #315218; } #filter a:hover{ text-decoration:none; } #filter a.active{ background: url("../img/bar.png") repeat-x 0 -138px; box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2), -1px 0 0 rgba(255, 255, 255, 0.2), 1px 0 1px rgba(0,0,0,0.2) inset, -1px 0 1px rgba(0,0,0,0.2) inset; }

Готово!

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

About
Contact

a sleek design

Dummy Text:

This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.

The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.

tutorials

The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.

recent work

Dummy Text: This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.

The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.

Updated: January 9, 2020

People mostly search Google for ‘portfolio template ‘ and ‘portfolio website templates ‘, so we listed here best HTML5 Portfolio Templates Collection in 2020. Enjoy!

Marox – Personal Portfolio HTML Template is for many purpose. It’s creative, minimal and clean design. It has all of the features of the business website. It’s suitable for any startup business, companies, agencies, and freelancers which need a professional way to showcase their projects and services with 100% super responsive experience.

Luxiren Is a powerful, beautiful and pixel-perfect landing page collection. Built with React, Next Js, Material UI, and Sketch files included. It’s suitable for Corporate, Startup, Saas company, Agencies, Cloud business, Architect company, Freelancers, Personal portfolios, eCommerce shop, and any type of business to introduce and promote their profile, products, or services.

Istanbul is a creative personal portfolio template, responsive one page based on Bootstrap 4.0.0. You can use it for your personal resume, CV or your portfolio, Istanbul template is written in valid and clean HTML & CSS3 code. It’s easy to customize and also well documented so it’ll suit your needs.

Cvio is fully Responsive and Retina Ready HTML5 Template. Cvio comes with 6 Different Color Schemes, 5+ Home Pages Variants, Creative Portfolio, Transitions Page Animations and allows you to edit colors of elements at free will. Make it follow your personal brand and let your web presence stand out. Template is best suited for developer, programmer, photographer, web designer, freelancer, artist, web designer, illustrators, designer or any other digital professional.

Oblas is a professional component-based portfolio application for you or your company. By choosing our system, you will be able to tell about your projects, show your strengths to customers, raise their trust and receive more new orders. The application is based on React 16.8+ and bootstrap 4+. Therefore, you can use the full power of these frameworks to customize your portfolio. This applies to both the color scheme and functionality.

create your

Rogan is a multi-purpose, powerful, beautiful and high-performance website template. The template comes with 6 Home pages & 60+ multi-page demos and variants. This template is suitable for corporate, agencies, freelancers, individuals as well as any type of businesses to showcase their company history, services, works, portfolio and projects in most creative and professional looking.

Maha is fully Responsive and Retina Ready HTML5 Template suitable for anyone who wants to have a personalized resume or online Portfolio. It has all of the features of the business website. Maha comes with Bootstrap 4 a very easy customization with Scss. All code are well commented and super easy to customize. you can add easily your own color.

Wexim – One/Multi Page Parallax Bootstrap4 HTML5 Template suitable for any creative or business startups. Multiple navigation styles are included in this template with lots of CSS and JQuery animations, a perfect template for business startups, web studio and creative agencies. This template is very well commented and also have proper help documentation too.

Kotlis – Creative Responsive Photography Portfolio is perfect if you like a clean and modern design. This template is ideal for designers, photographers, and those who need an easy, attractive and effective way to share their work with clients. Since it is responsive, the layout will adapt to different screen sizes which will make your website be compatible with any device such as smart phones, tablets or desktop computers.

React Next is fully Responsive HTML5 Landing Page, built with React, NextJs & Styled Components. NO jQuery!, We created reusable react components, and modern mono repo architecture, so you can build multiple apps with common components. You can use these landing for your react app. It’s super easy to deploy, we have provided complete firebase integration with it.

Satelite is an innovative and elegant creative HTML Template, attributes you won’t find in very many templates designed with the same purpose in mind. Key Satelite features include its crazy-fast Ajax page load, its selection of creative portfolio sliders and grids, ingenious menu options, video background support and much more.

Arlo – Personal Portfolio HTML Template is for many purpose. It’s creative, minimal and clean design. It has all of the features of the business website. It’s suitable for any startup business, companies, agencies, and freelancers which need a professional way to showcase their projects and services with 100% super responsive experience.

Staker responsive multi-purpose HTML5 template created with Bootstrap 4. it’s highly creative design, fast loading, search engine optimized, efficiently & well organized coded, well documented, and fully responsive. 260+ HTML demo pages included with staker. It is Suitable for agency & business consult, business corporate, creative portfolio, blog, cryptocurrency, event, app landing, e-commerce, online shops, trendy shop, architecture, real estate business and much more.

Amokachi is a portfolio focus HTML5 template. It provides responsive clean and minimal html template for your creative portfolio web site. You can use this portfolio template for: agency, personal portfolio, architect agency, freelancer, photography studios, sound and music, musican, painter portfolio, artworks, art, artist portfolio, web design works, illustrators, trainer, projects, freelance designer. You can find this template suitable for their needs.

Ryan is Professional Online vCard, template focused on developers, freelancers, digital professionals, musicians or photographers. Fully responsive and easy for you to edit. Dark / Light Version and RTL Included. 6 Different Color schemes and easy to set any color to elements such as links, buttons, menu links, etc.

Mono is a modern, powerful Multi-Purpose HTML5 Template with huge package of Features, Options, Elements and Premade Templates. It’s fully responsive and looks stunning on any desktop, tablet or mobile devices. Mono is made by professionals and has everything you need to build any kind of modern beautiful website. All the files are highly organized and documented in order to make it easy to use.

Polo is a Powerful Multi-Purpose Bootstrap Template. It has endless possibilities for creating stunning websites no matter what type of business is. It can be Corporate, Portfolio, Personal, Agency, Business, Hotel, Restaurant, Wedding, Landing, Shop, Blog, One Page, anything. We have packed more than 200+ (ready-to-use) layout demos, 600+ HTML files 50+ Short-codes. Works pretty fast and it is smartly responsive, it looks amazing on PC, Tablets, Smartphones etc.

Canvas is a Powerful, Responsive & Raw Multi-Purpose Multi-Page & One-Page HTML5 Template. Build whatever you like with this Template. Be it Business, Corporate, Medical, Travel, Construction, Real Estate, Media Agency, Portfolio, Agency, Magazine, Parallax, Wedding, Christmas, Restaurant, Blog or App Showcase, just everything is possible with Canvas. We have included 100+ ready-to-use Homepages & 800+ HTML Files with the Package, it is this huge.

Boltex – One Page Parallax HTML5 and Responsive Template suitable for any creative or business startups. Multiple navigation styles are included in this template with lots of CSS and JQuery animations, a perfect template for business startups, web studio and creative agencies. The standard information sections will help anyone to customize according to their company info. This template is very well commented and also have proper help documentation too.

Pofo is a graphically polished, interactive, easily customizable, highly modern, fast loading, search engine optimized, efficiently coded, well documented, vibrant and fully responsive HTML5 and CSS3 multi-purpose website template for corporate, agencies, freelancers, individuals as well as any type of businesses to showcase their company history, services, work portfolio and projects, team, blog in most creative and professional looking manner using more than 25 ready home page demos including one page website, 210+ pages and 150+ stylish and nice looking ready elements.

Foundry is a versatile, high-performance template boasting an extensive array of styled elements for all occasions using clean, semantic markup and well-structured CSS and LESS that developers love. Foundry will feel right at home on any business website, and excels in portfolio and personal website applications. Create engaging and alluring landing pages that build trust and confidence through the use of consistent and original design elements.

Wunderkind is a fully responsive and Portfolio HTML5 Templates based on Bootstrap 3.1. framework. Bootstrap clean, efficient code has a beautiful order to it that is simple to follow, resulting in faster programming and site speed.

Oyster is fully Responsive and Retina Ready HTML5 Template. Your web site will be adjustable to the most popular screen resolutions, whether you watch it on laptop, tablet or phone devices. With Fullscreen design this theme is perfect for the photographers. This theme has different types of the fullscreen pages, and one of them is fullscreen video.

H-Code is a responsive, creative, powerful and multi-purpose multi page and HTML5 Portfolio Template with latest web design trends. It is multi-purpose professional template for any business like design agency, fashion, architecture, spa, restaurant, travel, corporate, photography, ecommerce, personal resume, wedding, product / service, etc… with readymade templates and portfolio options for quick start of their online presence with awesome portfolio. It is developer friendly to customize it using tons of layouts, portfolio options, shortcodes and much more with SEO & Speed optimized, well documented, commented, structured and easy to understand code.

Definity is clean and minimal, multipurpose one page & multi page HTML5 template, its 100% responsive and its build with Bootstrap 3 framework and SCSS. It follows the latest web design trends and offers lots of options to chose from. Comes with 20+ demos to chose. Its suitable for any business especially: design agency, freelancer, personal portfolio, resume, photography, fashion, wedding, etc.

Enigma is a clean and minimal HTML5 Portfolio Template. It is Fully Responsive and compatible with all mobile devices. Perfectly suits for companies, creative agencies, freelancers, personal portfolio, creative minds, blogging and for landing pages as well. Enigma html consists of well-organized components – so it’s easy to modify and customize everything.

Outdoor is perfect if you like a clean and modern design. This template is ideal for designers, photographers, and those who need an easy, attractive and effective way to share their work with clients. Outdoor is 100% responsive. Whether your users use tablets, mobiles or desktops to access your site, they’ll all have the same consistent user experience.

MaterialX is a material design Resume and Portfolio Template based on Twitter Bootstrap and Materialize, developed for professional to display their Profile, Resume, Portfolio etc. Easily customizable and fully responsive for all device. MaterialIX has 8 different color schemes.

Wizard is a HTML5 Portfolio Template, using most popular design trends as HTML5, CSS3 and jQuery. The template have fullpage scroll function and separate panel section for the homepage, so you can create various styles of homepage to suit your needs, also the template included fully responsive media grid plugin in a portfolio page that allows you to control the layout of your item grid in the way that pleases you most. Wizard is great for creative portfolio website, small business website or any creative business and agency, also have commented HTML code for each panel included in the theme so you can easily adapt your templates to suit your needs.

Dani is the tempalte you were waiting for. It is the perfect way to showcase your portfolio with a smooth and creative visual experience. The simplicity of Dani will ecstasize you and it gives you the possibility to finish your site in short period of time. Your visitors will love it.

Pillar is an expansive, carefully crafted collection of stylish pages and content blocks. Featuring over 100 styled HTML pages and over 150 unique content blocks, Pillar empowers you to build visually beautiful pages powered by semantically beautiful markup. With extensive styling for portfolios, blogs, shops and landings – Pillar comfortably suits all common website styles.

Buro is a minimal portfolio HTML5 template focused on solve small agencies, studios and freelance needs. With Büro you´ll be able to create your own layout by working with the flexibility provided by Bootstrap 3, the most popular framework created by Twitter. With some few classes and some in-built code modules (pre-written snippets) you can add many different elements in order to create your own layouts and compositions.

Matrox is a material design based multi-purpose responsive HTML5 template. By utilizing elements and principles of Material Design, Matrox comes with 200+ HTML5 pages and over 150+ unique content blocks. Matrox empowers you to build sites under Corporate, Creative, Agency, Restaurant, Blog, Charity, Consulting Firm, Portfolio, Construction, Parallax, App Landing, Book Opening and much more categories.

Kant is fully Responsive and Retina Ready HTML5 Template for startups and freeelancers. It comes with 100+ purpose-built content blocks, 70+ page layouts and a ton of components to get you going. Since it is responsive, the layout will adapt to different screen sizes which will make your website be compatible with any device such as smart phones, tablets or desktop computers.

Adam – Minimal portfolio template is high quality creative portfolio template with unique style and clean code. You can use Adam for many purposes like minimal portfolios, agencies, freelancers portfolios etc. This template build with worlds most popular responsive CSS framework Bootstrap 3.x, HTML5, CSS3, jQuery and so many modern technology. Template is created and tested in all devices and browsers like Firefox, Chrome, Internet Explorer and it works perfectly without any issue.

LeadGen is a conversion ratio and speed optimized multi-purpose marketing landing page template with drag & drop page builder and tons of readymade elements and demos with greater level of customization possibilities. There are 30+ carefully crafted readymade demos are available for different type of businesses as well as 300+ unique elements to chose from and generate your own landing page quickly without any hassles.

Monster is a Super Clean and Super professional personal portfolio template.If you are a Designer, freelancer, marketer its only for you. Monster template build on Bootstrap Latest version.. You can use it for your personal resume, CV or your portfolio. Monster template is written in valid and clean HTML & CSS3 code. It’s Super easy to customize and also well documented so it’ll suit your needs.

Apolo is a modern, pixel-perfect and easy-to-use Photography & Portfolio HTML Template. Apolo is retina ready, fully responsive and easy to customize. Apolo is focused on photographer, designer, film makers, freelancer, artists and many more individual who want to showcase his/her work. Files are completely customizable classes and just, all the elements are in groups and can easily identify by the group name as well.

TEJ is a clean and creative personal portfolio one page template. Based on latest Boostrap version 3.3.7. The template was created for anyone who want to build own personal & portfolio HTML5 resume. It is compatible with all types of screens.

Sakura is a Modern HTML5 portfolio & resume Template. Sakura is 100% responsive. This template is best suitable for Portfolio / vCard / CV / Resume template designed for creative designers, developers, freelancers, photographer or pretty much any profession around the world and in a few moments you can customize this template to suit your own needs. All files are super organized and highly documented.

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

Макет странички, исполняемый javascript и некоторые элементы оформления, выдал «на гора», замечательный веб-дизайнер и разработчик Kevin Liew (queness.com). При выборе оптимального решения, для меня было важно, это простота исполнения, функциональность плагина jQuery, корректная работа во всех современных браузерах, и учитывая всевозрастающую популярность использования различных мобильных устройств, для интернет-серфинга, адаптивность дизайна будущей страницы. Никаких вычурных, дизайнерских наворотов и тяжеловесных плагинов.

Базовый макет состоит из двух основных элементов пользовательского интерфейса, которые нам предстоит построить, это навигации по вкладкам для фильтрации категорий представленных работ, и сама сетка миниатюр с эффектом всплывающей подписи при наведении.
Для начала, чтобы все в итоге заработало, будет необходим jQuery не ниже версии 1.7.0. Если он у вас еще не подключен, то добавьте следующую строку перед тегом :

Запустите плагин MixItUp в работу, этот код вставьте после вышеуказанных файлов:

< script type= "text/javascript" > $(function () { var filterList = { init: function () { $("#portfoliolist" ) . mixitup({ targetSelector: ".portfolio" , filterSelector: ".filter" , effects: [ "fade" ] , easing: "snap" , // call the hover effect onMixEnd: filterList. hoverEffect() } ) ; } , hoverEffect: function () { $("#portfoliolist .portfolio" ) . hover( function () { $(this) . find(".label" ) . stop() . animate({ bottom: 0 } , 200 , "easeOutQuad" ) ; $(this) . find("img" ) . stop() . animate({ top: - 30 } , 500 , "easeOutQuad" ) ; } , function () { $(this) . find(".label" ) . stop() . animate({ bottom: - 40 } , 200 , "easeInQuad" ) ; $(this) . find("img" ) . stop() . animate({ top: 0 } , 300 , "easeOutQuad" ) ; } ) ; } } ; filterList. init() ; } ) ;

$(function () { var filterList = { init: function () { $("#portfoliolist").mixitup({ targetSelector: ".portfolio", filterSelector: ".filter", effects: ["fade"], easing: "snap", // call the hover effect onMixEnd: filterList.hoverEffect() }); }, hoverEffect: function () { $("#portfoliolist .portfolio").hover(function () { $(this).find(".label").stop().animate({bottom: 0}, 200, "easeOutQuad"); $(this).find("img").stop().animate({top: -30}, 500, "easeOutQuad"); }, function () { $(this).find(".label").stop().animate({bottom: -40}, 200, "easeInQuad"); $(this).find("img").stop().animate({top: 0}, 300, "easeOutQuad"); }); } }; filterList.init(); });

Отдельно рассматривать все опции плагина, смысла нет, по умолчанию выставлен довольно оптимальный вариант. Ну, если уж кого вставит на эксперименты с параметрами, пожалуйста, все в ваших силах.

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

< link rel= "stylesheet" href= "css/normalize.css" > < link rel= "stylesheet" href= "css/layout.css" >

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

< ul id= "filters" class = "clearfix" > < li>< span class = "filter active" data- filter= "app card icon logo web" > Все < li>< span class = "filter" data- filter= "app" > Приложения < li>< span class = "filter" data- filter= "card" > Визитки < li>< span class = "filter" data- filter= "icon" > Иконки < li>< span class = "filter" data- filter= "logo" > Логотип < li>< span class = "filter" data- filter= "web" > Веб- Дизайн

Все
Приложения
Визитки
Иконки
Логотип
Веб-Дизайн

На панели навигации, размещаем весь список работ, разбитый на категории. Нам необходимо каждую категорию портфолио через атрибут data-cat связать с тем или иным пунктом панели навигации в соответствии со значением в атрибуте data-filter . Путем сопоставления значений data-filter с data-cat , и будет выполняться фильтрация элементов портфолио по категориям.
Кроме этого, добавим к миниатюре, спрятанную до поры до времени, небольшую панель с названием работы и заголовком категории, всплывающую только при наведении на картинку. А чтобы легче сформировать внешний вид всей этой конструкции в CSS, пропишем соответствующие классы элементам:

< div id= "portfoliolist" > < div class = "portfolio logo" data- cat= "logo" > < div class = "portfolio-wrapper" > < img src= "img/portfolios/logo/5.jpg" alt= "" /> < div class = "label" > < div class = "label-text" > < a class = "text-title" > Хостинг Beget. Ru < span class = "text-category" > Логотип < div class = "label-bg" > .........

Хостинг Beget.Ru Логотип .........

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

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

.container { position : relative ; width : 960px ; margin : 0 auto ; /* Вы сможете видеть цепь переходов при изменении размеров окна браузера */ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition : all 1s ease; } #filters { margin : 1% ; padding : 0 ; list-style : none ; } #filters li { float : left ; } #filters li span { display : block ; padding : 5px 20px ; text-decoration : none ; color : #666 ; /* добавляем немного тени для текста */ text-shadow : 1px 1px #FFFFFF ; cursor : pointer ; } /* изменяем фон категории при наведении */ #filters li span: hover { background : #34B7CD ; text-shadow : 0 0 2px #004B7D ; color : #fff ; } /* фон активного пункта категории */ #filters li span.active { background : rgb (62 , 151 , 221 ) ; text-shadow : 0 0 2px #004B7D ; color : #fff ; } #portfoliolist .portfolio { -webkit-box-sizing: border-box ; -moz-box-sizing: border-box ; -o-box-sizing: border-box ; width : 23% ; margin : 1% ; display : none ; float : left ; overflow : hidden ; } .portfolio-wrapper { overflow : hidden ; position : relative !important; background : #666 ; cursor : pointer ; } .portfolio img { max-width : 100% ; position : relative ; } /* по умолчанию подписи скрыты */ .portfolio .label { position : absolute ; width : 100% ; height : 40px ; bottom : -40px ; } .portfolio .label-bg { background : rgb (62 , 151 , 221 ) ; width : 100% ; height : 100% ; position : absolute ; top : 0 ; left : 0 ; } .portfolio .label-text { color : #fff ; position : relative ; z-index : 500 ; padding : 5px 8px ; } .portfolio .text-category { display : block ; font-size : 9px ; }

Container { position: relative; width: 960px; margin: 0 auto; /* Вы сможете видеть цепь переходов при изменении размеров окна браузера */ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } #filters { margin:1%; padding:0; list-style:none; } #filters li { float:left; } #filters li span { display: block; padding:5px 20px; text-decoration:none; color:#666; /* добавляем немного тени для текста */ text-shadow: 1px 1px #FFFFFF; cursor: pointer; } /* изменяем фон категории при наведении */ #filters li span:hover { background: #34B7CD; text-shadow: 0 0 2px #004B7D; color:#fff; } /* фон активного пункта категории */ #filters li span.active { background: rgb(62, 151, 221); text-shadow: 0 0 2px #004B7D; color:#fff; } #portfoliolist .portfolio { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; width:23%; margin:1%; display:none; float:left; overflow:hidden; } .portfolio-wrapper { overflow:hidden; position: relative !important; background: #666; cursor:pointer; } .portfolio img { max-width:100%; position: relative; } /* по умолчанию подписи скрыты */ .portfolio .label { position: absolute; width: 100%; height:40px; bottom:-40px; } .portfolio .label-bg { background: rgb(62, 151, 221); width: 100%; height:100%; position: absolute; top:0; left:0; } .portfolio .label-text { color:#fff; position: relative; z-index:500; padding:5px 8px; } .portfolio .text-category { display:block; font-size:9px; }

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

/* Планшет */ @media only screen and (min-width : 768px ) and (max-width : 959px ) { .container { width : 768px ; } } /* Мобильный - Примечание: Дизайн для ширины 320px*/ @media only screen and (max-width : 767px ) { .container { width : 95% ; } #portfoliolist .portfolio { width : 48% ; margin : 1% ; } } /* Мобильный - Примечание: Дизайн для ширины 480px */ @media only screen and (min-width : 480px ) and (max-width : 767px ) { .container { width : 70% ; } }

/* Планшет */ @media only screen and (min-width: 768px) and (max-width: 959px) { .container { width: 768px; } } /* Мобильный - Примечание: Дизайн для ширины 320px*/ @media only screen and (max-width: 767px) { .container { width: 95%; } #portfoliolist .portfolio { width:48%; margin:1%; } } /* Мобильный - Примечание: Дизайн для ширины 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) { .container { width: 70%; } }

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

При создании урока использовался материал: . Оригинальная, девственно чистая, только что из под пера автора, страница портфолио, находится там же.

Удачи всем и с пользой для тела, провести остатки короткого лета!