you are in: codestacker → codes [RSS] → tag: css [RSS]

iPhone CSS Delicious Email

show/hide lines
   1  <link media="only screen and (max-device-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" />
created by leozera — 22 August 2009 — get a short url — tags: css iPhone — embed

hartija css print framework Delicious Email

http://code.google.com/p/hartija/

show/hide lines
   1  body { 
   2  width:100% !important;
   3  margin:0 !important;
   4  padding:0 !important;
   5  line-height: 1.4;
   6  word-spacing:1.1pt;
   7  letter-spacing:0.2pt; font-family: Garamond,"Times New Roman", serif; color: #000; background: none; font-size: 12pt; }
   8  
   9  h1,h2,h3,h4,h5,h6 { font-family: Helvetica, Arial, sans-serif; }
  10  h1{font-size:19pt;}
  11  h2{font-size:17pt;}
  12  h3{font-size:15pt;}
  13  h4,h5,h6{font-size:12pt;}
  14  
  15  code { font: 10pt Courier, monospace; } 
  16  blockquote { margin: 1.3em; padding: 1em;  font-size: 10pt; }
  17  hr { background-color: #ccc; }
  18  
  19  img { float: left; margin: 1em 1.5em 1.5em 0; }
  20  a img { border: none; }
  21  
  22  a:link, a:visited { background: transparent; font-weight: 700; text-decoration: underline;color:#333; }
  23  a:link[href^="http://"]:after, a[href^="http://"]:visited:after { content: " (" attr(href) ") "; font-size: 90%; }
  24  a[href^="http://"] {color:#000; }
  25  
  26  table { margin: 1px; text-align:left; }
  27  th { border-bottom: 1px solid #333;  font-weight: bold; }
  28  td { border-bottom: 1px solid #333; }
  29  th,td { padding: 4px 10px 4px 0; }
  30  tfoot { font-style: italic; }
  31  caption { background: #fff; margin-bottom:2em; text-align:left; }
  32  thead {display: table-header-group;}
  33  tr {page-break-inside: avoid;}
created by leozera — 04 August 2009 — get a short url — tags: css print — embed

cross-browser transparency using css Delicious Email

show/hide lines
   1  .class {  
   2      filter:alpha(opacity=50);  
   3      -moz-opacity:0.5;  
   4      -khtml-opacity: 0.5;  
   5      opacity: 0.5;  
   6  }
created by leozera — 21 June 2009 — get a short url — tags: css — embed

short css Delicious Email

show/hide lines
   1  body {
   2  	background: #[hex-color] url([image URL]) [repeat] [attachment] [position];
   3  }
   4  
   5  p {
   6  	font: [style] [variant] [weight] [size]/[line-height] [family], [family];
   7  }
created by leozera — 10 May 2009 — get a short url — tags: css — embed

cool link effect with css Delicious Email

show/hide lines
   1  a {
   2  	background-color:#fff;
   3  	border-width:1px;
   4  	border-style:solid;
   5  	border-bottom-color:#aaa;
   6  	border-right-color:#aaa;
   7  	border-top-color:#ddd;
   8  	border-left-color:#ddd;
   9  	border-radius:3px;
  10  	-moz-border-radius:3px;
  11  	-webkit-border-radius:3px;
  12  	-webkit-box-shadow:2px 2px 2px #bbb;
  13  	
  14  	padding: 10px;
  15  }
  16  a:hover {
  17  	border-top-color:#aaa;
  18  	border-left-color:#aaa;
  19  	border-right-color:#ddd;
  20  	border-bottom-color:#ddd;
  21  	-webkit-box-shadow:0 0 0;
  22  }
created by leozera — 01 May 2009 — get a short url — tags: css — embed

cross-browser rounded corners using css Delicious Email

ie sux (again)

show/hide lines
   1  border-radius: 9px; /* CSS 3 */
   2  -o-border-radius: 9px; /* Opera */
   3  -icab-border-radius: 9px; /* iCab */
   4  -khtml-border-radius: 9px; /* Konqueror */
   5  -moz-border-radius: 9px; /* Firefox */
   6  -webkit-border-radius: 9px; /* Safari */
created by leozera — 14 March 2009 — get a short url — tags: css — embed

fixing the ridiculous auto-padding in ie (win) submit buttons Delicious Email

ie sux!

show/hide lines
   1  input { overflow: visible; }
created by leozera — 14 March 2009 — get a short url — tags: browser css hack ie — embed

CSS Horizontal And Vertical Align JQuery Plugin Delicious Email

from: http://www.nealgrosskopf.com/tech/thread.asp?pid=37

show/hide lines
   1  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2  <html>
   3  <head>
   4  <title>Demo</title>
   5  
   6  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   7  
   8  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
   9  
  10  <script type="text/javascript">
  11  (function ($) {
  12  $.fn.vAlign = function() {
  13  	return this.each(function(i){
  14  	var h = $(this).height();
  15  	var oh = $(this).outerHeight();
  16  	var mt = (h + (oh - h)) / 2;	
  17  	$(this).css("margin-top", "-" + mt + "px");	
  18  	$(this).css("top", "50%");
  19  	$(this).css("position", "absolute");	
  20  	});	
  21  };
  22  })(jQuery);
  23  
  24  (function ($) {
  25  $.fn.hAlign = function() {
  26  	return this.each(function(i){
  27  	var w = $(this).width();
  28  	var ow = $(this).outerWidth();	
  29  	var ml = (w + (ow - w)) / 2;	
  30  	$(this).css("margin-left", "-" + ml + "px");
  31  	$(this).css("left", "50%");
  32  	$(this).css("position", "absolute");
  33  	});
  34  };
  35  })(jQuery);
  36  
  37  $(document).ready(function() {
  38  	$("#content").vAlign();
  39  	$("#content").hAlign();
  40  });
  41  </script>
  42  
  43  <style type="text/css">
  44  html { background: #fafafa; }
  45  
  46  #content
  47  {
  48  background: #fff;
  49  border: 10px solid #eee;
  50  padding: 20px;
  51  color: #666;
  52  font-family: Arial, Helvetica, sans-serif;
  53  font-size: 12px;
  54  line-height: 25px;
  55  text-align: justify;
  56  }
  57  
  58  #content { width: 400px; }
  59  </style>
  60  
  61  </head>
  62  
  63  <body>
  64  
  65  <div id="content">
  66  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu dui eget nulla condimentum gravida. Vivamus erat leo, ultricies quis, gravida a, fringilla eu, urna. Pellentesque a mauris ac nisl semper egestas. Pellentesque ut elit in pede mattis gravida. Donec ac lectus a nisi suscipit placerat. Maecenas quis ipsum. Pellentesque mattis tellus. Suspendisse sollicitudin accumsan tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed metus. Quisque et leo at erat rutrum lobortis. In tempus lectus eget ligula convallis tristique. 
  67  </div>
  68  
  69  </body>
  70  </html>
created by leozera — 25 February 2009 — get a short url — tags: css javascript jquery vertical — embed

css clearfix Delicious Email

“The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow”

http://www.webtoolkit.info/css-clearfix.html

show/hide lines
   1  .clearfix:after {
   2      content: ".";
   3      display: block;
   4      clear: both;
   5      visibility: hidden;
   6      line-height: 0;
   7      height: 0;
   8  }
   9  
  10  .clearfix {
  11      display: inline-block;
  12  }
  13  
  14  html[xmlns] .clearfix {
  15      display: block;
  16  }
  17  
  18  * html .clearfix {
  19      height: 1%;
  20  }
created by leozera — 18 November 2008 — get a short url — tags: css — embed
Displaying records 1 - 10 of 18