*CSSでカレンダー風の日付を作る。

2014.7.4 0Comments CSS

参考サイト

http://snook.ca

 

参考サイトを元に作り替えたのがこれです。
CSSでカレンダー風


/* -- カレンダー風-- */
.list-date {float:left;margin:0 20px 0 10px;padding:35px 5px 0;position:relative;
border-top:#D4D4D4 solid 4px;
background-color:#4D4D4D;
}
.list-date .day {font-family:"Arial Black", Gadget, sans-serif;font-size:20px;left:7px;line-height:40px;position:absolute;top:2px;-webkit-transform: scaleY(1.5);-moz-transform: scaleY(1.5);-o-transform: scaleY(1.5);transform: scaleY(1.5);letter-spacing:3px;
color:#F9F9F9;
}
.list-date  .year{font-size:25px;letter-spacing:5px;filter: alpha(opacity=25);-moz-opacity:0.25;opacity:0.25;
color:#F9F9F9;
}
.list-date .day:first-letter{
color:#FF2020;
}
.list-date  .month {font-size:16px;filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);display:block;position:absolute;right:7px;top:25px;padding-top:3px;-moz-transform: rotate(0deg);-webkit-transform: rotate(0deg);-o-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);
color:#F9F9F9;
}
.list-date .text1{ top:0px;}
.list-date .text2{top:15px;}
.list-date .text3{font-size:16px;}

7⁄4 2014

ワードプレス用のタグならこちら

<div class="list-date">
  <span class="day"><?php echo get_post_time('n'); ?><span class="text3"><?php echo get_post_time('j'); ?></span></span>
  <span class="year"><?php echo get_post_time('Y'); ?></span>
  <span class="month text1"><?php echo get_the_date('D'); ?></span><span class="month text2"><?php echo get_the_date('曜'); ?></span>
</div>

こんな風に黒板風にしたい時には、「.list-date 」のbackground-color:に黒板色を。そして.list-date  .yearの透過を削除して、.list-date .day:first-letterの頭文字の指定を削除します。
CSSでカレンダー黒板風


/* -- 黒板風-- */
.list-date {float:left;margin:0 20px 0 10px;padding:35px 5px 0;position:relative;
border-top:#D4D4D4 solid 4px;
background-color:#315801;
}
.list-date .day {font-family:"Arial Black", Gadget, sans-serif;font-size:20px;left:7px;line-height:40px;position:absolute;top:2px;-webkit-transform: scaleY(1.5);-moz-transform: scaleY(1.5);-o-transform: scaleY(1.5);transform: scaleY(1.5);letter-spacing:3px;
color:#F9F9F9;
}
.list-date  .year{font-size:25px;letter-spacing:5px;color:#F9F9F9;
}
.list-date  .month {font-size:14px;filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);display:block;position:absolute;right:7px;top:25px;padding-top:3px;-moz-transform: rotate(0deg);-webkit-transform: rotate(0deg);-o-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);
color:#F9F9F9;
}
.list-date .text1{ top:0px;}
.list-date .text2{top:15px;}
.list-date .text3{font-size:16px;}