I known you can add an outline border with CSS3.
outline: 10px solid red;
Now I was wondering how I can add also a radius to that outline border.
I have tried this one, but doesn't work:
.radius {
padding: 20px 60px;
text-transform: capitalize;
-moz-outline: 10;
outline: 10px solid red;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
}
Try using CSS-Tricks' Infinite Borders technique and applying border-radius.
This method will require borders and box-shadow and not outline.
img {
border-radius: 4px;
/* #1 */
border: 5px solid hsl(0, 0%, 40%);
/* #2 */
padding: 5px;
background: hsl(0, 0%, 20%);
/* #3
outline: 5px solid hsl(0, 0%, 60%); */
/* #4 AND INFINITY!!! (CSS3 only) */
box-shadow:
0 0 0 10px red,
0 0 0 15px orange,
0 0 0 20px yellow,
0 0 0 25px green,
0 0 0 30px blue;
/* If you could do pseudo elements
you could get a few more... */
/* Also, HSL is awesome but don't use it if
you need super old browser support */
}
body { padding: 50px; text-align: center; }
<img src="https://www.randomlists.com/img/animals/chipmunk.jpg">
Firefox has a property -moz-outline-radius, however the request to implement a similar feature in WebKit was closed as WONTFIX. The plan for the future is to make the outlines follow the borders.
I realize this doesn't help much, but the answer to your question is: currently, no (not in a cross browser way). In the meantime you should use an alternative approach like the one suggested by thekalaban.
#MichaelYaeger Similar answer to user1685185 but with an updated JSFiddle, use border-radius and box-shadow. This JS Fiddle is shown using a "border" around a circular button (bootstrap), but the same applies an image, etc.
Related
I'd like to simulate a drop shadow effect using border-image and linear-gradient (for scroll performance reasons, I am not using the native box-shadow effect).
As can be seen in the example below and in the fiddle, my attempted approach involves using border-image for the gradient, border-image-outset to move the shadow outside the content box, and border-width to show only the bottom edge.
Admittedly, I don't understand border-image so well, particularly when it comes to using it with linear-gradients. Through trial and error, I achieved what seemed to be a satisfactory result. But as it turns out, when the width of the div is short enough, the "shadow" disappears entirely.
What can I do to achieve a drop shadow like in the top box, but one that works regardless of the box size? Your help with this is really appreciated!
.box
{
/* the "shadow" */
border-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 10%, rgba(0,0,0,0) 100%) 100 repeat;
border-image-outset: 0px 0px 6px 0px;
border-width: 0px 0px 6px 0px;
border-style: solid;
/* other stuff */
font-family: sans-serif;
font-size: 20px;
color: #FEFEFE;
background: #007277;
margin: 10px 0px;
float: left;
clear: left;
padding: 50px;
}
<div class="box">
Here's longer text, where the "shadow" appears how I want it to.
</div>
<div class="box">
Short
</div>
For the short border to work you need to change the
100 repeat;
to
0 0 100 0 repeat;
.box
{
/* the "shadow" */
border-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 10%, rgba(0,0,0,0) 100%) 0 0 100 0 repeat;
border-image-outset: 0px 0px 6px 0px;
border-width: 0px 0px 6px 0px;
border-style: solid;
/* other stuff */
font-family: sans-serif;
font-size: 20px;
color: #FEFEFE;
background: #007277;
margin: 10px 0px;
float: left;
clear: left;
padding: 50px;
}
<div class="box">
Here's longer text, where the "shadow" appears how I want it to.
</div>
<div class="box">
Short
</div>
This link may help you a little on your border imaging https://css-tricks.com/understanding-border-image/
Below is an image of a button we use on our site, it's a .png.
We'd like to see if we can get really close to it with CSS on a standard button.
The gradient goes top: #E14C5B to middle: #D33742 to bottom: #B61C27 with a couple pixel radial of round corners.
Is that even possible in CSS?
I'll get ya started...
HTML
<button>Submit</button>
CSS with some background gradients
#import url(http://fonts.googleapis.com/css?family=Pathway+Gothic+One);
button {
font-family: 'Pathway Gothic One', sans-serif;
font-size: 1.5em;
text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
border: 1px solid transparent;
border-radius: 3px;
height: 50px;
width: 100px;
color: white;
background-repeat: repeat-x;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E14C5B), color-stop(0.5, #D33742), to(#B61C27));
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.25);
cursor: pointer;
}
DEMO
Screenshot:
If you want some kind of clicky feedback type look on click, you could also add:
button:active {
-webkit-transform: translate(1px, 1px);
box-shadow: none;
}
DEMO w/ :active
This is only prefixed for -webkit browsers. You'll need to provide the proper vendor prefixes for whatever you are supporting.
Here is the cross-browser version using css gradient.
I specified 4 colors for the gradient.
The first gradient from 0 to 50% and the second gradient from 51% to 100%.
Ex.
background: linear-gradient(to bottom, #f64757 0%,#f83b49 50%,#eb2735 51%,#ce0011 100%);
jsfiddle demo here
Please note that the red i took are brighter than in tour example.
Just play with the css to adjust colors that fit your needs.
I want to change the shape of the scroll bar in my page. Right now it is the common rectangle shaped one but i want it to be kind of an oval shape - rounded at both top and bottom of the rectangle.
How Can i achieve this through CSS? Or is this not possible at all.
I am looking for supporting this in IE10.
This is my css for the scroll bar that I have.
.scrollbar-vertical
{
top: 0;
right: 0;
width: 17px;
height: 100%;
overflow-x: hidden;
scrollbar-3dlight-color:#999;
scrollbar-arrow-color:white;
scrollbar-base-color:white;
scrollbar-face-color:#999;
border-radius:5px 5px;
}
Check out this page for a good starting point http://cssdeck.com/labs/css3-webkit-vertical-scrollbars. These only work for browsers that use webkit unfortunately.
To get the rounded oval shape scrollbars you can do something like below:
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #D62929;
}
Not tested, you can use a jQuery custom scrollbar as seen on this page: http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
On my new site border-radius doesnt seem to be working.
I can see the border curving, but the background doesn't.
border-radius should work.
following works in IE 9
http://jsfiddle.net/Ec86p/3/
if supporting border-radius in IE7/IE8 is not a requirement then you should not include CSS3PIE as IE9 inclues support of border-radius css property.
edit:
i have updated your fiddle
http://jsfiddle.net/Zr8vE/3/
and changed following:
#main-menu li.first{
border-left:1px solid #feb800;
border-top-left-radius: 5px 5px;
-moz-border-top-left-radius: 5px 5px;
-webkit-border-top-left-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
-moz-border-bottom-left-radius: 5px 5px;
-webkit-border-bottom-left-radius: 5px 5px;
padding-left:10px;
}
edit : # 2
as soon as i removed following from ( #main-menu li )
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe9900', endColorstr='#ff7c00',GradientType=0 );
it started working. ( I tried it in IE 9, orange background seems to be curving similar to border )
http://jsfiddle.net/Zr8vE/15/
in fact, it is not only the IE9, but also IE9 -.
you can either follow #Bert answer, or you can try CSS3PIE
the usage is just the same, but CSS3PIE provide more CSS3 features for IEs.
i think this is the solution you needed.
in your css apply this to the element that needs the rounded corner
#element{
behavior: url(border-radius.htc);
}
download and search it in google border-radius.htc and save it in your image folder or anywhere you like it is an image with curve and it is use to fix IE problem.
I will post my css for my main menu that works for me with rounded border.
#main-nav {
width: 100%;
background: #ccc;
margin: 0;
padding: 0;
position: absolute;
left: 0;
bottom: 0;
z-index: 100;
/* gradient */
background: #6a6a6a url(images/nav-bar-bg.png) repeat-x;
background: -webkit-gradient(linear, left top, left bottom, from(#b9b9b9), to(#6a6a6a));
background: -moz-linear-gradient(top, #b9b9b9, #6a6a6a);
background: linear-gradient(-90deg, #b9b9b9, #6a6a6a);
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/* box shadow */
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
}
Please try this.
here is the link http://jsfiddle.net/vZaJX/
Hope it helped.
Here is now the answer.
try to just edit the spacing of the words.
http://jsfiddle.net/ApYw4/
for IE 9 solution as i have told you
download this border-radius.htc and add to your css like this
#main-menu{
behavior: url(border-radius.htc);
//all css
}
Dont hesitate to correct me if anything wrong.
I need to create a triangle with a drop shadow using simple html and css. Answered by another stackoverflow question, I was able to create the triangle with mitered borders. Basically I create 1 side of a box with a very wide border and the nearby side with a wide transparent border:
div.triangle {
border-bottom : 60px solid transparent;
border-left : 60px solid black;
}
works great, but when I try to apply a box-shadow the shadow goes around the enclosing square... not the triangle:
div.triangle {
border-bottom : 60px solid transparent;
border-left : 60px solid black;
-webkit-box-shadow: 0 0 10px black;
}
How do I get a triangle using only css/html with a drop shadow?
Seems like impossible. Definitely using an imagine is much more easier solution.
I've made something like triangle :) http://jsfiddle.net/5dw8M/109/ . Sorry cannot leave a comment under your post. May be it'll serve like an inspiration for someone;
What about put another div with similar property and play with positions?
something like http://jsfiddle.net/eveevans/JWGTw/
You can use the "transform" property to rotate a square 45 degrees and hide half of it, but not all browsers support it, so you'll need a fallback.
.triangle-with-shadow {
width: 100px;
height: 50px;
position: relative;
overflow: hidden;
box-shadow: 0 16px 10px -15px rgba(0,0,0,0.5);
}
.triangle-with-shadow:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: #999;
transform: rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
-o-transform:rotate(45deg); /* Opera */
top: 25px;
left: 25px;
box-shadow: -1px -1px 10px 0px rgba(0,0,0,0.5);
}
Demo on jsfiddle.
Lifted from this CSS Tricks page with modifications.
Probably the best option is using filter:
filter: drop-shadow(0 0 10px black);
Would <canvas> with a PNG fallback be an option?
Demo: jsfiddle.net/Marcel/3dbzm/1
Create a duplicate of that triangle, decolorize it, give it a negative z-index value using css, and finally off center it with CSS positioning.
div.triangle {
z-index:-1;
position:relative;
bottom:-16px;
right:-16px;
}