Mandarin Design Daily
“Mandarin Design Daily” is an excellent design blog and website with all types of great tips and even free snippets of code for you to use that I came across while visiting Prochein Amy blog. If you have a desire to spice up your blog Mandarin Design is a marvelous place to visit and get all types of CSS, HTML and design information. They have categories for box tips, text tricks, blog, FAQS, color charts, free gallery and CSS opacity. It’s very easy and fast to navigate through the material using the top bar menu system. I give 9 stars. It’s a very creative and useful resource for bloggers and web page builders that these folks have so graciously made available. They demonstrate how creative you can get and what can be done using your imagination and some Cascading Style Sheets (CSS).9 stars
My Own Style Sheets Play Havoc with some of these Examples from Mandarin Design
You don’t have to know all this code to add some extras to your own blog. Here is just a tiny sampling of the copy and paste CSS examples they give for you to play with and add to your own blog and posts:
This is a centered bordered box. The background color is hexadecimal color C0D4AF. The box has a defined width of 300 pixels. The padding of 5 pixels is added so that the text doesn't flush up to the border. The border color is black.
We can create a class named thinborderfloat that will automatically put a thin border around our image and float it to the left. We used a long name thinborderleft, but you can name it anything you want. I easily added this shadow box to my post with the cut and paste code at Mandarin Design.
COKE
This is the content area where we
can put text or images. The padding of 10px around all four sides
allows space between this text and the black border.
...this will
look like some of the pullquotes and styles we see
in magazinelayout...
This opacity background with
fully opaque text works in
Mozilla and IE.
S
I
T
T
I
N
G
PRETTY
the magazine this text is centered. What magazine is it? Blender. "What is Blender!" she shouted.
NO PHOTOGRAPHY OF CONOR OBERST
The
first letter in this paragraph is big. We used a font size of 36pt. You can change the font size and adjust the height as needed. And depending on your font it will probably need some adjustment.
Sorry about the long post of examples there but I was able to do all that in a couple minutes with cut and paste. All I would need to do is change the words and images if it was for my own blog. There are some great materials over there worth taking a peek at.
Here are a couple other nice resource sites for material like this:
W3 Schools
Dynamic Drive
Internet.Com
2 Comments:
Thanks for the tip BC. I will definately have to look further into this site.
That's an excellent site. Thanks for the link, it answered a lot of my question about HTML and CSS.
Post a Comment
<< Home