トップ > css3

(Paper-4.png); /* Last, on bottom, like

css3 webdesign


z-index of multiple backgrounds




Some great advice from Chris Coyier

“It’s not really z-index, but multiple backgrounds do have a vertical stacking order. If you an fully opaque fully repeating image as the first one in the list, none of the others will be visible.”


“I think this is counter-intuitive, because in HTML it’s the opposite. The LAST element is on top naturally if elements with the same z-index come to be overlapping.”


background: 

   url(number.png) 600px 10px no-repeat,  /* First, on top,   like z-index: 4; */

   url(thingy.png) 10px 10px no-repeat,   /* Next,            like z-index: 3; */

   url(Paper-4.png);                      /* Last, on bottom, like z-index: 1; */



CSS3に関するサイトのまとめ|Webpark

webデザイン css css3


基礎から理解するためのCSS3に関するサイトのまとめ｜Webpark






出典：http://weboook.blog22.fc2.com/blog-entry-229.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+letsfc2+%28%E3%83%AC%E3%83%83%E3%83%84FC2%E3%83%96%E3%83%AD%E3%82%B0%EF%BC%81%29&utm_content=Google+Reader

CSS3に関するサイトのまとめ|Webparkの関連ワード：[webデザイン][css][css3]

moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0

css3 webdesign



CSS drop-shadows without images



ul.box li {
list-style-type: none;
position: relative;
float: left;
width: 204px;
height: 113px;
padding: 0;
margin: 0 30px 30px 0;
background: #fff;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}

ul.box li:before,
ul.box li:after {
content: "";
z-index: -1;
position: absolute;
right: 10px;
bottom: 10px;
width: 70%;
height: 55%;
-webkit-transform: skew(-15deg) rotate(-6deg);
-moz-transform: skew(-15deg) rotate(-6deg);
-o-transform: skew(-15deg) rotate(-6deg);
transform: skew(-15deg) rotate(-6deg);
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

ul.box li:after {
right: auto;
left: 10px;
-webkit-transform: skew(15deg) rotate(6deg);
-moz-transform: skew(15deg) rotate(6deg);
-o-transform: skew(15deg) rotate(6deg);
transform: skew(15deg) rotate(6deg);
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}





出典：http://nicolasgallagher.com

moz-transform-origin: 50%; -o-transform-origin:

webdesign css3


CSS3 Transform



Some reusable classes for CSS3 transform effects



.rotate-45 { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg);  }


.rotate75  { -webkit-transform: rotate(75deg); -moz-transform: rotate(75deg); -o-transform: rotate(75deg);  }


.rotate90  { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg);  }


.rotate90plus { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform-origin: 50%; -moz-transform-origin: 50%; -o-transform-origin: 50%;  }


.scale02  { -webkit-transform: scale(0.2); -moz-transform: scale(0.2); -o-transform: scale(0.2);  }


.scaleX2  { -webkit-transform: scaleX(2); -moz-transform: scaleX(2); -o-transform: scaleX(2);  }


.scaleY15 { -webkit-transform: scaleY(1.5); -moz-transform: scaleY(1.5); -o-transform: scaleY(1.5);  }


.skewX10 { -webkit-transform: skewX(10deg); -moz-transform: skewX(10deg); -o-transform: skewX(10deg);  }


.skewX30 { -webkit-transform: skewX(30deg); -moz-transform: skewX(30deg); -o-transform: skewX(30deg);  }


.skewY20 { -webkit-transform: skewY(20deg); -moz-transform: skewY(20deg); -o-transform: skewY(20deg);  }




It works well in all modern browsers and is best suited

css3 webdesign



Pure CSS folded-corner effect


Create a simple CSS folded-corner effect without images or extra markup. It works well in all modern browsers and is best suited to designs with simple colour backgrounds.





出典：http://nicolasgallagher.com

perhaps combined with a server-side language. Fortunately, the process

html5 css3 webdesign



Quick Tip: A Crash-Course in CSS Media Queries


In the past, in order to create layouts based upon the width of the user’s browser, we had to use JavaScript — perhaps combined with a server-side language. Fortunately, the process is now becoming far simpler, thanks to CSS media queries.