Home > .CodeSlayer's Posts > CodeSlayer2010’s Code: jQuery Fancy Paragraph Styling (manila background, rounded-rectangle, drop-shadow, orange border)

CodeSlayer2010’s Code: jQuery Fancy Paragraph Styling (manila background, rounded-rectangle, drop-shadow, orange border)

screenshot of Eric CodeSlayer2010 Hepperle's jsfiddle jQuery -- fancy paragraph tag style 01

Jsfiddle Screenshot (07/13/13)

I wrote this jQuery in about 5 minutes. It is really simple, but amazingly powerful at the same time. The purpose of this is to instantly style paragraph tags. Here are the style parameters:

Background color: Manila (light beige-ish/yellow)
Border color: Orange
Drop-shadow: Yes
Rounded-rectangle: Yes

I want to make the code easily available to everyone, so I’ve provided the jQuery here in case you want to quickly add this style to your project. Cheers.

-CodeSlayer2010

/* Add manilla background, rounded-rect, orange border,
 & shadow to paragraphs.
 (Press F12 in your browser to see the results)

 @Creator: Eric Hepperle (CodeSlayer2010)
 @Date: 07/13/13
 @Version: 1.0

 @Purpose: Puts a fancy style on paragraph <P>
 tags to make them 'pop'.

 @Updates:
 07/13/13
 8:30 - Created initial code.

*/

console.clear()

$('p').css({
 'border': 'solid #FFB819 3px',
 'border-radius':'15px',
 'box-shadow': '10px 10px 5px #888888',
 'background-color':'#FFFBCC',
 'padding':'15px'
});
Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: