Css

From ThaiiS Note (Wiki)

(Redirected from Css3)

Image hover

.fine-event-box a:link img ,.fine-event-box a:visited img  {
	border: 4px solid #EEE;
}
.fine-event-box a:hover img ,.fine-event-box a:active img  {
	border: 4px solid #333;
}

Blockquotes

Other

ie6

css3

Tips

image vertical center

http://www.brunildo.org/test/img_center.html

.art-thumb2 {
	height: 380px;
	width: 180px;
	background-color: #960;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

.wraptocenter * {
    vertical-align: middle;
}
/* IE/Mac \*//*/
* html .wraptocenter {
	display: block;
	line-height: 0.6;
}
* html .wraptocenter span {
	display: inline-block;
	height: 100%;
	width: 1px;
}
/**/

<!--[if lt IE 8]><style>
.wraptocenter span {
	display: inline-block;
	height: 100%;
}

box shadows

 box-shadow: 0 0 8px #1e1e1e;
  -moz-box-shadow: 0 0 8px #1e1e1e;
  -webkit-box-shadow:0 0 8px #1e1e1e;

ie

filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);

border-radius

	
border: 6pt solid #E7E7E7;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-khtml-border-radius: 6px;

Custom Web Fonts with @Font-Face

@font-face {
font-family:'Anivers';
src: url('/images/Anivers.otf') format('opentype');
}

h1 { font-family: ‘Anivers’, Helvetica, Sans-Serif;

background-size

background-image: url(bg-image.png);
-moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% 100%;           /* Opera 9.5 */
-webkit-background-size: 100% 100%;           /* Safari 3.0 */
-khtml-background-size: 100% 100%;           /* Konqueror 3.5.4 */

z-index

The problem is a bug in IE which does not render z-index properly all of the time. If you just use z-index: XXX and do not have a position tag, then it does not work. By adding “position: relative” or “position: absolute”

http://aplus.rs/lab/z-pos/index.php

text button

.button {
	padding-left: 8px;
	display: inline-block;
	margin-right: 5px;
	background: url('button_left.jpg') top left no-repeat;
	text-decoration: none;
	color:#FFF;
}

.button span {
	color: #CCC;
	display: block;
	background: url('button_right.jpg') top right no-repeat;
	font-size: 11px;
	padding-top: 2px;
	padding-right: 10px;
	padding-bottom: 2px;
	padding-left: 2px;
	cursor: pointer;
	cursor: hand;
	font-weight: bold;
}

usage

<span class="button"><span>Button Name</span></span>

submit button

.artbutton {
	background: url('button.jpg') top right no-repeat;
	width: 139px;
	height: 25px;
	color: #333;
	border: none;
	cursor: pointer;
	cursor: hand;
	
}

<input name="" type="button"  class="artbutton"/>

cursor

	cursor: default;
	cursor: 	pointer;

Jquery

$("#shop-map").mouseover(function(){  // if on this (mouseover) event 
$("#shop-map").css({"cursor" : "default" }); // Do this			
$("#shop-map").css({"cursor" : "pointer" }); // Do this		
$("#shop-map").css({"background-image" : "url(http://thaiorientalbeauty.com/wp-content/themes/thaiis/images/shop-inside-over_02.jpg)" }); // Do this
}); // close over event

Dev full browser area

#fullscreen {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}

opacity

#some_id {
    filter:alpha(opacity=70); //ie
    -moz-opacity:0.7; // old  FF
    -khtml-opacity: 0.7; // old Safari
    opacity: 0.7; // new css stand FF safari opera
    }

Search CSS

examples-of-web-forms

http://sixrevisions.com/user-interface/25-stylish-examples-of-web-forms/ http://www.queness.com/post/821/25-stylish-and-outstanding-login-forms

Transparent iframe

<iframe src="yourpage.html" name="myframe" width="250" height="250" frameborder="0" allowtransparency="true"></iframe>

<style type="text/css">
Body { Background: transparent; }
</style>

center window

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px; /*haft h*/
  margin-left: -100px; /*haft w*/
}

menu text no warp

.navigation ul li {
	display: inline;	
}
.navigation ul li a {
white-space: nowrap;
}

image middle div

.pda {
	height: 130px;
	width: 240px;
	position: relative;
}
.pda img {
position:absolute;top:0;bottom:0;margin:auto;
}

Css