I was reading this article http://www.sitepoint.com/using-unprefixed-css3-gradients-in-modern-browsers/ .I created this little demo of what this article teaches.
<html>
<head>
<title>Css Gradients</title>
<style>
.demo{
height: 200px;
width: 400px;
margin-bottom: 10px;
background: linear-gradient(to right,red,yellow);
/*background: linear-gradient(23deg,red,yellow);*/
}
#radial{
/*background: radial-gradient(at center,red,yellow);*/
background: radial-gradient(circle closest-corner,red,yellow);
}
</style>
</head>
<body>
<div class="demo"></div>
<div class="demo" id="radial"></div>
</body>
</html>
Now the problem is,Firefox is rendering the background gradient correctly but Google Chrome(version 22) is not rendering the background gradient at all.See the screenshots
At the moment (Chrome 24 / Safari 6) Webkit still have not added support for unprefixed css3 gradients yet.
This is a bit sad, if you consider the fact that even IE10(!) uses unprefixed syntax already.
Reference: http://caniuse.com/#search=grad
Related
I try to display a svg icon on a html page.
On chrome and other browser that works fine but on edge and internet explorer the icon don't appear.
I made it witk mask in css.
body{
background: #000;
}
.default {
background-color: #fff;
width:45px;
height:45px;
}
.icon {
mask:url('./icons/network.svg') no-repeat center center;
-webkit-mask: url('./icons/network.svg') no-repeat center center;
mask-size:90px auto;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="./style.css">
<title>Icons</title>
</head>
<body>
<image class="default icon"></image >
</body>
</html>
On internet explorer it displays a white square ( i think is the default class in css).
Thanks in advance !
According to caniuse.com Internet Explorer does not support mask at all and edge only partially supports this feature. Have a look here: https://caniuse.com/#search=mask
I need to create a background pentagon for my page header. In order to do this, I:
1) cannot edit the html
2) am doing the styling with SASS.
How do I get the shape to appear like this wireframe image, and without transforming the text? In other words, the middle point of the pentagon must be at the bottom. Here is the compiled CSS and the HTML.
/* Header */
header {
background-color: #000000;
color: #ffffff;
width: 100%;
height: 100%;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Zen Garden: The Beauty of CSS Design</title>
<link rel="stylesheet" media="screen" href="style.css?v=8may2013">
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.csszengarden.com/zengarden.xml">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Dave Shea">
<meta name="description" content="A demonstration of what can be accomplished visually through CSS-based design.">
<meta name="robots" content="all">
<!--[if lt IE 9]>
<script src="script/html5shiv.js"></script>
<![endif]-->
</head>
<!--
View source is a feature, not a bug. Thanks for your curiosity and
interest in participating!
Here are the submission guidelines for the new and improved csszengarden.com:
- CSS3? Of course! Prefix for ALL browsers where necessary.
- go responsive; test your layout at multiple screen sizes.
- your browser testing baseline: IE9+, recent Chrome/Firefox/Safari, and iOS/Android
- Graceful degradation is acceptable, and in fact highly encouraged.
- use classes for styling. Don't use ids.
- web fonts are cool, just make sure you have a license to share the files. Hosted
services that are applied via the CSS file (ie. Google Fonts) will work fine, but
most that require custom HTML won't. TypeKit is supported, see the readme on this
page for usage instructions: https://github.com/mezzoblue/csszengarden.com/
And a few tips on building your CSS file:
- use :first-child, :last-child and :nth-child to get at non-classed elements
- use ::before and ::after to create pseudo-elements for extra styling
- use multiple background images to apply as many as you need to any element
- use the Kellum Method for image replacement, if still needed.
- don't rely on the extra divs at the bottom. Use ::before and ::after instead.
-->
<body id="css-zen-garden">
<div class="page-wrapper">
<header role="banner">
<h1>CSS Zen Garden</h1>
<h2>The Beauty of <abbr title="Cascading Style Sheets">CSS</abbr> Design</h2>
</header>
</body>
</html>
You can use multiple linear-gradient like this:
/* Header */
header {
background:
linear-gradient(#000,#000)0 0/100% calc(100% - 70px) no-repeat,
linear-gradient(to bottom left,#000 50%,transparent 51%)0% 100%/50.5% 70px no-repeat,
linear-gradient(to bottom right,#000 50%,transparent 51%)100% 100%/50% 70px no-repeat;
color: #ffffff;
width: 100%;
padding-bottom:50px;
text-align: center;
}
<header role="banner">
<h1>CSS Zen Garden</h1>
<h2>The Beauty of <abbr title="Cascading Style Sheets">CSS</abbr> Design</h2>
</header>
For the Zen Garden, you want to get really familiar with pseudo elements. Here's an example: https://jsfiddle.net/sheriffderek/3ykb2k3k
docs: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
<header>
<!-- no markup change... -->
</header>
Lots of ideas here: Is there a way to use SVG as content in a pseudo element :before or :after
header {
min-height: 300px;
background: gray;
position: relative; /* to create a boundary for the absolute children */
}
header:before {
content: '';
/* has to have something in 'content' or :before and :after don't work */
display: block;
width: 100%;
height: 200px;
position: absolute;
/* positioned based on closest relative parent */
top: 0;
left: 0;
background: red; /* could be an image or gradient or many things */
background-image: url('https://am23.akamaized.net/tms/cnt/uploads/2015/04/Revenge-of-the-Nerds-1984-revenge-of-the-nerds-11710197-950-534.jpg');
background-size: cover;
-webkit-clip-path: polygon(100% 0, 100% 30%, 50% 50%, 0 30%, 0 0);
clip-path: polygon(100% 0, 100% 30%, 50% 50%, 0 30%, 0 0);
/* here's a fun new approach */
}
http://bennettfeely.com/clippy
Another way of doing this is simply use clip-path css property like this
header {
background-color: #000000;
color: #ffffff;
width: 100%;
height: 100%;
text-align: center;
padding:60px 0;
clip-path:polygon(0% 0%, 100% 0%, 100% 70%, 50% 100%, 0% 70%);
}
I hope it helps!
I am working on a website which uses scales for showing stats.
I have created background gradients for each scale using CSS3 and the HTML5 meter element as in this tutorial:
HTML5-Meter-Shim
It works on all browsers expect Chrome and Opera, which show the default color.
Is this possible in Chrome and Opera, or is there any other solution?
Here's my work:
http://jsfiddle.net/KRnUd/2/
Use RGB color syntax, background-image instead of background, and meter attributes to get it fully working in Chrome and partially working in Opera:
<!doctype html>
<html lang="en">
<head>
<title>Meter Usage</title>
<style type="text/css">
meter {
display: inline-block;
height: 16px;
width: 200px;
overflow: hidden;
background-color: rgb(237,237,237);
background-image: -webkit-linear-gradient(top, rgb(237,237,237),rgb(187,187,187) 36%,rgb(247,247,247) ); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(top, rgb(237,237,237),rgb(187,187,187) 36%,rgb(247,247,247) ); /* Opera 11.10+ */
}
</style>
</head>
<body>
<meter min="1024" max="10240" low="2048" high="8192" value="9216"/>
</body>
</html>
Greetings all,
I'm using a gradient background with -webkit-gradient. It's not working on Chrome 8.0.552.224 on Windows 7, but I could swear it was recently working on Chrome-OS X. It's Monday so perhaps I'm missing something obvious, but if so I can't figure it out. I'd appreciate your taking a look. The sample code here will work on Firefox but doesn't display a gradient in Chrome:
Thanks,
-Northk
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gradient test </title>
<style>
.main-header
{
padding-top: 50px;
min-height: 50px;
background: -webkit-gradient(linear, 0%, 0%, 0%, 100%, from(#fff), to(#000));
background: -moz-linear-gradient(top, #fff, #000);
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="main-header">
THIS WORKS ON FIREFOX BUT DOESN'T WORK ON CHROME-WINDOWS 7!
</div>
</body>
</html>
Seems I just got the syntax wrong. Here's how it should be:
background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#000));
Be aware in Chrome 16.0.912.75m still has a small CSS bug/issue when parsing style:
background:-webkit-linear-gradient (top,gray 0,#A0A0A0 100%);
This will not work, because of spaces between -webkit-linear-gradient and start bracket.
Deleting additional spaces will solve the issue as well as minifying CSSs.
Try this
background: -webkit-linear-gradient(#DDDDDD, #ffffff);
The body-Tag of a HTML-File does have a background-image applied:
body {… background: #fff url(./img/bg-body.jpg) no-repeat 0 82; …}
everything works just fine with WebKit (Safari, Chrome…) and even Trident (IE) … BUT the background-image is not showing in Gecko (Firefox) … and if I add the DOCTYPE to the document, it doesn't work anywhere.
<html>
<head>
<style type="text/css">
body {… background: #fff url(./img/bg-body.jpg) no-repeat 0 82; …}
</style>
</head>
<body>
…
</body>
</html>
It does also not work with no divs, no content, no nothing…
Any ideas?
You need to specify the unit for your background position
body{ background: #fff url(./img/bg-body.jpg) no-repeat 0 82px }
it seems to work in webkit without it. But gecko needs a unit. Then it should work.