Styling an image

Currently I am using Snagit to make thumbnails for a product gallery, and I am wondering if it would be better to add a border to the image in Snagit or to use CSS to do the styling?

These are book covers which are white with the only color being from the company logo and then black font for the book title.

Is there any downside to doing everything using CSS?

If it is okay to add the border using CSS, would I apply that to the < img > tag?

Also, how would I add a shadow to the thumbnail using CSS?

No. :unhappy:

Yes and no. :winky: :unhappy:

img {
    box-shadow: 0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 ); /* adjust values to suit  */
 }

Can you elaborate?

Thanks!

Well, I can try…

  1. Yes ~ “it is OK to add the border using CSS”   ~. :winky:

  2. No   ~ “I would not apply that to the <img> tag” ~. :unhappy:

  3. CSS:-

img {
     border: 1px solid rgba( 0, 0, 0, 0.4 );  /* adjust values to suit  */
     box-shadow: 0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 ); /* adjust values to suit  */
 }

coothead

I meant style the img tag so you get a border - not put the style in the img tag.

Sorry for being unclear.

Hi there UpstateLeafPeeper,

if you are making a gallery with links then
you should not use the img element. :unhappy:

Try it like this basic example…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

#gallery {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
 }

#gallery a {
    position: relative;
    display: block;
    width: 6.25em;
    height: 9.375em;
    border: 1px solid rgba( 0, 0, 0, 0.9 );  /* adjust values to suit  */
    box-shadow: 0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 ); /* adjust values to suit  */
 }

#gallery span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url( https://www.coothead.co.uk/images/the-doors-of-perception.jpg );
    background-size: 100% auto;
 }
</style>

</head>
<body> 

 <ul id="gallery">
  <li>
   <a href="https://www.goodreads.com/book/show/3188964-the-doors-of-perception">
    The Doors of Perception
    <span></span>
   </a>
  </li>
 </ul>

</body>
</html>

coothead

Hi there UpstateLeafPeeper,

of course, one would not use separate images for the gallery.
Instead they would all be joined together to form a sprite.

Here is an example for the first two covers…

Sprite:-

books-sprite

Code:-

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

#gallery {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
 }

#gallery a {
    position: relative;
    display: block;
    width: 6.25em;
    height: 9.375em;
    margin: 0.4em;
    border: 1px solid rgba( 0, 0, 0, 0.9 );  /* adjust values to suit  */
    box-shadow: 0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 ); /* adjust values to suit  */
 }

#gallery span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url( https://www.coothead.co.uk/images/books-sprite.jpg );

 }
#gallery li:nth-of-type(2) span {
    background-position: -6.25em 0;
 }

</style>

</head>
<body> 

 <ul id="gallery">
  <li>
   <a href="https://www.goodreads.com/book/show/3188964-the-doors-of-perception">
    The Doors of Perception
    <span></span>
   </a>
  </li><li>
   <a href="https://www.fadedpage.com/showbook.php?pid=20171022">
    Heaven and Hell
    <span></span>
   </a>
  </li>
 </ul>

</body>
</html>

coothead

Hi there UpstateLeafPeeper,

If you are intent on using an img element with a
text description then code it something like this…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

#freeBooksGallery {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
 }

#freeBooksGallery li {
    width: 10em;    /* adjust this value to suit */
    margin: 0.4em;
    border: 1px solid rgba( 0, 0, 0, 0.9 );  /* adjust values to suit  */
    box-shadow: 0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 ); /* adjust values to suit  */
    background-color: #fff;
 }

#freeBooksGallery a {
    display: block;
    text-decoration: none;
 }

#freeBooksGallery img {
    display: block;
    width: 100%;
    height: auto;
 }

#freeBooksGallery span {
    display: block;
    line-height: 1em;
    padding: 0.5em 0.5em 0.75em;
    color: #000;
    text-align: center;
 }
</style>

</head>
<body> 

 <ul id="freeBooksGallery">
  <li>
   <a href="https://www.goodreads.com/book/show/3188964-the-doors-of-perception">
    <img src="https://www.coothead.co.uk/images/the-doors-of-perception.jpg" width="100" height="150" alt="The Doors of Perception">
     <span>The Doors of Perception</span>
   </a>
  </li><li>
   <a href="https://www.fadedpage.com/showbook.php?pid=20171022">
    <img src="https://www.coothead.co.uk/images/heaven-and-hell.jpg" width="100" height="150" alt="Heaven and Hell">
     <span>Heaven and Hell</span>
   </a>
  </li>
 </ul>

</body>
</html>

coothead

Some follow up questions…

1.) Why did you choose < span > over < p > for the book title?

2.) Why did you make the < a > a block?

3.) Why did you make the < img > a block?

4.) Why did you make the < span > a block?

Hi there UpstateLeafPeeper,

  1. I would expect the paragraph - ( <p> ) - element.
    to contain at least one grammatical sentence.
  2. It is not necessary and can be removed.
  3. It is not necessary and can be removed.
  4. It enables the application of padding, line-height
    and text-align attributes.

coothead
.

Fair enough.

Okay.

Oh, I didn’t know that.

Thanks!

Here’s an old thread where @PaulOB explains it :slight_smile:

1 Like

Okay, thanks.