Code for image shadow effect

iWeb creates very nice shadows. Is it a separate image created on the fly or some javascript? Is there any way to get the code that generates that effect? I'd like to extend it to other pages that weren't made in iWeb.
Thanks in advance.
Mike

OK. Here's the solution for anyone interested. A couple of warnings first though: Apple has a naming scheme with the shadows. If you rename "shadow_1" to "shadow_pocket", for example (even if you change it in the HTML file too, it won't work.
If you saw the code I posted last time, you know how to use one type of shadow. The code below is a javascript file that allows 3 different shadows. Be careful to put braces and parenthesis in the right places. Javascript is a very sensitive language. You can use divs to enclose the images you want to add the shadow effect to. The divs need to have class="tinyText shadow_X", where X is the kind of shadow you want.
On to the offset… This was actually very easy. It is found in the Javascript below "IWPoint(0.0000,1.0000)". In that example, it literally means that the shadow is offset 1 pixel downward and no horizontal offset. It's a simple (x,y) coordinate system where x and y are the pixel increments from the original image.
The Javascript code:
setTransparentGifURL('Media/transparent.gif');function applyEffects()
{var registry=IWCreateEffectRegistry();registry.registerEffects({shadow_1:new IWShadow({blurRadius:2,offset:new IWPoint(0.0000,1.0000),color:'#000000',opacity:1.000000}),shadow_2:new IWShadow({blurRadius:5,offset:new IWPoint(0.0000,2.0000),color:'#000000',opacity:1.000000}),shadow_0:new IWShadow({blurRadius:5,offset:new IWPoint(0.0000,2.0000),color:'#000000',opacity:1.00000})});registry.applyEffect s();}
function hostedOnDM()
{return false;}
function onPageLoad()
{loadMozillaCSS('Blank_files/BlankMoz.css')
fixAllIEPNGs('Media/transparent.gif');applyEffects()}
Apple has done incredible work on these JavaScript libraries. So, anyone that wants to add beautiful shadows to their images will find these posts helpful.
Thanks for your help too Old Toad.
Mike

Similar Messages

Jsp code for image compression

Hai,sir this is surendra i am doing a project using jsp and mysql.
In that each user can put his image and i am storing that image in mysql blob but that results to that database size.
So i need jsp code for image compression or another way for storing images.

There's no need to store images in db. You may store them in a dedicated folder.

This is my Jsp code for image upload in database:

This is my Jsp code for image upload in database:
-----------Upload.jsp----------------
<html>
<head>
</head>
<body bgproperties="fixed" bgcolor="#CCFFFF">
<form method="POST" action="UploadPicture.jsp" enctype="multiform/form-data">
<%! int update=0; %>
<%@ page import="java.util.*" %>
<%@ page import="java.sql.*" %>
<%@ page import="java.text.*" %>
<%@ page import="java.sql.Date" %>
<%@ page import="java.io.*"%>
<%@ page language = "java" %>
<%
try
String ct="3";
String path;
File image=new File(request.getParameter("upload"));
path=request.getParameter("upload");
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection con = DriverManager.getConnection("jdbc:odbc:itPlusElectronics","","");
PreparedStatement pstmt=con.prepareStatement("insert into graphics values(?,?,?)");
pstmt.setString(2,path);
pstmt.setString(3,ct);
InputStream is=new FileInputStream(path);
pstmt.setBinaryStream(1, is, (int)(image.length()));
int s=pstmt.executeUpdate();
if(s>0)
out.println("Uploaded");
else
%>
unsucessfull
<%}
is.close();
pstmt.close();
catch(Exception e)
}%>

 
<img src="UploadedPicture.jsp">image</img>

</form>
</body>
</html>
My database name is itPlusElectronics and the table name is "graphics".
I have seen as a result of the above code that the image is stored in database as "Long binary data". and database table is look like as follows-------
picture path id
Long binary data D:\AMRIT\1-1-Picture.jpg 3
To retrive and display i use this JSP code as--
------------------------UploadedPicture.jsp------------------------------
<html>
<head>
</head>
<body bgproperties="fixed" bgcolor="#CCFFFF">
<%! int update=0; %>
<%@ page import="java.util.*" %>
<%@ page import="java.sql.*" %>
<%@ page import="java.text.*" %>
<%@ page import="java.io.*"%>
<%@ page language = "java" %>
<%@page import="javax.servlet.ServletOutputStream"%>
<%
try
String path;
path=request.getParameter("upload1");
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection con = DriverManager.getConnection("jdbc:odbc:itPlusElectronics","","");
PreparedStatement pst = con.prepareStatement("SELECT * FROM graphics WHERE id ='3'");
// pst.setString(3, id);
ResultSet rs = pst.executeQuery();
path=rs.getString("path");
if(rs.next()) {
byte[] bytearray = new byte[4096];
int size=0;
InputStream sImage;
sImage = rs.getBinaryStream(1);
response.reset();
response.setContentType("image/jpeg");
response.addHeader("Content-Disposition","filename=path");
while((size=sImage.read(bytearray))!= -1 )
response.getOutputStream().write(bytearray,0,size) ;
response.flushBuffer();
sImage.close();
rs.close();
catch(Exception e)
%>
</body>
</html>
Now after browsing a jpg image file from client side and pressing submit button ;
I am unable display the image in the Upload.jsp file.Though I use
<img src="UploadedPicture.jsp">image</img> HTML code in Upload.jsp
file .
Now I am unable to find out the mistakes which is needed for displaying the picture in the Upload.jsp page..
If any one can help with the proper jsp code to retrive and display the image ,please please help me !!!!!!!!!!!!!!!!!!!!!!!!!!

dketcham wrote:
cotton.m wrote:
>
2) I'm looking at how you called stuff, and you're trying to call the jsp file as an image? That jsp isn't the source of the image, just a page linking to an image. I think if you really want to do things that way you're going to need to just include that jsp within the jsp you're calling it from (or you can do it the easy way, and if you have the information to get the path of the image you want, you could simply call the image from the first jsp you posted)This is incorrect.
There are two JSPs. The second when called will (if it worked) return the source of an image as stored in the database.even when called with <img src=xx.jsp>??
Yes.
If any of what I say next seems obvious or otherwise negative I apologize, just trying to explain and I don't know what you know vs what you don't.
The link in the src is just a URL not a filetype. So just because it ends with JSP does not mean it has to return HTML. The content type is determined by the browser using the Content-Type header returned by the server in the HTTP response. In this case the header is set to be a jpeg so that's what the browser will attempt to interpret the content part of the response as.
So in fact one is not limited to just HTML or images but whatever content type you would like to return (that the browser can understand anyway). This could be HTML or it could be an image of some type or it could be a PDF or it could be an Excel spreadsheet. All you have to do in the JSP is set the header appropriately and then send content that is actually in that format.
This does not just apply to JSP by the way but all other web programming languages. You can do similar things to produce the same results in PHP, Perl, ASP etc.
The only JSP/Servlet complication is whether or not doing this in a JSP is a "good" idea but I am not an expert enough at that to make a definitive statement. Mostly though JDBC in a JSP is a no-no.

Jquery or code for Image loading on Sp Gridview Pager(Next ,Prev) click functionality on sharepoint 2010

Jquery or dynamic code for Image loading on Sp Gridview Pager(Next ,Prev) click functionality on sharepoint 2010.
i have a dynamic SP gridview contains Previous and next
buttons for paging.
page doesn't contain Update panel.
grdXRPSUsers.PagerSettings.Mode = PagerButtons.NextPrevious;
grdXRPSUsers.PagerSettings.PreviousPageText = "< Previous Page";
grdXRPSUsers.PagerSettings.NextPageText = "Next Page >";
grdXRPSUsers.PagerSettings.FirstPageText = "First Page";
grdXRPSUsers.PagerSettings.LastPageText = "Last Page";
When i click on Next or Previous page in the gridview it will take more time and showing progress bar in th below.
As per my client request, i need to change the
progress bar to Loading image (Wheel at middle of the grid at fething time).
How its possible either through jquery or Programming(code behind).
Please help

Hi,
According to your description, my understanding is that you want to add loading image when click the paging button to load the data.
I suggest you can use Jquery BlockUI Plugin to show a block image when loding data in paging click event.
Here is a similiar thread for your reference:
How to display a loading image until a gridview is fully loaded
More information:
Jquery BlockUI Plugin
Thanks
Best Regards
TechNet Community Support
Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact
[email protected]

Blur control disabled for Drop Shadow Effect and Filter

Win2k Pro
2GB Ram
AICS 11.0.0
This is odd: the blur control in the Drop Shadow Effect and Filter dialog boxes is disabled. It seems to me there was a time it was ENabled.
This is the situation for both vector and bitmap objects. I've played with Document Raster Settings.
Truth be told, I _did_ reinstall Illustrator last year and have not used it much since.
Any insights you can share?
Thanks

Please excuse this post ... didn't mean for it to appear as a reply under another post. My apology. lk <[email protected]> wrote in message news:[email protected].. >I purchased a vector image from istockphoto ... when I opened the file in > illustrator it is just an outline without color. I select the outlines > but > can't fill it with color! What am I missing? > > > > > > <[email protected]> wrote in message > news:[email protected].. >> Win2k Pro >> 2GB Ram >> AICS 11.0.0 >> >> This is odd: the blur control in the Drop Shadow Effect and Filter dialog >> boxes is disabled. It seems to me there was a time it was ENabled. >> >> This is the situation for both vector and bitmap objects. I've played >> with >> Document Raster Settings. >> >> Truth be told, I _did_ reinstall Illustrator last year and have not used >> it much since. >> >> Any insights you can share? >> >> Thanks >

Help Needed with HTML code for Image Positioning

Hi All,
Need a little help with some code for positioning images.
I initially used the following:
This is fine, but the border automatically puts a black border around the photo - how do I change it to white? Is there a way to set margins too, to prevent the text butting up against the photo?
I also used the following code with success:
<style type="text/css"
img
float:right;
border:2px solid white;
margin: 0px 0px 15px 20px
</style>
This code works, however the problem with it is it is not individual to just one photo - it moved all my photos and on that page, I wanted one photo floated to left and another to the right.
If I use this code, how can I make it photo specific, so that it only affects the placement, margins and borders of one photo?
Any help would be great.
Thanks

CSS question, not iWeb question. Regardless, use inline CSS styling for the image. You can also wrap the image in its own tag and declare an id or simply declare an id for the img tag, then set the style for the id_name:
<style type="text/css"
img#id_name
float:right;
border:2px solid white;
margin: 0px 0px 15px 20px
</style>
If you want to control the style of more than one image on a page but not all then use a class instead of an id.
the border automatically puts a black border around the photo - how do I change it to white? Is there a way to set margins too, to prevent the text butting up against the photo?
I believe you have discovered a solution for this according to your CSS code. You have set the border to white by looking at the code and adjusting it appropriately. Your margin is declared in the CSS also, adjust the pixels appropriately.
Read up some more on CSS to educate yourself further. I suggest w3schools.com or a CSS forum instead of the iWeb forum if you have CSS questions. It's kind of like if you drive your auto to the supermarket so you decide to go to the supermarket and ask everyone in the produce section to help when you have car problems. All the supermarket does is provide a place to park your auto. If you have car problems then ask a mechanic. iWeb (and most of its users) doesn't specialize in code, it simply provides an area for you to place it. Granted you might get lucky and find a mechanic in the produce section of the supermarket, but you're more likely to find a specialist at an auto swap meet (or CSS coding forum)!

Code for image swap of sprite images that works on retina screens (@2x)

Hello,
I'm having difficulty finding code (javascript, jquery or css) that will successfully swap-out lower-res sprite images for higher-res sprite images "@2x" intended for retina screens. I'm using DWCC/HTML5/CSS3. Can anyone make a recommendation?
Thanks for your help!

Does this help you?
http://css-tricks.com/snippets/css/retina-display-media-query/
Nancy O.

Need Code For ZoomIn/ZoomOut Effect

Dear Friends, I need a small help from you guys... I want to do a simple thing in Flash CS3, but some how i am unable to do it. Actually my requirement was....OnRollOver of a Button I want to slightly zoom it and OnRollOut i want to slightly zoom out the Button.
And the conditions are I should not use TimeLines/Stage Assets etc. Every thing has to come dynamically. Including the Button creation/ZoomOut/ZoomIn effect etc. and mainly i need it in Flash Cs3/Flash Cs4. I need it little urgent. can you guys pls help me out on this. Rajesh

Hello dmennenoh ,
Thank you so much for your reply. i am still unclear with the suggestion made by you.
can you please give me an example ie what exactly i am looking for.. i need it little urgent... i hope you understood my situation.
pls pls reply me and give me a solution for this,
Rajesh

Inserting "if then" code for images

Hi All,
I am wanting to do some email marketing and customizing the email to particutlar individuals. ie a female would get a certain image and a male a different one, as well as I have multipule locations that I would like to put their particular store address on.
I am using an Access Database.
Feilds are set up with 1's, 2's depending on gender.
What coding would I use?
Thanks in advance
David

How are you getting the information from this database into ID?
You probably want to do the logic on the database end. For exmple if you are saving a .csv file from the database, use the if statement to populate a field with the path to one or the other image. Data Merge can use that path info to place an image, and I would expect that xml or one of the catalog plugins could be setup to do the same.

[Tutorial] Shadow Effects for Photos & Web Elements

Latest tutorial I've put up for simple shadow effects can be
found here:
http://www.sitepoint.com/forums/showthread.php?t=581074
Nadia
Adobe® Community Expert : Dreamweaver
Unique CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com

Nadia Perre *ACE* wrote:
> Latest tutorial I've put up for simple shadow effects
can be found here:
>
http://www.sitepoint.com/forums/showthread.php?t=581074
Very nice, Nadia!
Linda Rathgeber - Adobe Community Expert
http://www.adobe.com/communities/experts/members/8.html

How to place multiple images in batch with drop shadow effects on room backgrounds at the same position?

I want to place multiple images of hand paintings with drop shadow effects on room backgrounds to make them look as if the paintings are hanged on the room walls. I know how to do it one by one, but that takes time and I want to do it in batch at once.
I am quite a beginner for adobe photoshop CS6. I belive such an automated task is possible through 'Automated Batch' function and/or 'Create Droplet' function. Kindly share your expert opinion.

If you want to go with Batch I would recommend creating an Action of more or less these steps:
• set the resolution to the same as the background image’s
• change the image from Background Layer to regular Layer if necessary
• convert it to a Smart Object
• add a Drop Shadow Layer Style to the image (do not use Global Angle)
• place the background image (File > Place …)
• move it behind the image layer
• Image > Reveal All
• make Selection from that layer’s transparency (cmd-click its icon in the Layers Panel) and use Image > Crop
• select and transform the image layer to fit the intended position
This would naturally work out best if the images had the same size and proportions.
For the reflection on the floor duplicate the image, flip it vertically, move it in position and reduce its opacity to maybe 10%.
Realistically you may have to hide it partially behind the pillows, a Vector Mask would be an option.

How to place multiple images of hand paintings with drop shadow effects on room backgrounds?

I want to place multiple images of hand paintings with drop shadow effects on room backgrounds to make them look as if the paintings are hanged on the room walls. I know how to do it one by one, but that takes time and I want to do it in batch at once.
I am quite a beginner for adobe photoshop CS6. I belive such an automated task is possible through 'Automated Batch' function and/or 'Create Droplet' function. Kindly share your expert opinion.

If you want to go with Batch I would recommend creating an Action of more or less these steps:
• set the resolution to the same as the background image’s
• change the image from Background Layer to regular Layer if necessary
• convert it to a Smart Object
• add a Drop Shadow Layer Style to the image (do not use Global Angle)
• place the background image (File > Place …)
• move it behind the image layer
• Image > Reveal All
• make Selection from that layer’s transparency (cmd-click its icon in the Layers Panel) and use Image > Crop
• select and transform the image layer to fit the intended position
This would naturally work out best if the images had the same size and proportions.
For the reflection on the floor duplicate the image, flip it vertically, move it in position and reduce its opacity to maybe 10%.
Realistically you may have to hide it partially behind the pillows, a Vector Mask would be an option.

Custom L&F with Shadow effect for Menus & Tooltips

Hai friends !
I want to design a custom look and feel with shadow effect for menus
and tooltips. Pls help me....
I tried following but..
i) Extended abstract border....
ii)Extends ColorUIResource to support "alpha"
iii)setOpaque(false) in installUI() method
Event hough I used transperent color for border the underlying color of
component is displaying at the corners.

I don't think there's anything you can do with the Tooltips, because the only methods I see that have to do with the tooltips are setTooltipText and getTooltipText..
But, you can do transparent borders, and here's some code that shows you how to do it. This doesn't do exactly what you want, but you should be able to get there.
import javax.swing.*;
import javax.swing.border.*;
import java.awt.*;
public class BorderTest extends JFrame {
   JPanel panel;
   JButton buttona;
   JButton buttonb;
   public BorderTest () {
      super("BorderTest");
      panel    = new JPanel();
      buttona = new JButton("TransBorder");
      buttonb = new JButton("NonTransBorder");
      getContentPane().add(panel);
      panel.setLayout(new GridLayout(0, 2));
      panel.add(buttona);
      panel.add(buttonb);
      panel.setBackground(Color.red);
      // these two buttons are both blue, but the one with the transparent
      // border ends up looking somewhat purple.
      buttona.setBorder(new TransBorder());
      buttonb.setBorder(new TransBorder(Color.blue));
      setDefaultCloseOperation(EXIT_ON_CLOSE);
      setBounds(0, 0, 300, 300);
   private class TransBorder extends AbstractBorder {
      Color transColor;
      public TransBorder() {
         super();
         transColor = new Color(0, 0, 255, 100); // transparent blue
      public TransBorder(Color c) {
         super();
         transColor = c;
      public Insets getBorderInsets(Component c) {
         return new Insets(3, 3, 3, 3);
      public Insets getBorderInsets(Component c, Insets i) {
         return getBorderInsets(c);
      public void paintBorder(Component c, Graphics g, int x, int y, int w, int h) {
         g.setColor(transColor);
         g.fillRect(x, y, w, h);
   public static void main(String[] args) {
      BorderTest bt = new BorderTest();
      bt.setVisible(true);
}Hope this helps.
Eric

Exporting a PDF for print, the PDF does not show a shadow effect

I have a drop shadow effect on an EPS object and some type that does not appear when I export the file as a PDF for print. The settings I have it set to are: Adobe PDF Preset: "High Quality Print", Interactive Elements: "Include Appearance", and Color Conversion: "No Color Conversion".
If anyone could help me I would greatly appreciate it!

Will,
Yes, I set my transparency blending space to CMYK. It didn't work.
I don't have a particular reason I am using an EPS over AI other than that's the type of file this object (logo) was saved as. I can get an AI. Is there any particular reason you recommend not using an EPS?

Shadow Effect for a Truck

Desperately looking for some expertise!
I need assistance in creating the shadow effect underneath a vehicle and its tires. I have hunted through as many books as I can find and even looked at the D&D in the current issue of Photoshop User but I'm having no luck (yes I am a novice)!
This is for an ad for a fire truck that I am doing for a national publication and I have to get it right! If this is really difficult can you suggest someone in Central New Jersey that may be able to assist.
Thank you,
Rich
ps: I am using CS3 on Windows XP.

G'day Rich
It might be an idea to look at some vehicle pictures to get an idea of the shape of your shadow.
You would then make a selection of the shape and put in on a seperate layer behind your vehicle picture. (vehicle picture would have to be cutout i.e. surrounded by transparency)
Then fill this selection with the colour of the shadow, this colour is often not grey but is best selected from the colour of a real shadow. Then blur it (filter > blur > gaussian blur) then add noise (filter > noise >) and finally change the blend mode of this layer to something like multiply, this effect will depend on the actual colour of the background you are using.
There are other ways to do this as always in Photoshop.
Sometimes the actual shape of your vehicle layer could be used to make the selection and then transformed but this doesn't always work.
If you could post a pic it might help to better advise.
My very first ad was also as a novice for a worlwide travel magazine! so good luck with this and don't be put off by unhelpful comments!
regards
John

Code for image shadow effect

Similar Messages

Maybe you are looking for