【CSS】input style

核取方塊 input(type=”checkbox”) Display 這個框框只有對準,才能點進去 擴大核取範圍:外層包覆label label input(type=”checkbox”) .box 只要點選框内任一處,都可以打勾上方框框 .box width: 200px height: 150px border: 1px solid #000 Display 只要點選框内任一處,都可以打勾上方框框   點選後出效果 用HTML打一個input(type=”checkbox”) CSS打上input:checked 綜合上面label技巧,擴大選取範圍 找到要顯示特效的地方,寫進input:checked的兄弟元素或子元素裡面去 最後把核取方塊設成不顯示input { display: none } 範例 label input(type=”checkbox”) .box h4 CLICK IT !! .box background-color: #90a955 width: 200px height: 150px display: flex justify-content: center align-items: center h4 color: #f2f2e9 opacity: […]

CSS flex

意義 用來方便排版的屬性 參考資料 使用方法 對母元素 ,display: flex 對母元素,justify-content: center,子元素水平置中 對母元素,align-items: center,子元素垂直置中 子元素自動排列,不會掉出來 範例 .outer .inner.inner1 .inner.inner2 .inner.inner3 .inner.inner4 .outer width: 300px height: 200px border: 1px solid #000 display: flex justify-content: center .inner width: calc(100% / 4) height: 200px border: 1px solid #000 Display .inner1 .inner2 .inner3 .inner4 對比:使用display: inline-block對子元素定位 .inner1 .inner2 .inner3 .inner4

Pogress Circle Bar

結構 範例 .outer .inner .block .txt 75% .outer width: 150px height: 150px background-color: #BFEAE7 border-radius: 100% position: relative margin-left: auto margin-right: auto top: 150px .inner width: 130px height: 130px background-color: #BFEAE7 border-radius: 100% overflow: hidden position: absolute top: 10px left: 10px .block width: 130px height: 97.5px background-color: #20B4A9 position: absolute bottom: 0px opacity: 0.65 .txt […]

用CSS做出三角形

原理 利用border。相鄰邊框之間呈現45度夾角 拿掉border-top,並且將border-bottom的寬度調成2倍大 將此元素的長寬都改成0 最後,把border-right, border-left顏色設成transparent 範例 <div></div> div { width: 0px; height: 0px; border-right: 30px solid transparent; border-left: 30px solid transparent; border-bottom: 60px solid #c1d7ae; } Display

SVG 動畫

animate svg#pic1(viewbox=”-50 -50 100 100″) line(x1=-20, y1=0, x2=20, y2=0) line(x1=0, y1=-20, x2=0, y2=20) circle(cx=0,cy=0,r=10) //attributeName=”要動的地方” //dur=”秒數” //values=”影格” //repeatCount=”重複次數,indefinite重複無限”   animate(attributeName=”r” dur=”2s” values=”10;30;10″ repeatCount=”indefinite”) svg width: 240px border: solid 2px #pic1 stroke: black stroke-width: 3px & circle fill: white Display animateTransform & group svg#pic2(viewbox=”-50 -50 100 100″) circle(cx=0, cy=0, r=10) //group: g,Jade内子元素要縮排。animate要放在g内層 g line(x1=-20, y1=0, x2=20, y2=0) […]

SVG

常用圖形 直線:line(x1, y1, x2, y2) 矩形:rect(x, y, width, height) 圓形:circle(cx, cy, r) 橢圓:ellipse(cx, cy, rx, ry) 折線:polyline(points=”x, y; x, y”) 文字:text(x, y) Type-something VIEWBOX <!– svg(viewbox=”右上角X 右上角Y 寬度 高度”) –> svg(viewbox=”-50 -50 100 100″) circle(cx=0,cy=0,r=10) svg width: 240px border: solid 2px Display   fill:填滿 & stroke:框線 <!– svg(viewbox=”右上角X 右上角Y 寬度 高度”) –> svg(viewbox=”-50 -50 100 […]