Jump to content


Photo
- - - - -

Css Outline Property

css customizations

Best Answer Danny , 02 December 2012 - 11:25 AM

Try something like this:

 

.widget-pad::before

Then use border dash,  that may work.

Go to the full post


  • Please log in to reply
5 replies to this topic

#1 jdbrasesco

jdbrasesco

    Advanced Member

  • Members

  • 63 posts
  • LocationSan Francisco, CA
  • Framework Version:DMS 2.0.4
  • Country: Country Flag

Posted 26 November 2012 - 07:45 AM

Hi,

I'm trying to add a stitched effect to my boxes using the css outline property. The site is

Please Login or Register to see this Hidden Content



I've used the following code:

Please Login or Register to see this Hidden Content


It works perfectly in Chrome and Safari, but the offset is not working in Firefox or IE. Any ideas?

Thanks,
J.D.

Attached Files



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 15702 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 26 November 2012 - 08:37 AM

Hi,

As far as I am aware the Outline property is added around elements, outside of borders and on top of content. You're attempting to use to inside the border, by using the offset, it wasn't really supposed to be used like this, in my opinion.

If you want this type of design, I would recommend you use an image for your border.

#3 jdbrasesco

jdbrasesco

    Advanced Member

  • Members

  • 63 posts
  • LocationSan Francisco, CA
  • Framework Version:DMS 2.0.4
  • Country: Country Flag

Posted 01 December 2012 - 06:25 AM

Thanks Danny but I don't really want to use images.  Does anyone know if it could be done as a second border with CSS pseudo-elements somehow?

 

Thanks,

J.D.



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 01 December 2012 - 06:03 PM

You're using Outline, and as Danny points out, that has some specific uses.

 

A more generic option would be

Please Login or Register to see this Hidden Content

See: 

Please Login or Register to see this Hidden Content



#5 Danny

Danny

    Is Awesome!

  • Moderators
  • 15702 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 02 December 2012 - 11:25 AM   Best Answer

Try something like this:

 

.widget-pad::before

Then use border dash,  that may work.


  • jdbrasesco likes this

#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 15702 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 02 December 2012 - 11:26 AM

Ah, nice you already did it!

 

Good job!







Also tagged with one or more of these keywords: css, customizations