201506301705[CSS] CSS 備忘

CSS ... 

CSS 選單 可伸縮搜尋框 圖片旋轉 等高 Div
 梅問題/紅色死神/男丁格爾/OXXO/W3School ► 常用  CSS 3D 

DecDocs

※ CSS 工具

CSS 相容性 http://caniuse.com/

CSS 動畫 http://cssanimate.com

 is.js, normalize.css
    echo hello.123.345 | cut -d '.' -f 1,2

Hover.css v2  ★★★★★

CSS clip-path maker

我们不是要成为某一种人,我们只是为了成全自己,只是去证明,我可以的。 ~ stoneniqiu ~

※ 網網相連

◎ jbtronics -- Crooked Style Sheets 2018-1-19 ★★★★

◎ Airen -- 学习 CSS Grid 2017-5-18

◎ Back to Reff -- css元素水平垂直居中的十种方法  2017-5-11

◎ 阮一峰 -- CSS 变量教程 2017-5-9 ★★★★★ 

◎ beidan -- 一个栗子上手CSS3动画 2017-5-9

◎ envatotuts+ -- Making a Sliding Side Navigation Menu for Responsive Designs 2017-3-20

    <svg width="30" height="30" id="icoOpen">
        <path d="M0,5 30,5" stroke="#000" stroke-width="5"/>
        <path d="M0,14 30,14" stroke="#000" stroke-width="5"/>
        <path d="M0,23 30,23" stroke="#000" stroke-width="5"/>
    </svg> ===> ☰

◎ #itBoy -- css3 属性 transform 和 transform-origin“画”时钟 2017-3-10

◎ 谢然 -- 详解 flex-grow 与 flex-shrink 2016-12-14

◇ 张果 -- CSS3与页面布局学习总结

(一)——概要、选择器、特殊性与刻度单位张果
(二)——Box Model、边距折叠、内联与块标签、CSSReset
(三)——BFC、定位、浮动、7种垂直居中方法
(四)——页面布局大全 
(五)——Web Font与Sprite
(六)——CSS3新特性(阴影、动画、渐变、变形、伪元素等)
(七)——前端预处理技术(Less、Sass、CoffeeScript)

tr:nth-child(2n+1){ background:lightblue; } // 隔行
tr:hover{ background: yellow; }
1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

◇ 张果 -- HTML5 学习总结(一)——HTML5概要与新增标签  2016-11-24
              HTML5 学习总结(四)——canvas绘图、WebGL、SVG 2016-11-28
              HTML5 学习总结(五)——WebSocket与消息推送 2016-11-23

◎ Rachel Andrew -- CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout 2016-11-8

flex-direction: row; flex-wrap: no-wrap; align-items: stretch; justify-content: flex-start;
flex-grow: 1; flex-shrink: 0; flex-basis: auto;

grid-auto-flow: row; grid-auto-rows: auto; align-items: stretch; justify-items: stretch; grid-gap: 0;

◎ BIN -- 有趣的CSS像素艺术 2016-9-3
    div { background: #000; width: 10px; height: 10px; box-shadow: 10px 10px  red, -10px 10px orange; }

◎ stoneniqiu -- 【css3笔记】---- 渐变的秘密 2016-7-28

◎ u013742084 -- css3 的部分属性 2016-4-17

◎ stoneniqiu --【css3】--四种气泡 2016-3-28 ★★★★★ 

◎ OSChina -- 推荐 10 个超棒的 CSS3 代码生成工具 2015-8-27

 

※ P~P~P~

150630t CSS 選單

.navbox{ float:left; }
ul { list-style-type:none; }
ul.nav{ width:200px;padding:60px 0 60px 0;background:url() no-repeat; }
ul.nav li { margin:5px 0 0 0; }
ul.nav li a {
    background:#cbcbcb url() no-repeat;color:#174867;padding:7px 15px 7px 15px;width:100px;display:block;text-decoration:none;
    -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out;
    -webkit-box-shadow:2px 2px 4px #888; -moz-box-shadow:2px 2px 4px #888; -o-box-shadow:2px 2px 4px #888;
}
ul.nav li a:hover { background:#ebebeb url() no-repeat;color:#67a5cd;padding:7px 15px 7px 30px; }

    <div class="navbox">
        <ul class="nav">
            <li><a href="#">選單1-1</a></li>
            <li><a href="#">選單1-2</a></li>
            <li><a href="#">選單1-3</a></li>
        </ul>
    </div>
    <div class="navbox">
        <ul class="nav">
            <li><a href="#">選單2-1</a></li>
            <li><a href="#">選單2-2</a></li>
        </ul>
    </div>

  可伸縮搜尋框
.search-field { border: none; cursor: pointer; height: 37px; margin: 3px 0; padding: 0 0 0 34px;
   position: relative; transition: width 400ms ease, background 400ms ease; width: 0;
}
.search-field:focus { background-color: #fff; border: 2px solid #c3c0ab;
   cursor: text; outline: 0; width: 230px;
}

151028w 圖片旋轉

> weiduduan { width:800px; margin:50px auto 0 auto;} 要設 width 才能置中
>> phoneCarousel { margin:0 auto;position:relative;width:800px;height:390px; }
>>> previous
>>> next
>>> stage { left:50%;margin-left:-350px;position:absolute;width:700px;height:100%; }
       圖片

中心點 X = 容器半寬, Y = 容器半高 - 圖片半高
弧度 q = ((360/cnt)*i + deg) * PI / 180 徑度換角度 (直徑)
deg 為每次轉動 10 度, 累加
尺寸比例 0.6 + eSin * 0.4
路徑位置 X * eCos 路徑高度 Y * eSin

160129f 等高 Div ◎ 梅問題 -- Bootstrap教學-Bootstrap 讓網格系統內的多個div高度相同  2016-1-29

.ehdiv { margin-bottom: -10000px; padding-bottom: 10000px; background-color:#efefef; }
#equalheight { overflow: hidden; } 

 170503w  翹腳隱影

#demo { position: relative;width: 400px;height: 100px;background: #fafafa;
        display: inline-block; box-shadow: 0 0 3px gray; }
#demo::before, #demo::after { position:absolute; content:""; top:10px;
        bottom:15px; left:10px; width:50%; box-shadow:0 15px 10px rgba(0, 0, 0, 0.5);
        -webkit-transform: rotate(-3deg); -moz-transform:rotate(-3deg); -o-transform:rotate(-3deg);
        -ms-transform:rotate(-3deg); transform:rotate(-3deg); z-index:-1;}
#demo::after { right:10px; left:auto; -webkit-transform:rotate(3deg);
        -moz-transform:rotate(3deg); -o-transform:rotate(3deg);
        -ms-transform:rotate(3deg); transform: rotate(3deg); }

 

沒有上一則|日誌首頁|沒有下一則
回應
關鍵字