Hot answers tagged css
16
A web designer should understand how code works and what it's capable of, in the same way a print designer understands what ink on paper will look like and how paper can fold or be cut. Any designer should understand the limitations and strengths of the chosen medium.
If a web designer is creating this drop-dead gorgeous site, it would behoove him or her ...
16
Do web designers need to know basic modern CSS and HTML techniques?
Yes.
Why or why not is this important for a well rounded web designer?
I answered "yes" because you used the word basic.
It is absolutely essential that web designers know basic HTML and CSS techniques, in the same way that architects must know something about physics and ...
15
You might be able to find something similar in the Google Fonts Directory. All you have to do is include their link in your html page's head and you can use the fonts in your css.
http://www.google.com/fonts/
PT Sans is pretty similar (compared to the rest of the list):
http://www.google.com/fonts/specimen/PT+Sans
10
If your website targets the designer crowd, many of them will have the Adobe Suite installed (don't ask by what means). Kottke.org uses it without css embedding, and this is his font family rule:
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
9
Gotta disagree with everyone. Photoshop is not a tool for designing a web site. It's a tool for sketching out a web site. The web site should still be designed in the medium that it's in--which tends to be CSS, HTML and JS.
That doesn't mean you don't use Photoshop. But you certainly don't have to.
I'm a huge fan of not ever showing web site designs in ...
7
The 2 fixed columns with 1 fill column has been referred to as "The Holy Grail" of CSS layouts.
Check out: http://www.alistapart.com/articles/holygrail/
The example on that page is geared for fixed gutters and variable center column, but the concept is the same.
7
The real answer to this question comes directly from asking "How does it work in the real world?" An effect like this will seem artificial and wrong if it doesn't mimic what would happen with a physical object. This is a general principle that applies to all the effects we use on websites, on paper, or in movies. A classic error in Photoshop compositing is ...
6
Use method one.
In providing content to the user, the physical content should be clearly distinguishable from the background - this is the figure and ground rule. The figure is the area of interest.
Therefore where the golden ratio should be applied is in the ratio between the two figures (the two areas of physical content), and not applied to the ratio ...
6
Here's my attempt at creating this using CSS. The main idea here is to use both CSS3 multiple backgrounds and gradients to create the effect - a radial transparent to semi-transparent black gradient layered over a bright pink to dark red linear gradient.
The glaring omission is the lack of inset text shadow, which is CSS does not, and will probably not ...
6
I used an automatic photoshop script once and worked well.
The concept is :
Each portion is a different image.
Each portion (and so, each images) must be in the same folder w/o any other images.
Run the script indicating the folder and some parameters (size, css name, etc...).
The script does :
Merge all images into one with the size you indicated.
...
6
The description of text-decoration: underline in CSS 2.1 spec defines its effect just as underlining, without details, but browsers implement it as appearing just a little below the baseline. Thus, it often cuts descenders (and diacritic marks placed below a letter).
In the CSS3 Text draft, there is the text-underline-position position, but it does not seem ...
6
What is most common?
Well, some typographers will say that underlining should probably be avoided all together, and that underlining is only appropriate for use on typewriters or on hyperlinks on the web. However, I would add that creativity is about seeing opportunities to break rules in creative ways so how much you let this guide you is up to you.
On ...
6
The advantages tend to be primarily:
Rapid Prototyping (ie, speed)
Built-in Cross browser consistency
If you need to create a grid, and the grid you need to create fits the pre-built CSS framework, then the logic is that you're halfway there by using the framework.
All that said, I tend to agree with you. CSS frameworks, IMHO, are like visual design ...
6
The nice thing about templating systems and frameworks is that they can save you a lot of time iff you work the way they want you to. So, with Bootstrap, once you learn their semantics for doing a JS carousel, it's almost criminally simple to implement. Also, Bootstrap seems to get a lot simpler if you either roll your own before you get started or use ...
5
You have various choices:
One day in the future you could use @font-face loading any font that you want (which license is free to distribution).
If you use it only for titles, you could use the SIFR technique that use flash, or a simple Image Replacement technique
Or you could use, like already suggested payment hosting servers for font Typekit.
5
this is the best repository i know
css 101
and some thing that bother most of us is floating
as far as books are concern i love "Eric Meyer" way of doing stuff, but some other worth mentioning books i read
CSS Cookbook by Christopher Schmitt
Core CSS by Keith Schengili-Roberts
hope that will help you getting startted
cheers
5
It all depends how is structured your html, to apply the right CSS style, the right colors and effect.
Try to look here for some visual examples on this article
and here there is the source file with the css and html
About printing consider that backgrounds are not printed (colored backgrounds and image backgrounds) you should use the media print. An ...
5
Yes and no. Knowing how your target environment works is important, but it's not really important that you understand the specific code required to make the system work that way. In other words - I wouldn't worry about specific syntax to create rounded corners in all major browser engines, but I would consider it important that you understand whether or ...
5
Google Web Fonts allows you to do pretty much what the ampersand site did, and perhaps with even more fonts to choose from. Check out the GWF Getting Started page linked below, and look for the section titled "Optimizing your font requests (beta)" which talks about how to link a small subset of any Google Web Font for use on your site. This will allow you to ...
5
the designer does not create the HTML with same fonts ie the boldness goes away and the font does not look similar as per the PSD means the quality is too degraded.
...
this is not possible i.e. The same font size, boldness cannot be achieved in the html while conversion
...
Can you please specify is it really true?
This is a fairly accurate ...
5
It's a bit confusing as to what you are asking, as kerning and line spacing are two different things.
However, I think what you are asking is how to set type in PhotoShop so it matches what you have set in your browser via CSS.
The answer to that is: you can't.
PhotoShop is a fixed canvas meaning you have full control over everything...the font, the ...
5
CSS TEXT-JUSTIFY
This property appears to offer a refinement on the “justify” value used in the ‘text-align’ property. Indeed, the “justify” value must be set for that property for ‘text-justify’ to have any effect.
Text-justify offers a fine level of justification control over the enclosed content, allowing for a variety of sophisticated justification ...
5
The effect you're talking about is called Vertical Alignment, in this case bottom vertical alignment. In design applications like InDesign (but not Illustrator without hacking, moan whinge moan...) there's a simple button for it.
In HTML / CSS, vertical alignment isn't so simple. Vertical alignment for a table cell is easy, vertical-align: bottom; starts ...
5
I'm familiar with HTML5 Boilerplate, but I'm more familiar with Bootstrap, so I'll talk about that. Remember that both are geared towards two different tasks, (H5BP is a responsive normalized template, Bootstrap is a collection of HTML/CSS/JS widgets and a responsive grid.) In fact they can be used together.
However, I can't help but wonder if Bootstrap ...
4
Subtle radial gradient for the background. It has a constant hue. The saturation varies because they wanted a soft, plastic effect.
The "hole" effect is made via a Photoshop feature called layer styles. It's easy in Photoshop but GIMP doesn't have layer styles so I think there's no easy way there.
Since this particular logo is simple, you can just look at ...
4
You could find a font that has a very unique "!" and use the Font Squirrel @font-face generator and choose expert settings with custom subsettings and only include the ! character for the font.
Add the font to your stack as the first font and it will only render for the !
For this example I chose Heartbreaker Regular as the font and created an @font-face ...
4
Lauren, ghoppe and Farray all speak sooth, so I'll not rehash any of what they said. As a matter of practicality, let me offer another take on your explicit and implicit questions.
The best approach for a developer is the same one that printers have been beating the drum about since Gutenberg cut his first type: insist that the designer involve you in the ...
4
In my experience (I'm a coder, not a designer), it is not so much a question that the web designer should know about code. But they should know about how their work is being applied inside a browser.
The greatest problem with designers without enough knowledge about web/browsers is that they create designs that look beautiful, but don't really work inside ...
4
** EDIT **
New Client?
Absolutely - If you're pitching a design for a NEW client/site. Lay-folk generally have a hard time seeing what's in your(my) head. Wireframes, drawings, etc. don't always cut it either - scratch that - they don't cut it. I hear more, "I thought it was going to do X" from clients when all they have is a WF, or sketch than I do when ...
Only top voted, non community-wiki answers of a minimum length are eligible
