Literary Spring Designs » css

Fun with Drop Caps

Rebecca — Wed, 02 May 2012 17:23:33 +0000

Example 1

#Section p:first-letter{
float:left;
margin: 4px 1px 0px 4px;
color:#000;
font-size: 4.4em;
font-weight: 400;
font-family: Georgia, serif;
text-shadow: 2px 2px 1px #CDB7B5;
}

Example 2

#Section p:first-letter{
float:left;
margin:4px 2px 0px 4px;
color:#000;
font-size:4.4em;
font-family: 'Uncial Antiqua', Georgia, serif;
font-weight: 400;
text-shadow: 2px 2px 2px #828282;
}

Add the following code to your HTML page header < link href='http://fonts.googleapis.com/css?family=Uncial+Antiqua' rel='stylesheet' type='text/css' >

Example 3

#Section p:first-letter{
float:left;
margin:5px 1px 0px 5px;
color:#000;
font-size:4.4em;
font-family: 'Fredericka the Great', Georgia, serif;
font-weight: 400;
text-shadow: 2px 2px 2px #3d3d3d;
}

Add the following code to your HTML page header < link href='http://fonts.googleapis.com/css?family=Fredericka+the+Great' rel='stylesheet' type='text/css' >

Example 4

#Section p:first-letter{
float:left;
margin: 4px 1px 0px 4px;
color:#171717;
font-size:4.4em;
font-family: Georgia, serif;
font-weight: 400;
text-shadow: 1px -1px 1px #c0c0c0;
}

Example 5

#Section p:first-letter{
float:left;
margin: 3px 1px 0px 3px;
color:#000;
font-size:4.8em;
font-family: 'UnifrakturMaguntia', Georgia, serif;
font-weight: 400;
text-shadow: -1px 1px 1px #3d3d3d;
}

Add the following code to your HTML page header < link href='http://fonts.googleapis.com/css?family=UnifrakturMaguntia' rel='stylesheet' type='text/css' >

Notes

“Section” is the name of the div where you want the drop-caps.
Several of these examples use the Google Font Directory. For the HTML code for the fonts you can use the standard code shown above or you can go to the Google Font Directory and use the @import or javascript options.

Glass Hover CSS Effect

Rebecca — Tue, 27 Mar 2012 17:18:41 +0000

Customizing the CSS3

I was playing around with navigation options and figured out a good method for creating a glass looking hover effect. I decided to leave the hover rectangular, but you can also adjust the border radius to make it rounder.

I am only including the css for the hover. These values assume that you are using the background color #d9d9d9 for your navigation bar. If you are using a different navigation background color replace “#d9d9d9″ with the color you are using.

Menu- Groove Glass

#navlist li a:hover
{
color: #121212;
text-shadow: 2px 2px 2px #999;
background-color: #d9d9d9;
border: 3px groove #999;
border-radius: 5px;
background-image: -moz-linear-gradient(100% 100% 90deg, #c0c0c0, #d9d9d9);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c0c0c0), to(#d9d9d9));
-moz-box-shadow: 2px 2px 2px #bababa;
-webkit-box-shadow: 2px 2px 2px #bababa;
}

Menu- Ridge Glass

#navlist li a:hover
{
color: #121212;
text-shadow: 2px 2px 2px #999;
background-color: #d9d9d9;
border: 3px ridge #999;
border-radius: 5px;
background-image: -moz-linear-gradient(100% 100% 90deg, #c0c0c0, #d9d9d9);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c0c0c0), to(#d9d9d9));
-moz-box-shadow: 2px 2px 2px #bababa;
-webkit-box-shadow: 2px 2px 2px #bababa;
}

Menu- Inset Glass

#navlist li a:hover
{
color: #121212;
text-shadow: 2px 2px 2px #999;
background-color: #d9d9d9;
border: 3px inset #999;
border-radius: 5px;
background-image: -moz-linear-gradient(100% 100% 90deg, #c0c0c0, #d9d9d9);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c0c0c0), to(#d9d9d9));
-moz-box-shadow: 2px 2px 2px #bababa;
-webkit-box-shadow: 2px 2px 2px #bababa;
}

Shades of Grey Layout Template

Rebecca — Thu, 02 Sep 2010 18:31:15 +0000

Shades of Grey Layout

Full size preview
Shades of Grey Layout- right click save

About the Layout

Note: Internet Explorer users will not see the text shadows, box shadows, but minus these small differences the layout has been tested and works in Firefox, Safari, and Internet Explorer 6.0 and above.

Terms of Use

You may use the css3 layout linked to above with attribution (http://www.literaryspring.com).
You may use up to 80% of the css without attribution.
Layouts have a clean design in order to allow for the most customization and not overwhelm the content.
Credits for the images are included on the layout.

B&W Elastic CSS3 Layout

Rebecca — Wed, 09 Jun 2010 20:44:59 +0000

Black and White Elastic CSS3 Layout

Full size preview
Elastic CCS3 Layout- right click save (see no below)

About the Layout

Note: Internet Explorer does not yet support css3 drop shadows. Otherwise the layout works in Firefox, Chrome, Safari, and Internet Explorer 6.0 and above.

Terms of Use

You may use the css3 layout linked to above with attribution (http://www.literaryspring.com).
You may use up to 80% of the css without attribution.

Break It Down: Lengthy CSS

Rebecca — Thu, 27 May 2010 22:57:07 +0000

Original Code

The CSS listed below is a slight variation of the CSS I used for the quote box in this layout. As you can see the CSS that controls even a small part of the design can become quite lengthy. When you add in the rest of the typography and structure and the CSS can look overwhelming.

p.quotebox {
color: #ffc;
font-size: 3em;
font-family: Baskerville, Garamond, Palatino, Georgia, serif;
font-weight: bold;
text-align: center;
text-shadow: 2px 2px 2px #000;
background-color: #300;
border: solid 1px #333;
-moz-box-shadow: 5px 5px 0 rgba(72, 72, 72, .5);
-webkit-box-shadow: 5px 5px 0 rgba(72, 72, 72, .5);
box-shadow: 5px 5px 0 rgba(72, 72, 72, .5);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 5px;
}

Break It Down

CSS for the text color color: #ffc;
CSS for the font-size: font-size: 3em;
CSS for the font-family: font-family: Baskerville, Garamond, Palatino, Georgia, serif;
CSS for the font-weight: font-weight: bold;
CSS for aligning text: text-align: center;
CSS for the text-shadow: text-shadow: 2px 2px 2px #000;
CSS for the background color for the paragraph: background-color: #300;
CSS for the border around the paragraph: border: solid 1px #333;
CSS for the text shadow: text-shadow: 2px 2px 2px #000;
CSS for the shadow around the paragraph box:
-moz-box-shadow: 5px 5px 0 rgba(72, 72, 72, .5); -webkit-box-shadow: 5px 5px 0 rgba(72, 72, 72, .5); box-shadow: 5px 5px 0 rgba(72, 72, 72, .5);
CSS for making rounded edges around the paragraph box -moz-border-radius: 5px; -webkit-border-radius: 5px;
Code for the padding between the text and the edge of the box padding: 5px

Only Use the CCS You Really Need

Taking Out the CSS3

If you need to design a site that looks the same in all browsers you need to take out the CSS3 which is not yet universally supported most notably by Internet Explorer. Below is the CSS without the CSS3. While CSS3 has some wonderful uses the fact it exists does not mean one always needs to use it. Look at your design and decide whether it really does need a drop shadow for the box, a shadow for the text, and rounded corners. Having made quote boxes before in some case the CSS3 helps. In other cases a drop shadow can easily be eliminated without sacrificing clarity and for some designs sharper edges look better than round ones.

p.quotebox {
color: #ffc;
font-size: 3em;
font-family: Baskerville, Garamond, Palatino, Georgia, serif;
font-weight: bold;
text-align: center;
background-color: #300;
border: solid 1px #333;
padding: 5px;
}

Reevaluate the Necessities

Does the font need to be bold or is the font you are using thick enough that you can remove font-weight: bold
Should the text be aligned to the center? Sometimes in narrow columns left aligned text is better and, thus, you can leave out text-align: center.
If all you want is a drop quote you do not need background-color: #300; or border: solid 1px #333;
For the box shadow in the original code, rgba was used in order to adjust opacity. If you prefer hex and are not adjusting opacity then use hex.

In Conclusion: Other Methods to Handle CSS

Often the best design or the best design for an element is complicated and takes a substantial amount of CSS to accomplish. There are a lot of websites and it pays (often literally) to stand out. However, especially when you are starting out vast amounts of CSS can be intimidating. Comments in the CSS file help and the more experience you have the more you can easily find the specific CSS you needed. Clearly laid out CSS also helps. However, even with these additional tricks for both the design itself and your own sanity in dealing with the CSS it is a good idea to break down the CSS you have and only use what you actually need.

CSS Borders

Rebecca — Wed, 10 Feb 2010 19:17:02 +0000

CSS borders are a nice way to add a little something extra to a picture. The trick is to set the image apart from the rest of the article or post without the border overwhelming the image.

Border Properties

border-width: This is the width of your border (ie 5px)
border-style: none (no border), solid, dotted, dashed, double, groove, ridge, inset, outset
border-color: You can use a color name, hex value (ie #369), or RGB value (ie rgb(0,0,255))
To make a border with different styles on each side use: border-top-style, border-right-style, border-bottom-style, border-left-style

Thick Brown Border

The CSS

img.nameofclass {
border: 3px solid #300;
padding: 5px;
background: #630;
}

The xhtml:

Blue Double Border

The css:

img.nameofclass {
border: 5px double #399;
padding: 3px;
background: #9cc;
}

The xhtml:

Orange Inset Border

The css:

 img.nameofclass {
border: 5px inset #fc6;
padding: 3px;
background: #c30;
}

The xhtml:

Green Ridge Border

The css:

img.nameofclass {
border: 8px ridge #cf9;
padding: 2px 2px;
background: #063;
}

The xhtml:

Blue Variable Border

The css:

img.nameofclass {
border-top: 8px groove #399;
border-right: 5px solid #063;
border-bottom: 8px groove #399;
border-left: 5px solid #063;
padding: 2px;
background: #fff;
}

The xhtml:

How to use the code listed above

Replace “nameofclass” with whatever name you want to use for the type of images you want to have a particular border. If you wanted a certain border for all pictures of buildings you might use img.buildingpics. It is best not to use the name of the picture (ie TowerofLondon.jpg) unless you will only be using a specific border for one picture.
“Name of Image” is usually the name of the file or a very brief description of it (ie TowerofLondon)
The xhtml will be used in the part of your document where you want the image with the border. On this page I used the xhtml in the body of the document in div with the main content just below the h2 heading.
The CSS portion will go in your stylesheet.