CSS3 - A Powerful Tool

Customizing User Interface Elements

September 10, 2016

With the creation of CSS3, User Interface has become more robust with or without JavaScript.

CSS3 has many functions that will assist in creating the illusion or actual movment of an element.

Supported Browsers

  • Chrome
  • Firefox
  • Safari
  • Internet Explorer
  • Microsoft Edge

CSS3 Gradient - Creating Movement

View of before and after interaction state.

Try It!


    

<section id="radio">
    <div class="tutorials">
        <div class="row">
            <div class="col-lg-6">
                <h3>User Interface - Button</h3>
            </div>

            <div class="example">
                <div class="col-lg-6">
                    <p>View of before and after interaction state.</p>
                    <div class="sample">
                        <div class="col-sm-2">
                            <div id="radio01">
                                <div class="radio01-inside">
                                    <div class="radio01-action"></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-2">
                            <div id="radio02">
                                <div class="radio02-inside after">
                                    <div class="radio02-action after"></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-2">
                            <div id="radio03">
                                <div class="radio03-inside">
                                    <div class="radio03-action"></div>
                                </div>
                                <p>Try It!</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

    
    
    

    

#radio01, #radio02, #radio03 {
width: 80px;
height: 80px;
border-radius: 50px;
background: rgba(255,252,238,1);
background: linear-gradient(rgba(241,235,210,1), rgba(255,252,238,1));
background: -webkit-linear-gradient(rgba(241,235,210,1), rgba(255,252,238,1));
background: -o-linear-gradient(rgba(241,235,210,1), rgba(255,252,238,1));
background: -moz-linear-gradient(rgba(241,235,210,1), rgba(255,252,238,1));
box-shadow: 0 0 5px rgba(158,151,119,1);
}

#radio02 {
margin-left: 40px;
}

#radio03 {
margin-left: 150px;
}

#radio03 p {
padding-top: 30px;
text-align: center;
}

.radio01-inside, .radio02-inside, .radio03-inside {
position: relative;
top: 9%;
left: 8%;
width: 80%;
height: 80%;
border-radius: 50px;
background: rgba(241,235,210,1);
background: linear-gradient(135deg,rgba(241,235,210,1), rgba(255,252,238,1));
background: -webkit-linear-gradient(135deg,rgba(241,235,210,1), rgba(255,252,238,1));
background: -o-linear-gradient(135deg,rgba(241,235,210,1), rgba(255,252,238,1));
background: -moz-linear-gradient(135deg,rgba(241,235,210,1), rgba(255,252,238,1));
box-shadow: 3px 3px 3px rgba(158,151,119,1);
}

.radio01-inside-after, .radio02-inside.after, .radio03-inside.after {
position: relative;
top: 10%;
left: 9%;
width: 80%;
height: 80%;
border-radius: 50px;
background: rgba(241,235,210,1);
background: linear-gradient(135deg,rgba(255,252,238,1), rgba(199,192,160,1));
background: -webkit-linear-gradient(135deg,rgba(255,252,238,1), rgba(199,192,160,1));
background: -o-linear-gradient(135deg,rgba(255,252,238,1), rgba(199,192,160,1));
background: -moz-linear-gradient(135deg,rgba(255,252,238,1), rgba(199,192,160,1));
box-shadow: 0 0 5px rgba(158,151,119,1);
}

.radio01-action, .radio02-action, .radio03-action {
position: relative;
top: 30%;
left: 30%;
width: 40%;
height: 40%;
border-radius: 50px;
background: rgba(255,255,255,1);
box-shadow: inset 0 0 30px rgba(158,151,119,1);
}

.radio01-action.after, .radio02-action.after, .radio03-action.after {
position: relative;
top: 30%;
left: 30%;
width: 40%;
height: 40%;
border-radius: 50px;
background: rgba(255,255,255,1);
box-shadow: inset 0 0 30px rgba(18,114, 18,1);
}

    
    
    

    

$(document).ready(function() {
$("#radio03").click(function () {
$('.radio03-inside').toggleClass('after');
$('.radio03-action').toggleClass('after');

})
});

    
    
    

Customizing User Interface Elements - Switch

September 10, 2016

Once the understanding of how one element can be customized, we can easily create additional UI elements with minimal effort.

In this tutorial the gradient continues to be used. An additional JavaScript function is used to swith the word "Off" and "On".

Supported Browsers

  • Chrome
  • Firefox
  • Safari
  • Internet Explorer
  • Microsoft Edge

User Interface - Slide

View of before and after interaction state.

OFF

ON

OFF

Try It!


    

<section id="slide">
    <div class="tutorials">
        <div class="example">
            <div class="col-lg-6">
                <p>Side by side view of before and after interaction state.</p>
                <div class="sample">
                    <div class="col-sm-2">
                        <div id="slide01">
                            <div class="slide01-inside">
                                <p>OFF</p>
                                <div class="slide01-action"></div>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-2">
                        <div id="slide02">
                            <div class="slide02-inside right">
                                <p>ON</p>
                                <div class="slide02-action right"></div>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-2">
                        <div id="slide03">
                            <div class="slide03-inside">
                                <p class="off">OFF</p>
                                <div class="slide03-action"></div>
                            </div>
                            <p style="padding-top: 20px">Try It!</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


    
    
    

    

#slide01, #slide02, #slide03 {
width: 120px;
height: 40px;
padding-left: 20%;
border-radius: 5px;
background: rgba(255,252,238,1);
background: linear-gradient(rgba(241,235,210,1), rgba(255,252,238,1));
background: -webkit-linear-gradient(rgba(241,235,210,1), rgba(255,252,238,1));
background: -o-linear-gradient(rgba(241,235,210,1), rgba(255,252,238,1));
background: -moz-linear-gradient(rgba(241,235,210,1), rgba(255,252,238,1));
box-shadow: 0 0 5px rgba(158,151,119,1);
}

#slide02 {
margin-left: 60px;
}

#slide03 {
margin-left: 150px;
}

#slide03 p {
text-align: center;
}


.slide01-inside, .slide02-inside, .slide03-inside {
position: relative;
top: 8%;
margin-left: -2px;
width: 40%;
height: 80%;
border-radius: 5px;
background: rgba(241,235,210,1);
background: linear-gradient(135deg,rgba(255,252,238,1), rgba(199,192,160,1));
background: -webkit-linear-gradient(135deg,rgba(255,252,238,1), rgba(199,192,160,1));
background: -o-linear-gradient(135deg,rgba(255,252,238,1), rgba(199,192,160,1));
background: -moz-linear-gradient(135deg,rgba(255,252,238,1), rgba(199,192,160,1));
box-shadow: 3px 3px 3px rgba(158,151,119,1);
color: rgba(158,151,119,1);
}

.slide01-inside p, .slide02-inside p, .slide03-inside p{
position: relative;
padding-top: 8px;
padding-left: 60px;
color: rgba(158,151,119,1);
font-weight: 800;
}


.slide01-inside.right, .slide02-inside.right, .slide03-inside.right {
position: relative;
top: 8%;
left: 52%;
width: 40%;
height: 80%;
border-radius: 5px;
background: linear-gradient(135deg,rgba(255,252,238,1), rgba(199,192,160,1));
background: -webkit-linear-gradient(135deg,rgba(255,252,238,1), rgba(199,192,160,1));
background: -o-linear-gradient(135deg,rgba(255,252,238,1), rgba(199,192,160,1));
background: -moz-linear-gradient(135deg,rgba(255,252,238,1), rgba(199,192,160,1));
box-shadow: 4px 3px 3px rgba(158,151,119,1);
color:rgba(255,255,255,1);
}

.slide01-inside.right p, .slide02-inside.right p, .slide03-inside.right p{
position: relative;
padding-top: 7px;
margin-left: -100px;
color: rgba(42,143, 42,1);
font-weight: 800;
}

.slide03-inside.right p{
margin-left: -160px;
}

.slide01-action, .slide02-action, .slide03-action {
position: relative;
margin-top: -30px;
left: 15%;
width: 70%;
height: 40%;
border-radius: 5px;
background: rgba(255,255,255,1);
box-shadow: inset 0 0 30px rgba(158,151,119,1);
}

.slide01-action.right, .slide02-action.right, .slide03-action.right {
position: relative;
margin-top: -30px;
left: 15%;
width: 70%;
height: 40%;
border-radius: 5px;
background: rgba(255,255,255,1);
box-shadow: inset 0 0 30px rgba(18,114, 18,1);
}


.slide01-action.right p, .slide02-action.right p, .slide03-action.right p{
position: relative;
padding-top: 7px;
margin-left: -100px;
color: rgba(158,151,119,1);
font-weight: 800;
}


    
    
    

    

$(document).ready(function() {
$('#slide03').click(function () {
$('.slide03-inside').toggleClass('right');
$('.slide03-inside p').toggleClass('right');

var currentText = $('.slide03-inside p').text();
var newText;

if (currentText === 'ON') {
newText = 'OFF';
} else {
newText = 'ON';
}

$('.slide03-inside p').text(newText);
$('.slide03-action').toggleClass('right');
});
});