SoloDesign

HOLA COMO LES VA? EN EL DIA DE HOY LES VOY A TRAER UN NUEVO PROGRAMA, DROPBOX. COMO FUE CREADA + INFORMACION DE DROPBOX. Dropbox es un servicio gratis que te permite llevar tus fotos, documentos, y videos a cualquier lugar y compartirlos con facilidad. Drew Houston y Arash Ferdowsi, dos estudiantes de MIT cansados de estarse enviando archivos por correo, fundaron Dropbox en 2007. En la actualidad, más de 25 millones de personas de todos los continentes usan Dropbox para tener siempre sus cosas a mano, para compartirlas con familiares y amigos, o para trabajar de forma conjunta en proyectos. Seguimos buscando a personas extraordinarias para unirse a nosotros, así que si deseas simplificarle la vida a millones de personas, echa un vistazo a nuestras vacantes. MAS INFO Y EL STAFF DE DROPBOX. (click aca) DESCARGA GRATUITA Y OFICIAL DESDE DROPBOX. (click aca) COMO COMPARTIR ARCHIVOS PARA QUE OTROS PUEDAN DESCARGAR | DROPBOX. #1ARRASTRAMOS CUALQUIER ARCHIVO A LA CARPETA PUBLIC, EN MI CASO UN WINRAR CUALQUIERA #2HACEMOS CLICK DERECHO>>DROPBOX>>COPIAR ENLACE PUBLICO. #3YA COPIADO EL LINK, INGRESAMOS A ESE LINK Y AUTOMATICAMENTE LES SALDRA LA VENTANA DE LA DESCARGA, MI OPINION ACERCA DROPBOX. Me parece un elemento muy bueno. Te ahorras el tiempo de por ejemplo tener que entrar a un host de imagenes, cargarlo, copiar el link, etc. En cambio, con Dropbox, nada mas arrastras el archivo a la carpeta de dropbox, esperas a que cargue y listo!. TIPS PROPIOS 1) Si vas a subir una imagen, subila a la carpeta public. 2) Si pusiste una imagen y le queres cambiar el nombre, tambien lo vas a tener que reemplazar en donde lo subiste. 3) Mantene todo ordenado, con su nombre, etc. ESPERO QUE LES HAYA GUSTADO | @SoloDesign #SoloPhotoshop

Bienvenidos! A mi nuevo post. El mismo va a ser de 3 partes. Hoy les voy a traer 10 excelentes plantillas para Blogguer. En realidad, van a ser 30 ya que voy a hacer 3 partes de 10 plantillas. (los que no tienen link a DEMO es porque no se encontro el Demo del template). Bueno eso fue todo por hoy! Seguime para despues ver las otras 2 partes del post.

HOLA COMO LES VA? EN EL DIA DE HOY LES TRAIGO LA PANTALLA DEL IMAC EN PSD | CORTESIA DE #GraphicPSD. VISTA PREVIA CON EL WALLPAPER DE LIO MESSI ESPERO QUE LES HAYA GUSTADO. VISITA MI POST DROPBOX | ALTERNATIVA AL CIERRE DE MU. #SoloPhotoshop

Bienvenidos a mi post! Hoy les voy a traer Recursos CSS en codigos Voy a ir posteando de a 3 recursos (Siganme para los futuros ) porque son muy largos los codigos. #1 Boton con Hover Elegante Demo Codigo HTML <div class="button gray"><div class="shine"></div>Button</div> <div class="button blue"><div class="shine"></div>Button</div> <div class="button green"><div class="shine"></div>Button</div> <div class="button red"><div class="shine"></div>Button</div> <div class="button purple"><div class="shine"></div>Button</div> <div class="button orange"><div class="shine"></div>Button</div> Codigo CSS body { font-family: 'museoslab500'; text-transform: uppercase; background: #333; font-size: 75%; text-align: center; -webkit-user-select: none; -o-user-select: none; user-select: none; } .button { min-height: 1.5em; display: inline-block; padding: 12px 36px; margin: 40px 5px 5px 0px; cursor: pointer; opacity: 0.9; color: #FFF; font-size: 1em; letter-spacing: 1px; text-shadow: rgba(0,0,0,0.9) 0px 1px 2px; background: #434343; border: 1px solid #242424; -webkit-border-radius: 4px; -khtml-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px; -khtml-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px; -moz-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px; -o-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px; box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px; -webkit-transition: all 0.1s linear; -khtml-transition: all 0.1s linear; -moz-transition: all 0.1s linear; -o-transition: all 0.1s linear; transition: all 0.1s linear; } .button:hover { -webkit-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px; -khtml-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px; -moz-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px; -o-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px; box-shadow: rgba(0,0,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px; } .button:active { -webkit-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px,inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px; -khtml-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px,inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px; -moz-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px; -o-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px; box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px; } .shine { display: block; position: relative; background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); padding: 0px 12px; top: -12px; left: -24px; height: 1px; -webkit-box-shadow: rgba(255,255,255,0.2) 0px 1px 5px; -khtml-box-shadow: rgba(255,255,255,0.2) 0px 1px 5px; -moz-box-shadow: rgba(255,255,255,0.2) 0px 1px 5px; -o-box-shadow: rgba(255,255,255,0.2) 0px 1px 5px; box-shadow: rgba(255,255,255,0.2) 0px 1px 5px; -webkit-transition: all 0.3s ease-in-out; -khtml-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .button:hover .shine {left: 24px;} .button:active .shine {opacity: 0;} .button.gray {background: #555;} .button.blue {background: #3a617e;} .button.green {background: #477343;} .button.red {background: #723131;} .button.purple {background: #4b3f5e;} .button.orange {background: #624529;} #2 Boton de download animado Demo Codigo HTML <div class="button"><div class="outer"><div class="height"><div class="inner">DOWNLOAD</div></div></div></div> Codigo CSS body { font-family: Impact; } .button { height: 80px; width: 180px; cursor: pointer; margin: 50px auto; } .button .outer { position: relative; width: 100%; height: 100%; padding: 10px; background: rgba(0,0,0,0.65); border-radius: 14px; -webkit-border-radius: 14px; -moz-border-radius: 14px; box-shadow: inset rgba(0,0,0,0.85) 0px 1px 5px; -webkit-box-shadow: inset rgba(0,0,0,0.85) 0px 1px 5px; -moz-box-shadow: inset rgba(0,0,0,0.85) 0px 1px 5px; -webkit-transform: perspective(500px) rotateX(35deg); -moz-transform: perspective(500px) rotateX(35deg); } .button .outer .height { position: relative; height: 100%; margin-top: -15px; padding-bottom: 15px; background: #39a02d; border-radius: 16px; -webkit-border-radius: 16px; -moz-border-radius: 16px; box-shadow: rgba(0,0,0,0.85) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 8px; -webkit-box-shadow: rgba(0,0,0,0.85) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 8px; -moz-box-shadow: rgba(0,0,0,0.85) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 8px; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; } .button:hover .outer .height { margin-top: -10px; padding-bottom: 10px; background: #3aaf2d; box-shadow: rgba(0,0,0,0.25) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 6px; -webkit-box-shadow: rgba(0,0,0,0.25) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 6px; -moz-box-shadow: rgba( 0,0,0,0.25) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 6px; } .button:active .outer .height { margin-top: 0px; padding-bottom: 0px; } .button .outer .height .inner { line-height: 2.8em; font-size: 30px; letter-spacing: .05em; position: relative; height: 100%; text-align: center; text-shadow: #8aff7b 0px 0px 1px; background: #44d135; background: -moz-linear-gradient(top, #80ec75 0%, #43d034 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#80ec75), color-stop(100%,#43d034)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #80ec75 0%,#43d034 100%); /* Chrome10+,Safari5.1+ */ background: linear-gradient(top, #80ec75 0%,#43d034 100%); /* W3C */ border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; box-shadow: inset rgba(255,255,255,0.85) 0px 0px 1px; -webkit-box-shadow: inset rgba(255,255,255,0.85) 0px 0px 1px; -moz-box-shadow: inset rgba(255,255,255,0.85) 0px 0px 1px; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; } .button:hover .outer .height .inner{ text-shadow: #99f48d 0px 0px 1px; background: #43d034; /* Old browsers */ background: -moz-linear-gradient(top, #43d034 0%, #67e45c 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#43d034), color-stop(100%,#67e45c)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #43d034 0%,#67e45c 100%); /* Chrome10+,Safari5.1+ */ background: linear-gradient(top, #43d034 0%,#67e45c 100%); /* W3C */ } .button:active .outer .height .inner{ text-shadow: #319926 0px 1px 0px; border-radius: 16px; -webkit-border-radius: 16px; -moz-border-radius: 16px; box-shadow: inset rgba(0,0,0,0.9) 0px 0px 8px; -webkit-box-shadow: inset rgba(0,0,0,0.9) 0px 0px 8px; -moz-box-shadow: inset rgba(0,0,0,0.9) 0px 0px 8px; background: #1d7d12; /* Old browsers */ background: -moz-linear-gradient(top, #1d7d12 0%, #4fd342 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1d7d12), color-stop(100%,#4fd342)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #1d7d12 0%,#4fd342 100%); /* Chrome10+,Safari5.1+ */ background: linear-gradient(top, #1d7d12 0%,#4fd342 100%); /* W3C */ #3 Menu 3D Animado Demo Codigo HTML <div id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a> <ul> <li><a href="#">Mobile Carts</a></li> <li><a href="#">Cart Storage</a></li> <li><a href="#">Wall Stations</a></li> <li><a href="#">Power Systems</a></li> <li><a href="#">Charging Stations</a></li> </ul> </li> <li><a href="#">Company</a> <ul> <li><a href="#">News</a></li> <li><a href="#">Events</a></li> <li><a href="#">Jobs</a></li> </ul> </li> <li><a href="">Partners</a> <ul> <li><a href="#">CDW</a></li> <li><a href="#">Dell</a></li> <li><a href="#">Insight</a></li> <li><a href="#">PC Connection</a></li> <li><a href="#">PDS</a></li> <li><a href="#">Synnex</a></li> <li><a href="#">Liquid PC</a></li> <li><a href="#">More Direct</a></li> <li><a href="#">SHI</a></li> </ul> </li> <li><a href="#">Support</a> <ul> <li><a href="#">Warranty</a></li> <li><a href="#">Login</a></li> </ul> </li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </div> Codigo CSS /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ 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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } body { font-family: 'Helvetica Neue', Helvetica, Arial, Sans-serif; } /**** ELEMENTS ****/ #navigation { width: 700px; height: 40px; margin: 50px auto; border: #a5a5a5 solid 1px; background: #efefef; background: -webkit-linear-gradient(top, #efefef 0%,#dedede 50%,#d8d8d8 50%,#d3d3d3 70%,#dcdcdc 100%); -webkit-border-radius: 20px; -khtml-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset #9e9e9e 0px -2px 0px, inset #FFF 0px 0px 1px, rgba(0,0,0,0.15) 0px 1px 2px; -khtml-box-shadow: inset #9e9e9e 0px -2px 0px, inset #FFF 0px 0px 1px, rgba(0,0,0,0.15) 0px 1px 2px; -moz-box-shadow: inset #9e9e9e 0px -2px 0px, inset #FFF 0px 0px 1px, rgba(0,0,0,0.15) 0px 1px 2px; -o-box-shadow: inset #9e9e9e 0px -2px 0px, inset #FFF 0px 0px 1px, rgba(0,0,0,0.15) 0px 1px 2px; box-shadow: inset #9e9e9e 0px -2px 0px, inset #FFF 0px 0px 1px, rgba(0,0,0,0.15) 0px 1px 2px; } #navigation ul { width: 700px; height: 40px; } #navigation ul li { float: left; width: 100px; height: 40px; position: relative; } #navigation ul li a { display: block; width: 99px; height: 12px; padding: 14px 0px; border-left: rgba(0,0,0,0.2) 1px solid; -webkit-box-shadow: inset rgba(255,255,255,0.8) 0px 0px 1px; -khtml-box-shadow: inset rgba(255,255,255,0.8) 0px 0px 1px; -moz-box-shadow: inset rgba(255,255,255,0.8) 0px 0px 1px; -o-box-shadow: inset rgba(255,255,255,0.8) 0px 0px 1px; box-shadow: inset rgba(255,255,255,0.8) 0px 0px 1px; text-align: center; font-size: 12px; line-height: 12px; text-decoration: none; color: #333; text-shadow: #FFF 0px 1px 1px; } #navigation ul li ul { margin-top: 40px; top: 35px; width: 201px; height: auto; padding: 20px 0px; position: absolute; left: -9999px; opacity: 0; -webkit-transition: all .2s ease; background: rgba(0,0,0,0.5); background: -moz-linear-gradient(top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.6) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0.6))); background: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.6) 100%); background: -o-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.6) 100%); background: linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.6) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.6) 100%); -webkit-border-radius: 0px 0px 20px 20px; -khtml-border-radius: 0px 0px 20px 20px; -moz-border-radius: 0px 0px 20px 20px; -o-border-radius: 0px 0px 20px 20px; border-radius: 0px 0px 20px 20px; -webkit-box-shadow: rgba(0,0,0,0.4) 0px 1px 2px, inset rgba(0,0,0,0.5) 0px 1px 0px, inset rgba(255,255,255,0.5) 0px 0px 3px, inset rgba(0,0,0,0.4) 0px -3px 0px, inset rgba(0,0,0,0.6) -1px 0px 0px, inset rgba(0,0,0,0.6) 1px 0px 0px; -khtml-box-shadow: rgba(0,0,0,0.4) 0px 1px 2px, inset rgba(0,0,0,0.5) 0px 1px 0px, inset rgba(255,255,255,0.5) 0px 0px 3px, inset rgba(0,0,0,0.4) 0px -3px 0px, inset rgba(0,0,0,0.6) -1px 0px 0px, inset rgba(0,0,0,0.6) 1px 0px 0px; -moz-box-shadow: rgba(0,0,0,0.4) 0px 1px 2px, inset rgba(0,0,0,0.5) 0px 1px 0px, inset rgba(255,255,255,0.5) 0px 0px 3px, inset rgba(0,0,0,0.4) 0px -3px 0px, inset rgba(0,0,0,0.6) -1px 0px 0px, inset rgba(0,0,0,0.6) 1px 0px 0px; -o-box-shadow: rgba(0,0,0,0.4) 0px 1px 2px, inset rgba(0,0,0,0.5) 0px 1px 0px, inset rgba(255,255,255,0.5) 0px 0px 3px, inset rgba(0,0,0,0.4) 0px -3px 0px, inset rgba(0,0,0,0.6) -1px 0px 0px, inset rgba(0,0,0,0.6) 1px 0px 0px; box-shadow: rgba(0,0,0,0.4) 0px 1px 2px, inset rgba(0,0,0,0.5) 0px 1px 0px, inset rgba(255,255,255,0.5) 0px 0px 3px, inset rgba(0,0,0,0.4) 0px -3px 0px, inset rgba(0,0,0,0.6) -1px 0px 0px, inset rgba(0,0,0,0.6) 1px 0px 0px; } #navigation ul li:hover ul { -webkit-animation: anim .2s forwards linear; -moz-animation: anim .2s forwards linear; -ms-animation: anim .2s forwards linear; -o-animation: anim .2s forwards linear; animation: anim .2s forwards linear; } #navigation ul li ul li { float: none; height: auto; width: 201px; height: 20px; } #navigation ul li ul li a { width: 161px; height: 12px; padding: 4px 20px; border-left: 0px; background: transparent; -webkit-box-shadow: none; -khtml-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none; text-align: left; color: #fff; text-shadow: rgba(0,0,0,0.6) 0px -1px 1px; } /**** PSUEDO ELEMENTS ****/ #navigation ul li:nth-child(1) a { border-left: 0px; width: 100px; -webkit-border-radius: 20px 0px 0px 20px; -khtml-border-radius: 20px 0px 0px 20px; -moz-border-radius: 20px 0px 0px 20px; -o-border-radius: 20px 0px 0px 20px; border-radius: 20px 0px 0px 20px; } #navigation ul li:nth-child(7) a { -webkit-border-radius: 0px 20px 20px 0px; -khtml-border-radius: 0px 20px 20px 0px; -moz-border-radius: 0px 20px 20px 0px; -o-border-radius: 0px 20px 20px 0px; border-radius: 0px 20px 20px 0px; } #navigation ul li ul li:nth-child(1) a { width: 161px; -webkit-border-radius: 0px; -khtml-border-radius: 0px; -moz-border-radius: 0px; -o-border-radius: 0px; border-radius: 0px; } #navigation ul li ul li:nth-child(7) a { -webkit-border-radius: 0px 20px 20px 0px; -khtml-border-radius: 0px 20px 20px 0px; -moz-border-radius: 0px 20px 20px 0px; -o-border-radius: 0px 20px 20px 0px; border-radius: 0px 20px 20px 0px; } #navigation ul li:nth-child(7):hover { } /**** HOVER STATES ****/ #navigation ul li:hover { } #navigation ul li:hover a { background: -webkit-linear-gradient(top, rgba(220,220,220,1) 0%,rgba(196,196,196,1) 50%,rgba(186,186,186,1) 50%,rgba(189,189,189,1) 100%); -webkit-box-shadow: inset #9e9e9e 0px -2px 0px, inset #EEE 0px 0px 1px; -khtml-box-shadow: inset #9e9e9e 0px -2px 0px, inset #EEE 0px 0px 1px; -moz-box-shadow: inset #9e9e9e 0px -2px 0px, inset #EEE 0px 0px 1px; -o-box-shadow: inset #9e9e9e 0px -2px 0px, inset #EEE 0px 0px 1px; box-shadow: inset #9e9e9e 0px -2px 0px, inset #EEE 0px 0px 1px; } #navigation ul li ul li:hover { } #navigation ul li ul li:hover a { text-decoration: underline; } #navigation ul li:hover ul { display:; } #navigation ul li:hover ul li a { background: transparent; -webkit-box-shadow: none; -khtml-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none; text-shadow: rgba(0,0,0,0.6) 0px -1px 1px; } /**** ACTIVE STATES ****/ #navigation ul li:active { } #navigation ul li:active a { background: rgb(92,92,92); background: -moz-linear-gradient(top, rgba(92,92,92,1) 0%, rgba(117,117,117,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(92,92,92,1)), color-stop(100%,rgba(117,117,117,1))); background: -webkit-linear-gradient(top, rgba(92,92,92,1) 0%,rgba(117,117,117,1) 100%); background: -o-linear-gradient(top, rgba(92,92,92,1) 0%,rgba(117,117,117,1) 100%); background: linear-gradient(top, rgba(92,92,92,1) 0%,rgba(117,117,117,1) 100%); -webkit-box-shadow: inset rgba(0,0,0,0.75) 0px 0px 5px; -khtml-box-shadow: inset rgba(0,0,0,0.75) 0px 0px 5px; -moz-box-shadow: inset rgba(0,0,0,0.75) 0px 0px 5px; -o-box-shadow: inset rgba(0,0,0,0.75) 0px 0px 5px; box-shadow: inset rgba(0,0,0,0.75) 0px 0px 5px; color: #fff; text-shadow: rgba(0,0,0,0.6) 0px 1px 2px; } #navigation ul li ul li:active { } #navigation ul li ul li:active a { } @-webkit-keyframes anim { 0% { left:0; opacity: 0} 100% {left: 0; top: 0; opacity: 1} } @-moz-keyframes anim { 0% { left:0; opacity: 0} 100% {left: 0; top: 0; opacity: 1} } @-ms-keyframes anim { 0% { left:0; opacity: 0} 100% {left: 0; top: 0; opacity: 1} } @-o-keyframes anim { 0% { left:0; opacity: 0} 100% {left: 0; top: 0; opacity: 1} } @keyframes anim { 0% { left:0; opacity: 0} 100% {left: 0; top: 0; opacity: 1} Eso fue todo por hoy (Creditos cssdeck.com) Proximamente otros 3 recursos

Bienvenidos! A mi nuevo post Hoy les voy a enseñar a hacer el logo de Facebook con Photoshop en 3 pasos Asi te va a quedar el logo de Facebook #1 Abrir photoshop y crear un nuevo archivo con los siguientes tamaños. #2 Con la herramienta rectangulo (U) creamos un rectangulo del tamaño que quieran. Ya hecho el cuadro, rasterizan la capa. El codigo para el color del cuadro es el siguiente (para ponerlo en el PS tienen que eliminar el numeral): #3b5998 3 Crear otro rectangulo como el que muestra la siguiente imagen. Tambien lo rasterizamos cuando lo hacemos. El codigo para el color del cuadro es el siguiente (para ponerlo en el PS tienen que eliminar el numeral): #6d84b4 #4 Con la herramienta texto (T) escribimos la F y copiamos la configuracion de la fuente (para abrir la ventana para configurar la fuente tiene que apretar Ventana->Caracter). La fuente se llama Klavika. Como no puedo poner link de descarga aca, busquen en Google la fuente. Eso fue todo! Cualquier duda MP Saludos!

Bienvenidos! A mi nuevo post. Hoy les voy a enseñar a hacer el efecto nashville de instagram con Photoshop. #1 Conseguir una imagen cualquiera. En mi caso este ... #2 Arrastrar la imagen al Photoshop y ponerle 8 de Brillo y 83 de Contraste. #3 Le damos nivel: RGB, Azul y Verde. #4 Le damos Colo uniforme con el siguiente codigo: f2dba4. #5 Le ponemos opcion Multiplicar al color uniforme y le bajamos la opacidad a su gusto. #6 Seleccionamos la capa de la foto y vamos a filtro->interpretar->efectos de iluminacion. Ya abierto el cuadro de efectos de iluminacion, elegimos la opcion linterna y la agrandamos Resultado Final! Eso fue todo! Saludos!!

Bienvenidos a mi post! Hoy les voy a traer Aplicaciones de Firefox para diseñadores web. Si no tenes Firefox, descarga la ultima version Apretando click en la imagen de abajo. #1 Web Developer. Web Developer es un paquete de herramientas indispensables para el desarrollo, tales como un editor de CSS en vivo además de validadores HTML y CSS. #2 Firebug.DESTACADO Firebug es una herramienta de monitoreo y edición en vivo de CSS, HTML y JavaScript, similar a Web Developer pero mas sencilla. #3 Firepicker.DESTACADO Firepicker añade un selector de colores al editor de CSS de Firebug, bastante útil para cuando se esta editando el CSS #4 Greasemonkey. Greasemonkey te permite ejecutar tu propio código JavaScript en cualquier pagina. #5 MeasureIt. Una regla sencilla para medir pixeles, indispensable para todo diseñador. #6 ScreenGrab!.DESTACADO ScreenGrab! permite tomar capturas de paginas web en una selección especifica o en toda la pagina.NO FUNCIONA PARA FIREFOX 10. #7 Colorzilla. ColorZilla es un identificador de color, parecido al clásico gotero de Paint. Eso fue todo! Saludos!

Hoy les traigo un plugin para PS (CS3,4,5,6), que transforma tus estilos de Photoshop a CSS3. #INSTALACION Sirve para Windows/Mac Para PS CS5 o CS6 Para PS CS3 o CS4 #TIP 1. Si es una forma (rectangulo, circulo, etc) no rasterizen la capa porque sino pierde forma en el codigo CSS3. #EsoFueTodo. Espero que te haya gustado, y si no, NO BARDEES.

Hola! Como les va? En el dia de hoy les traigo la forma de crear su cuenta de YouTube sin tener que poner su telefono celular. #1 ENTRAN A ESTE LINK #2 ELIGEN LA SEGUNDA OPCION #3 COMPLETAN LAS CASILLAS CON SUS DATOS (no es necesario los verdaderos) #4 PONEN LOS DATOS, Y DAN A CONTINUAR #5 CONFIRMAN EL E-MAIL QUE SE LES MANDO A SUS MAILS #6 LUEGO DE HABER CONFIRMADO, VAN A YOUTUBE, PONEN EN ACCEDER Y SE LOGUEAN CON LA CUENTA QUE CREAMOS ANTERIORMENTE #7 YA LOGUEADOS EN YOUTUBE, APRETAN EL MENU DESPLEGABLE, APRETAN MI CANAL, Y AHI COMPLETAN SU USUARIO DE YOUTUBE. ESO FUE TODO, CUALQUIER DUDA MP SI VAS A DEJAR PUNTOS, DEJALOS ACA