12y15

Los mindfucks son imagenes que contienen algo escondido, como caras o cosas "raras" y se pueden divertir buscándolas toooooda la larga noche como yo. Acá les dejo algunos, si no encuentran algo preguntenme a ver si los ayudo, gracias de antemano! A BUSCAR!

--------------------------------------------------------------------------------------------------------------------------------------- Buenas taringueros y taringueras. Éste post va dedicado a todo aquel que se dió el lujo de tener una PlayStation 2. Mi segunda consola de mesa, después de la PlayStation 1, como olvidarla. Tantas horas, días, meses, jugando. En fin, éste post se va a tratar de todo lo lindo que pasamos con ésta consola, vamos al post: --------------------------------------------------------------------------------------------------------------------------------------- Si te gustan mis aportes no dudes en seguirme. @12y15 Alguna duda? mandame un MP. Soy muy activo (estoy al pedo todo el día). Si te gustó el post recomendalo a tus seguidores! Si hay algún problema solo avisame y voy a tratar de solucionarlo. --------------------------------------------------------------------------------------------------------------------------------------- ATENCIÓN: Dejá cargar el post, hay muchas imágenes. --------------------------------------------------------------------------------------------------------------------------------------- Segurísimo que fue uno de tus primeros juegos. Tantas tardes compartiendo esos 'torneitos' con tus amigos, por la coca, o por diversión. --------------------------------------------------------------------------------------------------------------------------------------- Por ahí te cansabas ya de tanto PES y querías algo de fútbol pero con más libertad. Cómo olvidarlo, al FIFA Street Y cuando salió el 2, papáaaa que buenos gráficos! --------------------------------------------------------------------------------------------------------------------------------------- Imprescindible en la consola de todo gamer, la famosa saga. Seguro los tenías todos y los jugabas todos los días, cagándote de risa con tus amigos, haciendo bardo y cagándote a palos con las putas y los policías. Ni hablar de esas copias baratas que eran más truchas que chino con rulos, pero vos te las comprabas porque eras re pendejito y te la creías, pero eran simples mods aplicados con la computadora. --------------------------------------------------------------------------------------------------------------------------------------- Uffff, juegazo. De los mejores de PlayStation, señores. El God of War, jue-ga-zo. Gracias a esto te empezaste a interesarte por la historia wachín! --------------------------------------------------------------------------------------------------------------------------------------- Te coparon esos juegos, porque no te alcanzaba con haberte pasado el GoW 1 ni el 2, querías más, entonces te compraste éste: --------------------------------------------------------------------------------------------------------------------------------------- Porque vos tampoco podías creer que este: Tenía mucho mejores gráficos que éste: --------------------------------------------------------------------------------------------------------------------------------------- Salió éste y no lo podías creer, si! salió para Play 2! --------------------------------------------------------------------------------------------------------------------------------------- Y te empezaste a copar con los FPS y le metías al CoD y después ya vino éste y se podía jugar contra tu amigo en la misma tele! --------------------------------------------------------------------------------------------------------------------------------------- Ya tenías todo, pero llegó éste juegazo, de los mejores de la historia para mí. Lo mejor de lo mejor, el Bully. Un simulador de pendejo de mierda que arma quilombo en el colegio, era simplemente perfecto, nos representaba. --------------------------------------------------------------------------------------------------------------------------------------- Imprescindible tambien en la consola de todo gamer, el Mortal Kombat, dios mío qué buena historia y qué gráficos tenía el Armaggedon, éste juego si usaba todo el potencial de la consola. Y le seguiste metiendo ficha hasta que te pudriste y te actualizaste, salió el Shaolin Monks y ya lo tenías. --------------------------------------------------------------------------------------------------------------------------------------- El GTA tardaba una baaanda en que salga uno nuevo, vos no podías esperar y empezabas a buscar juegos similares, pero terminaban siendo grosos de todas formas, aunque sean copias. --------------------------------------------------------------------------------------------------------------------------------------- Otro juegazo, con gráficos y jugabilidad perfecta era el Black era como el Modern Warfare de la Ps2. --------------------------------------------------------------------------------------------------------------------------------------- Después tenías esos juegos que eran un aborto. No sabías si salieron por error o qué onda. No los entendía nadie y eran malísimos. --------------------------------------------------------------------------------------------------------------------------------------- Otra saga que era grosa grosa, era la de Metal Gear Solid. Eso era un juego, infinitas horas en mapas gigantes, una de las mejores sagas. Lo sigo jugando en Ps3. --------------------------------------------------------------------------------------------------------------------------------------- El Guitar Hero, uno de los mejores juegos de la negrita. Si tenías la guitarra eras el centro de atención de todos tus amigos. Yo, por desgracia, jugaba con el joystick nomás. --------------------------------------------------------------------------------------------------------------------------------------- Un simulador de negro villero, siempre Rockstar impresionándonos con sus títulos, alto juego tambien. Horas y horas patoteando por todo el barrio, inyectándote y cagándote a palos con la policía y hasta con los vendedores. --------------------------------------------------------------------------------------------------------------------------------------- Shadows of Rome, otro juegazo histórico. En el coliseo las peleas con lanzas y acházos era lo más groso --------------------------------------------------------------------------------------------------------------------------------------- Uhhh el Budokai Tenkaichi 3, que juegazo, espcial para cagarte a piñas con tus hermanos o amigos. Me pasé el modo historia en todas las sagas. --------------------------------------------------------------------------------------------------------------------------------------- Si bien la Ps2 no tiene tanta antiguedad, muchos ya ni la tienen, se les rompió o la cambiaron por la Ps3, en fin. Eso fue todo, nos vemos en otro post. Si les copa la idea hago segunda parte!

Hola gente, segundo post en el día (si, es raro). En este caso les voy a mostrar como combinar la foto de portada con la foto de perfil en Facebook. Vamos al post: Seguime para ver mis actualizaciones! Dudas? mandame un MP. Soy muy activo (estoy al pedo todo el día) Recomendá el post si te gustó! PRIMER PASO Es momento de elegir la foto que vamos a poner, yo en este caso voy a elegir esta: Usando el efecto de @depaman (un groso). SEGUNDO PASO Para facilitar la edición, eliminar su foto de perfil y portada actuales o dejarlas en blanco. TERCER PASO Abrimos Photoshop y arrastramos el pantallazo o screenshot y luego arriba de ésta arrastramos la imágen que deseemos combinar y le damos 45% de opacidad. Luego, damos CTRL+T y ajustamos la imágen con la foto de perfil y portada. CUARTO PASO Seleccionamos la foto de perfil con la herramienta "marco rectangular". Damos 100% de opacidad y copiamos la imágen. Abrimos un nuevo domcumento de 180x180, la pegamos y ajustamos. Ya hecho esto, la guardamos como .png o .jpg y ya está para ponerla de perfil. Ahora hacemos lo mismo pero con la portada, pero al crear un nuevo ducumento no ponemos ni una medida, ya que la ajustará automaticamente, y la guardamos. QUINTO PASO Ahora solo ponemos cada foto donde corresponde. Y ya tenemos un perfil de lo más original Bueno eso fue todo espero les haya gustado, hoy estuve inspirado nos vemos en otro post, si se animan posteen su resultado

--------------------------------------------------------------------------------------------------------------------------------------- EDIT: Anoche, cerca de las una de la madrugada postee esto y me lo borraron. Ya es el segundo post que hago y me lo borran por acumulación de denuncias (el anterior era de íconos para diseños). La verdad nosé que le ven de malo, pero bueno. Hola taringueros! les traigo un nuevo post. En el mismo van a encontrar un paso a paso para poder pasar de un archivo .PSD (Photoshop) a HTML5 (Lenguaje de código). Ésto nos sirve al momento de diseñar más cómodamente nuestra propia web o sitio independiente. Sin más que decir, pasamos al post: --------------------------------------------------------------------------------------------------------------------------------------- Si te gustan mis aportes no dudes en seguirme. @12y15 Alguna duda? mandame un MP. Soy muy activo (estoy al pedo todo el día). Si te gustó el post recomendalo a tus seguidores! Si hay algún problema solo avisame y voy a tratar de solucionarlo. --------------------------------------------------------------------------------------------------------------------------------------- ATENCIÓN: Dejá cargar el post, hay muchas imágenes. --------------------------------------------------------------------------------------------------------------------------------------- ¿A QUÉ QUEREMOS LLEGAR? --------------------------------------------------------------------------------------------------------------------------------------- A lo largo del tutorial, vamos a tratar de llegar a éste diseño de web, que no es mío. http://interacciondigital.net/wp-content/uploads/2010/08/psdhtmlfinal/ --------------------------------------------------------------------------------------------------------------------------------------- ¿CÓMO LO HACEMOS? --------------------------------------------------------------------------------------------------------------------------------------- Primero que todo, debemos tener claras las secciones del sitio, para eso dibujo sobre el diseño las secciones y les doy el nombre, nos quedaría algo así: --------------------------------------------------------------------------------------------------------------------------------------- Una vez que tenemos bien claras las secciones pasamos a crear las carpetas a donde estarán nuestros archivos: --------------------------------------------------------------------------------------------------------------------------------------- El HTML tendría que quedar algo así: dijo:<body> <div id="contenedor"> <div id="header"> </div><!-- Fin de header --> <div id="<span class="IL_AD" id="IL_AD9">slider</span>"> </div><!-- Fin de slider--> <div id="principal"> <div id="contenido"> </div><!-- Fin de contenido --> <div id="sidebar"> </div><!-- Fin de sidebar --> </div><!-- Fin de principal --> <div id="footer"> </div><!-- Fin de footer --> </div><!-- Fin de contenedor --> </body> </html> --------------------------------------------------------------------------------------------------------------------------------------- Pasemos a recortar las imágenes… Empecemos con el fondo, podemos ver que es una imagen que se repite a lo ancho de la página, entonces usamos la herramienta de selección en photoshop (atajo M) y hacemos una selección de 11px de ancho por 1200px de largo exactamente como muestra la siguiente imagen, vamos a Archivo–>Guardar para web y dispositivos (File–>Save for Web and Devices si tenemos el photoshop en inglés) y lo guardamos como body_bg.jpg: --------------------------------------------------------------------------------------------------------------------------------------- Ahora recortamos el logo, yo lo hice de 201×51 pixeles y lo guardé como logo_bg.jpg no lo guardé con transparencia (png) ya que el fondo es blanco y no lo necesitamos. Pasamos al menú top, como vemos tiene un fondo en grandiente y divisores, para el fondo recortaremos una sección de 1×49 pixeles y la guardamos como nav_top_bg.jpg, al recorte lo hacemos como muestra la siguiente imagen: --------------------------------------------------------------------------------------------------------------------------------------- Ahora debemos cortar los divisores, el recorte será muy parecido, pero esta vez de ancho serán 2px y de alto la misma que el anterior (49px) y le daremos el nombre de separa_nav_top_bg.jpg, lo recortamos así: --------------------------------------------------------------------------------------------------------------------------------------- Al slider no lo haremos con jQuery, lo dejaremos para el próximo tutorial, ya que quiero focalizarme en la maquetación de un sitio ahora, así que cortaremos el slider completo, incluyendo los botones, lo salvamos como dummy_slider.jpg con una medida de 847×97 pixeles. --------------------------------------------------------------------------------------------------------------------------------------- Ahora debemos cortar cada uno de los íconos del menú dentro de la sección de contenido, cada una de las tres imágenes tiene un tamaño diferente, todas en PNG-24 para respetar la transparencia en gradiente: --------------------------------------------------------------------------------------------------------------------------------------- Por otro lado, ocultamos los íconos y recortamos el fondo completo del menú, con una medida de 596×75 pixeles lo guardamos como bg_menu_contenido.jpg como verán, los nombres de las imágenes las hago lo más intuitivo posible, para después con sólo leer el nombre recordar y saber a qué sección pertenecen, les debería quedar algo así: --------------------------------------------------------------------------------------------------------------------------------------- Ahora recortaremos las imágenes que se muestran en la sección “What we do the best” con un tamaño de 102×102 pixeles las guardé como prev01.jpg y prev02.jpg respectivamente. Por último recortamos un triangulito de la sección que muestra los datos de contacto en la página, como verán es un tríangulo q se repite a lo alto según el tamaño del div que lo contenga, me queda una imagen de 12×11 pixeles a la cual le puse el nombre de direccion_bg.jpg, podría haberla guardado como png, pero no me pareció relevante ya que no creo cambiar el fondo de color, muestro como lo recorté: --------------------------------------------------------------------------------------------------------------------------------------- Les debería quedar algo así en la carpeta imgs: --------------------------------------------------------------------------------------------------------------------------------------- Ahora comenzamos con el CSS. Creamos un archivo style.css dentro de la carpeta css que habíamos hecho antes. Yo personalmente utilizo el Notepad++ para escribir código, es rápido, liviano y GRATIS!, lo pueden descargar de acá igualmente pueden utilizar el que quieran, el resultado final es indiferente del soft utilizado para hacerlo. Empecemos con un reset, yo utilizo el de Eric Meyer, esto es para poner los valores de márgenes, rellenos en cero, para que todos los navegadores interpreten nuestra página de igual manera, copiamos y pegamos el código de la página anterior y lo pegamos en nuestro CSS. dijo:html,body,div,span,applet,object,iframe, h1,h2,h3,h4,h5,h6,p,blockquote,pre, a,abbr,acronym,address,big,cite,code, del,dfn,em,font,img,ins,kbd,q,s,samp, small,strike,strong,sub,sup,tt,var, b,u,i,center, dl,dt,dd,ol,ul,li, fieldset,form,label,legend, table,caption,tbody,tfoot,thead,tr,th,td{ margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } body{ line-height:1; } ol,ul{ list-style:none; } blockquote,q{ quotes:none; } blockquote:before,blockquote:after, q:before,q:after{ content:''; content:none; } /*remembertodefinefocusstyles!*/ :focus{ outline:0; } /*remembertohighlightinsertssomehow!*/ ins{ text-decoration:none; } del{ text-decoration:line-through; } /*tablesstillneed'cellspacing="0"'inthemarkup*/ table{ border-collapse:collapse; border-spacing:0; } --------------------------------------------------------------------------------------------------------------------------------------- Ahora pasaremos a darle forma a cada div que creamos anteriormente en el HTML, colocando las respectivas alturas y posiciones, la imágen de las secciones coloreadas puede ayudarnos mucho en esta etapa. dijo:/*===========*/ /*=Maquetaciýn */ /*===========*/ #contenedor{ width: 960px; margin: 38px auto 0 auto; } #header{ height: 109px; } #slider{ height: 197px; } #principal{ height: 758px; } #contenido{ /* width: 645px; Esto es sin posisionar los textos y contenidos, en realidad tiene un margin-left de 73px*/ width: 572px; float: left; } #sidebar{ width: 315px; float: left; } #footer{ /* height: 98px; Hay que restarle los 40px del padding top que le agregamos*/ Ahí tenemos una maquetación muy básica de las secciones creadas en el HTML, ahora debemos completarlo, así que dejemos por un rato el css y rellenemos nuestra página de contenido. --------------------------------------------------------------------------------------------------------------------------------------- Sección de header: dijo:<div id="header"> <h1><a href="#">crisp presentation</a></h1> <ul id="nav_top"> <li><a href="#">Home</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </div><!-- Fin de header --> Al logo lo hacemos con un texto con la etiqueta h1 que luego reemplazaremos con la imágen recortada. El menú es simplemente una lista desordenada de 4 elementos. dijo:<div id="slider"> <div class="img_slider"></div> </div><!-- Fin de slider--> Aquí como mencioné anteriormente debería ir el slider que explicaré como colocarlo en el próximo tutorial, por ahora solamente creamos un div con la clase img_slider que será ocupado por el recorte que hicimos del mismo. dijo:<div id="principal"> <div id="contenido"> <h2 class="titulo">Get Ready for the Crisp!</h2> <p class="desc">Sed mi ipsum, gravida eget volutpat nec, auctor et nisl. Maecenas aliquet, lacus quis consectetur fringilla, nisi nunc malesuada felis, eu ornare elit ligula vitae diam. Phasellus eu nisl mi, fringilla iaculis magna. Vestibulum ante ipsum primis in faucibus <a href="#">orci luctus et.</a></p> <div class="menu_contenido"> <ul class="nav2"> <li class="ideas"><a href="#">Ideas.</a></li> <li class="execution"><a href="#">Execution.</a></li> <li class="passion"><a href="#">Passion.</a></li> </ul> </div> --------------------------------------------------------------------------------------------------------------------------------------- Comenzamos con la sección principal la cual tendrá nuestro contenido y sidebar. El contenido contiene un título que decidí etiquetarlo en h2 un texto introductivo y el segundo menú que será reemplazado por las imágenes más adelante cuando nos toque darle estilo. Continuemos con la segunda parte de nuestro contenido… dijo:<div class="clear"></div> <h2 class="titulo">What we do the best.</h2> <div class="preview"> <a href="#"><img src="imgs/prev01.jpg" alt="Prev01" /></a> <h3>Sed mi ipsum, gravida eget</h3> <p class="desc">Maecenas aliquet, lacus quis consectetur fringilla, nisi felis, eu ornare elit ligula vitae diam. Phasellus eu nisl mi, fringilla iaculis magna. Vestibulum ante ipsum primis in faucibus <a href="#">orci luctus et.</a></p> </div> <div class="preview"> <a href="#"><img src="imgs/prev02.jpg" alt="Prev02" /></a> <h3>Sed mi ipsum, gravida eget</h3> <p class="desc">Maecenas aliquet, lacus quis consectetur fringilla, nisi nunc malesuada felis, eu ornare elit ligula vitae diam. Phasellus eu nisl mi. Vestibulum ante ipsum primis in faucibus <a href="#">orci luctus et.</a></p> </div> </div><!-- Fin de contenido --> Lo primero que encontramos es un div vacío con la clase “clear”, a esto lo explicaré luego cuando veamos el CSS. Como podemos ver se repite la clase titulo que da estilo al H2, esto es porque ambos títulos son iguales. Acá realicé una “caja” con la clase de ‘preview’ que tiene una imágen, un título y su descripción, luego copio y pego el div entero para y solo cambio la imágen a mostrar (prev02.jpg). Ahora pasemos al #sidebar… <div id="sidebar"> <h3>Amazing News</h3> <div class="noticia"> <p><a href="#">Integer vel nulla felis.</a> (24.3.2008)</p> <p class="prev_noticia">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce nec mauris sed quam pulvinar porta. In quam erat, hendrerit at </p> </div> <div class="noticia"> <p><a href="#">Integer vel nulla felis.</a> (24.3.2008)</p> <p class="prev_noticia">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce nec mauris sed quam pulvinar porta. In quam erat, hendrerit at </p> </div> <div class="linea_divisora"></div> <h3>How to contact us</h3> <ul class="direccion"> <li>30 Leicester Square.</li> <li>City, London.United Kingdom.</li> <li>WC2H 7LA.</li> <li>Telephone +44 (0)20 7766 6600</li> <li>Email: <a href="#">[email protected]<script type="text/javascript"> /* <![CDATA[ */ (function(){try{var s,a,i,j,r,c,l=document.getElementById("__cf_email__";a=l.className;if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})(); /* ]]> */ </script></a></li> </ul> --------------------------------------------------------------------------------------------------------------------------------------- Acá no hay mucho que decir, ya que predomina el texto, repetimos el div con la clase “noticia” dos veces, vemos tambien la clase “prev_noticia” que daremos estilo luego y a la dirección la resuelvo por medio de una lista desordenada en la que cada li es un elemento de la dirección o como contactarlos, al ul le damos la clase “direccion” para luego poder darle el fondo que recortamos antes y el resto de estilos. Ya falta muy poco, lo más simple, sólo queda hacer el Footer, sigamos…. dijo:<div id="footer"> <p class="copyright">(c) Cum sociis natoque penatibus et magnis dis parturient montes,</p> <p class="autor">Dum sociis natoque penatibus et</p> </div><!-- Fin de footer --> </div><!-- Fin de contenedor --> ¿Complicadísimo no? jajaja, la verdad que es muy simple, solamente texto, pero igualmente debemos darle sus clases para poder ubicarlos luego en la página. Con esto damos por terminado el HTML, deberían ver en su navegador algo muy feo sin estilos, ni colores ni coherencia, así que manos a la obra nuevamente, tomate 5 minutos, preparate un café y volvé que seguimos con el estilo…. --------------------------------------------------------------------------------------------------------------------------------------- Ahora vamos a pasar a aplicar el CSS. Bueno….voy a tratar de explicar la máxima cantidad de puntos, tal vez a alguien más experimentado le parezca aburrido, pero siempre es bueno refrescar y afirmar los conocimientos. Empecemos por los estilos “fijos”, son los que se repiten varias veces en el html, recordemos que aplicamos el reset anteriormente. dijo:.clear{ clear: both; } body{ background:url(../imgs/body_bg.png) repeat-x; font-family:Arial, Helvetica, sans-serif; font-weight: 100; font-size: 10pt; color: #7b5a47; } a{ color: #7b5a47; font-weight: bold; } Como ven aquí le doy estilo a lo que usamos anteriormente (el div vacío con la clase clear), lo que hace esto es “limpiar” cualquier float que quede del div anterior, se puede usar clear: left, right o both que sirve para ambos lados y es la que uso siempre. Ahora al body le aplicamos el fondo repetido en el eje x, tamaño y tipo de letra predominante en la página y el color. Como se podrán dar cuenta el tamaño predominante no es 10pt sino 12pt según photoshop, pero me gusta siempre empezar con 10pt y después variar el tamaño asignandole valores en em (se van a dar cuenta de que les hablo más adelante) 1em equivale a la medida de la letra “m” del tamaño de letra que estemos utilizando (osea una “m” de 10pt). Como se puede apreciar en la página todos los enlaces están en negrita, es por eso que el estilo que le damos a los links es bold y el color #7b5a47; que vendría a ser un marrón oscuro. --------------------------------------------------------------------------------------------------------------------------------------- Ahora vamos al header... dijo:h1.logo{ background: url(../imgs/logo_bg.png) no-repeat; width:201px; height:51px; float: left; margin-left:65px; } h1.logo a{ display: block; width: 100%; height: 100%; text-indent: -9999px; } Reemplazamos al H1 con clase logo por la imagen recortada, le asignamos el ancho y alto exacto de la misma, le damos un margen izquierdo para que no quede “pegado” al borde y lo flotamos a la izquierda para que el menú top no quede abajo sino que se ubique a la derecha del logo. Luego decimos que todos los enlaces (a) que se encuentren dentro de un H1 con clase logo se muestre como bloque y ocupen el máximo de ancho y alto posible (osea los valores de su parent que son 201×51 pixeles). con la propiedad text-indent: -9999px; enviamos el texto fuera de la pantalla, esto es para que se vea sólo la imágene que colocamos y el texto exista pero no se vea. --------------------------------------------------------------------------------------------------------------------------------------- Pasamos al menú. dijo:#nav_top{ float:right; width: 419px; height: 19px; padding: 15px 0px 15px 35px; margin-right: 20px; text-align: center; background: url(../imgs/nav_top_bg.png) repeat-x; border: 1px solid #ded5cf; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } #nav_top li{ display: block; float: left; margin-right: 20px; padding-right: 20px; height: 35px; background: url(../imgs/separa_nav_top_bg.png) no-repeat right bottom; text-decoration: none; } #nav_top li:last-child{ background: none; Primero al menú lo flotamos hacia la derecha, le asignamos las medidas y repetimos en x el fondo que recortamos antes, le damos el bordeado sólido de 1px con el color correspondiente. Como pueden ver le estamos dando un redondeado a las puntas del menú, con la propiedad border-radius lo hacemos, para que lo pueda interpretar mozilla añadimos -moz-border-radius: 10px y para que la gama de wbekit lo muestre como queremos agregamos -webkit-border-radius: 10px; #nav_top li significa que afectaremos TODOS los li que estén dentro de un elemento con id=nav_top: Los hacemos bloques y los flotamos a la izquierda para que esté uno al lado del otro, luego damos un margin-left y un padding-left iguales de 20px esto es para que entre cada uno de ellos exista la misma separación. background: url(../imgs/separa_nav_top_bg.png) no-repeat right bottom; con esto decimos que a cada elemento li agregue el divisor, que no se repita y que lo agregue a la derecha y abajo. Aquí vemos que sucede algo que no queremos, y es que el último elemento también tiene un divisor, cómo lo eliminamos?? con una pseudo-clase: #nav_top li:last-child esto afectará solo al último elemento li que se encuentre dentro del div con id nav_top. dijo:#nav_top li a{ font-size: 1.2em; text-decoration: none; } #nav_top li a:hover,a:active{ color: #d17b00; } Ahora quitamos el subrayado de los enlaces que se encuentren en un li y a la vez en el div con id nav_top y le aplicamos el tamaño de 1.2em, osea que el tamaño de letra sea 1.2 “m” de 10pt…..se entiende? espero… a:hover -> Cuando el mouse pasa por encima del enlace el color será #d17b00 a:active -> Cuando es presionado el enlace el color será #d17b00 --------------------------------------------------------------------------------------------------------------------------------------- Vamos al slider, que es muy simple: Este sólo es el estilo para posicionar la imágen del slider falso ya que veremos luego cómo colocar un slider funcional usando jQuery dijo:*/ .img_slider{ width: 847px; height: 100%; margin: 0 auto; background: url(../imgs/dummy_slider.jpg) no-repeat; } --------------------------------------------------------------------------------------------------------------------------------------- Ahora si, pasamos al contenido. dijo:#contenido{ margin-top: 50px; } h2.titulo{ font-size: 1.4em; margin-bottom: 25px; } .desc{ width: 480px; line-height: 1.1em; font-size: 1.1em; } Le damos un margen superior de 50px, al título un tamaño y un margen inferior para separar el texto descriptivo al cual le damos un ancho fijo de 480px, tamaño y una separación entre renglones de 1.1em. dijo:.menu_contenido{ margin-top: 50px; width: 596px; height: 75px; position: relative; left:-25px; background: url(../imgs/bg_menu_contenido.png) no-repeat; margin-bottom: 40px; } .nav2{ display: block; width: 685px; height: 50px; padding-top: 15px; margin-left: 40px; } .nav2 li{ display: block; float: left; list-style: none; margin-left: 10px; padding-left: 10px; } .nav2 li a{ color: #523c2f; text-decoration: none; font-size: 1.2em; letter-spacing: .1em; } Al cuadro q va a contener los 3 botones le damos su tamaño y el fondo que recortamos antes, como pueden ver tiene position relative, esto es porque quiero “empujar” un poco este cuadro, que salga del contenedor, lo saco -25px de izquierda con respecto a su parent (osea #contenido) Para los botones no hay mucho que explicar ya que se repiten las propiedades del menú anterior, cambian los valores. Podemos ver en el HTML que a cada li le dimos una clase diferente, esto es porque cada li muestra una imágen diferente con respecto al otro, al estilo lo podemos hacer así: dijo:.ideas{ display: block; height: 46px; width: 152px; padding-top: 18px; background: url(../imgs/lampara.png) no-repeat; } .execution{ display: block; height: 46px; width: 166px; padding-top: 18px; background: url(../imgs/lapiz.png) no-repeat; } .passion{ display: block; height: 42px; width: 153px; margin-top: 3px; padding-top: 15px; background: url(../imgs/corazon.png) no-repeat; } .ideas a{ padding-left: 80px; } .execution a{ padding-left: 50px; } .passion a{ padding-left: 60px; } Como cada imágen es diferente las medidas de ancho y alto varían de uno a otro, pero la idea es la misma, luego a cada enlace de cada uno de los li le damos un relleno izquierdo como para posicionar el texto como nos parezca adecuado. --------------------------------------------------------------------------------------------------------------------------------------- Pasemos a la muestra de productos... dijo:.preview{ margin-top: 45px; } .preview img{ border: 5px solid #c8bbab; float: left; margin-right: 24px } h3{ margin-bottom: 15px; font-size: 1.3em; } Aquí no hay mucho que explicar, solamente que separamos la imágen del resto del texto, le damos un borde ancho, lo flotamos a la izquierda para que el texto que sigue no quede abajo de la imágen y al título un tamaño de 1.3em. --------------------------------------------------------------------------------------------------------------------------------------- Con el sidebar... El sidebar es REALMENTE simple, hay mucha cantidad de texto y si entendieron lo anterior a esta sección la pueden hacer solos, igualmente explicaré paso a paso como vengo tratando de hacerlo, no sé a ustedes, pero amí ya se me terminó el café, voy por otro… Segundo y creo que último café, si, ya falta poquito y terminamos. dijo:#sidebar{ margin-top: 30px; padding: 20px; padding-left: 40px; } #sidebar p{ margin-bottom: 15px; width: 240px; line-height: 1em; } .noticia{ margin-bottom: 45px; } Como vemos aquí damos las dimensiones que contendrán las noticias y la dirección en la barra lateral, a esto lo logramos agregando un relleno de 20px pero uno de 40 del lado izquierdo, las noticias que agreguemos tendrán una separación inferior de 45px con respecto a la siguiente. dijo:.linea_divisora{ border-bottom: 1px solid #d2cdbf; margin-bottom: 45px; } Esto es sólo para crear la línea divisora entre las noticias y la dirección. Nada del otro mundo. dijo:.direccion{ width: 200px; background: url(../imgs/direccion_bg.jpg) repeat-y; padding-left: 20px; } .direccion li{ padding-bottom: 3px; } La dirección se encuentra en un cuadro de un anchod e 200px y tiene un fondo de triangulitos que se repiten a lo alto y está posicionado por defecto a la izquierda, le damos un padding-left de 20px para que el texto no esté sobre el fondo. Luego damos una separación inferior entre cada elemento li de 3px. --------------------------------------------------------------------------------------------------------------------------------------- Footer…lo más fácil para el último. dijo:#footer{ padding-top: 40px; /* Esto afecta la sección Maquetación, está comentado.*/ } .copyright{ float: left; } .autor{ float: right; } --------------------------------------------------------------------------------------------------------------------------------------- Algo para explicar? naa, si llegaste acá entendiste todo supongo. Espero que lo hayan logrado, cualquier duda o consulta no dejen de escribirme, igualmente si encuentran errores, o correcciones por hacer son bienvenidas, estamos para aprender y cambiar. Espero que les haya gustado el post, y nos vemos en el siguiente!