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

good practice to css typografic

Via http://goo.gl/O4yzj

h1, h2, h3, h4, h5, h6 { line-height: 1.1; }
body { font: 16px/1.5 "Lucida Grande", Verdana, sans-serif }

iOS volume-style popup in Mobile Safari

preview: http://cl.ly/4AK4

<style>
div#popup {
        background-color: rgba(0,0,0,.5);
        border-radius: 10px;
        color: #ffffff;
        font-weight: bold;
        font-family: Arial;
        height: 160px;
        line-height: 50px;
        margin: 0 auto;
        text-align: center;
        text-shadow: 0px 1px 0px #000000;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        width: 160px;
}
</style>

<li id="toggle">
        <a href="#">button <!--activates the popup--> </a>
</li>

<div id="popup" style="display: none">Popup...</div> 

<!--popup script must be placed below the DIV--> 
<script> 
        $("#toggle").click(function () {
        $("#popup").fadeIn("fast");
        $("#popup").delay(3500).fadeOut();
});
</script> 
<!--/popup script-->

css hacks for everyone

.test {
     color: #000000; /* All Browsers */
     color: #FFF000\9; /* All IEs */
     *color: #FFFF00; /* IE6 and IE7 */
     color: #0000FF\0; /* Only IE8 */
     color: #00FFFF!important; /* Only IE7 */
     _color: #FF0000; /* Only IE6 */
     [color: #000000; /* Safari, Chrome */
}

color scrollbars for ie 5.5

body {
scrollbar-face-color: #hex; 
scrollbar-shadow-color: #hex; 
scrollbar-highlight-color: #hex; 
scrollbar-3dlight-color: #hex; 
scrollbar-darkshadow-color: #hex; 
scrollbar-track-color: #hex; 
scrollbar-arrow-color: #hex;
}

twitter-like input using css 3

textarea {  
	padding: 5px;  
	font-size: 15px;  
	text-shadow: 0px 1px 0px #fff;  
	outline: none;  
	-webkit-border-radius: 3px;  
	-moz-border-radius: 3px;  
	border-radius: 3px;  
	border: 1px solid #ccc;  
	-webkit-transition: .3s ease-in-out;  
	-moz-transition: .3s ease-in-out;  
}  

textarea:focus {  
	border: 1px solid #fafafa;  
	-webkit-box-shadow: 0px 0px 6px #007eff;  
	-moz-box-shadow: 0px 0px 5px #007eff;  
	box-shadow: 0px 0px 5px #007eff;  
}

minify css using php

<?php
function optimizeCSS($text) {
	$text = preg_replace('~/\*.*?\*/~s','',$text); // comments
	$text = preg_replace('/[\r\n\t]/','',$text); // newlines and tabs
	$text = preg_replace('/ *(;|\:|\{|\}) */','$1',$text); // space before/after colons, semicolons and braces
	$text = str_replace(';}','}',$text); // remove final semicolon
	$text = trim($text);
	return $text;
}
?>

iphone: prevent copy paste

* {
   -webkit-user-select: none;  /* prevent copy paste for all elements */
}

iPhone CSS

<link media="only screen and (max-device-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" />

hartija css print framework

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

body { 
width:100% !important;
margin:0 !important;
padding:0 !important;
line-height: 1.4;
word-spacing:1.1pt;
letter-spacing:0.2pt; font-family: Garamond,"Times New Roman", serif; color: #000; background: none; font-size: 12pt; }

h1,h2,h3,h4,h5,h6 { font-family: Helvetica, Arial, sans-serif; }
h1{font-size:19pt;}
h2{font-size:17pt;}
h3{font-size:15pt;}
h4,h5,h6{font-size:12pt;}

code { font: 10pt Courier, monospace; } 
blockquote { margin: 1.3em; padding: 1em;  font-size: 10pt; }
hr { background-color: #ccc; }

img { float: left; margin: 1em 1.5em 1.5em 0; }
a img { border: none; }

a:link, a:visited { background: transparent; font-weight: 700; text-decoration: underline;color:#333; }
a:link[href^="http://"]:after, a[href^="http://"]:visited:after { content: " (" attr(href) ") "; font-size: 90%; }
a[href^="http://"] {color:#000; }

table { margin: 1px; text-align:left; }
th { border-bottom: 1px solid #333;  font-weight: bold; }
td { border-bottom: 1px solid #333; }
th,td { padding: 4px 10px 4px 0; }
tfoot { font-style: italic; }
caption { background: #fff; margin-bottom:2em; text-align:left; }
thead {display: table-header-group;}
tr {page-break-inside: avoid;}

cross-browser transparency using css

.class {  
    filter:alpha(opacity=50);  
    -moz-opacity:0.5;  
    -khtml-opacity: 0.5;  
    opacity: 0.5;  
}

short css

body {
	background: #[hex-color] url([image URL]) [repeat] [attachment] [position];
}

p {
	font: [style] [variant] [weight] [size]/[line-height] [family], [family];
}

cool link effect with css

a {
	background-color:#fff;
	border-width:1px;
	border-style:solid;
	border-bottom-color:#aaa;
	border-right-color:#aaa;
	border-top-color:#ddd;
	border-left-color:#ddd;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	-webkit-box-shadow:2px 2px 2px #bbb;
	
	padding: 10px;
}
a:hover {
	border-top-color:#aaa;
	border-left-color:#aaa;
	border-right-color:#ddd;
	border-bottom-color:#ddd;
	-webkit-box-shadow:0 0 0;
}

typetees.com tshirt mouse over effect

http://www.typetees.com/

<html>
<head>
	<style>
		.tee_holder_small {
			background-position:-84px 0;
			background-repeat:no-repeat;
			height:183px;
			width:144px;	
		}
		#smallOverlayHolder{
			position:absolute;
			z-index:10;
			width:228px;
			height:312px;
			padding-left:84px;
			background-repeat:no-repeat;
		}
		#smallOverlayHolder a{
			display:block;
			width:144px;
			height:183px;
		}
	</style>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
	<script type="text/javascript">
		function toggleSmallTee(smallID,URL){
			var offset = $("#"+smallID).offset();
			$("#smallOverlayHolder").css("left",(offset.left-84)+"px");
			$("#smallOverlayHolder").css("top",(offset.top)+"px");
			$("#smallOverlayHolder").css("backgroundImage",$("#"+smallID).css("backgroundImage"));
			$("#smallOverlayHolder").html('<a href="'+URL+'" onmouseout="toggleSmallTee(\''+smallID+'\',\''+URL+'\')"></a>');
			$("#smallOverlayHolder").toggle();
		}
	</script>
</head>
<body>
	<div id="smallOverlayHolder" style="display:none;"></div>

	<div id="p1727" class="m_b_5 tee_holder_small" style="background-image:url(http://media.typetees.com//product/312x312/1727-tee_large.png)">
		<a href="/product/1727/Actually_medicine_is_the_best_medicine" onmouseover="toggleSmallTee('p1727','/product/1727/Actually_medicine_is_the_best_medicine')">
			<img src="http://media.typetees.com/imgs/tee_small_overlay.png" width="144" height="183" alt="Actually, medicine is the best medicine."/>
		</a>
	</div>
</body>
</html>

cross-browser rounded corners using css

ie sux (again)

border-radius: 9px; /* CSS 3 */
-o-border-radius: 9px; /* Opera */
-icab-border-radius: 9px; /* iCab */
-khtml-border-radius: 9px; /* Konqueror */
-moz-border-radius: 9px; /* Firefox */
-webkit-border-radius: 9px; /* Safari */

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

ie sux!

input { overflow: visible; }

CSS Horizontal And Vertical Align JQuery Plugin

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Demo</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

<script type="text/javascript">
(function ($) {
$.fn.vAlign = function() {
	return this.each(function(i){
	var h = $(this).height();
	var oh = $(this).outerHeight();
	var mt = (h + (oh - h)) / 2;	
	$(this).css("margin-top", "-" + mt + "px");	
	$(this).css("top", "50%");
	$(this).css("position", "absolute");	
	});	
};
})(jQuery);

(function ($) {
$.fn.hAlign = function() {
	return this.each(function(i){
	var w = $(this).width();
	var ow = $(this).outerWidth();	
	var ml = (w + (ow - w)) / 2;	
	$(this).css("margin-left", "-" + ml + "px");
	$(this).css("left", "50%");
	$(this).css("position", "absolute");
	});
};
})(jQuery);

$(document).ready(function() {
	$("#content").vAlign();
	$("#content").hAlign();
});
</script>

<style type="text/css">
html { background: #fafafa; }

#content
{
background: #fff;
border: 10px solid #eee;
padding: 20px;
color: #666;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 25px;
text-align: justify;
}

#content { width: 400px; }
</style>

</head>

<body>

<div id="content">
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. 
</div>

</body>
</html>

css clearfix

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

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

[css3] border-radius sample

http://www.css3.info/border-radius-apple-vs-mozilla/

.round-all {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.round-top {
    -webkit-border-top-right-radius:5px;
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius: 5px 5px 0 0;
     border-radius: 5px 5px 0 0;
}
.round-right {
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius:0 5px 5px 0;
     border-radius:0 5px 5px 0;
}
.round-bottom {
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius:0 0 5px 5px;
     border-radius: 0 0 5px 5px;
}
.round-left {
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius: 5px 0 0 5px;
     border-radius: 5px 0 0 5px;
}

remove the mac os x glowing blue outline for input fields

input:focus { outline: none; }

short css

div { margin: 10px 20px 30px 40px } /* top, right, bottom, left */

div { margin: 10px 20px 30px } /* top, left and right, bottom */

div { margin: 10px 20px } /* top and bottom, left and right */

div { margin: 10px } /* all four sides */
Displaying Code 1 - 20 of 25 in total