US13-Implement CSS3 elements to templates
Description
As a developer I wanted to define the CCS3 classes we will use and give examples of how they should be used, so that we can remain consistent when developing new pages.
Acceptance Criteria
- Develop CSS3 classes ande get the teams approval.
- Add styles to templates for review by Luxury Hotel Supplies
Tasks
- Create and Modify the style sheets - 2 hrs
- Review the style sheets with the team - 30 min
- Review with Luxury Hotel Supplies - TBD
Notes
Demo of CSS3 border radius:
Click here and see the "ADD TO CART" button on the product detail page for an example.
Example of CSS3 border radius:
a.button, input.button {
cursor: pointer;
color:#fff;
font-size: 13px;
font-weight: bold;
background:#4D5F5A;
border:none;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
box-shadow:1px 1px 2px rgba(0, 0, 0, 0.25);
-moz-box-shadow:1px 1px 2px rgba(0, 0, 0, 0.25);
-webkit-box-shadow:1px 1px 2px rgba(0, 0, 0, 0.25);
border-radius: 25px;
}
Demo of CSS3 transitions:
Click here and hover the mouse over the login information in the top right corner to see the transition.
Example of CSS3 transitions:
#loggedin-box span{
position:relative;
display:block;
padding:0 10px 0 10px;
z-index:1014;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
Demo of CSS3 box shadow:
Click here and hover the mouse over the login information in the top right corner to see the shadow.
Example of CSS3 box shadow:
#loggedin-box ul{
display:none;
width: 206px;
position:absolute;
top:65px; left:0;
background:#fff;
box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.25);
z-index:1013; padding:10px;
}