[Tutorial]Criando seu Site de WoW #3

Aula #3
créditos - t[]b@_$ERB|@
Nome - Elaborando o CSS.

Primeiramente,
vamos até a pagina html.php,
procure por:

Código:


 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

Abaixo adicione

Código:


   <link rel="stylesheet" href="./css/segundo.css" />
   <link rel="stylesheet" href="./css/designer.css" />


Vamos até a pagina obrigado.php

procure por:

Código:

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

Abaixo adicione

Código:

<link rel="stylesheet" href="./css/segundo.css" />
   <link rel="stylesheet" href="./css/designer.css" />


Vamos até a pagina Error.php,
procure por:

Código:

          <script

src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

Abaixo adicione:

Código:

   <link rel="stylesheet" href="./css/segundo.css" />
   <link rel="stylesheet" href="./css/designer.css" />


Pronto,
agora o nosso site vai procurar o css,
as div's ja foram criadas nas paginas para não prolongar nossas aulas.

agora ,
abra um novo projeto ,
e adicione o seguinte código.

Código:

/* Background cores e Font*/
body {
   background: #272b2d;
   font: 14px/1.6 'Helvetica Neue', Helvetica, Arial, sans-serif;
   color: #fff;
}

h1 {
   font: 42px/1.238 'Oswald', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   color: #fff;
   text-align: center;
   margin: 20px 0;
}
/* Cada navegador terá a sua "forma" para evitar bugs */
form.general {
   width: 660px;
   padding: 40px 20px;
   border: 2px solid #666;
   margin: 60px auto;
   overflow: hidden;
   background-color: #333;
   background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, #1f2224), color-stop(50%, #373c3f), color-stop(100%, #1f2224)); /* Saf4+, Chrome */
   background-image: -webkit-linear-gradient(left, #1f2224, #373c3f, #1f2224); /* Chrome 10+, Saf5.1+, iOS 5+ */
   background-image:    -moz-linear-gradient(left, #1f2224, #373c3f, #1f2224); /* FF3.6 */
   background-image:    -ms-linear-gradient(left, #1f2224, #373c3f, #1f2224); /* IE10 */
   background-image:      -o-linear-gradient(left, #1f2224, #373c3f, #1f2224); /* Opera 11.10+ */
   background-image:        linear-gradient(left, #1f2224, #373c3f, #1f2224);
   -pie-background:          linear-gradient(left, #1f2224, #373c3f, #1f2224); /* IE6-IE9 */
   -moz-border-radius:    8px;
   -webkit-border-radius: 8px;
   border-radius:        8px;
   -moz-box-shadow:    0 1px 2px rgba(0, 0, 0, 0.9);
   -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
   box-shadow:        0 1px 2px rgba(0, 0, 0, 0.9);
   behavior: url(../include/PIE.htc);
}

/* Os labels de textos */
label {
   margin-right: 10px;
   float: left;
   clear: both;
   width: 250px;
   color: #fff;
   font-size: 14px;
   font-weight: bold;
}

label span {
   font-size: 12px;
   color: #999;
   font-weight: normal;
}

/* Textbox nas áreas de texto */
.form-input {
   float: left;
   width: 300px;
   height: 24px;
   padding: 6px 10px;
   margin-bottom: 40px;
   font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
   color: #fff;
   background: #4c4c4c;
   border: 1px solid #222;
   outline: none;
   -moz-border-radius:    8px;
   -webkit-border-radius: 8px;
   border-radius:        8px;
   -moz-box-shadow:    inset 0 0 1px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.1);
   -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.1);
   box-shadow:        inset 0 0 1px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.1);
   -moz-background-clip:    padding;
   -webkit-background-clip: padding-box;
   background-clip:        padding-box;
   -moz-transition:    all 0.4s ease-in-out;
   -webkit-transition: all 0.4s ease-in-out;
   -o-transition:      all 0.4s ease-in-out;
   -ms-transition:    all 0.4s ease-in-out;
   transition:        all 0.4s ease-in-out;
   behavior: url(../include/PIE.htc);
}

textarea.form-input {
   height: 200px;
   width: 350px;
   overflow: auto;
}

.select-wrapper {
   width: 250px;
   float: left;
   margin-bottom: 40px;
   overflow: hidden;
   position: relative;
}

p.option-label {
   float: left;
   clear: both;
   margin-right: 10px;
   width: 250px;
   font-size: 14px;
   font-weight: bold;
}

div.option-group{
   float: left;
   width: 300px;
   margin-bottom: 40px;
}

.option-group input[type=radio], .option-group input[type=checkbox] {
   float: left;
   clear: both;
   opacity: 0;
   outline: none;
}

.option-group label {
   width: 260px;
   margin: 0 0 20px 10px;
   float: left;
   clear: none;
   position: relative;
   line-height: 1;
   font-weight: normal;
}


/* os focos style */
.form-input:focus {
   border: 1px solid #7fbbf9;
   -moz-box-shadow:    inset 0 0 1px rgba(0, 0, 0, 0.7), 0 0 3px #7fbbf9;
   -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.7), 0 0 3px #7fbbf9;
   box-shadow:        inset 0 0 1px rgba(0, 0, 0, 0.7), 0 0 3px #7fbbf9;
}

/* O design para quando chamar a tela erro */
.form-input:-moz-ui-invalid {
   border: 1px solid #e00;
   -moz-box-shadow:    inset 0 0 1px rgba(0, 0, 0, 0.7), 0 0 3px #e00;
   -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.7), 0 0 3px #e00;
   box-shadow:        inset 0 0 1px rgba(0, 0, 0, 0.7), 0 0 3px #e00;
}

.form-input.invalid {
   border: 1px solid #e00;
   -moz-box-shadow:    inset 0 0 1px rgba(0, 0, 0, 0.7), 0 0 3px #e00;
   -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.7), 0 0 3px #e00;
   box-shadow:        inset 0 0 1px rgba(0, 0, 0, 0.7), 0 0 3px #e00;
}


/* o botão registrar-se */
.form-btn {
   clear: both;
   float: left;
   padding: 0 15px;
   height: 30px;
   font: bold 12px 'Helvetica Neue', Helvetica, Arial, sans-serif;
   text-align: center;
   color: #fff;
   text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
   cursor: pointer;
   border: 1px solid #0d3d6a;
   outline: none;
   position: relative;
   background-color: #1d83e2;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#1d83e2), to(#0d3d6a)); /* Saf4+, Chrome */
   background-image: -webkit-linear-gradient(top, #1d83e2, #0d3d6a); /* Chrome 10+, Saf5.1+, iOS 5+ */
   background-image:    -moz-linear-gradient(top, #1d83e2, #0d3d6a); /* FF3.6 */
   background-image:    -ms-linear-gradient(top, #1d83e2, #0d3d6a); /* IE10 */
   background-image:      -o-linear-gradient(top, #1d83e2, #0d3d6a); /* Opera 11.10+ */
   background-image:        linear-gradient(top, #1d83e2, #0d3d6a);
   -pie-background:          linear-gradient(top, #1d83e2, #0d3d6a); /* IE6-IE9 */
   -moz-border-radius:    16px;
   -webkit-border-radius: 16px;
   border-radius:        16px;
   -moz-box-shadow:    inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.7);
   -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.7);
   box-shadow:        inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.7);
   -moz-background-clip:    padding;
   -webkit-background-clip: padding-box;
   background-clip:        padding-box;
   behavior: url(../include/PIE.htc);
}

.form-btn:active {
   border: 1px solid #1d83e2;
   background-color: #0d3d6a;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#0d3d6a), to(#1d83e2)); /* Saf4+, Chrome */
   background-image: -webkit-linear-gradient(top, #0d3d6a, #1d83e2); /* Chrome 10+, Saf5.1+, iOS 5+ */
   background-image:    -moz-linear-gradient(top, #0d3d6a, #1d83e2); /* FF3.6 */
   background-image:    -ms-linear-gradient(top, #0d3d6a, #1d83e2); /* IE10 */
   background-image:      -o-linear-gradient(top, #0d3d6a, #1d83e2); /* Opera 11.10+ */
   background-image:        linear-gradient(top, #0d3d6a, #1d83e2);
   -pie-background:          linear-gradient(top, #0d3d6a, #1d83e2); /* IE6-IE9 */
   -moz-box-shadow:    inset 0 0 2px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.1);
   -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.1);
   box-shadow:        inset 0 0 2px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.1);
}

input[type=submit]::-moz-focus-inner {
   border: 0;
   padding: 0;
}



/****** Design das chekbox ******/

.option-group.check label:before, .ie .option-group.check label .before {
   content: '';
   position: absolute;
   top: -1px;
   left: -30px;
   width: 15px;
   height: 15px;
   background-color: #444;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#343434)); /* Saf4+, Chrome */
   background-image: -webkit-linear-gradient(top, #444444, #343434); /* Chrome 10+, Saf5.1+, iOS 5+ */
   background-image:    -moz-linear-gradient(top, #444444, #343434); /* FF3.6 */
   background-image:    -ms-linear-gradient(top, #444444, #343434); /* IE10 */
   background-image:      -o-linear-gradient(top, #444444, #343434); /* Opera 11.10+ */
   background-image:        linear-gradient(top, #444444, #343434);
   -pie-background:          linear-gradient(top, #444444, #343434); /* IE6-IE9 */
   border: 1px solid #666;
   -moz-border-radius:    3px;
   -webkit-border-radius: 3px;
   border-radius:        3px;
   -moz-box-shadow:    0 1px 0 rgba(0, 0, 0, 0.7);
   -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
   box-shadow:        0 1px 0 rgba(0, 0, 0, 0.7);
   -pie-watch-ancestors: 1;
   behavior: url(../nclude/PIE.htc);
}

.ie .option-group.check label:before {
   display: none;
}

.option-group.check input[type=checkbox]:checked + label:after, .ie .option-group.check label.checked .after {
   content: '';
   position: absolute;
   top: 2px;
   left: -24px;
   width: 3px;
   height: 8px;
   border-bottom: 2px solid #ddd;
   border-right: 2px solid #ddd;
   -moz-transform:    rotate(45deg);
   -webkit-transform: rotate(45deg);
   -o-transform:      rotate(45deg);
   -ms-transform:    rotate(45deg);
   transform:        rotate(45deg);
   filter: progid:DXImageTransform.Microsoft.Matrix(  /* IE6ÐIE9 */
                  M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand');
    zoom: 1;
}

.ie .option-group.check label.checked .after {
   left: -26px;
}

.option-group.check input[type=checkbox]:checked + label:before, .ie .option-group.check label.checked .before {
   background-color: #3c3c3c;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#343434), to(#444444)); /* Saf4+, Chrome */
   background-image: -webkit-linear-gradient(top, #343434, #444444); /* Chrome 10+, Saf5.1+, iOS 5+ */
   background-image:    -moz-linear-gradient(top, #343434, #444444); /* FF3.6 */
   background-image:    -ms-linear-gradient(top, #343434, #444444); /* IE10 */
   background-image:      -o-linear-gradient(top, #343434, #444444); /* Opera 11.10+ */
   background-image:        linear-gradient(top, #343434, #444444);
   -pie-background:          linear-gradient(top, #343434, #444444); /* IE6-IE9 */
   -moz-box-shadow:    inset 0 1px 2px rgba(0, 0, 0, 0.7);
   -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7);
   box-shadow:        inset 0 1px 2px rgba(0, 0, 0, 0.7);
}




/****** Designer do botão rádio ******/

.option-group.radio label:before, .ie .option-group.radio label .before {
   content: '';
   position: absolute;
   top: -2px;
   left: -30px;
   width: 15px;
   height: 15px;
   background-color: #444;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#343434)); /* Saf4+, Chrome */
   background-image: -webkit-linear-gradient(top, #444444, #343434); /* Chrome 10+, Saf5.1+, iOS 5+ */
   background-image:    -moz-linear-gradient(top, #444444, #343434); /* FF3.6 */
   background-image:    -ms-linear-gradient(top, #444444, #343434); /* IE10 */
   background-image:      -o-linear-gradient(top, #444444, #343434); /* Opera 11.10+ */
   background-image:        linear-gradient(top, #444444, #343434);
   -pie-background:          linear-gradient(top, #444444, #343434); /* IE6-IE9 */
   border: 1px solid #666;
   -moz-border-radius:    10px;
   -webkit-border-radius: 10px;
   border-radius:        10px;
   -moz-box-shadow:    0 1px 0 rgba(0, 0, 0, 0.7);
   -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
   box-shadow:        0 1px 0 rgba(0, 0, 0, 0.7);
   -moz-background-clip:    padding;
   -webkit-background-clip: padding-box;
   background-clip:        padding-box;
   -pie-watch-ancestors: 1;
   behavior: url(../include/PIE.htc);
}

.ie .option-group.radio label:before {
   display: none;
}

.option-group.radio input[type=radio]:checked + label:after, .ie .option-group.radio label .after {
   content: '';
   position: absolute;
   top: 3px;
   left: -25px;
   width: 7px;
   height: 7px;
   background: #ccc;
   -moz-border-radius:    7px;
   -webkit-border-radius: 7px;
   border-radius:        7px;
   behavior: url(../include/PIE.htc);   
}

.ie .option-group.radio label:after, .ie .option-group.radio label .after  {
   display: none;
   border-radius: 0;
}

.ie .option-group.radio label.checked .after {
   display: block;
   border-radius: 7px;
}

.option-group.radio input[type=radio]:checked + label:before, .ie .option-group.radio label.checked .before {
   background-color: #3c3c3c;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#343434), to(#444444)); /* Saf4+, Chrome */
   background-image: -webkit-linear-gradient(top, #343434, #444444); /* Chrome 10+, Saf5.1+, iOS 5+ */
   background-image:    -moz-linear-gradient(top, #343434, #444444); /* FF3.6 */
   background-image:    -ms-linear-gradient(top, #343434, #444444); /* IE10 */
   background-image:      -o-linear-gradient(top, #343434, #444444); /* Opera 11.10+ */
   background-image:        linear-gradient(top, #343434, #444444);
   -pie-background:          linear-gradient(top, #343434, #444444); /* IE6-IE9 */
   -moz-box-shadow:    inset 0 1px 2px rgba(0, 0, 0, 0.7);
   -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7);
   box-shadow:        inset 0 1px 2px rgba(0, 0, 0, 0.7);
}




/****** Selecionar a box  ******/

.select-wrapper {
   background-color: #444;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#646464), to(#343434)); /* Saf4+, Chrome */
   background-image: -webkit-linear-gradient(top, #646464, #343434); /* Chrome 10+, Saf5.1+, iOS 5+ */
   background-image:    -moz-linear-gradient(top, #646464, #343434); /* FF3.6 */
   background-image:    -ms-linear-gradient(top, #646464, #343434); /* IE10 */
   background-image:      -o-linear-gradient(top, #646464, #343434); /* Opera 11.10+ */
   background-image:        linear-gradient(top, #646464, #343434);
   -pie-background:          linear-gradient(top, #646464, #343434); /* IE6-IE9 */
   -moz-border-radius:    5px;
   -webkit-border-radius: 5px;
   border-radius:        5px;
   -moz-box-shadow:    0 1px 2px rgba(0, 0, 0, 0.7);
   -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
   box-shadow:        0 1px 2px rgba(0, 0, 0, 0.7);
   behavior: url(../include/PIE.htc);
}

.selectTop {
   position: absolute;
   top: 0;
   left:0;
   bottom: 0;
   right: 0;
   padding: 6px 10px;
}

.select-wrapper:before {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   width: 20px;
   height: 100%;
   pointer-events: none;
   background-color: #444;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#646464), to(#343434)); /* Saf4+, Chrome */
   background-image: -webkit-linear-gradient(top, #646464, #343434); /* Chrome 10+, Saf5.1+, iOS 5+ */
   background-image:    -moz-linear-gradient(top, #646464, #343434); /* FF3.6 */
   background-image:    -ms-linear-gradient(top, #646464, #343434); /* IE10 */
   background-image:      -o-linear-gradient(top, #646464, #343434); /* Opera 11.10+ */
   background-image:        linear-gradient(top, #646464, #343434);
   -moz-border-radius:    5px;
   -webkit-border-radius: 5px;
   border-radius:        5px;
}

.select-wrapper:after {
   content: '';
   position: absolute;
   top: 50%;
   right: 10px;
   margin-top: -3px;
   border: 6px solid transparent;
   border-top: 6px solid #ccc;
   pointer-events: none;
}

.ie .select-wrapper:before, .ie9 .select-wrapper:before {
   display: none;
}

select {
   width: 240px;
   height: 24px;
   padding: 8px 0 4px 10px;
   border: 0;
   background: transparent none;
   outline: none;
   font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
   color: #fff;
   -moz-appearance:    none;
   -webkit-appearance: none;
   appearance:        none;
   -moz-box-sizing:    content-box;
    -webkit-box-sizing: content-box;
    box-sizing:        content-box;
}

select::-moz-focus-inner {
   border: 0;
}

select option {
   background: #3c3c3c none;
   height: 24px;
   width: 100%;
   padding: 10px 0 2px 10px;
   border: 0;
   border-bottom: 1px solid #141414;
   border-top: 1px solid #545454;
   -moz-appearance:    none;
   -webkit-appearance: none;
   appearance:        none;
   -moz-box-sizing:    content-box;
    -webkit-box-sizing: content-box;
    box-sizing:        content-box;
}
 /* Fim da parte 1 */


Na pagina incial crie uma pasta chamada "css"

Salve-o dentro como "designer.css"

Fim da 3º aula,
Agora vamos aguardar a quarta aula ,quando vamos finalizar a pagina de registro, e adicionar o Menu de navegação.

Atenção; O design até agora é baseado na pagina do t[]b@_$ERB|@, porém , a partir da 4º aula vamos começar a trabalhar no design , assim modificando totalmente a pagina.


Até mais.

Última edição por Fox em Dom 2 Set 2012 - 13:16, editado 2 vez(es)

Hehe + rep pra ti, daqui a pouco quem nao sabia nada estara postando sites tbm ^^

vc e o mestre quanto antes termina a 4 aula melhor

cade a 4 eu gosto muito de seus tutoriais!

Caro fox, como vc mesmo esta tento trabalho de fazer os codigos irei colocar, os creditos que vc merece no site que estou a desenvolver!

Parabéns pelos tutoriais, espero anciosamente a 4ª aula!