Archive for the ‘CSS’ Category

Simple solution: PNG-24 alpha transparency on IE 6

January 30, 2010

This solution only uses CSS and doesn’t involve creating additional images other than the single source PNG-24 file. The point is to put the image in a div, using IE specific “filter” extension for IE6 only and background-image for other browsers only. I’ve tested on IE6/7, FF3.5 and Safari.

HTML:

<div id=”header”>
<div id=”hdr_content”><div id=”hdr_logo”></div></div>
</div>

CSS:

#hdr_logo{
background: url(“images/logo_24.png”) repeat-x;
/*IE6*/
*background: none;
width: 191px;
height: 34px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/logo_24.png’, sizingMethod=’scale’);
}

Advertisements

Notes for Building iPhone With HTML, CSS and JavaScript by Jonathan Stark

October 17, 2009

The book. Author: Jonathan Stark.

  • Page scaling in iPhone
    By default Mobile Safari will zoom out for a page that is wider than 980px unless you specify “viewport” <meta> tag to tell it not to;

    <meta name = "viewport" content = "user-scalable=no, width=device-width" />
  • CSS for iPhone
    <link rel=”stylesheet” type=”text/css” href=”styles/iphone.css” media=”only screen and (max-device-width: 480px)” />
    <link rel="stylesheet" type="text/css" href="styles/desktop.css" media="screen and (min-device-width: 481px)" />
    <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="styles/desktop.css" media="all" />

    <![endif]-->
  • Icon for iPhone home screen, a.k.a. “web clip icon”By default, this is a 57px by 57px named “apple-touch-icon.png” in your web root. iPhone will add gloss and 10px(?) radius rounded corner to it. If you don’t want the iPhone to add effects to your webclip icon, change the name of the file to “apple-touch-icon-precomposed.png“.In the case you want to add a web clip icon for an individual page that is different from the rest of the site, add one of the following lines to the of the page:

  • <link rel="apple-touch-icon" href="myCustomIcon.png" />
    <link rel="apple-touch-icon-precomposed" href="myCustomIcon.png" />

  • Full-screen modeAdd the following line to the of your page and your web app will in display full screen mode when launched from the web clip icon, which will give you an extra of 104 px in height:

    <meta name="apple-mobile-web-app-capable" content="yes" />

    Once you’ve added the apple-mobile-web-app-capable meta tag, you have the option to control the background color of the 20 pixel status bar at the top of the screen using the apple-mobile-web-app-status-bar-style meta tag. The normal gray Safari status bar is the default, or you can change it to black. You can also set it to black-translucent which makes it partialy transparent and additionally removes it from the document flow. In other words, your content will be shifted up by 20 pixels and behind the status bar the when page first loads, so you might have to position your header a little lower to compensate.

  • Here are some webkit(?)/Safari specific CSS or newer CSS3 attributes or confusing ones:

  • text-shadow
    text-shadow: 0px 1px 0px #fff;

    The parameters: horizontal offset, vertical offset, blur, and color.
  • -webkit-gradient
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));
    a CSS gradient can be used anywhere you would normally specify a url() (e.g. background image, list style image). The parameters from left to right are as follows: the gradient type (can be linear or radial), the starting point of the gradient (can be left top, left bottom, right top, or right bottom), the end point of the gradient, the starting color, and the ending color.
  • -webkit-border-top-left-radius, etc.
    #header ul li:first-child a {
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    }
  • first-child/last-child pseudo classes

    #header ul li:first-child a {
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    }
    #header ul li:last-child a {
    -webkit-border-bottom-left-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    }

    The first-child and last-child pseudo classes can be a bit confusing. For example, li:first-child will select the first li that is the child of its ul parent. It does not select whatever is the first child of the li.
  • rgb/rgba
    text-shadow: rgba(125,125,125,0.6) 0px -1px 0px;
  • -webkit-border-image and border-width
    border-width: 0 8px 0 8px;
    -webkit-border-image: url(images/button.png) 0 8 0 8;

    These two propoerties together allow you to assign portions of a single image to the border area of an element. They are similar to 9-slice scaling in Flash or 9-patch in Android. The parameters in border-width refer to top/right/bottom/left side of the image.

How to get scrollbars inside background image in Container

May 11, 2009

Unlike a List based component, in which scrollbars always appear _inside_ a background image provided you have one, in a mx:Container subclassed component, such as a Canvas, the scrollbars always go _outside_ of your background image.

So say if the Canvas has a width of 200 px, the background image has a width of 200 px when there is no scrollbar. If the scrollbar is 16 pixels wide, the background image would become 200 – 16 = 184 px, as opposed to staying 200px wide. Sort of reminisentant of the DOM box model in IE vs. that in Firebox?

Solution? use nested containers. Say one called “innerBox” and the other “outerBox”:

For “outerBox”, you have full scaled background image and scroll policy to “off“;

For “innerBox”, you have background image set to null and scroll policy to “on“, plus, set both percentage width and percentage height to 100%. You may also want to setbackgroundAttachment to “fixed“;

See the sample CSS below:

.outerbox
{
background-image: Embed(source=”img/gradientPaneBkg.png”,
scaleGridTop=”7″, scaleGridBottom=”96″,
scaleGridLeft=”7″, scaleGridRight=”148″);
background-size: “100%”;
}
.innerbox
{
background-image: null;
vertical-scroll-bar-style-name: “myScrollBarStyle”;
}
.myScrollBarStyle
{
thumbSkin: Embed(source=”assets/scrollThumb_r.png”,
scaleGridLeft=”5″, scaleGridTop=”6″,
scaleGridRight=”7″, scaleGridBottom=”46″);
trackSkin: Embed(source=”assets/null_17_18.png”,
scaleGridLeft=”4″, scaleGridTop=”4″, scaleGridRight=”10″, scaleGridBottom=”170″);
upArrowSkin: Embed(source=”assets/null_17_18.png”);
downArrowSkin: Embed(source=”assets/null_17_18.png”);
}

Now here is the catch: since we have switched off the scrollbar on our component, each time you are are dealing with scrolling, you probably meant to deal with the innerBox’s scrolling. Like so:

override public function set verticalScrollPosition(value:Number):void
{
innerBox.verticalScrollPosition = value;
}
override public function get verticalScrollPosition():Number
{
return innerBox.verticalScrollPosition;
}

“backgroundAttachment” for mx:Container

May 7, 2009

It seems that mx:Container and subclasses have a style named “backgroundAttachment” which has a value of either “fixed” or “scroll“. “fixed” means the background image (if there is any) will be fixed with regard to the viewport; “scroll” means the background image will scroll with the content (fixed with the content as opposed to the viewport).

flex 3 skinning examples

March 9, 2009

CSS explorer in Flex 3

Button

Scrollbar

Flex 101: Embedding fonts for Button/Panel

August 15, 2008

You will need to explicitly set fontWeight=normal in CSS, in addition to respecifying a “font-face” for the embedded font.

<mx:Style>
@font-face
{
src:local(“Arial”);
fontFamily: arialEmbedded;
}
.ebFont
{
fontFamily: arialEmbedded;
fontWeight: normal;
}
</mx:Style>

<mx:Button id=”srchBtn” label=”Search” width=”100%” styleName=”ebFont” click=”currentState=’searching'”/>

Flex 101: Vertical centering text in Flex

August 5, 2008

Solution: Put the Text control inside a VBox control. Then wrap two Spacer instances around the Text control, with one before, one after the Text control. Set percentage height of both Spacers to 100. Like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:VBox verticalAlign="middle" width="300" height="400" backgroundColor="0x000000" borderStyle="solid" borderColor="0x000000" cornerRadius="6">
<mx:Spacer height="100%"/>

<mx:Text text="Motorola's New Mobile Unit CEO Sanjay Jha: 'Too Little, Too Late?' - 12 hours ago
Now that Motorola ( NYSE: MOT) has chosen a CEO for its struggling handset unit, everyone wants to know can Sanjay Jha save the company, ...
Washington Post - 647 related articles »" color="0xffffff" width="100%" height="100%" textAlign="center"/>

<mx:Spacer height="100%"/>
</mx:VBox>
</mx:Application>

Just use verticalAlign=”middle”. You would need to care about “verticalScrollPolicy”/”horizontalScrollPolicy” in certain cases though compared to the methods described above.

Flex 101: Round-cornered containers in Flex

August 5, 2008

You will need to set borderStyle=”solid” besides setting cornerRadius. Here

CSS bar graphs

May 21, 2008

Examples

  • “<table>” is rendered row by row(“<td>”) top to bottom;
  • Inside “<tr>” you can nest “<th>” or “<td>”;
  • “<td>” and “<th>” don’t need to have close tags;
  • Nested table must be inside a “<td>” node;
  • “<table>” tries to equalize widths of all cells(“<td>”) of the same column.
    The 2nd table in the preceding examples uses a nested table to create variant widths.

Vertical bar graphs using css

Real world bar graphs (with some CSS)

google map css trap 101

November 6, 2007

#1. An div rule will sometimes screw up the overlay popup. Suppose you have #container>#mapDiv, the following will add a weird white bar underneath the popup window (speech bubble when openInfoWindowHTML/openInfoWindow are called):

#container div{
margin-top:10px;
padding-bottom:10px;
}

#2. For some mysterious reasons, sometimes the GInfoWindow object gets some extra document div(s) nested when you call openInfoWindowHTML/openInfoWindow and that results in extra white padding space between the real content and teh GInfoWindow object. The workaround is to specify the “maxWidth” property in the GInfoWindowOption object which is the second parameter for an openInfoWindow(HTML) call:

GEvent.addListener(marker, "click", function() {
marker.openInfoWindow(venue.getHTML(), {maxWidth:300});
});