I still don't get the point of investing some coding time to add this effect even knowing that it will (probably) not be compatible with all the web browsers available out there. I want to hear your opinions.
The same reason your toilet seat isn't square. Round just feels better.
So you don't hurt yourself trying to create your own.
You see, awhile back as rounded corners grew in popularity, a series of unfortunate accidents occurred. As newer, less experienced designers and developers were seeing the rise in popularity of rounded corners, they saw it as being time to upgrade their square corners.
Sadly in their excitement, they took for granted the safety needed in working with sharp square corners. At this time a single monitor setup was more the norm. So as they flipped back and forth between their design tool and the tutorial, tragedy struck.
The community took notice, and knew something had to be done. "This must be automated! And to make sure people find it quicker, tell them its AJAX that's preforming the magic."
And the rest is history my friend.
Graphic design?..
just to give a good graphical look to your web.
Presentation? corporate ID? Layout? Nice to have?
To engage your users... Or you could save some real coding time and just go with plain old text.
Related
reference : http://www.agencekali.com
Hello, I wanna learn how to create this blur gradient color and movement in background with css. I assume this is made out of canvas given the sources. But I don't know what keywords I should look it up or how to move forward. Could you suggest articles that I can get the hang of it.
Here is an example for you:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients
But keep in mind that you have been downvoted because this is a question easily found searching on Google, or any other search engine.
Users are expected to make an effort and investigate by theirselves before posting questions to the community.
In the process of investigating by yourself you are generally able to solve almost every question you'd have, specially in the beginning.
Good luck on your learning process! ^^
I am interested in improving my understanding of CSS. I have been making web pages for a while, but I am still constantly thwarted by bizarre behavior that I can't explain when I try to get things to look the way I want. I have a good bit of development experience and I have no trouble understanding the finer points of Javascript, PHP, or even C. But when it comes to CSS and HTML, I find I am always trying to "trick" my code into working.
This must betray a lack of understanding on my part about how web pages and CSS actually work. Are there any good books or resources I could look at toward the end of truly understanding what is going on under the hood? I always feel like I'm at a loss, but I suspect I could get over that if I just cracked down and did some good reading.
I find I am always trying to "trick" my code into working.
Yep. CSS is often about creating the illusion of the effect you intend, rather than actually doing what you intend.
That said, there are very specific rules, as specified by the W3C. Understanding the visual formatting model can do wonders for your understanding as well. These specs are dense, and often confusing, however, so figuring out specific properties and building knowledge step by step is often the easier way to go. Find tutorials (see links below), or just play with them and see what happens (that's how I learned float and clear).
Even though it's often dead, there are a few SO users who will check the CSS Chat Room regularly (myself included), so if you have general questions (inappropriate for an actual SO question), feel free to ask there, and someone will eventually ping you back.
Also, I've created a Useful CSS Links document with links to official documents, several tutorials, and other CSS resources.
You might be getting mesmerized by the pretty blinking lights and forgetting to watch how everything is connected together. Just like you can get too focused on how a node in the DOM is affected by your javascript, you can't forget about the parents and siblings and how they all fit together. Your biggest problems are probably positioning. Remember how all the elements are connected together and that will solve a lot of confusion.
I'm sure you've already been here, but just in case:
Learn CSS:
http://w3schools.com/css/default.asp
Learn CSS3:
http://w3schools.com/css3/default.asp
However, the best way to learn this stuff is by trial-and-error. HTML and CSS are unique in their forgiving approach to malformation/errors. This, along with the fact that no two browsers render HTML/CSS exactly alike, presents a certain ambiguity that even experienced HTML/CSS developers occasionally grapple with.
Still, learning this stuff is a blast, and really rewarding once you get a handle on it. Happy coding!
As a new to web development i wonder, where should i start learning.
Should i start from a big good book on HTML5&CSS3 and hope, that FF and Chrome will support what i do, OR the whole world novadays doesnt write CSS themselves, and use help of JS-based CSS frameworks?
I think i wont be able to do a real world website in a year, so we must keep it in mind.
I hope, with modern browsers bit by bit support of new futures of HTML&CSS, many things can be done by native CSS3&HTML5 to the moment i 'graduate' w3school:)
If you are new to web development, I suggest you stay away from CSS frameworks and concentrate on "basic" HTML, CSS, and JavaScript. It is surprisingly easy to make a "real world" website with these basic tools. The whole world does NOT use CSS frameworks, most web designers do write the CSS themselves.
The best way to learn is practice. I would find something you are interested in and use that as a project to work on. Show off your knowledge and talent with whatever you are into!
You should be aware it will be many years before HTML5 and CSS3 are supported by all browsers, I expect that many will stick with IE8 for a long time since IE9 won't work with XP.
you should start by getting a little project. Make random sites. Pretend you got a webdesign studio. Look at other sites. view their source. Get your hands dirty. W3schools is your best friend.
start with html,css then add javascript(jquery) then go serverside. you could do this backwards too.
thats how i started.
my 2 cents.
HTML and CSS are very simple. Being a good developer is having the experience to know how things work and when to apply what.
On the other hand jQuery is a library, thus like a real life library you are always reading. Learn how it works, and then learn to google regarding what you are looking for.
Don't skip ahead to HTML5 and CSS3, that's a lot like starting with a beta product, they are not yet standardised, but have been adopted (thus far) by the browsers.
Analogy
A very good developer is a cowboy with his hand at his holster ready to whip out the perfect bit of code, due to experience and practice.
The novice has to get his gun out of bag, clean it, load it and aim it . As long as you are not going up against an expert your fire eventually, just hang in there.
P.S. Nearly forgot, the only point of framework ultimately is to increase the speed at which you can develop. If you don't know how it works it will only slow you down, and you don't need that on top of everything else.
I've got what i think it a useful idea for CSS development but I'm unsure where to make my suggestion or to whom it should be directed.
Is there a universal inbox for CSS improvement suggestions at the W3C? I know it will take forever to get suggestions drafted, tested and put into the CSS specs but there is no time like the present...
The W3C has a Participation FAQ that you might be interested in, but if your idea is development-related, does it really need to be a part of the specification? Or is it the sort of thing that developers of popular (CSS-related, web development) tools could simply add support for?
Rather than going directly to the W3C, I'd suggest first trying to get some more exposure for your idea. Write up a blog post describing it, submit it to some popular sites like A List Apart, Hacker News, or Reddit -- basically, get as many eyes on your idea as you can.
If your suggestion really is a good one, it'll help to gain momentum by getting a lot of attention. Or, if it's a bad idea, you'll quickly find out by having people "review" it. You'll likely get some good suggestions to improve the idea, and you'll definitely spend your time better getting peer feedback than somehow trying to singlehandedly champion it to the W3C.
This is a best-practice topic.
I saw it as a prefer method for some web developers. Instead of doing the CSS layout from scratch, they start a photoshop mockup first and then decode it into CSS.
What do you think about this approach?
Best to all,
Mockups are great, but I don't know if photoshop is the very first thing you'd want to try for the purpose -- at the very start, when you're just trying to get a logical layout for the various pages of the site (before refining it in terms of looks &c), a whiteboard with dry-erase markers and post-it notes affords for very fast, repeated mock-up rearrangements for the early brainstorming. Once there is some reasonable agreement on one (or a very few) possible arrangements of information, then visually more accurate tools enter into play.
BTW, just don't forget to photograph the whiteboard before changing it (any decent cellphone will do, you're not trying for high quality here;-) any time there are ideas or suggestions you may want to revisit or ponder in the future!
It is fast. This is why i always use this method. You don't want to spend the time building cross-browser CSS until you are actually set on a layout.
Most webdesign graphic artists work this way.
Many programmers simply find it a waste of time.
It has advantages, and disadvantages.
Advantages:
Many graphic artists grok photoshop/illustrator more than they do dreamweaver.
Customer gets a preview of the final product that works everywhere: mac, pc, firefox, ie, safari, whatever. Sending an html preview in early stages of production with developers using firefox and customer using MSIE always stirs up trouble.
And don't think to be on the smart side, scribbling MSIE driven html. Starting with non-standard html and converting to standard is more painful than doing it the other way.
There's one more catch: many web site customers tend to have a Mac and use Safari. Web committents tend to have a stronger taste for graphics than the average, so the chance to bump into Mac maniacs is higher in this sector than in others.
More design alternatives can be prepared spending less time on each one. This could be a dramatic advantage while dealing with murky clouds of executives with no designated decision-makers on the customer side. Alternative mockups will be passing hand-to-hand until general consensus is reached on one design or the other.
Disadvantages:
"Cutting" the graphic design into html becomes an additional work and it's not clear who's gonna pay for that extra time.
It favours graphic-centric, and rigid, design workflows. Customers agree pre-emptively on a given preview and that's what they get by contract. Every graphic modification means money, behaviour and programming instead tend not to be well defined, or worst, ill defined by the mockup.
The quest for pixel perfect cross-browser adherence to the mockup may drive you insane. If you agreed on a given rigid design with the customer, that could become a dire issue to pursue.
Dirty CSS tricks shoe in into your design. Using an HTML mockup, the customer would have approved a design driven by code with less tricks in place.
Anyway, I wouldn't suggest photoshop for a mockup, but inkscape. (or illustrator, if you worship adobe by burning piles of money into magic circles at midnight)
A scribbling stage is good too, while discussing the contract live with the customer.
I prefer pencil and paper to felt-tips, and I webcam shoot ideas for archiving and email forwarding. When it comes to scribbling, anyone does what feels more natural.
Not doing any and rely onto sample site examples and screenshots for graphical reference is always an option.
If you're productive that way, why not? Not everybody manages to envision their Web site perfectly as they're typing in a bunch of angle brackets.
More seriously put: It's your job, so it's your responsibility to do it in a way that allows you to do it effectively.
When prototyping, it's important to choose the right fidelity. This article from BoxesAndArrows provides a nice introduction to the various options and their uses.
I particularly like this line by Bill Buxton which the article quotes:
There is no such thing as high or low fidelity, only appropriate fidelity.
In this TechTalk by the Facebook Design Team, they mention how they use Photoshop in their design process (IIRC it's somewhere midway through, but I can't seem to forward through the video).
I am a web programmer who knows html and css fairly well. I can use a graphic program for it's basic functionality, but desinging a complete graphical web site is not my thing.
I let a graphic designer use his or hers graphic program to create a nice looking layout, and than code the website by hand in html and css.
It works for me, and gives my customers a design they like (cause a graphical designer will always make a much more nice looking design than most web programmers).
Agile methodology would suggest something easily modified in consultation with the customer. Dave Thomas in Agile Web Development with Rails suggests scribbling on paper. But anything has got to be better than chipping away directly at handmade CSS unless you really know what you want.
I was thinking about saying "scribbling might not cut it for a formal presentation" but the awesome SO crowd beat me to it in the comments...
Personally, and at every webdev firm I've worked at, I've always mocked-up in photoshop first. Jumping straight into CSS and markup is more of a bottom-up approach and makes sense to a lot of programmers but in web development you have to keep in mind that there are aesthetics to consider and a creative direction to follow. It's not enough that your product is functional, it needs the input of a professional creative-director/graphic-designer in order to make the product pleasant to look at and use.
In my experience, the problem has always been wrestling with inflexibility of team-members. Graphic designers who are aesthetics focussed and refuse to compromise their design integrity; which sometimes results in impossible or extremely difficult and un-semantic layouts. Developers who flatly refuse to compromise the integrity of their code where there is a workable solution - which might be a little less elegant. The key is to have a creative team who is intimately familiar with CSS and what is and isn't possible and an engineering team who have an appreciation of the importance of design and aesthetics.
In my freelance life (having had the benefit of working in both camps) I find it much easier to mock-up in photoshop first because I know what I can and can't do. And photoshop mockups are a lot easier to change on client feedback than are CSS and markup. Also, if you can show your client a mock-up, they feel more secure because they know that their money is going into a well planned project with a definate direction.
Hope this helps!