/*d'abord sachons que les commentaires sont ainsi encadres
comme en Javascript.
pour ce qui est de la methode @import je la connais dans python,
c'est pour utiliser des termes et methodes definies ailleurs ou
nous mene l'URL.*/
@import url(http://fonts.googleapis.com/css?family=Pacifico|Open+Sans|Montserrat);
/* Maintenant on commence a decorer le code html. Les choses du body auront des caracteristiques */
body, html {
width: 100%;/*Ici je ne sais pas pourquoi ca place la machine au milieu ou de cote, 100% c'est le milieu.*/
background-color: #9B8F89;
}
/*On voit que le titre calculateur est devance par un point.
Ceci nous indique que le mot qui suit est le nom d'une classe.
Donc si on veut manipuler une classe du fichier htlm, on met un point, puis le nom de la
classe et puis on ouvre l'accolade a l'interieur de laquelle sera mis tout ce qui concerne
ce titre.*/
.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.