3 Web Designs in 3 Weeks

3
Web Designs in 3 Weeks
Table of Contents
1.
2. 1
3. 2Twitter
4. 3
5. 1
6. 2CSS
2
3 Web Designs in 3 Weeks
33
201411ThoughtWorks3Workshop33
HTML/CSSWeb
WorkshopPhotoShop
HTML/CSS
CSSWeb/
Web/
WorkshopHTML5
CSS3
ShowcaseShowcase
Workshop3
Web
Workshop
33gitbook
ThoughtWorks33
ThoughtWorks
selfstore.ioPDFselfstore.io
CSS3
ThoughtWorks
3
Find An Agent
Find an agent Web
Web Find
an agent
Shell
***<>***
23.00()6.00()
415.00()60.00()
----------------------

1
----------------------
60.00()
3.00()
**********************
1 4
SassCompass
SassCSS3
mixin
SassSass
$body-color: #efefef;
$text-color: #4f4f4f;
body {
background-color: $body-color;
color: $text-color;
}
1 5
a:hover {
background-color: $text-color;
color: $body-color;
}
$highlight-color: lightgreen;
.hero {
h1 {
font-size: 4em;
}
p {
color: white;
a {
color: $highlight-color;
}
}
}
css
.hero h1 {
font-size: 4em;
}
.hero p {
color: white;
}
.hero p a {
color: lightgreen;
}
SassCSS
mixin RubyRuby
mixin
@mixin radius($radius: 5px) {

border-radius: $radius;
}
.hero {
@include radius(10px);
}
.gallery {
p {
1 6
background-color: $body-color;
@include radius(5px);
}
}
CSS :
.hero {
border-radius: 10px;
}
.gallery p {
background-color: #efefef;
border-radius: 5px;
}
Sass Compass
Compass Sass
reset css3 CSS3
Compass
$ gem install compass
compass Sass
$ compass create my-project
my-project
$ tree my-project
my-project
config.rb
sass
ie.scss
print.scss
screen.scss
stylesheets
ie.css
print.css
screen.css
sass
$ compass compile
1 7
css stylesheets
Compass CSS
@import "compass/css3";
.hero {
@include border-radius(10px);
}
/* line 3, ../sass/nested-css.scss */
.hero {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
Sublime
SublimeSublimeWindowsLinux
Mac OSX
Sublime3WebSublime
Sublime
Sublime Package Control
Package Control
1. Emmet
2. HTML-CSS-JS Prettify
3. GitGutter
Command + Shift + P install package
1 8
EmmetHTML
EmmetSublimeTextmateNotepad++
EmmetCSS HTML
EmmetHTML
section h2 3 p
<section>
<h2></h2>
<p></p>
<p></p>
<p></p>
</section>
1 9
Emmet
section>h2+p*3
> + *
sectionsectionh2h23paragraph
10 item
divdivh2 image-1.jpg image-10.jpg
Emmet
ul>li*10>.item>h2+img[src="image-$.jpg"]
<ul>
<li>
<div class="item">
<h2></h2>
<img src="image-1.jpg" alt="">
</div>
</li>
<li>
<div class="item">
<h2></h2>
<img src="image-2.jpg" alt="">
</div>
</li>
...
</ul>
.item class item div $ index 1 10
HTML-CSS-JS Prettify HTML CSS JavaScript Mac OS X

Command + Shift + H
GitGutter SublimeGit
1 10
HTML/CSS
HTML
HTTP
JavaScript
file:// http:// ajax
Mac OS X python python HTTP
$ python -m SimpleHTTPServer 9999
HTTP 9999
index.html index.html
LiveReload
LiveReload
1 11
Web
1. HTML5
2. CompassSCSS
3. Guard
Guard
HTMLscss
Compass
Guardfile
guard 'livereload' do
watch('index.html')
watch(%r{stylesheets/.+\.(css)})
watch(%r{scripts/.+\.(js)})
end
guard :compass
livereload index.html
stylesheets/*.css scripts/*.js livereload
compass sass *.scss compass
stylesheets *.css livereload
1 12
$ git clone git@github.com:abruzzi/design-boilerplate.git mydesign
bundle installRuby
$ cd mydesign
$ bundle install
GuardHTTP Server
$ guard start
Guard 2
$ python -m SimpleHTTPServer 9999
HTTP http://localhost:9999/index.html
1 13
Sublime index.html
Guard LiveReload
Guard
index.html style.scss
dribble
1 14
1 15
hero
Mocking Up
1. Hero
2.
3. How It Works
4. Why Choose Us
5.
6.
7.
1. HTMLCSS
2. HTML
Hero
Web Hero
Image Hero Image
Herologo
HTML
<section class="hero">
<header>
<img src="images/logo.png" alt="logo">
<ul>
<li>Agents</li>
<li>Login</li>
<li>Signup</li>
</ul>
</header>
<h1>Relax, Finding An Agent Just Got Easier</h1>
<h2>Receive proposals from best agents for free</h2>
<form action="">
<input type="text" placeholder="Enter a suburb"><input type="button" value="search"
</form>
</section>
1 16
Emmet
section.hero>(header>img+ul>li*3)+h1+h2+(form>input[type="text"]+input[type="button"])
scss
body {
font-size: 62.5%;
text-align: center;
}
logologo
header {
img {
width: 8em;
height: 2em;
float: left;
}
1 17
ul {
float: right;
li {
float: left;
margin: 0 .5em;
padding: 1em;
}
}
@include clearfix;
}
clearfix mixin
header
scss
.hero {
max-width: 100em;
margin: 0 auto;
header {
img {
width: 8em;
height: 2em;
float: left;
}
ul {
float: right;
li {
float: left;
margin: 0 .5em;
padding: 1em;
}
}
@include clearfix;
}
h1 {
font-size: 4em;
padding: 1em 0 .5em 0;
}
h2 {
font-size: 2em;
}
}
1 18
ThoughtWorksPhotoShop
1 19
hero
background: url('/images/find-an-agent-hero.png');
background-size: cover;
color: $highlight-text-color;
1.
2.
3.
form {
padding: 2em 0 4em 0;
input[type="text"] {
padding: 1em;
border: 0;
width: 18em;
border-radius: 2px 0 0 2px;
background: $bg-color;
opacity: .3;
}
1 20
input[type="button"] {
color: $highlight-text-color;
padding: 1em;
border: 0;
width: 6em;
border-radius: 0 2px 2px 0;
background-color: lightgreen;
}
}
border-radius
lightgreen
Sign up logo
1 21
li 1 Signup
12
li {
float: left;
margin: 1em .5em;
padding: .5em 1em;
border: 1px solid transparent;
border-radius: 2px;
&:last-child {
border: 1px solid $highlight-text-color;
}
}
& li :
li:last-child {}
LiveReload
1 22
EmmetHTML Find an agent

Hero
Web95%
SerifSans Serif
Google Font API Google Font

API http://www.google.com/fontsGooglelink
link
1 23
Open Sans Googlelink
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,600,40
scss
body {
font-family: 'Open Sans', sans-serif;
font-size: 62.5%;
text-align: center;
}
1 24
Mac OS X SIP
Ctrl+Option+P
1 25
sass
$bg-color: #efefef;
$text-color: #4f4f4f;
$secondy-text-color: #D9DADA;
$highlight-text-color: white;
$button-color: #6cdcac;
1 26
text-transform: uppercase;
font-weight: bold; #d9dada
<section class="numbers">
<ul>
<li class="number">
<h2>20,000</h2>
<h3>Agents</h3>
</li>
<li class="number">
<h2>1,723,000</h2>
<h3>Transactions</h3>
</li>
<li class="number">
<h2>17,444</h2>
<h3>Agencies</h3>
</li>
<li class="number">
<h2>10,200</h2>
<h3>Suburbs</h3>
1 27
</li>
</ul>
</section>
section.numbers>ul>li*4>h2+h3
li {
float: left;
width: 25%;
}
100%80%
li
.numbers {
width: 80%;
margin: 0 auto;
}
1 28
Hero How it works
.numbers {
width: 80%;
margin: 0 auto;
ul {
position: relative;
top: -1em;
background: $bg-color;
li {
float: left;
width: 25%;
}
@include clearfix;
}
}
li {
float: left;
width: 25%;
box-sizing: border-box;
border-top: 1px solid $secondy-text-color;
border-bottom: 1px solid $secondy-text-color;
border-left: 1px solid $secondy-text-color;
&:last-child {
border-right: 1px solid $secondy-text-color;
}
h2 {
font-size: 2em;
padding: 1em 0;
}
h3 {
padding: 0 0 2em 0;
}
}
1 29
How it works HTML
<section class="how-it-works">
<h2>How it works</h2>
<ul>
<li>
<div class="detail">
<span class="number">1</span>
<i class="icon-list"></i>
<h3>Compare</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum temporibus cupidit
</div>
</li>
<li>
<i class="icon-pencil"></i>
<h3>Receive Proposals</h3>
</div>
</li>
<li>
<i class="icon-users"></i>
1 30
<h3>Sell with the Best</h3>

</div>
</li>
</ul>
</section>
HTML Lorem Sublime

lorem TAB Web
fonticon
/
CSS
Unicode
icomoon
fontawesome
icomoon
fonts
$ ls fonts
icomoon.eot icomoon.svg icomoon.ttf icomoon.woff
1 31
style.css sass icomoon.scss style.scss

icomoon
@import "icomoon";
icomoon.scss fonts
@font-face {
font-family: 'icomoon';
src:url('../fonts/icomoon.eot?200299');
src:url('../fonts/icomoon.eot?#iefix200299') format('embedded-opentype'),
url('../fonts/icomoon.woff?200299') format('woff'),
url('../fonts/icomoon.ttf?200299') format('truetype'),
url('../fonts/icomoon.svg?200299#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
HTML i class icon-

icomoon.scss
.icon-zoom-out:before {
content: "\e62b";
}
.icon-zoom-in:before {
content: "\e62c";
}
content unicode
1 32
1/3
li {
float: left;
width: 33.33%;
}
.number {
font-size: 2em;
color: $border-color;
border: 1px solid $border-color;
width: 1em;
height: 1em;
display: block;
margin: 1em auto 2em auto;
padding: .4em;
@include border-radius(100%);
background-color: $bg-color;
1 33
i {
font-size: 3.6em;
}
.icon-list {
color: #ECA95A;
}
.icon-pencil {
color: #AC9CD2;
}
.icon-users {
color: #4D99CB;
}
How it works
HTML
1 34
HTML
HTML
HTML
HTML :before :after
p::before {
content: "";
display: block;
color: #6e6e6e;
}
How it works
h2 {
font-size: 2em;
padding: 1em 0;
&:after {
display: block;
content: "";
background-color: $border-color;
width: 2em;
height: .1em;
margin: .4em auto;
}
}
How it works
li {
&:before {
display: block;
content: "";
background: $border-color;
width: 100%;
height: 1px;
1 35
position: absolute;
top: 4em;
left: 50%;
margin: 0 2em;
}
&:last-child:before {
display: none;
}
}
libeforeli
Github
1 36
Github
GithubGithub Pages

Github Github Pages

Githubdisqus
flickrJavaScript
Web
Github gh-
pages HTML/CSS/JS
github wumai (
)Github https://github.com/wumai
repo design-1 https://wumai.github.io/design-
1
$ git clone git@github.com:abruzzi/design-boilerplate.git design-1
design-boilerplate
$ cd design-1
$ git remote -v
git@github.com:abruzzi/design-boilerplate.git
origin git@github.com:abruzzi/design-boilerplate.git (fetch)

origin git@github.com:abruzzi/design-boilerplate.git (push)
$ git remote remove origin
GithubRepo design-1 Repo

remote
$ git remote add -u origin git@github.com:wumai/design-1.git
gh-pages
1 37
$ git checkout -b gh-pages
gh-pages
pushGithub
$ git push -u origin gh-pages
http://wumai.github.io/design-1
1 38
Twitters' New Face

Twitter dribble.com
Web2.0
1.
2.
3.
4.
5.
2Twitter 39
HTML5CSS3
HTML5HTMLHTML4HTML5
HTMLHTML
CSS3CSS2
Web
4
HTML5
1. NAV
2. HEADER
3. ASIDE
4. SECTION
5. ARTICLE
6. FOOTER
HTML5HTML
6
NAV
nav nav
<nav>
<ul>
<li><a href="/product">Product</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/detail">Detail</a></li>
</ul>
</nav>
nav
REA
2Twitter 40
HEADER
header section
Hero Section
<header>
<h1>Relax, Finding An Agent Just Got Easier</h1>
<h2>Receive proposals from best agents for free</h2>
</header>
section
<section>
<header>
<h1>This is my title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi officia minima iure sed
</header>
</section>
<section>
<header>
<h1>This is another</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptatem nam aperiam
</header>
</section>
header
ASIDE
aside aside
aside
aside
aside seciton/article
<article>
<h1>Dont design, redisign</h1>
2Twitter 41
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

<aside>
<h1>Colour theory</h1>
<dl>
<dt></dt>
<dt></dt>
</dl>
</aside>
</article>
article aside article aside

article
<body>
<header>
<h1>Dont design, redisign</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
</header>
<aside>
<h1>Web design</h1>
<dl>
<dt></dt>
<dt></dt>
</dl>
</aside>
</body>
SECTION
section
div section
reveal.jsHTML
section
<section>
<h2>UI for developers</h2>
<pre><code data-item>
***<>***
23.00()6.00()
415.00()60.00()
----------------------

1
----------------------
60.00()
3.00()
**********************
</code></pre>
</section>
2Twitter 42
ARTICLE
article
article /
RSS
twist article
<article class="post">
<img src="images/juntao.png" alt="" class="avator">
<header>
<span class="name">Juntao</span>
<span class="account">@juntao</span>
<span class="time">2m</span>
</header>
2Twitter 43
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus veniam quas, deserunt! Pro
<footer>
</footer>
</article>
FOOTER
footer header section

article /
footer
<footer>
<nav>
<a href="/product">Product</a>
<a href="/contact">Contact</a>
<a href="/detail">Detail</a>
</nav>
<h2>CopyRight@2014</h2>
</footer>
CSS3
CSS3WebJavaScript
CSS3
IE
IE
Box
<section class="container">
<section class="box">
I'm a box
</section>
</section>
2Twitter 44
CSS3
.rounded {
border-radius: 8px 8px 8px 8px;
}
.rounded {
border-radius: 8px;
}
2Twitter 45
.gradient {
background: linear-gradient(to bottom, #eee, #666);
}
2Twitter 46
.gradient {
background: linear-gradient(to bottom, #eee, #666, #eee);
}
2Twitter 47
.gradient-rounded {
background: radial-gradient(#666, #eee, #666);
}
CSS3
xy
.box-shadow {
box-shadow: 5px 5px 0 orange;
}
2Twitter 48
0 5px
.box-shadow {
box-shadow: -5px -5px 5px orange;
}
2Twitter 49
.box-shadow {
box-shadow: -5px -5px 5px orange inset;
}
2Twitter 50
.text-shadow {
text-shadow: 2px 2px 1px gray;
}
transition
box
.box {
background: white;
color: orange;
}
hover
.box:hover {
background: orange;
color: white;
}
box/

.box {
background: white;
2Twitter 51
color: orange;
transition: all .5s ease-in-out;
}
box 0.5 ease-in-out

ease-in ease-out
JavaScript
CSS3
CSS3
.element:hover {
transform: scale(1.2);
}
1.2
.element:hover {
transform: rotate(180deg);
}
180
.element:hover {
transform: translate(200px, 100px);
}
x200y100CSS3
Marking up
HTMLHTML5
HTML4
<header>
<nav>
<ul>
<li><a href="#" class="compose"></a></li>
2Twitter 52
<li><a href="#" class="alert"></a></li>

<li><a href="#" class="email"></a></li>
<li><a href="#" class="tag"></a></li>
</ul>
</nav>
</header>
<aside>
<div class="profile"></div>
<div class="gallery"></div>
<div class="activities"></div>
</aside>
<section class="content">
<nav class="info">
<ul>
<li class="number">200</li>
</ul>
</nav>
<div class="articles">
<article></article>
<article></article>
<article></article>
</div>
</section>
<aside>
<div class="trends"></div>
<div class="to-follow"></div>
</aside>
<footer>
<div class="copyright"></div>
</footer>
Tweet
Web
Tweet
Tweet
2Twitter 53
TweetHTML5 article Tweet article

Tweet
<article class="post">
<img src="images/juntao.png" alt="" class="avator">
<section class="content">
<header>
<span class="name">Juntao</span>
<span class="account">@juntao</span>
<span class="time">2m</span>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus veniam quas, deserunt!
<footer>
<nav>
<a href=""><i class="icon-redo"></i></a>
<a href=""><i class="icon-star"></i></a>
<a href=""><i class="icon-loop"></i></a>
<a href=""><i class="icon-ellipsis"></i></a>
<a href=""><i class="icon-maximize"></i></a>
</nav>
</footer>
</section>
</article>
Tweet
link
post
position relative position absolute
margin-left
2Twitter 54
30x30border-raduis100%
.avator {
width: 3em;
height: 3em;
position: absolute;
top: 2em;
left: 2em;
}
2Twitter 55
.post {
position: relative;
text-align: left;
padding: 2em;
background: $post-bg-color;
border-bottom: 1px solid $body-color;
.content {
margin-left: 4em;
span {
margin-right: 1em;
&.name {
font-weight: bold;
}
&.account {
font-weight: lighter;
color: $gray-text-color;
}
&.time {
float: right;
2Twitter 56
margin-right: 0;
}
}
}
header {
margin-bottom: 1em;
}
section {
margin-bottom: 1em;
p {
line-height: 1.4;
font-weight: normal;
}
img {
width: 100%;
margin-bottom: 1em;
}
}
footer {
a {
text-decoration: none;
margin-right: 1em;
&:last-child {
float: right;
margin-right: 0;
}
&:hover {
color: $text-color;
}
}
}
}
Tweet
2Twitter 57
CSS3
CSS2
1. red orange
2. #004c97
3. RGB rgb(255, 122, 0)
0-255 #004c97
0(0x00) 76(0x4c) 151(0x97)
CSS3rgbahslhslargbargbalpha
background-color: rgba(200, 120, 80, 0.2);
0-101
CSS3HSLRGB
2Twitter 58
RGBHSL
HSLHueSaturationLightness
HSL
HSLHSL
background-color: hsl(30, 100%, 50%);
30100%50%
hsl(200, 80%, 40%)

40% 45% 50%
2Twitter 59
20%
4iPad
Media Query
CSSCSS media
query link
<link rel="stylesheet" media="screen and (max-width: 480px)" href="numbers-small.css" />
CSSviewport480pxCSS
.information {
background-color: red;
}
@media screen and (min-width: 1024px) {

.information {
background-color: yellow;
}
}
Twitter new face
<section class="numbers">
<ul>
<li class="item">
<h4>Tweets</h4>
<p>200</p>
</li>
<li class="item">
<h4>Photo/Videos</h4>
<p>250</p>
</li>
<li class="item">
<h4>Following</h4>
2Twitter 60
<p>55</p>
</li>
<li class="item">
<h4>Followers</h4>
<p>180</p>
</li>
</ul>
</section>
.numbers {
width: 60em;
margin: 2em auto;
background: $post-bg-color;
li {
float: left;
width: 25%;
padding: 1.5em 3em;
border-bottom: 3px solid transparent;
transition: all .3s ease-in;
h4 {
}
p {
margin-top: 1em;
font-weight: bold;
}
&:hover {
border-bottom: 3px solid $twitter-color;
}
}
@include clearfix;
}
2Twitter 61
Sass3.2
mixin mixin
@mixin respond-to($media) {
@if $media == handhelds {
@media only screen and (max-width: $break-small) { @content; }
}
@else if $media == medium-screens {
@media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1
}
@else if $media == wide-screens {
@media only screen and (min-width: $break-large) { @content; }
}
}
break-point
$break-small: 320px;
$break-large: 1024px;
2Twitter 62
li {
float: left;
width: 25%;
@include respond-to(medium-screens) {
width: 50%;
}
//...
}
li {
float: left;
width: 25%;
@include respond-to(handhelds) {
float: none;
width: 100%;
}
//...
}
2Twitter 63
2Twitter 64
3

HTML+CSS
1.
2.
3.
4.
UNIX
3 65
3 66
3 67
3 68
command line
1.
2.
3.
4.
google
3 69
UNIX
3 70
3 71
3 UNIX
/
3 72
3 73
33
<section class="schedule">
<ul>
<li>
<div class="item">
<h3>Week 1: Find an agent</h3>
<time datatime="2014/10/03">2014-10-03</time>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquam dicta culpa,
</div>
</li>
<li>
<div class="item">
<h3>Week 2: Twitter new face</h3>
<time>2014-10-10</time>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis ab hic cupiditat
3 74
</div>
</li>
<li>
<div class="item">
<h3>Week 3: My portfilio</h3>
<time>2014-10-17</time>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi debitis suscipit e
</div>
</li>
</ul>
</section>
3 75
Marketo
95%2
4//
Adobe Kuler
3 76
Adobe Kuler
3 77
Kuler
1.
2.
3.
4.
Hero Image
Hero Image
3 78
Hero Image
Hero Image
3 79
Hero Image
3 80
3 81
3 82
3 83
3 84

Hero Image
ThoughtWorks33Workshop
33
1. Workshop
2. Workshop
3.
4.
5.
6.
3 85
3 86
Heading
UIKit
Hero Image
Hero Image
<header>
<ul>
<li><a href="https://github.com/abruzzi/3-pages-in-3-weeks">Code</a></li>
<li><a href="http://icodeit.org/about-me/">About</a></li>
</ul>
</header>
Headline
Hero Image Headline Headline
3 87
HTML
<section class="hero">
<h2>3 pages in 3 weeks</h2>
<p>We learn various of tools which are effictive, powerful, agile to build Web pages from scracth
</section>
$background-color: #eeeeee;
$text-color: #3e3e3e;
$light-text-color: #eeeeee;
$heading-color: hsl(160, 90%, 40%);
$mask-color: #333333;
Body
body {
font-size: 62.5%;
font-family: 'Open Sans', sans-serif;
text-align: center;
3 88
color: $text-color;
background-color: $background-color;
width: 100%;
}
header hero
header {
padding: 0 1em;
background-color: $heading-color;
li {
float: left;
a {
font-size: 1.5em;
text-decoration: none;
color: white;
display: inline-block;
padding: 1em 1em;
}
&:hover {
background-color: hsl(160, 90%, 35%);
}
}
@include clearfix;
}
.hero {
width: 100%;
min-height: 50em;
position: relative;
background-color: $mask-color;
z-index: 1;
&:after {
background: url('../images/hero-1-resized.jpg');
position: absolute;
content: "";
z-index: -1;
opacity: .2;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
h2 {
font-size: 6em;
font-weight: bold;
color: white;
}
p {
max-width: 70%;
font-size: 1.5em;
3 89
color: #cecece;
line-height: 1.4;
margin: 0 auto;
span {
color: $heading-color;
}
}
}
.hero section position

relative
.2 .hero h2 p
Find an agent 1,2,3 3
<section class="topics container">

<h3>What do we learn?</h3>
<ul>
<li>
3 90
<div class="subject">
<i class="icon-wrench"></i>
<h4>Tools</h4>
<p>We introduce tools like Sublime, Emmet, LiveReload, Guard to speed up the whole pr
</div>
</li>
<li>
<i class="icon-books"></i>
<h4>Design theory</h4>
<p>Some basic theory of design, color scheme, hierachy, imagery.</p>
</div>
</li>
<li>
<i class="icon-circle-o-notch"></i>
<h4>Workflow</h4>
<p>A much more modern way of development, design, or both. We intend to make the whol
</div>
</li>
</ul>
</section>
.topics {
h3 {
@include section-title;
}
li {
float: left;
width: 33.33%;
i {
font-size: 3em;
}
h4 {
font-size: 1.5em;
padding: 1em 0;
font-weight: bold;
}
p {
line-height: 1.4;
color: #6e6e6e;
padding: 0 8em;
margin-bottom: 4em;
}
}
@include clearfix;
}
3 91
section-title mixin
@mixin section-title() {
font-size: 2em;
padding: 2em 0;
&:after {
content: "";
display: block;
background-color: #cccccc;
width: 2em;
height: .2em;
margin: .4em auto;
}
}
<section class="sample" id="week-1">

<ul>
<li>
<div class="thumb">
<img />
</div>
</li>
<li>
<div class="description">
<h4>Week 1: Find an agent</h4>
<p>In the very first week, we will learn how to setup the most modern and effective e
</p>
<p>
During the workshop, people learn how to implement the mockup from scrath, how to str
<p>
Also, we highly recommended people work in pairs, then they can learn from each other
</p>
</div>
3 92
</li>
</ul>
</section>
HTML
li {
float: left;
width: 50%;
.thumb {
width: 100%;
height: 30em;
overflow: hidden;
img {
width: 90%;
margin: 0 auto;
}
}
.description {
h4{
3 93
text-align: left;
padding-left: 1.5em;
font-size: 2em;
font-weight: bold;
}
p {
font-size: 1.5em;
line-height: 1.4;
color: #6e6e6e;
text-align: left;
padding: .5em 2em;
}
}
@include clearfix;
}
3 94
HTML
<ul>
<li>
<a href="http://icodeit.org/portfolio-timeline/" target="_blank" class="mask"></a
<img src="images/qiujuntao-showcase.png" alt="" class="case">
<article class="information">
<section class="detail">
<img src="images/qiujuntao-avator.jpg" class="avator">
<div class="contact">
<span class="name">Qiu Juntao</span>
<span class="role">Dev</span>
<time class="date">2014-11-28</time>
<p>My Portfolio</p>
</div>
<a href="#" class="like">
<div class="icon-heart"></div>
</a>
</section>
</article>
</li>
...
</ul>
article article
li {
3 95
float: left;
width: 33.33%;
position: relative;
height: 22em;
overflow: hidden;
.case {
width: 100%;
}
&:hover {
.mask {
top:0;
}
}
.mask {
display: block;
position: absolute;
top:-22em;
left:0;
height: 100%;
width: 100%;
opacity: .1;
}
}
33.33%3 mask
mask a mask
top -22em hover 0
information
.information {
position: absolute;
top:22em;
left:0;
width: 100%;
height: 100%;
opacity: .9;
text-align: left;
padding: 0 1em;
color: white;
h3 {
font-size: 2em;
padding: 1em 0;
}
.detail {
3 96
position: relative;
padding-top: 2em;
.avator {
position: absolute;
width: 3em;
height: 3em;
bottom: 0;
}
p {
padding: .5em 0 0 0;
font-size: 1.5em;
}
.contact {
margin-left: 4em;
.name {
font-weight: bold;
margin-right: .5em;
}
.role {
color: $light-text-color;
}
}
.like {
position: absolute;
font-size:2em;
bottom: 0;
right: 0;
color: white;
background-color: $heading-color;
border: 1px solid $heading-color;
padding: .2em;
&:hover {
background-color: white;
border: 1px solid transparent;
}
}
}
}
3 97
3 98
3 99
QQ
GIFFlash
1. GIF
2. JavaScriptDOM
3. Flash
CSS3
CSS
CSS3transitiontransformanimation
CSS3CSS :hover
:hover
<div class="circle"></div>
1 100
.circle
.circle {
width: 20em;
height: 20em;
border: 1px solid #c0c0c0;
box-shadow: 0 0 5px #c0c0c0;
border-radius: 50%;
background-color: yellowgreen;
}
:hover
.circle:hover {
background-color: orange;
}
1.
2.
3.
#element {
transition: <property> <duration> <timing-function> <delay>;
}
.circle {
width: 20em;
height: 20em;
border-radius: 50%;
transition: background-color 1s ease-in-out 0s;
1 101
background-color 1

all :
transition: all 1s ease-in-out 0s;
0s
4
CSS3
1. linear
2. ease
3. ease-in
4. ease-out
5. ease-in-out
cubic-bezier(x1, y1, x2, y2)
Cubic BezierCSS
1 102
CSS3
rotateskewscaletranslatematrix
transform: rotate(<angle>);
1 103
rotate(10deg) 10
.square {
margin: 0 5em;
width: 20em;
height: 20em;
}
xy
transform: skew(<x-angle>, <y-angle>);
.square {
transform: skew(10deg);
}
1 104
xy
transform: scale(<number>[, <number>]);
11xy
xy
transform: translate(<x-value>[, <y-value>]);
transform: translate(10px, 10px);
xy10
matrix
:hover
300px1
.circle {
transition: all 1s ease 0s;
}
.circle:hover {
background-color: orange;
1 105
transform: translate(300px);
}
.circle
:active
.circle:active {
background-color: orangered;
}
button
1.
2.
animation
@keyframes breath {
0% {
opacity: 1;
}
50% {
opacity: .3;
}
100% {
opacity: 1;
}
}
breath 0% 1 50% 0.3 100%

1 animation
.circle {
animation: breath 2s ease-in-out infinite;
}
1 106
animation
1. animation-delay
2. animation-direction
3. animation-duration
4. animation-iteration-count
5. animation-name
breath 2s ease-in-out
animation: breath 2s ease-in-out infinite;
@keyframes beat {
0% {
transform: scale(1);
}
50% {
}
100% {
}
}
.circle {
animation: beat 2s ease-in-out infinite;
}
GIF
1 107
DOM
<section class="typing">
<div class="typewritter"></div>
1 108
<div class="handlebar"></div>
<div class="paper"></div>
</section>
.typing {
background-color: #CBADDA;
width: 220px;
height: 220px;
border: none;
border-radius: 50%;
position: relative;
.typewritter {
position: absolute;
background-image: url('/images/typing/typewritter.png');
width: 144px;
height: 107px;
top: 120px;
left: 38px;
z-index: 3;
}
.handlebar {
position: absolute;
background-image: url('/images/typing/handlebar.png');
width: 169px;
height: 28px;
top: 108px;
left: 26px;
z-index: 1;
}
.paper {
position: absolute;
background-image: url('/images/typing/paper.png');
width: 127px;
height: 106px;
top: 50px;
left: 40px;
z-index:2;
}
}
.typing position
relative position absolute
top/left
1 109
@keyframes handlebar {
0% {
transform: translateX(0);
}
25% {
transform: translateX(10px);
}
50% {
}
75% {
transform: translateX(-10px);
}
100% {
}
}
.handlebar {
animation: handlebar .5s ease-in infinite;
1 110
80% {
}
75%80%
@keyframes paper {
0% {
transform: translateY(0);
}
30% {
transform: translateY(-10px);
}
50% {
}
60% {
}
80% {
}
90% {
}
100% {
}
}
.paper
.paper {
animation: paper 2s ease-out infinite;
}
1 111
@keyframes paper {
0% {
}
30% {
}
35% {
}
50% {
}
55% {
}
60% {
}
65% {
}
80% {
}
85% {
}
90% {
}
100% {
}
}
1 112
<section class="mag">
<div class="magazine"></div>
<div class="picture"></div>
<div class="yellow-bar"></div>
<div class="blue-bar"></div>
</section>
4CSS
.mag {
background-color: #6A9ACE;
width: 220px;
height: 220px;
border: none;
border-radius: 50%;
position: relative;
overflow: hidden;
.magazine {
position: absolute;
background-image: url('/images/dissemination-assets/magazine.png');
width: 139px;
height: 157px;
top: 36px;
left: 30px;
}
1 113
.picture {
position: absolute;
background-image: url('/images/dissemination-assets/pic.png');
width: 94px;
height: 88px;
top: 94px;
left: 108px;
}
.yellow-bar {
position: absolute;
background-image: url('/images/dissemination-assets/yellow.png');
width: 27px;
height: 9px;
top: 116px;
left: 166px;
}
.blue-bar {
position: absolute;
background-image: url('/images/dissemination-assets/blue.png');
width: 25px;
height: 14px;
top: 154px;
left: 164px;
}
}
GIF
30%30%70%
@keyframes right-jump {
0% {
top: -50px;
left: -150px;
}
15% {
transform: rotate(-20deg);
}
18% {
}
20% {
}
25% {
top: 36px;
1 114
left: 30px;
}
30% {
top: 36px;
left: 30px;
}
100% {
display: none;
}
}
15%20
overflowhidden18%
18225%25
30%0
rotate
transform-
origin bottom left
.magazine {
animation: right-jump 2s ease-in-out infinite;
transform-origin: bottom left;
}
@keyframes left-jump {
0% {
top: 100px;
left: 260px;
transform: rotate(0);
}
40% {
top: 100px;
left: 260px;
}
44% {
top: 95px;
left: 230px;
}
48% {
top: 90px;
left: 200px;
}
52% {
top: 85px;
1 115
left: 170px;
}
56% {
top: 90px;
left: 140px;
}
60% {
top: 96px;
left: 106px;
}
65% {
top: 94px;
left: 108px;
transform: rotate(0);
}
100% {
top: 94px;
left: 108px;
display: none;
}
}
@keyframes bar {
0% {
}
80% {
}
90% {
}
95% {
}
100% {
display: none;
}
}
80% sacle
0
.yellow-bar {
1 116
animation: bar 2s ease infinite;

}
.blue-bar {
animation: bar 2s ease infinite;
}
1 117
CSS
CSS
BootstrapFoundationPure CSS
2CSS 118

3 Web Designs in 3 Weeks

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

3 Web Designs in 3 Weeks

Uploaded by

Copyright:

Available Formats

3

Web Designs in 3 Weeks

@mixin radius($radius: 5px) {

$ gem install compass

$ compass create my-project

Sublime Package Control

Command + Shift + P install package

.item class item div $ index 1 10

HTML-CSS-JS Prettify HTML CSS JavaScript Mac OS X

Mac OS X python python HTTP

$ python -m SimpleHTTPServer 9999

$ git clone git@github.com:abruzzi/design-boilerplate.git mydesign

$ python -m SimpleHTTPServer 9999

EmmetHTML Find an agent

Google Font API Google Font

Open Sans Googlelink

Hero How it works

How it works HTML

<h3>Sell with the Best</h3>

HTML Lorem Sublime

style.css sass icomoon.scss style.scss

HTML i class icon-

HTML :before :after

$ git clone git@github.com:abruzzi/design-boilerplate.git design-1

origin git@github.com:abruzzi/design-boilerplate.git (fetch)

$ git remote remove origin

GithubRepo design-1 Repo

$ git remote add -u origin git@github.com:wumai/design-1.git

$ git checkout -b gh-pages

$ git push -u origin gh-pages

Twitters' New Face

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

article aside article aside

footer header section

box 0.5 ease-in-out

<li><a href="#" class="alert"></a></li>

TweetHTML5 article Tweet article

background-color: rgba(200, 120, 80, 0.2);

background-color: hsl(30, 100%, 50%);

hsl(200, 80%, 40%)

<link rel="stylesheet" media="screen and (max-width: 480px)" href="numbers-small.css" />

@media screen and (min-width: 1024px) {

Twitter new face

Hero Image Headline Headline

.hero section position

Find an agent 1,2,3 3

<section class="topics container">

<section class="sample" id="week-1">

transition: all 1s ease-in-out 0s;

cubic-bezier(x1, y1, x2, y2)

transform: skew(<x-angle>, <y-angle>);

transform: scale(<number>[, <number>]);

transform: translate(<x-value>[, <y-value>]);

transform: translate(10px, 10px);

breath 0% 1 50% 0.3 100%

animation: breath 2s ease-in-out infinite;

animation: bar 2s ease infinite;

You might also like