Your Brand Color

Start thinking about a primary color you like and want to use in your future websites.

You can use a tool like this to generate a color scheme. Color Calculator

Floating Vs Inline-Block

• There are some gotchas with spacing inside inline-block: Why is there whitespace?
• 4 items at 100px
• Inline Block - Wraps
• Float - doesn't
• Result

Beautifying Code

Command Line

The Super Basics

Here's what you need to know for windows

• List contents of a directory - dir
• Change directory - cd (..,/)
• Print working directory - cd
• Create new directory - mkdir somename
• Create new file - echo > somename.txt

Tutorials

Windows CMD Tutorial

Mac Terminal Tutorial

CSS 3

CSS3 is the largest batch of changes to CSS.

• Rounded Corners
• Gradients
• Animations
• Advanced Selectors

Vendor Prefixes

Vendor prefixes are considered 'experimental' properties and should be used with caution.

   div{
        /* Safari 3-4, iOS 1-3.2, Android 1.6- */
        -webkit-border-radius: 12px;
        /* Firefox 1-3.6 */
        -moz-border-radius: 12px;
        /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
        border-radius: 12px;
    }

Rounded Corners

Rounded Corners will probably the most commonly used CSS3 property.

    .round {
        border-radius: 5px 10px 15px 20px; /* top left, top right, bottom right, bottom left */
    }
    .round {
        border-radius: 50%; /*Creates a circle if length equals height*/
    }

Rounded Corners for Buttons

See the Pen UA-ITR-Rounded Corners by Jon (@Middaugh) on CodePen.

Rounded Images

See the Pen eyamLw by Jon (@Middaugh) on CodePen.

Colors and Opacity

CSS3 opened up more possibilities for colors and opacity in our CSS

RGBA Colors

Red, Green, Blue, and Alpha

    p{
        background-color:rgba(255, 0, 0, 0.5); /*Red with 50% opacity*/
    }
    a{
        color:rgba(255, 0, 0, 0.5); /*Text will be red with 50% opacity */
    }

Element Opacity

You can change the full element opacity by using the opacity property.

    p{
        /*Red with 50% opacity*/
        background-color:#ff0000;
        opacity:0.5;
    }

In Action

See the Pen MrdYBx by Jon (@Middaugh) on CodePen.

Gradients

CSS gradients allow you to display a transition from one color to another. Gradients are one of the most vendor prefix heavy CSS properties we will use.

    .button{
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,7db9e8+100 */
        background: #1e5799; /* Old browsers */
        background: -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  #1e5799 0%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
    }

Gradients

See the Pen UA-ITR-Gradients by Jon (@Middaugh) on CodePen.

Descendant Selectors

Descendant selectors create a more specific groups of styled content.

    div p{
        color:#ff0000;
    }

Any paragraph inside of a div will have red text.

Example 1

See the Pen UA-ITR-Descendant Selectors by Jon (@Middaugh) on CodePen.

Example 2

See the Pen UA-ITR-Descendant by Jon (@Middaugh) on CodePen.

Links from today's slides:

Exercise