Entradas

Mostrando las entradas etiquetadas como css

Poner en negritas parte de un texto en una página

Imagen
Este efecto lo he visto en un sitio llamado DePeru.com en sus noticias hay un texto que no está en negrita con la etiqueta <strong> o <b> sino que se convierte en negrita gracias a Jquery (en el código fuente). El uso de este efecto se puede trasladar a muchos otros escenarios donde podríamos necesitar cambiar los estilos para nuestras páginas. Para este caso el webmaster ha detectado que todos sus textos tienen un <p> que empieza con una raya (o guión) ... visto desde el código fuente por supuesto. <p>- Multiplicar el impacto -</p> Para cualquier otra aplicación podría ser un <h1>, <a>... etc El truco es simple, debajo de la llamada al archivo Jquery externo y antes de finalizar el body agregar el script : <script> $( ".contenido p:contains('- ')" ).css( "font-weight","bold" ); </script> </body> </html> Dónde :     .contenido es el class que contiene al texto, lu

Protege tus fotos propias con imágenes sobrepuestas

Imagen
En internet hay 03 tipos de usuarios, los novatos, los intermedios y los expertos, para estos últimos que tienen altos conocimientos, será imposible intentar bloquear una imagen, sin embargo para los otros dos primeros y que son la mayoría si es viable. Un truco poco difundido es usar imágenes transparentes, normalmente gif o png que se colocan encima (sobreponer) de la imagen que se desea proteger. El usuario al dar clic derecho no podrá grabar la imagen protegida, sólo tendrá acceso a grabar la imagen transparente que se encuentra encima. Las imágenes transparentes la podemos crear en cualquier tamaño, se pueden estirar sin problema porque no tienen información visual y con cualquier programa gratuito se pueden realizar. Veamos el ejemplo, protegeremos la imagen que se ve: Aún poniendo la foto en una plataforma gratuita como blogger es posible proteger las fotos, ahora veamos el código: <img alt="foto escondida" height="384" src="

Superponer una imagen sobre otra con CSS

Imagen
El otro día me encontré con la necesidad de superponer una imagen sobre otra, mi aplicación debía mostrar una imagen y luego encima colocarle un marco quedando superpuesto. Claro está que la imagen superpuesta como un marco debe ser trasparente en su interior para poder mostrar la imagen que va debajo. Hay dos maneras de hacerlo, una poniendo el estilo en un archivo externo o incrustado en el <head> de la página web o sino agregándolo en el mismo DIV. <div style="position:relative"> <img src="imagen_debajo.jpg" width="268" hspace="16" height="268" vspace="16" /> <div style="position:absolute; top:0; left:0;"> <a href="http://www.guiaplaza.com"> <img border="0" src="marco_chistes.png" width="300" height="300" /> </a> </div> </div> Si desean la opción completa es la siguiente: <html> <he

Atributos avanzados en CSS para diferentes tipo de Enlaces

Imagen
Con CSS se puede hacer que cada link (vínculo o enlace) tenga un color distinto o cualquier regla de estilo que se desee, por ejemplo los enlaces a otras páginas de nuestro sitio de color rojo, los vínculos a enlaces externos de color verde y los links a imágenes o documentos de color azul, veamos como se hace esto:  a[href*="guiaplaza.com"] {color:#CD3300;}

69 imágenes para efecto Cargando

Imagen
Muchos webmasters usan imágenes para las áreas de espera de carga de sus páginas, formularios, imágenes, etc. Esta es una galería de imágenes que les servirá de mucha utilidad. Se pueden utilizar con cualquier hoja de estilos (css), JS o jQuery.

La facilidad de la propiedad Shorthand en CSS

Imagen
Usar el sentido horario Muchos de nosotros usamos las hojas de estilo (CSS) a diario y cuando se aprende con la práctica a veces se nos escapa la teoría básica que aunque es muy sencilla, resulta útil en todo momento. Para las hojas de estilo es imprescindible ahorrar espacio reduciendo y abreviando las reglas para conseguir mayor velocidad en nuestras páginas web, como sabemos hoy en día los dispositivos móviles acceden a las mismas páginas, pero tienen la peculiaridad que no son tan rápidas como los ordenadores y laptops. Hay varias propiedades cuyos valores se pueden agrupar con lo que conseguimos ahorrar espacio visible y reducir el tamaño de los archivos. Por ejemplo: margin-top: 10px; margin-bottom: 5px; margin-right: 12px; margin-left: 15px; Se puede usar en reemplazo: margin: 10px 5px 15px 20px; Y el orden de los valores se definen de acuerdo a las manecillas del reloj o conocido como sentido horario : 10px  » arriba. 5px » derecha. 15px  » aba