I'm trying to get 2 div's next to eachother with a diagonal space between them.
I've seen multiple tutorials en stackoverflow's about diagonal divs, but they all do this by using 2 borders for the div with a solid color and use the diagonal line those create. But I want to have pictures/background image instead of a solid color. And maybe even other content like text that go's under the diagonal line. And that's not possible when using borders, as a border is outside the div. (floatright with overflow hidden or something for the content.)
Could anybody here give me a hint how to achieve this?
My tests all ended with nothing close to wat I want.
Something like this:
Thanks a lot if anybody could point this out for me.
add following style to the second image
<style>
.img2{
margin-right:-10px;
}
<style>
Related
I am trying to construct this shape in CSS:
But I can't figure out how to put the triangle shape (considering I have a rectangle for the "body" of the tag and a triangle for the tip) facing right. Because I'm working with positions, how can I tell the triangle to appear right after the rectangle, when tags can all have different sizes? I just can't work it out.
You can check the fiddle: http://jsfiddle.net/ExZFe/ with a similar tag to the one I'm making. This example uses just positions, so giving the triangle a fixed position is useless. I tried with :after but got stuck too, because of the same reason. What am I missing? Thank you in advance.
Simply position the triangle using the right property (which start from the right of the rectangle) instead of the left (which starts from the left of the rectangle and is useless here as you can't know the width of the tags): http://jsfiddle.net/Gv3rf/
Just add a line-height to .tag
.tag {
line-height: 10px;
/* the rest of your styles here */
}
http://jsfiddle.net/ExZFe/3/
I have a 3 elements stacked on top of each other. The top element is the overlay content. The second element is a background border image. The bottom element is a background.
What I want to do is hollow out the middle element, so that I can see through the top element into the bottom element, but leave the border of the middle element surrounding the top element.
http://jsbin.com/unimux/4/edit
As you can see the middle element is blocking the view to the bottom element.
Edit: I did try using border-image but it wouldn't render correctly for me with border-radius.
Edit2: is it possible to get the desired effect with border-image? Kudos to anyone who can make it look not terrible with border-image.
Edit3: Some progress based on Zuul's answer:
http://jsbin.com/unimux/15/edit
Setup a new element, with a class, e.g., .apple and place it over all other existent elements with the same image as the bottom one:
See your JS Bin Example Altered!
div.apple {
margin: 100px;
width: 200px;
height: 200px;
background: url(http://www.ipadwallpapersonly.com/images/wallpapers/1gk0rv4ng.jpg) center center;
}
Having the image centred and by give a correct margin value, it simulates the "hollow" effect at the div.middle.
See the result preview:
If the elements dimensions aren't the same, the use of CSS position helps keepping everything into the proper place:
An example here!
You can't really do that with the current state of CSS. Maybe just put the bottom element on top of the middle one, and work?
As per egasimus, you can't really do that with CSS.
Try something like this though, with four divs creating the 'window'.
Sometimes when I hover over images and what not, I see a tiny triangle linking the pop up thing to it's image. For example, the tiny triangle next to your username on the center top of the stackoverflow page. How do I do that? Do you use CSS3 for this? Thanks.
Use this in your HTML source:
▾
You can see the result here: ▾
Or here.
Unicode character U+25BC is a solid triangle pointing down: ▼. You can also finagle html block elements to look like triangles by giving them a width and height of zero and applying special border properties to three of the element's sides. This technique is known as the CSS triangle hack.
You can do it without using image or any unicode character. this trick used by twitter bootstrap to make tooltips. the idea is by using a small box under your popup with a big transparent border but only showing the top border, all done by using css.
check out the explanation here. and a live demo here
Here you go - Its a Unicode Symbol. The full chart is over at Wikipedia.
I have good familiarity with CSS but for some reason I am unable to achieve the result I want in this case.
Here is the link to my test site
http://danberinger.com/test.html
Keep in mind that I want a 2 column layout and that the background wrapper color (gray) is not showing. Instead the body background color image is being put in place of where the wrapper background should be. Any suggestions would be greatly appreciated.
div#wrapper { overflow:hidden; }
Also, depending on how you want the 3 divs laid out, you would need some combination of:
float:left
float:right
and/or
clear:left
clear:right
clear:both
Depending on your desired layout...
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