Creating a “Drop-Cap” with CSS

Creating a “Drop-Cap” with CSS

There are allot of magazine style sites out there that use “drop-caps” It is a kind-of old style of writing, but it does give magazine style sites a nice touch.

Below is the HTML and CSS code to make the first letter in a paragraph a “drop-cap”

Read more on Creating a “Drop-Cap” with CSS…

CSS Buttons vs Image Rollovers

Often a Website owner decides to “dress up” their menu display by using button graphics instead of plain text links. It’s a great idea to give your navigation more punch, but I recommend you avoid going with image files for your buttons and instead choose a simple CSS (Cascading Style Sheets) layout.

Read more on CSS Buttons vs Image Rollovers…

Refcard: Core CSS part 3

Refcard: Core CSS part 3

Here is part three of the Core CSS reference cards. I hope that this will help you as much as it has helped me.

160px-CSS.svg


Get it right here: Core-css3

Reference Card: Core CSS Part 2

As promised, here is the second part of the Core CSS reference card.


Download it Core Css 2

Reference Card: Core CSS Part 1

Here is another reference card for you: Core CSS part 1. We will be following up this post with parts 2 and 3 soon.

rc019-010d-core_css_1


PHVsPjxsaT48c3Ryb25nPndvb19hZHNfcm90YXRlPC9zdHJvbmc+IC0gdHJ1ZTwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX2ltYWdlXzE8L3N0cm9uZz4gLSBodHRwOi8vd3d3LndlYnRhbGsuY28uemEvaW1hZ2VzL3N1Ym1pdC5wbmc8L2xpPjxsaT48c3Ryb25nPndvb19hZF9pbWFnZV8yPC9zdHJvbmc+IC0gaHR0cDovL3d3dy53ZWJ0YWxrLmNvLnphL2ltYWdlcy9zdWJtaXQucG5nPC9saT48bGk+PHN0cm9uZz53b29fYWRfaW1hZ2VfMzwvc3Ryb25nPiAtIGh0dHA6Ly93d3cud2VidGFsay5jby56YS9pbWFnZXMvc3VibWl0LnBuZzwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX2ltYWdlXzQ8L3N0cm9uZz4gLSBodHRwOi8vd3d3LndlYnRhbGsuY28uemEvaW1hZ2VzL3N1Ym1pdC5wbmc8L2xpPjxsaT48c3Ryb25nPndvb19hZF91cmxfMTwvc3Ryb25nPiAtIG1haWx0bzppbmZvQHdlYnRhbGsuY28uemE8L2xpPjxsaT48c3Ryb25nPndvb19hZF91cmxfMjwvc3Ryb25nPiAtIGh0dHA6Ly93d3cud29vdGhlbWVzLmNvbTwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX3VybF8zPC9zdHJvbmc+IC0gaHR0cDovL3d3dy53b290aGVtZXMuY29tPC9saT48bGk+PHN0cm9uZz53b29fYWRfdXJsXzQ8L3N0cm9uZz4gLSBodHRwOi8vd3d3Lndvb3RoZW1lcy5jb208L2xpPjxsaT48c3Ryb25nPndvb19hbHRfc3R5bGVzaGVldDwvc3Ryb25nPiAtIGRlZmF1bHQuY3NzPC9saT48bGk+PHN0cm9uZz53b29fYXV0b19pbWc8L3N0cm9uZz4gLSB0cnVlPC9saT48bGk+PHN0cm9uZz53b29fY29udGVudF9hcmNoaXZlczwvc3Ryb25nPiAtIGZhbHNlPC9saT48bGk+PHN0cm9uZz53b29fY29udGVudF9ob21lPC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb19jdXN0b21fZmF2aWNvbjwvc3Ryb25nPiAtIGh0dHA6Ly93d3cud2VidGFsay5jby56YS93cC1jb250ZW50L3dvb191cGxvYWRzLzQtZmF2aWNvbi5wbmc8L2xpPjxsaT48c3Ryb25nPndvb19mZWVkYnVybmVyX3VybDwvc3Ryb25nPiAtIDwvbGk+PGxpPjxzdHJvbmc+d29vX2dvb2dsZV9hbmFseXRpY3M8L3N0cm9uZz4gLSA8c2NyaXB0IHR5cGU9XCJ0ZXh0L2phdmFzY3JpcHRcIj4NCnZhciBnYUpzSG9zdCA9ICgoXCJodHRwczpcIiA9PSBkb2N1bWVudC5sb2NhdGlvbi5wcm90b2NvbCkgPyBcImh0dHBzOi8vc3NsLlwiIDogXCJodHRwOi8vd3d3LlwiKTsNCmRvY3VtZW50LndyaXRlKHVuZXNjYXBlKFwiJTNDc2NyaXB0IHNyYz1cJ1wiICsgZ2FKc0hvc3QgKyBcImdvb2dsZS1hbmFseXRpY3MuY29tL2dhLmpzXCcgdHlwZT1cJ3RleHQvamF2YXNjcmlwdFwnJTNFJTNDL3NjcmlwdCUzRVwiKSk7DQo8L3NjcmlwdD4NCjxzY3JpcHQgdHlwZT1cInRleHQvamF2YXNjcmlwdFwiPg0KdHJ5IHsNCnZhciBwYWdlVHJhY2tlciA9IF9nYXQuX2dldFRyYWNrZXIoXCJVQS02ODgwNTIxLTVcIik7DQpwYWdlVHJhY2tlci5fdHJhY2tQYWdldmlldygpOw0KfSBjYXRjaChlcnIpIHt9PC9zY3JpcHQ+PC9saT48bGk+PHN0cm9uZz53b29fbG9nbzwvc3Ryb25nPiAtIDwvbGk+PGxpPjxzdHJvbmc+d29vX21hbnVhbDwvc3Ryb25nPiAtIGh0dHA6Ly93d3cud29vdGhlbWVzLmNvbS88L2xpPjxsaT48c3Ryb25nPndvb19uYXZfZXhjbHVkZTwvc3Ryb25nPiAtIDwvbGk+PGxpPjxzdHJvbmc+d29vX3Jlc2l6ZTwvc3Ryb25nPiAtIHRydWU8L2xpPjxsaT48c3Ryb25nPndvb19zaG9ydG5hbWU8L3N0cm9uZz4gLSB3b288L2xpPjxsaT48c3Ryb25nPndvb190aGVtZW5hbWU8L3N0cm9uZz4gLSBUeXBlYmFzZWQ8L2xpPjxsaT48c3Ryb25nPndvb190aHVtYl9oZWlnaHQ8L3N0cm9uZz4gLSAyODA8L2xpPjxsaT48c3Ryb25nPndvb190aHVtYl93aWR0aDwvc3Ryb25nPiAtIDQzNTwvbGk+PGxpPjxzdHJvbmc+d29vX3VwbG9hZHM8L3N0cm9uZz4gLSBhOjI6e2k6MDtzOjYxOiJodHRwOi8vd3d3LndlYnRhbGsuY28uemEvd3AtY29udGVudC93b29fdXBsb2Fkcy80LWZhdmljb24ucG5nIjtpOjE7czo2MToiaHR0cDovL3d3dy53ZWJ0YWxrLmNvLnphL3dwLWNvbnRlbnQvd29vX3VwbG9hZHMvMy1mYXZpY29uLmljbyI7fTwvbGk+PC91bD4=