Jag älskar att hålla koll på varje växande värld av webbapplikationer med enstaka ändamål som specifikt syftar till att göra en del av ditt jobb som webbdesigner lite enklare. Idag ska vi kolla in tre av de här verktygen som jag nyligen har hittat roligt och användbart.
Vi börjar med att titta på Colllor, ett bra sätt att göra en enda färg till många. Därefter hoppar vi in i Warp CSS och skapar en fantastisk CSS typografi som du troligen inte ens trodde var möjlig. Slutligen ska vi kolla in Bear CSS, ett sätt att snabbt generera ett startark stilark baserat på din HTML. Låt oss börja!
Colllor
Det första nya verktyget vi ska titta på är Colllor, en rolig app som hjälper dig att lägga till en mängd olika färgpalettar. Konceptet här är enkelt:? Vrid en färg till en rad alternativa.? Låt oss se hur det fungerar.
Hur det fungerar
Steg ett är helt enkelt att välja en färg. Ta den startfärgen, skriv in den och tryck på? Välj färg? knapp. Du kan skriva in en hex-kod eller till och med en standard med namnet färg. Alternativt kan du slå den slumpmässiga färgknappen bara för att ge den en provkörning.
Härifrån är utsignalen ganska imponerande. Du får fyra horisontella staplar fyllda med nya färgprover att välja mellan: nyanser / toner, toner, mix och liknande. Din ursprungliga färg är tydligt markerad för referens.
Du presenteras med över femtio relaterade färgprov, som alla är snyggt märkta, har en cool 3D-svängareffekt och kan kopieras till ditt urklipp med ett enda klick.
Mina tankar på Colllor
Jag är en sucker för färg apps och den här tog mig omedelbart. Det är riktigt bra designat och interaktivt nog att göra att hitta färger är en riktigt trevlig upplevelse. Jag var lite förvirrad i början av varför standardalternativ som att generera kompletterande färgprov inte inkluderades, men det finns massor av appar där ute med den funktionen och jag gillar att Colllor försöker vara unik i sin inställning.
Generellt, för att hitta olika nyanser av en enda färg använder jag 0 till255, men den här webbplatsen tenderar att vara ganska trög. Colllor är både snabbare och mångsidigare. Särskilt unik är? Mix? alternativet, som låter dig välja två färger för att se en gradient av enskilda färger mellan de två.
En annan sak som fungerar bra är "Kopiera till Urklipp"? funktion. Många färgverktyg känner behovet av att inkludera? #? när färgen kopieras, vilket är användbart för CSS, men dåligt för Photoshop (CS6 adresserar detta). För närvarande föredrar jag att symbolen utelämnas, vilket är den väg som Colllor tagit.
Jag har verkligen inga klagomål här. Colllor är ett fantastiskt och gratis färgverktyg som du absolut bör lägga till i din lista med bokmärken.
CSS Warp
CSS Warp är ett galet verktyg som låter dig skapa webbtyp som följer en komplicerad sökväg. Verktyget är anmärkningsvärt likartat funktionaliteten för banktyp i Illustrator, så arbetsflödet ska vara tillräckligt för att du ska kunna hämta det ganska snabbt.
Hur det fungerar
Låt oss gå igenom ett test för att se hur det fungerar. Det första du gör är att skriva in lite text. Eftersom den slutgiltiga genererade koden kan vara massiv (vi talar om detta på en minut) rekommenderar jag att du håller din text kort och söt. När du är klar klickar du på varpknappen.
Ditt nästa steg är att definiera kurvan som din typ kommer att följa. Alternativen här är ganska flexibla, du kan antingen definiera din egen snyggare stil eller välja en cirkel. Punkterna skapar avrundade kurvor som standard men det finns ett alternativ längst ner på appen för att ändra dem i skarpa hörn.
Du gör själva händerna på formning i det lilla förhandsgranskningsfönstret som visas bredvid alla dessa kontroller. Dessa uppdateringar lever med alla ändringar du gör så att du alltid kan berätta exakt vad slutprodukten kommer att se ut.
Du kan också definiera flera alternativ för teckensnittet, det här inkluderar möjligheten att ställa in storlek, radiehöjd, kerning * och typsnitt. Jag älskar det du kan välja från Google Web Font Font-biblioteket här. Du har också några alternativ för hur texten anpassas till sökvägen.
* Jag använde termen? Kerning? här för att det är namnet på kontrollen på själva appen. Det är faktiskt missmärkt, men den här reglaget styr verkligen spårets spårning. Skillnaden är viktig. Läs detta för mer information.
När du är klar och har typen precis hur du vill ha det, klicka på? Generera HTML? knappen ovanför förhandsgranskningen för att få textstycket att kopiera och klistra in i din kod.
Mina tankar på CSS Warp
Jag kan ärligt säga att jag aldrig har sett ett annat verktyg som drar av det här tricket så bra med live webbtext. Resultaten är helt imponerande och helt enkelt inte något du någonsin skulle vilja göra för hand. Jag älskar det när utvecklare tar initiativ till att driva gränserna för vad som är möjligt på webben och distribuera sitt arbete fritt.
Mitt enda verkliga problem här är verkligen något helt av utvecklarens kontroll. CSS och HTML har inte faktiskt inbyggd funktionalitet för att skriva längs en sökvägen, så det enda sättet att göra det är att linda varje bokstav i en spänn och sedan placera självständigt och rotera bokstäverna. Detta leder till en massiv bit av kod som inte är lätt att tolka. Som sagt sa utvecklaren verkligen inte kan hjälpa det här, andra verktyg som riktar sig till enskilda bokstäver som Kern.js tvingas fungera på samma sätt.
Sammantaget blåses jag bort av hur väl utvecklad appen är som helhet. Det är extremt lätt att få den effekt du vill ha och det finns massor av alternativ att tweak längs vägen. Det finns också en JavaScript-version som du bör kolla in.
Bär CSS
Bear CSS gör bara en sak: det serverar ett startark stilark när du laddar upp en HTML-fil.Det gör inte jobbet med att styla din webbsida, det börjar bara du började genom att skriva ut de uppenbara stilhakarna för dig.
Hur det fungerar
Bear CSS behöver inte egentligen något tänkande eller ansträngning från din sida. Allt du gör, faktiskt allt du kan göra är att ladda upp ett HTML-dokument.
När du har laddat upp ditt HTML-dokument, är det dags att klicka på? Ladda ner CSS? knapp. Jag grep ett slumpmässigt dokument som jag hade lagt om bara för att testa det och fick följande utdata.
Mina tankar på Bear CSS
Jag var ganska skeptisk till det här verktyget. Jag gillar att skriva min egen CSS och jag var inte galen på tanken på något som försökte göra det för mig. Med detta sagt blev jag positivt överraskad av produktionen. Organisationen, men inte lämplig för varje projekt, är definitivt logiskt och ganska allmänt tillämpligt. Jag gillar det utan några ansträngningar. Jag har ett bra CSS-dokument med de stora krokarna som jag kanske vill rikta in, tydligt åtskilda i kategorier som typografi och layout.
Självklart är det inte ett magiskt verktyg. Det läser inte ditt sinne och skapar några komplexa väljare, det är bara "björnens nödvändigheter"? (förstår?). Inte alla skriver upp den fullständiga HTML-en av en webbsida innan de börjar på CSS, men om du gör så är det här definitivt något du bör prova.
En av de funktioner som jag verkligen skulle vilja se är möjligheten att klistra in i vissa HTML, i motsats till att ladda upp en fil. Det skulle vara trevligt att bara göra en snabb kopia åtgärd från min öppna textredigerare. I några av mina tester som innehöll upprepade klasser upprepade den genererade CSS också den klassväljaren, vilket uppenbarligen är överflödig och onödig.
En annan sak som jag skulle vilja se är några extra alternativ för pro användare att tweak. Några olika organisationsmetoder, oavsett om det ska inkluderas eller inte ingår i något förankrat i ett ankare, och kanske en återställning / normalisering av inkluderingen.
Slutsats
Jag hoppas att du har hittat ett nytt verktyg eller kanske tre nya verktyg för att lägga till din webbutvecklings godisväska. De tre programmen ovan påverkar inte ditt arbetsflöde drastiskt, men de kan göra vissa delar av det lite enklare.
Lämna en kommentar nedan och låt oss veta vad du tycker om de tre apparna ovan. Har du använt någon av dem tidigare? Vilka andra bra verktyg har hjälpt dig nyligen?