Add Subtle Box Shadow to Text Box, Page, Blog, etc...Make Content Stand Out

This is a simple little tip that will make your content stand out - - simple but quite elegant.

 

Instructions:

#1 - Add CSS to Advanced CSS via My Network/Settings/Appearance/Advanced

.textboxshadow {
box-shadow:
0 1px 1px rgba(0,0,0,0.15), /* The top layer shadow */
0 10px 0 -5px #eee, /* The second layer */
0 10px 1px -4px rgba(0,0,0,0.15);
border:solid 1px #e6e6e6;
padding:20px;
}

 

#2- Edit a Text Box, Page, Blog, etc...

#3 - Click on HTML button.

#4 - Wrap your content with the DIV, like HTML below.

Example #1 HTML:

<div class="textboxshadow">Your content goes here. I'll add more content to show the effect.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultricies, nulla sed lobortis ultricies, orci augue consequat urna, a aliquet urna velit non dui. Nunc et urna nulla. Donec sed ipsum ut arcu sollicitudin elementum. Nullam nunc sapien, accumsan quis mattis id, tempor sed leo. Integer et nunc libero. Ut quis tellus vitae lacus euismod tempor. Nunc convallis tortor at erat facilisis iaculis. Curabitur vestibulum eleifend ornare. Donec sem nisl, consectetur at ullamcorper et, rutrum et risus.</div>

 

Example #1 Results:

Your content goes here. I'll add more to show the effect.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultricies, nulla sed lobortis ultricies, orci augue consequat urna, a aliquet urna velit non dui. Nunc et urna nulla. Donec sed ipsum ut arcu sollicitudin elementum. Nullam nunc sapien, accumsan quis mattis id, tempor sed leo. Integer et nunc libero. Ut quis tellus vitae lacus euismod tempor. Nunc convallis tortor at erat facilisis iaculis. Curabitur vestibulum eleifend ornare. Donec sem nisl, consectetur at ullamcorper et, rutrum et risus.

 

Example #2 HTML:

Make sure you have followed steps #2 and #3. You only add CSS one time.

#4 - Wrap your content with the DIV, like HTML below. You can also add internal paragraph tags. Just make sure all content is wrapped with the DIV.

<div class="textboxshadow"><p>Your content goes here.</p><p>This time I will wrap content within paragraphs tags. Make sure your outer wrapper is a DIV. I'll add more to show the effect.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultricies, nulla sed lobortis ultricies, orci augue consequat urna, a aliquet urna velit non dui. Nunc et urna nulla. Donec sed ipsum ut arcu sollicitudin elementum. Nullam nunc sapien, accumsan quis mattis id, tempor sed leo. Integer et nunc libero. Ut quis tellus vitae lacus euismod tempor. Nunc convallis tortor at erat facilisis iaculis. Curabitur vestibulum eleifend ornare. Donec sem nisl, consectetur at ullamcorper et, rutrum et risus.</p></div>

 

Example #2 Results:

Your content goes here.

This time I will wrap content within paragraphs tags. Make sure your outer wrapper is a DIV. I'll add more content to show the effect.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultricies, nulla sed lobortis ultricies, orci augue consequat urna, a aliquet urna velit non dui. Nunc et urna nulla. Donec sed ipsum ut arcu sollicitudin elementum. Nullam nunc sapien, accumsan quis mattis id, tempor sed leo. Integer et nunc libero. Ut quis tellus vitae lacus euismod tempor. Nunc convallis tortor at erat facilisis iaculis. Curabitur vestibulum eleifend ornare. Donec sem nisl, consectetur at ullamcorper et, rutrum et risus.

 

Couple of Tips for Novice Users:

  • If the 2nd example doesn't work for you, remove the paragraph tags. They might be styled in a way that could conflict with the DIV style.
  • You can use the DIV class as many times as you want to make content stand out, with this look.

 

Enjoy,

Jen

Views: 579

Reply to This

Replies to This Discussion

Nice way to make text stand out. I love it.

Thanks for the nice feedback, happy you like it!

=)

RSS

Members

© 2024   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips