Jump to content


Photo
- - - - -

Feature rounded corners and shadow

features rounded corners shadow

Best Answer James B , 17 May 2013 - 11:32 PM

Hi, ok downloaded safari and the inspector and had a play.

 

The following seems to work, I tried isolating some of the below to find the correct one, but it only seemed to take if they were all in place like they were in firebug - http://screencast.com/t/vvLkLmvp

 
.fset_height, #feature_slider .text-bottom .fmedia .fmedia-pad, #feature_slider .text-bottom .feature-pad, #feature_slider .text-none .fmedia .fmedia-pad {
-webkit-border-radius:20px;
}
Go to the full post


  • Please log in to reply
7 replies to this topic

#1 winemonkey

winemonkey

    Advanced Member

  • Members
  • 59 posts

Posted 17 May 2013 - 09:31 PM

I've see many topics on the subject but none seem to work.

 

I need to add rounded corners to all my feature sliders... I have a lot of them, so I'd prefer CSS than editing each of them in Photoshop. Right now I'm using this: #feature-area {border-radius: 10px;} It seems to work on the first slide only. 

Please Login or Register to see this Hidden Content

 

Also, is there a way to crank up the size of the shadow around the features?

 

Thank you,



#2 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 17 May 2013 - 10:42 PM

Hi there,

 

I've checked your site but all the slides are showing rounded corners from what I can see, have you managed to fix this?

 

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content



#3 winemonkey

winemonkey

    Advanced Member

  • Members
  • 59 posts

Posted 17 May 2013 - 10:46 PM

Seems to be a Safari only issue... Any suggestions?



#4 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 17 May 2013 - 10:56 PM

Hi there,

 

Try adding another line of code in addition to the one you have with the -moz- prefix.

 

eg: -moz-border-radius: 15px;

 

That should handle safari.



#5 winemonkey

winemonkey

    Advanced Member

  • Members
  • 59 posts

Posted 17 May 2013 - 11:05 PM

Just tried it... Didn't work. I guess I'll have to live with it.



#6 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 17 May 2013 - 11:32 PM   Best Answer

Hi, ok downloaded safari and the inspector and had a play.

 

The following seems to work, I tried isolating some of the below to find the correct one, but it only seemed to take if they were all in place like they were in firebug -

Please Login or Register to see this Hidden Content

Please Login or Register to see this Hidden Content



#7 winemonkey

winemonkey

    Advanced Member

  • Members
  • 59 posts

Posted 17 May 2013 - 11:37 PM

Just tested on iPad/iPhone, etc... with Safari. Works perfectly. Thank you.



#8 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 18 May 2013 - 12:10 AM

Excellent, you're welcome, glad it worked :-)







Also tagged with one or more of these keywords: features, rounded corners, shadow