Tag Info

Hot answers tagged

18

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


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 ...


12

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;


12

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 ...


9

You could use CSS3 (keeping in mind this won't work with older versions of IE). For example, you could combine some shapes like a rectangle and two triangles. See this jsfiddle. HTML: <div id="square"></div> <div class="align"> <div id="triangle-topleft"></div> <div id="triangle-topright"></div> ...


8

If you mean something like this: Edit: here's a better way, which only requires one HTML element and so won't be weird when read by non-CSS-styling clients like search engines, screen readers, RSS, 'no style' apps etc (thanks to Dominic for suggesting trying :before and :after). http://jsbin.com/UtUlIFO/2/edit The important code (add colours to this): ...


8

I suggest making the font bold (just a change of weight, not the font itself) and respecifying the shadow so that it defines all the edges of the letters: font-family: Raleway; font-weight:900; text-shadow: 0px 0px 3px #000; You can even combine more than one text-shadow to create a definite outline as well as a blur: text-shadow: 0px 0px 3px #000, ...


7

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. ...


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 ...


7

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 ...


7

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 ...


7

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 ...


7

As an alternative to the already great answers, how about adding a black div with 50% opacity behind the text? This would allow the font to work on basically any image also. div { position:absolute; top:250px; left:140px; width:500px; height:50px; background-color:black; z-index:0; opacity:0.5; } EXAMPLE


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

** 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 ...


6

The baseline grid in web design is a need academic puzzle but mostly impractical from a hard-coded mathematical standpoint. Since CSS has no concept of a baseline for type, it's technically impossible to get baselines to match. You can come close to spacing things, but you eventually end up with something that may make sense when looking at the numbers, but ...


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 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 ...


6

If it's visual representations of elements you're looking for, nothing beats Firefox's 3D view. Open Firefox, press F10 to show the toolbar if necessary, go to tools, hover over web developer and get familiar with all those awesome tools. To open the 3D view, make sure the console is visible by selecting one of the options in the web developer menu such ...


6

Making something look raised or "pushed' is all about lighting and shadows. The human eye and brain interprets shadows as depth. So if you adjust shadows, you can give off the perceptions of depth in a specific area. For a button, adding a shadow below the element in the resting state causes the element to appear raised. If you move the shadow to the top ...


6

Sure, you can use the ExtendScript Toolkit to investigate and manipulate Photoshop documents. For more info, check the documentation or search around the various PS scripting forums. Based on the script in this article, I whipped up the following script. For every text layer in a PSD file, it will print the font, font-size, and fill-color to the javascript ...


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

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

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

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 ...



Only top voted, non community-wiki answers of a minimum length are eligible