Linear gradient on Safari is wrapping all around - css

I have a wordpress theme css override. I wanted to have linear gradients under the widget titles.
I used the following code:
.widget-title {
border-bottom: 3px solid;
border-image: linear-gradient(to right, green 10%, orange 25%, yellow 50%,purple 50%, indigo 75%, indigo 75%) 5;
padding-left: 0px;
padding-right: 0px;
On chrome and firefox it underlines the title just like I want.
On Safari it creates a border all the way around the title.
Safari
Chrome


Try using below:
border-width: 0 3px 3px 3px;
border-top: none;

Related

border-image-source: linear-gradient only reading one color

I am trying to create a border gradient effect like the below:
I have the below, but for whatever reason the second color is not being read, alas the border just renders a plain white without a gradient effect, and this is on chrome/mac. Any suggestions or known quirk?
input {
height: 40px;
padding: 8px 93px 13px 18px;
border-style: solid;
border-width: 2px;
border-image-source: linear-gradient(294deg, #fff 105%, #68d9d5 71%, #68d9d5 71%);
border-image-slice: 1;
}

Your current linear gradient is white in all of the visible area.
It does this because the gradient generated by #fff 105%, #68d9d5 71%, #68d9d5 71% goes:
Between 0-105%: #fff (As 0% is not defined, the first color passed in is used)
Between 105-71%: #68d9d5
Slightly unintuitively, the colors that come first end up on top (of the visibility stack) of the gradient, so the 105-71% range is hidden behind the initial white area.
Replacing it with linear-gradient(95deg, #68d9d5 71%, #fff 100%); will provide closer results.
body {
background-color: #0E2B47;
}
input {
height: 40px;
padding: 8px 93px 13px 18px;
border-style: solid;
border-width: 2px;
border-image-source: linear-gradient(95deg, #68d9d5 71%, #fff 100%);
border-image-slice: 1;
background: none;
}
<input />

Create an Intersecting Linear Gradient

I know I can make a linear gradients as a background of a div element. But is it possible to make intersecting line gradients? See image below:

Yes, it is very much possible to create such patterns by using two linear-gradient images. When multiple background images are assigned to an element, the UA would by default set them as layers where the first one from the right is the lowermost layer and last one from right becomes uppermost.
Below is a sample snippet for both the patterns.
(Note: In the angled lines pattern, I've set the color stop points differently to avoid jagged lines. The angled linear gradients always tend to produce them.)
div {
height: 200px;
width: 200px;
margin: 10px;
border: 1px solid;
}
.checkered {
background: linear-gradient(to right, black 1px, transparent 1px), linear-gradient(to bottom, black 1px, transparent 1px);
background-size: 10px 10px;
background-position: 5px 0px, 0px 5px;
}
.angled {
background: linear-gradient(45deg, transparent 7px, black 7px, transparent 8px), linear-gradient(315deg, transparent 7px, black 7px, transparent 8px);
background-size: 10px 10px;
}
<div class='checkered'></div>
<div class='angled'></div>

Not sure if this is what you are after:
HTML
<div id="red2blue"></div>
<div id="blue2red"></div>
CSS
div{
width:100px;
height:100px;
opacity: 0.5;
position:absolute;
top:0;
left:0;
}
#red2blue{
background: linear-gradient( 45deg, red, blue );
}
#blue2red{
background: linear-gradient( -45deg, blue, red );
}
https://jsfiddle.net/9na275fn/

CSS Menu not working properly in IE10 compatibility mode

The Menu for my site is acting odd in IE now, where it was fine before. I moved the files for the site to a company network share and now it will not display the CSS properly. The CSS should add border radius/rounded edges, it z-indexes so it goes on top other divs, etc, and after the move it does not do this anymore. If I hit f12 in IE and select IE10 - not IE10 compatibility - it does load fine.
Is there something I need to fix in my CSS?
height:41px;
background: #fff;
background-color: #000000;
-moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
background: #565656;
background: -moz-linear-gradient(#565656 0%, #323232 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
background: -webkit-linear-gradient(#565656 0%, #323232 100%);
background: linear-gradient(#565656 0%, #323232 100%);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

IE10 compatibility mode emulates IE7, which supports almost none of the used css3 properties. Unless you start using IE hacks like this one for border-radius, they will not render. (Both box-shadow and border-radius are IE9+)
This is why your site should follow the ideals of graceful-degradation. You should debug so positioning and stacking (z-index) work as they are designed, but minor eye candy may go out the window.

fomatting button with attractive css3 properties

I am not good at css but have created css button looks pretty good.
But it does not give shining like buttons in Yahoo mail or button # http://www.alchemyapi.com/products/demo/
Here is my fiddle demo:
http://jsfiddle.net/karimkhan/y6XGg/
I appreciate if some can help me to beautify it!
<input type="submit" class="button" onclick="GetSentiment()" id="GetSentiment" value="Get Sentiment" />
Does it css or css3? what's different

It looks like the gradient on your demo is going from one colour, to the same colour, therefore, not really producing a gradient at all !
Look at this: http://jsfiddle.net/y6XGg/1/
background: linear-gradient(to bottom, #febbbb 0%,#fe9090 45%,#ff5c5c 100%);
Useful link : http://www.colorzilla.com/gradient-editor/

They are using a gradient, which can be done by using an image or css3 like this:
background-image: linear-gradient(bottom, rgb(150,150,150) 43%, rgb(179,179,179) 72%);
background-image: -o-linear-gradient(bottom, rgb(150,150,150) 43%, rgb(179,179,179) 72%);
background-image: -moz-linear-gradient(bottom, rgb(150,150,150) 43%, rgb(179,179,179) 72%);
background-image: -webkit-linear-gradient(bottom, rgb(150,150,150) 43%, rgb(179,179,179) 72%);
background-image: -ms-linear-gradient(bottom, rgb(150,150,150) 43%, rgb(179,179,179) 72%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.43, rgb(150,150,150)),
color-stop(0.72, rgb(179,179,179))
);
There are many gradient generators online like:
http://gradients.glrzad.com/

In your css
background: -webkit-gradient(linear, 0 0, 0 100%, from(#F70247), to(#F70247));
background: -moz-linear-gradient(top, #F70247, #F70247);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#F70247, endColorStr=#F70247);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#F70247, endColorStr=#F70247);
display:inline-block; /* IE is so silly */
}
Your your gradient goes from #F70247 to #F70247 so no gradient you have to change one of these color values to another that please you

Your current background has a gradient which goes from one colour to the exact same colour (meaning no gradient is even applied).
background: -webkit-gradient(linear, 0 0, 0 100%, from(#F70247), to(#F70247));
background: -moz-linear-gradient(top, #F70247, #F70247);
/* Etc... */
Is absolutely no different to:
background: #F70247;
Your start and end colours are both #F70247. If we change one of your colours to something different, we can generate a gradient (JSFiddle demo):
background: -webkit-gradient(linear, 0 0, 0 100%, from(#F70247), to(#EEE));
background: -moz-linear-gradient(top, #F70247, #EEE);
/* Etc... */
Here we're going from #F70247 to #EEE.
Colorzilla's Ultimate CSS Gradient Generator is a WYSIWYG for generating CSS gradient backgrounds which are compatible with old and new browsers. I'd strongly suggest using that if you wish to create a gradient similar to the one you linked.

You can use multiple inset shadows to get some of the effects you're looking for, see:
http://jsfiddle.net/y6XGg/2/
-webkit-box-shadow: 0px 1px 3px #666666, 0px 0px 6px #F3215F inset, 0px 1px 0px #EDC2DE inset;
-moz-box-shadow: 0px 1px 3px #666666, 0px 0px 6px #F3215F inset, 0px 1px 0px #EDC2DE inset;
box-shadow: 0px 1px 3px #666666, 0px 0px 6px #F3215F inset, 0px 1px 0px #EDC2DE inset;
Your background gradient can be tweaked too to make a stronger effect.

You could simply go to http://cssgradientbutton.com/# and generate a button from there. You can edit the button and increase the border radius size to change the rounding of the corners to match your jsfiddle. It also generates css for when you hover over the button, giving it the feel of being pushed in slightly.
You can also add inset shadows, which can give a nice look:
Before hover:
On hover:

Glass (opaque/transparent) border around boxes?

I'm wondering if I can get a sort of glass-effect border around boxes in CSS. For example, a navigation div that contains a ul etc. Here's an example of what I mean

A glass effect in 2020
When I answered this in 2012, I used only features that were well-supported by browsers at that time. You can find it below for posterity, but first I'll share a slightly more interesting glass effect which looks a bit different from the one in the original question.
I also no longer care so much about an extra element or two, but if you hate presentational elements, check out the old answer to see how you can use a pseudoelement to avoid them.
Full demo
.glass {
backdrop-filter: contrast(130%) brightness(120%) blur(2px);
background:
radial-gradient(
ellipse at 16.7% -10%,
hsla(0, 0%, 100%, 0.44) 24%,
hsla(0, 0%, 100%, 0.4) 25%,
hsla(0, 0%, 100%, 0.2) 45%,
hsla(0, 0%, 100%, 0.1)
);
background-size: 300% 100%;
border-radius: 10px;
box-shadow:
0 2px 1px hsla(0, 0%, 100%, 0.5) inset,
0 -2px 1px hsla(250, 70%, 5%, 0.3) inset,
0 -2px 6px hsla(0, 0%, 100%, 0.25);
}
/* -------------------------------------------
Decorative (not relevant to technique)
------------------------------------------- */
html {
background:
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32.9%, rgba(255,255,255,0) 33%) 0 0,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13.9%, rgba(255,255,255,0) 14%) 0 0,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19.9%, rgba(255,255,255,0) 20%) 0 110px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13.9%, rgba(255,255,255,0) 14%) -130px -170px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13.9%, rgba(255,255,255,0) 14%) 130px 370px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13.9%, rgba(255,255,255,0) 14%) 0 0,
linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%;
background-color: #840b2a;
font: 17px/21px Segoe UI, Tahoma, Helvetica, sans-serif;
height: 100%;
idth: 100%;
}
.frame {
padding: 20px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.content {
background: lemonchiffon;
border: 1px solid sienna;
padding: 20px 25px;
width: 300px;
}
.content > :first-child { margin-top: 0; }
.content > :last-child { margin-bottom: 0; }
c {
background: rgba(255,255,255,.5);
box-shadow: 0 0 3px rgba(0,0,0,.4);
color: #840b2a;
font-family: Consolas, Courier New, Courier, monospace;
font-weight: bold;
padding: 0 3px;
}
<div class="glass frame centered">
<section class="content">
<p>A glass-effect frame using pure CSS.</p>
</section>
</div>
Breaking it down
Backdrop filter
Blurring what lies behind the pane gives the impression that light is being defocused as it passes through the glass. Also, the contrast and brightness are increased to make the background stand out through the surface reflection effect.
backdrop-filter: contrast(130%) brightness(120%) blur(2px);
CSS gradients
This conveys the impression of light reflecting non-uniformly from the surface of the glass. This example uses a radial gradient to imply a light source a finite distance from the pane, but you could also use a linear or conical gradient (less support) to convey a different lighting effect.
The background size is also increased so that the edges of the ellipse do not show.
background:
radial-gradient(
ellipse at 16.7% -10%,
hsla(0,0%,100%,.44) 24%,
hsla(0,0%,100%,.4) 25%,
hsla(0,0%,100%,.2) 45%,
hsla(0,0%,100%,.1)
);
background-size: 300% 100%;
Multiple box shadows
A couple of inset shadows are used to highlight the top edge and shade the other, while an outer shadow implies that light is being cast onto the background around the edges of the box. Changing the position and intensity of these shadows will imply different things about the position of the implied light source.
box-shadow:
0 2px 1px hsla(0,0%,100%,.5) inset, /* Highlight upper edge */
0 -2px 1px hsla(250,70%,5%,.3) inset, /* Shade lower edge */
0 -2px 6px hsla(0,0%,100%,.5); /* Imply light cast around the edges */
A glass effect in 2012 (original answer)
You can achieve an effect very close to this—almost identical to the example in the question—using simpler CSS. This example uses a single element with an RGBA border colour and multiple box shadows to add the highlights and shadows.
.box {
background: #f0edcc;
background-clip: padding-box; /* Background stops at border */
border: 4px solid rgba(255,255,255,.2);
border-radius: 3px;
box-shadow:
0 0 1px rgba(255,255,255,.8), /* Bright outer highlight */
0 0 3px rgba(0,0,0,.8), /* Outer shadow */
1px 1px 0 rgba(0,0,0,.8) inset, /* Inner shadow (top + left) */
-1px -1px 0 rgba(0,0,0,.8) inset; /* Inner shadow (bottom + right) */
padding: 10px;
}
/* -------------------------------------------
Decorative (not relevant to technique)
------------------------------------------- */
html {
background:
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32.9%, rgba(255,255,255,0) 33%) 0 0,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13.9%, rgba(255,255,255,0) 14%) 0 0,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19.9%, rgba(255,255,255,0) 20%) 0 110px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13.9%, rgba(255,255,255,0) 14%) -130px -170px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13.9%, rgba(255,255,255,0) 14%) 130px 370px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13.9%, rgba(255,255,255,0) 14%) 0 0,
linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%;
background-color: #840b2a;
font: 13px/17px Segoe UI, Tahoma, Helvetica, sans-serif;
height: 100%;
width: 100%;
}
c {
background: rgba(255,255,255,.5);
box-shadow: 0 0 3px rgba(0,0,0,.4);
color: #840b2a;
font-family: Consolas, Courier New, Courier, monospace;
font-weight: bold;
padding: 0 3px;
}
.box {
bottom:0;
height: 150px;
left:0;
margin:auto;
position:absolute;
top:0;
right:0;
width: 250px;
}
.box > :first-child { margin-top: 0; }
.box > :last-child { margin-bottom: 0; }
<div class="box">Your message.</div>
Note that box-shadow and RGBA border colours are only supported in IE9+ and more recent versions of Firefox, Chrome, Opera and Safari. (Although older versions of the latter browsers may support prefixed versions of the property.) In browsers that don't support either, this degrades to just the inner yellow box.

You can't create a Glass/Blur effect width CSS for now. But width transparent border and box shadow you can attenuate the background.
You can see the result in my jsfiddle : http://jsfiddle.net/DoubleYo/hyETB/1/

Since there is a pattern in the example border, you will probably need one or more PNG background images with alpha channel (so that the parent's background can shine through where and to the extent desired); borders with uniform RGBA colors alone will not suffice here.
Then nest another block element in the element that has that background. With one background image, example HTML:
<div id="glass-box">
<div id="inner">
<p>Text</p>
</div>
</div>
Example CSS:
#glass-box
{
background: transparent url(glass.png) 0 0 no-repeat;
}
#glass-box #inner
{
margin: 10px;
background-color: white;
}
Instead of transparent you might want to try an RGBA color with opacity < 1.0; perhaps you would use a semi-transparent greyscale glass background image which you could project on top of any hue.
Until multiple borders are better supported natively (see my comment), you can achieve multiple borders by nesting block elements and giving each one different borders. Margins on some of those elements will help to reduce the number of elements that need to be nested for the desired effect.
And until CSS Backgrounds and Borders Level 3's multiple background images are better supported (but it is a CR already, so you may be lucky), you can achieve the illusion of multiple background images by using differently positioned (different) background images for nested (positioned) block elements. That way you do not need a box and background image of fixed size.

Resources