/* #######################################
## P R O C E S S I N G J S . O R G ##
#######################################
*/
/* Default YUI Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;} table{border-collapse:collapse;border-spacing:0;} fieldset,img{border:0;} address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} ol,ul{list-style:none;} caption,th{text-align:left;} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} q:before,q:after{content:'';}abbr,acronym{border:0;}
/* Functional Styles */
.clear{clear:both;line-height:0;height:0;}
/* Layout & Default Styles */
body{background:#fff url(/gfx/bodybackx.gif.png) repeat-x;font-family:arial,sans-serif;font-size:80%;}
a{color:#0075b2;text-decoration:none;}
a:hover,a:focus{color:#00a7fd;text-decoration:underline;}
.warning{color:#cc0000;}
#wrap{width:1024px;margin:0 auto;}
.inner{width:900px;margin:0 auto;}
/* Top-most banner */
#banner{background:url(/gfx/head.gif.png) no-repeat;height:142px;color:#fff;font-family:lucida console,verdana}
#title{height:42px;}
h1{display:none;}
#main-logo{float:left;margin:5px 10px 0 10px;}
#main-title{margin:12px 0 0 0;}
#tagline{height:25px;color:#0075b2}
h2{font-size:.9em;margin:6px 0 0 14px}
#banner-homelink{display:block;width:900px;height:42px;background:url(gfx/home.gif) repeat-x;}
#banner-homelink:focus{background-position:0 -42px;}
/* Main Nav-links & head-visualization */
#main-nav{height:74px;margin-top:-74px;}
#main-nav canvas{position:absolute;background:#000;}
img.navCanvas{position:absolute;}
#main-nav ul{margin-left:30px;position:absolute;z-index:2;width:auto;height:35px;margin-top:39px;float:left;}
#main-nav li{height:20px;float:left;}
#main-nav li a{background:url(gfx/nav-tabs.png) no-repeat 0px 0px;display:block;height:35px;color:#909090;text-decoration:none;}
#main-nav li a:hover, #main-nav li a:focus{color:#00a7fd;background-position:left -191px;height:35px;}
#main-nav li a span{padding-top:15px;display:block;height:20px;background:url(gfx/nav-tabs.png) no-repeat right -94px;margin-left:11px;padding-right:11px;overflow:hidden;cursor:pointer;}
#main-nav li a:hover span, #main-nav li a:focus span{padding-top:5px;background-position:right -240px;height:30px;}
#main-nav li a.selected{color:#00a7fd;background-position:left -48px;height:35;}
#main-nav li a.selected span{padding-top:5px;background-position:right -142px;height:30px;}
#main-nav a.source{color:#fff;position:relative;float:right;z-index:2;margin:55px 6px 0 0;}
#main-nav a.source:focus{background:#fff;color:#000;}
/* Separable focus styles if ever needed *//*
#main-nav li a.selected:hover,#main-nav li a.selected:focus{background-position:left -191px;}
#main-nav li a.selected:hover span,#main-nav li a.selected:focus span{background-position:right -240px;}
*/
/* Main Content Styles */
#page{background:url(gfx/pagebacky.gif.png) repeat-y;width:1024px;padding:10px 0;}
#page .inner{width:830px;margin:0px auto;}
#content{float:left;width:600px;}
h3{font-size:1.5em;margin:30px 0 10px;color:#0073af;font-weight:bold;}
b.old{color:#996600;}
b.new{color:#cc0000;}
#content ul{margin:5px 0 20px 0;}
#content ul li{list-style-type:disc;margin-left:30px;}
#content h5{font-weight:bold;margin:20px 0 10px 0;font-size:1.1em;color:#555}
pre{font-family:"Consolas","Courier New",Courier,mono,serif;}
pre.fl{display:inline;}
pre.nfl{margin-left:30px;}
pre.invalid{color:#cc0000;}
pre.valid{color:#008800}
h4{font-size:1.3em;margin:30px 0 10px;color:#0073af;font-weight:bold;}
h4 a:hover,h4 a:focus{color:#0073af;text-decoration:none!important;}
p{margin-bottom:15px;}
ol li{list-style-type:decimal;margin-left:30px;margin-bottom:10px;}
/* Breadcrumb */
.breadcrumb{color:#bbb;height:16px;/*font-size:.8em;font-family:"Consolas","Courier New",Courier,mono,serif;*/}
.breadcrumb a{color:#bbb;}
.breadcrumb a:hover,.breadcrumb a:focus{color:#00a7fd;}
/* Reference List */
.refcol{width:190px;float:left;margin-top:10px;}
.category{margin-bottom:30px;}
.category b{margin-bottom:15px;display:block;}
.category a{display:block;line-height:1.1em;}
.category a:hover,.category a:focus{}
.category h5{font-weight:normal!important;font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;font-style:italic;color:#444;font-size:11.2px!important;margin:15px 0 5px 0;}
#reference.hidedevcoms .devcom{display:none;}
#reference.showdevcoms .devcom{display:auto;}
a.devcom, .devcom a{color:#cc0000;}
.ref-col{width:185px;float:left;margin-top:10px;margin-right:15px;line-height:1.1em}
.ref-col.last{margin-right:0;}
/* Reference Document */
table.ref-item{margin:30px 0 30px 0;}
.ref-item td{vertical-align:top;padding-bottom:30px;font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;font-size:11.2px;width:480px!important;}
pre.squish{letter-spacing:-.05em;}
.ref-item th{vertical-align:top;width:100px!important;font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;color:#000;font-size:11.2px;}
.ref-item h3{color:#0077b5;font-size:1.5em;font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;margin:0;padding:0;}
.ref-item .pjs th{color:#cc0000!important;font-weight:bold;}
.ref-item .pjs td{color:#cc0000}
.ref-item pre{font-size:.95em;width:480px!important;}
.ref-item .dp-highlighter{width:480px;}
.ref-item hr{border:none;border-top:1px solid #000;margin:20px 0;width:300px;}
.example{clear:left;margin-bottom:15px;}
.example img{float:left;margin-right:15px;margin-bottom:15px;}
pre.margin{margin-left:115px;width:365px!important;}
/* Sidebar - Right-hand */
#sidebar h4{margin:2px 0 5px 0}
#sidebar{width:180px;border-left:1px dotted #0073af;float:right;margin:0 -10px 0 15px;padding:20px 0 50px 20px;}
#sidebar ul{margin-bottom:20px}
#sidebar span.img{margin-bottom:5px;display:block;}
#sidebar ul li{font-size:.95em;margin-bottom:5px;line-height:1.1em;}
#sidebar a{background:url(gfx/bullet.gif) no-repeat 0px 1px;display:block;padding-left:20px;}
#sidebar a:hover,#sidebar a:focus{background-position:0px -187px;}
#sidebar ul.downloads a{background:url(gfx/bullet-download.gif) no-repeat 0px 1px;}
#sidebar ul.downloads a:hover,#sidebar ul.downloads a:focus{background-position:0px -187px;}
/* Tail - aka Foot */
#tail-links .inner{font-size:.5em;}
#page-end{background:url(gfx/page-end.gif.png) no-repeat;height:98px;padding-top:43px;}
#page-end ul{padding:5px 10px 0 10px;}
#page-end li{font-size:.85em;color:#aaa;float:left;}
#page-end a{color:#56a0c7}
#page-end a:hover,#page-end a:focus{color:#00a7fd}
#page-end li.hyper-metrix{float:right;margin-top:0;}
/* Styles, for including little bits of code in regular doc flow */
b.pre{font-family:"Consolas","Courier New",Courier,mono,serif;font-size:1.05em;font-weight:normal;}
b.pre.comment{color:#7e7e7e;}
b.pre.reserved{color:#006699;}
b.pre.function{color:#cc6600;}
.code{clear:both;margin-bottom:15px;}
.example-left{float:left;margin:0 20px 20px 0;}
.example-right{float:right;margin:0 0 20px 20px;}
/* Demo pages */
.learning-demo {margin:0 0 20px 0;background:url(gfx/example200px.gif.png) no-repeat;text-align:center;width:220px;height:220px;}
.learning-demo *{margin-top:11px;}
.learning-demo.px400{width:420px;height:420px;background:url(gfx/example400px.gif.png) no-repeat;}
.learning-demo.px320x240{width:340px;height:260px;background:url(gfx/example320x240px.png) no-repeat;padding:0;}
.learning-demo.px580x150{width:600px;height:170px;background:url(gfx/example580x150px.png) no-repeat;padding:0;}
.learning-demo.px250{width:270px;height:270px;background:url(gfx/example250px.png) no-repeat;padding:0;}
.example200px {float:right;margin:0 -5px 20px 20px;background:url(gfx/example200px.gif.png) no-repeat;text-align:center;width:220px;height:220px;}
.example200px *{margin-top:11px;}
h6{clear:left;color:#646464;}
.example200px h6{color:#646464;font-size:10pt;text-align:right;margin:5px 10px 0 0;} .example-links{text-align:left;color:#646464;margin:5px 0 0 10px;font-size:.8em;}
div.context-links{clear:both!important;position:relative;top:25px;}
/* Exhibition */
#exhibitions{margin-top:30px;}
.exhibit{width:180px;margin-bottom:20px;float:left!important;margin-right:28px;height:260px;}
.c3{margin-right:0;}
.exhibit .demo {display:block;}
.exhibit .demo a{display:block;}
.exhibit .demo a img{margin-bottom:15px;}
.author{color:#646464;font-weight:normal;}
.exhibit p{font-size:.9em;margin:15px 0;line-height:.95em;font-family:arial;text-align:justify;}
p.links{color:#646464;text-align:left;}
/* Icon-list, generic */
.icon-list .icon{display:block;width:58px;height:58px;float:left;overflow:hidden;}
.icon-list p{margin-left:58px}
.icon-list.twitter p{margin-left:0!}
.icon-list ul{margin-left:48px!important;}
.icon-list ul li{list-style-type:none!important;}
.icon-list ul li b{font-weight:normal;display:block;float:left;width:150px;text-align:right;padding-right:5px;color:#646464;}
/* depreciated?
/*form{padding-top:20px;}
form span{display:block;clear:left;margin-bottom:10px;}
form label{float:left;width:80px;text-align:left;margin-right:10px;margin-left:50px;}
form input{width:220px;}
form textarea{width:220px;height:100px;}
*/
/* Demo Screens from http://ejohn.org */
.demo-screens .section{clear:left;margin-right:-60px;}
.demo-screens .section > a{float:left;width:200px;margin:0 20px 20px 0;height:270px;}
.demo-screens .section > a span.info{color:#000;text-decoration:none;}
.demo-screens .section > a:hover span.info{text-decoration:none;}
.demo-screens .section > a img{margin-bottom:5px;}
.demo-screens .section > a:hover{text-decoration:none!important;}
.demo-screens .section > a:hover span{text-decoration:underline;}
.demo-screens .section > a > span{display:block;}
.demo-screens .section h3{display:block;}
.demo-screens .section h3 a{display:auto;width:auto;}
.demo-screens .section.wild a{display:block;margin:0 10px 20px 0;float:none!important;height:auto;}
/* Blog Styles */
.navigation{color:#bbb;}
.navigation *{display:inline;}
.navigation a{color:#bbb;} .navigation a:hover, .navigation a:focus {color:#0af;}
.narrowcolumn{float:left;width:600px;}
.pages .post{padding-left:0px}
.post{padding-left:60px}
.widecolumn,.content{width:830px!important;}
.widecolumn .post{padding-left:0px}
.widecolumn h3{margin-top:14px!important;}
.blog h4 a{background:url(gfx/blog-post.jpg) no-repeat;color:#eee!important;display:block;height:33px;padding:3px 0 0 70px;margin-left:-60px;}
.blog h4 a:hover,.blog h4 a:focus{text-decoration:none!important;background-position:0px -38px;color:#fff!important;}
.archive h4 a{background:url(gfx/archive.jpg) no-repeat;color:#eee!important;display:block;height:33px;padding:3px 0 0 70px;margin-left:-60px;}
.search h4 a{background:url(gfx/search.jpg) no-repeat;color:#eee!important;display:block;height:33px;padding:3px 0 0 70px;margin-left:-60px;}
.entry{margin-top:10px;}
.says{display:none;}
.entry strong{font-weight:bold!important}
ol.commentlist li{list-style-type:none;margin:0 0 10px 0;background:url(../gfx/coment-bot.png) no-repeat bottom left;padding:0 0 1px 0 ;}
ol.commentlist .comment{display:block;padding:0;background:#e0e0e0;width:828px;}
ol.commentlist .comment p{padding:0 20px 20px 20px;}
ol.commentlist .comment-author{padding:20px 0 5px 20px;background:url(../gfx/coment-top.png) no-repeat top left;}
.avatar{margin:0;vertical-align:baseline;margin-right:0px;border:1px solid #999;}
.fn{font-size:1.2em;color:#777;}
.comment-meta{font-size:.8em;padding:0px 0 5px 20px ;}
ol.commentlist .comment em{color:#aa0000;margin-left:20px;}
.githubrss{margin-top:10px!important;}
#github-rss {padding-left:30px!important;}
#github-rss li{margin-left:58px!important;padding-left:0px;list-style-type:decimal!important;}
#github-rss a{color:#047;}
#github-rss a:hover,#github-rss a:focus{color:#0af;}
.blog #sidebar h4{margin:30px 0 10px 0}
.blog #sidebar ul li{padding:0!important;line-height:.7em;list-style-type:none;margin-left:0px;}
.blog #sidebar ul li a{height:auto;padding:2px 0 0 14px!important;background:url(../gfx/bullet-mini.gif) no-repeat 0px 5px;display:inline!important;}
.blog #sidebar ul li a:hover,.page.blog #sidebar ul li a:focus{background-position:0px -120px;}
.blog #sidebar li p{line-height:1.1em;}
.blog #sidebar li p a{background:none;padding:0!important;}
#respond h4{background:url(gfx/blog-post.jpg) no-repeat!important;color:#eee!important;display:block;height:33px;padding:3px 0 0 70px;}
#searchform {/*background:url(../gfx/pjs-search.png) no-repeat top left;padding-left:42px;*/}
#searchform .hidden{display:none;}
img.search{margin-bottom:10px;}
input#s{width:120px;}
#footer{clear:both;margin-top:50px;}
#footer p{clear:both;margin:0!important;padding:0!important;}
h4#comments {background:url(gfx/comments.jpg) no-repeat!important;color:#eee!important;display:block;height:33px;padding:3px 0 0 70px;}
blockquote {margin:25px;font-family:Georgia1, Georgia, serif;font-size:10pt;padding:20px;border:1px dotted #ccc;color:#555;background:#eee;}
/* twitter */
div.tweet{margin-left:60px!important;}
div.tweet p{margin:5px 0 0 85px}
div.tweet a.tweeter{color:#047!important;display:block;float:left;width:85px;}
a.at{color:#c80}
a.at:hover,a.at:focus{color:#0af}
div.tweet p span{font-size:.8em;color:#888;display:block}
a port of the Processing Visualization Language
| Name |
alpha() |
| Examples |
 noStroke();
color c = color(0, 126, 255, 102);
fill(c);
rect(15, 15, 35, 70);
float value = alpha(c); //Sets "value" to "102"
fill(value);
rect(50, 15, 35, 70); |
| Description |
Extracts the alpha value from a color. |
| Syntax |
alpha(color) |
| Parameters |
| color |
any value of the color datatype |
|
| Usage |
Web & Application |
| Related |
red()
green()
blue()
hue()
saturation()
brightness()
|