I have this Fiddle: http://jsfiddle.net/GSA5R/2/
Whereby i use the border property to create the triangle effect. However, how can i give the triangle a white border? If its already being used for the triangle!?
The only solution that comes to me is to place another white triangle behind the gray one. But you need some extra markup, because you can't use :after:after :)
Example here. I used a <span> inside the <a> tag.
Related
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>
I'm using a text widget, Black Studio TinyMCE, in WordPress. For some reason, I cannot get the background color to match the background of the header (#192E82). Currently, the header looks like this -- as you can see, there's a white outline surrounding the text area:
And when I Firebug the selection, Firebug shows this:
I can add whatever custom CSS I'd like to. But I'm not sure how to do so. I'm unsure which class I should use a # before, if any, or which class I should use a . before. Ultimately, I'd like to make that white area around the edge to match the background color of the header.
For instance, this doesn't work -- in fact, nothing I've tried works!
#widget-wrap .textwidget {
background-color:#192E82;
}
Does anybody know how I can accomplish getting the white to match the header background? Any guidance would be appreciated!
EDIT: Here's a Fiddle of everything I could find:
http://jsfiddle.net/jasonpaulweber/nvkVT/
Hard to give a precise answer with only the info included, but I would inspect one element at a time, from the <strong> and upwards in the hierarchy, and look for an element with either a white background-color and a padding, or a thick white border. If you do that I'm sure you'll spot it. Once you've identified it just let me know and I'll try and help you targeting it with a CSS selector.
According to the fiddle, the white space is padding of the header-right element
You should set
#header-right {
background-color:#192E82;
}
I was wondering how I can get shadow on all sides of a div in IE8. In addition to this I want another div that got shadow on all sides but the top.
I have managed to get the shadow on the right and bottom, but not around all 4 sides.. What does the direction property tell me? I have tried with different directions but with no success..
filter: progid:DXImageTransform.Microsoft.Shadow(Strength = 4, Direction = 135, Color = '#cccccc');
Not possible to use css shadows with ie (only ie9).
But you can use shadowOn. It's a great Image based jquery plugin and very easy in use to add shadows to html elements.
you can emulate what you want with http://css3pie.com/
that, or just add a partially transparent div behind your object that's slightly larger to act as a fake shadow
You may work around CSS Borders having glow effect here. You may change the colors and some others parameters.
Hope this helps.
Hi i trying manny time but i can't created this.
I should be as like this below images in pure css without any images
and now i want to used only single div .
Thanks advanced .
you could try to play around with this one:
css3gen
see you can make this in css3 easily you can use the before and after Pseudo Class Selectors for right and left side image curve and in the middle you can play with css3 for shadow box & gradient color etc....and it will come in only one div.
I hope you got it the idea what i am trying to explain you.....
see the demo for better understanding:- http://jsfiddle.net/4Y9D5/37/
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.