Styling an image

UpstateLeafPeeper · October 19, 2019, 10:26pm

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?

coothead · October 19, 2019, 11:20pm

No.

Yes and no.

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

UpstateLeafPeeper · October 19, 2019, 11:22pm

Can you elaborate?

Thanks!

coothead · October 20, 2019, 10:16am

Well, I can try…

Yes ~ “it is OK to add the border using CSS” ~.
No ~ “I would not apply that to the <img> tag” ~.
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

UpstateLeafPeeper · October 20, 2019, 7:23pm

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

Sorry for being unclear.

coothead · October 20, 2019, 8:08pm

Hi there UpstateLeafPeeper,

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

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

coothead · October 20, 2019, 9:00pm

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

coothead · October 21, 2019, 12:54pm

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

UpstateLeafPeeper · October 21, 2019, 3:48pm

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?

coothead · October 21, 2019, 7:10pm

Hi there UpstateLeafPeeper,

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

coothead
.

UpstateLeafPeeper · October 21, 2019, 7:14pm

Fair enough.

Okay.

Oh, I didn’t know that.

Thanks!

RyanReese · October 22, 2019, 3:20pm

Here’s an old thread where @PaulOB explains it

UpstateLeafPeeper · October 22, 2019, 3:25pm

Okay, thanks.

system · January 21, 2020, 10:38pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.