Using CSS To Create Fancy Text Boxes

classic Classic list List threaded Threaded
1 message Options
GregChapman GregChapman
Reply | Threaded
Open this post in threaded view
|

Using CSS To Create Fancy Text Boxes

This post was updated on .
The techniques described here were originally installed in a News app that provided an online version of a print magazine. The print magazine contained a number of boxes used for "pull quotes" and similar features that allowed each page to be fully filled with content leaving no white space. It was felt desirable to replicate these in the on-line version.

As the techniques shown below replace the normal display of headings it is probably a technique best reserved for use in Blog and News apps where there will a limited number of authors who can be informed of the special effects they create.

Pull Quote BoxAll that is required is that the CSS code for the desired effect is inserted in the box at:
Options > Application > Change appearance > CSS

With the code shown below anything placed with H3 tags will appear as shown on the left. Because it is an image it does not react dynamically to different sized windows and screens as it would when the code is used.

Note that when using the code as shown the box will normally be floated left and occupy one third of the space available for the forum. However, on narrow screens (or windows) the box then fills the whole width available. This feature was included because on narrow screens the text might wrap excessively and become awkward to read.
div.root-text h3, div.message-text h3 {
  float: left;
  width: 33%;
  border: solid 3px #333333;
  border-radius: 20px;
  font-style: normal;
  font-size: 1.4em;
  text-align:center;
  font-weight: 600;
  color: #ffffff;
  background-color: #666666;
  margin: 0 10px 0.5em 0;
  padding: 8px;
}

@media only screen and (max-width:700px) {

  div.root-text h3, div.message-text h3 {
    float: none;
    width: 95%;
    margin: 0 auto 1em;
  }
}
The next effect was designed as a way to provide links to other articles that did not appear in the print edition of the magazine and was applied to the H4 heading. The over and underlines will fill the whole of the space available.
H4 Heading EffectThe traditional underline on a link has been suppressed, so the user can only tell it's a link by the change in colour If you use this effect as presented below, then do ensure that you include a clue in the text that there is a link present.

The code required to implement it is:
div.root-text h4, div.message-text h4 {
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
  font-weight: 600;
  text-align: center;
  padding-top: 1em;
  padding-bottom: 1em;
  margin-bottom: 1em;
  line-height: 1.75em;
}

div.root-text h4 a, div.message-text h4 a {
  text-decoration: none;
}
Alternative Pull QuoteThe effect on the right, is produced when the H5 heading is applied and requires the code below to work.

Note that it will normally float to the right and will occupy half of the available space. Again when the screen/window is narrow it converts to occupy the full width of the window/screen.

Also note that adding a bold effect to some of the text produces a heading that is larger than the rest of the text in the box..
div.root-text h5, div.message-text h5 {
  float: right;
  width: 50%;
  border: solid 3px #333333;
  border-radius: 20px;
  background: #dddddd;
  background: linear-gradient(#dddddd, #bbbbbb, #aaaaaa, #666666);
  font-size: 1.3em;
  text-align: center;
  font-weight: 400;
  margin: 0 0 0.5em 5px;
  padding: 10px;
}

div.root-text h5 b, div.message-text h5 b {
  font-size: 1.5em;
  font-weight: 600;
}

@media only screen and (max-width:700px) {
  div.root-text h5, div.message-text h5 {
    float: none;
    width: 90%;
    margin-right: auto;
    margin-left: auto;
  }
}

Finally, in this batch, an effect intended to provide a footnote to an article, but if left empty it could provide a horizontal line whenever a clear break in the text is required.

A Heading as a Footnote
The CSS code used is:
div.root-text h6, div.message-text h6 {
  border-top: 1px solid #000000;
  font-size: 1em;
  font-weight: 400;
}

Greg