比Boostrap更狂更屌炸天的排版框架「FlexBoxGrid」前端與Vue 相信大多數人對Boostrap一定不陌生,他提供了一套CSS framework的可以讓我們輕鬆引入他所自訂的grid system,可以解決各種Responsive的網頁排版,但Boostrap還存有浮動這個麻煩的問題,而我現在要提的FlexBox grid,他有擁有酷似Boostrap的grid system,而且還整合了Css3的 Flex,Flex
利用css3+jQuery做出酷炫的loading bar +計數動態前端與Vue 以往的loading bar 都是死板板沒有什麼動畫特效的。 使用css3的“transform””,"transition"等屬性來實現具有動態效果的loading bar外加網路上找到的計數動態js code搭配起來特別有感覺~
使用sass mixin來開發responsive網站前端與Vue RWD為響應式網站(Responsive Web Design)的縮寫,為2012年以來,最流行的前端技術之一,通過CSS3的Media Query,可以讓網頁在不同尺寸的裝置下,都可以套用不一樣的CSS Style,讓每個不同裝置同樣瀏覽網頁,都可以用**最佳的畫面**來瀏覽。而為了要開發RWD的網頁與簡化撰寫CSS流程,進而有了SASS
沒想到就這麼簡單? 用 illustrator 來畫網頁 SVG 動畫吧!前端與Vue想要做更進一步的網頁動畫,不一定只有 Animate.css ,或者一些需要 js 運算的動態效果。如果你想做的是線條類特效的話,那這一篇你或許就可以參考看看! 要做線性特效之前,會先需要將形狀繪畫出來,那你可能會想到用 canvas 或 svg 來做。而有個辦法可以讓我們將圖形「畫」出來,再轉存為 svg ,就可以省下 coding 的時間來細條特效了!
如何利用 CSS 製作完美的文字外框前端與Vue 在利用 CSS 製作外框文字,通常會在文字的四方加上 text-shadow ,或是直接使用 text-stroke ,但如果需要製作較粗的外框文字,這兩個方法就會不適合,因此本文會分享如何利用偽元素搭配 text-stroke 製作完美的文字外框。