Tutorials, scripts, templates and tips » CSS http://www.bloggpro.com Excel, Wordpress, MS Office tips, CSS, PHP, MySQL scripting and web publishing Sun, 21 Aug 2011 05:45:09 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Smart CSS trick to add icon to all outgoing links http://www.bloggpro.com/smart-css-trick-to-add-icon-to-all-outgoing-links/ http://www.bloggpro.com/smart-css-trick-to-add-icon-to-all-outgoing-links/#comments Mon, 15 Jun 2009 07:30:28 +0000 Jesper http://www.bloggpro.com/smart-css-trick-to-add-icon-to-all-outgoing-links/ Continue reading →]]> Use this piece of CSS to add an icon to all links that is not to mydomain

a:not([href*="mydomain"]) {

 padding-right: 10px;

 background: transparent url("images/aoutside.gif") center right no-repeat;



}

Alternatively, you can use this one to mark all links that start with ‘http://‘

a[href^="http"] {

padding-right: 10px;

background-image: url(external.gif);

background-position: right !important;

background-repeat: no-repeat;

}
]]> http://www.bloggpro.com/smart-css-trick-to-add-icon-to-all-outgoing-links/feed/ 0 Really simple rounded corners with CSS http://www.bloggpro.com/really-simple-rounded-corners-with-css/ http://www.bloggpro.com/really-simple-rounded-corners-with-css/#comments Thu, 24 Jan 2008 10:04:55 +0000 Jesper http://www.bloggpro.com/really-simple-roundes-corners-with-css/ Continue reading →]]> I’ve been looking for a long time for a solution to produce the oh so popular rounded corners on my DIV elements and finally I found what I was looking for over at A list apart where Dan Cederholm describes his take on the issue of rounded corners. The solution he presents are decievingly simple in it’s approach, and surprisingly flexible in its application.

The design uses two transparent gif masks (easily created in for example GIMP) and  a short, organized CSS:

dl {
width: 240px;
margin: 0 0 20px 20px;
background: #999 url(box_bottom.gif) »
no-repeat bottom left;
} dt {
margin: 0;
padding: 10px;
background: #999 url(box_top.gif) »
no-repeat top left;
}

dd {
margin: 0;
padding: 10px;
}
I’ve just tested this but will toy around with it to see how much can be squeezed out of the technique (I think quite a lot).

]]> http://www.bloggpro.com/really-simple-rounded-corners-with-css/feed/ 0