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. 
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: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
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?
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;
http://css3gen.com/box-shadow/
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.comOn 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
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?
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.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