Tag Info

Hot answers tagged

17

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


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


13

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


12

GIFs For most simple animations, a gif is often the best way to go, especially when they don't require much interaction, are as detailed as the illustration you linked and don't need to have a dynamic width (gifs, like any image, can be blurry at times if their widths is changed). The animation you linked could be just a gif and a transparent overlay to ...


10

If you mean something like this: Edit: here's a 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 your colours to this): ...


10

You could use CSS (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> ...


10

Demo css .demo-container { height:300px; overflow:hidden; display:block; position:relative; /* CSS3 Gradient */ background: rgb(125,126,125); background: ...


9

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


9

I didn't love the answers and comments already provided; too much code for a simple sphere in html - css. You can simply do: <div class = "sphere">Test</div> The CSS: body { background: #333; } .sphere { width: 200px; height: 200px; line-height: 200px; text-align: center; color: #FFF; margin: 100px auto; ...


8

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


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


8

Skeuomorphism is really the opposite of flat design. Google's "Material Design" is merely their branding name for their specific interpretations of flat design. It's still flat design though. "FLat Design" was coined by Apple when they released iOS7. It caught on because it was the first term used, it could just have easily been called "Material Design" if ...


8

I would not continue trying to learn how to slice up a PSD for HTML. This practice is outdated and you're only going to be hurting yourself down the road. In regards to "current standards" people usually code in an IDE. One thing you have to understand with slicing is if you have a responsive website you're going to spend a ton of time trying to cut a ...


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

Check out The League of Movable Type over at http://www.theleagueofmoveabletype.com/. All of their fonts are free, designer-created, and come with the fonts needed for @font-face usage.


7

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


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

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


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


7

Open image in Photoshop Go to Filters > Other > Offset Adjust vertical offset so that the image seam is in the middle of the image Use the liquify tool to seamlessly connect the ribbons together Fail miserably Consider trimming all excess whitespace, and use background-size: contain instead More info on the background-size property


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

Just one thing to say: WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW [EDIT] Update - OK - I concede there are some much wider characters: ؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁


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

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

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

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



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