CSSに投稿されたコード一覧

CSS SyntaxHighlighterとBootstrapとの競合回避

/* SyntaxHighlighterとBootstrapとの競合(containerクラス)の無効化処理 */
.syntaxhighlighter .container:before, .syntaxhighlighter .container:after {
    display: block;
    content: "";
}

CSS Reset Stylesheet

@charset "utf-8";
/*
Reset Stylesheet
Author: prata0x
Twitter: @prata0x
html5resetの後にインポートして下さいな。
*/

html{
	font-size: 62.5%;
}

body{
	color:#333;
	line-height:1.4;
	font-size: 14px;font-size: 1.4rem;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", sans-serif;
}

p{
	text-indent: 14px;text-indent: 1.4rem;
}

ul{
	list-style: circle;
}
ol{
	list-style: decimal;
}
li{
	margin-left: 28px;margin-left: 2.8rem;
	padding: 0;
}
nav ul{
	list-style: none;
}
nav li{
	margin: 0;
}

a:link{
	color: #333;
	text-decoration: underline;
}
a:visited{
	color: #666;
	text-decoration: underline;
}
a:hover{
	color:#06F;
	text-decoration: none;
}
a:active{
	color: #333;
	text-decoration: underline;
}

CSS Mobile Safariのタップ時のハイライトカラーを変更。

a {
	-webkit-tap-highlight-color: transparent;
}

CSS CSS3 角丸

div {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

CSS CSS test

a {
color: rgba(202, 210, 220, 1.00);
background-color: rgba(0,0,0,0);

}

body {
color: rgba(255, 255, 255, 1.00);
background-color: rgba(0, 0, 0, 1.00);
font-size: 40px;
background-image:-webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 1.00)), to(rgba(47, 47, 55, 1.00)), color-stop(50%, rgba(38, 40, 68, 1.00)));
background-repeat:no-repeat;
background-image:-moz-linear-gradient( 0% 270deg, rgba(0, 0, 0, 1.00), rgba(47, 47, 55, 1.00) ,50% rgba(38, 40, 68, 1.00));
background-image:-webkit-linear-gradient( 0% 270deg, rgba(0, 0, 0, 1.00), rgba(47, 47, 55, 1.00) ,50% rgba(38, 40, 68, 1.00));

}

img {
-webkit-box-reflect: below 0px -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0.00)), to(rgba(0, 0, 0, 1.00)) );

}

CSS IE6でも7でもinline-block

* html .hoge{
	display: inline;
	zoom: 1;
}
*:first-child+html .hoge{
	display: inline;
	zoom: 1;
}

CSS ウィンドウ一杯に画像を表示するCSS

<!-- CSS -->
<style>
img.bg {
	/* Set rules to fill background */
	min-height: 100%;
	min-width: 1024px;
	/* Set up proportionate scaling */
	width: 100%;
	height: auto;
	/* Set up positioning */
	position: fixed;
	/* またはabsolute; */
	top: 0;
	left: 0;
}

@media screen and (max-width: 1024px){
	  img.bg {
	  left: 50%;
	  margin-left: -512px; }
}

div#container {
	position: relative;
}
</style>

<!-- HTML -->
<img class="bg" src="画像.jpg" alt="" />
<div id="container">
ここにコンテンツ
</div>

よく投稿されているコード

タグ

最近投稿されたコード