デモ
HTMLマークアップ
ページタイトル、必要なメタタグを指定し、
.css
および
.js
ファイルを含めます。
<!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head>
ページの本文を作成します。 各要素へのブロックで
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
-
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML<!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
(). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
,.
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3Cscrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C -::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4..conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
-
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML<!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
(). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
,.
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3Cscrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C -::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4..conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
-
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML<!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
(). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
,.
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3Cscrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C -::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4..conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
-
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML<!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
(). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
,.
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3Cscrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C -::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4..conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.
, JavaSript:
<!doctype html> <body> <div class="container"> <header> <h1 class="title"> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> ... </section> <footer></footer> </div> </body>
, . :
<figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure>
HTML <!doctype html> <html> <head> <title>Netcribe - </title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="keywords" content=""> <meta http-equiv="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href=""> <link rel="apple-touch-icon" href=""> <link rel="stylesheet" href="css/index.css" > <link rel="stylesheet" href="css/media-queries.css"> <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="container"> <header> <h1> </h1> <nav> <ul> <li id="all"></li> <li id="web"></li> <li id="design"></li> <li id="infogrphic"></li> <li id="movie"></li> </ul> </nav> </header> <section class="work"> <figure class="web"> <a href="#"> <img src="images/1.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="design"> <a href="#"> <img src="images/2.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="infogrphic"> <a href="#"> <img src="images/3.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> <figure class="movie"> <a href="#"> <img src="images/4.png" alt="" /> <dl> <dt></dt> <dd> </dd> </dl> </a> </figure> </section> <footer></footer> </div> </body> </html>
CSS
-:
body { background: #dfdfdf url('http://www.netcribe.com/images/pattern.png'); padding: 0; margin: 0; } .container { width: 960px; margin: 10px auto; oveflow: hidden; } header { text-align: center; } h1 { font-family: Ubuntu; font-size: 30px; font-weight: 300; }
:
nav ul { list-style: none; padding: 0; margin: 50px 0; text-align: center; } nav ul li { display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } nav ul li:hover { color: #000; } nav ul li:last-child { /* margin */ margin-right: 0; } nav ul li:after { /* '/' */ margin-left: 10px; content: '/'; color: #bbb; } nav ul li:hover:after { color: #bbb; } nav ul li:last-child:after { /* '/' */ content: ''; } .current-li { /* */ color: #000; }
:
.work { margin: 20px 0; } .work figure { float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* webkit ( http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* <dl> */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure a img { height: 100%; width: 100%; }
( ). :
.work figure a { text-decoration: none; } .work figure a img { height: 100%; width: 100%; } .work figure dl { opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; } .work figure:hover dl { opacity: 1; } .work figure dl dt { text-transform: uppercase; margin-bottom: 20px; } .work figure dl dd { font-size: 12px; }
.selected .not-selected
, .
.selected { -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .not-selected { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -webkit-filter: grayscale(1) !important; }
Selection Scrollbar
, scrollbar IE 5.5 IE6 W3C scrollbar-base-color
. webkit:
::selection { background: #333; color: #FFF; } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; } ::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; }
C - ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb;
scrollbar webkit, Gmail. Google Chrome, Safari, Yandex Browser , . , , 2009 . Cris Coyier CSS Tricks .
Media Queries
965px
840 = (170+40)*4. .conteiner
margin-left margin-right 4 ().
/* , , ( ) */ @media only screen and (max-width: 965px) { .container { width: 840px; } .work figure { width: 170px; height: 170px; } }
860px
- 720 = (200+40)*3.
/* , */ @media only screen and (max-width: 860px) { .container { width: 720px; } .work figure { width: 200px; height: 200px; } }
740px
600 = (160+40)*3. 0.5 .not-selected:
/* */ @media only screen and (max-width: 740px) { .container { width: 600px; } .work figure { width: 160px; height: 160px; } .not-current { opacity: 0.5; } }
610px
460 = (160+70)*2
/* ( ) ( ) */ @media only screen and (max-width: 610px) { .container { width: 460px; } .work figure { margin: 20px 35px; } }
480px
320 = 200 + 120
/* ( ) */ @media only screen and (max-width: 480px) { .container { width: 320px; } .work figure { width: 200px; height: 200px; margin: 20px 60px; } }
JavaScript - jQuery
- :
nav > li
, .not-selected .selected. .corrent-li .current-li . .selected .not-selected
function scaleDown() { // , $('.work > figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); } function show(category) { // , scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") { // $('nav > ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); } } $(document).ready(function(){ $('#all').addClass('current-li'); $("nav > ul > li").click(function(){ show(this.id); }); });
UPD: , , - webdesign.tutsplus.com
UPD: , , - .
.