Http  _css-tricks
Upcoming SlideShare
Loading in...5
×
 

Http _css-tricks

on

  • 267 views

 

Statistics

Views

Total Views
267
Views on SlideShare
267
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Http  _css-tricks Http _css-tricks Document Transcript

  • CSS-TricksA Web Design Community curated by Chris CoyierSearch... Go!Search... Go!Search... Go!Search... Go!Search: All Articles Forums SnippetsOr... browse the archivesHome•Forums•Videos•Downloads•Snippets••Using CSS for Image BordersBy: Guest Author on 3/20/2008The following is a Guest Post written by Volkan Görgülü. Thanks Volkan!The picture used in this article, The Solitude of the Fisherman, is from Daniel Cheong. I havecome across with this picture in an article at Smashing Magazine.Generally when we put borders around our images, as you can see in the example below, they makethe image look more appealing. They make the image stand out from the other content on the page.Without Border:Page 1 of 13Using CSS for Image Borders | CSS-Tricks8/17/2010http://css-tricks.com/using-css-for-image-borders/
  • With Border:With a “Double Border“:Page 2 of 13Using CSS for Image Borders | CSS-Tricks8/17/2010http://css-tricks.com/using-css-for-image-borders/
  • Like I did in the above pictures, you can easily achieve this look with using image editingapplications like Photoshop, ImageReady or Fireworks. But lets think of a scenario in which youneed to change the look of your website and the previous border color you used around yourimages doesn’t fit with your new design. You will need to open up your images one by one andreplace that border. If you have 3 or 4 images it will take minutes, but think of having 50 or moreimages…You can achieve the same effect very easily with using pure CSS and it will take you seconds tochange the color of the borders in the future.How to do it?Simple thin border:img {border:1px solid #021a40;}The “Double Border”:img {padding:1px;border:1px solid #021a40;}Double Border with different inside border color:Page 3 of 13Using CSS for Image Borders | CSS-Tricks8/17/2010http://css-tricks.com/using-css-for-image-borders/
  • img {padding:1px;border:1px solid #021a40;background-color:#ff0;}Another advantage of this techniqueSince we usually decrease the quality of the images for web (optimization), when you zoom to thepictures with borders you will notice that the color of the border is distorted. Now I will use alighter blue to let you see the distortion obviously. The left image’s borders is from CSS and theright one is from the image itself.EXAMPLE PAGEWhile we are on the subject of image borders, check out some of the cool features CSS3 has instore with the border-image property.0WordPress DevelopmentWPCoder - A different kind of WordPress outsourcing.Invoicing for FreelancersStart saving time and looking professional with a FREE account from FreshBooks.ads by BSAPage 4 of 13Using CSS for Image Borders | CSS-Tricks8/17/2010http://css-tricks.com/using-css-for-image-borders/
  • Page 5 of 13Using CSS for Image Borders | CSS-Tricks8/17/2010http://css-tricks.com/using-css-for-image-borders/
  • 0 featured!9 Responses0 buried (show)1.Expertsforge says:03/23/2008 at 11:22 pmSo far, I used to achieve the double borders using photoshop editing.. Now it is easier withCSS. Good article.2.Volkan Görgülü says:03/24/2008 at 3:27 pmI’m glad, it helped.3.Jermayn says:03/24/2008 at 9:04 pmCSS is easier than psd editing. I like adding a background to the image so you get a doubleborder effect. (more hear)4.Joe says:10/03/2008 at 4:59 pmPage 6 of 13Using CSS for Image Borders | CSS-Tricks8/17/2010http://css-tricks.com/using-css-for-image-borders/
  • Chris – thanks for your website. I enjoy reading it! I have a question though on img borders.if you see my webpage i am trying to put an rss image to my flickr rss feed but it keepscoming up with the stinking border around it. How do i fix this? I dont know how to havetext and img on the same line so i put it in a table. Anyway – what div class or css commanddo i need to input to get rid of the border?flickrss a img {border:0px solid #fff;color:#fff;text-decoration:none;margin:6px;float:right;But the flickrss div is inside the flickr div. Im not too sure how to do a subdiv.thanks!-Joe!5.RocknMetal says:10/03/2008 at 9:03 pmHi, I can’t seem to get this code to work in IE7 (or 6 for that matter) but works great in FF.There must be a required IE switch missing. Any ideas?.imageBorder {padding:7px;background-color:#F5F4F2;border:1px solid #c8c8c7;float:middle;margin: 5px;}6.Page 7 of 13Using CSS for Image Borders | CSS-Tricks8/17/2010http://css-tricks.com/using-css-for-image-borders/
  • Lia Moretti says:10/16/2008 at 7:12 amI ran into this page while trying to fix the same problem as RocknMetal, above. It just doesn’twork in IE. Do you have a trick for that? Thanks anyway.7.Guest says:11/11/2008 at 2:26 pmIndeed I used to do this with photoshop too. Great article Volkan, thanks.This comment thread is closed. If you have important information to share, you can alwayscontact me.ExploreHave you yoursharp-edged axes?Featured•Core Concepts•jQuery Tutorials•Classics•Creating a Web App from Scratch•Full Page Background Images•Designing for WordPress•Build Your Own Social Home!•Absolute Positioning Inside Relative Positioning•PSD to HTML from p2h.comHot offer: Start at $99, through August 31, 2010 ads by BSAPage 8 of 13Using CSS for Image Borders | CSS-Tricks8/17/2010http://css-tricks.com/using-css-for-image-borders/
  • IE CSS Bugs Thatll Get You Every Time•404 Best Practices•Date Display with Sprites•The VERY Basics of HTML & CSS•Classes and IDs•The CSS Box Model•All About Floats•CSS Overflow Property•CSS Font Size - (px - em - % - pt - keyword)•CSS Transparency / Opacity•CSS Sprites•CSS Image Replacement•CSS Vertial Align•Basic Explanations of Positioning•Anything Slider jQuery Plugin•Moving Boxes•Simple jQuery Dropdowns•Featured Content Slider•Start/Stop Slider•Banner Code Displayer Thing•Highlight Certain Number of Characters•Auto-Moving Parallax Background•Top Designers CSS Wishlist•What Beautiful HTML Code Looks Like•Easily Password Protect a Website or Subdirectory•IE-Only Stylesheets•eCommerce Considerations•PHP: Build Your First CMS•BuySellAds.com OnlineAdvertisingJoin over 1,000 high quality advertiserswho advertise across 750 successfulwebsites, and take control of your adspace!BuySellAds.com OnlineAdvertisingJoin over 1,000 high quality advertiserswho advertise across 750 successfulwebsites, and take control of your adspace!ads by BSAPage 9 of 13Using CSS for Image Borders | CSS-Tricks8/17/2010http://css-tricks.com/using-css-for-image-borders/
  • VoteQuestion Contention Query Debate Quandry DisputeLets say you were writing some text-only documentation. Which sentence isclearest?• Select a user and then click the Update button.• Select a user and then press the Update button.• Select a user and then choose the Update button.• Select a user and then click Update.• Select a user and then press Update.• Select a user and then choose Update.• Select a user and Update.Vote View Results Loading ...Frequently Asked QuestionsSo impatient, full of action, full of manly pride and friendshipWhere can I learn the very basics?•What books do you recommend?•How do you run IE on Mac?•Why is the text selection background color orange on this site?•How do you get those spaces in your Dock?•Page 10 of 13Using CSS for Image Borders | CSS-Tricks8/17/2010http://css-tricks.com/using-css-for-image-borders/
  • Blog RollAll the hands of comrades clasping, all the Southern, all the NorthernSmashing Network•Digging Into WP•Quotes on Design•Smashing NetworkUseful and Free Pictogram Dingbat Fonts1.speckyboy.comColor Stream: a Free iPhone App For Web Designers2.smashingmagazine.comAn Introduction to Split Testing in WordPress3.net.tutsplus.comRecession Survival Tips For Online Businesses4.smashingmagazine.comAdvantages Of Collective Collaboration in Online Art Collectives5.psd.tutsplus.comGestalt Principles Applied in Design6.sixrevisions.comUser Experience Books for Beginners7.uxbooth.comShow Markup in CSS Comments8.css-tricks.comWhat’s the Single Best Thing You’ve Ever Done for Your Freelancing Biz?9.freelancefolder.comGiving Users Credit10.designinformer.com•Terry Acker•Douglas Adams•Peter Gabriel•Oscar Wilde•Jeff Atwood•William Childs•Salvador Dali•Page 11 of 13Using CSS for Image Borders | CSS-Tricks8/17/2010http://css-tricks.com/using-css-for-image-borders/
  • Shane Meendering•John Carmack•Melinda Santillian•Delay Loading of Print CSS•Digg Technical Talks – Rasmus Lerdorf•Randomized Grid of Posts•Easy Comment Management via SQL•Using Menus in WordPress 3.0•WordPress Update: 3.0.1•WordPress E-Junkie Plugin•DiW v3.0 Book News•Thumbnail Based Archives•Optimizing WordPress Permalinks•Mad PropsAll the forms and shows, all the workmen at their work•Fonts by Typekit•Hosting by Media Temple•CDN by NetDNA•CMS by WordPress* This website may or may notThis website may or may notThis website may or may notThis website may or may not contain any actual CSS or Tricks.contain any actual CSS or Tricks.contain any actual CSS or Tricks.contain any actual CSS or Tricks.  I work for...Wufoo is an online form builder that makes building even the most complex forms so easy, its fun!Book I co-authored...Digging Into WordPress is a book and blog I co-author with Jeff Starr about the worlds #1publishing platform.Page 12 of 13Using CSS for Image Borders | CSS-Tricks8/17/2010http://css-tricks.com/using-css-for-image-borders/
  • Words I collect...Quotes on Design is a collection of design related quotes. With an API for your integration ideas!About the AuthorChris Coyier is a web designer living in Tampa, FL. He loves old time fiddle music, episodictelevision, building little useful websites, and tech books. You may contact him.Delicious Twitter Flickr Forrst Facebook GroovesharkSubscribe!Articles Feed•Snippets Feed•Posts by Email•Forums Feed•iTunes Large•iTunes Mobile•Screencast Large•Screencast Mobile•Page 13 of 13Using CSS for Image Borders | CSS-Tricks8/17/2010http://css-tricks.com/using-css-for-image-borders/