The rand1.jpg - rand9.jpg that change look like this today.

Front Page Squares Today

Web and Blog Design Studio

Code Your Own Art

Can we make code look like art?
Coding is an art. Fiddle with it. Replace the backyard.jpg and calla.jpg photographs with your own. Any pictures will work. Each is your own original work of art. Show us your stuff. Especially the mistakes.

Two pictures
We used two pictures to make our own art using the Opacity filter. The code overlays one picture with another picture. The code will work with any two images.

Screen capture of Opera, Mozilla, and IE

Triple the pleasure
That's a screen shot that shows how the Opacity filter (this code) behaves in Opera, Mozilla Firefox, and IE on this PC. Your mileage may vary.

Mozilla and Opera fall apart on border.
The Polariod border code doesn't work because they are getting confused on the solid border (darn, that looked so good in IE).

Can we add a fully opaque border?

Can we make it look like art?

It is art. Fiddle with it. Replace the images or photographs with your own. Any pictures will work. Each is your own original work of art. Show us your stuff. Especially the mistakes.

Can I put the Polariod Border around it?

Let's try using the Polaroid Border code.

We would usually put the class="polaroid" on the img tag. But we are using background images only. Let's try adding an outer div like this
<div class="polaroid">
and the copy and paste code goes here
</div>

The polaroid border code assumes some width associated with the image. So, we have to explicity tell it the width.
style ="width:350px;"
to the <DIV class="polaroid">

END OF WHERE Mozilla and Opera fall apart on the Polariod border code

To start we need two images. Photographs, squares, any image. It can be a .gif, .jpg, .png, or any other type of image you might have readily available.

If you don't have a spare image or photograph we have a bunch of spare squares you can use.

Does Opacity work in all browsers?

Yes. Opacity works in current versions of IE, Firefox, and Opera. It's part of CSS3 but it works in every browser we have tested.

Double Opacity Overlay
Cool. That was a mistake gone right. The original intent was to use CSS3 Opacity to overlay the word mistake over an image. Like this.

Instead, we laid a plain .gif image over a .jpg image with opacity applied to the .gif and to the text. A double overlay.

Any two images or photographs will work. The file type doesn't matter. The width and height of the image doesn't matter. To use this code insert your own image names where we have scribblelogo.jpg and 20ways.gif You can use the actual width and height of your image if you want but it isn't necessary since the image is just a background. It's kind of fun to plug in random images and find some cool effect. Since the images are backgrounds they will automatically take off part of the image or repeat the image to fill the extra space. Try it.

Your Logo Here 1

Your Logo Here 2

Your Logo Here 3

Your Logo Here 4

Your Logo Here 5

Your Logo Here 6

Your Logo Here 7 Opacity 70

Opacity 70 says show 70% of our text and calla.jpg image.

We want to see 30% of the background image named backyard5.jpg.

Transparent .gif

This one with galleryhead.gif must be a transparent .gif image. It's an interesting effect. Not what we expected but interesting.

We added the background color black here

Your Logo Here 8

Your Logo Here 9

Your Logo Here 10

background 20ways.gif with opacity 60

background calla.jpg opacity 30

This is the AJAX LINK

Does it have to be an iframe? Black border?

see if this looks better...

Full instructions for making the first letter big are in the Drop Cap copy and paste style tutorial. For this drop cap we forced the first big letter to span more than five lines. The font-size is adjusted to exactly 100 pixels while the line height is 80 pixels.

I stole the color combination here from petrow23 then realized that the color is red, not orange like it looks here on my screen. The background color makes this look good. Amazing how the color changes when put on a colored background. Just playing around here with colors.

This is the CSS you are using.

.dropcap {
         float: left;
         width: 18px; 
         line-height: 25px;
         color: black;
         padding-top: 4px;
         padding-right: 4px;
         font-size: 36px;
         height: 36px; 
         font-weight: bold;   
         font-family: Comic Sans MS, Verdana, Arial, sans-serif;
         }

Remove the width:18px; and the height: 36px;.
This style will work in Mozilla and IE.

.dropcap {
         float: left;
         line-height: 25px;
         color: black;
         padding-top: 4px;
         padding-right: 4px;
         font-size: 36px;
         font-weight: bold;   
         font-family: Comic Sans MS, Verdana, Arial, sans-serif;
         }

Drop Cap

We left from Ken's house at 8:30 a.m. Except for gas and a quick meal at Taco Bell we drove straight through to Grand Portage and arrived at midnight (1:00 a.m. Eastern). We had no trouble finding the boat dock this time because they put up a bigger sign that was much easier to see in the middle of the night. We found a parking space in the upper lot and then walked down to dock. It was pretty cool and breezy but it felt good to stretch my legs after the long ride. The boat would not be leaving for Isle Royale until 8:00 a.m. but we had to be at the dock by 7:30 a.m. to present our reservations and have our gear loaded. It was still several hours before we had to be at the dock so we went back to the car to get some sleep.

Take a look at Dropcaps Tutorial for more examples. The font Times works well. If there's anything missing from the tutorial or that doesn't work at your place let me know. Thanks.

The Joy of CSS

Copy and paste this in your Blog or Web page.

It will look like this.

Remove the Test Borders

The borders around the text are for testing in various browsers. It makes it easier to see what the code is doing. But, on this one I like the look with the borders. The colors aren't planned or intentional and can be changed or the code can be posted without the borders.

Copy and paste this in your Blog or Web page.

It will look like this.

Opacity Blending Effects

Opacity

When it's smaller without borders and background colors like we showed here the center floating image looks easier. And it is easy. We do have to contain it in a div so we made this one 400 pixels wide. Most of us have 400 pixels to post in, right? If not then use a width that works in your page and use half of the width for the left column and half for the right column.

The font sizes and background will adjust to the sizes on your page.

If we right click on the image we view the properties to get the dimensions of the image. This image is 160 x 239. So, we will display half of the picture on the left and half on the right. Half of 160 is 80, right? The image isn't altered, only the display of the image.

We defined the post area as 400 pixels wide so that our larger image will fit. We split that in half and now each column is 200 pixels wide.

Typedrawing
Want to make a groovy tree? Type in words. Draw. Print screen and save.

Thanks Bryk for link.