Summer Course 2013: Day 10 Make Your Own Website

Feedback

Moodle

Code Editor

PHPStorm

PhpStorm

I will give you an academic license code in class.

Brackets

Brakets

Codenvy

CSS3 Columns

HTML

<!-- p.threecol>lorem100 -->
<p class="threecol">Pellentesque habitant morbi tristique senectus et netus et malesuada...</p>

CSS

/* ctl+cmd+x 
column-count: 3;
column-gap:20px;
 */
p.threecol {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap:20px;
    -moz-column-gap:20px;
    column-gap:20px;      
}

CSS3 Transitions

Demo

HTML

CSS After typing the following, ctl+cmd+x to use prefixr.

#timings_demo {
    position:relative;
    width:530px;
    height:530px;
    margin:0 auto 10px;
    border:1px #aaa solid;
    padding:10px;
}
.test_box {
    font-size:12px;
    position:relative;
    width:60px;
    height:60px;
    margin-bottom:10px;
    background-color:#eee;
}
.test_box p {
    text-align:center;
    padding-top:4px;
}
#ease.test_box {
    transition: all 4s ease;    
    border:1px #f00 solid;
}
#ease-in.test_box {
    transition: all 4s ease-in;    
    border:1px #0f0 solid;
}
#ease-out.test_box {
    transition: all 4s ease-out;    
    border:1px #00f solid;
}
#ease-in-out.test_box {
    transition: all 4s ease-in-out;    
    border:1px #ff0 solid;
}
#linear.test_box {
    transition: all 4s linear;    
    border:1px #f0f solid;
}
#custom.test_box {
    transition: all 4s cubic-bezier(1.000, 0.835, 0.000, 0.945);    
    border:1px #0ff solid;
}
#negative.test_box {
    transition: all 4s cubic-bezier(1.000, -0.530, 0.405, 1.425);    
    border:1px #000 dotted;
}
#timings_demo:hover .test_box, #timings_demo.hover_effect .test_box {
    border-radius:30px;
    transform: rotate(720deg);    
    margin-left:420px;
    background-color:#fff;
}

Final CSS

More demo

CSS3 Transform

Demo 1 Images

Prepare four of 450 x 281px.

HTML

CSS

#controls, #transparency {
    text-align:center;
}
#controls span {
    padding-right:2em;
    cursor:pointer;
}

#cubeCarousel {
    perspective: 800;
    perspective-origin: 50% 100px;
    margin:100px auto 20px auto;
    width:450px;
    height:400px;
}

#cubeCarousel #cubeSpinner {
    position: relative;
    margin: 0 auto;
    height: 281px;
    width: 450px;
    transform-style: preserve-3d;
    transform-origin: 50% 100px 0;
    transition:all 1.0s ease-in-out;
}

#cubeCarousel #Ycube,#cubeCarousel #Zcube {
    transform-style: preserve-3d;
}

#cubeCarousel .face {
    position: absolute;
    height: 281px;
    width: 450px;
    padding: 0px;
}

#cubeSpinner .one {
    transform: translateZ(225px);
}

#cubeSpinner .two {
    transform: rotateY(90deg) translateZ(225px);
}

#cubeSpinner .three {
    transform: rotateY(180deg) translateZ(225px);
}

#cubeSpinner .four {
    transform: rotateY(-90deg) translateZ(225px);
}
.trans {
    opacity:0.7;
}

Then use prefixr to get the following.

Demo 2

Images

Prepare two of 320 x 420px.

HTML

CSS

/* simple */
.flip-container {
    /* prefixr not working for this */
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    perspective: 1000;
    border: 1px solid #ccc;
}

    
.flip-container:hover .flipper, .flip-container.hover .flipper, #flip-toggle.flip .flipper {
    transform: rotateY(180deg);
}

.flip-container, .front, .back {
    width: 320px;
    height: 420px;
}

.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

.front, .back {
    /* prefixr not working for this */
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

.front {
    background: lightgreen;
    z-index: 2;
}

.back {
    background: lightblue;
    transform: rotateY(180deg);
}

/* vertical */
.vertical.flip-container {
    position: relative;
}

.vertical .back {
    transform: rotateX(180deg);
}

.vertical.flip-container .flipper {
    transform-origin: 100% 213.5px;
}

.vertical.flip-container:hover .flipper {
    transform: rotateX(-180deg);
}

Watch out that there are two properties does not work with Prefixr. You have to write the code. Then use prefixr to get the following.

jQuery Accordion

Download source files from Theming JQuery UI Accordion

JqueryMobile

jQueryMobile

Copy-and-Paste Snippet for CDN-hosted files (recommended):

Example

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>