boca_97
Usuario (Argentina)
Bueno antes que nada los comentarios fuera de lugar van a ser eliminados dependiendo su gravedad van a ser bloqueados dichos user. otra cosa que les queria comentar ustedes se preguntaran que les voy a enseñar a hacer ahora bueno lo que le voy a enseñar a hacer es un menu muy bueno en css y html bueno dejemos tanta introduccion y manos a la obra DEMO Listas numeradas u ordenadas: Se engloban por las tags <ol>.....</ol> y cada elemento de la lista estará encabezado por la tag <li> que puede o no llevar la tag de cierre </li>. Es conveniente que cada elemento de la lista esté en una línea nueva aunque todo seguido consiga en la presentación el mismo efecto. Cuando el navegador interpreta una lista ordenada, numera y sangra cada elemento en forma secuencial, aunque se introduzcan modificaciones. Listas con viñetas o sin orden: Se engloban por las tags <ul>.....</ul> y cada elemento de la lista, también estará encabezado por la tag <li>. El resultado es que el navegador inserta viñetas (marcadores) delante de cada elemento. Listas de menú y de directorio: Están en desuso puesto que su resultado suele ser, prácticamente, idéntico al de las listas con viñetas. Menú: Englobadas por las tags <menu>.....</menu> y cada elemento encabezado por la tag <li>. Directorio: Englobadas por las tags <dir>.....</dir> y cada elemento encabezado por la tag <li>. Listas de glosario: Cada elemento de la lista está compuesto por un término y una definición y cada una de estas partes tiene su propia tag. Estas listas se engloban con las tags <dl>.....</dl>. Para el término se usa la tag <dt> y para la definición la tag <dd>. Generalmente el navegador colocará término y definición en dos líneas diferentes pero esto se puede evitar añadiendo a la tag de apertura el atributo compact: <dl compact>. Listas anidadas: Consiste en poner una lista dentro de otra, de manera que la lista secundaria sangre respecto a la principal. Puede jugar con los diferentes tipos de lista pero recuerde estructurar bien las tags: Las tags de la lista principal englobarán todo el conjunto de las listas y las tags de las listas secundarías se cerraran antes de volver a la lista principal. Ahora quizá le empiece a convenir sangrar el propio código conforme lo va escribiendo en HTML. en nuestro caso vamos a usar las listas SIN ORDEN que seria [ <ul>.....</ul> ] Para empezar a crear el menu en HTML vamos a poner un div que ''contenga'' el menu y le vamos a poner class="menu_gen" Ok cuando hagan el div vamos a añadir las listas desordenadas y le ponemos un class="nav" dijo: Si quieren poner otra cosa en vez de menu_gen o nav lo pueden hacer eso es a gusto obviamente despues ponen el mismo nombre en el css Ahora vamos a añadir la etiqueta <li>..........</li> y adentro ponemos la etiqueta <a>.........</a> Bueno el menu en html esta listo y la visualizacion en el navegador seria la siguiente Como ven no es gran cosa pero la pregunta es... ¿Porque se ve asi? Bueno eso es muy facil de responder y muy obvio se ve asi porque no pusismos TODAVIA el css que es lo que le da ''forma'' al menu y la la pagina en general porque no... Para empezar con css vamos al <head>.......</head> que es la cabeza de la pagina y vamos a poner <link type="text/css" rel="stylesheet" href="css/estilo.css"/> En href="" Entre las comillas vamos a poner la direccion de nuestro css si... EJ: En la misma carpeta: estilo.css En una carpeta anterior: ../estilo.css En la siguiente carpeta: css/estilo.css Bueno Una vez puesto el enlace vamos a crear el css porque todavia no existe dijo: en css class="menu_gen" se prodria asi .menu_gen{ } bueno añadimos el menu_gen al css asi... adentro de los {....} ponemos esto... Ahora vamos a añadir el class de nav que no es .nav seria ul.nav porque involucra a las listas y vamos a añadir lo siguiente Todo eso en el Navegador seria esto Lo siguiente que vamos a hacer es añadir ul.nav li a {.....} al css seria asi... adentro añaden esto en el navegador se veria asi Va tomando forma dijo: Si quieren cambiar el color del resplandor y el del menu modifican esto... PD: el resplandor esta marcado con rojo y el color del menu en verde Ok ahora vamos a poner lo mismo pero vamos a añadirle el hover que es cuando pasamos el puntero por arriba quedaria asi... y ponemos lo siguiente Bueno con eso terminariamos el menu... pero ahora... ¿Como manejo la animacion a gusto? Eso es facil solo modifican el padding seria asi dijo: abajo= rojo derecha= verde "ancho"=azul Y con eso terminariamos el menu espero que les haya gustado el post
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 empezar los comentarios agresivos van a ser borrados y depende de lo que haya puesto el usuario va a ser bloqueado a continuación van a ver una demo DEMO ok vamos a comenzar el tutorial vamos a archivo-nuevo y seleccionamos html y le damos a crear una vez creado el documento vamos a apretar CTRL+S ¿que hacemos con eso? eso indica al programa que guarde los cambios pero como todavia no lo guardamos nunca nos va a decir que lo guardemos y lo guardamos con el nombre de index.html Ok ahora vamos al <head></head> y nos posicionamos abajo del titulo....donde esta marcado con rojo! ahí ponemos el siguiente codigo <link type="text/css" rel="stylesheet" href="estilo.css"/> OJO! si esta dentro de una carpeta seria asi <link type="text/css" rel="stylesheet" href="carpeta/estilo.css"/> bueno en mi caso lo voy a poner en la misma carpeta por ende voy a usar el primer código quedaría así ustedes dirán pero ese css no existe...no existe pero mas adelante lo vamos a crear...bueno ahora dentro del body vamos a poner la etiqueta <h1></h1> bien ahora aca... vamos a poner un class con el nombre de ribbon ahora vamos a añadir la etiqueta <strong></strong> y vamos a hacer lo mismo que con el h1 pero en el nombre vamos a poner ribbon-contenido Ok ahora vamos a apretar F12 para poder visualizar el proceso en el navegador ok ahora no nos va aparecer nada porque todavía no hay nada en el css pero dejen la pagina abierta Ok una vez terminado el html pasamos al css ahora viene lo bueno para empezar vamos a crear un nuevo archivo para eso vamos a Archivo-Nuevo y en vez de elegir html elegimos css ahora que lo creamos vamos a guardarlo vamos a apretar CTRL+S y lo guardamos como estilo.css Ok ahora vamos a agregar el siguiente código ¿que hace? bueno esto seria el rectángulo principal del ribbon .ribbon { font-size: 16px !important; width: 50%; position: relative; background: #950000; color: #fff; text-align: center; padding: 1em 2em; margin: 2em auto 3em; } Resultado bien ahora abajo pegan esto ¿que es? seria la parte en punta del ribbon del lado derecho .ribbon:before, .ribbon:after { content: ""; position: absolute; display: block; bottom: -1em; border: 1.5em solid #600000; z-index: -1; } Resultado muy bien ahora del otro lado del ribbon .ribbon:before { left: -2em; border-right-width: 1.5em; border-left-color: transparent; } Resultado bien ahora vamos a poner el siguiente código ¿que hace? bueno esto posiciona del lado derecho el final de ribbon .ribbon:after { right: -2em; border-left-width: 1.5em; border-right-color: transparent; } Resultado bien solo nos falta un poco mas ahora vamos a poner el siguiente codigo ¿que hace? bueno parece que no hace nada pero si bueno miren el resultado y van a ver un pequeño triangulo .ribbon .ribbon-contentenido:before, .ribbon .ribbon-contentenido:after { content: ""; position: absolute; display: block; border-style: solid; border-color: #4575ba transparent transparent transparent; bottom: -1em; } Resultado bueno ahora abajo pegan este código ¿que hace? bueno este seria la parte de atrás del lado izquierdo .ribbon .ribbon-contentenido:before { left: 0; border-width: 1em 0 0 1em; } Resultado ahora solo nos falta la derecha para eso vamos a poner el siguiente código .ribbon .ribbon-contentenido:after { right: 0; border-width: 1em 1em 0 0; } Resultado HTML <h1 class="ribbon"> <strong class="ribbon-contentenido">Este Es un tutorial de boca_97 si te gusto recomendalo</strong> </h1> CSS .ribbon { font-size: 16px !important; width: 50%; position: relative; background: #950000; color: #fff; text-align: center; padding: 1em 2em; margin: 2em auto 3em; } .ribbon:before, .ribbon:after { content: ""; position: absolute; display: block; bottom: -1em; border: 1.5em solid #600000; z-index: -1; } .ribbon:before { left: -2em; border-right-width: 1.5em; border-left-color: transparent; } .ribbon:after { right: -2em; border-left-width: 1.5em; border-right-color: transparent; } .ribbon .ribbon-contentenido:before, .ribbon .ribbon-contentenido:after { content: ""; position: absolute; display: block; border-style: solid; border-color: #4575ba transparent transparent transparent; bottom: -1em; } .ribbon .ribbon-contentenido:before { left: 0; border-width: 1em 0 0 1em; } .ribbon .ribbon-contentenido:after { right: 0; border-width: 1em 1em 0 0; }
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 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 <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> 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) bueno vamos a seguir para empesar vamos a poner el primer class que era "contenido" seria asi .contenido { acá va el código en css } bueno donde dice "acá va el código css" va a poner esto width:278px; margin:0; position:relative; float:left; font-size:12px; line-height:2em; padding:30px 0 30px; ok ahora vamos a poner el "subcontenido" que obviamente seria .subcontenido { acá va el código css } bueno ahora pegan esto (donde dice aca va el codigo) (Nota: width: es el ancho) width:280px; ok hora de poner el id que era skill en todo caso seria #skill { acá el código } ahora pegan esto (donde dice acá el código) list-style:none; padding-top:30px; ok es hora de escribir el li que seria asi #skill li { aca el codigo } donde dice "aca el codigo" pegan esto 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; bien ahora el me que seria #skill li em { aca el codigo } donde dice "aca el codigo" pegan esto position:relative; top:-30px; ahora vamos a poner el class expandir .expandir { codigo } donde dice "codigo" pegan esto height:1px; margin:2px 0; background:#2187e7; position:absolute; box-shadow:0px 0px 10px 1px rgba(0,198,255,0.4); bueno ya falta poco ahora tenemos que poner los class de html5 css3 etc; .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; } vamos un poco mas ahora @ @-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%;} } y una vez mas ponemos lo mismo bajo quedaría asi @-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%;} } bueno para poner mas barras es fácil por ejemplo quiero poner mi progreso en javaScript vamos al codigo html que es este <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> ahora nos vamos al css y buscamos esto .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; } ahora vamos a buscar esto @-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%;} } 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
este post es absolutamente mio las desde las capturas hasta el texto disculpen si tengo algún error de ortografía esque el post lo escribo en el momento dicho eso mas a proceder con el post...Paso 1 básicamente lo que vamos a hacer es la barra de carga que esta arriba ok bueno para empesar vamos a hacer un nuevo documento apretando CTRL+N o simplemente yendo a Archivo-nuevo con las dimenciones de 900px por 200px o las que quieran Paso 2 después de crear el documento vamos a Ventana-Animación Paso 3si no les sale la animación con linea de tiempo van a este iconoy le dan aca:Paso 4ahora seleccionamos la herramienta de rectángulo redondeado OJO! las opciones de rectángulo redondeado tienen que estar asi...Paso 5y hacen algo asiPaso 6ahora vamos a apretar CRTL+J (esto les va a duplicar la capa) les tendría que quedar asi...Paso 7ahora vamos a hacer clic derecho sobre la capa de "forma1 copia" y le damos a "Combertir en objeto inteligente"les queda asi...Paso 8ahora esto es IMPORTANTE vamos a mantener apretado la tecla ALT y haciendo clic en la mascara de capa (la mascara de capa es la que esta marcada con rojo) vamos a arrastrar hacia arribales tendría que quedar asi...Paso 9bueno ahora vamos a apretar clic derecho sobre la capa de "forma1 copia" ( es la que convertimos en objeto inteligente) y vamos a apretar donde dice: "opciones de fusion" y lo configuran asi hay que ir a la parte de TRAZO Paso 10ahora nos posicionamos sobre la capa "Forma 1" y le bajamos la opacidad un poco (por si no saben la opacidad esta al lado de donde dice normal)el resultado es este...Paso 11bueno esto es importante vamos a hacer clic en la "cadena que esta entre la capa y la mascara"(si no saben cual es la que esta marcada con rojo)Paso 11seleccionamos la herramienta de movery manteniendo apretada la tecla SHIFT vamos a mover la capa: "forma1 copia" hacia la izquierda hasta que no quede nada de la barra solo la parte de abajoPaso 12bien ahora vamos a empesar lo bueno la animación. vamos a ir al panel de animación y vamos a apretar en la flecha que esta la lado de la capa "forma 1 copia" esto no dará un sub-panel bueno ese sub-panel tiene diferentes opciones posición,posición,estilo,etc vamos a apretar en el reloj que esta en la parte de opacidadPaso 13vamos a mover ese "señalador" hasta donde dice "01:00f" que seria un segundo,vamos a mover la capa "forma1 copia" hacia la derecha no toda por ahora vamos a avanzar un poco nomasesto va indicarle a la animación que llegado un segundo la barra llegue hasta ahí bueno para poder seguir animándola hay que mover el señalador hasta 02:00f que obviamente seria 2 segundos y mueven un poco mas la barra,haci siguen haciendo hasta completar todoRESULTADObueno para añadir un texto vamos a escribir por ejemplo "cargando..." bien ustedes se dirán y ahora como lo animamos? bueno para empesar hay que hacer para atrás el señalador que quiero decir con esto? que tiren el señalador hasta donde estaba al principiobien ahora vamos a abrir el sub-panel de el texto y en vez de apretar en posición vamos a apretar en opacidad y obviamente en el reloj hora vamos a correr el señalador no hasta 01:00f sino hasta la mitad y le bajamos la opacidad a un 50%ahora le bajan la opacidad después muevan el señalador hasta 02:00f y suban la opacidad al 100% haci sucesivamente cuando este por terminar la la barra le bajan la opacidad al 0% y añaden otro texto que diga completado y vamos de nuevo a traer el señalador al principio y van a mover el señalador de nuevo hacia adelante pero DESPACIO cuando vean que el texto de cargando esta desapareciendo por completo van a apretar el reloj y vamos a darle un opacidad de 0%bueno ahora vamos a adelantar un segundo mas el señalador y le vamos a dar opacidad al 100%Bueno para guardar nos vamos a Archivo---->guardar para webs y dispositivos después les sale esto lo configuran como se ve ahídijo:Nota: ahi donde dice una vez lo puden cambiar a infinito por ejemplo para que se repita [/quote]
Nada de comentarios fuera de lugar... si si respetan van a ser respetados si encuentran algun error me lo dicen error de codigo o de ortografia.vamos a usar el photoshop solo para hacer el boton ok bueno empecemos! DEMO Para empesar a crear el boton abrimos el photoshop y creamos un nuevo documento de 101 x 68 pixeles Ahora vamos a la herramienta lupa y despues a ajustar pantalla Lo siguiente que vamos a hacer es ''activar'' las reglas. las reglas son estas y se activan con CTRL+R Ahora vamos a ver al costado que dice: 0 - 01 - 02 - 03 - 04 - 05 - etc vamos a seleccionar la herramienta mover y de la regla superior sacamos una ''guia'' que vamos a posicionar en ''05'' de la otra regla asi... (el gif esta mal echo porque nose que paso con camtasia no me reconoce el puntero y me las tube que ingeniar para inventar el puntero pero ala idea es clara) Bien.Arriba va a estar el nomal y abajo el hover ok. Voy a hacer algo rapido para mostrar (no esperen un super boton :grin boca_97 dijo: Para empezar con html vamos al notepad++,dreamweaver,bluefish o lo que usen se puede usar hasta el bloc de notas si no quieren bajar nada bueno yo voy a usar notepad++ vamos a crear una nueva carpeta y adentro de esa carpeta vamos a crear otra que diga ''img'' y adentro ponemos nuestro 'boton' Ahora vamos al notepad++ o lo que esten usando y nos vamos a archivo - nuevo o CTRL+N despues de crear el documento vamos a ir a Lenguaje - H - HTML Ahora empecemos vamos a poner los elementos basicos de html para los que no saben que es <title>...</title> es el titulo de la web como muestra la imagen Bueno ahora vamos a apretar CTRL+S (es para guardarlo) y lo guardan en la misma carpeta con el nombre de index.html ahora solo tienen que apretar CTRL+S cuando hagan un cambio para guardarlo ok... ahora vamos a añadir un <div> con un id='general' Adentro del <div> vamos a poner un <ul> que como explique en el post anterior son listas ahora viene la etiqueta <li> bueno ahora solo nos queda poner la etiqueta <a></a> pero vamos a agregarle un class=''perfil'' y obviamente el href=''link'' boca_97 dijo: href="#" el # significa que no manda a ningun lado Para empezar a poner estilo podemos hacer 2 cosas crear un archivo aparte y enlazarlo al index.html o ponerlo adentro del index.html Bueno vamos a enlazar el css al index.html para eso nos vamos a archivo - nuevo repiten los mismo pasos que con el html pero en vez de ir a Lenguaje - H - html vamos a ir a lenguaje - C - css despues vamos a apretar CTRL+S y lo guardamos talcual como hicimos con el index pero le ponemos estilo.css o lo que quieran y ahora nos vamos al index.html y agregamos esto en el <head> en el href='aca ponen la ruta' puede ser adentro de una carpeta en ese caso seria href='nombre de la carpeta/estilo.css' y ponganse que el css esta en una carpeta anterior en ese caso seria href='../estilo.css' y si es una carpeta href='../lacarpeta/estilo.css' PD: Los "../estilo.css" esos puntos le va a indicar al navegador que retroceda una carpeta para atras Bueno esta opcion es mas facil de hacer pero mas... a ver como se los puedo decir a... si se te arma un quilombo con los codigos por decirlo de alguna forma para mi es mas comoda la primera forma pero si a ustedes les parece mas comoda esta tambien es buena opcion Bueno para hacerlo solo agregan la etiqueta <style></style> al index.html Ahora SI manos a la obra...para empezar vamos a añadir la etiqueta li en el css asi... Adentro de los { } que es donde ponemos el css vamos a poner "list-style" que es el estilo de la lista y lo ponemos asi... Puesto eso vamos a añadir: ''#general:'' que es el div adentro del id general vamos a poner margin-left y margin-top: (es para posicionarlo nada mas) margin-left: hace que el div o la etiqueta se corra para la derecha poniendo por ej: margin-left: 50px; eso obviamente se va a correr 50 pixeles hacia la derecha Ojo!: si quieren que se se mueva para la izquierda tienen que poner un numero negativo ej: margin-left: -50px; obviamente se corre 50 pixeles hacia la izquierda margin-top:es exactamente lo mismo que con el left la diferencia es que va para abajo ej: margin-top: 20px; y como el otro se va para abajo y si le ponen un numero negativo se va para arriba ahora vamos a añadir "#general ul li" que imbolucra al div y a las lista lo que vamos a poner es un "display" Lo siguiente que vamos a hacer es poner "#general ul li a" parece que es lo mismo pero no este imbolucra al div,las listas y el link y adentro vamos a poner las dimenciones osea anchura y altura Ok ahora vamos a poner el class que le pusimos a la etiqueta <a> anteriormente adentro del class vamos a poner... boca_97 dijo: transition:es para la animacion background-image: el fondo (en nuestro caso el boton) background-position: es la posicion del fondo display:La Propiedad display define cómo/o si se mostrara un elemento. height: altura text-indent:seria dar sangría a un parrafo width: ancho Nota:la ruta de la imagen del boton la ponen aca: background-image: url("img/button.png" Hora de añadir el hover (es cuando pasas el puntero por arriba) Bueno con eso terminamos espero que les haya gustado nos vemos en el próximo post
Indice Precentacion y Informacion sobre el post Advertencia sobre comentarios fuera de lugar Demo Empezando el tutorial (HTML) Poniendo estilo (CSS) Final del post Presentación! Hola! soy @boca_97 y en este post les voy a enseñar a crear un tooltip originalmente se hace con jquery, pero para algunos que no saben jquery se les hace muy dificil (como yo) por es vamos a usar CSS3 para crearlo . Advertencia sobre los comentarios! Por favor eviten los comentarios ofensivos yo no los insulte en ningún momento por ende no quiero que insulten por lo menos repeten que me hicieron cambiar el patrón de colores que llevaba ¬¬ (? Demo! Empezando tutorial (HTML) Bueno empecemos vamos a poner los elementos basicos de HTML explico rapidito que es cada uno: Body: cuerpo. Head: cabeza o cabecera. Title: titulo. Y adentro del body vamos a poner algo cualquier cosa pero OJO! : vamos a poner un hipervinculo en la palabra que queramos que aparezca el tooltip asi: No tengo idea porque se ve tan chico asi que se los dejo en code <p>Hola esto es un tutorial de boca_97 no te olvides Recomendar :D</p> <p>Mas texto y sus alabansas a herni (? blablablabla y quiero que esto se el tooltip= <a href="#" class="tooltip" title="Esto es un tooltip">RECOMIENDEN</a></p> eso seria todo el html ahora vamos a darle estilo Poniendo estilo (CSS) Para enlazar estilo y/o archivo css hay que poner el el head esto: Bueno y ahora explicar que es cada uno pero antes de explicarles tienen que saber que tienen que poner solo 1 ok! porque vamos a usar uno solo si ustedes necesitan mas ahi seria cosa suya <link rel='stylesheet' type='text/css' href='estilo.css'/> : esto se usa si el archivo css esta en la misma carpeta el nombre del css va en href='aca el nombre' <link rel='stylesheet' type='text/css' href='css/estilo.css'/> : esto se usa si el archivo esta en una carpeta ejemplo: en esta carpeta esta el index.html entonces creo otra que diga css quedaria asi href='carpeta/archivo.css' <link rel='stylesheet' type='text/css' href='../css/estilo.css'/> : esto es por si esta en una carpeta anterior por eso se pone el "../" eso le indica al navegador que retroseda una carpeta y en este caso entre a otra para poder encontrar el css <style>aca el estilo</style> : esto se usa por si no queres usar ningun archivo (recomendado para empezar con css) por eso se pone el <style></style> y adentro de las etiquetas va el estilo aclarado estos puntos vamos a seguir en mi caso voy a usar la ultima opcion simplemente porque me da fiaca crear un archivo bueno vamos a empezar, como pusimos un class="" con el valor de tooltip vamos a poner en el css .tooltip { } Lo que hace el punto es decirle al navegador que ese estilo y todo lo que este adentro de el va a ser de la etiqueta que tenga el valor de tooltip y adentro vamos a poner esto En el navegador se ve asi Perdon el error ahi Parece que no hay cambio pero es importante Ahora vamos a poner un Hover ¿Que es un hover? un hover es cuando pasas el puntero por dicho lugar en este casi la palabra En el navegador Lo siguiente que vamos hacer es añadir el after al hover asi: Vista en el navegador: ya va tomando forma (? bueno lo siguiente que vamos a poner la "colita" por decirlo de algun modo Vista previa y final en el navegador:
Hola Soy @boca_97 y en este post les voy a tratar de enseñarles o mostrarles mejor dicho,como dar estilo al tooltip que creamos en el post anterior con css,También vamos a crear fácilmente un tooltip pero en photoshop,bueno antes de empezar quiero decirles que cualquier comentario fuera de lugar va a ser borrado y dependiendo la gravedad borrado...ok empecemos con el css y html Bueno antes de empezar quiero decirles que tienen que pasar por mi anterior post [Hacer Clic acá] ok si ya pasaron bueno vamos a proceder con el tutorial ...Bueno obviamente lo primero que hay que poner son los elementos básicos de html y la etiqueta para poner el tooltip (todo eso lo explico en el post anterior) ANTES DE QUE PREGUNTEN USO BLOC DE NOTAS PORQUE NO TENIA GANAS DE ABRIR OTRO EDITOR DE TEXTO USTEDES USEN CUALQUIERA DA IGUAL Ok después de hacer eso vamos a guardar el archivo como yo estoy usando bloc de notas me voy a ir a Archivo - Guardar Como y cuando lo guarde es Importante! que se guarde con la extensión de .html el nombre no importa [Por ahora: digo esto porque al momento de subir un archivo al servidor el archivo por defecto tiene que ser index.html Bueno ahora vamos a poner los elementos "básicos" del tooltip en css no? como enlazar un archivo aparte en css ya lo explique ok ... bueno así quedaría un tooltip con el efecto "Por defecto" bueno ahora a darle tu propio estilo para eso hay que tener conocimiento de CSS para eso les voy a intentar dar unos tips (nose si se escribe así) Opacidad: RGB (red, green, blue, es decir rojo, verde, azul) es un modelo que permite obtener cualquier color a partir de la combinación de esos tres colores. Los que conocéis CSS estáis habituados a especificar un color por su valor hexadecimal, por ejemplo #000000 para el negro. Pero todo color tiene también su valor RGB, que en el caso del negro es R:0 G:0 B:0. En el extremo contrario estaría el blanco que sería R:255 G:255 B:255. Hasta ahora podíamos definir un color no sólo mediante su valor hexadecimal, sino también según sus valores RGB. Por ejemplo. para poner un fondo negro a un div: div { background: rgb(0, 0, 0); width: 50px; height: 50px; } Resultado: Pero gracias a CSS3 podemos incluir un valor más para cada color: su opacidad. Entonces hablaríamos de RGBA, siendo A=Alpha, que nos permitirá especificar la opacidad del color. El valor de A es un número entre 1 y 0, siendo 1 totalmente opaco y 0 totalmente transparente. Si seguimos el ejemplo anterior del fondo negro y queremos que tenga una opacidad del 50% haremos: div { background: rgba(0, 0, 0, .5); width: 50px; height: 50px; } Como vemos hemos situado su opacidad al 50% por lo que si hubiera algo debajo de ese DIV se vería. Existe ya una propiedad en CSS3 para conseguir la opacidad de un elemento. Se trata de opacity. Por ejemplo: Degradado: La función de gradiente de CSS fue presentado por el Webkit por cerca de dos años,no hay mucho que decir no fue muy usada ya que no tenia compatibilidad con los demás navegadores pero con firefox 3.6 apoyando ahora se puede usar en la mayoría de los navegadores poniendo sus respectivas extensiones ej: div{ height: 130px; width: 630px; background: -webkit-linear-gradient(orange, pink); background: -moz-linear-gradient(orange, pink); background: -o-linear-gradient(orange, pink); } Radial: div{ background: -webkit-radial-gradient(#0f0, #06f); background: -moz-radial-gradient(#0f0, #06f); border: 1px solid #333; height: 200px; width: 250px; } Un poco mas de información:http://programmer.tumblr.com/post/471825477/como-crear-degradados-con-css-3 Para que tengan una idea mas clara busquen manuales o tutoriales en vídeo de css3 Bueno para empezar esta yapa bien fácil hay que crear un documento de las dimensiones que quieran yo voy a crear uno de 120 x 120 px Después con la herramienta de rectángulo vamos a crear uno después de eso vamos a crear una nueva capa después a buscar en las formas personalizadas algo que sea parecido a un triangulo y hacemos un triangulo al lado después vamos a apretar CTRL+T y nos vamos a los controles de arriba acá: y tal como muestra la imagen le damos a -90 y va a quedar mirando hacia la izquierda: Si quieren que quede mirando hacia el otro lado solo le ponen 90 y así pueden ir jugando con las posiciones ahora solo nos queda acomodarlo eso se hace con esta herramienta mover que es esta: que es la segunda herramienta de PS, bueno cuando Hagas todo eso nos debería de quedar así: No explico como darle estilo porque css no es lo mismo que photoshop osea photoshop es mas fácil Desde ya gracias por pasar si les gusto el post recomienden
Este post es escrito en el momento si tiene algún error solo avisen y lo corrijo bueno antes de empezar quería decirles que lo que vamos a hacer es el reproductor del famoso PSD de tron bueno vamos a empezar Vamos a crear un nuevo documento Lo vamos a dejar abierto y vamos a crear otro nuevo documento Bien vamos a trabajar en el segundo documento ok tenemos que elegir la herramienta de selección y elegimos un poco del documento y lo pintamos de negro... asi ahora vamos a edición - Definir motivo... después sale el cuadro y le dan a ok bien! ahora podemos cerrar tranquilamente el segundo documento y empezar a trabajar. Bajamos el siguiente fondo y lo colocamos en el documento vamos a darle clic derecho a la capa y vamos a las opciones de fusión y elegimos el motivo que habíamos hecho antes nos queda esto bien! ahora abajo de las capas van a ver unos iconos elijen este Una vez ahí van acá Y lo configuran así... Después van a darle clic derecho y eligen crear mascara de recorte Tendriamos esto Lo siguiente que vamos a hacer es ir al mismo botón pero en este caso vamos a elegir DEGRADADO Pueden jugar un poco con esto es a gusto, yo solo le voy a poner el de negro a blanco y cambiamos el modo de fusión a LUZ SUAVE ahora vamos a mantener apretada la tecla shift seleccionamos todo y apretamos CTRL+G vamos a darle clic derecho al grupo y nos vamos a PROPIEDADES DE GRUPO una vez ahí nos sale esto y le ponen de nombre FONDO ahora se descargan esta imagen y la ponen en el documento Ok! ahora a relleno vamos a darle un 50% ahora nos vamos a las opciones de fusión y lo configuramos así ahora vamos a guardar la siguiente imagen... nos vamos a las opciones de fusión y lo configuramos asi OK AHORA PARECE QUE NO HAY NADA PERO HAY UNA IMAGEN EN BLANCO GUARDENLA Es la imagen de arriba Bueno la ponemos en nuestro documento y después nos vamos a las opciones de fusión Ahora vamos a modificar el relleno y le ponemos 0% Resultado Ahora seleccionamos las dos siguientes capaz y la agrupamos... Lo siguiente es copiar los iconos que les voy a dar ahora Cuando lo guarden vamos a las opciones y le ponemos esto Listo eso vamos a seleccionar la herramienta de rectángulo y hacen una muy pequeña selección ahora otra vez a las opciones Uff...jaja ya se están cansados ya termino falta poco hora de añadir el texto voy a añadir 2 nombre y titulo de la canción lo tienen que hacer con este color #ccdbe9 despues de eso seleccionan todo menos el grupo FONDO CTRL+G para agrupar y listo Resultado Final Te invito a mi comunidad donde los usuarios aprendan a valorar los post, estamos en contra del crap y los trolls. Publicita tus mejores post y disfrutemos entre todos. ¡Por una Taringa mejor! ¡Viva la Inteligencia Colectiva!
Hola soy @boca_97 y en este post les quiero enseñar a modificar taringa con stylish en firefox, bueno no le voy a dar un estilo completo si no lo que voy hacer es enseñarles a que modifiquen taringa por si solos y no tengan que andar buscando un estilo por todos lados,bueno antes de empezar quiero decirles que cualquier comentario fuera de lugar va a ser borrado y dependiendo la gravedad borrado...ok empecemos con el css y html Bueno antes de empezar se tienen que instalar el stylish Por lo que tengo entendido hay un stylish para chrome pero no se si tiene las mismas "opciones" o si se maneja igual no uso chrome,ok una vez instalado vamos a "Complementos-Stylish-escribir nuevo estilo" bueno en nombre ponen los que se les cante yo voy a poner "Boca_97 - Taringa" y en el código que es donde dice "1" y es para escribir ahí vamos a poner lo siguiente les dije que no borren eso porque después si no, no van a poder modificar la pagina el código css va adentro de esas dos llaves principales Para crear el header de taringa lo que vamos a hacer es ir a taringa obviamente y sacar una captura de pantalla apretando la tecla ImprPant que generalmente se encuentra al lado del F12 cuando apretamos la tecla nos vamos al photoshop y apretamos CTRL+N y nos sale este mensaje y/o ventana Bueno después en el documento vamos a apretar CTRL+V para que se nos pegue la captura no va a quedar así... Con la herramienta recortar (es la que esta primer fila 3 lugar) (si lo tienen totalmente estirado es la 4 herramienta) seleccionamos el header: Ok una vez terminado obtendríamos esto Y lo editan como quieran hice que sacaran la captura hacia se guían,yo ya edite uno así que de ejemplo les voy a poner el mio actual Para poner el header de taringa vamos a poner id header llaves background y la dirección así: Obviamente voy a poner el header que hice y bueno ahora le damos a previsualizacion o guardar y si nos vamos a taringa el resultado es el siguiente: pero ustedes dirán Pelotud* de mierd* no cambio un caraj* bueno antes de que me caguen a puteadas les voy a decir porque no anda bueno no anda porque ya hay un header que es el default y el navegador lee ese header por eso vamos a añadir eso !important La función !important le indica al navegador que no le preste importancia al header default y que lea el header que acabamos de poner ahora les voy a mostrar como quedaría Le damos a previsualizacion o guardar y vamos a taringa y el resultado es este: Como ven ya cambio bueno Para editar el logo de taringa necesitamos una herramienta llamada firebug Una vez instalado vamos a hacer lo siguiente clic derecho sobre el logo - inspeccionar elemento Ahora nos va aparecer esto y al costado vamos a ver el css y el url lo copiamos así: Para acortarles el trabajo les voy a dar la url del logo que es esta http://o1.t26.net/img/logo.png Lo abren con photoshop y van a editarlo a gusto el mio es este Para recrear el logo de taringa pueden ingresar a este tutorial creado por el usuario @Rem_la25 http://www.taringa.net/Rem_la25/mi/RjGV Y en el documento vamos a poner id logo llaves y el codigo background pero en este caso vamos a hacer un experimento vamos a poner mas funciones el el logo ejemplo: que cuando pase el mouse sobre el logo me haga un giro así: el código seria el siguiente Bueno así pueden ir cambiando todo taringa "ejemplos" .reg-sb { background: url("link de la imagen") no-repeat scroll center 20px transparent !important; } tamaño de la imagen es de 227 x 227px a.face-shout { background: url("http://k37.kn3.net/6358DE513.png")!important; } a.tw-shout { background: url("http://content.pimp-my-profile.com/i68/5/4/13/f_a6d29ea707ed.png") !important; } .privacy-shout {background: url("http://cdn1.iconfinder.com/data/icons/famfamfam_mini_icons/icon_padlock.gif")no-repeat scroll 0 0 transparent !important;} Este hover es el de taringa música se que hay un script por ahí dando vueltas para hacer esto pero a mi no me funciono así que lo hice yo .avatar img { -moz-border-bottom-colors: none !important; -moz-border-image: none !important; -moz-border-left-colors: none !important; -moz-border-right-colors: none !important; -moz-border-top-colors: none !important; border-color: #D2D5D9 #D2D5D9 #989CA4 !important; border-radius: 4px 4px 4px 4px !important; border-style: solid !important; border-width: 1px !important; box-shadow: 0 1px 0 rgba(113, 117, 129, 0.2) !important; margin-bottom: 6px !important; } .avatar img:hover { -moz-border-bottom-colors: none !important; -moz-border-image: none !important; -moz-border-left-colors: none !important; -moz-border-right-colors: none !important; -moz-border-top-colors: none !important; background: none repeat scroll 0 0 #44A5E8 !important; border-color: #177BC0 #177BC0 #0F4D78 !important; border-style: solid !important; border-width: 1px !important; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.29), 0 1px 4px rgba(23, 148, 232, 0.81), 0 1px 0 #BBECF3 inset !important; } .btn.a { background: -moz-linear-gradient(center top , #52A8E8 0%, #377AD0 100%) repeat scroll 0 0 transparent; border-color: #4081AF #2E69A3 #20559A; color: #FFFFFF; text-shadow: 0 -1px 1px #3275BC; border-radius: 0px 10px 10px 10px !important; } #scroll-up { background: url("http://cdn2.iconfinder.com/data/icons/oxygen/48x48/actions/arrow-up.png") no-repeat scroll left top transparent !important; display: none; height: 48px !important; opacity: 0.5; position: fixed; right: 10px; top: 10px; width: 48px !important; } Y as puedo seguir posteando y posteando códigos pero quiero que ustedes investiguen por eso soy por finalizado este post espero que les guste