Mick Redman: gradient

Showing posts with label gradient. Show all posts

Monday, 16 May 2011

Another radial gradient background

Here is another example of using a radial gradient for a background, just because it looks nice.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Radial Gradient Background</title>
<style type="text/css">
*
{
margin:0;
padding:0;
height:100%;
}
html, body
{
font-family:Sans-serif;
}
#background
{
position:absolute;
z-index:-1;
background:#FF0000;
/* url(images/check.gif); */
width:100%;
height:100%;
}
.contentHolder
{
margin:0 auto;
width:800px;
padding:10px;
}
#topPart, #middlePart, #bottomPart
{
display:block;
color:#FFFFFF;
}
#topPart
{
height:200px;
}
#middlePart
{
height:400px;
}
#bottomPart
{
min-height:200px;
}
</style>
</head>
<body>
<img id="background" src="images/radialGradientBackground.png" alt="gradient" />
<div id="topPart">
<div class="contentHolder">
<h1>Hello</h1>
</div>
</div>
<div id="middlePart">
<div class="contentHolder">
<h1>The stuff which really matters</h1>
</div>
</div>
<div id="bottomPart">
<div class="contentHolder">
<h1>Goodbye</h1>
</div>
</div>
</body>
</html>

More use of radial gradients

Another very simple example of how to use radial gradients. In this case, to add lighting to your headers and footers.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fading Background</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
font-family:Sans-serif;
height:100%;
margin: 0 auto;
color:#000000;
}
#topHalf
{
height:50%;
background:#D4E4DF;
}
#bottomHalf
{
height:50%;
clear:both;
background:#B6CAC3;
}
#topContent, #bottomContent
{
margin:0 auto;
width:800px;
min-height:100%;
}
#topContent
{
background:url(images/fadingbgtop.png) no-repeat center top;
}
#bottomContent
{
background:url(images/fadingbgbottom.png) no-repeat center bottom;
}
</style>
</head>
<body>
<div id="topHalf">
<div id="topContent">
<h1>This is a sticky header example</h1>
</div>
</div>
<div id="bottomHalf">
<div id="bottomContent">
<h1>This is a sticky footer example</h1>
</div>
</div>
</body>
</html>

Tuesday, 16 November 2010

Using css3pie with on HTML5 for cross browser effects

I have been using css3pie from http://css3pie.com/ for some time now. In order to run the test below, you will have to download it. You could put it in a scripts folder as I have but it doesn't matter. The example below contains a few elements which will make it work cross browser.
Firstly, I have added the html5.js reference at the top.
Secondly, I have reset the * and body values.
Thirdly, I have use em insted of px.
Finally, I switched the gradient around on the -pie-background call.
Enjoy!

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3pie test</title>

<style>
*
{
margin:0;
padding:0;
border:0;
}
body
{
font-family:Sans-serif;
color:#FFFFFF;
font-size:1em;
line-height:140%;
}
section#borderRadiusExample
{
background:#6BC2E8;
width:10em;
padding:0.62em;

/* rounded corners */
border-radius:0.62em;
-moz-border-radius:0.62em;
-webkit-border-radius:0.62em;

/* Shadow */
box-shadow:0.3em 0.3em 0.3em #CCCCCC;
-moz-box-shadow:0.3em 0.3em 0.3em #CCCCCC;
-webkit-box-shadow:0.3em 0.3em 0.3em #CCCCCC;

/* Linear gradient */
background-image:-moz-linear-gradient(90deg, #6BC2E8, #ABDEF3);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#6BC2E8), to(#ABDEF3));
-pie-background:linear-gradient(90deg, #ABDEF3, #6BC2E8);

behavior:url('scripts/PIE.htc');
}
</style>
</head>
<body>
<section id="borderRadiusExample">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</section>
</body>
</html>

Friday, 10 September 2010

Simple layout #4

This is the kind of design which could work as starting position for, as an example, a designer furniture shop. There is a little more code than I would usually try and use on this blog. I wanted to create a gradient using pure CSS rather than an image which meant adding the IE only code. Other than that, it's quite simple.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box design</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
height:100%;
background-color: #F3F3F3;
background-image: -moz-linear-gradient(top, #F3F3F3, #FFFFFF); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #F3F3F3),color-stop(1, #FFFFFF)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#F3F3F3', EndColorStr='#FFFFFF'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#F3F3F3', EndColorStr='#FFFFFF')"; /* IE8 */
}
#container
{
margin:0 auto;
width:800px;
}
h1, h2
{

font-family:Georgia;
font-weight:lighter;
}
h1
{
text-align:center;
font-size:4em;
}
h2
{
text-align:left;
font-size:2em;
margin-left:20px;
margin-top:1em;
}
.box, .twoBox
{
float:left;
min-height:260px;
}
.box
{
width:260px;
}
.twoBox
{
width:520px;
}
#box1
{
background:#77F9CF;
}
#box2
{
background:url(http://farm5.static.flickr.com/4125/4945802498_a53b3eedc5.jpg);
}
#box3
{
background:#7DD0F8;
}
#box4
{
background:#FFA77A;
}
#box5
{
background:#000000;
}
p
{
margin:20px;
text-align:justify;
line-height:140%;
color:#FFFFFF;
}
#footer
{
clear:left;
text-align:center;
color:#A3A3A3;
font-size:0.8em;
}
</style>
</head>
<body>
<h1>The Heading</h1>
<div id="container">
<div id="box1" class="box">
<h2>Sub</h2>
<h2>Heading</h2>
</div>
<div id="box2" class="twoBox">
</div>
<div id="box3" class="box">
</div>
<div id="box4" class="box">
</div>
<div id="box5" class="box">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p>
</div>
<div id="footer">This could be quite a long footer</div>
</div>
</body>
</html>

Friday, 27 August 2010

CSS Box gradient - cross browser

Here is a nice small example of how to get box gradients (using CSS) working across most browsers. Don't be put off by the silly stuff you need for IE. Just replace the colour values.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box gradient</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#container
{
min-height:100px;
width:400px;
background-color: #444444;
background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<h1>Box gradient</h1>
</div>
</body>
</html>