[Pro] How is this image background created?

I’m really digging how this designer displays the photos in his blog. How is the picture frame background to this image (the car) created?

http://www.unleashedideas.com/blog/new-car-smell


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It’s a combination of border size (in white) on the photo, and a separate background image with the shadow on the DIV that wraps around the photo. You could do this much more simply with the CSS3 Shadow Action and a white border on your photo.

Walter

On Sep 18, 2012, at 9:28 PM, RavenManiac wrote:

I’m really digging how this designer displays the photos in his blog. How is the picture frame background to this image (the car) created?

http://www.unleashedideas.com/blog/new-car-smell


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I like simple. :slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 19 Sep 2012, 1:38 am, waltd wrote:

It’s a combination of border size (in white) on the photo, and a separate background image with the shadow on the DIV that wraps around the photo. You could do this much more simply with the CSS3 Shadow Action and a white border on your photo.

Walter

Walter, is there anyway to create something similar in code? I want to have this border and drop shadow effect for plain images my client will upload through a Perch enabled website. Here’s the code that creates the image.

Thanks!

perch:before

<perch:if exists="paging">
    <div class="paging">
        Page <perch:blog id="current_page" /> of <perch:blog id="number_of_pages" />
        <perch:if exists="not_first_page">
            <a href="<perch:blog id="prev_url" encode="false" />">Previous</a>
        </perch:if>
        <perch:if exists="not_last_page">
            <a href="<perch:blog id="next_url" encode="false" />">Next</a>
        </perch:if>
    </div>
</perch:if>

</perch:after>


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Create a style with the border/shadow that targets only those images in list items.

You could probably shorten the below selector but for the sake clarity here’s the whole spiel:

ul.hfeed li.hentry img {
	styles here
	}

Todd
http://xiiro.com

On Sep 20, 2012, at 2:26 PM, “RavenManiac” email@hidden wrote:

Walter, is there anyway to create something similar in code? I want to have this border and drop shadow effect for plain images my client will upload through a Perch enabled website. Here’s the code that creates the image.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Sure. You would add this CSS to your stylesheet (either in the head of the page, or externally, depending on how you’ve organized your code):

.hentry img {
	padding: 12px;
	background-color: #fff;
	box-shadow: #666 0 0 12px 0;
}

You don’t need to apply that to anything, any image in that part of the page will just pick up the style through the CSS cascade. If you wanted to make it more specific, you could alter the Perch code to add a specific classname to the images (just add class=“foo” in your Perch template code where it defines the tag) and then alter the style definition to .foo { style stuff here }.

Walter

On Sep 20, 2012, at 3:26 PM, RavenManiac wrote:

Walter, is there anyway to create something similar in code? I want to have this border and drop shadow effect for plain images my client will upload through a Perch enabled website. Here’s the code that creates the image.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 20 Sep 2012, 7:54 pm, waltd wrote:

Sure. You would add this CSS to your stylesheet (either in the head of the page, or externally, depending on how you’ve organized your code):

.hentry img {
padding: 12px;
background-color: #fff;
box-shadow: #666 0 0 12px 0;
}

You don’t need to apply that to anything, any image in that part of the page will just pick up the style through the CSS cascade. If you wanted to make it more specific, you could alter the Perch code to add a specific classname to the images (just add class=“foo” in your Perch template code where it defines the tag) and then alter the style definition to .foo { style stuff here }.

Walter

This worked great. The images are currently set to crop. Is there anyway to scale them proportionally with code?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I really like the new CSS3 shadow code, but I have a question. The code as you have it is:

box-shadow: #666 0 0 12px 0;

I just checked w3schools and the attributes they list are different. What do each of yours indicate?

And finally, why am I worried about jpg vs pngs if I have this code available to me? :slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You could cause them to scale to fit the container they are in, if that’s what you mean by proportionally. First, you have to make sure that the images do not have height or width properties in the body of the img tag. Since you’re using Perch, you can just remove those parts of the HTML from your template. Then you set the width of the image to a percentage – 100% or some other amount. Remember if you are using the padding and shadow effect, you have to count the padding into the dimensions of your finished element. If you apply 100% width and have 12px of border all around, the result will be an image that is 100% + 24px – poking out of the sides of the container.

There’s another trick you can apply to get around that:

-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

With those three attributes (in that order) added to your style rule for images, you can size them to 100% width with impunity. The 100% will be measured from the outer edge of the layout box – including the fixed-dimension padding that you used to make the border.

Walter

On Sep 20, 2012, at 7:37 PM, RavenManiac wrote:

This worked great. The images are currently set to crop. Is there anyway to scale them proportionally with code?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I don’t know where I got that. It should be

0 0 12px #666;

Walter

On Sep 20, 2012, at 8:19 PM, RavenManiac wrote:

box-shadow: #666 0 0 12px 0;


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 20 Sep 2012, 7:58 pm, Todd wrote:

Create a style with the border/shadow that targets only those images in list items.

You could probably shorten the below selector but for the sake clarity here’s the whole spiel:

ul.hfeed li.hentry img {
	styles here
	}

Todd
http://xiiro.com

On Sep 20, 2012, at 2:26 PM, “RavenManiac”

Todd, this sounds like a cool solution, but I’m not sure where to begin.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It’s the same as Walter’s code except I wrote it starting from the containing ul element to give you sense of how the selector progressively narrows it’s focus. The result is the same. If I were doing it I would use the shorter option.

Todd
http://xiiro.com

On Sep 20, 2012, at 10:44 PM, RavenManiac email@hidden wrote:

Todd, this sounds like a cool solution, but I’m not sure where to begin.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I think perhaps that CSS applied width and height to an image will now override the inline img tag width and height. At least was what I’d discovered a while back in a different thread.

Ernie Simpson

On Sep 20, 2012, at 10:56 PM, Walter Lee Davis email@hidden wrote:

You could cause them to scale to fit the container they are in, if that’s what you mean by proportionally. First, you have to make sure that the images do not have height or width properties in the body of the img tag. Since you’re using Perch, you can just remove those parts of the HTML from your template. Then you set the width of the image to a percentage – 100% or some other amount. Remember if you are using the padding and shadow effect, you have to count the padding into the dimensions of your finished element. If you apply 100% width and have 12px of border all around, the result will be an image that is 100% + 24px – poking out of the sides of the container.

There’s another trick you can apply to get around that:

-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

With those three attributes (in that order) added to your style rule for images, you can size them to 100% width with impunity. The 100% will be measured from the outer edge of the layout box – including the fixed-dimension padding that you used to make the border.

Walter

On Sep 20, 2012, at 7:37 PM, RavenManiac wrote:

This worked great. The images are currently set to crop. Is there anyway to scale them proportionally with code?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

In my experience, it does require that you remove the height and width if you want the image to proportionally scale. You can’t set the width to 100% in a head or external stylesheet (and not set the height at all) if the image has a height attribute defined at the tag level. That’s the highest level of specificity in the cascade.

http://scripty.walterdavisstudio.com/scaling

Top image has a height and width attribute, the bottom one does not.

Walter

On Sep 21, 2012, at 12:07 AM, Ernie Simpson wrote:

I think perhaps that CSS applied width and height to an image will now override the inline img tag width and height. At least was what I’d discovered a while back in a different thread.

Ernie Simpson


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walter, respectfully disagree with your finding…

http://cssway.thebigerns.com/workbench/image_size/walter_revisited.html

I cannot explain why things are different now, yet I find that CSS seems to
ignoring the Freeway Pro method of inline image size attribution.

http://cssway.thebigerns.com/workbench/image_size/index.html

I have been unable to explain what seems to me (and to yourself, I presume)
a change in browser preference for these attributes. I cannot recall
offhand if there are other issues involved, like is this html5 behavior or
does it mess with validation?

Best wishes,

Ernie Simpson

On Fri, Sep 21, 2012 at 9:26 AM, Walter Lee Davis email@hiddenwrote:

In my experience, it does require that you remove the height and width if
you want the image to proportionally scale. You can’t set the width to
100% in a head or external stylesheet (and not set the height at all) if
the image has a height attribute defined at the tag level. That’s the
highest level of specificity in the cascade.

Scaling those Images

Top image has a height and width attribute, the bottom one does not.

Walter

On Sep 21, 2012, at 12:07 AM, Ernie Simpson wrote:

I think perhaps that CSS applied width and height to an image will now
override the inline img tag width and height. At least was what I’d
discovered a while back in a different thread.

Ernie Simpson


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You are absolutely correct. Your code does include a 100% value for the image height, though, and mine does not. Just to be sure, I tested your page in dear old IE 8, and found that it still holds up there as well. Case closed, then?

Walter

On Sep 21, 2012, at 1:28 PM, Ernie Simpson wrote:

Walter, respectfully disagree with your finding…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

What I still am somewhat curious about is when why this changed or has it
always been so, as I have labored forever under the belief the inline tag
attributes were inviolate. I am more relaxed and happy in the knowledge
they are not.


Ernie Simpson

On Fri, Sep 21, 2012 at 1:54 PM, Walter Lee Davis email@hiddenwrote:

You are absolutely correct. Your code does include a 100% value for the
image height, though, and mine does not. Just to be sure, I tested your
page in dear old IE 8, and found that it still holds up there as well. Case
closed, then?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options