css 実験室 白

今日:1 hit、昨日:0 hit、合計:361 hit

CSS 個人利用のみ
改変可能css

◆サンプル◆

全体的に色が薄いcssです
細いフォントや手書きフォントは読みづらくなることが予想されます
導入は慎重にご検討ください

☟絶対読め絶対に、読め☟
◆利用規約やら使い方やら◆

▷できること
個人利用○
改変○
ソースコードの中抜き○
機能やフォントの追加○

▷できないこと
ソースコードの再配布✕
改変したソースコードの配布✕
画像リンクの取得および配布✕

【付属画像】
・実験室の画像配布元

/*---------
消すな
CSS配布元:http://uranai.nosv.org/u.php/hp/ciro14/
圧縮後もコピーして貼り付けてください
---------*/

/*テーマ色
#b4bcbd 白水色メインカラー
#e2e2e2 白灰枠線
#889396 暗灰水メイン文字色
#697376 暗灰文字色
*/

/*◆ページ全体に影響する機能*/
/*選択範囲色*/
::selection{
color:#fff;
background:#b4bcbd;}

/*リンク色*/
a:link{color:#99adb2;}
a:visited{color:#9ba1a3;}

/*ホバーで色が滲む*/
* a:hover {
color:transparent;
text-shadow: 0 0 2px #e2e2e2;
text-decoration:none;}

/*テキスト入力ボックス枠線*//*トップメニュー(マイペ探す作る履歴)*/
input[type=text],div#topmenu{
background-color:rgb(255,255,255,.4);
color:#b4bcbd !important;
border-radius:0em !important;
border:1px solid #e2e2e2 !important;}

/*コンテンツフォーム,ブロックの間調整*/
div#content form{
margin: 4px 0 4px !important;}
.fnormal{margin;1px,0 2px;}

/*最背面背景色*/
body{background-color:#fff;}

/*全体文字色*/
body,span,div.rankupdate,div#umlinks.umclmn a{
color:#889396 !important;
text-shadow:0 0 0 #fff;}

/*◆ページ上部*/
/*占ツクのトップバー(下線)*/
div#topcon,#topcon_line{
border-bottom:3px solid #e2e2e2!important;}

/*トップメニュー探すテキスト入力欄外枠*/
#seboxform{
background-color: #fff !important;
border: solid 1px #fff !important;
box-shadow:none;}

/*トップメニュー探すテキスト入力枠*//*トップメニュー探す項目毎の枠線*/
div#sebox input#sk2,.spmymenu a{
background-color: #fff !important;
border-radius:0em !important;
border:1px solid #e2e2e2 !important;}

/*◆作品表紙の見た目*/
/*コンテンツフォーム(一番でっかい枠)の線*/
/*各ブロックの枠線色(投票ブロック、お気に入り、関連作品、マイページ、コメントフォームなど)*/
div#container ,.block,div.block ,
.ratingblock ,div.oblock ,.commentform ,h3.block_head.fnormal,.block.urank ,.relsolr{
background-color:#fff !important;
border:1px solid #e2e2e2 !important;}

/*タイトル*/
div#header{
border-bottom: solid 1.8px #e2e2e2 !important;}

/*最初の一文字*/
h1:first-letter {color:#b4bcbd;}

/*それ以外の文字*/
h1.utitle a{color:#a5acae !important;
font-weight:300 !important;}

/*ヒット数*//*最終更新日*//*執筆状態の文字色*//*おもしろ度の評価,点数: 0.0/10(0票) 文字色 *//*関連作品小見出し文字色*//*作品の続きボタン*//*ハート数の文字色*/
.hblock,#lastmod,.nstat,.ratingblock,.static,h3.block_head a,.p_next span a,.hrtc,.hrtct{color:#b4bcbd !important;}

/*文字の大きさボタン*/
#resizer{
background-color:transparent;
padding:3.5px;
font-size:10px;
letter-spacing:-.1em;
border:.7px solid #b4bcbd;
text-shadow:none;}

/*作品説明欄の文字色と枠色*/
div#desc{
background-color:#fff;
border:1px solid #b4bcbd;}

/*お話選択背景画像*/
div#content form#dr,form#dr{
background-color:#fff!important;
border:none;
background-image:url(http://img.u.nosv.org/uploader/files/3/d/b/3db83219faf7f2f6f1c6d4d210f34d8a.png);background-size:auto 430px;
background-position:center right;
background-repeat:repeat-y}

@media screen and (max-width:600px){div#content form#dr,form#dr{background-size:auto 280px;}}

/*お話選択の文字色*/
form#dr a:link,form#dr a:visited{
color:#889396;
text-shadow: 1px 1px 3px #fff, -1px -1px 3px #fff, -1px 1px 3px #fff, -1px -1px 3px #fff, 1px 1px 2px #fff, -1px -1px 2px #fff, -1px 1px 3px #fff, -1px -1px 3px #fff !important;}

/*お話選択の文字色ホバー*/
form#dr a:hover{
text-shadow: 0 0 2px #e2e2e2;
color:transparent;}

/*話選択ボタンいじらなくてok*/
input[type=radio]{visibility:hidden;}
.ulbl{display: inline-block;}

/*選択外*/
input[type=radio] + label{
padding-left:22px;
background-image:url(http://img.u.nosv.org/uploader/files/c/8/4/c849f8e8d8dff99a92d9891d2698ea9f.png);
background-repeat:no-repeat;
background-size:12px 12px;}

/*選択中*/
input[type=radio]:checked + label {
background-image:url(http://img.u.nosv.org/uploader/files/4/1/f/41f9b6c99e467b6438853737e7090c00.png);
background-repeat:no-repeat;
background-size:12px 12px;}

/*「検索」「編集」「最初から読む」「選択した内容を見る」「投稿」囲み線・背景色*/
input[type=submit],.p_next span{
background-color: rgb(255,255,255,.6) !important;
color:#b4bcbd !important ;
border-radius:0em !important;
border:1px solid #e2e2e2;}

/*◆小説本文ページ*/
/*小説本文文字色*//*ページナンバーの色*/
p,.pageno{color:#697376 !important;}

/*◆ページ下部*/
/*ページタイトル背景画像・枠*//*作品のタグ*/
.result h3,div#tblock.block{background-image:url(http://uranai.nosv.org/uploader/common/8/f/d/8fda68a20f3de22c1ddaa0023c1b1ed7.png) !important;
background-repeat:no-repeat;
background-size:100% auto;
background-position:center;
border-radius:0em !important;
border:1px solid #b4bcbd;}

/*ページタイトル・作品のタグ文字色*/
.result h3,div#tblock.block a{
color:#fff !important;}

/*スマホ関連ランキング,関連作品余白*/
.block.urank,.relsolr{
margin: 2px 0 2px !important;}

/*上記2つの枠内線*//*pc版関連作品ランク内点線色*/
span.listitem,ol.navlist li {
border-bottom: solid 1px #e2e2e2;}

/*◆pc表示右メニュー*/
/*pc版右メニュー見出し線色*/
h2{border-bottom: solid 1.8px #e2e2e2 !important;}

/*評価欄背景グレー色の星 pc表示*/
.unit-rating{
background:url(http://img.u.nosv.org/uploader/files/e/a/c/eac7298f3f0329a326cf2ef513a56306.png);
background-repeat:repeat-x ;
background-size: auto 100%;
background-position: left;}

/*評価欄背景グレー色の星スマホ表示*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (min-device-pixel-ratio:1.5) {
.unit-rating {
background: url(http://img.u.nosv.org/uploader/files/e/a/c/eac7298f3f0329a326cf2ef513a56306.png);
background-size: auto 100% !important;
background-position:left;}

/*評価欄ホバー時の星 */
.unit-rating li a:hover{background:url(http://img.u.nosv.org/uploader/files/0/e/f/0ef90a41c9861bb2029bf3b1ac97a2df.png);background-repeat:repeat-x ;background-size: auto 100%;background-position:left;}

/*評価欄評価後の星 */
.unit-rating li.current-rating{background:url(http://img.u.nosv.org/uploader/files/0/e/f/0ef90a41c9861bb2029bf3b1ac97a2df.png);background-repeat:repeat-x ;background-size: auto 100%;background-position:left;}

ホムペを作る｜感想を書く
 他の作品を探す