If you want the  first-letter  of a <p>aragraph to look like Drop Cap (old fashion newspaper style), with a bigger letter floated to the left every browser shows up something different.

The main problem is to align in vertical the letter to the top of the text,the property vertical-align apply on the first-letter pseudo-element only if the float is set to none, that is a waste, the target I want to reach is big Letter with text around.  if I dont float the results, it shows a line break after the first line high like the height of the first letter.

Mozilla Firefox is the only one understanding a margin or padding from the top, so thumb up for this browser.

The developer tools presented in other browsers than Firefox dont allow me to edit the CSS in live, in order  to see faster which solution I can take.  for the other browsers I used the edit & try option of http://www.w3schools.com

IE6

This pretty article http://www.satzansatz.de/cssd/pseudocss.html discusses the classic IE behavior for typo and spacing errors,  IE6 requires an empty space between the class/id name and the comma and a space between the class/id  and the {} to read the properties

SOLUTIONS: Lets fight the Browser compatibility

1. Using spans: create a span around the first letter is the mostly compatible solution, frequently used in the past, but does not work for dynamic created content, at least it does not without a script that add the span automagically
2. insert line height and work on margin-bottom!
3. Use a specified font for the first letter , where the uppercases are positioned into the font editor 4 pixel down to the bottom line (simply crazy for mostly common low payed jobs!)

thanks to this article (http://www.users.globalnet.co.uk/~arcus/html/dropcaps.html) I noticed that the margin bottom on the contrary of the margin-top it works in many browser!

Important is also the line height which forces the browser to think about the first letter like if was height like the text.

the results are still really different for each browser, that terrifies me and the letter  is frequently higher than the line. but acceptable.

HERE THE CODE:
/*TODO check IE6*/

p:first-child:first-letter{
float:left; /* Make the text flow around the letter */

font-size:3em;
margin:4px 4px 0px 0px;/*for firefox that is the only one reading the margin-top*/
margin-bottom:-0.25em;/*for the other browsers, Chrome, Opera*/
line-height:0.97em; /*Adjustment mainly for IE , help position the letter on the same height then the text,  that has 0.97em line-height/
}

Sprachkurier.de : the website is made from another crew, but the owner asked me to center the website vertically in the browser, and voila´

the idea is to give a vertical dimension of an empty div of 50% to get the middle of the height, and a margin bottom negative of the value of half of the height of the content DIV that need to be centered. That means that the content need a fixed height to be positioned.

here the code

Those are the regular cross browser tests we make : Internet exploder 6, 8, 9; Safari, Chrome, Opera, Firefox

on linux, mac and pc.

Monitors dimensions: 1920×1080, 1280×800, 4:3 and 16:9, netbook and Sony Ericson mobile Walkman and Android mobile phone
Nevertheless after we used our machines we let run some test on this web utility http://browsershots.org/

———————————————————————————————————

While making the layout for a mobile app with the help of jquerymobile, I have questioned myself about the gradient background, for web and mobile.

Looks like the mostly used mobile browser is Opera Mobile – Opera mini,that since the end of 2010 replace “Web (mobile) Browser for S60″ the default browser for the mostly sold operative system Symbian OS (originally Nokia propertary made after Open Source!),. Has a stable position with “29.2% of worldwide smartphone market share in 2011″ (Wikipedia).

2nd  place is the Android that is increasing users!
3rd place for Iphone with iOS and Safari.
The mobile browsers are born around 1996, in text only mode, around 2006 start the usage of CSS2.1, but the hardware developed so fast that there is no old browser engine to fight with,  thee is just the choice or they cannot show a graphic layout or they render better of your others monitor.
So the list can be restricted to:

/* Safari, Chrome, Skyfire, Nokia Series 60, Polaris, BlackBerry, Android*/
background: -webkit-linear-gradient(bottom, #006353, #c7dad6);

/*Portable Firefox, Firefox Mobile Fennec 1.0 Alpha 3, SeaMonkey Portable 2.0.14*/
background: -moz-linear-gradient( center bottom, rgb(0,98,83) 50%, rgb(0,113,94) 50%, rgb(199,218,214) 99%);

/*Opera Mini & Opera Mobile*/
background: -o-linear-gradient(bottom, #006353, #00715e, #c7dad6);

/*IE mobile */
-msfilter:”progid:DXImageTransform.Microsoft.gradient
(startColorStr=’#81aea7′, EndColorStr=’#81aea7′)”

---

For the computers Windows XP is always on the top usage, also if Windows 7 is increasing, but with a luck windows user start to leave Internet Explorer that is still on the top but decreasing, followed from Firefox and an increasing number of Chrome users. The fact that IE6 is still there make us brrrrr, IE6 is going down but is anyway counting almost the same users like Safari.
The CSS code for the computer web compatibility is really long:

---

/* W3C Standard */
background:linear-gradient(bottom, #81aea7, #c7dad6);

/* Safari 4-5, Chrome 1-9 */
background-image: -webkit-gradient(
linear,left bottom,left top,
color-stop(0.5, rgb(0,98,83)),
color-stop(0.99, rgb(199,218,214))
);

/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(bottom, #006353, #c7dad6);

/*Mozilla/Gecko (Firefox >= 3.6 etc) */
background: -moz-linear-gradient(
center bottom,
rgb(0,98,83) 50%,
rgb(0,113,94) 50%,
rgb(199,218,214) 99%
);

/* Opera 11.10+ */
background: -o-linear-gradient(bottom, #006353, #00715e, #c7dad6);

/*IE 5.5 – 7*/
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr=’#006353′, EndColorStr=’#c7dad6′, GradientType=0);

/*IE 8+*/
-msfilter:”progid:DXImageTransform.Microsoft.gradient
(startColorStr=’#81aea7′, EndColorStr=’#81aea7′)”

You could add even one more exception, for a while Opera used an external svg to create the gradient, but the work is not worth.

---

So many lines that makes me nostalgic about the old way to do it, that now can be used as fallback in emergency:

/* fallback, Opera <=10 */
background-color: #1a82f7;
background: url(images/linear_bg_2.png);
background-repeat: repeat-x;

---

Linkography

http://gs.statcounter.com/#os-ww-monthly-201004-201104

http://en.wikipedia.org/wiki/Usage_share_of_web_browsers

http://en.wikipedia.org/wiki/Mobile_browser

thanks for the great work:

http://www.normansblog.de/demos/browser-support-checklist-css3

I personally prefer to choose the Color Code by myself but when you suggest multiple sketches can be an help to dont repeat yourself.
the best tool is free to use on-line:
colorschemedesigner
with Html / Css / text / ACO (photoshop palette) / GPL (Gimp palette!) generator to save the color schem

Linux tools:
Firefox Plugin: Palette Grabber 0.4.1 [testing now come back visit us to know more!]

http://registry.gimp.org/node/15833 [Python plugin!]

AGAVE
ich spiele gerade mit diesen color code generator Agave
Agave is nothing special is only 1,262 kb big

I have found a Python plugin to let Agave run in Gimp ::
Color Scheme Helper for Gimp

A Python plugin that start the color scheme designer Agava for creating a new color scheme. The created color scheme can be saved as a Gimp color palette and loaded into Gimp.
In the software engine the only pretty idea is the contrast between text-background calculation…
changing the color automatically shows if is better a white or a black text on top of this color: Agave calculate if the bg color has a number higher then 555555 THEN the text is black and the opposite when the choosed gamma color is darker then 555555 the text will be white.

I m using AGAVE  as teaching tool, to show direct example of text contrast to graphic design students.

#tk: based on math – hmm naja interesting algorithm anyway … hehe ya should generate for special things like: body-font, screen-bgcolor, … i want some faders that automagically apply like livestyle to the site with correct pi and phi equations.

Color Scheme Generator version 3.51  has many new features!

The preview page I dont really like it use the colors in illogical contrast with the background

There are some tricks to have “style”

When your graphical production does not look harmonic || professional || complete, you have to work on your sketches and find the main style (like a corporate identity) that represents the project.

Colors & Light
The colors change, based on the ambient light where you watch them, that means  if you want to have a realistic effect on your illustrations you cannot use a warm gray and a cold gray in the same image, in nature that will not happen.
But you can use those gray variants  to create a surreal image for example.
Remember that the colors are influencing the mood, so use them with a meaning.
If you are working on web, search for the standard  colors for similar projects, because the meaning of the colors is really different in the different continents and the meaning changes a bit even between the European countries.

Background
The Background is really boring to make but really important to do.
Empty background is a ZEN solution, white for day, and Black for night. works only in ZEN context.
None color works as a single color in professional illustrations.
If you want to use one tone a good suggestion is to make a material background:
*  take many different white and trow them together on the paper
* take a brush technique and use one color, you will get a single color but with brushes signs, a bit of 3D

Minimize or exaggerate
When something does not convince you, here is the best trick to be used:
* minimize: take it out and delete it, minimize the objects  and the number of images helps to make the structure easier to read and be modeled.
* exaggerate: the other way is to take this not stylish component and repeat it, use it multiple times, even always.
For example you are not sure if a text needs to have a Outline color, you can take out the Outline at all minimize(), or make it fat, stronger color and repeat it for multiple text on the composition (exaggerate).

Harmonia and Elegance
Don’t be afraid, is easy. Everything around you can be represented by math, mathematics as convention to explain the world, Music is math based, and Art too. You can compose your images with math help, use the “guide lines”  to see clearly the position of your object on the page, to calculate the empty spaces … and remember Math,  Geometry, Perspective, Harmonia and Elegance are all the same thing !
z.B. Leonardo Da Vinci
The elegance is into clear lines, so if you use a Vector Program  smooth your lines or draw with a smoother plugin activated:
Inkscape  you can realize this in many ways; for example take the tool ->  [ EDIT PATH BY NODES ]  ; now click on -> [ Make selected nodes symmetric ]
Elegance has few lines, not many particulars, like an Armani suite
Harmonia is based on the cycle of the objects, how and how many times the object is represented.
If there is an object on the left and on the right is empty, that means the emptyness has a meaning, when there is no meaning make full the right side with something that balance the left content.

In history of art the idea of composition is always present, every artist uses a personal way to do it, but many people use the 3,14 rule, go check how the greek temples were built, how Eisenstein decided the video Editing of “Panzerkreuzer Potemkin”, how  Bruno Munari plans his graphics design.

Probably I will be banned from many Graphics websites after this post, because those tricks and tips are the precious knowledge of who work and study ART || GFX

but you know what? lets support and produce Evolution: OPEN SOURCE, OPEN MIND, NOT COMMERCIAL, SHARE ALIKE

Alice Z Bognetti

Well supercool plugins for designers arrived fresh on FireBug

Pixel Perfect
Add the layout design in alpha transparency directly over the website in the browser.

CSS usage
Check which css properties are actually called from the code and applied. NOTICE: not everythin inactive is not used, it analyzes only the current page

(I love Firebug!)