• Skip to primary navigation
  • Skip to main content
  • Skip to footer
Amethyst Website Design logo

Amethyst Website Design

Affordable WordPress Website Design for Small Business

  • Home
  • About
  • Services
  • Praise
  • Portfolio
  • Blog
  • Contact »

Older

Pretty Boxes with CSS3

September 25, 2009 Updated on September 26, 2009 Marcy Diaz

Share this post:

TwitterFacebookPinterestLinkedInEmail

css3 pretty rounded corner boxes with box shadowCSS3 makes such pretty boxes. This one is a transparent red (#f00) on a yellow (#ff0) background to make a nice orange. It uses border-radius, rgba transparency, box-shadow, and text-shadow properties. These look like the image in Firefox 3.x and Safari, and should also work in Chrome. The text-shadow can be viewed in Opera. All versions of IE display a yellow box with a square-cornered black border, and no shadow on the text. IE does do transparency, but the text in the box is also transparent, unless you resort to removing it from the box-parent.

The css:

body {
     background-color: #ffff00;
     font-family: Verdana; sans-serif;
     font-size: 12px;
     color: #000;
}
#boxabc {
     width: 250px;
     background: rgba(255, 0, 0, 0.6);
     border-top: 1px solid #aaa;
     border-right: 2px solid #444;
     border-bottom: 2px solid #444;
     border-left: 1px solid #aaa;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
     border-radius: 10px;
      -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
      -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
      -khtml-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
     box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
     padding: 15px;
}
.shadowtext {
     font-size: 16px;
     text-shadow: 2px 2px 2px #666;
     font-weight: bold;
}

The HTML:

<div id="boxabc>
     <p class="shadowtext">Praesent Eleifend</p>
     <p>Lorem ipsum dolor sit amet,...</p>
</div>

Share this post:

TwitterFacebookPinterestLinkedInEmail

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!

Contact Marcy »

___

Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy

___

About Marcy

Marcy Diaz

I'm Marcy Díaz, the owner of Amethyst Website Design, a small business located in Phoenix, Arizona (in Ahwatukee Foothills). I help people, like you, grow your business with an affordable WordPress website design. Sign up for my blog and website tips that help you manage your own website.

Footer

Meet Marcy

Marcy Diaz, Amethyst Website DesignAmethyst Website Design is a small business owned by Marcy Díaz. I help people, like you, with your website by creating an affordable WordPress website using Genesis themes to fit your business and budget. I especially love working with new and small business owners, and can help you with the online part of your business.
Read More »

Let’s Connect!

  • Facebook
  • Twitter
  • Pinterest
  • Linked In
  • GitHub

Contact Info

Amethyst Website Design
PO Box 94782
Phoenix AZ 85070

Phone: 602.759.0501
Email:

Contact Form
Located in Ahwatukee Foothills

member of local first az
  • Sitemap
  • Cookie Policy
  • Terms and Conditions
  • Privacy Policy

© 2021   Amethyst Website Design   ◆   Log in

Using WordPress and the Genesis Framework

This site uses cookies for the best browsing experience. By continuing to use this site, you accept our Cookie Policy »OK, got it!