It's hard to see but on the INSIDE of the Border, left and right side only of the skewed rectangle, there is whitespace which is only there if I have a gradient background
https://imgur.com/a/fDcD8bi
my css:
padding: 50px 0;
margin: 0;
border-radius: 15px;
border-radius: 0;
border: 4px solid #717171;
transform: skewX(352deg);
box-shadow: -5px 10px 10px 0px #0b0b0b2b;
cursor: pointer;
background: rgb(41,41,41);
background: -moz-linear-gradient(15deg, rgba(41,41,41,1) 0%, rgba(59,59,59,1) 100%);
background: -webkit-linear-gradient(15deg, rgba(41,41,41,1) 0%, rgba(59,59,59,1) 100%);
background: linear-gradient(15deg, rgba(41,41,41,1) 0%, rgba(59,59,59,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#292929",endColorstr="#3b3b3b",GradientType=1);
Any CSS magicians could help me with the whitespace on the inside? as I'd like to have the rectangle skewed with a gradient. But they don't work together so well. Thanks
Related
I have been trying to apply glow with CSS box-shadow property (tried inset) on hover. So far, I have been able to do this with inset - http://jsfiddle.net/bgGS6 (hover over list item to see the effect).
Test code:
HTML:
<ul>
<li>
home
</li>
</ul>
CSS:
ul {
list-style:none;
}
li {
width:50px;
height:25px;
background:black;
color:white;
font-size:1.25em;
padding:10px;
}
li:hover {
box-shadow: inset 0 9px 10px 0px #00abe3;
}
I'm trying to achieve something like this:
I'm wondering if it will be possible to increase glow toward the center and fade it out towards the edges. I assume ultimate solution will be to add a png on hover, but want to find out if this can be achieved with CSS alone.
Update: Added radial gradient to top and it is pretty close to what I need - http://jsfiddle.net/bgGS6/5 Will add rules for cross-browser compatibility as well.
It flickers because of transition, not sure how to fix that. Any suggestions?
You can simply chain your shadows, thus:
box-shadow: inset 0 3px 3px 0px #fff,inset 0 9px 10px 0px #00abe3;
Demo Fiddle
What this does is add an initial inset box shadow with the same colour as the background (in this case just white) to make it look like the element is faded at the edges, before applying your highlighing box shadow- with larger pixel distances defined.
just as a note, you should structure your html like this:
<ul>
<li>
<a>Home</a>
</li>
</ul>
The following is css to create a blue effect, and you can probably customize it to your liking but you can get the basic gist of it:
ul li a{
background-color: #759ae9;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #759ae9), color-stop(50%, #376fe0), color-stop(50%, #1a5ad9), color-stop(100%, #2463de));
background-image: -webkit-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background-image: -moz-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background-image: -ms-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background-image: -o-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background-image: linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
border-top: 1px solid #1f58cc;
border-right: 1px solid #1b4db3;
border-bottom: 1px solid #174299;
border-left: 1px solid #1b4db3;
border-radius: 4px;
-webkit-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
color: #fff;
font: bold 12px/1 "helvetica neue", helvetica, arial, sans-serif;
padding: 7px 0;
text-shadow: 0 -1px 1px #1a5ad9;
width: 150px;
}
As a further note, please check out some tutorials on CSS3. There are plenty out there that could help you get a more broad idea of the tools you have to play with to achieve what you need. A good place to start would be Codeacademy.com They have a pretty good tutorial on CSS3
You could add a :before pseudo-element which has a box-shadow;
li {
width:50px;
height:25px;
background:black;
color:white;
font-size:1.25em;
padding:10px;
position: relative;
}
li:hover {
box-shadow: inset 0 9px 10px 0px #00abe3;
}
li:hover:before {
position: absolute;
width: 10px;
height: 2px;
background: rgba(255, 255, 255, 0.4);
content:' ';
left: 30px;
top: 1px;
box-shadow: 0 3px 7px 5px rgba(255, 255, 255, 0.4);
}
See this fiddle
I'm in trouble trying to do this :
I managed to do something like this :
display: table-cell;
vertical-align: middle;
background: rgb(245,245,245); /* Old browsers */
background: -moz-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(230,230,230,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(245,245,245,1)), color-stop(100%,rgba(230,230,230,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(245,245,245,1) 0%,rgba(230,230,230,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(245,245,245,1) 0%,rgba(230,230,230,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(245,245,245,1) 0%,rgba(230,230,230,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(245,245,245,1) 0%,rgba(230,230,230,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-9 */
for the main container of text, and :
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 40px solid #FEEDDD;
display: inline-block;
to do the triangle. I would then place the circle with the number in absolute position inside of it.
But can't figure out how I would do for the triangle "border" to be gradient like the other div, nor giving it a white outer border...
Thanks ahead !
It's definitely possible.
I created not so long ago a back button with a gradient arrow. See this fiddle
So just change the orientation, the colors and resize it to what you want but you've got the idea here I guess.
HTML:
<button>Rejoignez le groupe</button>
CSS:
button {
position: relative;
display: inline-block;
border: 1px solid #555555;
margin: 0;
font-size: 12px;
color: inherit;
cursor: pointer;
height: 30px;
padding: 0 10px;
margin-right: 10px;
font-weight: bold;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(100%, #888888));
background: -webkit-linear-gradient(top, #eeeeee, #888888);
background: -moz-linear-gradient(top, #eeeeee, #888888);
background: -o-linear-gradient(top, #eeeeee, #888888);
background: linear-gradient(top, #eeeeee, #888888);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
-webkit-box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
-moz-box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
}
button:after {
clip: rect(14px, 14px, 28px, 1px);
-webkit-transform: skewX(-35deg);
-moz-transform: skewX(-35deg);
-ms-transform: skewX(-35deg);
-o-transform: skewX(-35deg);
transform: skewX(-35deg);
content: "";
top: 0;
position: absolute;
height: 100%;
width: 8%;
right: -10px;
border-right: inherit;
background: inherit;
-webkit-box-shadow: inherit;
-moz-box-shadow: inherit;
box-shadow: inherit;
}
button:before{
clip: rect(1px, 14px, 14px, 1px);
background: red;
-webkit-transform: skewX(35deg);
-moz-transform: skewX(35deg);
-ms-transform: skewX(35deg);
-o-transform: skewX(35deg);
transform: skewX(35deg);
content: "";
top: 0;
position: absolute;
height: 100%;
width: 8%;
right: -10px;
border-right: inherit;
background: inherit;
-webkit-box-shadow: inherit;
-moz-box-shadow: inherit;
box-shadow: inherit;
}
Tell me if it's too confusing and need some guidance to change orientation, size and colors.
while you probably can manage to do something like that and still maintain a decent fall-backs across the ranges of browsers with successful results... i expect your going to pull out a good chunk of your hair while trying. my suggestion would be to get a few background images made up in Photoshop and break those items up into three different elements
an element for the transparent white circle that can contain the
step #
an element with class for the completed steps to apply the orange gradient background
another element with separate class for the gray gradient
doing things this way you can keep all of your elements "square" without having to worry about support for triangular or circle elements. and just overlay your text in the appropriate places...
i know this might not be exactly what your asking for the css3 way to accomplish everything, but i believe doing things this way allows you to keep it simple & lean
Fiddle
The div.button in the fiddle looks like expected in Chrome/FF but background-clip and border-radius don't work well in Safari.
Is there something wrong with code or its just how Safari behaves?
CSS
div.button {
width: 100px; height: 100px;
padding: 8px;
border-radius: 100px;
box-shadow: 0 0.8px 8px rgba(0,0,0,.3);
background-image: -webkit-radial-gradient(center center, circle, #8CE2FB, #52D2F8);
background-image: -moz-radial-gradient(center center, circle, #8CE2FB, #52D2F8);
background-image: -ms-radial-gradient(center center, circle, #8CE2FB, #52D2F8);
background-image: -o-radial-gradient(center center, circle, #8CE2FB, #52D2F8);
background-image: radial-gradient(center center, circle, #8CE2FB, #52D2F8);
-webkit-background-clip: content-box;
-moz-background-clip: content-box;
background-clip: content-box;
}
HTML
<div class="button"></div>
You may need to give specific size values to the gradient.
http://dabblet.com/gist/5748608 (prefix not written but added via js)
div.button {
width: 100px; height: 100px;
padding: 8px;
border-radius: 100px;
box-shadow: 0 0.8px 8px rgba(0,0,0,.3);
background-image: radial-gradient(center, #8CE2FB 0, #52D2F8 52px, white 52px , white );/* oldest, includes your safari ? */
background-image: radial-gradient(circle at center, #8CE2FB 0, #52D2F8 52px, white 52px , white ); /* newest */
}
.bshad {/* box- shadow */
width: 100px; height: 100px;
padding: 8px;
border-radius: 100px;
box-shadow: 0 0.8px 8px rgba(0,0,0,.3), inset 0 0 1px 8px white, inset 0 0 0 200px #52D2F8 ;
}
Box-shadow gives better result though.
I am using CSS3 pie and am calling it by attached js files just before the head tag.
For some reason my background image inst appearing. I have tried the standard adding z-index and position relative fixes but it doesn't show. Any help guidance appreciated.
Below is the css.
.linkButton {
background: url('../Images/linkButtonBg.png') 100% 9px no-repeat #dc5c00;
background: url('../Images/linkButtonBg.png') 100% 9px no-repeat, -webkit-gradient(linear, 0% 0% 0% 100% from(#e36000), to(#c85400));
background: url('../Images/linkButtonBg.png') 100% 9px no-repeat, -webkit-linear-gradient(top, #e36000, #c85400);
background: url('../Images/linkButtonBg.png') 100% 9px no-repeat, -moz-linear-gradient(top, #e36000, #c85400);
background: url('../Images/linkButtonBg.png') 100% 9px no-repeat, -ms-linear-gradient(top, #e36000, #c85400);
background: url('../Images/linkButtonBg.png') 100% 9px no-repeat, -o-linear-gradient(top, #e36000, #c85400);
-pie-background: url('../Images/linkButtonBg.png') 100% 9px no-repeat #000;
padding: 10px 10px 10px 11px;
display: inline-block;
color: #ffffff;
font-weight: bold;
box-shadow: inset 0 1px 0 0 #ff801e, 0 0 1px 1px #ffffff, 0 0 1px 1px #ffffff;
border: 1px solid #c85400;
text-shadow: #813700 2px 2px 1px;
line-height: 12px;
margin-bottom: 7px;
width: 326px;
display: block!important;
position:relative;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;`enter code here`
z-index:1;
}
First of all you don't need -pie-background for plain old image + background color.
If you do want to use -pie remember that paths are relative to html not css.
(I assume that you've set up mime-type etc and pie works for you in different cases.)
.linkButton{
behavior: url(PIE.htc);
}
Also, try adding a .index file with the following content in the same location as the PIE.htc file:
more info http://css3pie.com/
http://css3pie.com/documentation/
Try linking it without dots and slash like this:
-pie-background: url('Images/linkButtonBg.png') 100% 9px no-repeat #000;
Hi guys i'm trying to create this(image) css border around a div, but having trouble.
I have created the border but cannot get the border to be smooth.
here is my code
border-left: 5px solid #036;
border-right: 5px solid #036;
border-top: 10px solid #036;
border-bottom: 5px solid #036;
Fiddle Up, You can see it here.
Hope it help.
EDIT:
Html:
<div class="a">
<span class="abs">Title here?</span>
<div class="b">
Hello.
</div>
</div>
Css:
div.a {
border-top: 10px solid #333;
border-left: 5px solid #333;
border-bottom: 5px solid #333;
border-right: 5px solid #333;
border-radius: 10px;
background-color: #333;
width: 200px;
height: 400px;
}
div.b {
border-radius: 5px;
background-color: #FFF;
width: 180px;
height: 350px;
padding: 10px;
}
.abs {
color: #FFF;
display: inline-block;
font-weight: bold;
margin-bottom: 10px;
}
You can attain such a setup using new CSS3 facilities, namely border-radius and gradient form of background image. You can find information about those all around the internet, for example background gradient and border radius.
Below is example, it will not work in all browsers, and is not exactly what you want, but it should be enough to give you the basic idea:
The html structure could look like this:
<div id="big_div">
Search for a hotel
<div id="small_white_div">
Some other content
</div>
</div>
And the corresponding css would be:
#big_div {height:450px;width:250px;border-radius: 5px;background-color:red;
background-image: linear-gradient(bottom, rgb(33,51,140) 5%, rgb(125,187,209) 51%,
rgb(33,51,140) 100%);
background-image: -o-linear-gradient(bottom, rgb(33,51,140) 5%, rgb(125,187,209) 51%,
rgb(33,51,140) 100%);
background-image: -moz-linear-gradient(bottom, rgb(33,51,140) 5%, rgb(125,187,209)
51%, rgb(33,51,140) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(33,51,140) 5%, rgb(125,187,209)
51%, rgb(33,51,140) 100%);
background-image: -ms-linear-gradient(bottom, rgb(33,51,140) 5%, rgb(125,187,209) 51%,
rgb(33,51,140) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.05, rgb(33,51,140)),
color-stop(0.51, rgb(125,187,209)),
color-stop(1, rgb(33,51,140))
);}
#small_white_div {height:400px;width:220px;margin:auto;border-radius:5px;
background-color:white;margin-top:20px;}
Good luck.
It's done with background image.
You are looking for border-radius to get the rounded corners. Try out something like this:
-webkit-border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px;
Note this is CSS3 and will not work in older versions of IE