@import url(http://fonts.googleapis.com/css?family=Pacifico|Open+Sans|Montserrat);
body, html {
width: 100%;
background-color: #9B8F89;
}
.calculator {
width: 250px;
height: 335px;
background-color: #F3EEE7;
margin: 0 auto;
border-top-left-radius: 80% 20px;
border-top-right-radius: 80% 20px;
border-bottom-left-radius: 80% 20px;
border-bottom-right-radius: 80% 20px;
box-shadow: inset 5px 0 10px -5px #635e61, inset -5px 0 10px -5px #635e61, inset 0px -5px 10px -2px #635e61, 0 0 1px 2px #635e61, 0 10px 20px 0 #494547;
text-align: center;
}
.calculator p#title {
padding-top: 10px;
margin-bottom: -10px;
color: #7d777b;
font-family: 'Pacifico';
}
.calculator p#tagline {
text-transform: uppercase;
color: #969194;
font-family: 'Open Sans';
font-size: .7em;
}
.calculator input[type='text'] {
background-color: #C7C7B0;
border: 1px solid #b2b292;
line-height: 40px;
width: 80%;
font-size: 2em;
direction: rtl;
font-family: 'Montserrat';
padding-right: 10px;
margin-bottom: 20px;
border-radius: 5px;
box-shadow: inset 0px -2px 10px #b2b292;
}
.calculator input[type='text']:focus {
outline: none;
}
.calculator .row {
display: block;
}
.calculator .row button {
width: 40px;
height: 30px;
border: 1px solid #4B4657;
border-top: 2px solid #7c748f;
background-image: -webkit-linear-gradient( top , #4B4657, #332f3b);
background-image: linear-gradient(to bottom, #4B4657, #332f3b);
color: white;
font-size: 1.1em;
border-radius: 20%;
border-top-left-radius: 80% 10px;
border-top-right-radius: 80% 10px;
border-bottom-left-radius: 100% 10px;
border-bottom-right-radius: 100% 10px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 8px;
box-shadow: inset 0 1px 4px #7c748f, inset 0 -4px 20px #332f3b, 0 3px 1px 0 #332f3b;
}
.calculator .row button:focus {
outline: 0;
}
.calculator .row button:active {
background-image: -webkit-linear-gradient( bottom , #4B4657, #332f3b);
background-image: linear-gradient(to top, #4B4657, #332f3b);
}
.calculator .row .ctrl {
border: 1px solid #CC4E5F;
border-top: 2px solid #e39da7;
background-image: -webkit-linear-gradient( top , #CC4E5F, #b33445);
background-image: linear-gradient(to bottom, #CC4E5F, #b33445);
box-shadow: inset 0 1px 4px #e39da7, inset 0 -4px 20px #b33445;
}
.calculator .row .ctrl:active {
background-image: -webkit-linear-gradient( bottom , #CC4E5F, #b33445);
background-image: linear-gradient(to top, #CC4E5F, #b33445);
}
.calculator .row .tall {
height: 65px;
float: right;
margin-right: 24px;
margin-left: -8px;
}
Apres avoir partiellement debroussaille la partie HTML on va essayer de passer en revue la partie CSS.
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.