科學需在腦袋生根

2016年11月29日星期二

圖片置中的好方法,Image Vertical Align

外層DIV 高度與行高一致
裡面的IMG vertical-align:middle

.proudImg{margin:10px;overflow: hidden;height: 200px;line-height:200px;}
.proudImg img{vertical-align:middle;}

2016年11月17日星期四

RWD

媒體查詢寫法

最大的畫面只到767 手機專用
@media only screen and (max-width: 767px){
}

最大的畫面只到991 平板專用
@media only screen and (max-width: 991px){
}
畫面在1200~992
@media(min-width: 768px) and (max-width: 1200px){
}

2016年11月16日星期三

a img{
-webkit-transition: top .8s ease-out,left .8s ease-out,opacity .8s ease-out,-webkit-transform .8s ease-out;
-moz-transition: top .8s ease-out,left .8s ease-out,opacity .8s ease-out,-webkit-transform .8s ease-out;
-o-transition: top .8s ease-out,left .8s ease-out,opacity .8s ease-out,-webkit-transform .8s ease-out;
transition: top .8s ease-out,left .8s ease-out,opacity .8s ease-out,-webkit-transform .8s ease-out;
-ms-transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}

a:hover img{
-ms-transform: scale(1.02);
-webkit-transform: scale(1.02);
-moz-transform: scale(1.02);
-o-transform: scale(1.02);
transform: scale(1.02);
}

http://www.erikjohanssonphoto.com/work

2016年11月4日星期五

一些注意事項

1. img 放在DIV 裡,底部多出一段padding
Ans: img display:block

2.slidebar 好用的js 側開上開下開
Adam Charles Smith
https://www.adchsm.com/slidebars/

2016年3月20日星期日

按鈕翻滾的CSS

CSS

.textbutton {
display:block;
line-height: 51px;
color: #fff;
text-align: center;
letter-spacing: -.5px;
font-size: 17px;
width: 100%;
}
.textbutton {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transition: all .35s ease;
transition: all .35s ease;
-webkit-transform: rotateX(0) translateZ(25px) scale(.975);
transform: rotateX(0) translateZ(25px) scale(.975);
background: #248328;
}
.textbutton:hover {
-webkit-transform: rotateX(-90deg) translateZ(25px) scale(.975);
transform: rotateX(-90deg) translateZ(25px) scale(.975);
background: #133a15;
}
.textbutton:after {
content: '成立宗旨與理念';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
background: #133a15;
-webkit-transform: translateY(-25px) translateZ(-25px) rotateX(90deg);
transform: translateY(-25px) translateZ(-25px) rotateX(90deg);
-webkit-transition: all .35s ease;
transition: all .35s ease;
}
.textbutton:hover:after {
background: #248328;
}

HTML

<a href="#" class="textbutton">成立宗旨與理念</a>

2015年12月19日星期六

滑開感覺動作css

html 部分

示意圖

2015年12月1日星期二

css 分享標籤

Follow us


Twitter
Facebook
Google+
Dribbble
RSS

html

<ul class="redirect-socials">
<li><a class="twitter" href="#">Twitter</a></li>
<li><a class="facebook" href="#">Facebook</a></li>
<li><a class="google" href="#">Google+</a></li>
<li><a class="dribbble" href="#">Dribbble</a></li>
<li><a class="rss" href="#">RSS</a></li>
</ul>

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
margin: 0;
padding: 0;
}
p {
margin: 1em 0;
line-height: 1.4;
font-family: "Merriweather", georgia, serif;
}
.redirect-socials li {
display: inline-block;
margin-right: .4em;
margin-bottom: .6em;
}
.redirect-socials a {
font-size: 12px;
font-size: 0.75rem;
font-weight: bold;
display: inline-block;
padding: .8em 1.2em 1em;
position: relative;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
text-decoration:none;
}
.redirect-socials .twitter {
color: #50abf1;
box-shadow: inset 0 -2px 0 #50abf1;
}
.redirect-socials .facebook {
color: #3b599a;
box-shadow: inset 0 -2px 0 #3b599a;
}
.redirect-socials .google {
color: #df4a32;
box-shadow: inset 0 -2px 0 #df4a32;
}
.redirect-socials .dribbble {
color: #ec4989;
box-shadow: inset 0 -2px 0 #ec4989;
}
.redirect-socials .rss {
color: #e77b39;
box-shadow: inset 0 -2px 0 #e77b39;
}
.redirect-socials a:hover {
color: #fff; text-decoration:none;
}
.redirect-socials a span {
position: relative;
z-index: 5;
}
.redirect-socials a::before {
content: '';
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
display: inline-block;
-webkit-transform: scale(1, 0);
-moz-transform: scale(1, 0);
-ms-transform: scale(1, 0);
-o-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;

}
.redirect-socials .twitter::before {
background: #50abf1;
}
.redirect-socials .facebook::before {
background: #3b599a;
}
.redirect-socials .google::before {
background: #df4a32;
}
.redirect-socials .dribbble::before {
background: #ec4989;
}
.redirect-socials .rss::before {
background: #e77b39;
}
.redirect-socials a:hover::before {
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);

}

2016年11月29日 星期二

2016年11月17日 星期四

2016年11月16日 星期三

2016年11月4日 星期五

2016年3月20日 星期日

CSS