Finding Free Fonts

• DaFont
• Font Squirrel
• Font Garden

Linked at

Finding Free Fonts

• DaFont
• Font Squirrel
• Font Garden

Linked at

#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.

]]> http://blog.literaryspring.com/2012/05/fun-with-drop-caps/feed/ 0 http://blog.literaryspring.com/2012/03/glass-css-effect/ http://blog.literaryspring.com/2012/03/glass-css-effect/#comments Tue, 27 Mar 2012 17:18:41 +0000 Rebecca http://blog.literaryspring.com/?p=1438 Continue reading →]]> 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;
}

Please note that these photographs are free, but not necessary public domain. Check each site for its terms of use if you wish to use photographs for public consumption especially commercial use. Photos used in this post are from Photos8 and Photovaco.

When looking for inspiration it can be automatic to look at web sites, posters, or whatever else you are planning to design yourself. However, sometimes it is best to step outside of the box and get some inspiration from the outside world.

Astronomy Picture of the Day
Wikimedia Commons
Astronomy Pictures (Matthew T Russell)
Hubble Heritage Gallery
Russell Croman Astrophotography
Dick Locke’s Astrophotography Gateway Page
Jet Propulsion Laboratory
National Optical Astronomy Observatory
Hubble Site Gallery
Catching the Light: Astrophotography by Jerry Lodriguss
Galaxy Photography Images by Jason Ware
MGS MOC CAptioned Image Releases

On Flickr

Astronomy Photographer of the Year
Astronomy Group
Astrophotography Group
Astronomy for All
Astronomy, Stars, Planets, and Space
Astronomia
Space for All
Astronomy 123

Information about Astronomy Pictures

Astronomy-Pictures

iPhone Apps

Astronomy Picture of the Day
Distant Suns (Paid)
NASA App
Planets
Space Images (JPL)
Star Walk (Paid)

Astronomy Magazines

Astronomy Magazine
Sky & Telescope Magazine

Credit Information: The pictures in this page are from the Astronomy Picture of the Day.

Download PSD

About the Layout

Terms of Use

• This layout may be used for personal noncommercial use in accordance with the terms listed below.
• Please provide a link back to LiterarySpring.com. Do not claim credit for the layout.
• Do not distribute this layout without my express written consent.
• Do not hotlink.
• The layout may not be used for a pornographic website, a website that defames or libels an individual or group, or a “hate” website that promotes hatred based on race, ethnicity, religion, sexual orientation, country of origin, or physical or mental handicaps.

Credits

The pattern in the bottom right box and the wallpaper on the phone are mine. The iPhone graphic is available via Smashing Magazine. The fonts used are MEgaloplis Extra (available from Smeltery ), Coolvetica (available from DaFont), Silkscreen (available from DaFont), and Capitalis TypOasis (available from DaFont).

Download PSD

About the Layout

Terms of Use

• This layout may be used for personal noncommercial use in accordance with the terms listed below.
• Please provide a link back to LiterarySpring.com. Do not claim credit for the layout.
• Do not distribute this layout without my express written consent.
• Do not hotlink.
• The layout may not be used for a pornographic website, a website that defames or libels an individual or group, or a “hate” website that promotes hatred based on race, ethnicity, religion, sexual orientation, country of origin, or physical or mental handicaps.

Credits

The bookmark picture and graphics except for the social media icons are ones I created. The social media icons are from http://www.elegantthemes.com. The fonts are all listed as allowing embedding. The font used in the heading is MEgalopolis Extra which can be downloaded from Smeltery.

Download PSD

About the Layout

Terms of Use

• This layout may be used for personal noncommercial use in accordance with the terms listed below.
• Please provide a link back to LiterarySpring.com. Do not claim credit for the layout.
• Do not distribute this layout without my express written consent.
• Do not hotlink.
• The layout may not be used for a pornographic website, a website that defames or libels an individual or group, or a “hate” website that promotes hatred based on race, ethnicity, religion, sexual orientation, country of origin, or physical or mental handicaps.

Image and Font Credits

The handwritten letter is one of Thomas Jefferson’s and is in the public domain as the copyright has expired. The fonts used are Cloister Black, Journal, Kingthings Serifique, Kingthings Calligraphy, and Optimus Princeps.

Yesterday while looking at sports news I came across a picture with a caption that did not include the name of the players pictured, but did include the phrase “Dummy Text” repeated several times. This is hardly the first time I have seen dummy text end up in the final publication.

Filling in text is a fact of life for designers. Simply knowing that the text is supposed to go in a certain section is not enough. You need to be able to see the text. In many cases this also functions as a means to check your CSS.

Lorem Ipsum is a popular option, but it has its flaws. Very few websites are written in Latin and few people are fluent enough in Latin to be able to read and comprehend it. It is harder to get a good sense of the flow of the text and experience reading it if you cannot read the language it is written in.

Another option is to fill in a rough draft of the text that will appear. This has the advantage of giving you the best preview of the design. Unfortunately, you do not always have the information to do write a good rough draft and unless your rough draft is similar to the final text, the advantage is limited. Furthermore this can be a time-consuming option and if you charge by your time a client may not feel that their money will well spent by having you spend 40 minutes writing a rough draft that will be completely changed.

Some designers make up their own text, but there are also horror stories of designers and journalists who accidentally left in their text with embarrassing results. The phrase Dummy Text repeated five times may not impress a client, but it is better than a client seeing text reviewing your neighbor’s hair or suggesting exactly what you want to do with Internet Explorer 6. While you know you would always make sure all of the dummy text has been removed, it is still a good idea to use some common sense with your dummy text.

A compromise option is to use passages from public domain eBooks written in the same language as the website. Project Gutenberg and The Internet Archive have huge collections of public domain books. There are a variety of books from poetry collections to novels to scientific texts to travel diaries to children’s books. While the website you are designing may be about Stephen Hawking’s contributions to science text from a book about Albert Einstein’s contributions complete with diagrams and equations can give you a better sense of how the final text will look than Lorem Ipsum. While Ireland has changed in the past hundred years, if you are creating a website for your friend’s trip to Ireland text from a public domain book about Ireland is an easy way to get an approximation of how the final website will look.

Credit: The text from the picture above comes from Sherlock Holmes which is available from Project Gutenberg