CSS Color chart

Here is a chart of css colors with common names avaible in most browsers.

HTML name	Hex code R G B	Decimal code R G B
Pink colors
Pink	`FF C0 CB`	`255 192 203`
LightPink	`FF B6 C1`	`255 182 193`
HotPink	`FF 69 B4`	`255 105 180`
DeepPink	`FF 14 93`	`255 20 147`
PaleVioletRed	`DB 70 93`	`219 112 147`
MediumVioletRed	`C7 15 85`	`199 21 133`
Red colors
LightSalmon	`FF A0 7A`	`255 160 122`
Salmon	`FA 80 72`	`250 128 114`
DarkSalmon	`E9 96 7A`	`233 150 122`
LightCoral	`F0 80 80`	`240 128 128`
IndianRed	`CD 5C 5C`	`205 92 92`
Crimson	`DC 14 3C`	`220 20 60`
FireBrick	`B2 22 22`	`178 34 34`
DarkRed	`8B 00 00`	`139 0 0`
Red	`FF 00 00`	`255 0 0`
Orange colors
OrangeRed	`FF 45 00`	`255 69 0`
Tomato	`FF 63 47`	`255 99 71`
Coral	`FF 7F 50`	`255 127 80`
DarkOrange	`FF 8C 00`	`255 140 0`
Orange	`FF A5 00`	`255 165 0`
Gold	`FF D7 00`	`255 215 0`
Yellow colors
Yellow	`FF FF 00`	`255 255 0`
LightYellow	`FF FF E0`	`255 255 224`
LemonChiffon	`FF FA CD`	`255 250 205`
LightGoldenrodYellow	`FA FA D2`	`250 250 210`
PapayaWhip	`FF EF D5`	`255 239 213`
Moccasin	`FF E4 B5`	`255 228 181`
PeachPuff	`FF DA B9`	`255 218 185`
PaleGoldenrod	`EE E8 AA`	`238 232 170`
Khaki	`F0 E6 8C`	`240 230 140`
DarkKhaki	`BD B7 6B`	`189 183 107`
Brown colors
Cornsilk	`FF F8 DC`	`255 248 220`
BlanchedAlmond	`FF EB CD`	`255 235 205`
Bisque	`FF E4 C4`	`255 228 196`
NavajoWhite	`FF DE AD`	`255 222 173`
Wheat	`F5 DE B3`	`245 222 179`
BurlyWood	`DE B8 87`	`222 184 135`
Tan	`D2 B4 8C`	`210 180 140`
RosyBrown	`BC 8F 8F`	`188 143 143`
SandyBrown	`F4 A4 60`	`244 164 96`
Goldenrod	`DA A5 20`	`218 165 32`
DarkGoldenrod	`B8 86 0B`	`184 134 11`
Peru	`CD 85 3F`	`205 133 63`
Chocolate	`D2 69 1E`	`210 105 30`
SaddleBrown	`8B 45 13`	`139 69 19`
Sienna	`A0 52 2D`	`160 82 45`
Brown	`A5 2A 2A`	`165 42 42`
Maroon	`80 00 00`	`128 0 0`

HTML name	Hex code R G B	Decimal code – R G B
Green colors
DarkOliveGreen	`55 6B 2F`	`85 107 47`
Olive	`80 80 00`	`128 128 0`
OliveDrab	`6B 8E 23`	`107 142 35`
YellowGreen	`9A CD 32`	`154 205 50`
LimeGreen	`32 CD 32`	`50 205 50`
Lime	`00 FF 00`	`0 255 0`
LawnGreen	`7C FC 00`	`124 252 0`
Chartreuse	`7F FF 00`	`127 255 0`
GreenYellow	`AD FF 2F`	`173 255 47`
SpringGreen	`00 FF 7F`	`0 255 127`
MediumSpringGreen	`00 FA 9A`	`0 250 154`
LightGreen	`90 EE 90`	`144 238 144`
PaleGreen	`98 FB 98`	`152 251 152`
DarkSeaGreen	`8F BC 8F`	`143 188 143`
MediumSeaGreen	`3C B3 71`	`60 179 113`
SeaGreen	`2E 8B 57`	`46 139 87`
ForestGreen	`22 8B 22`	`34 139 34`
Green	`00 80 00`	`0 128 0`
DarkGreen	`00 64 00`	`0 100 0`
Cyan colors
MediumAquamarine	`66 CD AA`	`102 205 170`
Aqua	`00 FF FF`	`0 255 255`
Cyan	`00 FF FF`	`0 255 255`
LightCyan	`E0 FF FF`	`224 255 255`
PaleTurquoise	`AF EE EE`	`175 238 238`
Aquamarine	`7F FF D4`	`127 255 212`
Turquoise	`40 E0 D0`	`64 224 208`
MediumTurquoise	`48 D1 CC`	`72 209 204`
DarkTurquoise	`00 CE D1`	`0 206 209`
LightSeaGreen	`20 B2 AA`	`32 178 170`
CadetBlue	`5F 9E A0`	`95 158 160`
DarkCyan	`00 8B 8B`	`0 139 139`
Teal	`00 80 80`	`0 128 128`
Blue colors
LightSteelBlue	`B0 C4 DE`	`176 196 222`
PowderBlue	`B0 E0 E6`	`176 224 230`
LightBlue	`AD D8 E6`	`173 216 230`
SkyBlue	`87 CE EB`	`135 206 235`
LightSkyBlue	`87 CE FA`	`135 206 250`
DeepSkyBlue	`00 BF FF`	`0 191 255`
DodgerBlue	`1E 90 FF`	`30 144 255`
CornflowerBlue	`64 95 ED`	`100 149 237`
SteelBlue	`46 82 B4`	`70 130 180`
RoyalBlue	`41 69 E1`	`65 105 225`
Blue	`00 00 FF`	`0 0 255`
MediumBlue	`00 00 CD`	`0 0 205`
DarkBlue	`00 00 8B`	`0 0 139`
Navy	`00 00 80`	`0 0 128`
MidnightBlue	`19 19 70`	`25 25 112`

HTML name	Hex code R G B	Decimal code R G B
Purple colors
Lavender	`E6 E6 FA`	`230 230 250`
Thistle	`D8 BF D8`	`216 191 216`
Plum	`DD A0 DD`	`221 160 221`
Violet	`EE 82 EE`	`238 130 238`
Orchid	`DA 70 D6`	`218 112 214`
Fuchsia	`FF 00 FF`	`255 0 255`
Magenta	`FF 00 FF`	`255 0 255`
MediumOrchid	`BA 55 D3`	`186 85 211`
MediumPurple	`93 70 DB`	`147 112 219`
BlueViolet	`8A 2B E2`	`138 43 226`
DarkViolet	`94 00 D3`	`148 0 211`
DarkOrchid	`99 32 CC`	`153 50 204`
DarkMagenta	`8B 00 8B`	`139 0 139`
Purple	`80 00 80`	`128 0 128`
Indigo	`4B 00 82`	`75 0 130`
DarkSlateBlue	`48 3D 8B`	`72 61 139`
SlateBlue	`6A 5A CD`	`106 90 205`
MediumSlateBlue	`7B 68 EE`	`123 104 238`
White colors
White	`FF FF FF`	`255 255 255`
Snow	`FF FA FA`	`255 250 250`
Honeydew	`F0 FF F0`	`240 255 240`
MintCream	`F5 FF FA`	`245 255 250`
Azure	`F0 FF FF`	`240 255 255`
AliceBlue	`F0 F8 FF`	`240 248 255`
GhostWhite	`F8 F8 FF`	`248 248 255`
WhiteSmoke	`F5 F5 F5`	`245 245 245`
Seashell	`FF F5 EE`	`255 245 238`
Beige	`F5 F5 DC`	`245 245 220`
OldLace	`FD F5 E6`	`253 245 230`
FloralWhite	`FF FA F0`	`255 250 240`
Ivory	`FF FF F0`	`255 255 240`
AntiqueWhite	`FA EB D7`	`250 235 215`
Linen	`FA F0 E6`	`250 240 230`
LavenderBlush	`FF F0 F5`	`255 240 245`
MistyRose	`FF E4 E1`	`255 228 225`
Gray/Grey/Black colors
Gainsboro	`DC DC DC`	`220 220 220`
LightGray	`D3 D3 D3`	`211 211 211`
Silver	`C0 C0 C0`	`192 192 192`
DarkGray	`A9 A9 A9`	`169 169 169`
Gray	`80 80 80`	`128 128 128`
DimGray	`69 69 69`	`105 105 105`
LightSlateGray	`77 88 99`	`119 136 153`
SlateGray	`70 80 90`	`112 128 144`
DarkSlateGray	`2F 4F 4F`	`47 79 79`
Black	`00 00 00`	`0 0 0`

After three years of designing proof of concept and rapid prototypes I have decided to compile all of my custom css styles that were spread between multiple projects into one master library of css style design patterns. My 3DW Tools CSS Styles Library is managed via my cms, and when included into a project, grants access to some really great styles that can be called using an easy to remember style language.

In order to produce HTML 5 designs without Flash or Photo Shop, my 3DW Tools CSS Styles Library is the perfect addition to a blank HTML 5 page or a JQuery build, giving me the ability to design some really great mockups, proof of concept, rapid prototype, and user experience designs.

Here is the link to the visual reference.

Here is a css box shadow generator https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Box-shadow_generator

Here is a css button generator https://developer.cdn.mozilla.net/media/uploads/demos/m/o/mok20123/8aff6ca4f35726d64880dd6fc77739ba/css3-button-generato_1325474481_demo_package/index.html

Here is the css border radius generator https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Border-radius_generator

Upgrading Legacy Web Forms with my Content Display Wizard plugin.

Here is an example of how my plugin makes it easy for the user to navigate and successfully submit the data. And for us weary developers, the best part is the AUTOMATION. My plugin will provide content navigation, client side validation and handle the submission of the data via ajax to my api.

At Skagit Valley College, I plug my wizard into a legacy form and it’s transformed into a slick responsive paperless web application for data collection. There was an old Hall of Fame nomination form that had been moved into the cms of our new responsive version of the SVC site…

After simply including my Content Display Wizard Plugin, its now a slick paperless web application for data collection. Go check it out, go through the form to view the summary and I’m sure you will love the user experience.

Technical Instructions: How to use smart phone as portable flash drive

Donald Denney
2/16/2011

How to use your smart phone as a smart solid state storage device.

These instructions are for experienced users who have file management skills and a thorough knowledge of connecting devices to a computer. This is an advanced method of file storage and transportation.

Introduction

Most students have the need to transport files. Storing them on a flash drive is one of the most common methods of file storage and transportation. However, there are many problems associated with using a flash drive. Flash drives are not secure, and are very easy to lose. Carrying multiple devices around is inefficient. “Smart Phones” come with ample storage, can hold your files and interact with computers easily.

Tools For this project, you will need: A “Smart Phone”, USB cord, Personal Computer. All of these should not be more than a few years old, or they won’t have the proper firmware, software and file transfer protocol installed. Steps

The first step is to figure out if your phone will work for this purpose. If your phone came with a USB cord for connecting to computers, then it should work. Also, if the phone uses external memory card storage, then it has a good chance of working for this purpose.

The second step is to connect the USB cable to your phone. Carefully insert the correct end into the proper slot on the phone. Use extreme caution not to insert the cable improperly, and don’t use too much force or you can permanently damage your device.

The third step is to connect the other end of USB cable to your computer. If you have a choice, use the High Speed USB port usually located toward the front of most computers. If you don’t have a choice then just use whatever port is available.

The fourth step is to wait while Windows recognizes your device. Sometimes this can take quite a while. If you are prompted, answer the prompts using your desired settings. You shouldn’t need to install any software from CD or the Internet. Windows comes standard with the default drivers you will need.

The sixth step is to navigate to the folder where you will store your files. From “My Computer”, a new drive letter will appear in the same manner as when a flash drive is inserted. Navigate into the drive, and choose a location for your files.

The final step is to transfer your files. Copy and paste, or save the file from your favorite application directly onto your phone flash drive.

Conclusion The phone can be a wonderful file storage medium, and it is a lot more convenient than using a separate flash drive. The benefits of having your files with you wherever you go are plentiful, including knowing they are secure, having the latest version of a file, and always knowing who has access to your files. As new phones are released, they are packed with features that make it easy to use as file storage for music, videos and documents.

Alt Key Codes

Here is a link to an extensive chart of codes and entities.

HTML 5 template

here is marketing style template page for an html5 project. this includes templates for favicon and apple touch icons as well as google analytics.

Here is the dwstyles html5 template. Basic seo header. Includes the dw styles library. No other librarys installed. Head to vendor site for latest JQuery, JQueryMobile etc.

Custom CSS Media Queries

I am developing my own responsive framework, and here is the notes and research.

Device resolutions:

Samsung Galaxy S 4inch:
Samsung Galaxy Tab 7inch:
IPad 9inch: QXGA 2048 X 1536 4:3 aspect ratio

Surface pro: hd720 1280 X 720 16:9 aspect ratio

PC’s at work:
WSXGA+ 1680 X 1050 16:10 aspect ratio
SXGA 1280 X 1024 5:4 aspect ratio

Available media query syntax

There are some exciting ways to access these. There are the standard height and width, combined with max or min,

@media all and (min-width:1280px)

but there is an exciting aspect ratio query to allow me to use the extra space at the bottom of the 16:10 sxga and wsxga+ resolution displays

@media screen and (device-aspect-ratio: 5/4), screen and (device-aspect-ratio: 16/10) { ... }

Well this blows, I have spent two hours on this shit and I cant get the fucking max-height or min-height to work at all, and that is the whole reason that I need this query, to fill in the fucking space left on the bigger screens.the aspect ratio thing is ok, but its not firing correctly, and still applies the styles to the wrong places. Maybe with some adjustment, like put it at the top of the pile of queries.

Here are the docs. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Detect Screen Resolution

Here is a handy tool I made for detecting the screen resolution of any device.

While testing and developing I used this tool on Ipad, IPhone, Blackberry Playbook, Samsung Galaxy, Kindle Fire Asus Transformer and it all worked perfectly to allow me to create the perfect content for each type of device.

http://losguerosproductions.com/screendetector.html

Lorem Ipsum Dummy Text

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

HTML5 vs Flash Animation

Here is my html5fun file

Here is one that I was messin with background colors to dominate the dom.

Here is the css gradients playground

The code is pretty straightforward. This solution to Flash is pretty lame to me. The Flash worked well in every device except the ipad, but now we have to code multiple file types for each audio or video we would wish to embed.

For example: where I would have made one flash movie to use everywhere, and maybe just skipped the I-audience, now I have to encode three html5 compatible files, as well as the flash player fallback. And honestly, the html5 versions just don’t function the same across platforms. We get a slightly different reaction in every browser, when the Flash one would be exactly the same everywhere it was displayed.

Here are screenshots from a demo I created. Its a small animation , with an audio sound effect that should play on page load. In firefox, the audio is non existent, and even the fallback error isn’t working.

In Internet explorer, the audio plays, but there is an ugly control bar, and the animation won’t play when you click it.

Research on Ipad and android devices coming soon.

Flash is the perfect way to create accents and highlight art and animations on your webpages. Lets start by making a logo for the top of my site here. I would like to have some cool looking text, with animated effects, just to add some spark to my page. Thats what I will go for , a “sparking text” type of effect. It needs to be 627X65. The width is the most important part, as the height will be relative. For this purpose, we are going to use text, with an outline, a gradient fill and a drop shadow.

Now we can try recreate a similar text effect using pure html5. Here is a test of Apple’s “Hype”, an HTML 5 authoring program for graphics and animation. Their answer to the “hype” that they feel flash is riding on. HTML is a text markup language. And it does a great job of marking up the text. you can have fonts, and italics. Trying to make this text markup language perform animations and add graphical effects such as drop shadow and opacity is not what it was made for.

Fire up flash. bust out some cool text. add some sparking effects on touch. export it out and put in a page. now lets test the page on several devices including pc, mac and mobile.

firefox on mac
ipad