css code

Never been to DZone Snippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

« Newer Snippets

Older Snippets »

Showing 11-20 of 107 total

abbr formatting

haml (easily transformed to css) snippet to format abbrs in a proper manner - you can still type them in ALL CAPS, but they will be displayed in Titlecase and small-caps. If you're using this, you're probably also using a custom face via @font-face, so you might want to explicitly declare the small-caps and lowercase variants of the typeface - the browser often fucks up auto-small-caps.

also, not tested in internet explorer. nothing I write is.

abbr
  :display inline-block
  :text-transform lowercase
  :font-variant small-caps
  
  &:first-letter
    :text-transform uppercase

to ruby css design haml abbr by elliottcable on Mar 13, 2008

css properties reset

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

to css by caffo on Feb 25, 2008

Selector :target in CSS 3

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>CSS3 *:target</title>
	
	<style type="text/css" media="screen">
	
	h1:hover { text-decoration: underline; } /* CSS 1 et 2 */
	h1:target { background-color: #ff6600; } /* CSS 3 */
	
	</style>
</head>

<body>
	
	<h1 id="title-1">Title n°1</h1>
	<p>CSS...</p>
	<p>CSS...</p>
	<p>CSS...</p>
	<hr />
	
	<h1 id="title-2">Title n°2</h1>
	<p>CSS...</p>
	<p>CSS...</p>
	<p>CSS...</p>
	<hr />
	
	<p><a href="#title-1">Title n°1</a> | <a href="#title-2">Title n°2</a></p>
	
</body>
</html>

Source: AB-D.fr

to css xhtml css3 by ki4ngel on Feb 19, 2008

Position : fixed in MSIE6

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<title>"position: fixed" compatible Microsoft Internet Explorer 6</title>
	
	
	<!-- Code CSS for Firefox, Safari, Opera, Internet Explorer 7... -->
	
	<style type="text/css" media="screen">
		
	#fixed {
		position: fixed;
		left: 0; top: 0; right: 0;
		width: 100%;
		padding: 10px; background: gray;
	}
	
	</style>
	
	
	<!-- Code CSS for Internet Explorer 6 -->
	
	<!--[if lte IE 6]>
	<style type="text/css" media="screen">
	
	#fixed {
		position: absolute;
		top: expression((document.documentElement.scrollTop || document.body.scrollTop) + this.offsetHeight - this.offsetHeight);
	}
	
	</style>
	<![endif]-->
	
	
</head>

<body>
	
	<div id="fixed">DIV in position: fixed;</div>
	
	<p>Content...</p>
	<p>Content...</p>
	<p>Content...</p>
	<p>Content...</p>
	<p>Content...</p>
	<p>Content...</p>
	<p>Content...</p>
	<p>Content...</p>
	<p>Content...</p>
	<p>Content...</p>
	<p>Content...</p>
	<p>Content...</p>
	
</body>

</html>

Source: Asselin Benoit Developpement, conception de sites internet

to html css xhtml by ki4ngel on Feb 11, 2008

Make a variable CSS

Page.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	
	<title>Variable CSS</title>
	<link rel="stylesheet" type="text/css" href="style.php" />
</head>

<body>


<h1>Title</h1>

<p class="color-1"> Text  Text  Text  </p>

<p class="color-2"> Text  Text  Text  </p>

<p class="color-3"> Text  Text  Text  </p>


</body>

</html>

Style.php

<?php
header('Content-Type: text/css');

$color_0 = '#000000';
$color_1 = '#ff0000';
$color_2 = '#ff3300';
$color_3 = '#ff6600';

?>

* { font-family: sans-serif; }

h1 {
	padding: 5px;
	color: <?= $color_0 ?>;
	border: 5px solid <?= $color_2 ?>;
	background-color: <?= $color_3 ?>;
}

p.color-1 { color: <?= $color_1 ?>; }
p.color-2 { color: <?= $color_2 ?>; font-weight: bold; }
p.color-3 { color: <?= $color_3 ?>; font-style: italic; }

Source: Asselin Benoit Développement, création de site internet amiens

to html css php xhtml by ki4ngel on Feb 06, 2008

Blueprint CSS forms extension

Changes the widths of form elements so they fit into smaller columns created using the Blueprint CSS framework.

div.span-1 input.text, div.span-1 input.title { width:  30px; }
div.span-2 input.text, div.span-2 input.title { width:  50px; }
div.span-3 input.text, div.span-3 input.title { width:  90px; }
div.span-4 input.text, div.span-4 input.title { width: 130px; }
div.span-5 input.text, div.span-5 input.title { width: 170px; }
div.span-6 input.text, div.span-6 input.title { width: 210px; }
div.span-7 input.text, div.span-7 input.title { width: 250px; }
div.span-8 input.text, div.span-8 input.title { width: 290px; }

div.span-1 select { width:  30px; }
div.span-2 select { width:  50px; }
div.span-3 select { width:  90px; }
div.span-4 select { width: 130px; }
div.span-5 select { width: 170px; }

div.span-1  textarea { width:  30px; height:  25px; }
div.span-2  textarea { width:  50px; height:  50px; }
div.span-3  textarea { width:  90px; height:  75px; }
div.span-4  textarea { width: 130px; height: 100px; }
div.span-5  textarea { width: 170px; height: 125px; }
div.span-6  textarea { width: 210px; height: 150px; }
div.span-7  textarea { width: 250px; height: 175px; }
div.span-8  textarea { width: 290px; height: 200px; }
div.span-9  textarea { width: 330px; height: 225px; }
div.span-10 textarea { width: 370px; height: 250px; }

to css form blueprint by sporkyy on Jan 19, 2008

Adding CSS style to buttons

This HTML and CSS code shows how to customise buttons in a restful way. Source: http://particletree.com/features/rediscovering-the-button-element/

<div class="buttons">
    <button type="submit" class="positive">
        <img src="/images/icons/tick.png" alt=""/> 
        Save
    </button>

    <a href="/password/reset/">
        <img src="/images/icons/textfield_key.png" alt=""/> 
        Change Password
    </a>

    <a href="#" class="negative">
        <img src="/images/icons/cross.png" alt=""/>
        Cancel
    </a>
</div>

/* BUTTONS */

.buttons a, .buttons button{
    display:block;
    float:left;
    margin:0 7px 0 0;
    background-color:#f5f5f5;
    border:1px solid #dedede;
    border-top:1px solid #eee;
    border-left:1px solid #eee;

    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size:100%;
    line-height:130%;
    text-decoration:none;
    font-weight:bold;
    color:#565656;
    cursor:pointer;
    padding:5px 10px 6px 7px; /* Links */
}
.buttons button{
    width:auto;
    overflow:visible;
    padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
    padding:5px 10px 5px 7px; /* Firefox */
    line-height:17px; /* Safari */
}
*:first-child+html button[type]{
    padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
    margin:0 3px -3px 0 !important;
    padding:0;
    border:none;
    width:16px;
    height:16px;
}

Adding colour to the buttons - Colour is used like a traffic light system, green for go (positive), red for stop (negative, think about this for a moment), and blue which isn't a traffic light (neutral, a miscellaneous item)

/* STANDARD */

button:hover, .buttons a:hover{
    background-color:#dff4ff;
    border:1px solid #c2e1ef;
    color:#336699;
}
.buttons a:active{
    background-color:#6299c5;
    border:1px solid #6299c5;
    color:#fff;
}

/* POSITIVE */

button.positive, .buttons a.positive{
    color:#529214;
}
.buttons a.positive:hover, button.positive:hover{
    background-color:#E6EFC2;
    border:1px solid #C6D880;
    color:#529214;
}
.buttons a.positive:active{
    background-color:#529214;
    border:1px solid #529214;
    color:#fff;
}

/* NEGATIVE */

.buttons a.negative, button.negative{
    color:#d12f19;
}
.buttons a.negative:hover, button.negative:hover{
    background:#fbe3e4;
    border:1px solid #fbc2c4;
    color:#d12f19;
}
.buttons a.negative:active{
    background-color:#d12f19;
    border:1px solid #d12f19;
    color:#fff;
}

to html css style button by jrobertson on Jan 07, 2008

Embedded Fonts in Modules

How to use embedded fonts in modules and late-load the embedded font.
Save TrueType font file as ./Arial.ttf

@font-face {
        src:url("./Arial.ttf");
        font-family: myFont;
}

Application
{
	font-family: 	myFont;
	font-size: 	10px;
}

to css ActionScript flex by mako on Jan 05, 2008

Keeping the new contents of a growing list in view

The purpose of this code is to demonstrate how to keep the content at the bottom of a list always in view, similar to a chat window. Keywords: div, overflow, scroll, scrolltop. Reference: scrollTop Property http://snipr.com/1wdbn [msdn2.microsoft.com]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>scrolling div</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
    
    <style type="text/css">
      <!--
      body {background-color: #43d;}
      div#list  {background-color: #4e8;  overflow: scroll; width: 15em; height: 10em;}
      p.other_user {background-color: #af5;}
      p {background-color: #ed3;}
      -->
    </style>
    <script type="text/javascript">
      function addText() {
        olist = document.getElementById('list');
        op = document.createElement('p');
        op.innerHTML = 'hi';
        ocontent = document.getElementById('content');
        ocontent.appendChild(op);
        olist.scrollTop = olist.scrollHeight;
      }
    </script>
  </head>
  <body>
    <div id="toolbar"><input type="button" value="add text" onclick="addText()" /></div>
    <p>A simple chat style display</p>
    <div id="list">
      <div id="content">
      <p class="other_user">Good <strong>afternoon</strong> how are you?</p>
      <p class="other_user">hello?</p>
      <p class="other_user">is anybody there?</p>
      </div>
    </div>    
  </body>
</html>

to html javascript css scrolltop by jrobertson on Jan 02, 2008

iPhone Orientation

iPhoneOrientation
Demonstrates how to handle iPhone or iPod touch orientation events using HTML, CSS, and JavaScript.

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no" />
		<title>Handling iPhone or iPod touch Orientation Events</title> 
		
		<!-- The iPhoneOrientation.css file is used to adjust the page appearance -->
		<link rel="stylesheet" href="iPhoneOrientation.css" type="text/css" />
		
		<!-- The iPhoneOrientation.js file shows how to handle iPhone orientation events -->
		<script type="text/javascript" src="iPhoneOrientation.js"></script>
</head>
<body class="portrait">
		<!-- Display a message that describes the current iPhone orientation after rotation -->
		<div id="currentOrientation"></div>

		<!-- The container div is made of two inner divs: leftContainer and rightContainer. The leftContainer and rightContainer are stacked
				 up one above the other when iPhone is in portrait orientation and side by side when iPhone is in landscape orientation -->
		<div id="container">
			<!--The button class is used to build a rounded rectangle around each text -->
			<!--The page appearance changes whenever iPhone rotates between portrait and landscape display views -->
			<div id="leftContainer">
					<div class="button" onclick="window.location.href='http://developer.apple.com/documentation/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/chapter_10_section_1.html'">Debug Console</div>
					<div class="button" onclick="window.location.href='http://developer.apple.com/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/chapter_4_section_8.html'">Viewport Settings</div>
			</div>
			<div id="rightContainer">
					<div class="button" onclick="window.location.href='http://developer.apple.com/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/chapter_5_section_4.html'">Highlighting Elements</div>
					<div class="button" onclick="window.location.href='http://developer.apple.com/documentation/AppleApplications/Reference/SafariWebContent/DesigningForms/chapter_7_section_1.html'">Form Auto Correction</div>
			</div>
		</div>
	
</body>
</html>

iPhoneOrientation.css

body 
{
		margin: 0px;
		padding: 0px;
		font-size: 12px;
		font-family: 'Lucida Grande', Verdana, sans-serif;
		font-weight: bold;
		/* Turn off font resizing */
		-webkit-text-size-adjust: none;   
}



/* Set the background color of the page when the body tag's class attribute is equal to portrait. 
   The expression body[class="value"] is a CSS attribute selector where "body" is the html element to be styled, "class" the body's attribute to be
   manipulated, and "value" the class attribute's value, which is either portrait, landscapeLeft, or landscapeRight.
   This expression is used to dynamically select a body style according to the class attribute value. For instance, if the body's class attribute is set
   to landscapeLeft, then all style declarations matching body[class="landscapeLeft"] will be used to style "Handling iPhone or iPod touch Orientation Events". 
   The JavaScript updateOrientation function in the iPhoneOrientation.js file is used to set the body's class attribute to one of these values.
   Further information about CSS attribute selectors can be found at  http://www.w3.org/TR/css3-selectors/#attribute-selectors.
 */
body[class="portrait"] 
{
		background: white;    	
}


/* Adjust a button when the body's class attribute is equal to portrait */
body[class="portrait"] .button    
{	
		background: white;
		width: 210px;
		height: 13px;
		
		padding: 10px 0px;
		margin: 10px auto;
		
		font-size: 15px;
		
		/* text is black on the button */
		color: black;
}


/* The leftContainer and rightContainer div elements are stacked up one after the other when the body's class attribute is equal to portrait. 
   They are both 200 pixels wide. */
body[class="portrait"] #leftContainer
{
		width: 200px;
		margin: auto auto;
}


body[class="portrait"] #rightContainer
{
		width: 200px;
		margin: auto auto;
}


/* Set the background color of the page when the body's class attribute is set to landscapeLeft */
body[class="landscapeLeft"] 
{
		background: lightgrey;
}


/* Adjust a button when the body's class attribute is set to landscapeLeft */
body[class="landscapeLeft"] .button  
{
		background: black;
}


/* The container div is evenly split between leftContainer and rightContainer when the body's class attribute is set to landscapeLeft.
   leftContainer and rightContainer are stacked side by side. leftContainer aligns buttons to the left side of the page; 
   rightContainer aligns buttons to the right side of the page. */
body[class="landscapeLeft"] #leftContainer
{
		width: 50%;
		/* Align the div to the left of the page  */
		float: left;
}


body[class="landscapeLeft"] #rightContainer
{
		width: 50%;
		/* Align the div to the right of the page  */
		float: right;
}



/* Set the background color of the page when the body's class attribute is equal to landscapeRight */
body[class="landscapeRight"] 
{
		background: tan;
}


/* Adjust a button when the body's class attribute is equal to landscapeRight */
body[class="landscapeRight"] .button  
{
		background: darkred;
}


/* The container div is evenly split between leftContainer and rightContainer when the body's class attribute is set to landscapeRight.
   leftContainer aligns buttons to the left side of the page; rightContainer aligns buttons to the right side of the page. */
body[class="landscapeRight"] #leftContainer
{
		width: 50%;
		float: left;
}

body[class="landscapeRight"] #rightContainer
{
		width: 50%;
		float: right;
}


/* Draw a rounded rectangle around a text */
 .button    
{
		font-weight: bold;
		text-align: center;
		
		width: 130px;
		height: 13px;
		font-size: 10px;
		
		/* text is white on the button */
		color: white;	
	
		/* Draw a rectangle around a text */
		border: 1px solid black;    
		
		/* Round each corner of the generated rectangle */
		-webkit-border-radius: 5px;   
		padding: 5px 0px;
		margin: 5px auto;
}


/* Defines styling properties for the currentOrientation div, which shows a message that indicates iPhone's current orientation after rotation */
#currentOrientation
{		
		width: 280px;
		text-align: center;
		margin: 10px auto;
}


a
{
		text-decoration: none;
}


/* The container div contains four buttons that are evenly divided between the inner leftContainer and rightContainer div elements.
   Its width does not change when iPhone switches between portrait and landscape orientations. */
#container
{
		/* fixed width across all iPhone orientation changes */
		width: 300px;
		margin: 10px auto;
}

iPhoneOrientation.js

/* updateOrientation checks the current orientation, sets the body's class attribute to portrait, landscapeLeft, or landscapeRight, 
   and displays a descriptive message on "Handling iPhone or iPod touch Orientation Events".  */
function updateOrientation()
{
	/*window.orientation returns a value that indicates whether iPhone is in portrait mode, landscape mode with the screen turned to the
	  left, or landscape mode with the screen turned to the right. */
	var orientation=window.orientation;
	switch(orientation)
	{
	
		case 0:
				/* If in portrait mode, sets the body's class attribute to portrait. Consequently, all style definitions matching the body[class="portrait"] declaration
				   in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
				document.body.setAttribute("class","portrait");
				
				/* Add a descriptive message on "Handling iPhone or iPod touch Orientation Events"  */
				document.getElementById("currentOrientation").innerHTML="Now in portrait orientation (Home button on the bottom).";
				break;	
				
		case 90:
				/* If in landscape mode with the screen turned to the left, sets the body's class attribute to landscapeLeft. In this case, all style definitions matching the
				   body[class="landscapeLeft"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
				document.body.setAttribute("class","landscapeLeft");
				
				document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the left (Home button to the right).";
				break;
		
		case -90:	
				/* If in landscape mode with the screen turned to the right, sets the body's class attribute to landscapeRight. Here, all style definitions matching the 
				   body[class="landscapeRight"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
				document.body.setAttribute("class","landscapeRight");
				
				document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the right (Home button to the left).";
				break;
	}

}

// Point to the updateOrientation function when iPhone switches between portrait and landscape modes.
window.onorientationchange=updateOrientation;