html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

Создаем чистое портфолио (часть2: верстка)

Не так давно мы публиковали урок по созданию дизайна чистого портфолио в Фотошопе. Сегодня мы сделаем наше портфолио функциональным и заставим его отображаться в браузере.  В этом уроке мы покажем, как сверстать сайт при помощи html5 и css3 и сделать слайдер при помощи jQuery.

Окончательный результат:

Смотрите демо

Нарезка изображений

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

Также нам понадобиться изображение для заливки.

Шаг 0 – Подготовка

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

Шаг 1 – Структура документа

Мы будем использовать HTML5 . IE не поддерживает новые элементы HTML5, поэтому мы подключим скрипт ‘html5shiv’ к нашему документу.

<!--[if IE]>       <mce:script _mce_src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></mce:script>     <![endif]-->

Шаг 2 – Логотип

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

<h1><a title="WeGraphics - high quality design resources and tutorials" href="http://wegraphics.net">WeGraphics</a></h1>

Шаг 3 – Навигация

Наше меню будет выпадающим, вот его код.

<ul>
<li><a class="active" href="#">home</a></li>
<li><a href="#">work</a>
<ul class="dropdown">
	<li><a href="#">web</a></li>
 	<li><a href="#">print</a></li>
	<li><a href="#">illustration</a></li>
	<li><a href="#">motion</a></li>
</ul>
</li>
<li><a href="#">about</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact</a></li>
 </ul>

Шаг 4 – Слайдер

Над слайдером мы поработаем чуть позже.

<hr />

Шаг 5 – Секция «About Us»

Мы создадим 3 дива для колонок, каждому из которых назначим класс ‘column’ . Так, как колонки будут отличаться, пропишем им также дополнительные классы, второй колонке мы  ‘pitch’.  А для третей колонки с контактами мы добавим класс ‘contacts’.

<div class="column">
<h2>Who we are</h2>
WeGraphics is a team of creative professionals working hard to produce top-notch design goodies.

<h2>Where we are</h2>
WeGraphics HQ is located in Philadelphia, but the team is international. We've gathered a great bunch of talented and skilled designers to provide people with amazing resources.
</div>

<div class="column pitch">
<h2>How we can help you</h2>
We work with different mediums such as web, print and motion.Having worked in different niches, we posses the invaluable knowledge and outstanding skillset that we use to solve             clients' problems and bring their ideas to life.
<a href="#">we blog too</a> <!-- this will be a button -->
</div>

 <!-- We'll style the third column's paragraphs and links a bit differently from the rest. The telephone number needs to be wrapped into a <span>   tag in order for the whole column to be styled with         consistency-->

<div class="column contacts">
<h2>How to contact</h2>
Send an email to <a href="mailto:#">hello@wegraphics.net</a>
Chat with us on Skype <a href="callto:#">wegraphics</a>
Call us at <span>+1 (23) 456-78-99</span>
Socialize with us <a href="#footer">See footer for the links</a>
</div>
<hr />

Шаг 6 – Секция для последних работ

Для списка работ мы добавим следующий код:

<h3>Recent projects:</h3>
<a href="#">view portfolio</a>
<ul>
	<li class="item1"><a href="#"></a></li>
	<li class="item2"><a href="#"></a></li>
	<li class="item3"><a href="#"></a></li>
	<li class="item4"><a href="#"></a></li>
	<li class="item5"><a href="#"></a></li>
	<li class="item6"><a href="#"></a></li>
	<li class="item7"><a href="#"></a></li>
	<li class="item8"><a href="#"></a></li>
</ul>
 <hr />

Шаг 7 – Футер

<a href="#">Facebook</a>             <a href="#">Twitter</a>             <a href="#">Flickr</a>             <a href="#">Dribbble</a>             <a href="#">Forrst</a>
All content © 2011 WeGraphics &amp; DesignerOnDuty. All rights reserved.

А теперь пришло время добавить стили

Шаг 1 – Сброс стилей

Очень важно сбросить стили, всегда начинайте с этой части.

/*** CSS RESET ***/  html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video{     margin:0;     padding:0;     border:0;     outline:0;     font-size:100%;     vertical-align:baseline;     background:transparent;     } body{     line-height:1; } article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section{          display:block; } nav ul{     list-style:none; } blockquote, q{     quotes:none; } blockquote:before, blockquote:after, q:before, q:after{     content:'';     content:none; } a{     margin:0;     padding:0;     font-size:100%;     vertical-align:baseline;     background:transparent;     text-decoration: none; } ins{     background-color:#ff9;     color:#000;     text-decoration:none; } mark{     background-color:#ff9;     color:#000;      font-style:italic;     font-weight:bold; } del{     text-decoration: line-through; } abbr[title], dfn[title]{     border-bottom:1px dotted;     cursor:help; } table{     border-collapse:collapse;     border-spacing:0; } /****** This content separator is already styled to match the look we are after ******/ hr{     clear: both;     display:block;     height:1px;     border:0;        border-top: 1px dashed #ffbca4; /* Change this color and border style to suit your needs */     margin:2.5em 0 3em 0;     padding:0; } input, select{     vertical-align:middle; }

Шаг 2 – @font-face

Для того, чтобы сгенерировать код для @font-face можете воспользоваться сервисом  fontsquirrel.com

/* @font-face DECLARATION */
@font-face{
    font-family: 'Museo-500';
    src: url('../webfonts/eot/museo500.eot');
    src: url('../webfonts/woff/museo500.woff') format('woff'),
         url('../webfonts/ttf/museo500.ttf') format('truetype'),
         url('../webfonts/museo500.svg#Museo-500') format('svg');
}
@font-face{
    font-family: 'MuseoSans-500';
    src: url('../webfonts/eot/museosans500.eot');
    src: url('../webfonts/woff/museosans500.woff') format('woff'),
         url('../webfonts/ttf/museosans500.ttf') format('truetype'),
         url('../webfonts/museosans500.svg#MuseoSans-500') format('svg');
}

Шаг 3 – Общие стили

html{
    width: 100%; height: 100%;
}
body{
    font-family: 'MuseoSans-500', Helvetica, Arial, sans-serif;
    font-size: 14px;
    color:#454545;
    background:#fff;
}
header{
    width: 940px;
    margin: 50px auto 30px; /* this will center the header on the page (horizontally) and apply the top and bottom margins */
}

Шаг 4 – Логотип

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

header h1 a{
    background: url('../img/logo.png');
    width: 268px;  height: 59px;
    float: left;  display: block;
    text-indent: -99999px;
}

Шаг 5 – Навигация

Как вы помните, мы использовали шрифт Museo-500 для текста навигации. Зададим стили для нашей навигации, не забыв указать стили для ссылок в  момент наведения и стили активных ссылок.

header nav{
    float: right;
    margin: 10px 0 0 0;
    font-family: 'Museo-500', Helvetica, Arial, sans-serif;
}
header li{
    float: left;  display: inline;
    position:relative; /* We'll need this for the dropdown to work properly */
}
header li a{
    display: block;
    color: #454545;
    padding: 8px 16px; /* Spacing out the links */
}
header li a:hover, header li a.active{
    color: #fff;
    background: #e35e35;
}

Шаг 6 – Выпадающее меню

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

.dropdown{
    list-style: none;
    position: absolute;
    left: -9999px;
    z-index: 10; /* So the dropdown stays on top of everything else */
    opacity: 0;
    -webkit-transition: opacity 0.35s linear;
    -moz-transition: opacity 0.35s linear;
    -o-transition: opacity 0.35s linear;
    transition: opacity 0.35s linear;
}

А этот код позволит выровнять размеры всех пунктов в выпадающем списке и предотвратить перенос текста на новую строку.

.dropdown li{
    padding: 0;
    margin: 0;
    float: none;
}
.dropdown a{
    white-space: nowrap;
    text-align: left;
    display: block;
    font-size: 13px;
}

Это стили для выпадающего списка:

header li:hover ul{
    left: 0;
    opacity: 1;
}
header li:hover ul a{
    color: #e35e35;
    background: #fff;
    -webkit-transition: all 0.15s linear;
    -moz-transition: all 0.15s linear;
    -o-transition: all 0.15s linear;
    transition: all 0.15s linear;
}
header li:hover ul a:hover{
    color: #fff;
    background: #e35e35;
}

PS: Техники для создания выпадающего списка взяты из этой статьи.

Шаг 7 –Слайдер*

Теперь поработаем над слайдером

#slider{
    clear: both;
    height: 340px;
    background: url('../img/slider_bg.png') repeat;
    padding: 25px 0 8px 0;
    position: relative;
    top: 40px;
}

Шаг 8 – Секция «О нас»

Первая колонка:

#about{
    width: 940px;
    margin: 30px auto 0;
}
.column{
    float: left;  display: inline;
    width: 240px;
    margin: 0 40px 0 15px;
    text-align: left;
}

2-я и 3-я колонка:

 .pitch{     width: 345px;     margin: 0 40px 0 25px; } .contacts{     width: 205px;     margin: 0 15px 30px 15px; }

Типографика и все такое

 #about h2{
    font: 19px 'Museo-500', Helvetica, Arial, sans-serif;
    margin-bottom: 14px;
}
.column p{
    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 18px;
    padding: 0 5px;
    border-left: 1px dashed #ffbca4; /* That vertical dashed line we've drawn in photoshop */
}
.contacts a, span{
    font-size: 12px;
    display: block;
    color: #454545;
    -webkit-transition: 0.15s linear color;
}
.contacts a:hover{
    color: #e35e35; /* Everything but the telephone number will change the color when hovered over */
}

Кнопка:

.pitch p{
    margin: 0 0 28px 0;
}
.pitch a{
    font: 14px 'Museo-500', Helvetica, Arial, sans-serif;
    text-align: left;
    color: #e35e35;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #ffbca4;
    -webkit-transition: all 0.15s linear;
    -moz-transition: all 0.15s linear;
    -o-transition: all 0.15s linear;
    transition: all 0.15s linear;
}
pitch a:hover{
    padding: 6px 18px;
}
.pitch a:active{
    color: #fff;
    background: #e35e35;
}

Шаг 9 – Секция для последних работ

#recent_projects{
    overflow: hidden;
    width:940px;
    margin: 60px auto 0;
}
#recent_projects h3{
    font: 16px 'Museo-500', Helvetica, Arial, sans-serif;
    margin: 0 0 35px 15px;
}

Для кнопки просто скопируйте созданные ранее стили.

#recent_projects p a{
    font: 14px 'Museo-500', Helvetica, Arial, sans-serif;
    text-align: left;
    color: #e35e35;
    margin: 0 0 0 15px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #ffbca4;
    -webkit-transition: all 0.15s linear;
    -moz-transition: all 0.15s linear;
    -o-transition: all 0.15s linear;
    transition: all 0.15s linear;
}
#recent_projects p a:hover{
    padding: 6px 18px;
}
#recent_projects p a:active{
    color: #fff;
    background: #e35e35;
}

Шаг 10 – Миниатюры картинок

#recent_projects li a{
    display: block;
    width: 140px;  height: 140px;
}
#recent_projects li{
    float: left;  display: inline;
    margin: 20px;
}

Скруглим немного углы. Если Вы хотите, чтобы этот эффект отображался в IE, используйте CSS3 Pie.

#recent_projects li{
    float: left;  display: inline;
    margin: 20px;
    -webkit-border-radius: 80px;
    -moz-border-radius: 80px;
    border-radius: 80px;
}

CSS3 transitions добавлено для того, чтобы вернуть изображениям при наведении квадратную форму

#recent_projects li{
    float: left;  display: inline;
    margin: 20px;
    -webkit-border-radius: 80px;
    -moz-border-radius: 80px;
    border-radius: 80px;
    -webkit-transition: -webkit-border-radius 0.20s linear;
    -moz-transition: -moz-border-radius 0.20s linear;
    -o-transition: all 0.20s linear;
    transition: border-radius 0.20s linear;
}
#recent_projects li:hover{
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}

Мы будем использовать спрайты для перехода от черно-белого изображения к цветному:

.item1{
    background: url('../img/portfolio_item1.jpg') 0 140px;
}
.item2{
    background: url('../img/portfolio_item2.jpg') 0 140px;
}
.item3{
    background: url('../img/portfolio_item3.jpg') 0 140px;
}
.item4{
    background: url('../img/portfolio_item4.jpg') 0 140px;
}
.item5{
    background: url('../img/portfolio_item5.jpg') 0 140px;
}
.item6{
    background: url('../img/portfolio_item6.jpg') 0 140px;
}
.item7{
    background: url('../img/portfolio_item7.jpg') 0 140px;
}
.item8{
    background: url('../img/portfolio_item8.jpg') 0 140px;
}

Установим  ‘background-position: 0 0;’ для изображений при наведении.

#recent_projects li:hover{
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    background-position: 0 0; /* This is what we just added */
}

Шаг 11 – Футер

footer{
    clear:both;
    width: 940px;
    margin: 0 auto;
    padding: 0 0 50px 0;
}
footer nav{
    font-size: 13px;
    width: 660px;
}
footer a{
    float: left;
    display: inline;
    color: #ffbca4;
    margin: 0 0 0 20px;
}

Добавим немного магии для ссылок, которые расположены в футере.

footer a{
    float: left;
    display: inline;
    color: #ffbca4;
    margin: 0 0 0 20px;
    padding: 5px 10px;
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    transition: all 0.1s linear;
}
footer a:hover{
    padding: 10px 10px;
    color: #fff;
    background: #e35e35;
}
footer a:active{
    color: #fff;
    background: #454545;
}

Информация о правообладателе.

footer p{
    float: right;  display: inline;
    color: #454545;
    font-size: 11px;
    line-height: 1.5;
    text-align: left;
}

Вернемся к слайдеру

Разметка для слайдера

Давайте добавим идентификатор  #slider для секции слайдера и следующий код:

<section id="slider">

        <div class="window">
        <div class="image_reel">
            <a href="#"><img src="img/slide1.jpg" alt="" /></a>
            <a href="#"><img src="img/slide2.jpg" alt="" /></a>
            <a href="#"><img src="img/slide3.jpg" alt="" /></a>
            <a href="#"><img src="img/slide4.jpg" alt="" /></a>
        </div>
        </div>
        <div class="paging">
        <a class="bullet1" href="#" rel="1">1</a> <!-- this is the active control bullet -->
        <a href="#" rel="2">2</a>
        <a href="#" rel="3">3</a>
        <a href="#" rel="4">4</a>
        </div>
</section>

Стили для слайдера

Мы уже начали писать стили для слайдера, давайте продолжим работу.

 .window{
    width: 940px;  height: 280px;
    position: relative;
    margin: 0 auto;
    overflow: hidden; /*--Hides anything outside of the set width/height--*/
    border: 5px solid #e3e3e3;
}
.image_reel{
    position: absolute;
    top: 0;
    left: 0;
}
.image_reel img{
    float: left; display: inline;
}
.paging{
    width: 940px;
    margin: 18px auto 22px;
}
.paging a{
    float: left;  display: inline;
    padding: 5px 11px;
    background: url('../img/bullets.png') 0 0;
    text-indent: -9999px;
}
.paging a.active{
    background-position: 0 22px;
}
.bullet1 {
    margin: 0 0 0 9px;
}

jQuery

Теперь пришло время подключить скрипт для слайдера к нашему документу.
Создайте новый JS-файл, назовите его ‘slider.js’ и вставьте в него следующий код.

$(document).ready(function() {

    //Show the paging and activate its first link
    $(".paging").show();
    $(".paging a:first").addClass("active");

    //Get size of the image, how many images there are, then determin the size of the image reel.
    var imageWidth = $(".window").width();
    var imageSum = $(".image_reel img").size();
    var imageReelWidth = imageWidth * imageSum;

    //Adjust the image reel to its new size
    $(".image_reel").css({'width' : imageReelWidth});

    //Paging and Slider Function
    rotate = function(){
    var triggerID = $active.attr("rel") - 1; //Get number of times to slide
    var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

    $(".paging a").removeClass('active'); //Remove all active class
    $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

    //Slider Animation
    $(".image_reel").animate({
        left: -image_reelPosition
    }, 500 );

    }; 

  //Rotation and Timing Event
    rotateSwitch = function(){
    play = setInterval(function(){ //Set timer - this will repeat itself every 5 seconds
        $active = $('.paging a.active').next(); //Move to the next paging
        if ( $active.length === 0) { //If paging reaches the end...
            $active = $('.paging a:first'); //go back to first
        }
        rotate(); //Trigger the paging and slider function
    }, 5000); //Timer speed in milliseconds (5 seconds)
    };

    rotateSwitch(); //Run function on launch

   //On Hover
    $(".image_reel a").hover(function() {
    clearInterval(play); //Stop the rotation
    }, function() {
    rotateSwitch(); //Resume rotation timer
    });        
    //On Click
    $(".paging a").click(function() {
    $active = $(this); //Activate the clicked paging
    //Reset Timer
    clearInterval(play); //Stop the rotation
    rotate(); //Trigger rotation immediately
    rotateSwitch(); // Resume rotation timer
    return false; //Prevent browser jump to link anchor
    });
    });

Не забудьте вернуться HTML-документу и подключить только что созданный скрипт: .

Готово!

Окончательный результат:

Смотрите демо

Автор: wegraphics

Перевод: Дежурка

Возможно, вас также заинтересуют статьи:

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с dejurka.ru

371
    +353 surfers

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • dejurka-magazine
          • домен dejurka.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции