Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2

Thread: Image styling

  1. #1
    Senior Member timbo89's Avatar
    Join Date
    May 2015
    Location
    Adelaide, South Australia
    Posts
    126
    Member #
    49722
    Liked
    26 times

    Lightbulb Image styling

    If you're anything like me you probably hate the way images look when slapped onto a page, no border to make them stand out, just background, then picture.

    I though i'd share my new favorite way to 'pretty them up'

    temp.jpg

    nothing too flashy, but i looks a lot better than a plain image.

    HTML
    Code:
    <div class="image-container">
    	<img src="imagepath" alt="Image Title" class="image">
    	<p>Image Title</p>
    </div>
    CSS
    Code:
    .image-container {
    	margin:10px;
    	display:inline-block;
    	width:500px;
    	padding:5px;
    	box-shadow: #888 0 0 5px;
    }
    .image-container .image {
    	display: block;
    	width: 100%;
    }
    .image-container p {
    	margin: 5px 0 0 0;
    }
    the reason for making the image width 100% and then adjusting the size using the container width is to avoid pushing the edges on the container out for responsive designs.

    for a mobile, if you use the following CSS, it will still use the page margins rather than going over due to the extra 5px padding on the container.

    Code:
    @media screen and (max-width: 500px) {
    	.image-container {
    		margin:10px auto;
    		display:block;
    		width:auto;
    		padding:5px;
    		box-shadow: #888 0 0 5px;
    	}
    	.image-container .image {
    		display: block;
    		width: 100%;
    	}
    	.image-container p {
    		margin: 5px 0 0 0;
    	}
    }
    it also looks quite good without the image title below the image

    does anyone have any other image styling tips?
    Last edited by timbo89; Jun 24th, 2015 at 07:46 PM. Reason: forgot to add <p> margins

  2.  

  3. #2
    Senior Member timbo89's Avatar
    Join Date
    May 2015
    Location
    Adelaide, South Australia
    Posts
    126
    Member #
    49722
    Liked
    26 times

    CSS3 Polaroid Image Board

    as i was writing up the last post, i came up with this, a little bit fancier looking, i wouldn't use it for everything, but it works well.

    CSS3 Polaroid Photo Board

    temp.jpg

    HTML
    HTML Code:
    <div class="polaroid">
    	<img src="img/image.jpg" />
    	<p>Polaroid Image</p>
    </div>
    <div class="polaroid">
    	<img src="img/image.jpg" />
    	<p>Polaroid Image</p>
    </div>
    <div class="polaroid">
    	<img src="img/image.jpg" />
    	<p>Polaroid Image</p>
    </div>
    <div class="polaroid">
    	<img src="img/image.jpg" />
    	<p>Polaroid Image</p>
    </div>
    <div class="polaroid">
    	<img src="img/image.jpg" />
    	<p>Polaroid Image</p>
    </div>
    <div class="polaroid">
    	<img src="img/image.jpg" />
    	<p>Polaroid Image</p>
    </div>
    CSS
    Code:
    .polaroid:before {
    	width: 100%;
    	height: 40px;
    	content: " ";
    	position: absolute;
    	top: 0;
    	left: 0;
    	margin: -5% 0 0 0;
    	background: url(img/pin.png) center no-repeat;
    	background-size: contain;
    }
    .polaroid {
    	font-family: 'Covered By Your Grace', cursive;
    	line-height: 1em;
    	font-size:18px;
    	text-align:center;
    	display:inline-block;
    	padding:15px 12px 2px 12px;
    	margin:5px 5px;
    	width:200px;
    	background:#fff;
    	box-shadow: rgba(0,0,0,.5) 0 0 10px;
    }
    .polaroid:nth-child(1n) {
    	-ms-transform: rotate(2deg);
    	-webkit-transform: rotate(2deg);
    	transform: rotate(2deg);
    }
    .polaroid:nth-child(2n) {
    	-ms-transform: rotate(-3deg);
    	-webkit-transform: rotate(-3deg);
    	transform: rotate(-3deg);
    }
    .polaroid:nth-child(3n) {
    	-ms-transform: rotate(4deg);
    	-webkit-transform: rotate(4deg);
    	transform: rotate(4deg);
    }
    .polaroid:nth-child(4n) {
    	-ms-transform: rotate(-4deg);
    	-webkit-transform: rotate(-4deg);
    	transform: rotate(-4deg);
    }
    .polaroid img {
    	display: block;
    	width: 100%;
    	margin: 0 0 10px 0;
    }
    .polaroid p {
    	margin: 0;
    	height:40px;
    	overflow:hidden;
    }
    http://users.adam.com.au/vsimkin/ideas/polaroid/
    Last edited by timbo89; Jun 25th, 2015 at 03:44 AM. Reason: Changed some values to "%" to make more flexible


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Tags for this Thread

All times are GMT -6. The time now is 06:20 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com