Biblioguías: Blog

Añadir una sombra a una imagen

Para que una imagen resalte en el cuerpo de una caja, puedes añadirle una sombra desde el editor HTML. Puedes ver un ejemplo en http://biblioguias.ulpgc.es/biblioguias.

Para ello sigue los siguientes pasos:

1. Edita el contenido de una caja en la que tengas una imagen añadida.
2. Pulsa el botón Fuente HTML para acceder al código.
3. Localiza el código de la imagen a la que deseas añadir una sombra. (puedes, con el buscador Control+F localizar el código imr). Las características de la imagen y su URL se enmarcan en etiquetas img:: <img alt="" src="http://biblioguias.ulpgc.es/ld.php?size=medium&amp;screenshot=site_screenshot.png" />
4. Inserta el código style="box-shadow: 10px 10px 5px #888888;" dentro de la etiqueta <img. En el ejemplo anterior quedaría así: <img alt="" src="http://biblioguias.ulpgc.es/ld.php?size=medium&amp;screenshot=site_screenshot.png" style="box-shadow: 10px 10px 5px #888888;" />

Tambien puedes usar un generador de códigos en línea como Mozilla Generator y copiar y pegar el código en la caja.

Instrucciones en inglés:

Make an Image Pop with Box-Shadows

Not unlike ghosts, images can sometimes 'blend' into the white space behind it. Making them almost invisible to the eye. It would be so much easier to spot those ghosts if they had a shadow. The same goes for your images! 

Using CSS box-shadows, give your images dimension, making them visually 'pop' out of the webpage they're embedded on. Plus, if you add the box-shadow property you won't have to redesign the image over and over again in Photoshop. Simply change the box-shadow properties right inside your LibGuide.

And, if you're not a CSS/HTML-expert, no worries. If you can copy and paste and understand the basic principles of how box-shadows work, you're good to go!

Step One: Understanding Box-Shadow Declarations

If you've ever seen a box-shadow CSS statement, it can be hard to understand which rule effects what. 

Here's a quick breakdown of structure:
(Note: There are more attributes you can add, this is just the basic structure)

•   Vertical-Shadow  : The position/depth of the vertical shadow.
•   Horizontal-Shadow  : The position/depth of the horizontal shadow.
•   Blur:   How far you want the blur distance to extend, the larger the value, the bigger and blurrier the shadow.
•   Color:   The color of the shadow; default is black.

Step Two: Creating Box-Shadow CSS

There are two ways to create box-shadow code:

• Noobie Users: Make use of box-shadow generators that allow you to customize the all the elements and copy/paste the resulting code.
  • CSSmatic.com
  • Mozilla Generator
  • CSS3gen.com
• Experienced Users: Copy/paste the below primer code and experiment with the values!
  • Experiment! There are more attributes you can add to your box-shadow declaration.

Step Three: Adding To Your LibGuides Images

• Navigate to your LibGuide > Rich-Text Asset > Add Image.
• Once the image has been added, click the SOURCE button in the Rich-Text Editor
• Locate the <img> tag and add the box-shadow code, preceded by the style tag.