The Power of CSS3

ByJason Carton

CSS3 has now been around a while and the browser support has grown widely. It gives power to developers to create design elements without the need for using photoshop. .

Example:

.yourdiv {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

Border Radius
Border radius can be added to an element to add a rounded corner. You can choose any corner from one to all corners. You can even turn a square into a circle by setting your border radius to half the width of your object.
<div style=”
width: 150px;
height: 150px;
border-radius: 100px;
border: 3px solid #000000;
background-color: #5cdb55;“></div>
<div style=”
width: 150px;
height: 150px;
border-radius: 60px;
border: 3px solid #000000;
background-color: #db5555;“></div>
<div style=”
width: 150px;
height: 150px;
border-radius: 60px 60px 60px 0;
border: 3px solid #000000;
background-color: #dbb455;“></div>

Box Shadows
Box shadows can be used to replace the drop shadow that you would use in photoshop. You can change the colour, opacity and the direction of the shadow.
<div style=”
width: 150px;
height: 150px;
border-radius: 0 60px 60px 60px;
border: 3px solid #000000;
background-color: #9155db;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.9);“></div>
<div style=”
width: 150px;
height: 150px;
border-radius: 0 60px 0 60px;
border: 3px solid #000000;
background-color: #db55cd;
box-shadow: 5px 10px 5px 10px rgba(0, 0, 0, 2);“></div>
<div style=”
width: 150px;
height: 150px;
border-radius: 0 60px 60px 0;
border: 3px solid #000000;
background-color: #55d9db;
box-shadow: inset 10px 10px 5px 0px rgba(0,0,0,0.75);“></div>

Shadow Box
.tpc_adv_box {
width:100%;
height:200px;
background:#898989;
margin: 0 auto 80px auto;
background-image: url(‘https://www.generateuk.co.uk/wp-content/uploads/2016/02/subscribe_HOME_BANNER-1.png’);
background-repeat: no-repeat;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.shadw {
position: relative;
}
.shadw:after {
transform: rotate(8deg);
right: 10px;
left: auto;
}		 .tpc_adv_box.shadw p {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
padding-top: 70px;
margin-top: 0;
font-size: 40px;
color: #FFFFFF;
-moz-text-shadow: 2px 5px 3px #666666;
-webkit-text-shadow: 2px 5px 3px #666666;
-o-text-shadow: 2px 5px 3px #666666;
text-shadow: 2px 5px 3px #666666;
}
.shadw:before,
.shadw:after {
z-index: -1;
position: absolute;
content: “”;
bottom: 25px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
box-shadow: 0 35px 20px #777;
transform: rotate(-8deg);
}

Creating Buttons
Below are a few practical examples of how to use border-radius and box-shadow to create buttons for use on your website.
Send

.tpc_button_one {
text-align:center;
width:130px;
height:20px;
padding:10px;
border-radius: 10px;
border:3px solid #000000;
background-color:#CCCCCC;
box-shadow: 1px rgba(0, 0, 0, 1);
font-size: 20px;
line-height:20px;
font-weight:700;
font-family: Arial, Helvetica, sans-serif;
cursor: pointer;
}

.tpc_button_one:hover {
color: #FFFFFF;
box-shadow: inset 2px 1px 2px 1px rgba(0, 0, 0, 0.8);
}

Go

.tpc_button_two {
text-align:center;
width:150px;
height:90px;
padding:60px 0 0 0;
border-radius: 75px;
border:3px solid #000000;
background-color:red;
box-shadow: 1px rgba(0, 0, 0, 1);
font-size: 40px;
line-height:20px;
font-weight:700;
font-family: Arial, Helvetica, sans-serif;
cursor: pointer;
}

.tpc_button_two:hover {
color: #FFFFFF;
background-color:green;
box-shadow: inset 2px 1px 2px 1px rgba(0, 0, 0, 0.8);
}

Enter

.tpc_button_three {
text-align:center;
width:130px;
height:20px;
padding:10px;
border-radius: 5px 0 5px 0;
border:0px solid #000000;
background-color: #06C;
box-shadow: 1px rgba(0, 0, 0, 1);
font-size: 20px;
line-height:20px;
font-weight:700;
font-family: Arial, Helvetica, sans-serif;
cursor: pointer;
}

.tpc_button_three:hover {
color: #FFFFFF;
background-color: #06E;
box-shadow: 2px 1px 2px 1px rgba(0, 0, 0, 0.8);
}