Posts tagged: css

Designer Work Tools 2013

comments Comments Off on Designer Work Tools 2013
By , November 9, 2013 15:33

I can already complaiine that none of the tools for live CSS editing, support SASS or LESS  (or other pre processor).

But they speed up your life so much we cannot complaine longer.

CSS updater

FireBug plug in http://www.cssupdater.com/
Prerequisites: Adobe Air, Firefox and minumum FireBug

Style Editor 1.0

https://addons.mozilla.org/en-US/firefox/addon/style-editor/?src=api
Requirements: Firefox 12.0 and later
Ma con Firefox 25.0 non compare il menu in right click

Synoptx LiveStyle

Propertary plugin build in PHP and Javascript is a multiplatform solution, adaptable for different CMS: WordPress Drupal Joomla. is the direct son of the propertary Spacecake CMS of the Web and Software Developer SynOptx.net

Colorpicker

What a waste Filezilla Colorpicker it copy just the color hexe code that are wrote in the css code

Colorzilla

Not only the best colorpicker on add ons market but also a precious tool for gradient generator!
Colorzilla pick also the value color from images, jpg… converting in webstandard Hex format.
If I can say something the only bad thing will be to have another standalone on the tollbar of my browser.

:first-letter pseudo-element for drop cap

comments Comments Off on :first-letter pseudo-element for drop cap
By , July 19, 2011 17:03

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/
}

Color Scheme Generator

By , August 15, 2010 11:28

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

Firefox Firebug plugins for designer

comments Comments Off on Firefox Firebug plugins for designer
By , August 4, 2010 16:06

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!)

WordPress Open Source Blog System
SynOptX Lab Theme