CSS3 アーカイブ - CodingMania

ボタンのアウトラインアニメーションでfocusを分りやすくします

yotigory — Fri, 08 May 2015 07:18:25 +0000

HTMl

CSS

/* .btn
-----------------------------------------*/
.btn{
 background-color:#003567;
 color:#FFF;
 cursor:pointer;
 border:none;
 line-height:50px;
 text-align:center;
 width:100px;
 height:50px;
 	/*border-radius*/
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
 	/*box-shadow*/
	-webkit-box-shadow:0px 2px 0px #000;
	-moz-box-shadow:0px 2px 0px #000;
	box-shadow:0px 2px 0px #000;
 outline:2px solid transparent;
 outline-offset:50px;
 transition:0.5s all ease;
}
.btn:focus{
 outline:1px dotted #003567;
 outline-offset:0;
}
.btn:active{
 position:relative;
 top:2px;
 	/*box-shadow*/
	-webkit-box-shadow:0px 0px 0px #000;
	-moz-box-shadow:0px 0px 0px #000;
	box-shadow:0px 0px 0px #000;
}

投稿ボタンのアウトラインアニメーションでfocusを分りやすくしますは CodingMania に最初に表示されました。

マウスオーバーするとtransitionを使って右へ文字を寄せます

yotigory — Thu, 07 May 2015 03:17:04 +0000

HTMl



Before selecting lighting
Lighting basics
The light required for each room
The psychological impressions due to changes in light color(color temperature)
Applying the impact of light
The workings and differences of lights
Types of light sources
Features of principal light sources
Styles of lights
Types and features of principal lighting fixtures

CSS

/* mod_menulist
-----------------------------------------*/
.mod_menulist{
 margin:0 20px 0 20px!important;
}
.mod_menulist ul{
}
.mod_menulist ul li{
 display:block;
 line-height:1.3!important;
}
.mod_menulist ul li a{
 display:table;
 width:100%;
 box-sizing:border-box;
 padding:12px 12px 5px 12px!important;
 -ms-transition:all 0.3s linear 0s;
 -moz-transition:all 0.3s linear 0s;
 -webkit-transition:all 0.3s linear 0s;
 transition:all 0.3s linear 0s;
 border-bottom:solid 1px #dfdfdf!important;
}
.mod_menulist ul li a:before{
 font-family: 'FontAwesome';
 content: "\f105";
 font-size:18px!important;
 color:#666666;
 font-weight:bold;
 display:table-cell;
 vertical-align:middle;
 line-height:1;
 width:15px;
 padding:0 14px 5px 12px!important;
}
.mod_menulist ul li a:hover{}
.mod_menulist ul li a:link    {color:#000; text-decoration:none!important;}
.mod_menulist ul li a:visited {color:#000; text-decoration:none!important;}
.mod_menulist ul li a:hover   {color:#00a0c6; background-color:#ebebeb; text-decoration:none!important; padding-left:18px!important;}
.mod_menulist ul li a:active  {color:#00a0c6; background-color:#ebebeb; text-decoration:none!important; padding-left:18px!important;}

投稿マウスオーバーするとtransitionを使って右へ文字を寄せますは CodingMania に最初に表示されました。

マウスオーバーするとtransitionを使ってborderを太くします

yotigory — Tue, 14 Apr 2015 07:42:57 +0000

HTMl


会社概要へ



トップページへ戻る



文字が長くなったりセンター位置にしてみたり

CSS

/* mod_btn
-----------------------------------------*/
.mod_btn{
 margin:10px 0 10px 0;
}
.mod_btn-center{
 text-align:center;
}
.mod_btn p{
 border:solid 1px #E73582;
 display:inline-block;
}
.mod_btn p a{
 display:block;
 padding:10px 10px 10px 10px;
 color:#E73582;
 font-size:13px;
 -ms-transition:all 0.3s ease 0s;
 -moz-transition:all 0.3s linear 0s;
 -webkit-transition:all 0.3s linear 0s;
 transition:all 0.3s linear 0s;
 border:solid 3px #FFF;
}
.mod_btn p a:after{
 font-family: 'FontAwesome';
 content: "\f101";
 display:inline-block;
 padding:0 0 0 10px;
}
.mod_btn p a:link    {color:#E73582; text-decoration:none;}
.mod_btn p a:visited {color:#E73582; text-decoration:none;}
.mod_btn p a:hover   {color:#E73582; text-decoration:none; border:solid 3px #E73582;}
.mod_btn p a:active  {color:#E73582; text-decoration:none; border:solid 3px #E73582;}

投稿マウスオーバーするとtransitionを使ってborderを太くしますは CodingMania に最初に表示されました。

formのselect要素をCSSでスタイル変更する

yotigory — Tue, 17 Feb 2015 10:44:09 +0000

HTMl

CSS

.mod_form{
 margin:0 auto;
 width:100%;
 font-size:16px;
}
.mod_form_select {
 overflow: hidden;
 width:100%;
 box-sizing:border-box;
 border-radius: 3px;
 padding:3px 0 3px 10px;
 margin: 0 0 10px 0;
 border: 1px solid #dfdfdf;
 vertical-align: middle;
 background: #efefef url(img/img-arrow-down.png) no-repeat 95% 50%;
}
.mod_form_select select {
 -moz-appearance: none;
 -webkit-appearance: none;
 appearance: none;
 border-radius: 0;
 border: 0;
 margin: 0;
 padding:0;
 background: none transparent;
 vertical-align: middle;
 font-size: inherit;
 color: inherit;
 box-sizing: content-box;
 width: 130%;
 height:35px;
}

投稿 formのselect要素をCSSでスタイル変更するは CodingMania に最初に表示されました。

CSSのアニメーションで画像を回転・切替します。

yotigory — Mon, 16 Feb 2015 03:42:42 +0000

JSを読み込みます

[main.js]JavaScript

jQuery(document).ready(function($){
	var btn = $(".mod_btn .btnMenu");

//click
	$(btn).bind("click", "focus", function(event){
    if($(btn).hasClass("off")){
		$(btn).removeClass("off").addClass("on");
    }else{
		$(btn).removeClass("on").addClass("off");
   }
　});

});

HTMl


メニューを開く

CSS



/* mod_btn
-----------------------------------------*/
.mod_btn p.btnMenu {
 position:relative;
 width:27px;
 height:27px;
 background-color:#006d86;
}
/* text hidden */
.mod_btn .btnMenu span{
 display:block;
 width:1px;
 height:1px;
 overflow:hidden;
}
.mod_btn .btnMenu a{
 display:block;
 color:#FFF!important;
}
.mod_btn .btnMenu.on a{
 background-color:#005467;
}
.mod_btn .btnMenu i{
 position:absolute;
 top:3px;
 left:3px;
 font-size:150%;
}
.mod_btn .btnMenu.on i{
 top:3px;
 left:6px;
}
/* off closeicon 非表示 */
.mod_btn .btnMenu.off i.closeicon{
 opacity:0;
 -webkit-transform: rotate(-90deg);
 transform: rotate(-90deg);
}
.mod_btn .btnMenu.on i.closeicon{
 opacity:1;
 -ms-transition-property:opacity,-ms-transform;
 -ms-transition-duration:1s;
 -moz-transition-property:opacity,-moz-transform;
 -moz-transition-duration:1s;
 -webkit-transition-property:opacity,-webkit-transform;
 -webkit-transition-duration:1s;
 transition-property:opacity,transform;
 transition-duration:1s;
}
/* on openicon 非表示 */

.mod_btn .btnMenu.off i.openicon{
 opacity:1;
 -ms-transition-property:opacity,-ms-transform;
 -ms-transition-duration:1s;
 -moz-transition-property:opacity,-moz-transform;
 -moz-transition-duration:1s;
 -webkit-transition-property:opacity,-webkit-transform;
 -webkit-transition-duration:1s;
 transition-property:opacity,transform;
 transition-duration:1s;
}
.mod_btn .btnMenu.on i.openicon{
 opacity:0;
 -webkit-transform: rotate(90deg);
 transform: rotate(90deg);
}

投稿 CSSのアニメーションで画像を回転・切替します。は CodingMania に最初に表示されました。

擬似要素を使って長さに対応するボタンを作ります。

yotigory — Wed, 21 Aug 2013 03:48:59 +0000

HTMl

Click!!

CSS

p.ex_linkbtn {
  display: inline-block;
  height: 34px;
  font-size: 14px;
  font-weight: bold;
}
p.ex_linkbtn a {
  display:inline-block;
    margin: 0 25px 0 10px;
  background:transparent url('img/bg_middle.png') repeat-x left top;
  height: 34px;
  color: #EEE;
  text-decoration:none;
}
p.ex_linkbtn a span{
  display:inline-block;
  padding:0 10px 0 0;
}
p.ex_linkbtn a:before, .ex_linkbtn a:after {
  display: inline-block; 
  content: "";
  height: 34px;
  background-repeat: no-repeat;
  vertical-align: middle;
}
p.ex_linkbtn a:before {
  margin-left: -10px;
  width : 10px;
  height : 34px;
  background:transparent url('img/bg_left.png') no-repeat left top;
}
p.ex_linkbtn a:after {
  margin-right: -20px;
  width : 20px;
  height : 34px;
  background:transparent url('img/bg_right.png') no-repeat left top;
}
/* hover */
p.ex_linkbtn a:hover {
  background:transparent url('img/bg_middle_on.png') repeat-x left top;
}
p.ex_linkbtn a:hover:before {
  background:transparent url('img/bg_left_on.png') no-repeat left top;

}
p.ex_linkbtn a:hover:after {
  background:transparent url('img/bg_right_on.png') no-repeat left top;
}

投稿擬似要素を使って長さに対応するボタンを作ります。は CodingMania に最初に表示されました。

html5 入力フォームのテンプレート！[表型]

yotigory — Fri, 12 Aug 2011 06:14:45 +0000

JSを読み込みます

[formcheck.js]JavaScript

$(function(){
		   //送信ボタンの無効、チェックボックスを外す
			$(".mod_form_btn input").css({opacity:"0.5",cursor:"default"}).attr("disabled","disabed");
			$(".mod_form_importance_btn input:checkbox").attr('checked',false);
		   //チェックボックスがクリックされると送信ボタン有効
			$(".mod_form_importance_btn label,.mod_form_importance_btn input").click(function(){
				if($(".mod_form_importance_btn input:checkbox").attr('checked')==true){
					$(".mod_form_btn input").css({opacity:"1",cursor:"pointer"}).removeAttr("disabled");
				}else{
					 $(".mod_form_btn input").css({opacity:"0.5",cursor:"default"}).attr("disabled","disabed");
					}
			   })
		});

HTMl


[必須]項目は必ずご入力ください。




お問い合わせ項目 [必須]



名前 [必須]




フリガナ [必須]



性別


男性 
女性





メールアドレス [必須]


例：info@gmai.com


メールアドレス確認 [必須]


確認のため再度ご記入ください



郵便番号


例：571-0212


都道府県 [必須]



市区町村・番地


例：神戸市北区花山南町5-2


マンション・アパート名


例：メゾン南000号


電話番号 [必須]


例：0728122800


品番


その他の品番は下記へご記入ください。





日付

 年

 月

 日




色


その他を選択された方はご記入ください。






好きなお菓子はなんですか？



 チョコレート

 ビスケット

 ラムネ

 グミ

 ポテトチップス

 おかき

 ポップコーン

 わたあめ


 ケーキ

 まんじゅう

 ガム

 プリン

 シュークリーム

 昆布

 その他





お問い合わせ内容






「個人情報保護方針」と「当社における個人情報の取扱について」
上記のお問い合わせフォームから情報を送信する前に、下記の「個人情報保護方針」と「当社における個人情報の取扱について」をご一読の上、「個人情報保護方針」にご同意頂ける場合は、「同意する」にチェックをお願いします。


会社名および個人情報保護管理者
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

個人情報の利用目的

・箇条書き

・箇条書き
・箇条書き


個人情報の提供
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

個人情報の取扱いの委託について
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

個人情報を入力するにあたっての注意事項 


（1）文章が入ります。
（1）文章が入ります。
（1）文章が入ります。


本人が容易に認識できない方法による個人情報の取得
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

開示対象個人情報の開示等および問合せ窓口について 
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。







 個人情報保護方針に同意する

お問い合わせ項目 [必須]
名前 [必須]
フリガナ [必須]
性別	男性女性
メールアドレス [必須]	例：info@gmai.com
メールアドレス確認 [必須]	確認のため再度ご記入ください
郵便番号	例：571-0212
都道府県 [必須]
市区町村・番地	例：神戸市北区花山南町5-2
マンション・アパート名	例：メゾン南000号
電話番号 [必須]	例：0728122800
品番	その他の品番は下記へご記入ください。
日付	年月日
色	その他を選択された方はご記入ください。
好きなお菓子はなんですか？	チョコレートビスケットラムネグミポテトチップスおかきポップコーンわたあめケーキまんじゅうガムプリンシュークリーム昆布その他
お問い合わせ内容

CSS

/* 必須
-----------------------------------------*/
.ex_essential{
	color:#CC0000;
	font-weight:normal;
}
/* エラー
-----------------------------------------*/

/* 注釈
-----------------------------------------*/
.ex_comment{
	color:#666;
}
/* フォームレイアウト
-----------------------------------------*/
.mod_form{
	margin:0 auto;
	margin-bottom:20px;
	padding:20px;
	width: 700px;
	border:solid 5px #EEE;
}
.mod_form p.point{
	text-align:right;
}
.mod_form table{
	width:100%;
	border-collapse:separate;
	border-spacing:2px;
}
.mod_form table tr th{
	padding:10px;
	white-space: nowrap;
	font-weight:bold;
	vertical-align: top;
	border-bottom:solid 1px #C1D0E3;
	background-color:#EBF0F6;
}
.mod_form table tr td{
	width:70%;
	padding:10px;
	border-bottom:solid 1px #B6D1F5;
}

/* フォーム内2段組
-----------------------------------------*/
.mod_form_listbox{
	width:100%;
}
.mod_form_listbox_left{
	float:left;
	width:50%;
}
.mod_form_listbox_right{
	float:left;
	width:50%;
}

/* 入力パーツ
-----------------------------------------*/	
label {
  cursor: pointer;
}
select#item,
select#address01,
select#maker,
select#color{
	width:250px;
}
select#nengou,
select#year,
select#month,
select#day{
	width:60px;
}
input,
textarea{
	border:solid 1px #CCCCCC;
}
input#character_m,
input#character_w,
.mod_form_listbox input{
	border:none;
}

input#address02,
input#bill{
	width:350px;
	height:1.4em;
}
input#name,
input#kana,
input#email,
input#emailcheck,
input#maker_etc,
input#color_etc{
	width:250px;
	height:1.4em;
}
input#zipcode,
input#tel{
	width:150px;
	height:1.4em;
}
textarea{
	width:350px;
}
/* フォーカス・チェック
-----------------------------------------*/
input:focus,
textarea:focus{
	background-color:#FFFFCC;
}
input:checked + label{
	background-color:#FFFFCC;
	font-weight:bold;
}

/* 重要なお知らせの同意
-----------------------------------------*/
.mod_form_importance{
	margin:20px 0 0 0;
	padding:10px;
	border:double 3px #CCC;
	background-color:#DDD;
}
.mod_form_importance h2{
	font-weight:bold;
}
.mod_form_importance_txt{
	width:634px;
	height:250px;
	overflow:scroll;
	margin:10px 0 20px 0;
	padding:10px 20px 15px 20px;
	background-color:#FFF;
}
.mod_form_importance_txt h3{
	margin:10px 0 5px 0;
	font-weight:bold;
	border-bottom:solid 1px #DDD;
}
.mod_form_importance_btn{
	text-align:center;
}

/* 送信ボタンとエラー表示
-----------------------------------------*/
.mod_form_btn{
	margin:20px 0 0 0;
	text-align:center;
}

.mod_form_btn input#back,
.mod_form_btn input#submit{
	width:150px;
	padding:5px;
}


/* clearfix：float解除＆親要素に高さを算出させる
-----------------------------------------*/
.ex_clearfix:after {
  content: ".";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  visibility: hidden;
}
.ex_clearfix {
  min-height: 1px;
}
* html .ex_clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}

投稿 html5 入力フォームのテンプレート！[表型] は CodingMania に最初に表示されました。

transformとtransitionを使った丸いナビゲーション

yotigory — Sat, 23 Jul 2011 08:20:14 +0000

HTMl



News
Work
Profile
Blog
Events

CSS

.mod_navi{
	width:940px;
	min-height:250px;
	height:auto!important;
	height:250px;
	position:relative;
	background:transparent url('img/navibk.jpg') no-repeat scroll;
}
.mod_navi li a:link,
.mod_navi li a:visited {
    width: 7em;
    height: 7em;
    display: block;
    color: #FFF;
    text-align: center;
    line-height: 7em;
    font-weight: bold;
    -webkit-border-radius: 7em;
    -moz-border-radius: 7em;
    border-radius: 7em;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    opacity: 0.7;
    background-color: #659A0E;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
    }
.mod_navi li a:hover,
.mod_navi li a:active {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    opacity: 0.8;
    text-decoration: none;
    -webkit-transform: rotate(-10deg) scale(1.5);
    -moz-transform: rotate(-10deg) scale(1.5);
    -o-transform: rotate(-10deg) scale(1.5);
    -ms-transform: rotate(-10deg) scale(1.5);
    transform: rotate(-10deg) scale(1.5);
    -ms-transorm: rotate(-10deg) scale(1.5)
    }
.mod_navi li.navi01{
	position:absolute;
	top:150px;
	left:100px;
}
.mod_navi li.navi02{
	position:absolute;
	top:100px;
	left:250px;
}
.mod_navi li.navi03{
	position:absolute;
	top:50px;
	left:400px;
}
.mod_navi li.navi04{
	position:absolute;
	top:120px;
	left:550px;
}
.mod_navi li.navi05{
	position:absolute;
	top:80px;
	left:700px;
}

投稿 transformとtransitionを使った丸いナビゲーションは CodingMania に最初に表示されました。

箇条書きリストを入れ子にしてCSSで階層を表示

yotigory — Sun, 29 May 2011 04:15:22 +0000

HTMl

 
 
1階層の文章が入ります。
  2階層の文章が入ります。 
  2階層の文章が入ります。 
  2階層の文章が入ります。 
  2階層の文章が入ります。
    3階層の文章が入ります。 
    3階層の文章が入ります。 
    3階層の文章が入ります。 
    3階層の文章が入ります。
      4階層の文章が入ります。 
      4階層の文章が入ります。 
      4階層の文章が入ります。 
      4階層の文章が入ります。
        5階層の文章が入ります。
          6階層の文章が入ります。
            
 
        
 
      
 
    
 
  
 
 
1階層の文章が入ります。

CSS

.mod_List0002 ul li{
	/* リストマーカー画像切れ防止。最低高さを確保 */
	min-height:12px;
	height:auto!important;
	height:12px;
	line-height:1;
	margin:0;
	padding:5px 0 0 15px;
	background:transparent url('img/marker.gif') no-repeat left 0.5em scroll;
}
/* 2階層以降 */
.mod_List0002 ul li ul li{
	background:transparent url('img/marker_middle.gif') no-repeat left -0.2em scroll;
	margin-left:5px;
}
/* リスト最終行 */
.mod_List0002 ul li ul li:last-child {
	background:transparent url('img/marker_last.gif') no-repeat left -0.2em scroll;
}

投稿箇条書きリストを入れ子にしてCSSで階層を表示は CodingMania に最初に表示されました。

リンクするファイル・拡張子を区別してファイルアイコンを自動で表示

yotigory — Sat, 14 May 2011 15:47:37 +0000

HTMl

CSS

a[href$=".pdf"] {
	min-height:16px;
	height:auto!important;
	height:16px;
	padding-right: 18px;
	background: transparent url(icon_pdf.gif) no-repeat center right;
}
a[href$=".doc"] { 
	min-height:16px;
	height:auto!important;
	height:16px;
	padding-right: 18px;
	background: transparent url(icon_doc.gif) no-repeat center right;
}
a[href$=".xls"] { 
	min-height:16px;
	height:auto!important;
	height:16px;
	padding-right: 18px;
	background: transparent url(icon_xls.gif) no-repeat center right;
}
a[href$=".pps"] { 
	min-height:16px;
	height:auto!important;
	height:16px;
	padding-right: 18px;
	background: transparent url(icon_pps.gif) no-repeat center right;
}
a[href$=".zip"] { 
	min-height:16px;
	height:auto!important;
	height:16px;
	padding-right: 18px;
	background: transparent url(icon_zip.gif) no-repeat center right;
}
a[href$=".exe"] { 
	min-height:16px;
	height:auto!important;
	height:16px;
	padding-right: 18px;
	background: transparent url(icon_exe.gif) no-repeat center right;
}

投稿リンクするファイル・拡張子を区別してファイルアイコンを自動で表示は CodingMania に最初に表示されました。