So Facebook displays a popover showing a profile-preview of the person on whose name you're hovering. If you have problems reproducing this, because the popover always appears on top of the name, just scroll down a little, leaving it not enough room to be shown above the name. Here's an example:
http://i.stack.imgur.com/bD1lk.jpg
(apparantly i need 10 posts for images.. sorry!)
There's this little triangle showing its part of the respective background image. What technique was used to achieve this? I haven't been able to come up with a solution, yet. Since it doesn't seem to be css3 masking and generating a single image for each picture would be kinda overkill...
I hope you can help me out here.. Either i'm just using the wrong search queries or the solution is deliberately hiding from me!
Thanks in advance!
Cheers
// edit:
I have played around a little more and found out, that the space around the triangle definitely is transparent as seen in the following picture:
http://i.stack.imgur.com/7jBIj.png
This means it's not the technique shown by kalley (which is a really nice start, tough!).
You could try something like this: http://jsfiddle.net/Z6fYj/
It requires that you know the background color that it's going to be on top of, but you can see the effect.
.img {
background: url(...) no-repeat;
background-size: 500px auto;
/* -10px relates to the top position of :before */
background-position: 0 -10px;
width: 500px;
height: 372px;
position: relative;
margin-top: 20px;
}
.img:before {
background: url(...) no-repeat;
background-size: 500px auto;
/* -40px is the opposite of the left property */
background-position: -40px 0;
position: absolute;
width: 0;
top: -10px;
left: 40px;
content: '';
border-bottom: 10px solid transparent;
border-right: 10px solid #fff;
border-left: 10px solid #fff;
}
I'm not sure if that's exactly how facebook is doing it (can't seem to trigger the mouseover manually...), but this can probably give you a start.
Related
I've created a toolbar using 14px x 14px images stored in a sprite. When displayed, the image has a very clear thin white edge on the top and right sides (you may have to zoom in to see it - it's no more than 1px). For the life of me, I don't have any idea how to get rid of it. I've tried moving the offset 1px in any direction - which clearly shows it's positioned correctly. Changing margin and padding don't fix it. Any ideas how to get rid of the white lines and what is causing it to render this way?
button.video-sprite-popout {
background: url("https://www.mseifert.com/img-common/video-controls-sprite.png") no-repeat -56px -14px scroll;
border: 0 !important;
height: 14px;
margin-left: 8px;
margin-right: 8px;
width: 14px;
}
.video-controls {
background-color: black;
bottom: 0;
left: 0;
position: absolute;
right: 0;
}
<div class='video-controls'>
<div><button class='video-sprite-popout'></div>
<div>
It is likely due to antialiasing, and it is very device/browser specific. The lines you are seeing are subpixels. Though I am not able to see this specific problem on my device, you can use either of these on your background image container. See which one fits better.
button.video-sprite-popout {
image-rendering: crisp-edges;
}
button.video-sprite-popout {
image-rendering: pixelated;
}
I'm working on a presentation with ioslides (Rmarkdown). Since the corporate design rules for our university state that the logo should be on the right side (so the two faces look into the document) I'ld be happy if someone can help me with adjusting the ioslide theme via css or in the pandoc template.
The image and grey box should come in from the right side. I wasn't able to do that. All I could do was making the grey so long that is reaches the right side (which moves the logo as well cause it is relatively placed to the grey boxes right end as it seems to me).
Here is some CSS code I already found and experimented with:
.gdbar img {
width: 150px !important;
height: 150px !important;
margin: 8px 8px;
}
.gdbar {
width: 90% !important; # with 250px instead of 90% it produces the image posted below
height: 170px !important;
}
This is the code produced after kniting: https://box.hu-berlin.de/f/d3d9e907fcef41a0bbf1/
I don't understand where the gdbar code resides in the first place. Would be happy about a hint here as well.
Edit: I have now this CSS setup and am almost done. Only the logo should be shifted a little bit to the left.
.gdbar img {
width: 150px !important;
height: 150px !important;
margin: 8px 8px;
}
.gdbar {
width: 250px !important;
height: 170px !important;
}
aside.gdbar {
left: initial;
right: 0;
border-top-left-radius: 10px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 10px;
background-position: right;
}
Best regards, Simon
Your element has left: -1px property what makes sure it's always on the left. If you set left to initial:
aside.gdbar {
left: initial;
right: 0;
}
or you remove this left setting then your element will move to the right.
The idea was to make the not valid error tip that comes up when people fail to fill out a required field show up like a speech bubble. So the arrowhead image shows in the center and underneath the text and would point into the field that they missed.
Fiddle here
HTML:
<span class="wpcf7-not-valid-tip">Please fill the required field.</span>
CSS:
.wpcf7-not-valid-tip {
background: red;
color: white;
padding: 10px;
width: 100px;
background-position: 0 0;
background-repeat: no-repeat;
background-image: url('http://s24.postimg.org/qacevkf7l/green_error_arrow.png');
}
As you can see I have a background color and the arrow image that needs to sit in the middle of the element and below it but, of course, if you position it using background-position, the image is hidden as it cannot overflow outside of the element itself. This would be easy if I could easily edit the HTML but I would prefer not to as I am using a plugin and want to be free to update the plugin in the future.
QUESTION:
Is there a pure CSS solution?
If not (and I suspect there isnt) what is the cleanest way to solve this issue? Would I use add_filter to alter the html to put a div around the tooltip that i could then add the bg image to? Something with css "content:", a js solution?
Got the answer elsewhere.Will accept unless someone can think of something better.
http://jsfiddle.net/D2KFX/2/
This works perfectly using CSS (albeit adding content with the content: declaration) by drawing a triangle with borders instead of using an image for it.
CSS
.wpcf7-not-valid-tip {
background: red;
color: white;
padding: 10px;
width: 100px;
}
/* Updated code */
.wpcf7-not-valid-tip {
position: relative;
}
.wpcf7-not-valid-tip:after {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 0, 0, 0);
border-top-color: red;
border-width: 10px;
left: 50%;
margin-left: -10px;
}
I am trying to play around with borders in CSS, but can't figure out how to achieve the following "boxy" look:
Is it possible? If so how can this be achieved (don't use dark background as it is there to add contrast)
It's possible - using :after and some additional CSS tricks with borders.
Example
http://jsfiddle.net/EaZ8r/3/
CSS
body {
background: #000;
}
#box {
height: 150px;
width: 200px;
background: #fff;
margin: 0 auto;
position: relative;
}
#box:after {
display: block;
background: blue;
width: 180px;
height: 0px;
border: 10px #000 solid;
border-top: 15px #eee solid;
content: "";
position: absolute;
bottom: 0px;
}
How it works?
The main thing here is good understanding how border is drown by browser. Check out this example: http://jsfiddle.net/n2nsB/. When two borders meet each other the canvas is split between them, what makes some kind of triangles drown there. This can be very useful, because of two things:
First of all, border-width can be set separately for all 4 borders, so you can change the angle of split! Check the example: http://jsfiddle.net/n2nsB/1/
Second, but even more important: you can set border-color equal to background to make it invisible! Example: http://jsfiddle.net/n2nsB/2/
You can set border even, when element has no height, what makes the borders only things that are drown for that element. Example: http://jsfiddle.net/n2nsB/3/
On the other hand, you should also know how :after pseudo-element works. You can find a lot of really good tutorials about that on the Web. I suggest this one for the begining: http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/
So just combine all that things and get what you want.
I have been trying to figure this out for a few hours now, using the Chrome inspector but no luck. I'm probably missing something simple.
Have a look at this page: http://newslines.org/wiki/category/computer-people/aaron-swartz/
Please check the position of the comment link (looks like a speech bubble on the right of every post)
I took the comment link from another site, however on that site the box used position:absolute. I have tried a lot of variations but I cannot get absolute to work and it only works for me using relative positioning. However, this leads to spacing problems between the post titles and the body text and if you look at the entry for "September 16, 2012" you will see that the comment bubble is lower down than it should be.
Any help most appreciated!
Try this:
.container .comments {
background: -moz-linear-gradient(center top , #6FB1F0 0%, #589CDC 100%) repeat scroll 0 0 transparent;
border: 1px solid #4A8ECF;
border-radius: 3px 3px 3px 3px;
float: left;
height: 25px;
position: relative;
right: -20px;
top: 20px;
width: 34px;
}
.archive-layout .post .title {
float: left;
font-size: 22px;
width: 650px;
}