不管你是一個(gè)多么有經(jīng)驗(yàn)的開發(fā)人員,你都想讓你的生活盡可能的簡單。正確的工具可以幫助您完成此任務(wù)。你的能力取決于你使用的工具,所以花點(diǎn)時(shí)間挑選適合你需要的工具是明智的。
在本文中,我將討論每個(gè)web開發(fā)人員都可以使用的一些工具,以便使你的工作更輕松、更高效。
1、Transition Generator
有一個(gè)CSS屬性有很多可能性,這讓你很難記住所有的CSS屬性,那就是 transition 屬性。當(dāng)你不確定你想要什么樣的過渡,或者你只是想嘗試其中一些過渡的時(shí)候,這個(gè)工具就很有用了。這個(gè)工具可以很容易地混合轉(zhuǎn)換不同方面,比如持續(xù)時(shí)間和延遲。通過這種方式,你可以確切地看到每個(gè)不同的轉(zhuǎn)換是如何工作的。請(qǐng)注意,該網(wǎng)站還提供許多其他工具,例如漸變和變換生成器。
2、Transfonter
Transfonter是在轉(zhuǎn)換字體時(shí)使用的工具,這樣你就可以在web上使用它們。它支持許多不同的格式,比如TTF、EOT、WOFF、WOFF2和SVG。當(dāng)你擁有需要在網(wǎng)絡(luò)上使用的自定義字體時(shí),此功能非常有用!
3、Flip Switch Generator
每隔一段時(shí)間,你可能需要為正在構(gòu)建的新應(yīng)用程序?qū)崿F(xiàn)一個(gè)翻轉(zhuǎn)開關(guān)。你可以使用此工具為你生成代碼,而不必一遍又一遍地重復(fù)勞動(dòng)。
4、 Flexbox.help
Flexbox.help是一個(gè)很好的工具,當(dāng)你需要幫助的時(shí)候,你可以利用Flexbox.help。如果你是flexboxes的新手,這是一個(gè)很好的工具,使用這個(gè)工具你可以嘗試使用所有可用的flex選項(xiàng),CSS會(huì)根據(jù)你選擇的選項(xiàng)為你生成,所以你不需要自己輸入所有的代碼。
5、 SASS to CSS
使用此工具,你可以將SASS代碼轉(zhuǎn)換回CSS,當(dāng)你需要使所編寫的SASS代碼準(zhǔn)備好在web上使用時(shí),這可能很有用。
6、 Pure CSS Image Effects
CSS Filter 屬性提供了在元素顯示之前對(duì)元素的渲染效果的訪問,如模糊或顏色偏移。該工具允許您試驗(yàn)filter屬性所提供的所有可能性。
7、Generating Color Schemes
有時(shí)候,當(dāng)你需要為某個(gè)設(shè)計(jì)或網(wǎng)站尋找最佳色彩時(shí),你會(huì)缺乏靈感。當(dāng)你沒有靈感的時(shí)候,你應(yīng)該使用這個(gè)工具。這是一個(gè)非常優(yōu)雅和易于使用的工具,為你提供了最好的配色方案。
8、 Style Guide Generator
當(dāng)你在一個(gè)多人前端團(tuán)隊(duì)中工作時(shí),都非常歡迎使用此工具。它使你可以生成樣式指南,因此不會(huì)對(duì)如何設(shè)置某些元素的樣式產(chǎn)生誤解。
9、 Darken or Lighten a Certain Color
最后一個(gè)工具,可以讓你調(diào)暗或調(diào)亮任何顏色。有很多情況下,你有一個(gè)顏色,然后你想要一個(gè)只是有點(diǎn)深或淺的顏色,例如,在為按鈕尋找背景顏色時(shí)。