I'm joining together a huge list of CSS3 shadows that will include tutorials, plugins, scripts and more. I have discarded all the other search methods and I have found some pretty cool things, but still I'm sure that I can find even greater things here, thanks :)...
This is a good one
Maybe this tool is useful: http://www.css3.me/
You can do some nice css3 stuff on an html div with some sliders and options. You can see right away what you are doing. When your done you can generate the source code and use it on your own website.
Related
I am looking for possible ways to build a site where my client can easily upload his pictures with a heading / text and remove them again when needed, I prefer easy or quick solutions with high customization if possible.
There is no e-commerce on the page so it will essentially be a portfolio of sorts. I do know a little bit of PHP and SQL, but if the solutions require those I prefer it to be well documented, like a tutorial or such. My skills with html, css are fine, while java and jquery are okay, but a little limited.
I prefer not to work with wordpress, but if everyone thinks that would be the best option, then I will of course use that, though I am hoping for some alternatives.
I'd appreciate any input, advice or suggestions! Thanks in advance!
Try to read about CMS.It will help you out.
I've been using XHTML for about 3 years now, and didn't care much about HTML5 and CSS3 arrival. Several months ago I've stumbled upon HTML5 Boilerplate and I'm starting to get very interested in it right now.
The only thing I can't find yet is drawbacks of using this set of best practices. I know, that the main goal of it to make site look the same on wide variety of browsers, but is there something I should be aware about?
Is there something I should be aware about?
Yes, definitely. It's not a plug-and-play thing. Or at least, it could be like that but it hasn't been conceived for that. And if you use it this way you can't enjoy its best. Boilerplate is very flexible and you have to learn how to customize it. Full stop.
My personal suggestion is to start experimenting with it and study the features it has to offer. Luckily for us it's well documented and you can learn a lot. Not only the boilerplate itself, but also the rules and best practices about HTML5, CSS3, resources loading and related issues/workarounds on performances, browsers quirks and how to fix them, tricks for mobile development, polyfills and conditional loading and a lot of other crazy stuffs. Once you are aware of its possibilities, if you'll find drawbacks you'll be able to customize the base boilerplate.
Start from here, read the docs, follow every link and don't be tempted to take shortcuts. It takes time, but you'll be rewarder very well. If you have troubles ask.
For something more concrete, a drawback I found very quickly (but someone consider this a plus) is that the boilerplate doesn't provide a CSS grid. Not a huge problem, I discovered that adapt.js is easily integrable, so I replaced normalize.css with adapt.js's reset stylesheet and used the grid.
Two things I noticed couple months back is the way javascript gets loaded at the bottom of the body. I'm not a big fan of this if not only it looks dirty. Also I tested the loading myself and didn't notice any better loading of javascript. In fact it ran a couple ms slower on a huge script.
Also the normalize.css I tried couple of times but found myself restyling more paddings and margins than before. Which is normal ofcourse since it's goal is somewhat similar but a different approach. I changed this to Eric Meyer's reset.css just because I'm used to it.
I really like the modernizr script and the way to implement things for x-browser results.
Google Analytics implementation for example.
Another small thing I remember was the placing of the title tag. I changed it to the top position for SEO reasons.
In my work,I often use the css to make the page layout,however I found that I can not make it well beacuse of the css position.
I know the float/absolute/releative and etc.
But when I use them I often can not get what I wanted. Expecially when I use the nested layout,for example,using a absoluted position element within a float element and etc.
I have read the w3cschool tutorial,but I also can not exactly sure I understand it.
So I wonder if there is any detailed css guide? Or some common rules when I layout the element?
I was also always looking for a definitive guide to css, but never found it. I think the best way to learn how css works and really understand it, is to look things up in a good reference and read it very carefully.
I think the Mozilla Developer Network is great, and they have a nice css reference.
Reading articles on websites like Smashing Magazine is also a good way to get your head around some of the more advanced or complicated concepts. Their article on floats has helped me in particular.
I find Sitepoint's reference to be fairly useful: http://reference.sitepoint.com/css. I also second #Basil's recommendations of MDN and Smashing Magazine. A List Apart, while not really a reference site per se, is also a good place to find tutorials or informative articles: http://www.alistapart.com/topics/topic/css/.
Is there any fast guide for web application programmer regarding CSS. From my experiece, if one coder with no graphic design background but good in css can use div and span to create a nice looking page. any such 'quick guide' available for coder?
http://www.csstutorial.net/
http://htmlhelp.com/reference/css/quick-tutorial.html
There are plenty of quick guides on the staples of CSS, but they're more of an implementation perspective rather than a guide to aesthetic qualities (which I think is what you're asking).
To me most, one of the most authoritative sources for this subject is A List Apart. I suggest you start there.
I think what you want to read is "The Principles of Beautiful Web Design". It's a pretty light read, and give you insight in some designer concepts to get you along the way pretty fast.
If you want to learn css to put a nice page together I'd use a framework like 960gs. This won't help you in the context of working in a non-frameworked environment. But if you want to knock up a nice looking page from scratch without doing anything exotic with the layout and get it to work with a load of browsers 960 is the way to go.
Still go through some basics in css though.
I am a Web developer and in my projects I have noticed that my weakest point is not being good at the front-end design. Relying on other designers can be annoying if they are not able to produce as quickly as I want.
My perspective on HTML/CSS is that it is basically a big hack that amazingly works. There are too many CSS and browser specific bugs/quirks to learn and remember them all without spending extreme amounts of time trying to untangle everything. Is there a fast track route to getting CSS into my brain? I have looked at some CSS books, but to me they really read as long lists of how to render things correctly in IE6 and how to make corners rounded. (Seriously why does it require so many tricks to make a sharp corner round? On any platform but the Web this would be called a major oversight.)
Does there exist something that does the analogous to CSS that jQuery does for JavaScript? Using jQuery you don't need to know JavaScript well to make things that work.
I am not interested in learning why IE6 does things in weird ways because I don't care about supporting it at all. I am more interested in a method of learning how to use CSS to do what I want without spending hours and hours reading obscure blogs.
Pencil and paper to sketch out your ideas (think in boxes, not triangles or hexagons), then just break down all the little parts and learn how to do each one. No problem is too big that it can't be broken down. And, like always, TMTOWTDI!
Find examples and learn from it—at least that's how I started learning. Study the styles used and play around with them. When you find something that does what you like, create a mock-up and play around with it. Then test it for cross-browser compatibility.
If you get frustrated because something works in Firefox and Chrome, but not in IE (this will happen a lot), don't give up. I find cursing Bill Gates' name and all he stands for is a great stress reliever. :-)
A great tool I like to use is Firebug, a plugin for Firefox that allows you to, among a great many other things, edit CSS rules in-browser and see the results as soon as you do it.
I agree that CSS was kind of an afterthought in the web design world, but it's one hell of an invention and makes things so much easier and quicker to develop.
Yes, there are CSS frameworks that are the 'jQuery of CSS'. Some of the more popular ones include 960 and Blueprint. I personally use 960 and have found it takes a lot of the guesswork out of layout.
As others have said CSS is hard to learn by reading. It ends up being one of those things you just need to develop an instinct for through lots of experience (which typically means lots of trial, error, and frustration). It is, as you've highlighted, not an ideal situation, but it is what it is.
Another difficulty is that the methodologies or workflow that is employed can really differ between individuals. Some people do a mock-up in Photoshop first, then produce an exact pixel-by-pixel "rendering" with HTML/CSS. Others use Photoshop, Illustrator, or another tool to simply sketch out and idea, and then re-create it from scratch in HTML/CSS. And still others prefer to start directly with HTML/CSS and just a few thumbnail sketches. Figuring out which of these methods fits you best is anthoer important piece of the puzzle.
It pretty much takes time and practice. But you can save yourself a lot of trouble if you keep your html clean and straightforward. Here are a few rules I can think of that have helped me:
Use DOCTYPE in your html pages, start with transitional since it has the most lax rules, and validate your html. If you keep your page in standards mode rather than quirks mode, you will have significantly fewer problems across the board.
Pick what browsers you will support early on and support them in a logical order. For me, I develop in firefox, then make sure that things are solid on chrome / safari. IE can use a special kind of comment that lets you insert html visible only to IE. Use that to add on stylesheets for IE7, then IE6 to override styles and fix any display issues in those browsers. You should generally start with the best browser first and work your way backward.
Be careful with padding. That is one of the most problematic properties I've dealt with. When you can, opt for using a little sub-container element with a margin in place of padding. It's more markup but margin is handled much better across all browsers.
Absolute-positioned elements inside of relative-positioned elements. This solves a LOT. When you relative position an element, it stays in it's normal flow. When you absolute position elements inside of a parent that is relative, the absolute items work in reference to the location of the parent.
In this case I don't think books will help much. CSS is extremely easy to learn, and extremely difficult to master.
All I can suggest is learn as you go.. You need a lot of experience!
Or, you can drop support for IE7 and especially IE6. If you do that you'll find very very few and very very rare quirks :)
Take some classes in graphic design. No programming language will make you an artist, and artistry is required for good user-interface design.
[or you could find better graphic designers to work with]
Subscribe to css-discuss, play with the common problems and talk with other people about your progress. The wiki is a very useful resource too.