Плагин jquery для портфолио. Галерея ввиде портфолио
Используется jQuery плагин jmFullWall для получения действительно впечатляющих портфолио из фотографий.
Требования
- jQuery 1.4+
- jquery.imgpreload.js (thanks to Dimas Begunoff)
- jquery.imagepanner.js (thanks to Dynamic Drive)
- jmFullWall.js
Совместимость
- Mozilla Firefox
- Google Chrome
- Safari
- Opera
Для Демо 4
res/img/slide/1.jpg res/img/slide/1.jpg Audi Locus Audi Locus res/img/slide/2.jpg res/img/slide/2.jpg Porsche Supercar Porsche Supercar res/img/slide/3.jpg res/img/slide/3.jpg Ford GT Ford GT res/img/slide/4.jpg res/img/slide/4.jpg Lamborghini Murcielago Lamborghini Murcielago res/img/slide/5.jpg res/img/slide/5.jpg Nissan R390 GT1 Nissan R390 GT1 res/img/slide/6.jpg res/img/slide/6.jpg Porsche 911 GT3 RS Porsche 911 GT3 RS
CSSПодключаем файл стилей:
JS
Подключаем скрипты:
$(function(){ $("#wall").jmFullWall({ itemsForRow: 5, itemTransition: "slideDown", itemTransitionSpeed: 150, detailTransitionIn: "slideDown", detailTransitionOut: "slideUp" }); });
Опции- itemTransition :fadeIn , Эффект появления миниатюр. Может быть установлен на "fadeIn", "show" или "slideDown".
- itemTransitionSpeed :200 , Скорость появления миниатюр. Может быть "slow", "normal", "fast" или в миллисекундах (например, 1000).
- itemsForRow :5 , Сколько элементов в строке.
- itemsBtnNext :jmFullWall-next , Название класса для кнопки "Вперед".
- itemsBtnPrev :jmFullWall-prev , Название класса для кнопки "Назад".
- itemsBtnClose :jmFullWall-close , Название класса для кнопки "Закрыть".
- detailTransitionIn :fadeIn , Эффект при открытии изображения. Может быть "fadeIn", "show" или "slideDown".
- detailTransitionInSpeed :500 , Скорость открытия изображения. Может быть "slow", "normal", "fast" или в миллисекундах (например, 1000).
- detailTransitionOut :fadeOut , Эффект при закрытии изображения. Может быть "fadeOut", "hide" или "slideUp".
- detailTransitionOutSpeed :500 , Скорость закрытия изображения. Может быть "slow", "normal", "fast" или в миллисекундах (например, 1000).
- showTooltip :true , Включить подсказки, когда изображение полностью загрузится.
- imgPanning :true , Включить панорамирование изображения, если режим полноэкранный.Enable the panning of the image when is in fullscreen mode.
- imgPanningCenter :true , Центрировать изображение, если режим полноэкранный.
- imgPanningZoom :true , Включить опцию увеличения, если режим полноэкранный.
jQuery portfolio plugins enable you to display your portfolio in an elegant style and help you to impress your clients to get more exposure and business deals.
You can’t under estimate the power of a portfolio if you are working in service providing sector. Portfolios not only display your work but give an idea to your client of your working experience which results in more deals and business.
Below you will find some of the best jQuery portfolio plugins to display your artwork online. If you are aware of any other plugin, please let us know we would love to update the list.
1. LunarLunar – Photography Portfolio, a very clean and simple jQuery Plugin that helps you build beautiful photo albums. Some of the plugin’s strong points are: fully responsive grid, high performance, modern look & feel, clean and spacious design.
Media Boxes Portfolio is a featured jQuery grid plugin that allows you to display all kind of content in a highly powerful grid. Use it for blog posts, display media, clients, portfolios, shopping carts, galleries and all you can imagine.
The idea of Colio – jQuery Portfolio Content Expander Plugin is to display details about your portfolio items on the same page in form of expandable viewport that can show up above, below or inside your portfolio grid. Colio includes black and white theme for quick start and can be easily integrated in existing portfolio. Also it’s compatible with popular filtering plugins like isotope and quicksand and works on tablets and mobile devices.
DZS ZoomFolio is the ultimate plugin for displaying your creative portfolio to your clients and that’s not all. You can use it to show the recent posts from your blog or a gallery from your vacation.
Metro – jQuery Grid Portfolio, a very clean and simple jQuery Plugin that shows your portfolio in an interactive way. Some of the plugin’s strong points are: fully responsive grid, easy to set up, high performance, modern look & feel, clean and spacious design.
This item comes with over 40 super customizable layouts and 19 hover styles to choose from. Tons of ready to use options make it very easy to add borders, backgrounds, different meta styles and so on. With this much of ready to use functionality you can easily build all kinds of portfolio or gallery lists.
bootFolio is the most lightweight portfolio filtering script with css3 animation. it is highly optimize for bootstrap, and very easy to use. Bootfolio comes with 76+ portfolio item layout, 14 replacing animations, 167+ item hover effects, lightweight, highly customizable and much more.
Tonic Gallery is a that allows you to create very easily a portfolio gallery with some nice effects and flexible customization settings. This plugin includes plethora of options like pagination, category filter, data management, lightbox preview, and flexible configuration.
Alfred helps web developers to build the best portfolios and the most beautiful galleries. It dramatically simplifies the whole process and offers you wide range of features and options.
It’s a that means every gallery can have one or more sub galleries. It’s perfectly suitable for portfolio gallery. It’s fully responsive and also usable for other purposes like navigation, galleries etc. This plugin has responsive design, 5 layouts, browser compatible, metro and iOS7 inspired.
jQuery filter plugin is a must have element for any kind of website which through you will be able to present portfolio works fantastically. Here I am going to show you some of the best free & premium filter jquery portfolio plugins. These plugins can be used for business, corporate, creative, portfolio or any other related to portfolio works showcasing purposes.
I assume you are a web designer & finding a best portfolio filterable jquery gallery plugin for your next project. If I am right then you are in the right place. You will find here some best free & premium filter jQuery plugins. As a web designer I also used lots of time these types of plugins into my project for fulfill my client’s requirements.
Most of the theme you will see portfolio filtering gallery where anyone can display their works. It’s a great way to present portfolios at this time. These plugins below have all those features that can be fulfill your requirements as well. Some features I must mention for you if you don’t have enough knowledge about jquery filter plugins
.
Most of the plugins are responsive, comes with multiple filtering animations & effects, unique css3 animations, beautiful hover effects, some plugins are expandable & also each item has separate carousel slider which through you can showcase more images. If you want to see a demo then you can view our Bootstrap template which is we released for our users for 100% free. We added the Elastic Grid filterable plugin into SinglePro which you will find below. Hope this collection will help you to find a best jquery filterable plugin. If you found this helpful & think it can be helpful for others then don’t hesitate to share this collection in social media. Thank You!
Free Filter/Filterable Plugins Isotope – Filter & sort magical layouts Jquery Plugins
Isotope is a well know jquery filter plugin in the web. This filtering will allow you to implement an amazing smooth filtering gallery into your website or template. Most of the web designer used this plugin into their projects. It’s free for open source & personal use only. If you use this plugin for commercial projects then you have to purchase a commercial license.
Mixitup – Free Animated Filtering And Sorting Jquery Plugins
Mixitup is another excellent filtering jquery plugin which can be perfectly used for any kind of portfolio galleries, image galleries & any other filtering gallery purposes. It has beautiful & unique filtering animation with smoothness. Mixitup is an open source project under Creative Common license . You can use it for personal or open source projects. If you want to use it for your commercial projects then you must purchase a commercial license.
Shuffle – Jquery free Responsive Filtering And Sorting Plugins
Shuffle is an amazing free filter jquery plugin which is inspired by the most popular filter plugins Isotope & Packery. If you are looking for a jquery filtering for showcasing your portfolios beautifully then Shuffle can be your right choice. It’s a free jquery portfolio filter plugin.
Elastic Grid – Responsive JQuery Portfolio filter Plugin
Elastic Grid is a fantastic free js filter plugin which will allow you to add an expandable filtering gallery for showcasing any kind of portfolios. It has beautiful filter animation. Each item also has a carousel slider with text contents. By using Elastic Grid you can give a extra powerful & unique look into your project.
jPList – Free flexible jQuery plugin for sorting, pagination and filtering
jPlist is a advance jquery filtering plugin which is giving some advance features for filtering any kind of data. You can filter or short data’s by pages, pagination, searches etc.
Quicksand – Free reordering and filtering items jquery Plugin
Create a filterable gallery using Quicksand. This plugin allow you to filter your contents by name, size & types. It has beautiful filtering animation which can be present your contents nicely. It’s a completely free jquery filter plugin.
Filtrify – Advanced tag filtering free jquery Plugin
Filtrify is a fantastic sorting & filtering plugin which is comes with advance search functionality. It builds with html5 & jQuery. It has run time search functionality. You will be able to filter your contents by category. Not only that, also you can show how many contents are available in each category.
Content Filter – CSS3 and Jquery Powerful Filter Plugin Free
It’s an amazing content filter jquery plugin which comes with some advance & fantastic features. You can filter your content by category, checkbox & radio buttons. It also has a run time search functionality which through you can filter your contents on fly. This can be used for any kind of content or portfolio filtering gallery.
Portfolio – Free Interactive and Filterable Jquery Plugin
Are you creating a website template? Want to add a filterable portfolio gallery for showcasing portfolio works? Then this plugin will exactly do this for you. You can filter your images, portfolios, your amazing works by using this plugin. It is easy to implement & can be perfectly used for portfolio filtering gallery.
jQuery ListNav – Free letter based jQuery Filtering Plugin
ListNav is a simple plugin which can be used for filtering listed content. If you have lots of contents in a list style & want to add a simple filtering functionality for those contents then ListNav is perfect for you. This plugin has no animation. It will just simply filter you contents in listing view.
It’s not a filtering gallery plugin like isotope, Mixitup. It’s a fantastic real time jquery search filter plugin. You will be able to add real time search functionality with text highlighting into your website by using this plugin.
jQuery TickBack – Animated List filtering free jQuery Plugin
Add a simple filterable image or content gallery by using TickBack. It can be used for filtering portfolio works or any other related to showcasing any kind of galleries. It’s a simple lightweight portfolio filter jquery plugin which is comes with a nice shuffle animation.
Guggenheim – Animated filtering, reordering and pagination free Plugin
Guggenheim is comes with tons of filtering features which through you can implement an excellent image or content filter gallery. This plugin packed with a slider means you are not only able to add filter functionality also you can add a slider for your content gallery. You can filter your contents in some multiple ways like category, checkbox, radio buttons etc with a carousel slider.
Premium Filter/Filterable Plugins Colio – Content Expander jQuery Portfolio Filter Plugin
Colio is not only a simple jquery filter plugin. It comes with a modern & unique design. You will be able to implement a filterable gallery with item expander which is also have a carousel content slider & images with lightbox. If you are designing a business, corporate or portfolio website then this is a must have plugin for your project. Your project will be more creative & powerful by implementing this portfolio filter jquery plugin.
Magnet – Layouts jQuery Filter plugin
Magnet is a very nice jquery layout filter plugin which through you will be able to create filterable layouts. It comes with smooth filtering animation & effects. This plugin can filter & adapt your layouts fantastically in any kind of viewport.
bootFolio – Most Lightweight Portfolio Filtering jQuery Plugin
BootFolio is a bootstrap compatible portfolio filter plugin which is build with pure css3 animations. It’s very easy to use & lightweight. It comes with 14+ filtering animation, 76+ portfolio item layouts, 167+ portfolio item hover effects, 10+ options for setting up properly.
Cube Portfolio – Responsive jQuery Grid Filter Plugin
Cube can be your best choice for your portfolio gallery filtering. It comes with extensive features. You will be able to setup multiple style filtering functionality into your project. You can show how many contents available in each category alone with the category item & popover also. This plugin packed with carousel slider, testimonial slider, 15 ready to use templates, css3 animations, responsive design, grid & slider layouts, tabs, masonry, lightbox gallery & much more.
Live Swear – Comments Words Filter jQuery Plugin
Megafolio is amazingly designed & developed js filtering plugin which can be used for multiple purposes like portfolios, blogs, galleries shops etc. It has drag & drop visual skin editor, 30+ pre-made skins, responsive grid & lots more.
Nova Gallery – Responsive HTML5 Multimedia Filter Gallery Plugin
Nova is a beautiful image gallery jquery plugin. You can create image gallery for any kind of portfolio works in thumbnail or fullwidth view. It’s fully responsive & easy to implement.
Dimension – 3D Animation Filter Portfolio Gallery Plugin
It’s a beautiful & uniquely created portfolio filter plugin which through you can showcase your awesome works in such a nice way. If you are creating a website template for business, creative, corporate, portfolio then showcasing portfolio is the must element you need to implement. So by using Dimension filter plugin you can do that perfectly.
Preview More Info WP Version 450 Hazel H https://www..png Hazel H 2015-02-13 19:07:19 2016-12-15 20:17:20 30+ Brilliant Portfolio jQuery Filter Plugins Free & Premium
Наверное каждому разработчику попадался заказ по созданию и организации портфолио. Лично мне весьма нравятся такие заказы, ведь заказчик хочет чего-то оригинального, и тут необходима фантазия и проявления творческой сноровки. Не знаю как вам, но мне не хочется делать одинаковые шаблоны всем заказчикам. Надо делать дизайн, друзья мои, такой, чтобы вам не было за него стыдно. Ведь если ваше творение, в данном случае, к примеру, портфолио, поразит заказчика, то он вас наверняка порекомендует своим знакомым. А вам это только на пользу.
ИСХОДНИКИ
В данном уроке мы рассмотрим весьма интересный способ реализации галереи миниатюр для портфолио. Несомненно данную галерею можно использовать не только для портфолио, а для прочих, креативных, проектов. И так, приступим.
Шаг 1. HTMLНам необходимо создать список в виде неупорядоченного списка, и заключим это все в единый элемент Div, это оболочка будет использоваться для отображения сетки миниатюр изображений, стили будут созданы с помощью javascript, по этому css будут достаточно простыми. В этом уроке я использую удивительные изображения с dribbble , размещенные Troy Cummings:
У нас будут содержаться атрибуты подписи для изображений, следующий код это результат построения генерируемой разметки с помощью JavaScript:
Dump Truck Rrwooo
С разметкой мы в небольшой мере, надеюсь, разобрались, переходим к следующему шагу.
Шаг 2. CSSИзображения у нас будут выводится сеткой, нам необходимо задать общие параметры построения сетки добавить немного прозрачного диапазона черного фона, теней, Также мы установим display на none.
#portfolio-item { display: none; } #portfolio { margin: 2em 0 1em; transform-style: preserve-3d; } #portfolio div { display: inline-block; position: relative; vertical-align: top; margin: 1em; width: 200px; height: 150px; box-shadow: 0px 0px 25px rgba(0,0,0,.3); } #portfolio div span { text-align: left; position: absolute; color: #fff; background: rgba(0,0,0,0.6); width: 90px; padding: 5px 15px 7px; z-index: 1; left: -10px; bottombottom: 10px; }
Нам необходимо добавить класс анимации который будет использоваться при переходе на другую страничку. Мы будем вращать изображения на 360 градусов. относительно осей Х и Y.
Animated { transition: .9s ease-out; } .flipped-horizontal-rightright { transform: rotateY(360deg); } .flipped-horizontal-left { transform: rotateY(-360deg); } .flipped-vertical-top { transform: rotateX(360deg); } .flipped-vertical-bottombottom { transform: rotateX(-360deg); }
Шаг 3. JavaScriptДля начала нам необходимо определить некоторые переменные для навигации:
navigation.on("click", function(e) { e.preventDefault(); navigation.removeClass("selected"); $(this).addClass("selected"); page = $(this).attr("data-page"); for(var i = 0; i $(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%; } }
Вот и все. Наша замечательная страничка под емким названием «Портфолио» готова, остается лишь наполнить её своими не менее замечательными и выдающимися работами, и выставить на обозрение всему миру. Можно еще по тихому, скромно так, гордиться собой. Главное не переусердствовать в этом деле.
Смотрите еще раз пример и при необходимости забирайте исходники, на досуге, в тихой домашней обстановке, сможете довести до совершенства эту работу.
При создании урока использовался материал: . Оригинальная, девственно чистая, только что из под пера автора, страница портфолио, находится там же.
Удачи всем и с пользой для тела, провести остатки короткого лета!
