20+ CSS3-hulpmiddelen en -generatoren verbeteren
CSS3 is een verbeterde versie van de Cascading Style Sheets-specificatie en het bevat vele betoverende functies die een revolutie teweegbrengen in de lay-out en het ontwerp van het web, evenals andere voordelen.
Maar het heeft ook enkele nadelen en het aanpakken ervan vereist slimmigheid. CSS3 is nieuw op de markt, dus er is nog veel te verbeteren.
Het grootste probleem is dat de eigenschappen browserspecifiek zijn en niet eenvoudig via verschillende browsers kunnen worden geïmplementeerd. Ontwikkelaars moeten extra code toevoegen om de eigenschappen op dezelfde manier in browsers te implementeren.
In dit artikel zullen we enkele effectieve CSS3 auto-generator tools benadrukken die ontwikkelaars - vooral lui degenen - kunnen helpen met veel taken. Het grootste voordeel van deze tools is dat ze volledige aanpassing mogelijk maken, wat betekent dat iedereen ze met gemak kan gebruiken.
1. CSS3, alsjeblieft!
CSS3, alsjeblieft is een veelzijdige tool met veelzijdige functies zoals border-radius , box-shadow en lineaire gradiënten. Het is een online applicatie die direct resultaten laat zien aan de rechterkant van het venster, zodat ontwikkelaars in een handomdraai handige CSS3-code voor meerdere browsers kunnen maken. CSS3, alsjeblieft, werd ontworpen door Paul Irish en Jonathon Neal.
2. CSS3-generator
CSS3-generator helpt ontwikkelaars cross-browserfragmenten voor verschillende CSS3-eigenschappen te genereren. Het geeft ontwikkelaars volledige aanpassingsfunctionaliteit, inclusief border-radius , text-shadow , RGBa, box dimensionering en box resizing. Klik eenvoudig op het eenvoudige vervolgkeuzemenu en genereer de code voor het gewenste effect.
3. Randstraal
Grensradius maakt uw ontwerpen er eleganter uitzien met minder inspanning. Voer de gewenste waarde in en genereert code voor rechthoeken met verschillende randspecificaties. Gebruik het om je ontwerpen schattig te maken.
4. CSS3 Maker
CSS3 Maker is een zuinige tool die wordt geleverd met een vervolgkeuzemenu en verschillende andere opties, waaronder box sizing, outline selectors en transformers. Voer gewoon de gewenste waarden in de vakken in en de code wordt gegenereerd, samen met een voorbeeld. De code is beschikbaar om te downloaden.
5. Knop Maker
Chris Coyier presenteert een elegante tool CSS-Tricks voor het ontwerpen van stijlvolle 3-D-knoppen. Met Button Maker , beweeg eenvoudigweg de schuifregelaars om de bovenste en onderste gradiënten aan te passen, de hover-achtergrondkleur, de hover-tekstkleur enzovoort om binnen een mum van tijd de gewenste knop te krijgen.
6. CSS3 PIE
CSS3 PIE wordt geleverd met een snelle demo en een aantal besturingselementen voor het uitvoeren van enkele CSS3-eigenschappen, zoals border-radius , box-shadow en lineaire gradiënt. Verplaats de besturingselementen om de wijzigingen in het bijbehorende vak te bekijken. Schakel vervolgens het selectievakje in om het CSS-vak weer te geven en de gegenereerde code weer te geven.
7. Widget Pad
Widget Pad kan de CSS3-mogelijkheden die zijn geïntroduceerd in Webkit-browsers verbeteren met een eenvoudige maar effectieve auto-generator. Het behandelt CSS-eigenschappen zoals dekking, afgeronde hoeken, transformaties en meer.
8. CSS3 Gen
CSS3 Gen is een handig hulpmiddel voor beginnende ontwikkelaars. Gebruik de knoppen om een progressieve lay-out te maken: maak afgeronde hoeken, voeg schaduweffecten toe aan elk boxelement en speel met coole teksteffecten. De tool helpt ook ontwikkelaars door de compatibiliteit van de code met browsers te specificeren.
9. CSS3-menu
Een chique vervolgkeuzemenu met veel interactieve functies is slechts een paar klikken verwijderd. Laat je ontwerp er elegant uitzien CSS3-menu . Het omvat afgeronde hoeken, verlopen en nog veel meer. De tool vermindert de coderingstijd om stijlvolle menu's te krijgen. Download de code en embed hem volgens zijn vereisten.
10. Afgeronde hoekgenerator
CSS Portal heeft een veelzijdige tool ontwikkeld voor het genereren van code voor afgeronde hoeken, waardoor weblay-outs er stijlvol uitzien. De Afgeronde hoekgenerator maakt het gemakkelijk om aangepaste code voor alle hoeken in een keer of hoek voor hoek te genereren.
11. CSS3 Klik op Grafiek
CSS3 Klik op Grafiek helpt met geweldige effecten zoals RGBa-kleuren, doosschaduwen, radiale verlopen en rotatie. Ontwikkelaars kunnen de achtergrondafmetingen aanpassen en tekst verbazingwekkende streepeffecten geven. De tool heeft echter niet veel flexibele opties voor het aanpassen van code. Toch is het een effectieve auto-generator die tijd kan besparen.
12. CSS3 Selectors-test
CSS3 Selectorentest is een complete testsuite die automatisch verschillende kleine tests genereert om te evalueren of een browser compatibel is met CSS-kiezers. Als het een compatibiliteitsprobleem detecteert, markeert het dit. Maar het gaat niet goed met gebruikersafhankelijke selectors vanwege technische beperkingen.
13. Gradiëntgenerator
Kleuren kunnen een ontwerp drastisch veranderen. Gradiëntgenerator stelt u in staat om een driekleurig verloop in een seconde te ontwerpen. Kies gewoon de begin-, overgangs- en eindkleuren. Vervolgens genereert het de gradiënt, waarbij de kleuren op gelijke afstanden van elkaar zijn geplaatst. Pak de code en ga.
14. Border-image-generator
Border-image-generator is een opwindende CSS3-tool die je kunt gebruiken om coole randafbeeldingen te genereren door schuifregelaars aan te passen. Ontvang direct code voor de border-radius eigendom. Selecteer een afbeelding en gebruik deze om de achtergrond en rand van een bepaald element te stylen en geef uw ontwerp een verbluffende uitstraling.
15. Westciv
Westciv is een must-bookmark verzameling tools. Gebruik XRAY om de positie, marges, opvulling en nog veel meer details van elk element te bekijken. MRI helpt u bij het genereren van de best mogelijke selectors voor een bepaald element. CSS3 Sandbox bevat verlopen, schaduwen en CSS-transformaties. En er wordt gezegd dat anderen binnenkort komen.
16. Xeo CSS
Xeo CSS is een interactieve tool met een desktop-achtige ervaring. Het helpt ontwikkelaars en beginners om CSS- en HTML-pagina's te ontwerpen zonder een regel code te schrijven. Het genereert niet alleen CSS3-fragmenten, maar ook klassen en ID-selectors. Over het algemeen is het een geweldige tool. Registreer en begin met het ontwerpen van een buitengewone weblay-out.
17. CSS Corners
CSS Corners kunt u afgeronde hoeken maken met verlopen om uw ontwerp een professionele uitstraling te geven. De code voor afgeronde hoeken wordt door veel browsers ondersteund. Het enige dat u hoeft te doen, is de bedieningselementen gebruiken, samen met de kleine voorbeeldfunctie, en de code ophalen.
18. CSS3 Gradient Button Generator
Knoppen kunnen er elegant uitzien, maar als ze niet goed zijn ontworpen, kunnen ze de hele lay-out vernietigen. Maak coole knoppen door hellingen en schaduwen toe te voegen. CSS3 Gradient Button Generator genereert binnen een paar seconden de relevante code, met een verscheidenheid aan bedieningselementen, waaronder gradiënt-, tekst- en zweefeffecten.
19. Spritebox
Spritebox is een WYSIWYG-tool ("wat je ziet is wat je krijgt"), waardoor ontwikkelaars CSS-klassen en -ID's kunnen maken van een enkele sprite-afbeelding. De optie slepen-en-neerzetten maakt deze tool aangenaam interactief. Spritebox ondersteunt veel browsers, dus compatibiliteitsproblemen kunnen snel worden opgelost. Selecteer een willekeurig deel van een afbeelding, dat kan worden opgehaald van elke URL of geüpload van een computer, en definieer de klassenaam. De tool maakt automatisch CSS-regels voor de achtergrondpositie.
20. Gradient Editor
Geef je ontwerp een kleurrijke en toch gecomposteerde look met de Adobe-achtige functies erin Verloopbewerker . Ontwerp transparante CSS-verlopen en voeg fade-in, fade-out, semi-transparantie en vergelijkbare effecten toe om een kleurrijke verloopknop te krijgen.
21. CSS-speelplaats van Mike Plate
Mike Plate (een web- en mobiele ontwikkelaar) presenteert een ongelooflijke online tool, CSS3-speelplaats , dat de ontwikkeling van verschillende functies, waaronder tekstschaduwen, transformaties en gradiëntachtergronden, mogelijk maakt. Deze verbazingwekkende tool heeft ook een optie voor het wijzigen van de grootte en herpositionering, met kleurkiezers en schuifregelaars waarmee u een tekstvak kunt stylen. Wanneer de wijziging is voltooid, wordt het voorbeeld met de gegenereerde code direct weergegeven.
Conclusie
Met CSS3 kun je wonderen doen met weblay-outs. Maar men heeft technische vaardigheden nodig. De handige hulpprogramma's die hier worden vermeld, zijn van groot nut voor professionals die zoveel mogelijk browsercompatibele code voor verschillende CSS3-eigenschappen willen genereren, en zij zullen ook degenen helpen die nog niet vertrouwd zijn met het ontwerpgebied.
Is er iets dat we gemist hebben? Op welke CSS3-tools vertrouw je het meest?