1stwebdesigner |
| CSS Tools for Designers and Developers Posted: 20 Jan 2012 01:00 PM PST CSS tools are important for web designers and developers because they help them by simplifying the jobs they have to do. Considering time is money and such generators spare time, it is easy to understand why many web developers are excited about these tools. The only problem is that some of them are not well-known, therefore I made a showcase for you with CSS tools and generators which developers and designers can use to create functional and optimized websites faster. Because the tools will be categorized, you will find at the end of each category a list with other applications that do the same as the ones reviewed, therefore there is no need to review them too.
Tools for layoutsTemplatrIf you don’t know HTML or CSS and want a website, Templatr can create a layout for you in a matter of seconds. There are lots of possible layouts you can choose from, upload images and other graphic elements and many, many other things. You can easily select every element on the page and customize it by choosing different options from a dropdown list, which makes modifying the page easier and quite fast. The layouts you make can be downloaded and installed using an application. Another good part is the support for several languages. CSS Template GeneratorCSS Template Generator is not as complex as templatr, but offers some nice features too. As you can see in the screenshot below, it generates a basic CSS stylesheet for an HTML page and gives you the CSS code for it, which you will need to copy/paste in your stylesheet. Obviously, you also get the code for the HTML page. A downside of this generator is the lack of a download option. The only way you can use the layouts created here is copying the code yourself. YAMLWhat I like about YAML is the amount of options you have. Besides being able to select the basic information needed to create a layout, you can also go a bit more in-depth if you have enough knowledge of coding. The columns and the layout have properties, you have presets, you can play with the flexible grids, choose coding options and many others. This generator might actually be the best out of these three. Others: Firdamatic, CSS Portal, CSS Creator, Layout Generators, CSS Layout Generator. Tools for the grid systemVariable Grid SystemVariable Grid System might be one of the best grid system tools you can find on the internet. It allows you to quickly generate a CSS stylesheet for your website and is based on the 960gs, which we will review a bit further down the road. You can customize the width of the main container, the width of the content, the column width, the number of columns and the gutter and you can preview the layout before downloading it – this actually happens automatically when you modify a value. GridinatorGridinator allows the user to customize the layout more than the previous tool. You have the option of modifying colors, font size, choose pixels or em and even select popular layouts from a list on the right hand side. This tool allows you to preview the grid system before downloading the fully functional template. 960gs960gs is not a grid generator, but you can learn a lot about grid systems from it. There are some templates you can download and you can also see some examples of websites that are built on their default stylesheets. You can find some interesting JavaScripts there – adaptive.css is incredible and beats any other similar JavaScript any day of the week – and watch how the grid works on different webpages. Others: Blueprint Grid CSS Generator, CSS Grid Calculator, Grid Designer. Tools for colorsNow that we have a layout and a grid system, we can start thinking about colors and color schemes. Here are some great tools you should look at. KulerMy personal favorite is Kuler, a tool developed and maintained by Adobe. You can find lots and lots of color schemes here you can use for your web pages and even inspiration if you need it. There are more than 11.000 color schemes available (all free of charge) and you even have the option to customize them. If you create an account there you can also start submitting your color schemes of choice and inspire others to use them on their websites. Another incredible tool by Adobe… Color Scheme DesignerAlthough quite different than the first example, Color Scheme Designer is another great tool which allows you to create schemes on a total other level. You can choose a color, then one of the options above – mono, complement, triad, tetrad, analogic or accented analogic – and let the tool do its job. It is a tool you may find very useful for when you need colors for your design. And if that wasn’t already enough, you can also create color schemes for the color blind. Each scheme you create gets an ID which you can save. Later you can return to your scheme again and continue customizing it. CSS Gradient GeneratorIf you don’t want to open Photoshop to create a gradient, CSS Gradient Generator will be great for you. It allows you to do the same thing Photoshop does, only it works with CSS and way faster. You can save your gradients using an unique link. Others: Color Palette Generator, CSS Color Codes, Gradient Image Maker. Tools for menus and buttonsCSS Menu MakerCSS Menu Maker allows you to create your own customized CSS menus and generates them for you in a simple, HTML/CSS format, so you can download and use them right away. The tool has a fairly big gallery of menus – vertical, horizontal and dropdown – and allows you to customize them in detail. Moreover, you can also download plugins for Adobe Dreamweaver and create your own menus on your own computer. The menus are cross-compatible and will look the same in all the browsers (except maybe transitions for Internet Explorer). This is the only CSS menu tool that really stands out, some other ones you can take a look at are CSS Menu Generator, My CSS Menu, Tabs Generator and List-O-Matic. Button Maker OnlineButton Maker Online from Dynamic Drive allows you to create and customize your own buttons, then download and use them in your designs. You can pretty much customize everything from colors, borders, size and even has some transparency options. You can preview the buttons before using them. CSS ButtonThis one is very similar to the first, only you create the menus in another way: by choosing your style from several dropdown lists. It’s pretty much the same it only depends which one you are more comfortable working with. Tools for fontsFont TesterFont Tester is an incredible tool which lets you preview different fonts, so that you won’t have to insert them into your CSS file and customize them there. Just customize the fonts on this web page and when you find the perfect one, get the code and use it! There are so many options I don’t even know where to begin. There’s line height, text decoration, text transform, font weight, word spacing, font stretch, white space, unicode bidi and many, many others. Just go an give it a try, you will fall in love with it. TypesterTypester is pretty much for the same purpose as Font Tester, only it might be more popular and you can preview more fonts there – even the Google fonts. There are not so many options for customizing, but what you have should be enough to give you a preview of the typeface you wish to integrate in your design. Others: CSS Font Style, CSS Font and Text Style Wizard, CSS Type Set. Other toolsCSS GeneratorIf you wish to generate a default CSS style fast, then CSS Generator is for you. It’s similar to the tools for grid systems, only this one doesn’t really keep a grid system (you will have to code it afterwards). You can, however, generate a stylesheet with link colors, font size, margins, hover color and so on – and spare some valuable time later on during the coding. Quick CSSQuick CSS does the same thing, only you have even more customization possibilities, so take a look at this too. The generated CSS seems to always be validated by W3C and the process is quite fast as well, so you will be able to enjoy a half an hour of TV later instead of coding the defaults of the stylesheet. Now I am not updated on CSS sprites tools, because I don’t use them, but some reviews recommend Spritegen Sprite Generator, CSS Sprites and CSS Sprites Generator. If you design e-mail newsletters and need to generate tables in CSS, then this tool will do the job. That was a list of CSS tools and generators I wanted to raise awareness about. Do you have some others you would like to recommend?     |
| Internet Blackout Aftermath – Is the Threat of SOPA/PIPA Over? Posted: 20 Jan 2012 02:00 AM PST This past Wednesday was quite the eventful day. The impact of Wikipedia, Google, TechCrunch, Mozilla, Wired, Reddit, WordPress, Funny Or Die, and many more big names, and of course those of you in the community who knew about the events and blacked out your own websites was DEFINITELY FELT!
Because of the Blackout and the continued efforts of many before, we got these great results:
Does This Mean It’s Over?There is, of course, a lot more good news than what is listed above, but too much of a good thing in one place might make you think the situation is over. IT IS FAR FROM THAT! In fact, on Monday Senators return to discuss and vote on PIPA. Everyone needs to call, email, leave a voicemail message, or whatever method of communication you prefer, their state senators and tell them how you feel. However before you do that, you should first make sure you know what you’re talking about. Here are some quick things you should keep in mind before contacting them with this great tool provided by Americancensorship.org. Read Up On These Bills As Much As PossibleThere is nothing more hurtful to a cause than having someone who is not fully informed on the matter calling on behalf of any stance. This gives an example of an uneducated person who easily fell for the hype surrounding the event, proving that people are easily influenced. If the actual SOPA and PIPA bills in their entirety are a too much for you to comprehend, then finding some accurate blog articles written to state facts and less on personal viewpoints are a great stepping stone. Last month I published a well-received article, the preceding one to the current one you are reading. Take a good look, and figure out where it is you stand on the matter. SOPA’s Author Breaks Copyright Laws TooThis is just funny and shows how hypocritical the US government has become. Actually Read The LegislationThese bills are not the easiest things to read, that is kinda the case for any legal doctrine of this nature presented. It is this way so that things can be hidden inside them, or there will be so much of one thing that is perceived as good hopefully the perceived bad aspects will be ignored. It is always best to go to the source and see the information for yourself. Learn About The Digital Millennium Copyright ActNow reading this you sure will be surprised that a bill passed into law around a decade ago sounds a lot like the SOPA and PIPA of today, just less as severe but by no means a non threat. You can read up on it at a friendly supporter of the cause Wikipedia. Here is something about it that should really interest you,
Stop Saying This Will Destroy The InternetI don’t know where this saying came from, but it is not a good one. In fact, it really is doing more harm than good. This saying shows that we as an internet community won’t allow for an internet where piracy laws are in effect, and are willing to stand against anything they push are way related to stopping us from stealing content. You may not think this is the case, but anything can easily be twisted around to prove this statement true. Some Bad NewsHiding Laws In “Safer Titles”Now we all are against children getting access to pornography right? Well that is what the hopes for the Protecting Children from Internet Pornographers Act of 2011 are resting on. What this bill really is doing is acting as a cover for a massive data retention law, so lets just call it SOPA or PIPA with a justifiable face change. You can learn more about it on this article from Techdirt.com. MegaUpload Is GoneMegaUpload was easily a top file sharing site, I bet most of the readers of this articles all either have files on their or have downloaded some. Well as of yesterday, MegaUpload is officially no more. On Thursday, MegaUpload was shut down by the US government on the allegations of costing copyright holders at least $500 million in lost revenue. The founder, and other members of the company, are being indicted right now because of these charges. Lean more about it on this article from the Washington Post. And for the record, MegaUpload is a Hong Kong based website. BTW, I wanted to know if the above paragraph sounded familiar to something I might have said in my previous article. Yes? No? Let me refresh your memory:
Cool LinksHow SOPA and PIPA Hinder Businesses by Forbes   |
| You are subscribed to email updates from 1stwebdesigner - Graphic and Web Design Blog To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
Niciun comentariu:
Trimiteți un comentariu