Showing posts with label css. Show all posts
Showing posts with label css. Show all posts

Monday, November 26, 2012

Iframe with 100% Height

Ever wonder how to create an iframe that fills the entire height (and width) of a page?
You probably tried writing something like:
<iframe width=100% height=100%></iframe>
and expected the iframe to fill up whatever it could.
The width=100% does what you expected and fills up the entire width of the page, but the height just stays about 200px.

Here's some easy JavaScript to do exactly this:


Put this in the head of your page:
<script language="JavaScript">
<!--
function resize_iframe()
{

 var height=window.innerWidth;//Firefox
 if (document.body.clientHeight)
 {
  height=document.body.clientHeight;//IE
 }
 //resize the iframe according to the size of the
 //window (all these should be on the same line)
 document.getElementById("glu").style.height=parseInt(height-
 document.getElementById("glu").offsetTop-8)+"px";
}

// this will resize the iframe every
// time you change the size of the window.
window.onresize=resize_iframe; 

//Instead of using this you can use: 
// <BODY onresize="resize_iframe()">


//-->
</script>
And inside your page's body create the iframe tag:
<iframe id="glu" width="100%" onload="resize_iframe()">
</iframe>

Sunday, November 25, 2012

Create rounded corners with CSS

Rounded corners for Safari/Chrome, Opera and IE9:
#example {
border-radius: 15px;
}
Rounded corners to be supported by Firefox as well:
#example {
-moz-border-radius: 15px;
border-radius: 15px;
}
border-radius
The border-radius shorthand property can be used to define all four corners simultaneously. The property accepts either one or two sets of values, each consisting of one to four lengths or percentages.
Example:
border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
border-radius: 5px;
border-radius: 5px 10px / 10px;
The first set of (1-4) values define the horizontal radii for all four corners. An optional second set of values, preceded by a ‘/’, define the vertical radii for all four corners. If only one set of values are supplied, these are used to determine both the vertical and horizontal equally.
If all four values are supplied, these represent the top-left, top-right, bottom-right and bottom-left radii respectively. If bottom-left is omitted it is the same as top-right, if bottom-right is omitted it is the same as top-left, and if only one value is supplied it is used to set all four radii equally.

Basic examples that should work in current versions of Firefox, Safari/Chrome, Opera and even IE9:
#Example_A {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}
#Example_B {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
}
#Example_C {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
}
#Example_D {
height: 5em;
width: 12em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}
#Example_E {
height: 65px;
width:160px;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}
#Example_F {
height: 70px;
width: 70px;
-moz-border-radius: 35px;
border-radius: 35px;
}
Another opinion in considering most of the browsers when create rounded conners through CSS:
Since each of the browsers still has its own unique idiosyncrasies, they apply prefixes such as -moz and -webkit.
-moz-border-radius is for Firefox, -webkit-border-radius is for Chrome/Safari and -khtml-border-radius is for older Konquerer browsers.
rounded-corners {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px; }

CSS Box Shadow

Syntax

box-shadow: h-shadow v-shadow blur spread color inset;
JavaScript syntax:
object.style.boxShadow="10px 10px 5px #888888"
Note: The box-shadow property attaches one or more drop-shadows to the box. The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional inset keyword. Omitted lengths are 0.
VALUE
DESCRIPTION
h-shadow
Required. The position of the horizontal shadow. Negative values are allowed
v-shadow
Required. The position of the vertical shadow. Negative values are allowed
blur
Optional. The blur distance
spread
Optional. The size of shadow
color
Optional. The color of the shadow.
inset
Optional. Changes the shadow from an outer shadow (outset) to an inner shadow


Box Shadow for Firefox, Safari/Chrome, Opera and IE9:
CSS Box Shadow
.Example_A {
  -moz-box-shadow:    3px 3px 5px 6px #ccc;
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
  box-shadow:         3px 3px 5px 6px #ccc;
}
Inner Shadow for Firefox, Safari/Chrome, Opera and IE9:
CSS Box Inner Shadow
.Example_B {
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}
One Side Box Shadow for Firefox, Safari/Chrome, Opera and IE9:
CSS Box One-Side Shadow
.Example_C {
 -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
         box-shadow: 0 8px 6px -6px black;
}

CSS Text Shadow

Syntax

text-shadow: h-shadow v-shadow blur color;
JavaScript syntax:
object.style.textShadow="2px 2px #ff0000"
Note: The text-shadow property attaches one or more shadows to text. The property is a comma-separated list of shadows, each specified by 2 or 3 length values and an optional color. Omitted lengths are 0.
VALUE
DESCRIPTION
h-shadow
Required. The position of the horizontal shadow. Negative values are allowed
v-shadow
Required. The position of the vertical shadow. Negative values are allowed
blur
Optional. The blur distance
color
Optional. The color of the shadow
Text shadows:
Text shadows
h3 {text-shadow: 0.1em 0.1em #333}
Fuzzy text shadow:
Fuzzy text shadow
h3.a {text-shadow: 0.1em 0.1em 0.05em #333}
h3.b {text-shadow: 0.1em 0.1em 0.2em black}
Readable white text:
Readable white text
h3 {color: white}
h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}
Multiple shadows:
Text multiple shadows
h3 {text-shadow: 0.2em 0.5em 0.1em #600,
      -0.3em 0.1em 0.1em #060,
      0.4em -0.3em 0.1em #006}
Emboss effect: Raised Emboss & Inset Emboss
Emboss effect
h3.a {text-shadow: -1px -1px white, 1px 1px #333}
h3.b {text-shadow: 1px 1px white, -1px -1px #444}
Drawing letters as outlines:
Drawing letters as outlines
h3 {text-shadow: -1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black}
Neon glow:
Neon glow
h3.a {text-shadow: 0 0 0.2em #8F7}
h3.b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
        0 0 0.2em #87F}