Bueno como ya saben y lo digo en todos mis post el tutorial es escrito en el momento por lo cual les pido perdon si hay algún error de ortografía,bueno para este tutorial necesitan el Dreamweaver cs5 bueno es el que yo uso pero si quieren también se puede usar el bloc de notas la diferencia entre los dos es que en bloc de notas tenes que guardar como... .html y/o .css ok...Por ultimo antes de empesar los comentarios agresivos van a ser borrados y depende de lo que haya puesto el usuario va a ser bloqueado a continuecion van a ver una demo
Bien empecemos vamos a nuestro escritorio y creamos una nueva carpeta
¿ya la creaste? muy bien vamos a seguir abrimos el Dreamweaver (o su editor favorito),si usan Dreamweaver les va a salir esto eligen HTML
ahora les aparece esto les voy a explicar un poco que es
<head></head>
head es la cabeza de la web
<title></title>
title es el titulo de nuestra web ok es lo que aparece por EJ: Taringa! - inteligencia colectiva
<body></body>
body es el cuerpo de nuestra web ej: donde aparecen los post
bueno como ya saben que es maso menos cada cosa vamos a guardarlo para eso vamos a apretar CTRL+S o archivo-guardar OJO! lo guardan como "index.html"
Ok! ahora en el body vamos a agregar un div
¿que es un div?
el div seria como una capa en photoshop básicamente un contenedor
ok ahora al div vamos a agregarle un atributo "class" que en español seria "clase"
ahora añadimos otro div
a este div también vamos a darle el atributo class
bueno ahora vamos a añadir un <ul></ul> que es una lista desordenada
bien! ahora a la <ul> vamos a añadir un id="skill"
¿que es id?
id en teoría seria lo mismo que class ojo no es lo mismo pero tendría la misma función
ahora vamos a añadir 5 <li></li> (o la cantidad que quieras)
<li> también es un tipo de lista
ahora adentro de las etiquetas <li>aca</li> vamos a poner la etiqueta <span></span>
En ocasiones, dentro de un mismo párrafo, se deben aplicar estilos diferentes a ciertos segmentos de texto y es para ello que se utilizan las etiqueta <span> y/o <div>
ok ahora entre el cierre de la etiqueta </span> y el cierre de la etiqueta </ul>
ponen la etiqueta <em></em>
ahora nos posicionamos aca
ok ahí escribimos un class a todas! las etiquetas
ahora aca
escribimos el nombre de lo que habíamos puesto antes
bien lo guardamos y lo cerramos, después vamos a la carpeta que habíamos creado y guardado el index y creamos otra carpeta y de nombre le ponemos css
bien! terminamos con la parte de html el código obtenido seria este
[color=#000000][color=#000000]
<div class="contenido">
<div class="subcontenido">
<ul id="skill">
<li><span class="expandir html5"></span><em>HTML 5</em></li>
<li><span class="expandir css3"></span><em>CSS 3</em></li>
<li><span class="expandir jquery"></span><em>jQuery</em></li>
<li><span class="expandir photoshop"></span><em>Photoshop</em></li>
<li><span class="expandir dreamweaver"></span><em>Dreamweaver</em></li>
</ul>
</div>
</div>
[/color][/color]
ok terminamos el html ahora vamos al css después de crear la otra carpeta vamos a Dreamweaver y vamos hacer lo mismo que hicimos para crear el html la diferencia es que en vez de elegir html elegimos css
una vez creado vamos a hacer este procedimiento...ah! me olvidaba antes tienen que saber esto
Las Etiquetas ID y CLASS se escriben diferente en css
Ejemplo: id="atributo" en css seria #atributo{ }
class="atributo" en css seria .atributo{ } (class es punto y el tributo) todo! absolutamente todo! en css tiene que tener { } (los corchetes porque ahí dentro va a ir el código css)
class="atributo" en css seria .atributo{ } (class es punto y el tributo) todo! absolutamente todo! en css tiene que tener { } (los corchetes porque ahí dentro va a ir el código css)
bueno vamos a seguir para empesar vamos a poner el primer class que era "contenido"
seria asi
[color=#000000][color=#000000]
.contenido
{
acá va el código en css
}
[/color][/color]
bueno donde dice "acá va el código css" va a poner esto
[color=#000000][color=#000000]
width:278px;
margin:0;
position:relative;
float:left;
font-size:12px;
line-height:2em;
padding:30px 0 30px;
[/color][/color]
ok ahora vamos a poner el "subcontenido" que obviamente seria
[color=#000000][color=#000000]
.subcontenido
{
acá va el código css
}
[/color][/color]
bueno ahora pegan esto (donde dice aca va el codigo) (Nota: width: es el ancho)
[color=#000000][color=#000000]width:280px;[/color][/color]
ok hora de poner el id que era skill en todo caso seria
[color=#000000][color=#000000]
#skill
{
acá el código
}
[/color][/color]
ahora pegan esto (donde dice acá el código)
[color=#000000][color=#000000]
list-style:none;
padding-top:30px;
[/color][/color]
ok es hora de escribir el li que seria asi
[color=#000000][color=#000000]
#skill li
{
aca el codigo
}
[/color][/color]
donde dice "aca el codigo" pegan esto
[color=#000000][color=#000000]
margin-bottom:70px;
background:#000;
height:5px;
border-radius:3px;
border-left:1px solid #111;
border-top:1px solid #111;
border-right:1px solid #333;
border-bottom:1px solid #333;
[/color][/color]
bien ahora el me que seria
[color=#000000][color=#000000]
#skill li em
{
aca el codigo
}
[/color][/color]
donde dice "aca el codigo" pegan esto
[color=#000000][color=#000000]
position:relative;
top:-30px;
[/color][/color]
ahora vamos a poner el class expandir
[color=#000000][color=#000000]
.expandir
{
codigo
}
[/color][/color]
donde dice "codigo" pegan esto
[color=#000000][color=#000000]
height:1px;
margin:2px 0;
background:#2187e7;
position:absolute;
box-shadow:0px 0px 10px 1px rgba(0,198,255,0.4);
[/color][/color]
bueno ya falta poco ahora tenemos que poner los class de html5 css3 etc;
[color=#000000][color=#000000]
.html5 { width:50%; -moz-animation:html5 2s ease-out; -webkit-animation:html5 2s ease-out; }
.css3 { width:50%; -moz-animation:css3 2s ease-out; -webkit-animation:css3 2s ease-out; }
.jquery { width:6%; -moz-animation:jquery 2s ease-out; -webkit-animation:jquery 2s ease-out; }
.photoshop { width:85%; -moz-animation:photoshop 2s ease-out; -webkit-animation:photoshop 2s ease-out; }
.dreamweaver { width:85%; -moz-animation:dreamweaver 2s ease-out; -webkit-animation:dreamweaver 2s ease-out; }
[/color][/color]
vamos un poco mas ahora @
[color=#000000][color=#000000]
@-moz-keyframes html5 { 0% { width:0px;} 100%{ width:50%;} }
@-moz-keyframes css3 { 0% { width:0px;} 100%{ width:50%;} }
@-moz-keyframes jquery { 0% { width:0px;} 100%{ width:6%;} }
@-moz-keyframes photoshop { 0% { width:0px;} 100%{ width:85%;} }
@-moz-keyframes dreamweaver { 0% { width:0px;} 100%{ width:85%;} }
[/color][/color]
y una vez mas ponemos lo mismo bajo quedaría asi
[color=#000000][color=#000000]
@-moz-keyframes html5 { 0% { width:0px;} 100%{ width:50%;} }
@-moz-keyframes css3 { 0% { width:0px;} 100%{ width:50%;} }
@-moz-keyframes jquery { 0% { width:0px;} 100%{ width:6%;} }
@-moz-keyframes photoshop { 0% { width:0px;} 100%{ width:85%;} }
@-moz-keyframes dreamweaver { 0% { width:0px;} 100%{ width:85%;} }
@-webkit-keyframes html5 { 0% { width:0px;} 100%{ width:50%;} }
@-webkit-keyframes css3 { 0% { width:0px;} 100%{ width:50%;} }
@-webkit-keyframes jquery { 0% { width:0px;} 100%{ width:6%;} }
@-webkit-keyframes photoshop { 0% { width:0px;} 100%{ width:85%;} }
@-webkit-keyframes dreamweaver { 0% { width:0px;} 100%{ width:85%;} }
[/color][/color]
bueno para poner mas barras es fácil por ejemplo quiero poner mi progreso en javaScript vamos al codigo html que es este
[color=#000000][color=#000000]
<div class="contenido">
<div class="subcontenido">
<ul id="skill">
<li><span class="expandir html5"></span><em>HTML 5</em></li>
<li><span class="expandir css3"></span><em>CSS 3</em></li>
<li><span class="expandir jquery"></span><em>jQuery</em></li>
<li><span class="expandir photoshop"></span><em>Photoshop</em></li>
<li><span class="expandir dreamweaver"></span><em>Dreamweaver</em></li>
</ul>
</div>
</div>
copiamos esta linea
<li><span class="expandir dreamweaver"></span><em>Dreamweaver</em></li>
y vamos a pegarlo abajo quedaría asi
<div class="contenido">
<div class="subcontenido">
<ul id="skill">
<li><span class="expandir html5"></span><em>HTML 5</em></li>
<li><span class="expandir css3"></span><em>CSS 3</em></li>
<li><span class="expandir jquery"></span><em>jQuery</em></li>
<li><span class="expandir photoshop"></span><em>Photoshop</em></li>
<li><span class="expandir dreamweaver"></span><em>Dreamweaver</em></li>
<li><span class="expandir java"></span><em>JavaScript</em></li>
</ul>
</div>
</div>
[/color][/color]
ahora nos vamos al css y buscamos esto
[color=#000000][color=#000000]
.html5 { width:50%; -moz-animation:html5 2s ease-out; -webkit-animation:html5 2s ease-out; }
.css3 { width:50%; -moz-animation:css3 2s ease-out; -webkit-animation:css3 2s ease-out; }
.jquery { width:6%; -moz-animation:jquery 2s ease-out; -webkit-animation:jquery 2s ease-out; }
.photoshop { width:85%; -moz-animation:photoshop 2s ease-out; -webkit-animation:photoshop 2s ease-out; }
.dreamweaver { width:85%; -moz-animation:dreamweaver 2s ease-out; -webkit-animation:dreamweaver 2s ease-out; }
copiamos la ultima linea esta:
.dreamweaver { width:85%; -moz-animation:dreamweaver 2s ease-out; -webkit-animation:dreamweaver 2s ease-out; }
y la pegamos abajo quedaría asi:
.html5 { width:50%; -moz-animation:html5 2s ease-out; -webkit-animation:html5 2s ease-out; }
.css3 { width:50%; -moz-animation:css3 2s ease-out; -webkit-animation:css3 2s ease-out; }
.jquery { width:6%; -moz-animation:jquery 2s ease-out; -webkit-animation:jquery 2s ease-out; }
.photoshop { width:85%; -moz-animation:photoshop 2s ease-out; -webkit-animation:photoshop 2s ease-out; }
.dreamweaver { width:85%; -moz-animation:dreamweaver 2s ease-out; -webkit-animation:dreamweaver 2s ease-out; }
.java { width:20%; -moz-animation:java 2s ease-out; -webkit-animation:java 2s ease-out; }
[/color][/color]
ahora vamos a buscar esto
[color=#000000][color=#000000]
@-moz-keyframes html5 { 0% { width:0px;} 100%{ width:50%;} }
@-moz-keyframes css3 { 0% { width:0px;} 100%{ width:50%;} }
@-moz-keyframes jquery { 0% { width:0px;} 100%{ width:6%;} }
@-moz-keyframes photoshop { 0% { width:0px;} 100%{ width:85%;} }
@-moz-keyframes dreamweaver { 0% { width:0px;} 100%{ width:85%;} }
@-webkit-keyframes html5 { 0% { width:0px;} 100%{ width:50%;} }
@-webkit-keyframes css3 { 0% { width:0px;} 100%{ width:50%;} }
@-webkit-keyframes jquery { 0% { width:0px;} 100%{ width:6%;} }
@-webkit-keyframes photoshop { 0% { width:0px;} 100%{ width:85%;} }
@-webkit-keyframes dreamweaver { 0% { width:0px;} 100%{ width:85%;} }
copiamos las ultimas lineas y la pegamos abajo quedaría asi...
.html5 { width:50%; -moz-animation:html5 2s ease-out; -webkit-animation:html5 2s ease-out; }
.css3 { width:50%; -moz-animation:css3 2s ease-out; -webkit-animation:css3 2s ease-out; }
.jquery { width:6%; -moz-animation:jquery 2s ease-out; -webkit-animation:jquery 2s ease-out; }
.photoshop { width:85%; -moz-animation:photoshop 2s ease-out; -webkit-animation:photoshop 2s ease-out; }
.dreamweaver { width:85%; -moz-animation:dreamweaver 2s ease-out; -webkit-animation:dreamweaver 2s ease-out; }
.java { width:20%; -moz-animation:java 2s ease-out; -webkit-animation:java 2s ease-out; }
@-moz-keyframes html5 { 0% { width:0px;} 100%{ width:50%;} }
@-moz-keyframes css3 { 0% { width:0px;} 100%{ width:50%;} }
@-moz-keyframes jquery { 0% { width:0px;} 100%{ width:6%;} }
@-moz-keyframes photoshop { 0% { width:0px;} 100%{ width:85%;} }
@-moz-keyframes dreamweaver { 0% { width:0px;} 100%{ width:85%;} }
@-moz-keyframes java { 0% { width:0px;} 100%{ width:20%;} }
@-webkit-keyframes html5 { 0% { width:0px;} 100%{ width:50%;} }
@-webkit-keyframes css3 { 0% { width:0px;} 100%{ width:50%;} }
@-webkit-keyframes jquery { 0% { width:0px;} 100%{ width:6%;} }
@-webkit-keyframes photoshop { 0% { width:0px;} 100%{ width:85%;} }
@-webkit-keyframes dreamweaver { 0% { width:0px;} 100%{ width:85%;} }
@-webkit-keyframes java { 0% { width:0px;} 100%{ width:20%;} }
[/color][/color]
para poder cambiar hasta donde va la barra tenemos que modificar esto
no cambien el % solo el porcentaje OJO! el porcentaje máximo osea si quieren que llegue a 100% ponga 85 porque si no esto va a leer mal y se va a cargar mas de lo debido
Fuente