Tag Archives: html

Apr 2 2012

CSS Box Model and Dojo/dom-geometry

Posted on by

Since Dojo 1.7, dojo.position, dojo.marginBox, and dojo.contentBox should be called with dojo/dom-geometry module. dojo.position returns an object for the size and the x/y coordinates of the domNode. marginBox and contentBox are based on CSS box model so users can manipulate the position of a domNode. Basically marginBox includes information for margin/padding/border-width, but contentbox only looks at the padding and the domNode itself.

HTML:

<div id="firstBox">Box #1 W:60px H:60px</div>
<div id="secondBox">Box #2 W:100px H:100px</div>

Dojo 1.7:

require(["dojo/parser", "dojo/dom-geometry", "dojo/domReady!"], function(parser, domGeom) {

    var marginBox = domGeom.getMarginBox('secondBox'),
        contentBox = domGeom.getContentBox('secondBox');

    console.log(domGeom.position('secondBox'));
    console.log("MarginBox - T: " + marginBox.t + ", L: " + marginBox.l + ", W: " + marginBox.w + ", H: " + marginBox.h);
    console.log("ContentBox - T: " + contentBox.t + ", L: " + contentBox.l + ", W: " + contentBox.w + ", H: " + contentBox.h);

    setTimeout(function() {
        //set the width and height of the domNode 
        //size will not be the same as the first box becuase of the padding
        domGeom.setContentSize('secondBox', {
            w: 60,
            h: 60
        });
    }, 2000);

});​

CSS:

#firstBox{
 width:60px;
 height:60px;
 border:1px solid #1de;
}

#secondBox {
  width: 100px;
  height: 100px;
  padding: 10px;
  margin: 20px;
  border: 1px solid #ccc;
  position: relative;
  top:10px;
  left:10px;
}​

Two boxes before the second box is resized:

Output in console:

May 29 2011

Form Button with CSS3

Posted on by

To make a button with special effects, there is a long list of properties that you will need to be familiar with. Here is a Website to play around with these properties and see the change instantly: http://css3please.com/.

In CSS3, rgba() is given as a combination to define color and opacity. So if you define “rgba(255, 255, 255, 0.8)”, opacity is 0.8. The effect will be different from setting opacity property by itself as all child elements will inherit the opacity, while rgba only defines the opacity of a single element.

Below is an example of a form button created using CSS3.

Form button:

On hover:


Live Demo

Source code:

1. html file:

 <form> <input class="form_button" type="submit" value="submit" /> </form>

2. style.css:

input[type="submit"].form_button {
margin-left: 10px;
background-color: #F97100;
width: 180px;
padding: 7px 10px;
color: #026a50;
text-transform: uppercase;
border: 1px solid #2c398d;
font-weight: bold;
font-size: 15px;	
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-border-radius: 5px;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8), 0 -1px 0 rgba(25, 27, 9, 0.9); 	
-moz-box-shadow:  0 4px 0 #ccc;
-webkit-box-shadow:  0 4px 0 #ccc;
-box-shadow:  0 4px 0 #ccc;
-webkit-transition: background 0.2s ease-out;
}

input[type="submit"].form_button:hover, input[type="submit"].form_button:focus {
background: #1ACE07;
border: 1px solid #186ca4;
color:#007241;
}