I'd like to be able to add a class to images that adds a border that makes them look like a stack of photos. Anyone know how to do this?
Clarifications: Ideally something like the stack shown here but it doesn't need to be interactive and only needs to work for a single photo. I also don't mind using javascript if needed (jQuery would be preferred though).
The "depth" affect is probably going to be some type of drop shadow. Do you need to rotate the photos as well for the "messy photo pile" effect or are you looking for a "neatly stacked" look?
The "messy photo pile" effect seems to me to break down into three components:
Put a background behind the image for the "polaroid" look (explained in other comments
Put a drop shadow behind the image for the "depth" effect (explained above and in other comments
Rotating images. I've never done this myself but it looks like someone has coded the Jquery plugin you are looking for.
Place your IMG tag inside a nested set of DIV elements (the number of divs will determine the number of photos in the stack). Then use CSS to set the border and padding so that the DIV elements get progressively larger than the photograph. Generally you will add more padding to the bottom and right.
CSS3 it's supported by everyone yet, but you might want to look into border-image.
Put a div around the image and then have 2 styles defined.
<div class="img-shadow"><img ...></div>
.img-shadow {style.css (line 456)
background-color:#505050;
float:left;
margin:5px 0 0 0;
}
.img-shadow img {style.css (line 461)
background-color:#FFFFFF;
border:3px solid #000000;
display:block;
margin:-8px 8px 8px -8px;
padding:10px;
position:relative;
}
in the .img-shadow class, define a graphic for your background that's large enough for your images, and looks like a stack of photos. The above makes it look like the photo is casting a shadow.
Below is my recommendation which has a clear and simple CSS which results in a perfect photo stack.
http://dabblet.com/gist/2023431
Related
I'm working with the Shape5.com Corporate Response Joomla template and been asked to make a change to the color of the four icons for social media in the upper right-hand corner. The demo of this template can be found here:
http://www.shape5.com/demo/corporate_response/
Their CSS for each icon looks like this from the template.css file. I'm just including the first icon to keep this brief, which is for RSS:
#s5_rss {
height:23px;
width:22px;
background:url(../images/rss.png) no-repeat top left;
cursor:pointer;
margin-left:8px;
float:right;
}
#s5_rss:hover {
background:url(../images/rss.png) no-repeat bottom left;
}
The rss.png is here:
http://www.shape5.com/demo/corporate_response/templates/corporate_response/images/rss.png
I've been asked to use CSS to change the active/hover color from what it is now to red. I'm not sure if this can be done with CSS or not. Can it? Or does this require a new .png file created with the image by the designer to be the desired red color?
I'd also like to understand why this rss.png file has two images of the icon inside of it at different shades and how does the CSS toggle between them to know which to use for hover? Is this a special .png file that allows this, perhaps in a different format than most .png files? Thanks!
The image is known as a sprite image: a single image file consisting of multiple sprites which you apply as a single background image, and position according to the constraints set by the width and height properties on an element. It's just a regular PNG image and is not intrinsically different from other PNG images.
As for actually changing the color of the image to red, that is not something you can do with CSS alone depending on what you mean by "changing the color" — the safest bet is to modify the image to add a new sprite with the desired color. Since it's just a regular PNG image it's a simple matter of extending the canvas another 23 pixels down, rendering the new sprite in the extra space that's created, and modifying your CSS so it looks like this:
#s5_rss:hover {
background:url(../images/rss.png) no-repeat center left;
}
#s5_rss:active {
background:url(../images/rss.png) no-repeat bottom left;
}
You can also replace the background:url(../images/rss.png) no-repeat portion with background-position: in your :hover and :active rules as you're really only modifying the background position when using a sprite in CSS:
#s5_rss:hover {
background-position:center left;
}
#s5_rss:active {
background-position:bottom left;
}
Experimental CSS filters are up around the horizon, but without good cross-browser support, you're basically out of luck on that front. If you can handle reduced browser support, go take a look at this overview of CSS filters.
Your current code shows only half the rss.png which conveniently is the exact height of just one of the sub-images within it. When you declare the background: you're telling it to stick the image from the top and hide the bottom half.
On hover, you're instructing it to draw just the bottom half of the image (the hovered state part). To make it a different color, you pretty much need to edit the file (short of having the background image partially transparent and showing a red background through it).
Overall, there's nothing magical going on, just well-documented magic that we all share and use every day.
Currently there is no way to change the colours within an image using css and likely there will either never be or a long way off. There is the potential to do a color overlay but this would not help unless the image you were dealing with was a block colour.
In order to change the color you will need a separate image to reference on the hover styling rule for that element.
The alternative way to do this is to use a sprite, where all the images are loaded as one image and css just focuses on a portion of it depending on the state ie hover, active etc. This is what you mentioned earlier. Have a look at the following links for information on using a sprite, but put simply if you have a 40*40px social icon. You would create a 40*80 image and then in css say use the top half for normal and the bottom for hover. This actually saves time when loading your page and you should always try and use sprites where ever possible, remember the faster the page the better for the user.
http://css-tricks.com/css-sprites/ (good guide on sprites)
http://spriteme.org/ (very handy and will do the work for you - recommended)
I'm having a big issue with something so "small" I can't figure it out and I'm reaching out to everyone here. The issue I'm having is this:
I have photos which are roughly 512px or 800px wide I want to fit, CENTERED, in a circle display area and keep my hover effects. I also need to size them the photos so the centered part shows a decent amount of the photo.
The current code I'm working with will make them perfect circles IF the photos are perfect squares. The problem is when the photo is a rectangle, it turns into an oval.
I had created a div like below using overflow:hidden and the css but it conflicted with the current CSS. Any help would be appreciated immensely!
.thumby {
width:200px;
margin: 0 auto;
overflow:hidden;
position: relative;
height: 200px;
border-radius: 100% 100% 100% 100%;
}
img.absolutely {
left: 50%;
margin-left: -256px;
top: 50%;
margin-top: -200px;
position:absolute;
width:512px;
}
Here's the link to my dev pages.
http://www.lmcodebox.com/b-test/index5.html
http://www.lmcodebox.com/b-test/portfolio.html
have you thought about setting the image as the background of the div? This way you keep all the effects you already use and there are ways to manipulate the background position without affecting the outside div. Other possible solution to have perfect round divs, is to use the ::after pseudo-class, like in this gallery tutorial:
http://webdesignerwall.com/tutorials/decorative-css-gallery-part-2
Sorry if I misunderstood you, hope it helps.
PS.: Beautiful test page by the way.
Well first, you'd only need to set the border radius to 50% to make something a circle, and if each corner is the same value, then you can just enter it once like so:
border-radius:50%;
As far as these images being rectangles goes, you could set your images as the background of a span, give it a height and a width that forms as square and use display block. This would keep the photos proportional, but allow you to make them square.
This however, could create a bit of a markup mess if you have a lot of images to display. Another solution, which means more work, but I would personaly do it, is to just crop your images into squares for their thumbnail with photoshop or some other image editing tool.
Above all of that, I don't see a width or height actually declared on the pages you linked. Are you sure you've placed them on the correct class? I see the border radius declared, but I'm only seeing a max-width: 100%; not width: 200px or height:200px
I re-thought the problem with the suggestion of using the images as backgrounds of an element as madaaah did above.
What I ended up doing was wrapping a DIV around my A tag like this:
then, I set the background of the A like this: style="background:url(PHOTO URL HERE) no-repeat;background-position:center;">
lastly, I made a square image (800 x 800) to go inside the A tag so it would keep the round shape and made it completely transparent so the background image is visible, while growing and shrinking in a "responsive" manner.
If I have a background image that is, let's say, 20px in width, and I want it to rather be 40px in width (but adjusting in photoshop would not work as I want it).
How can I change the width?
body {
background-color:#5b7c8a;
background-image:url('images/diagnol.png');
background-repeat:repeat-y;
margin:0;
}
It's diagonal lines as you can see from the image,
screenshot http://img62.imageshack.us/img62/4263/testzjr.png
and the spacing is just as I want them. Editing the image may mess up the spacing. So I'm trying to get the background coverage area of the body to be a little bit more? Right now the image is 6px width. I want it to appear as 20px width, as if the image were in repeat-x-y in a 20px div? (so not stretching the image, just gaining more ground with the image)?
I hope this makes sense > <
"adjusting in photoshop would not work as I want it"
CSS is not image editing software. In photoshop you just need to go to Image > Image Size and scale as you wish. Or take your time and learn to use the basics of Photoshop to get the effect you want. You just need to not be scared and experiment with each tool till you get what you want, as you can obviously undo the undesired effects.
The CSS way is possible but it's not meant for these kind of situations and will not be cross browser friendly. It's rarely used on typical sites so fortunately I'm not going to encourage it. Good luck.
I believe there's been misunderstandings with what the OP wants.
Incase i got it right, check out this example:
http://jsfiddle.net/vYxza/
Think of the #text as body and the .this_div as the element you need to create inside it.
Basically you create new element where you repeat the background in all directions but you just restrict the width of that element.
Another way of doing it:
http://jsfiddle.net/vYxza/1/ - This is actually the way i would do it mostlikely.
Note that again.. if you wanted to use it in body... think of .this_div as html and #text as body
This is my issue.
I have a menu using an image sprite, the image has transparencies, but when I add a :hover, it works, but I am still able to see the original image at the end.
Is there a way to make the hover show the image that I want and REPLACE the original one?
Thanks,
Marco
You can replace an image by using it as a background-image instead of using the <img> tag.
But most of the times, this is slow and another way is maybe good practice:
Create an image that has the :hover image next to it [img|hoverImg]
Do a styling with background-position to change the background.
Like this:
.menuItem
{
background-image: url('hello.jpg');
width:100px;
height:30px;
}
.menuItem:hover
{
background-position: 100px; /* Or whatever measure your image is */
}
The problem with this, is that the image size is fixed. You really have to specify it, instead of just doing this with an image.
I like this as the best way. If you want to set the src in your <img>, this can be done with Javascript, but is much heavier most of the time, because you have to load an extra image from the server.
I have a web application whose performance I am working to enhance. In an attempt to do this, I decided to use css sprites. I have placed all of my images in a .png file called images.png.
CSS sprites have worked well for all css classes that just display an image once. However, several of my images need to be repeated. For instance, I have a banner.png image used for the banner background. Whenever I set the background-repeat property, it seems that the image does not repeat. To show my CSS definitions, here they are:
Before CSS Sprites
------------------
.ghwc {
background-image: url(/images/layout/banner.png);
background-repeat:repeat-x;
color:White;
width:300px;
}
After CSS Sprites
-----------------
.ghwc {
background-image: url(/images/images.png);
background-repeat:repeat-x;
color:White;
background-position:60px 319px;
width:300px;
}
My question is, how do I use CSS sprites for repeated images like backgrounds?
Thank you,
My question is, how do I use CSS sprites for repeated images like backgrounds?
You don't. That is simply not possible using CSS sprites. To do that, you would have to be able to specify an area of the image that is to be repeated, and to my knowledge that is impossible in both CSS 2 and 3.
You can do this if you're only background-repeat:repeat-x; as in the example, you just need to make all backgrounds contained within the sprite image container the same width and lay the sprite image file out vertically. Then your background position property will always have the first x position be 0 and the sprite is located with the second y position (e.g. background-position:0 0; background-position:0 -100px; background-position:0 -200px; etc) . This might not work across all browsers if you can't specify the exact height and set overflow:hidden.
Assuming your background image (images.png) shows at all, your code should work. If you want this to render correctly on Opera and Firefox, you'll need to add
background-attachment:fixed;
Edit: I just realized you're probably talking about a specific coordinate set in a "sprite" image comprised of several 'images'. You're not going to get any one particular area of an image to repeat like that. Crop the image to the size you're concerned about, then use the code you have.
If you want to use repeat-x, you must not put several images next to each other in your sprite as the whole sprite is duplicated in x-direction (as you already noticed). But you can put them in one vertical line. (The other way around if you want to use repeat-y. There is nothing like "background-crop" up to now (maybe in CSS4? ;) )