cragllo
Aug 7 2005, 01:19 PM
Im going to show you very simply how to create boxes with Shadows using div tags and css, no images needed, meaning fat pageload times!  You simple need to create two layers, one behind the other, the one behind will have a top and left margin on 20px, the one infront 10px, set teh background colour of the one behing darker than teh one infront, you should end up with something like this:  Here is th html to create this effect: CODE <div id="Layer1" style="position:absolute; left:15px; top:15px; width:400px; height:200px; z-index:1; background-color: #000066; layer-background-color: #000066; border: 1px solid #000000;"></div> <div id="Layer2" style="position:absolute; left:10px; top:10px; width:400px; height:200px; z-index:2; background-color: #0099FF; layer-background-color: #0099FF; border: 1px solid #000000;"></div> Its as simple as that, two divtags, a bit of css, no images 
Reply
rvovk
Aug 7 2005, 01:33 PM
Nice one
Reply
Dragonfly
Aug 7 2005, 08:35 PM
Really cool. Somewhere in someone's webpage I saw something like this when I tried to right-click no images was coming and I was wondering how he did it. Thanks for sharing it here. Keep sharing those with us.  I don't mind it seeing more of those. Very nice tutorial.
Reply
Adamrosso
Aug 7 2005, 08:38 PM
wow, thats nicely done =D. I never knew with such simple CSS coding you could get such a good outcome
Reply
Tyssen
Aug 7 2005, 09:58 PM
QUOTE(cragllo @ Aug 7 2005, 11:19 PM) CODE <div id="Layer1" style="position:absolute; left:15px; top:15px; width:400px; height:200px; z-index:1; background-color: #000066; layer-background-color: #000066; border: 1px solid #000000;"></div> <div id="Layer2" style="position:absolute; left:10px; top:10px; width:400px; height:200px; z-index:2; background-color: #0099FF; layer-background-color: #0099FF; border: 1px solid #000000;"></div> One flaw with this method is that you've given absolute positioning to your first element. You can achieve the same result without absolutely positioning your first element like this: CODE <div id="Layer1" style="width:400px; height:200px; z-index:1; background-color: #000066; layer-background-color: #000066; border: 1px solid #000000;"> <div id="Layer2" style="position:absolute; left:5px; top:10px; width:400px; height:200px; z-index:2; background-color: #0099FF; layer-background-color: #0099FF; border: 1px solid #000000;"></div></div> The second <div> is positioned absolutely in relation to the first (ie it's inside the first div). I've just posted this in another thread, but it seems relevant to this one too: CSS dropshadows (with feathered edges).
Reply
Similar Topics
Keywords : making shadows images- Making A Song In Fruity Loops Part Three
- part three precusion (1)
ok part three now which covers the precusions setup of the small song i built for this tutorial.
the nesecery files can be downloaded here the image below is included in the precusions folder as
it mught not be entierly visable within this post so shold you need it its there also the images
purpose is to enable you to see what i am refering to within this tutorial lateron. now what i
have done above is blackd out every pattern that has nothing to do with the precusion. so the
patterns displayed in light grey are the only patterns i will be refering to. ok lets b...
Ftp In Visual Basic 6.0
- Start making your FTP client using VB6 (1)
Recently, I had a need to make a FTP client, since our webhosting FTP server was kind of exotic, and
very restrictive, and most of uploads, even though they reach 100% would crash... File would be
uploaded to a server, but FTP clients just froze upon completion, waiting for the 226 (OK) from FTP
server... So, I had to make my own, one who would not wait for 226, but instead, watch the file
pload progress... This tutorial is not fuly complete, in the sense that it does not offer COMPLETE
FTP client functionality (for example, I ddn't write the code for FTP download, ...
Making Calculators with PHP
- Some basic calculator scripts I made. (4)
Making Winrar Archives
- and adding password to winrar archives (12)
**** This tutorial will show you how to put files into .rar Archive and pass worded (if wanted)
**** What You Will Need Before continuing you will need a couple of thing, first of all you
need WINRAR , which is a very powerful archive manager. It can reduce size for you email
attachments, decompress RAR, ZIP and other types of files downloaded from the internet. You can get
winrar at http://www.rarlabs.com The other thing is that make sure your using Windows XP because
this is what I used to make this tutorial. I think it works with any other windows not...
How To Make An Ultimate Game List.
- If you're making a site on video games or such. (0)
Hello. I am BuBBaG. You can call me Bubba for short. I'm going to show you how to make an
Ultimate Game List. First off, we need to make a database, we are going to call this database
`my_db`, leave out the `'s. Inside that database we will need to create a table
called `ugl'(Ultimate Game List, duh). To make the table, simply enter this in the Syntax.
CODE CREATE TABLE ugl ( System char(50), Game char(50), ) In the
above code, it is stating we are creating a table called ugl, with two columns, System, and Gam...
How To: Make A Simple Php Site
- Making one file show up on all pages using php (21)
I have looked all over the site and could not find anything that was like this simple, or just like
this at all.. For some people i know that you are using a basic HTML site...and having a big menu
if you want to add somthing you have to go into every one of the pages and add or remove or edit
what you want to do, but with somthing verry simple all you would have to do is edit one file, and
all of the pages that have the PHP script on them would suddenly change to what that one file is.
So to start off if you are planning on using this little tirck, the page that you a...
Tutorial: Installing D-shoutbox For Ipb V1.2
- Making your installation even easier (12)
Over the course of the summer I have tried hard to install a shoutbox into a new forum I was
developing. I went to the Invisionalize forums and found several mods for shoutboxes, but none of
them seemed to work. I first tried to install the D-Shoutbox, but upon this first try, I was
unsuccessful. Eventually, after much frustration, and trying other mods, which didn't seem to
stack up to Dean's features, I was determined to make it work. For some, editing your files (to
the newbie that is) can be difficult, with everything looking like a foreign language (basi...
Making Interactive Cds With Flash
- My second flash tutorial for Beginners (2)
Im back again with what i think it would be an interesting tutorial for all of you guys who wants to
take flash out of the web and make really cool interactive CDS. First of all if all of you are
thinking right now: "this dude is wrong for making interactive cds you have to use macromedia
Director", well you are right macromedia director it's used to build interactive cds and dvds
among other things, but you can also make interactive cds with Flash, the thing is: if you want to
make a simple interactive CD you can totally do it with flash, of course Director brings ...
Making A Song In Fruity Loops Part 2
- part 2 the second melody (0)
ok i am going to attach the midi file againe incase you didnt get it from the first part in this
part i will demonstright how to create and insert the second mellody ok so you have your first
mellody wich is ecetially the comein chord as i call it. now open the midi file you put in your left
panel during the first tutorial and drag the mellody 2 © onto the pallet but click on pattern two
in the right site playlist box. now like in the first tutorial replace with sytrus. for this type
of mellody use something in the leads section of the plugin.for this you need to ...
Uploading Images To Phpbb Galleries
- (0)
This tutorial can be used to show someone how to upload images to a PHPBB Gallerie addon. This
tutorial is not specific to any particular phpbb mod since all mods will most likely be similar. 1)
go to the website galleries (easy) (http://www.school-stuff.org/album.php) 2) Click on the category
that you want to upload the images to. 3) Look for a button that says Upload and click on it. 4)
Insert a Title in the title box this will be what people can identify the picture by, does not need
a description. 5) Click on the Browse Button next to 'Upload a picture from ...
Creating A Resume
- 10 Tips For Making A Resume (1)
I've been working on my Resume for months now. Here is a summary of what I've learned: 1.
Avoid referring to yourself via 1st person or 3rd person terms. Rather than saying "I started this
job in" just say "Began job in"... Employers expect Resumes to be professional and avoid reference
to oneself; and instead speaking in an impersonal tone that presents
achievements/skills/experience/education without personalization. Avoid words like "I", "my", "he",
"she", etc. Leave out personal pronouns and only use the action words/verbs. This also includes
your Ob...
Making A One Page Does All Website In Phph
- (2)
Hello and Great Day or Night either one. Have you ever been to a site and seen a index page or any
page at all control everything such as index.php?do=home&action=logout something similar to the
above? Well I am going to show you how easy it is to make this all own your own, and only have to
use one web template or design to make it work. Before we get started you need to go ahead and find
the web design that you want to use. After you find the site you want to use go ahead and save
it... and save it like this so we can work together, ok! Note* We are going to ...
Making a java based program
- (3)
Java GUI Making a Little Java Program Sec. 1: Imports and starting it off Sec. 2: Variables Sec.
3: Frame and Stuff Sec. 4: Declaring buttons Sec. 5: Adding buttons Sec. 6: Action Listening Sec. 7:
Using this for a learning experience Section 1 Now, let's think. What imports do we need? We
obviously need GUI imports. We also need the action Listener. So, let's declare this at the very
top: Code: CODE import java.awt.*; import java.awt.event.*; import javax.swing.*; That's
all we need to get all our supplies. Now to start us off. Skip a couple lines ...
Making The Popular Id Browsing For Your Site.
- (17)
Was just sitting and being bored but then I realized I could show how to create more or less popular
?id=page browsing. It's actually really easy. I know two ways how to do it. First one I learned
was checking the variable and if it's true including the text/file/anything needed and so on. It
was ok, but sometimes I just couldn't make it work so I switched to switch() function and
that's what I'm going to show you guys right now. So, I made a test page which contains the
code needed and here is its source. CODE <!DOCTYPE HTML PUBLIC ...
Uploading Images To The Trap17 Gallery
- A How To, on uploading images to the trap17 gallery (4)
Well, seeing as how BuffaloHelp or OpaQue has told us to upload our images to the trap17 gallery
instead of our own, i figure that i could help out those who dont know how to do it because it
isn't all that easy for the noobs. Uploading Images To The Trap17 Gallery Step 1:..
Obviously You need a picture so get one of those Step 2:.. Go to "My Controlls" Step 3:.. Once
you get there, on the left hand side look for "Invision Gallery" Step 4:.. Click On "Your Albums"
Step 5:.. Now you need to create an album so click on "Create My First Album" S...
Making A Dynamic Page On Blogspot
- Using an external server to make your pages hosted on blogspot dynamic (5)
Good morning everyone. Have you ever wondered how to allow your visitors to edit content on your
blog? Like adding a post straight off the page, adding a link, editing your profile etc. This will
be extremely useful if you want your visitors to contribute to your blog besides writing comments or
tagging. 1. Adding a post straight off the page. Go to blogger.com, login, select your blog. Go to
settings -> email. By enabling blog email, you can now add a post by simply sending an email to the
address you specified. The address should look something like: yourusername...
How To Resize/host Images!
- Very easy to understand! (15)
For the tutorial I'm ganna be using IrfanVeiw. It's a freeware image program which you can
use to resize and add effect to image, and a lot more ofcourse. If you don't have IrfanVeiw you
can get it from download.com or anyother download site. How to resize images: First you gatta
open Irfanveiw...gee, how obvious. First, open the picture you wish to resize. Second, click the tab
that says "Image" -=Example=- Third, click "Resize/Resample -=Example=- Finaly, set the Height
and Width of the picture to what you want, make sure you have "Set New Size" a...
Blending Patterns Onto Images
- blending patterns onto images (2)
Hmm. I wrote this for a thread, but I decided to submit it here too. First you need to download or
make the patterns. I have some ready made patterns here:
http://www.members.lycos.co.uk/boysbr3akhearts/Patterns .You have to save each image in that
directory, and place them into your Patterns folder (C:\Program Files\Jasc Software
Inc\Paint Shop Pro 7\Patterns). I made this mini-tutorial in PSP 7, but I don't think
it's hard to figure out how to do this in other programs. After you have downloaded the
patterns. ^ Find that in PSP and cl...
How To: Hide The Real Url Of Your Images
- using php (26)
Hiding The Real URL To Your Images Using php to protect the real url to your images In this
tutorial I will explain how you can easily hide the real .gif or .jpg url to your images by masking
it with php. This is not hard to do. A basic amount of php knowledge is required for this tutorial.
Note: This will not protect your images for content robbers. 1. Create a new php file and save
it as img.php in the public_html directory 2. Add the following code to img.php. All important
notes and information are explained in the remming. CODE <? $ext...
Making And Editing A New Ipb V1.2 Skin
- IPB newbie tutorial #2. (0)
And I welcome you all, back for IPB tutorial session #2. For this tutorial I once again target you,
the newbie, and will assist you in the process of customizing your forum. When I first started
playing around with Invision Power Board, I was unaware of all of its features. In fact, when I did
learn of these features I had no clue what do to with them. So now, listen up, as I teach you the
basics of creating and editing a new skin. Let us begin. 1. Log into your AdminCP, on the left
side expand the Skins and Templates section, and click on Board Wrappers. Then ...
Writing On Images
- ...with PHP and GD library (2)
Demo: http://www.fantastictutorials.com/files/av...er&color=random ..and:
http://www.fantastictutorials.com/files/avatar/index.php This tutorial is based on the code I used
for this avatar generator . This tutorial is for people that are reasonably comfortable with
php. I have went to a lot of work making it as simple as possible so even if you are a beginer you
shouldn't have problems. After writing the tutorial, I realised how difficult it is to read
when the source and tutorial seperately ... so I commented the tutorial into the source of the php.
First...
Making A Webserver Directory Listing
- Helps you organise your webserver (6)
I recentely installed IIS with PHP and MySQL on my pc (previous I used UniServer, but that
doesn't matter here). But I had always to go to http://localhost/websiteiwanted or I had to
create a shortcut on my desktop for every site so I decided to create an "overviewpage". It shows
all the websites in your wwwroot with a link to them. If you have folders you don't want to be
included, you extense the && check (but I'll explain this lateron) Here's the total code:
CODE <ul> <table cellpadding="3" cellspacing="3" border="...
Extending The Image Preloader With Php4
- Dynamically adds your images to Preloader! (3)
Tutorial: Extending the Image Preloader with PHP4, by Rob J. Secord, B.Sc. (SystemWisdom)
Second Tutorial in a Series of 2 Tutorials! Be sure to have read the First One here: "Image
Preloader With Progress Bar Status" See a working Sample of this Script! (Note: Preloads
100 images, some images are larger than others, and may take awhile for some people.)
Description : A Tutorial for Extending the Image Preloader with PHP4 to Dynamically Populate the
Array of Preloaded Images. This tutorial is the second in a series of 2 tutorials, and assume...
Making A Website
- Also Some Dos and Don'ts (6)
I had originally had this posted on my domain at nevernormal.com, and thought that you guys could
use it here as well. Granted, this is geared to the uber newbie, so don't razz me if I
don't suggest the most advanced in web design. lol So, you want to make a website? 1.
First, think about what you want your site to be about. There are fanfic sites, like Drastic
Measures and fanfiction.net ; cliques or clubs, like the BtVS Writers' Guild ; or, if you
want, you could have a general site, whether it be about a show/movie you like, or even just about y...
Roll-over Image Links With Css
- No preloading of images (2)
Here is a way of having roll over image links without preloading images by using CSS and a table.
It's very useful for a list of links as in a side bar menu or header. It also solves not having
to make a seperate image for each different link by placing the desired text over the image. 1.
First you need an image which comprises of the main link image, the 'mouse over' image link
underneath plus you can have another for visited links. As for most roll over images, the images
should be the same size. The above example - button.gif is 100x60px with each lin...
Simple Image Rotator
- randomly rotate images (6)
First, It's really confusing. Do you know any tutorials on Image Manipulation on PHP?
Here's another simple one: 1. Create a 5 image. 2. Rename them to something like:
image1.jpg; image2.jpg; and so on... 3. Create your PHP file (rotation.php) 4. Enter the
following code: CODE <?php header("content-type: image/jpeg");
readfile("image".mt_rand(1,3).".jpg"); ?> 5. Execute your
script....
Looking for making, shadows, images
|
|
Searching Video's for making, shadows, images
|
advertisement
|
|