Archive for the ‘CSS’ Category

« Older Entries
Newer Entries »

CSS: Box Shadow on Chrome, Firefox, WebKit, IE7, IE8

Thursday, November 11th, 2010 
.shadow {
	-moz-box-shadow: 3px 3px 4px #000;
	-webkit-box-shadow: 3px 3px 4px #000;
	box-shadow: 3px 3px 4px #000;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

Source: http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/

Posted in CSS | No Comments »

CSS: item / row selectors nth-child(odd) and first-child

Wednesday, November 10th, 2010

Highlight first item

tr:first-child{
	background: #ddddff;
}

Highlight odd items

tr:nth-child(odd){
	background: #e0e0e0;
}
Note: Works on any html element

Posted in CSS | No Comments »

CSS: iPad / iPhone Back button in CSS3

Saturday, September 18th, 2010

HTML

<button href="#" class="back"><span></span>Back</button>

CSS

.button {
	color: #fff;
	text-decoration: none;
	display: inline-block;
	padding: 4px 10px;
	-webkit-border-radius: 5px;
}
.button.black {
 background-image: -webkit-gradient(linear, left top, left bottom,
	 from(#7d828c),
	 color-stop(0.5, #303749),
	 color-stop(0.5, #121a2e),
	 to(#121a2e));
 border: solid 1px rgba(79, 79, 79, 0.75);
}

.button.black:hover {
	background-image: -webkit-gradient(linear, left top, left bottom,
		from(#4286f5),
		color-stop(0.5, #4286f5),
		color-stop(0.5, #194fdb),
		to(#194fdb));
}

.button.back {
    position: relative;
    padding-left: 5px;
    margin-left: 8px;
}

.button.back > span{
       display: block;
       height: 20px;
       width: 20px;
       background-image: -webkit-gradient(linear, left top, right bottom,
              from(#7d828c),
              color-stop(0.5, #303749),
              color-stop(0.5, #121a2e),
              to(#121a2e));
       border-left: solid 1px rgba(79, 79, 79, 0.75);
       border-bottom: solid 1px rgba(79, 79, 79, 0.75);
      -webkit-transform: rotate(45deg);
      -webkit-mask-image: -webkit-gradient(linear, left bottom, right top,
              from(#000000),
              color-stop(0.5,#000000),
              color-stop(0.5, transparent),
              to(transparent));
       position: absolute;
       left: -10px;
       top: 2px;

}

Source: Create Back & Next Buttons with CSS3

Posted in CSS, Mobile | No Comments »

CSS3: Transition Callback and detecting transition support

Wednesday, September 15th, 2010

Transition end callback

box.addEventListener(
     'webkitTransitionEnd',
     function( event ) {
         alert( "Finished transition!" );
     }, false );

Note: on the newest Firefox use “mozTransitionEnd”

Source (Stackoverflow)

Detecting if browser supports transition

    var div = document.createElement('div');
    div.innerHTML = '<div style="-webkit-transition:color 1s linear;-moz-transition:color 1s linear;"></div>';
    cssTransitionsSupported = (div.firstChild.style.webkitTransition !== undefined) ||
 (div.firstChild.style.MozTransition !== undefined);
    delete div;

Source (Razorfish)

Posted in CSS | 1 Comment »

CSS: Css3 Gradient with Stops generator

Monday, September 13th, 2010

CSS3 Gradient Generator

Posted in CSS, Pics | No Comments »

CSS: HTML5/CSS3 Nice Looking Button

Tuesday, July 6th, 2010
a.btn {
width: 250px;
padding: 10px 25px 10px 25px;
font-family: Arial;
font-size: 16px;
text-decoration: none;
color: #ffffff;
text-shadow: -1px -1px 2px #618926;
background: -moz-linear-gradient(#98ba40, #a6c250 35%, #618926);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #98ba40),color-stop(.35, #a6c250),color-stop(1, #618926));
border: 1px solid #618926;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

a.btn:hover {
width: 250px;
padding: 10px 25px 10px 25px;
font-family: Arial;
font-size: 16px;
text-decoration: none;
color: #ffffff;
text-shadow: -1px -1px 2px #465f97;
background: -moz-linear-gradient(#245192, #1e3b73 75%, #12295d);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #245192),color-stop(.75, #1e3b73),color-stop(1, #12295d));
border: 1px solid #0f2557;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

CSS3 Button
Source: Create a CSS3 Call to Action Button

Posted in CSS | No Comments »

CSS: Good article on Absolute, Relatative positioning

Wednesday, April 29th, 2009

Making the absolute, relative (from stopdesign.com). In short:

According to the CSS2 spec, an absolute-positioned element is positioned according to its containing block. Any element is considered “positioned” if it has a position value of relative, absolute, or fixed (anything other than static). “Static” is one of the possible values for the position property. It’s also the default value for any element if no other position is specified. Static basically means an element’s position is not modified, and the element will appear in the expected normal flow of the document in context with other sibling elements and containing blocks.

If an absolute-positioned element resides within no other containing block, (when no ancestor elements are positioned) it is placed relative to the page boundaries (called the initial containing block).

Posted in CSS | No Comments »

CSS: Remove gray border around links

Monday, April 20th, 2009 
a{
outline:none;
}

Source: Flepstudio

Posted in CSS | No Comments »

CSS: Rounded Border Corner (radius), Firefox, WebKit, Standard

Friday, April 17th, 2009

Most modern browsers support rounder borders, but they all have their own syntax (standard coming).

Here is the code for some “tabs” elements:

.tab{
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
}
.bubble{
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}

Posted in CSS | No Comments »

Freemarker: Html Table odd or even rows with Freemarker

Thursday, April 9th, 2009

When iterating on a list, you can use the “_index” value to css-mark the odd or even rows on a table.

<table>
[#list docs as doc]
[#assign trCss = (doc_index % 2 == 0)?string("","odd")]
<tr class=”${trCss}”>
<td>some data</td>
</tr>
[/#list]
</table>

Posted in CSS, Freemarker | 1 Comment »

« Older Entries
Newer Entries »