i coded a arrow with css.
the code
border-style: solid;
border-width: 0 0 25px 4px ;
border-color: transparent transparent transparent #cacaca;
The shot :
ایگل دیزاین طراحی سایت
the slash line is not a smooth line.
whats your idea ?
Not sure why it would not be smooth, could be that you may need to specify the borders long hand.
e.g. border-top: 20px solid transparent
css tricks has a good article on css triangles
Try this
border-top: 25px solid $pink;
border-right: 50px inset transparent;
border-left: 50px inset transparent;
FIDDLE DEMO
Related
I want to be able to make a 2px white border with an 8px tan border around an image that automatically changes with the size of the image.
article.post .wp-caption img, article.page .wp-caption img {
background: none repeat scroll 0 0 transparent;
border: 2px solid white;
margin: 0;
padding: 0;
}
If you want to look at the site here is the link:
http://www.metnews.org/news/aurora-remembers-holmes-victims/
border: 2px solid white;
outline: 8px solid yellow;
The outline property acts like an outer border.
You can also use padding to get the effect of a second border. The part of changing size according to the image, I think you should explain a little better what you are trying to achieve.
padding: 2px;
background: white;
border: 8px solid #000;
Or box-shadow - you can have as many borders as you want. Poor 'old IE8 and less won't get the pretty styles :(.
http://jsfiddle.net/ryanwheale/KmnUB/2/
img {
/* Make sure to add vendor prefixes */
box-shadow: 0 0 2px 2px white, 0 0 0px 10px tan;
}
I am getting a odd effect (currently in chrome). I have created my own overlay dialog box. which has a semi transparent background sitting on top of my website with a box on top of that. the top of the bar as you can see has a black background. The main part of the box is white thought.
Its not the easyist to see but it is annoying me.
The white is showing through from behind. (I know as if i change it to red it changes colour) Which you can see in the top right hand corner of the screenshots, just above the "X"
Both the header and the box has a border radius 3px
.blockUI .overlay {
background: #f00;
border-radius: 3px;
margin: 0 auto;
padding: 10px;
overflow: hidden;
position: relative;
top: 20%;
text-align: inherit;
width: 600px;
z-index: 10009;
}
blockUI .overlay h1 {
background: #000;
border-bottom: 2px solid #F48421;
border-radius: 3px 3px 0 0;
color: #FFF;
font-family: 'Roboto', sans-serif;
font-weight: 300;
margin: -10px;
padding: 10px;
}
Since overflow: hidden; along with border-radius seems to cause some rendering inconsistencies in some engines (take a look at this), one should use border-radius on both the parent and the child elements to achieve rounded corners.
As you have noticed, you still get some wierd results with extra pixels "shining" through. Just reduce the border-radius of the child (or the other way round) to compensate this.
blockUI .overlay h1 {
border-radius: 2px 2px 0 0;
}
I had same problem. But I solved.
.blockUI .overlay {background:#000;}
and remake some!
You should try on the parent div:
-webkit-background-clip: padding-box;
Finally fixed this completely by adding this on parent and child divs.
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
outline:none;
border:none;
text-decoration:none;
I am trying to implement this dialogue box without reverting to using images for the top right corner. The following is my implementation for it.
.box{
-webkit-border-radius: 6px 6px;
-moz-border-radius: 6px / 6px;
-khtml-border-radius: 6px / 6px;
border-radius: 6px / 6px;
width:33%;
border: 1px solid #DDD;
display: inline-block;
margin-right:10px;
margin-bottom: 10px;
max-width: 290px;
padding: 10px;
}
.triangle-topright {
width: 0;
height: 0;
border-top: 50px solid #fafad6;
border-left: 50px solid transparent;
-webkit-border-top-right-radius: 6px 6px;
-moz-border-radius-topright: 6px / 6px;
-khtml-border-top-right-radius: 6px / 6px;
border-top-right-radius: 6px / 6px;
float: right;
margin-top: -10px;
margin-right: -10px;
}
<div class="box">
<div class="triangle-topright"></div>
<h3>title</h3>
<p>stuff</p>
</div>
The problem is this works for safari, but for chrome, -webkit-border-top-right-radius: 6px 6px; seems to cause a conflict. When it is activated, the top right will be rounded, but the triangle will disappear.
is there a workaround to this? or is there a better way to do this?
thank you.
One solution that appears to work (tested in Chrome, Safari, Firefox) is removing the following lines from .triangle-topright
-webkit-border-top-right-radius: 6px 6px;
-moz-border-radius-topright: 6px / 6px;
-khtml-border-top-right-radius: 6px / 6px;
border-top-right-radius: 6px / 6px;
And instead simply adding overflow: hidden; to the .box css.
Demo: http://jsfiddle.net/BcrKH/
I think your idea of creating a triangle shape in CSS is over-thinking the problem. A CSS gradient would seem to be the simpler solution here.
It's possible to create gradients that are just an abrupt color change, and you can make them diagonal too, so it seems like it can offer exactly the solution you're after.
Now we've established a different tack to the question, we can refer to other questions like this one for reference: How to make a diagonal css gradient without the colors blending together(a sharp color change) that's displaced 70% to the right?
The only problem with CSS gradients is that they're not supported in older versions of IE. This can be resolved however. IE6/7/8 does have its own filter method of creating gradients which can do the trick, but my preference would be to use CSS3Pie, which allows you to use the standard CSS3 gradients even in old IE versions.
Hope that helps.
I have tried PIE.htc and background-color together, but rounded-corner not working in IE8.
my css is as follows.
#main{
background-color: #CD0D00 !important;
-webkit-border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
border-radius: 15px 15px 15px 15px;
behavior: url(PIE.htc);
-webkit-box-shadow: 0 7px 10px rgba(0,0,0,0.3);
-moz-box-shadow: 0 7px 10px rgba(0,0,0,0.3);
box-shadow: 0 7px 10px rgba(0,0,0,0.3);
}
NB: When I remove "!important" from background-color, the color not appears but the Rounded corner working in IE8, otherwise not.
Well, using !important is known to cause problems with CSS3Pie, so that's no surprise.
As for the background-color on it's own without the !important, I'm not immediately sure why it isn't working, but a few suggestions:
Try using the shorthand background style instead -- ie background:#CD0D00;. CSS3Pie tends to prefer shorthand styles for most things.
For some background properties, CSS3Pie can't support them in the standard background style; it needs a custom -pie-background style. In theory, this only applies to advanced background properties, and shouldn't be needed for a basic background color, but it's worth trying it.
I don't have a copy of IE to hand at the moment to try it out, but hope that helps.
what's the best way to programatically (using HTML, CSS, JavaScript, and/or PHP) round the corners of images?
I'm been playing with this CSS-only method:
http://maxvoltar.com/archive/rounded-corners-on-images-css-only
The key features of this method are:
wrapping the image into an element where you can round the borders and where you can set the wrapper element background as the desired image.
setting the actual image opacity to 0
floating the wrapper left so the image and wrapper line up.
here's the HTML:
<p style="background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/2/26/YellowLabradorLooking_new.jpg/260px-YellowLabradorLooking_new.jpg)">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/26/YellowLabradorLooking_new.jpg/260px-YellowLabradorLooking_new.jpg" alt="Dog" />
</p>
here's the CSS:
img {
vertical-align: bottom;
/*width:50px;
height:50px */ /*ideally would be able to alter these as needed*/
}
p {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: #000 0 2px 10px;
-moz-box-shadow: #000 0 2px 10px;
box-shadow: #000 0 2px 10px;
}
Unfortunately, this code fails when you re-size the images. Please compare the following 2 fiddles to see what I mean:
image NOT manually sized:
http://jsfiddle.net/trpeters1/wxXAn/1/
image set to 50px wide/50px height:
http://jsfiddle.net/trpeters1/wxXAn/2/
Is there a way to rescue this method if you want to preserve the ability to re-size the image width/height? Are there better ways than this method?
UPDATE
thanks to Tom (see below), this question is solved. The key to enabling re-sizing is to set BOTH the image and wrapper heights and widths to the same size. Please see this fiddle and compare with the one's above to see what I mean: http://jsfiddle.net/trpeters1/wxXAn/13/
Please note in this fiddle that the <p> AND <img> tags height and widths are BOTH set to 50px.
I managed to get it to work by using the following code
p {
float: left;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: #000 0 2px 10px;
-moz-box-shadow: #000 0 2px 10px;
box-shadow: #000 0 2px 10px;
background-size:50px 50px;
}
I added the background-size:50px 50px; tag and you then get the small dog with the rounded corners.
Hope this is what you are after.
Thanks