myCloudCode

Tagged: border RSS

• 

  Jay Kwong 1:55 am on July 8, 2010 Permalink
  Tags: :after (2), border, css3   

  Fancy Inset CSS Image Borders | Evan Byrne’ Writings 

  Before

  

  After

  
  
  

  The HTML Markup

  In a perfect world we would only use a single img tag with a class attribute. This is not a perfect world. Because the img tag does not support the CSS pseudo-element :after, we have to wrap our image in a span.

  <span class="fancy">< img src="dingo.jpg" /></span>

  The CSS

  The first step is to apply a simple reset to our span and img tags.

  span,img{padding:0;margin:0;border:0;}
  

  Next, we style the wrapper element.

  .fancy{
  position:relative;
  display:inline-block;
  font-size:0;
  line-height:0;
  }
  
  .fancy:after{
  position:absolute;
  top:1px;
  left:1px;
  bottom:1px;
  right:1px;
  border:1px solid rgba(255,255,255,0.5);
  outline:1px solid rgba(0,0,0,0.2);
  content:" ";
  }
  

   
• 

  Jay Kwong 6:32 am on January 22, 2010 Permalink | Reply
  Tags: -moz-border-image, -moz-border-radius (3), border, CSS (4)   

  border-image 

  

  

  div.border {
  border: 5px solid #feb515;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-image: url(border-image.png) 5 5 5 5 stretch;
  -webkit-border-image: url(border-image.png) 5 5 5 5 stretch;
  }
  

  via ZURB – Behind the Scenes: Building the New Visual Annotations.

   

  Reply Click here to cancel reply.

  Name (required)

  Email (required)

  Web Site