This blog is no longer updated and is kept for archival reasons only. Please visit timothylive.net for the latest blog.

Timothy Kim::Blog - my life in words, verses and rhymes
twitter archive

Stamp/quilt like border using only CSS

Sorry, no boring introduction. Here’s an example:


hello!

Idea is simple, just using really thick dashed border to create that stamp like feel.

First the HTML:

  1. <div id="groove"><div id="spacer"><div id="content">
  2.       <h3>Hello!</h3>
  3. </div></div></div>

Yes, that’s triple divs without any white space between them. That’s to accommodate IE’s weird behaviors.

Now for the CSS

  1. #groove {
  2.   border: 5px dashed #FFAA00;
  3.   background-color: #FFFFFF;
  4.   padding: 0px;
  5.   width: 100px;
  6. }
  7.  
  8. #spacer {
  9.   padding: 3px;
  10.   background-color: #FFAA00;
  11. }
  12.  
  13. #content {
  14.   background-color: #FFAA00;
  15.   border: 2px dotted #FFFFFF;
  16.   padding: 3px;
  17.   height: 100px;
  18. }

The width value must be set to the outer most div and height value should be attributed to the inner most div.

The background-color for the #groove is to match the document background-color.

You may chose to get rid of the spacer, if you don’t want that white stitch within the box. Then of course, get rid of the border attribute from the content div.

It was tested in IE6/7, Firefox, Safari, and Opera. Only annoying thing is that to make this work in IE, you have make sure that there are no white spaces between nested divs.

Hope this helped!

Tags: , , , , ,

Emotions

Acceptance, Agitation, Alarm, Amusement, Anger, Angst, Anticipation, Apprehension, Awe, Bitterness, Boredom, Calmness, Comfort, Compersion, Contentment, Confidence, Confusion, Depression, Disappointment, Discontentment, Disgust, Desire, Delight, Elation or Euphoria, Embarrassment, Ennui, Envy, Ecstasy, Fear, Frustration, Glee, Gladness, Gratitude, Grief, Guilt, Hate, Happiness, Homesickness, Hope, Horror, Humility, Joy, Jealousy, Kindness, Loneliness, Love, Limerence, Modesty, Nervousness, Negativity, Nostalgia, Pain, Patience, Peace, Phobia, Pity, Pride, Rage, Remorse, Sadness, Schadenfreude, Self-pity, Selflessness, Shame, Shyness, Sorrow, Shock, Surprise, Suspense, Terror, Unhappiness, Worry

*Alphbetical list of emotions obtained from Wikipedia.org

Tags: ,