William Jiang

JavaScript,PHP,Node,Perl,LAMP Web Developer – http://williamjxj.com; https://github.com/williamjxj?tab=repositories

Tag Archives: css

CSS tips: Initializr, HTML5 Boilerplate, skype phone display, minify CSS

1. How do I prevent phone numbers looking twice as large and having a Skype highlight?

If this is occurring, it is because a user has the Skype browser extension installed.
Use the following CSS to prevent Skype from formatting the numbers on your page:

span.skype_pnh_container {
    display: none !important;
}

span.skype_pnh_print_container {
    display: inline !important;
}

2. How can I integrate Twitter Bootstrap with HTML5 Boilerplate?

You can use Initializr to create a custom build that includes HTML5 Boilerplate with Twitter Bootstrap.

Read more about how HTML5 Boilerplate and Twitter Bootstrap complement each other.

3. Minify Your CSS

Here is a Free CSS Compressor and CSS Compression Tool:
http://www.minifycss.com/css-compressor

4. CSS tips

Here are some CSS Best Practices extracted from the book ‘Visual QuickStart Guide’ by ‘Jason Cranford Teague’.

  • Prefer shorthand properties. use ‘Font’ to set multiple values with a single property.
    This not only cuts down on the amount of code, it also keeps similar property
    values together, makeing editing easier.
  • Use RGB for color:
    RGB values are easier for mere mortals to understan and you can now set transparent colors using RGBA.
  • Use background images or other styles for interface chrome.
  • Use CSS form simple background gradients.
  • Favor margin over padding.
  • Favor <link> over @import.
Advertisements

CSS: Full Screen Background

CSS: Full Screen Background

Here is a useful information for ‘Full Screen Background’ setup when I use WordPress Foxy template to customize a photography webpage. I put here for quick retrieving:

With background-size, you can tell an element how large its background image must be. Like this:

#elem{
 background:url(background.jpg) center center no-repeat;
 background-size:100px 150px;
}

But even more convenient, this property supports two magical values: contain and cover:

  • Contain resizes the background image so that it fits entirely in the element;
  • Cover is more interesting – it makes so that the element’s background is entirely taken up by the image. The image is resized to the smallest size that allows it to cover the element entirely (see the illustration below). This is also the property we will be using for our full screen background.

So with the 2 magical values, we can customize an image as a full-screen background to the html element:

html {
    min-height: 100%;
    background-size: cover;
    background-image: url(background.jpg);
    background-repeat: no-repeat;
    background-position: center center;
}
/* Workaround for some mobile browsers */
body{
    min-height:100%;
}

Before using the image, remember to use Photoshop or Illustrator to adjust JPEG to generate a suitable background image (width and height percentage, opacity etc).

CSS common color selectors

CSS common color selectors

FF has a wonder plugin ColorZilla, do we still need color references? Yes of course, the more helpful resources, the better. Here is a CSS color names Comparison Table, I list here for quick retrieving. For an example, I usually use ‘lightyellow’, ‘snow’ which are very cool.

Color Name HEX Color Shades Mix
AliceBlue  #F0F8FF   Shades Mix
AntiqueWhite  #FAEBD7   Shades Mix
Aqua  #00FFFF   Shades Mix
Aquamarine  #7FFFD4   Shades Mix
Azure  #F0FFFF   Shades Mix
Beige  #F5F5DC   Shades Mix
Bisque  #FFE4C4   Shades Mix
Black  #000000   Shades Mix
BlanchedAlmond  #FFEBCD   Shades Mix
Blue  #0000FF   Shades Mix
BlueViolet  #8A2BE2   Shades Mix
Brown  #A52A2A   Shades Mix
BurlyWood  #DEB887   Shades Mix
CadetBlue  #5F9EA0   Shades Mix
Chartreuse  #7FFF00   Shades Mix
Chocolate  #D2691E   Shades Mix
Coral  #FF7F50   Shades Mix
CornflowerBlue  #6495ED   Shades Mix
Cornsilk  #FFF8DC   Shades Mix
Crimson  #DC143C   Shades Mix
Cyan  #00FFFF   Shades Mix
DarkBlue  #00008B   Shades Mix
DarkCyan  #008B8B   Shades Mix
DarkGoldenRod  #B8860B   Shades Mix
DarkGray  #A9A9A9   Shades Mix
DarkGrey  #A9A9A9   Shades Mix
DarkGreen  #006400   Shades Mix
DarkKhaki  #BDB76B   Shades Mix
DarkMagenta  #8B008B   Shades Mix
DarkOliveGreen  #556B2F   Shades Mix
Darkorange  #FF8C00   Shades Mix
DarkOrchid  #9932CC   Shades Mix
DarkRed  #8B0000   Shades Mix
DarkSalmon  #E9967A   Shades Mix
DarkSeaGreen  #8FBC8F   Shades Mix
DarkSlateBlue  #483D8B   Shades Mix
DarkSlateGray  #2F4F4F   Shades Mix
DarkSlateGrey  #2F4F4F   Shades Mix
DarkTurquoise  #00CED1   Shades Mix
DarkViolet  #9400D3   Shades Mix
DeepPink  #FF1493   Shades Mix
DeepSkyBlue  #00BFFF   Shades Mix
DimGray  #696969   Shades Mix
DimGrey  #696969   Shades Mix
DodgerBlue  #1E90FF   Shades Mix
FireBrick  #B22222   Shades Mix
FloralWhite  #FFFAF0   Shades Mix
ForestGreen  #228B22   Shades Mix
Fuchsia  #FF00FF   Shades Mix
Gainsboro  #DCDCDC   Shades Mix
GhostWhite  #F8F8FF   Shades Mix
Gold  #FFD700   Shades Mix
GoldenRod  #DAA520   Shades Mix
Gray  #808080   Shades Mix
Grey  #808080   Shades Mix
Green  #008000   Shades Mix
GreenYellow  #ADFF2F   Shades Mix
HoneyDew  #F0FFF0   Shades Mix
HotPink  #FF69B4   Shades Mix
IndianRed   #CD5C5C   Shades Mix
Indigo   #4B0082   Shades Mix
Ivory  #FFFFF0   Shades Mix
Khaki  #F0E68C   Shades Mix
Lavender  #E6E6FA   Shades Mix
LavenderBlush  #FFF0F5   Shades Mix
LawnGreen  #7CFC00   Shades Mix
LemonChiffon  #FFFACD   Shades Mix
LightBlue  #ADD8E6   Shades Mix
LightCoral  #F08080   Shades Mix
LightCyan  #E0FFFF   Shades Mix
LightGoldenRodYellow  #FAFAD2   Shades Mix
LightGray  #D3D3D3   Shades Mix
LightGrey  #D3D3D3   Shades Mix
LightGreen  #90EE90   Shades Mix
LightPink  #FFB6C1   Shades Mix
LightSalmon  #FFA07A   Shades Mix
LightSeaGreen  #20B2AA   Shades Mix
LightSkyBlue  #87CEFA   Shades Mix
LightSlateGray  #778899   Shades Mix
LightSlateGrey  #778899   Shades Mix
LightSteelBlue  #B0C4DE   Shades Mix
LightYellow  #FFFFE0   Shades Mix
Lime  #00FF00   Shades Mix
LimeGreen  #32CD32   Shades Mix
Linen  #FAF0E6   Shades Mix
Magenta  #FF00FF   Shades Mix
Maroon  #800000   Shades Mix
MediumAquaMarine  #66CDAA   Shades Mix
MediumBlue  #0000CD   Shades Mix
MediumOrchid  #BA55D3   Shades Mix
MediumPurple  #9370D8   Shades Mix
MediumSeaGreen  #3CB371   Shades Mix
MediumSlateBlue  #7B68EE   Shades Mix
MediumSpringGreen  #00FA9A   Shades Mix
MediumTurquoise  #48D1CC   Shades Mix
MediumVioletRed  #C71585   Shades Mix
MidnightBlue  #191970   Shades Mix
MintCream  #F5FFFA   Shades Mix
MistyRose  #FFE4E1   Shades Mix
Moccasin  #FFE4B5   Shades Mix
NavajoWhite  #FFDEAD   Shades Mix
Navy  #000080   Shades Mix
OldLace  #FDF5E6   Shades Mix
Olive  #808000   Shades Mix
OliveDrab  #6B8E23   Shades Mix
Orange  #FFA500   Shades Mix
OrangeRed  #FF4500   Shades Mix
Orchid  #DA70D6   Shades Mix
PaleGoldenRod  #EEE8AA   Shades Mix
PaleGreen  #98FB98   Shades Mix
PaleTurquoise  #AFEEEE   Shades Mix
PaleVioletRed  #D87093   Shades Mix
PapayaWhip  #FFEFD5   Shades Mix
PeachPuff  #FFDAB9   Shades Mix
Peru  #CD853F   Shades Mix
Pink  #FFC0CB   Shades Mix
Plum  #DDA0DD   Shades Mix
PowderBlue  #B0E0E6   Shades Mix
Purple  #800080   Shades Mix
Red  #FF0000   Shades Mix
RosyBrown  #BC8F8F   Shades Mix
RoyalBlue  #4169E1   Shades Mix
SaddleBrown  #8B4513   Shades Mix
Salmon  #FA8072   Shades Mix
SandyBrown  #F4A460   Shades Mix
SeaGreen  #2E8B57   Shades Mix
SeaShell  #FFF5EE   Shades Mix
Sienna  #A0522D   Shades Mix
Silver  #C0C0C0   Shades Mix
SkyBlue  #87CEEB   Shades Mix
SlateBlue  #6A5ACD   Shades Mix
SlateGray  #708090   Shades Mix
SlateGrey  #708090   Shades Mix
Snow  #FFFAFA   Shades Mix
SpringGreen  #00FF7F   Shades Mix
SteelBlue  #4682B4   Shades Mix
Tan  #D2B48C   Shades Mix
Teal  #008080   Shades Mix
Thistle  #D8BFD8   Shades Mix
Tomato  #FF6347   Shades Mix
Turquoise  #40E0D0   Shades Mix
Violet  #EE82EE   Shades Mix
Wheat  #F5DEB3   Shades Mix
White  #FFFFFF   Shades Mix
WhiteSmoke  #F5F5F5   Shades Mix
Yellow  #FFFF00   Shades Mix
YellowGreen  #9ACD32   Shades Mix

CSS 2 selector syntax

CSS 2 selector syntax:

For quick retrieving, I list basic CSS selecor syntax:

Pattern Meaning
* Matches any element.
E Matches any E element (i.e., an element of type E).
E F Matches any F element that is a descendant of
an E element.
E > F Matches any F element that is a child of
an element E.
E:first-child Matches element E when E is the first
child of its parent.
E:link
E:visited
Matches element E if E is the source
anchor of a hyperlink of which the target is not yet visited (:link)
or already visited (:visited).
E:active
E:hover
E:focus
Matches E during certain
user actions.
E:lang(c) Matches element of type E if it is in (human) language c
(the document language specifies how language is determined).
E + F Matches any F element immediately preceded by
a sibling element E.
E[foo] Matches any E element with the
“foo” attribute set (whatever the value).
E[foo=”warning”] Matches any E element whose
“foo” attribute value is exactly equal to “warning”.
E[foo~=”warning”] Matches any E element whose
“foo” attribute value is a list of space-separated values, one of
which is exactly equal to “warning”.
E[lang|=”en”] Matches any E element whose
“lang” attribute has a hyphen-separated list of values
beginning (from the left) with “en”.
DIV.warning Language specific. (In HTML, the same
as DIV[class~=”warning”].)
E#myid Matches any E element with ID
equal to “myid”.

CSS Selectors Tips

The 30 CSS Selectors you Must Memorize

I found a helpful article regarding on CSS Selector, which I keep a link for reference:

http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

CSS: collection 1

CSS: collection 1

I frequently use CSS effects in web codes, some are frequently used. I start to collect most generally used from time to time.

  • text-shadow and box-shadow
  • input’s placeholder
  • bottom-line
  • input:focus
<style type="text/css">
.box {
  text-shadow: 1px 1px 1px #294e7b;
  -moz-box-shadow:0px 0px 5px #000;
  -webkit-box-shadow: 0px 0px 5px #000;
  box-shadow: 0px 0px 5px #000;
  border-bottom: 1px solid #85929A;
}
div.informal p {
  background-color: #CCCCCC;
  border-bottom: 1px outset #000000;
  text-indent: 0;
}
div#topic >div {
  border-bottom-width: 1px;
  border-bottom-style: dotted;
  margin: 0px;
  padding: 20px;
  width: 60%;
}
input:focus, textarea:focus, select:focus{
  background-color: lightyellow;
}
</style>

<input> attribute: placeholder=””, very helpful attribute in a form, like:


<input type="text" name="username" id="username" class="textinput" placeholder="Username" autocomplete="on" />

PHP:How to know the server is Windows or Linux?

PHP: How to know the server is Windows or Linux?

A simple function to judge the running environment: Is the script running in Windows or Linux?

This is useful for PHP script compatible:
Codeing and Testing in local Windows environment, such as Windows XAMPP; while formly running in Linux production server. Here is the script:

function get_env() {
if(isset($_SERVER['SERVER_SOFTWARE'])) {
  if(preg_match('/Win32/i', $_SERVER['SERVER_SOFTWARE']))
   return 'Windows';
  return 'Unix';
 }
}
// In the top of the script:
if(get_env()=='Windows')
 define('PATH', '.\\windows_dir\\');
else
 define('PATH', './linux_dir/');

CSS: Shorthand of background

CSS’s ‘background‘ attribute has many options. The following lists these options and gives examples to use the shorthand property of ‘background‘:

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position
body {background:#ffffff url('img_tree.png') no-repeat right top;}
background:#5d9ab2 url('img_tree.png') no-repeat top left;
$(element)..css({'background-color': '#ffe', 'border-left': '5px solid #ccc'})

Similiar, for font:

Property Description
font Sets all the font properties in one declaration
font-family Specifies the font family for text
font-size Specifies the font size of text
font-style Specifies the font style for text
font-variant Specifies whether or not a text should be displayed in a small-caps font
font-weight Specifies the weight of a font

css-font-cheat-sheet.jpg

CSS: Priority Scheme

Priority scheme for CSS sources (from highest to lowest priority):

  • Author styles (provided by the web page author), in the form of:
    • Inline styles, inside the HTML document, style information on a single element, specified using the “style” attribute
    • Embedded style, blocks of CSS information inside the HTML itself
    • External style sheets, i.e., a separate CSS file referenced from the document
  • User style:
    • A local CSS file the user specifies with a browser option, which acts as an override applied to all documents
  • User agent style
    • Default styles applied by the user agent, i.e., the browser’s default settings for element presentation

The style sheet with the highest priority controls the content display. Declarations not set in the highest priority source are passed on to a source of lower priority, such as the user agent style. This process is called cascading.

3 tips from work.

1.
Issue: How to customize only input(type=”text”)’s width?
Solution: use input[type=”text”]

The following is a quick way to customize the input button’s width (the input type is only “text”, NOT “radio”, “checkbox”, “submit”, “reset” etc.)


input[type="text"] {
  width: 350px;
}

Since the apps scatter in different html templates, so modifying css is the only way. Adding the above codes into css file will make all apps change <input/> appearances immediately.

2. Mysql table definition

The following is a little complex MySQL table:


create table group1_group2 (
	upid int unsigned not null AUTO_INCREMENT,
	uid int(10) unsigned not null,
    ...,
	created timestamp not null default current_timestamp,
	primary key(upid),
	index (uid, pid),
	foreign key(uid) references users(uid)	on delete cascade,
	foreign key(pid) references projects(pid) on delete cascade
);
--
CREATE TABLE `test` (
  `uid` int(10) unsigned NOT NULL,
  `pid` tinyint not null,
  `username` varchar(30) NOT NULL,
  ...,
  `date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  unique index(uid),
  index (pid),
  foreign key (username) references others(username) 
    on delete cascade on update cascade
)ENGINE = InnoDB;

The on delete cascade on update cascade act as a trigger.
Does Pear’s MDB2 totally support MySQL powerful syntax ?

3. Draw MySQL Schemas

phpMyAdmin brings with a simple tool to draw Database Structure.
Select the Database, then choose ‘Designer’ tab on the top tabs: the total Database Structure are displayed! Quite cool.
By using FF’s FireShot to process the graphic and immediately generate the Database Schema documents.

It seems ‘MySQL Workbench’ and DB Schema Viewer plugin for EClipse also have such functionality. But didn’t use yet.

css+javascript: a showtip effect.

Here I wrote a simple html to implement a showtip effect by using css + javascript(prototype).
The steps:

  • get prototype.js from google library instead of locally.
  • define css class tooltip for the mouseover effect: keywords include position, z-index
  • define javascript functions to process the mouseover/mouseout event by using prototype.js: carefully calculates the displayed box.
  • set onmouseover and onmouseout event in html in <a> tag.
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Showtip</title>
  6. <style type="text/css">
  7. .tooltip {
  8. display: none;
  9. position: absolute;
  10. z-index: 1000;
  11. width: 130px;
  12. background: #FFFACD;
  13. border: 2px double #2E8B57;
  14. text-align: left;
  15. padding: 5px;
  16. min-height: 1em;
  17. -moz-border-radius: 5px;
  18. }
  19. </style>
  20. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js">
  21. </script>
  22. <script language="javascript" type="text/javascript">
  23. function showtip(e,message) {
  24. var x=0, y=0, m, h;
  25. var t = message;
  26. if(!e) var e=window.event;
  27. if(e.pageX||e.pageY) { x=e.pageX;y=e.pageY; }
  28. else if(e.clientX||e.clientY)
  29. x=e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;y=e.clientY+document.body.scrollTop+document.documentElement.scrollTop;
  30. m = $('tipmsg');
  31. if((y>10)&&(y<450)) m.style.top=y-4+"px";
  32. else m.style.top=y+4+"px";
  33. var messageHeigth=(t.length/20)*10+25;
  34. if((e.clientY+messageHeigth)>510) m.style.top=y-messageHeigth+"px";
  35. if(x<850) m.style.left=x+20+"px";
  36. else m.style.left=x-170+"px";
  37. m.innerHTML=t;m.style.display="block";m.style.width="200px";m.style.zIndex=10;
  38. }
  39. function hidetip() {
  40. $('tipmsg').style.display="none";
  41. }
  42. </script>
  43. </head>
  44. <body>
  45. <div id="tipmsg" class="tooltip"></div>
  46. <a href="javascript:void(0);" onmouseover="showtip(event,'To display details when mouseover.');" onmouseout="hidetip();" style="text-decoration:underline;"> Click to show tip.</a>
  47. </body>
  48. </html>

When mouse over the text, the showtip function is called and the effect is the following:
show tip

When mouse leaves the text, the hidetip() active to hide the pop text.
It works pretty good.