Jump to content


Photo
- - - - -

Adding a custom border, with inner shadow to frame features.


  • Please log in to reply
6 replies to this topic

#1 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 15 December 2011 - 04:42 PM

Hi everyone, I've created in photoshop a border with some shadowing on the inside edge to frame the feature slider (the file has been saved as png). Obviously for this to show it will have to be overlayed on the featured slider, the same as the text area is. Can anyone help me with the css to actually make this happen? I've got so far and then hit a wall... I'm in the early stages of learning CSS. Thanks in advance J

#2 Jenny

Jenny

    Owned by PageLines

  • Unicorn Store Dev

  • 2917 posts
  • LocationWV
  • Country: Country Flag

Posted 15 December 2011 - 05:32 PM

You would have to provide us with a link to your site with the feature active as well as a link to the uploaded photo, then we can attempt to help with CSS. I haven't done anything like that before but would love to try to figure it out. ;)

#3 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 16 December 2011 - 04:15 PM

Hi Jenny, thanks for your reply. I've not actually got the site online at the moment, its on my local machine so will try get it uploaded. An example of this feature slider effect though is on this website.

Please Login or Register to see this Hidden Content

When you look at the PSD files the feature has a image attached to it, which is an empty frame saved as a PNG with a slight shadow on the inside edge. This is overlayed on to of the feature. Looking at there live preview in firefox the code that I can see is the following;

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 16 December 2011 - 04:53 PM

Please Login or Register to see this Hidden Content

<- This is the overlay image, which is added after the img tag for the slide image. I'm not sure how this is being implemented to go on top of the slide image and I'm sure there is much more to their coding, but on your site perhaps it is possible with CSS that can position the overlay image directly on top of the slide. Example:

Please Login or Register to see this Hidden Content


This will require a lot of tweaking.

#5 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 18 December 2011 - 05:04 PM

Hi Catrina, thanks for your response. Thats a shame, I didn't realise it would be so difficult to put into effect. I've tried the CSS you've suggested and unfortunately it didn't work. I'll have a look into it and see if I can find any other ways to implement it, if I do I'll let you know. Thanks J

#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 18 December 2011 - 05:22 PM

This probably the last alternative: If your entire slider is just going to be a background image, you can add that overlay on top of the image in Photoshop and make it work that way.

#7 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 18 December 2011 - 05:34 PM

Hi Catrina, I've just found out that the slider used in that example was a JQuery slider, custom built. I'll have to add Jquery to my list of "things to learn", thanks for all your help though, I will probably go for the easy option and add it to the PSD file like you said.